path: root/browser/themes/windows/browser.css

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@namespace html url("http://www.w3.org/1999/xhtml");

%include ../shared/browser.inc.css
%filter substitution
%define glassShadowColor hsla(240,5%,5%,0.3)

:root {
  --toolbar-non-lwt-bgcolor: -moz-dialog;
  --toolbar-non-lwt-textcolor: -moz-dialogtext;
  --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));

  --toolbarbutton-vertical-text-padding: calc(var(--toolbarbutton-inner-padding) - 1px);
  --toolbarbutton-border-radius: 2px;
  --toolbarbutton-icon-fill-opacity: 1;

  --panel-separator-color: ThreeDLightShadow;
  --arrowpanel-dimmed: hsla(0,0%,80%,.35);
  --arrowpanel-dimmed-further: hsla(0,0%,80%,.5);
  --arrowpanel-dimmed-even-further: hsla(0,0%,80%,.8);

  --urlbar-separator-color: ThreeDLightShadow;

  --chrome-content-separator-color: ThreeDShadow;
}

#navigator-toolbox {
  --tabs-border-color: threedshadow;
}

#tabbrowser-tabs {
  --tab-line-color: highlight;
}

@media (-moz-windows-default-theme) {
  :root {
    --toolbar-non-lwt-bgcolor: #f9f9fa;
    --toolbar-non-lwt-textcolor: #0c0c0d;
    --toolbar-non-lwt-bgimage: none;

    --toolbarbutton-icon-fill-opacity: .7;

    --panel-separator-color: hsla(210,4%,10%,.14);

    --chrome-content-separator-color: #e1e1e2;
  }

  #navigator-toolbox {
    --tabs-border-color: rgba(0,0,0,.3);
  }

  #tabbrowser-tabs {
    --tab-line-color: #0a84ff;
  }
}

:root:-moz-lwtheme {
  --chrome-content-separator-color: rgba(0,0,0,.3);

  --panel-separator-color: hsla(210,4%,10%,.14);
}

:root[lwt-popup-brighttext] {
  --panel-separator-color: rgba(249,249,250,.1);

  --arrowpanel-dimmed: rgba(249,249,250,.1);
  --arrowpanel-dimmed-further: rgba(249,249,250,.15);
  --arrowpanel-dimmed-even-further: rgba(249,249,250,.2);
}

#navigator-toolbox:-moz-lwtheme {
  --tabs-border-color: rgba(0,0,0,.3);
}

#menubar-items {
  -moz-box-orient: vertical; /* for flex hack */
}

#main-menubar > menu {
  appearance: none;
  color: inherit;
}

#main-menubar > menu[_moz-menuactive="true"] {
  background-color: -moz-menuhover;
  color: -moz-menuhovertext;
}

/* Use a different color only on Windows 8 and higher in inactive windows.
 * On Win 7, the menubar fog disappears for inactive windows, and renders gray
 * illegible.
 */
@media (-moz-windows-default-theme) {
  @media not (-moz-os-version: windows-win7) {
    #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive {
      color: ThreeDShadow;
    }
  }
}

@media not (-moz-os-version: windows-win7) {
  @media not (-moz-os-version: windows-win8) {
    /* On Windows 10, when temporarily showing the menu bar, make it at least as
     * tall as the tab bar such that the window controls don't appear to move up. */
    :root[tabsintitlebar] #toolbar-menubar[autohide="true"] {
      height: calc(var(--tab-min-height) - var(--tabs-navbar-shadow-size));
    }
    :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"] {
      height: calc(var(--tab-min-height) + var(--space-above-tabbar) - var(--tabs-navbar-shadow-size));
    }
  }
}

:root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
:root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
  padding-top: var(--space-above-tabbar);
}

/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */
@media (-moz-os-version: windows-win7) {
  :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items,
  :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items {
    padding-top: calc(var(--space-above-tabbar) + 4px);
  }
}

#navigator-toolbox,
.browser-toolbar {
  appearance: none;
}

.browser-toolbar:not(.titlebar-color) {
  background-color: var(--toolbar-bgcolor);
  background-image: var(--toolbar-bgimage);
  background-clip: padding-box;
  color: var(--toolbar-color);
}

/*
 * Windows 7 draws the chrome background color as the tab background
 * instead of in the tabs toolbar.
 */
