diff options
Diffstat (limited to 'browser/themes/windows/browser.css')
| -rw-r--r-- | browser/themes/windows/browser.css | 395 |
1 files changed, 395 insertions, 0 deletions
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css new file mode 100644 index 0000000000..5698fb3d99 --- /dev/null +++ b/browser/themes/windows/browser.css @@ -0,0 +1,395 @@ +/* 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)); +} + +#print-preview-toolbar:not(:-moz-lwtheme) { + appearance: auto; + -moz-default-appearance: toolbox; +} + +/* 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; +} |