gecko-dev/browser/themes/windows/compacttheme.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/.

%include ../shared/compacttheme.inc.css

:root {
   /* Matches the #browser-border-start, #browser-border-end color */
  --chrome-nav-bar-separator-color: rgba(10, 31, 51, 0.35);
}

/* The window background is white due to no accentcolor in the lightweight
   theme. It can't be changed to transparent when there is no compositor
   (Win 7 in classic / basic theme), or else dragging and focus become
   broken. So instead just show the normal titlebar in that case, and override
   the window color as transparent when the compositor is available. */
@media (-moz-windows-compositor: 0) {
  #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
    visibility: visible;
  }

  /* Prevent accent color overriding the window background for
   * light and dark theme on Aero Basic. This is copied from browser-aero.css. */
  @media (-moz-windows-default-theme) {
    #main-window {
      background-color: rgb(185,209,234) !important;
    }
    #main-window:-moz-window-inactive {
      background-color: rgb(215,228,242) !important;
    }
  }
}

#toolbar-menubar {
  text-shadow: none !important;
}

@media (-moz-os-version: windows-win7) {
  @media (-moz-windows-default-theme) {
    /* Always show light toolbar elements on aero surface. */
    #TabsToolbar {
      color: hsl(240,9%,98%);
    }

    /* Keep showing the correct color inside the tabs. */
    .tabbrowser-tab {
      color: var(--chrome-color) !important;
    }

    /* Because we're forcing the tabs toolbar to be [brighttext] to
     * get white toolbar button icons, we need to manually set the
     * correct color for the tab hover state for the light theme. */
    .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]):-moz-lwtheme-darktext {
      background-color: rgba(0,0,0,.1) !important;
    }
    .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]):-moz-lwtheme-darktext {
      background-color: rgba(0,0,0,.2) !important;
    }
  }
}

@media (-moz-windows-glass) {
  /* Set to full fill-opacity to improve visibility of toolbar buttons on aero glass. */
  #TabsToolbar {
    --toolbarbutton-icon-fill-opacity: 1;
  }

  /* Make the menubar text readable on aero glass (copied from browser-aero.css). */
  #toolbar-menubar {
    text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4);
  }

  #main-menubar:not(:-moz-window-inactive) {
    background-color: rgba(255,255,255,.5);
    color: black;
    border-radius: 4px;
  }
}

@media (-moz-os-version: windows-win7),
       (-moz-os-version: windows-win8) {
  @media (-moz-windows-compositor) {
    #main-window {
      background: transparent !important;
    }

    /* Remove lwtheme borders from toolbars in non-maximized windows. */
    #toolbar-menubar,
    #TabsToolbar {
      border-left-style: none !important;
      border-right-style: none !important;
    }
  }

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

  /* Show border on tabs with background colors and
   * show the tabs toolbar background color inside tabs. */
  .tabbrowser-tab {
    background-color: var(--chrome-background-color) !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 {
    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] {
    border-inline-end: 1px solid var(--tabs-border-color);
  }

  .tabbrowser-tab[last-visible-tab]::after {
    display: none !important;
  }

  /* Use default window colors when in non-maximized mode */
  #tabbrowser-tabs,
  #TabsToolbar,
  #browser-panel,
  #titlebar-content {
    background: transparent;
  }

  /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */
  @media (-moz-windows-compositor: 0),
         (-moz-windows-default-theme: 0) {
    :root[tabsintitlebar]:not([inFullscreen]) {
      --titlebar-text-color: CaptionText;
    }

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

    #main-window[tabsintitlebar] #main-menubar > menu {
      color: inherit;
    }
  }
}

/* Restored windows get an artificial border on windows, because the lwtheme background
 * overlaps the regular window border. That isn't the case for us, so we avoid painting
 * over the native border with our custom borders: */
#browser-panel {
  /* These are !important to avoid specificity-wars with the selectors that add borders here. */
  background-image: none !important;
  border-top: none !important;
}

@media (-moz-os-version: windows-win10) {
  .titlebar-button:-moz-lwtheme {
    -moz-context-properties: stroke;
    stroke: currentColor;
  }
  #titlebar-min:-moz-lwtheme {
    list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
  }
  #titlebar-max:-moz-lwtheme {
    list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
  }
  :root[sizemode="maximized"] #titlebar-max:-moz-lwtheme {
    list-style-image: url(chrome://browser/skin/window-controls/restore.svg);
  }
  #titlebar-close:-moz-lwtheme {
    list-style-image: url(chrome://browser/skin/window-controls/close.svg);
  }
}