@media (-moz-os-version: windows-win7) {
  @media (-moz-windows-default-theme) {
    #navigator-toolbox:not(:-moz-lwtheme) {
      --tabs-border-color: @glassShadowColor@;
    }

    #TabsToolbar:not(:-moz-lwtheme) {
      color: hsl(240,9%,98%);
    }

    /* Always show full-height tab separators on tabs with borders. */
    .tabbrowser-tab:not(:-moz-lwtheme)::before,
    .tabbrowser-tab:not(:-moz-lwtheme)::after {
      border-image: none !important;
    }

    /* Show border on tabs with background colors and
     * show the tabs toolbar background color inside tabs. */
    .tabbrowser-tab:not(:-moz-lwtheme) {
      background-color: hsl(235,33%,19%) !important;
      border-top: 1px solid var(--tabs-border-color);
      background-clip: padding-box;
    }

    /* The top border on top of the tab background is replaced
     * by the slightly transparent outside tabs-border-color. */
    .tab-background:not(:-moz-lwtheme) {
      border-top-style: none !important;
    }

    /* The border at the end of the tab strip is replaced
     * by the slightly transparent outside tabs-border-color. */
    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme) {
      border-inline-end: 1px solid var(--tabs-border-color);
    }

    .tabbrowser-tab[last-visible-tab]:not(:-moz-lwtheme)::after {
      display: none !important;
    }
  }
}

@media (-moz-windows-compositor: 0),
       (-moz-windows-default-theme: 0) {
  /* Please keep the menu text colors in this media block in sync with
   * compacttheme.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
   */
  :root[tabsintitlebar]:not([inFullscreen], :-moz-lwtheme) {
    color: CaptionText;
  }

  :root[tabsintitlebar]:not([inFullscreen], :-moz-lwtheme):-moz-window-inactive {
    color: InactiveCaptionText;
  }
}

@media (-moz-windows-classic) {
  /**
   * In the classic themes, the titlebar has a horizontal gradient, which is
   * problematic for reading the text of background tabs when they're in the
   * titlebar. We side-step this issue by layering our own background underneath
   * the tabs.
   */
  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
    background-image: linear-gradient(transparent, ActiveCaption);
    background-size: auto 200%;
  }

  :root[tabsintitlebar]:not([sizemode=fullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
    background-image: linear-gradient(transparent, InactiveCaption);
  }

  /* Add a window top border for webextension themes */
  :root[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme {
    background-image: linear-gradient(to bottom,
          ThreeDLightShadow 0, ThreeDLightShadow 1px,
          ThreeDHighlight 1px, ThreeDHighlight 2px,
          ActiveBorder 2px, ActiveBorder 4px, transparent 4px);
  }

  :root[tabsintitlebar]:not([inFullscreen]) :is(#TabsToolbar, #toolbar-menubar) toolbarbutton:not(:-moz-lwtheme) {
    color: inherit;
  }
}

#nav-bar:not([tabs-hidden="true"]) {
  /* This is needed for some toolbar button animations. Gross :( */
  position: relative;
}

#nav-bar {
  box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--tabs-border-color);
}
@media (-moz-windows-compositor: 0) {
  #nav-bar[tabs-hidden="true"] {
    box-shadow: none;
  }
}

#print-preview-toolbar:not(:-moz-lwtheme) {
  appearance: auto;
  -moz-default-appearance: toolbox;
}

#browser-bottombox:not(:-moz-lwtheme) {
  background-color: -moz-dialog;
}

/* Titlebar */

:root[tabsintitlebar][sizemode="normal"] #titlebar {
  appearance: auto;
  -moz-default-appearance: -moz-window-titlebar;
}

:root[tabsintitlebar][sizemode="maximized"] #titlebar {
  appearance: auto;
  -moz-default-appearance: -moz-window-titlebar-maximized;
}

@media (-moz-windows-compositor: 0) {
  /**
   * Anytime we're not using the compositor on Windows, the -moz-window-titlebar
   * and -moz-window-titlebar-maximized values for -moz-appearance override
   * backgrounds supplied by lwthemes. We make the #titlebar itself hidden, but
   * it's children visible in order to hide the background but keep the margin and
   * padding that comes from those -moz-window-titlebar rules.
   */
  :root:not([inDOMFullscreen]) #titlebar:-moz-lwtheme {
    visibility: hidden;
  }
  :root:not([inDOMFullscreen], [chromehidden~="menubar"]) #toolbar-menubar:-moz-lwtheme,
  :root:not([inDOMFullscreen], [chromehidden~="toolbar"]) #TabsToolbar:-moz-lwtheme {
    visibility: visible;
  }
}

