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/. */

@import url("chrome://browser/skin/browser-shared.css");
@import url("chrome://browser/skin/contextmenu.css");
@import url("chrome://browser/skin/browser-custom-colors.css");

#menubar-items {
  flex-direction: column; /* for flex hack */
  justify-content: normal; /* align the menubar to the top also in customize mode */
}

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

  &[_moz-menuactive] {
    background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));
    color: inherit;

    @media (prefers-contrast) {
      background-color: -moz-menuhover;
      color: -moz-menuhovertext;
    }
  }
}

@media (-moz-windows-accent-color-in-titlebar) {
  :root[tabsintitlebar] {
    /* stylelint-disable-next-line media-query-no-invalid */
    @media (-moz-bool-pref: "browser.theme.windows.accent-color-in-tabs.enabled") {
      --toolbox-non-lwt-bgcolor: ActiveCaption;
      --toolbox-non-lwt-textcolor: CaptionText;
      --toolbox-non-lwt-bgcolor-inactive: InactiveCaption;
      --toolbox-non-lwt-textcolor-inactive: InactiveCaptionText;

      #TabsToolbar:not(:-moz-lwtheme) {
        /* These colors match the Linux/HCM default button colors. We need to
         * override these on the tabs toolbar because the accent color is
         * arbitrary, so the hardcoded colors from browser-custom-colors might
         * not provide sufficient contrast. */
        --toolbarbutton-icon-fill: currentColor;
        --toolbarbutton-hover-background: color-mix(in srgb, currentColor 17%, transparent);
        --toolbarbutton-active-background: color-mix(in srgb, currentColor 30%, transparent);
      }
    }

    &[sizemode="normal"] #navigator-toolbox {
      border-top: .5px solid ActiveBorder;
      &:-moz-window-inactive {
        border-top-color: InactiveBorder;
      }
    }
  }
}

/* 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));
}

/* Titlebar */

.titlebar-buttonbox {
  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 {
  align-items: stretch;

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

/* Window control buttons */

.titlebar-button {
  appearance: none;
  border: none;
  margin: 0;
  padding: 8px 17px;
  -moz-context-properties: stroke;
  stroke: currentColor;

  :root[tabletmode] & {
    display: none;
  }

  &:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-outline-inset);
  }

  > .toolbarbutton-icon {
    width: 12px;
    height: 12px;

    &:-moz-locale-dir(rtl) {
      transform: scaleX(-1);
    }
  }
}

.titlebar-min {
  /* Even though we use appearance: none, -moz-default-appearance is necessary
   * for Windows 11's "snap layouts" feature, see
   * DealWithWindowsAppearanceHacks */
  -moz-default-appearance: -moz-window-button-minimize;
  list-style-image: url(chrome://browser/skin/window-controls/minimize.svg);
}

.titlebar-max {
  -moz-default-appearance: -moz-window-button-maximize;
  list-style-image: url(chrome://browser/skin/window-controls/maximize.svg);
}

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

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

:root[lwtheme-image] {
  .titlebar-button {
    -moz-context-properties: unset;
  }
  .titlebar-min {
    list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg);
  }
  .titlebar-max {
    list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg);
  }
  .titlebar-restore {
    list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg);
  }
  .titlebar-close {
    list-style-image: url(chrome://browser/skin/window-controls/close-themes.svg);
  }
}

@media not (prefers-contrast) {
  .titlebar-button:hover {
    background-color: light-dark(hsla(0,0%,0%,.12), hsla(0,0%,100%,.22));

    &:active {
      background-color: light-dark(hsla(0,0%,0%,.22), hsla(0,0%,100%,.32));
    }
  }

  .titlebar-close:hover {
    stroke: white;
    background-color: hsl(355,86%,49%);

    &:active {
      background-color: hsl(355,82%,69%);
    }
  }
}

@media (prefers-contrast) {
  .titlebar-button {
    background-color: -moz-field;
    stroke: ButtonText;

    &:hover {
      background-color: SelectedItem;
      stroke: SelectedItemText;
    }
  }

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

  .titlebar-max {
    list-style-image: url(chrome://browser/skin/window-controls/maximize-highcontrast.svg);
  }

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

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

/* the 12px image renders a 10px icon, and the 10px upscaled gets rounded to 12.5, which
 * rounds up to 13px, which makes the icon one pixel too big on 1.25dppx. Fix: */
@media (1.20dppx <= resolution <= 1.45dppx) {
  .titlebar-button > .toolbarbutton-icon {
    width: 11.5px;
    height: 11.5px;
  }
}

/* 175% dpi should result in the same device pixel sizes as 150% dpi. */
@media (1.70dppx <= resolution <= 1.95dppx) {
  .titlebar-button {
    padding-inline: 14.1px;

    > .toolbarbutton-icon {
      width: 10.8px;
      height: 10.8px;
    }
  }
}

/* 225% dpi should result in the same device pixel sizes as 200% dpi. */
@media (2.20dppx <= resolution <= 2.45dppx) {
  .titlebar-button {
    padding-inline: 15.3333px;

    > .toolbarbutton-icon {
      width: 10.8px;
      height: 10.8px;
    }
  }
}

/* 275% dpi should result in the same device pixel sizes as 250% dpi. */
@media (2.70dppx <= resolution <= 2.95dppx) {
  /* NB: todo: this should also change padding on the buttons
   * themselves, but without a device to test this on, it's
   * impossible to know by how much. */
  .titlebar-button > .toolbarbutton-icon {
    width: 10.8px;
    height: 10.8px;
  }
}

/* Bookmark menus */

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

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

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

    > .toolbarbutton-text,
    > .menu-iconic-left > .menu-iconic-text {
      opacity: 0.7;
    }
  }

  &:is(toolbarbutton)[dragover="true"][open="true"] {
    appearance: none;
    background: SelectedItem !important;
    color: SelectedItemText !important;
    fill: SelectedItemText;
  }
}

/* Bookmarks roots menu-items */

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

/* Address bar */

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

/* stylelint-disable-next-line media-query-no-invalid */
@media (-moz-bool-pref: "browser.urlbar.experimental.expandTextOnFocus") {
  #urlbar[breakout-extend] {
    font-size: 1.25em;
  }
}

@media (prefers-contrast) {
  :root {
    /* Windows HCM conventions use these colors for chiclets. We can't use them on
       other platforms because AccentColor can be shown atop SelectedItem,
       which has zero contrast. */
    --urlbar-box-hover-bgcolor: SelectedItem;
    --urlbar-box-active-bgcolor: SelectedItem;
    --urlbar-box-hover-text-color: SelectedItemText;
  }

  #urlbar:not(:-moz-lwtheme, [focused="true"]) > #urlbar-background,
  #searchbar:not(:-moz-lwtheme, :focus-within),
  .findbar-textbox:not(:-moz-lwtheme, :focus) {
    border-color: ThreeDShadow;
  }
}

/* Autocomplete */

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

/* Tabstrip */

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

@media (prefers-contrast) {
  /* For high contrast themes. XXX is this needed anymore? */
  #tabbrowser-tabpanels,
  :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
    background-color: -moz-default-background-color;
  }
}

/* All tabs menupopup */

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

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

/* Make menu items larger when opened through touch. */
panel[touchmode],
menupopup[touchmode] {
  --arrowpanel-menuitem-padding-block: 12px;
  --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
  /* The value for the header back icon padding is selected in a way that the
   * height of the header and its separator will be equal to the panel inner
   * top padding plus standard menuitem, so that the header's separator will
   * be located excatly where a normal toolbarseparator would be located after
   * the first menuitem, in a menu without a header. */
  --arrowpanel-header-back-icon-padding: 10px;
}

:root[uidensity="compact"] panel[touchmode] {
  --arrowpanel-header-back-icon-padding: 12px;
}

menupopup[touchmode] :is(menu, menuitem, menucaption) {
  /* Use the var set in the rule above to increase menu items height in menupopups when
   * they are opened through touch.
   * Panel menu items already have their padding set in panelUI-shared.css with the same var. */
  padding-block: var(--arrowpanel-menuitem-padding-block);
}

#contentAreaContextMenu[touchmode] > #context-navigation > menuitem {
  /* The navigation menuitems are bigger to begin with because of their inner padding,
   * so calculate the padding-block to match normal menuitems height when in touchmode.
   * 3.5em is the desired menuitem height (~42px), minus the menuitem actual height devided by 2. */
  padding-block: calc((3.5em - 32px) / 2);
}

/* Other menu separators don't extend all the way to the menu edges, but the
   one below the navigation buttons in the content context menu should. */
#context-sep-navigation {
  padding-inline: 0;
}