@media (-moz-windows-classic) {
  :root[tabsintitlebar][sizemode="normal"] #toolbar-menubar {
    margin-top: 4px;
  }
}

.titlebar-buttonbox {
  /* For all Windows configurations except for Windows Aero and Windows Aero Basic,
   * the default -moz-default-appearance of -moz-window-button-box and
   * -moz-window-button-box-maximized adds unwanted margins to the button box. We
   * special case Windows Aero and Windows Aero Basic in browser-aero.css.
   */
  appearance: none;
  /* The button box must appear on top of the navigator-toolbox in order for
   * click and hover mouse events to work properly for the button in the restored
   * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
   * can swallow those events. It will also place the buttons above the fog on
   * Windows 7 with Aero Glass.
   */
  z-index: 1;
}

.titlebar-buttonbox-container {
  -moz-box-align: stretch;
}

@media (-moz-os-version: windows-win7),
       (-moz-os-version: windows-win8) {
  /* Preserve window control buttons position at the top of the button box. */
  .titlebar-buttonbox-container {
    -moz-box-align: start;
  }
}

/* Window control buttons */

.titlebar-min {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-minimize;
}

.titlebar-max {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-maximize;
}

.titlebar-restore {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-restore;
}

.titlebar-close {
  appearance: auto;
  -moz-default-appearance: -moz-window-button-close;
}

@media (-moz-windows-classic: 0) {
  .titlebar-min {
    margin-inline-end: 2px;
  }
}

:root[tabletmode] .titlebar-min,
:root[tabletmode] .titlebar-restore,
:root[tabletmode] .titlebar-max {
  display: none;
}

/* Bookmark menus */

menu.bookmark-item,
menuitem.bookmark-item {
  min-width: 0;
  max-width: 32em;
}

.bookmark-item:not(.subviewbutton) > .menu-iconic-left {
  margin-block: 0;
}

.bookmark-item > .menu-iconic-left > .menu-iconic-icon {
  padding-inline-start: 0;
}

.bookmark-item[cutting] > .toolbarbutton-icon,
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
  opacity: 0.5;
}

.bookmark-item[cutting] > .toolbarbutton-text,
.bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
  opacity: 0.7;
}


%include ../shared/toolbarbuttons.inc.css
%include ../shared/toolbarbutton-icons.inc.css
%include ../shared/menupanel.inc.css

/* Fullscreen window controls */

#minimize-button,
#restore-button,
#close-button {
  appearance: none;
  padding: 6px 12px;
  -moz-context-properties: stroke;
  stroke: currentColor;
  color: inherit;
}

#minimize-button {
  list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}

#restore-button {
  list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
}

#restore-button > .toolbarbutton-icon:-moz-locale-dir(rtl) {
  transform: scaleX(-1);
}

#minimize-button:hover,
#restore-button:hover {
  background-color: hsla(0,0%,0%,.12);
}

#minimize-button:hover:active,
#restore-button:hover:active {
  background-color: hsla(0,0%,0%,.22);
}

#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover,
#TabsToolbar[brighttext] > #window-controls > #restore-button:hover {
  background-color: hsla(0,0%,100%,.12);
}

#TabsToolbar[brighttext] > #window-controls > #minimize-button:hover:active,
#TabsToolbar[brighttext] > #window-controls > #restore-button:hover:active {
  background-color: hsla(0,0%,100%,.22);
}

#close-button {
  list-style-image: url(chrome://browser/skin/window-controls/close.svg);
}

#close-button:hover {
  background-color: hsl(355, 86%, 49%);
  stroke: white;
}

#close-button:hover:active {
  background-color: hsl(355, 82%, 69%);
}

@media (-moz-os-version: windows-win7) {
  #window-controls {
    -moz-box-align: start;
    margin-inline-start: 4px;
  }

  #minimize-button,
  #restore-button,
  #close-button {
    appearance: none;
    border-style: none;
    margin: 0;
    /* Important to ensure this applies even on toolbar[brighttext] */
    list-style-image: url("chrome://global/skin/icons/windowControls.png") !important;
    /* Also override background color to a avoid hover background styling
     * leaking through around the image. */
    background-color: transparent !important;
    padding: 0;
    -moz-context-properties: unset;
  }

  #minimize-button {
    -moz-image-region: rect(0, 16px, 16px, 0);
  }

  #minimize-button:hover {
    -moz-image-region: rect(16px, 16px, 32px, 0);
  }

  #minimize-button:hover:active {
    -moz-image-region: rect(32px, 16px, 48px, 0);
  }

  #restore-button {
    -moz-image-region: rect(0, 32px, 16px, 16px);
  }

  #restore-button:hover {
    -moz-image-region: rect(16px, 32px, 32px, 16px);
  }

  #restore-button:hover:active {
    -moz-image-region: rect(32px, 32px, 48px, 16px);
  }

  #close-button {
    -moz-image-region: rect(0, 48px, 16px, 32px);
  }

  #close-button:hover {
    -moz-image-region: rect(16px, 48px, 32px, 32px);
  }

  #close-button:hover:active {
    -moz-image-region: rect(32px, 48px, 48px, 32px);
  }

  #close-button {
    -moz-image-region: rect(0, 49px, 16px, 32px);
  }

  #close-button:hover {
    -moz-image-region: rect(16px, 49px, 32px, 32px);
  }

  #close-button:hover:active {
    -moz-image-region: rect(32px, 49px, 48px, 32px);
  }

  /* Normally there's no need to mirror these buttons for RTL,
     but both have curves at their bottom right/left, and without
     mirroring them their curves would appear in the wrong spot. */
  #minimize-button > .toolbarbutton-icon:-moz-locale-dir(rtl),
  #close-button > .toolbarbutton-icon:-moz-locale-dir(rtl) {
    transform: scaleX(-1);
  }
}

/* Address bar */

%include ../shared/urlbar-searchbar.inc.css

#urlbar,
#searchbar {
  font-size: 1.15em;
}

@supports -moz-bool-pref("browser.urlbar.experimental.expandTextOnFocus") {
  #urlbar[breakout-extend] {
    font-size: 1.25em;
  }
}

@media (-moz-windows-default-theme: 0) {
  #urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background,
  #searchbar:not(:-moz-lwtheme, :focus-within) {
    border-color: ThreeDShadow;
  }
}

#pageAction-urlbar-shareURL,
#pageAction-panel-shareURL {
  list-style-image: url("chrome://browser/skin/share.svg");
}

%include ../shared/identity-block/identity-block.inc.css
%include ../shared/notification-icons.inc.css
%include ../shared/addon-notification.inc.css

/* Address bar results view */

%include ../shared/urlbarView.inc.css

:root {
  --urlbar-popup-url-color: hsl(210, 77%, 47%);
  --urlbar-popup-action-color: hsl(178, 100%, 28%);
}

@media (-moz-windows-default-theme: 0) {
  :root:not(:-moz-lwtheme) {
    --urlbar-popup-url-color: -moz-nativehyperlinktext;
    --urlbar-popup-action-color: -moz-nativehyperlinktext;

    --urlbarView-button-text: buttontext;
    --urlbarView-button-background: buttonface;
    --urlbarView-button-background-hover: buttonface;
    --urlbarView-button-background-active: buttonface;
    --urlbarView-button-border: threedshadow;
    --urlbarView-primary-button-text: highlighttext;
    --urlbarView-primary-button-background: highlight;
    --urlbarView-primary-button-background-hover: highlight;
    --urlbarView-primary-button-background-active: highlight;
  }
}

/* Autocomplete */

%include ../shared/autocomplete.inc.css

#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
  border-top: 1px solid ThreeDShadow;
}

/* Bookmarking panel */

%include ../shared/places/editBookmarkPanel.inc.css

/* Content area */

%include ../shared/sidebar.inc.css

#browser {
  --sidebar-border-color: ThreeDLightShadow;
}

/* Tabstrip */

#TabsToolbar {
  min-height: 0;
  padding: 0;
}

%include ../shared/tabs.inc.css

@media (-moz-windows-default-theme: 0) {
  /* For high contrast themes. */
  #tabbrowser-tabpanels,
  :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
    background-color: -moz-default-background-color;
  }
}

/* tabbrowser-tab focus ring */
.keyboard-focused-tab > .tab-stack > .tab-content,
.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-content {
  outline: 1px dotted;
  outline-offset: -6px;
}

/* All tabs menupopup */

.alltabs-item[selected="true"] {
  font-weight: bold;
}

toolbarbutton.bookmark-item[dragover="true"][open="true"] {
  appearance: none;
  background: Highlight !important;
  color: HighlightText !important;
}

/* Translation infobar */

%include ../shared/translation/infobar.inc.css

/* Bookmarks roots menu-items */

#bookmarksToolbarFolderMenu,
#BMB_bookmarksToolbar,
#panelMenu_bookmarksToolbar {
  list-style-image: url("chrome://browser/skin/places/bookmarksToolbar.svg");
  -moz-image-region: auto;
}

/* Status panel */

#statuspanel-label {
  margin: 0;
  padding: 2px 4px;
  background-color: -moz-dialog;
  border: 1px none ThreeDLightShadow;
  border-top-style: solid;
  color: -moz-dialogText;
  text-shadow: none;
}

@media (-moz-windows-default-theme) {
  #statuspanel-label {
    background-color: #f9f9fa;
    color: #444;
  }
}

@media (prefers-color-scheme: dark) {
  #statuspanel-label {
    background-color: hsl(240, 1%, 20%);
    border-color: hsl(240, 1%, 40%);
    color: rgb(249, 249, 250);
  }
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl) {
  border-right-style: solid;
  /* disabled for triggering grayscale AA (bug 659213)
  border-top-right-radius: .3em;
  */
  margin-right: 1em;
}

#statuspanel:not([mirror]) > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(rtl),
#statuspanel[mirror] > #statuspanel-inner > #statuspanel-label:-moz-locale-dir(ltr) {
  border-left-style: solid;
  /* disabled for triggering grayscale AA (bug 659213)
  border-top-left-radius: .3em;
  */
  margin-left: 1em;
}

%include ../shared/fullscreen/warning.inc.css
%include ../shared/ctrlTab.inc.css

/* Customization mode */

%include ../shared/customizableui/customizeMode.inc.css

/* End customization mode */

/* Prevent window controls from overlapping the nav bar's shadow on the tab
 * bar. */
#TabsToolbar > .titlebar-buttonbox-container {
  margin-bottom: var(--tabs-navbar-shadow-size);
}

:root:not([privatebrowsingmode=temporary]) .accessibility-indicator,
.private-browsing-indicator {
  margin-inline-end: 12px;
}

:root:not([accessibilitymode]) .private-browsing-indicator,
.accessibility-indicator {
  margin-inline-start: 12px;
}

/* End private browsing and accessibility indicators */

%include ../shared/UITour.inc.css

#UITourTooltipButtons {
  /**
   * Override the --arrowpanel-padding so the background extends
   * to the sides and bottom of the panel.
   */
  margin-inline: -10px;
  margin-bottom: -10px;
}

%include ../shared/contextmenu.inc.css

/* Make menu items larger when opened through touch. */
#widget-overflow[touchmode] .toolbarbutton-1,
panel[touchmode] .PanelUI-subView .subviewbutton,
menupopup[touchmode] menu,
menupopup[touchmode] menuitem {
  padding-block: 12px;
}

panel[touchmode] .PanelUI-subView #appMenu-edit-controls > .subviewbutton,
panel[touchmode] .PanelUI-subView #appMenu-zoom-controls > .subviewbutton-iconic {
  padding-inline: 12px;
}

#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
  padding-block: 7px;
}

#context-navigation {
  background-color: menu;
  padding-bottom: 4px;
}

#context-sep-navigation {
  margin-inline-start: -28px;
  margin-top: -4px;
}

%include browser-aero.css

@media (-moz-os-version: windows-win7) {
  .cui-widget-panelview[id^=PanelUI-webext-] {
    border-radius: 4px;
  }
}

.webextension-popup-browser,
.webextension-popup-stack {
  border-radius: inherit;
}

.contentSelectDropdown-ingroup > .menu-iconic-text {
  padding-inline-start: 20px;
}

#ContentSelectDropdown > menupopup > menucaption,
#ContentSelectDropdown > menupopup > menuitem {
  padding: 0 6px;
  border-width: 0;
}

#ContentSelectDropdown > menupopup {
  font: -moz-list;
}

#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
#ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
  /* Padding should follow the 4/12 ratio, where 12px is the default font-size
     with 4px being the preferred padding size. */
  padding-block: .3333em;
}

#ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
  font-weight: bold;
}

#ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
  color: GrayText;
  background-color: unset;
}

#ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
  color: GrayText;
}

#ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
#ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
  /* Touch padding should follow the 11/12 ratio, where 12px is the default
     font-size with 11px being the preferred padding size. */
  padding-block: .9167em;
}