diff options
Diffstat (limited to 'browser/themes/windows')
32 files changed, 1819 insertions, 0 deletions
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css new file mode 100644 index 0000000000..e5ace71f65 --- /dev/null +++ b/browser/themes/windows/browser-aero.css @@ -0,0 +1,341 @@ +/* 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/. */ + +:root { + --glass-active-border-color: rgb(37, 44, 51); + --glass-inactive-border-color: rgb(102, 102, 102); + --glass-shadow-color: hsla(240,5%,5%,0.3); +} + +@media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + @media (-moz-windows-classic: 0) { + :root[sizemode="normal"] #toolbar-menubar:not([autohide="true"]) > #menubar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + margin-top: 1px; + } + /** + * Except for Windows 8, Windows 7 Aero and Windows 7 Aero Basic, the + * -moz-window-button-box appearance on the .titlebar-buttonbox adds an + * unwanted margin at the top of the button box. + * + * For Windows 8 and Windows Aero (which both use the compositor): + * We want the -moz-window-button-box applied in the restored case, + * and -moz-window-button-box-maximized in the maximized case. + * + * For Windows Aero Basic: + * The margin is also unwanted in the maximized case, but we want + * it in the restored window case. + */ + :root[sizemode="normal"] .titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box; + } + + @media (-moz-windows-compositor) { + :root[sizemode="maximized"] .titlebar-buttonbox { + appearance: auto; + -moz-default-appearance: -moz-window-button-box-maximized; + } + } + } +} + +@media (-moz-windows-compositor) { + @media not (-moz-platform: windows-win7) { + @media not (-moz-platform: windows-win8) { + @media (-moz-windows-default-theme) { + @media (-moz-windows-accent-color-in-titlebar) { + :root[sizemode=normal][tabsintitlebar] #navigator-toolbox { + border-top: .5px solid AccentColor; + } + } + + :root[sizemode=normal][tabsintitlebar]:-moz-window-inactive #navigator-toolbox { + border-top-color: rgb(57,57,57); + } + + :root[tabsintitlebar] .tab-label:-moz-window-inactive { + /* Calculated to match the opacity change of Windows Explorer + titlebar text change for inactive windows. */ + opacity: .6; + } + + :root[tabsintitlebar] .tab-secondary-label:-moz-window-inactive { + opacity: .6; + } + } + + /* See bug 1715990 about why we do this ourselves on HCM */ + @media (prefers-contrast) { + :root[tabsintitlebar]:not(:-moz-lwtheme) { + background-color: ActiveCaption; + color: CaptionText; + } + + :root[tabsintitlebar]:not(:-moz-lwtheme):-moz-window-inactive { + background-color: InactiveCaption; + color: InactiveCaptionText; + } + } + + .titlebar-buttonbox, + .titlebar-button { + appearance: none !important; + } + + .titlebar-button { + border: none; + margin: 0 !important; + padding: 8px 17px; + -moz-context-properties: stroke; + stroke: currentColor; + } + + .titlebar-button > .toolbarbutton-icon { + width: 12px; + height: 12px; + } + + .titlebar-min { + list-style-image: url(chrome://browser/skin/window-controls/minimize.svg); + } + + .titlebar-max { + list-style-image: url(chrome://browser/skin/window-controls/maximize.svg); + } + + .titlebar-restore { + list-style-image: url(chrome://browser/skin/window-controls/restore.svg); + } + + .titlebar-restore > .toolbarbutton-icon:-moz-locale-dir(rtl) { + transform: scaleX(-1); + } + + .titlebar-close { + list-style-image: url(chrome://browser/skin/window-controls/close.svg); + } + + :root[lwtheme-image] .titlebar-button { + -moz-context-properties: unset; + } + :root[lwtheme-image] .titlebar-min { + list-style-image: url(chrome://browser/skin/window-controls/minimize-themes.svg); + } + :root[lwtheme-image] .titlebar-max { + list-style-image: url(chrome://browser/skin/window-controls/maximize-themes.svg); + } + :root[lwtheme-image] .titlebar-restore { + list-style-image: url(chrome://browser/skin/window-controls/restore-themes.svg); + } + :root[lwtheme-image] .titlebar-close { + list-style-image: url(chrome://browser/skin/window-controls/close-themes.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 (min-resolution: 1.20dppx) and (max-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 (min-resolution: 1.70dppx) and (max-resolution: 1.95dppx) { + .titlebar-button { + padding-inline: 14.1px; + } + + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + /* 225% dpi should result in the same device pixel sizes as 200% dpi. */ + @media (min-resolution: 2.20dppx) and (max-resolution: 2.45dppx) { + .titlebar-button { + padding-inline: 15.3333px; + } + + .titlebar-button > .toolbarbutton-icon { + width: 10.8px; + height: 10.8px; + } + } + + /* 275% dpi should result in the same device pixel sizes as 250% dpi. */ + @media (min-resolution: 2.70dppx) and (max-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; + } + } + + @media (-moz-windows-default-theme) { + #main-menubar > menu[_moz-menuactive="true"] { + color: inherit; + } + + #main-menubar > menu[_moz-menuactive="true"], + .titlebar-button:hover { + background-color: hsla(0,0%,0%,.12); + } + .titlebar-button:hover:active { + background-color: hsla(0,0%,0%,.22); + } + + #toolbar-menubar[brighttext] > #menubar-items > #main-menubar > menu[_moz-menuactive="true"], + toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover { + background-color: hsla(0,0%,100%,.22); + } + toolbar[brighttext] .titlebar-button:not(.titlebar-close):hover:active { + background-color: hsla(0,0%,100%,.32); + } + + .titlebar-close:hover { + stroke: white; + background-color: hsl(355,86%,49%); + } + .titlebar-close:hover:active { + background-color: hsl(355,82%,69%); + } + + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { + opacity: 0.5; + } + } + + @media (-moz-windows-default-theme: 0) { + .titlebar-button { + background-color: -moz-field; + stroke: ButtonText; + } + .titlebar-button: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); + } + } + } + } + + @media (-moz-platform: windows-win7), + (-moz-platform: windows-win8) { + :root { + background-color: transparent; + appearance: auto; + -moz-default-appearance: -moz-win-borderless-glass; + } + + :root[sizemode="maximized"] .titlebar-buttonbox { + margin-inline-end: 3px; + } + + /* These should be hidden w/ glass enabled. Windows draws its own buttons. */ + .titlebar-button { + display: none; + } + + /* The borders on the glass frame are ours, and inside #browser, and on + * win7 we want to make sure they are "glassy", so we can't use #browser + * as the exclude-glass container. We use #appcontent instead. */ + #appcontent { + appearance: auto; + -moz-default-appearance: -moz-win-exclude-glass; + } + } + + @media (-moz-platform: windows-win8) { + /* Artificially draw window borders that are covered by lwtheme, see bug 591930. + * Borders for win7 are below, win10 only needs something like this when + * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */ + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + border-top: 1px solid var(--glass-shadow-color); + } + } + + :root[darkwindowframe="true"]:not(:-moz-window-inactive, :-moz-lwtheme) { + color: white; + } + + #appcontent:not(:-moz-lwtheme) { + background-color: -moz-dialog; + } +} + +@media (-moz-windows-glass) { + #toolbar-menubar:not(:-moz-lwtheme) { + text-shadow: 0 0 .5em white, 0 0 .5em white, 0 1px 0 rgba(255,255,255,.4); + } + + #main-menubar:not(:-moz-lwtheme, :-moz-window-inactive) { + background-color: rgba(255,255,255,.5); + color: black; + border-radius: 4px; + } + + /* Artificially draw window borders that are covered by lwtheme, see bug 591930. + * We use a different border for win8, and this win10+ only needs this if + * drawing in the titlebar (-moz-windows-accent-color-in-titlebar). */ + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + border-top: 1px solid var(--glass-active-border-color); + padding-top: 1px; + box-shadow: 0 1px 0 rgba(255,255,255,.6) inset; + } + + #main-window[sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive { + border-top-color: var(--glass-inactive-border-color); + } +} + +/* Aero Basic */ +@media (-moz-windows-compositor: 0) { + @media (-moz-windows-default-theme) { + :root { + background-color: rgb(185,209,234); + } + :root:-moz-window-inactive { + background-color: rgb(215,228,242); + } + + /* Render a window top border for lwthemes: */ + #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme { + background-image: linear-gradient(to bottom, + var(--glass-active-border-color) 0, var(--glass-active-border-color) 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + + #main-window[tabsintitlebar][sizemode="normal"] #navigator-toolbox:-moz-lwtheme:-moz-window-inactive { + background-image: linear-gradient(to bottom, + var(--glass-inactive-border-color) 0, var(--glass-inactive-border-color) 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + } + + #print-preview-toolbar:not(:-moz-lwtheme) { + appearance: auto; + -moz-default-appearance: -moz-win-browsertabbar-toolbox; + } +} diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css new file mode 100644 index 0000000000..c91b0d3ac6 --- /dev/null +++ b/browser/themes/windows/browser.css @@ -0,0 +1,588 @@ +/* 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"); + +@namespace html url("http://www.w3.org/1999/xhtml"); + +:root { + --toolbar-non-lwt-bgcolor: color-mix(in srgb, -moz-dialog 85%, white); + --toolbar-non-lwt-textcolor: -moz-dialogtext; + + --panel-separator-color: ThreeDLightShadow; + + --chrome-content-separator-color: ThreeDShadow; +} + +@media (-moz-windows-default-theme) { + :root { + --toolbar-non-lwt-bgcolor: -moz-dialog; + + --panel-separator-color: hsla(210,4%,10%,.14); + } +} + +: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); +} + +#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-platform: windows-win7) { + #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive { + color: ThreeDShadow; + } + } +} + +@media not (-moz-platform: windows-win7) { + @media not (-moz-platform: 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(--tabs-navbar-shadow-size)); + } + } +} + +/* Add 4px extra margin on top of the tabs toolbar on Windows 7. */ +@media (-moz-platform: windows-win7) { + :root[sizemode="normal"][chromehidden~="menubar"] #TabsToolbar > .toolbar-items, + :root[sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar > .toolbar-items { + padding-top: 4px; + } +} + +#navigator-toolbox, +.browser-toolbar { + appearance: none; +} + +.browser-toolbar:not(.titlebar-color) { + background-color: var(--toolbar-bgcolor); + background-clip: padding-box; + color: var(--toolbar-color); +} + +/* Add a fog for background tabs to be visible on Windows 7 glass window background */ +@media (-moz-platform: windows-win7) { + @media (-moz-windows-default-theme) { + #TabsToolbar:not(:-moz-lwtheme) { + background-image: radial-gradient(ellipse at bottom, rgba(255,255,255,0.8), rgba(255,255,255,0.5) 80%, transparent); + } + } +} + +@media (-moz-windows-compositor: 0), + (-moz-windows-default-theme: 0), + (-moz-platform: windows-win8) { + /* Please keep the menu text colors in this media block in sync with + * light-dark-overrides.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718. + */ + :root[tabsintitlebar]:not(:-moz-lwtheme) { + color: CaptionText; + } + + :root[tabsintitlebar]:not(:-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] :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; +} + +@media (-moz-windows-default-theme: 0) { + #nav-bar:not(:-moz-lwtheme) { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 ThreeDShadow; + } +} +#nav-bar:-moz-lwtheme { + box-shadow: 0 calc(-1 * var(--tabs-navbar-shadow-size)) 0 var(--lwt-tabs-border-color, rgba(0,0,0,.3)); +} +@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; +} + +/* 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([inFullscreen]) #titlebar:-moz-lwtheme { + visibility: hidden; + } + :root:not([inFullscreen], [chromehidden~="menubar"]) #toolbar-menubar:-moz-lwtheme, + :root:not([inFullscreen], [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-platform: windows-win7), + (-moz-platform: 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[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; +} + + +/* Address bar */ + +@media not (prefers-contrast) { + :root:not(:-moz-lwtheme) #urlbar { + --urlbar-box-bgcolor: white; + } + :root[lwt-default-theme-in-dark-mode] #urlbar { + --urlbar-box-bgcolor: var(--toolbar-field-focus-background-color); + } +} + +#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) { + /* 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. */ + :root { + --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) { + border-color: ThreeDShadow; + } +} + +/* Address bar results view */ + +@media (-moz-windows-default-theme: 0) { + :root:not(:-moz-lwtheme) { + --urlbar-popup-action-color: -moz-nativehyperlinktext; + } +} + +/* Autocomplete */ + +#PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] { + border-top: 1px solid ThreeDShadow; +} + +/* Content area */ + +#browser { + --sidebar-border-color: ThreeDLightShadow; +} + +/* Tabstrip */ + +#TabsToolbar { + min-height: 0; + padding: 0; +} + +@media (-moz-windows-default-theme: 0) { + /* For high contrast themes. */ + #tabbrowser-tabpanels, + :root[privatebrowsingmode=temporary] #tabbrowser-tabpanels { + background-color: -moz-default-background-color; + } +} + +/* All tabs menupopup */ + +.alltabs-item[selected="true"] { + font-weight: bold; +} + +toolbarbutton.bookmark-item[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"); + -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 (-moz-content-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-label:-moz-locale-dir(ltr), +#statuspanel[mirror] > #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-label:-moz-locale-dir(rtl), +#statuspanel[mirror] > #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; +} + +/* 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); +} + +.private-browsing-indicator { + margin-inline: 12px; +} + +#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); +} + +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); +} + +#context-navigation { + background-color: menu; +} + +#context-sep-navigation { + margin-inline-start: -28px; +} + +@media (-moz-windows-non-native-menus) { + /* :not([hidden]) to avoid the display: flex unhiding the item. */ + #context-navigation:not([hidden]) { + /* The Windows 10 version of the navigation area needs the scrollbox's + background color, not the builtin "menu" color. */ + background-color: inherit; + /* Match the inner top padding of the menupopup to center the icons visually. */ + padding-bottom: 4px; + /* Use modern flex box so we can use percentage widths to redistribute + * spacing manually. */ + display: flex; + flex-direction: row; + /* We want the first and last icons to align with the text items which + * have 1em inline padding, and for icons to be centered within their + * hover state, so each icon of 16px needs 1em padding on both sides: + */ + --menuitem-min-width: calc(2em + 16px); + /* The total width of the container should then be at least 4 times that: */ + min-width: calc(4 * var(--menuitem-min-width)); + } + + #context-navigation > .menuitem-iconic { + flex: 1 0 auto; + } + + #context-navigation > .menuitem-iconic[_moz-menuactive="true"] { + /* We only show hover state on the icons. This ensures there is no + * dead space between icons, but the visible hover state is only + * around the icons, and all the icons' hover states match each other. + */ + background-color: transparent; + } + + #context-navigation > .menuitem-iconic > .menu-iconic-left { + margin: 0; + padding: 0; + } + + /* override styles from shared/contextmenu.inc.css */ + #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon { + width: var(--menuitem-min-width); + height: 32px; + padding: 8px 1em; + margin: 0; + } + #context-navigation > .menuitem-iconic[_moz-menuactive="true"] > .menu-iconic-left > .menu-iconic-icon { + background-color: -moz-menuhover; + } + + #context-navigation > .menuitem-iconic[_moz-menuactive="true"][disabled="true"] > .menu-iconic-left > .menu-iconic-icon { + background-color: -moz-menuhoverdisabled; + } + + /* If the menu is wider than the icons strictly need, the <menuitem> elements + * will stretch to pick up the extra space. In that case, the outer icons + * should align to the start/end of their containing <menuitem>: */ + #context-navigation > .menuitem-iconic:first-child { + -moz-box-pack: start; + } + + #context-navigation > .menuitem-iconic:last-child { + -moz-box-pack: end; + } + + #context-navigation > .menuitem-iconic:last-child, + #context-navigation > .menuitem-iconic:first-child { + flex-grow: 0; + /* The first and last items start off as 16px + 2em, like the other ones. + * 100% is the width of the parent, which will be at least 4 * the width of + * an individual item (16px + 2em) + * So 100% - 4 item widths gets us the remaining available space if + * #context-navigation is wider than that. + * Then divide by 6 to get the 1/6 of that extra space, and add this space + * to the width of the first/last items. + * This ensures that the 3 visual gaps between the 4 icons are all the same + * size, with each 1/3 of the available space evenly distributed between + * the 2 items on either side of the gap. + */ + width: calc(var(--menuitem-min-width) + calc(100% - 4 * var(--menuitem-min-width)) / 6); + } + + + /* 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 { + margin-top: 0; + margin-inline: 0; + } +} + +#historySwipeAnimationPreviousArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationPreviousArrow:-moz-locale-dir(rtl) { + transform: scaleX(-1); +} +#historySwipeAnimationNextArrow { + background: url("chrome://browser/skin/history-swipe-arrow.svg") + center left / 192px 192px no-repeat transparent; + will-change: transform; + -moz-context-properties: fill; +} +#historySwipeAnimationNextArrow:-moz-locale-dir(ltr) { + transform: scaleX(-1); +} diff --git a/browser/themes/windows/customizableui/panelUI.css b/browser/themes/windows/customizableui/panelUI.css new file mode 100644 index 0000000000..fc5f683dbe --- /dev/null +++ b/browser/themes/windows/customizableui/panelUI.css @@ -0,0 +1,26 @@ +/* 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 "chrome://browser/skin/customizableui/panelUI-shared.css"; + +/* bookmark panel submenus */ + +menupopup::part(drop-indicator) { + /* To account for the shadow margin + border of the panel */ + margin-inline-start: 5px; +} + +toolbarbutton menupopup[placespopup] { + --nested-margin: calc(-1 * (var(--arrowpanel-menuitem-padding-inline) + var(--panel-shadow-margin))); +} + +@media not (-moz-windows-non-native-menus) { + toolbarbutton menupopup[placespopup] { + --panel-shadow-margin: 4px; + } + + toolbarbutton menupopup[placespopup] menupopup[placespopup] { + margin-inline-start: var(--nested-margin); + } +} diff --git a/browser/themes/windows/downloads/allDownloadsView.css b/browser/themes/windows/downloads/allDownloadsView.css new file mode 100644 index 0000000000..77db61d972 --- /dev/null +++ b/browser/themes/windows/downloads/allDownloadsView.css @@ -0,0 +1,63 @@ +/* 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 "chrome://browser/skin/downloads/allDownloadsView.inc.css"; + +/*** List items ***/ + +@media (-moz-windows-default-theme) { + .downloadProgress::-moz-progress-bar { + background-color: #3c9af8; + } + + .downloadProgress[paused]::-moz-progress-bar { + background-color: #a6a6a6; + } +} + +/*** Highlighted list items ***/ + +@media (-moz-windows-default-theme) { + /* + -moz-default-appearance: menuitem is almost right, but the hover effect is not + transparent and is lighter than desired. + + Copied from the autocomplete richlistbox styling in + toolkit/themes/windows/global/autocomplete.css + + This styling should be kept in sync with the style from the above file. + */ + #downloadsListBox:focus > richlistitem[selected] { + color: inherit; + background-color: transparent; + /* four gradients for the bevel highlights on each edge, one for blue background */ + background-image: + linear-gradient(to bottom, rgba(255,255,255,0.9) 3px, transparent 3px), + linear-gradient(to right, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to left, rgba(255,255,255,0.5) 3px, transparent 3px), + linear-gradient(to top, rgba(255,255,255,0.4) 3px, transparent 3px), + linear-gradient(to bottom, rgba(163,196,247,0.3), rgba(122,180,246,0.3)); + background-clip: content-box; + border-radius: 6px; + outline: 1px solid rgb(124,163,206); + outline-offset: -2px; + } +} + +/*** Progress bars ***/ + +@media (prefers-contrast) { + .downloadProgress { + background-color: -moz-Dialog; + border: 1px solid ButtonText; + } + + .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: SelectedItem; + } + + #downloadsListBox richlistitem[selected] .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: ButtonText; + } +} diff --git a/browser/themes/windows/downloads/downloads.css b/browser/themes/windows/downloads/downloads.css new file mode 100644 index 0000000000..2cc4b26195 --- /dev/null +++ b/browser/themes/windows/downloads/downloads.css @@ -0,0 +1,33 @@ +/* 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 "chrome://browser/skin/downloads/downloads.inc.css"; + +/*** Panel and outer controls ***/ + +#downloadsHistory { + border: 0; +} + +/*** List items and similar elements in the summary ***/ + +:root { + --downloads-item-height: 5.5em; + --downloads-item-font-size-factor: 0.9; + --downloads-item-details-opacity: 0.6; + --downloads-item-disabled-opacity: 0.6; +} + +/*** Progress bars ***/ + +@media (prefers-contrast) { + .downloadProgress { + background-color: -moz-Dialog; + border: 1px solid ButtonText; + } + + .downloadProgress::-moz-progress-bar { + --download-progress-fill-color: SelectedItem; + } +} diff --git a/browser/themes/windows/jar.mn b/browser/themes/windows/jar.mn new file mode 100644 index 0000000000..4c6069180e --- /dev/null +++ b/browser/themes/windows/jar.mn @@ -0,0 +1,42 @@ +# 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/. + +browser.jar: +% skin browser classic/1.0 %skin/classic/browser/ +#include ../shared/jar.inc.mn + skin/classic/browser/sanitizeDialog.css + skin/classic/browser/browser.css + skin/classic/browser/browser-custom-colors.css (../shared/browser-custom-colors.css) + skin/classic/browser/browser-aero.css + skin/classic/browser/contextmenu.css (../shared/contextmenu.css) + skin/classic/browser/monitor-base.png + skin/classic/browser/monitor-border.png + skin/classic/browser/pageInfo.css + skin/classic/browser/pageInfo.png + skin/classic/browser/webRTC-legacy-indicator.css (../shared/webRTC-legacy-indicator.css) + skin/classic/browser/customizableui/panelUI.css (customizableui/panelUI.css) + skin/classic/browser/downloads/allDownloadsView.css (downloads/allDownloadsView.css) + skin/classic/browser/downloads/downloads.css (downloads/downloads.css) + skin/classic/browser/notification-icons/camera.png (notification-icons/camera.png) + skin/classic/browser/notification-icons/microphone.png (notification-icons/microphone.png) + skin/classic/browser/notification-icons/screen.png (notification-icons/screen.png) + skin/classic/browser/places/organizer.css (places/organizer.css) + skin/classic/browser/preferences/alwaysAsk.png (preferences/alwaysAsk.png) + skin/classic/browser/preferences/application.png (preferences/application.png) + skin/classic/browser/preferences/saveFile.png (preferences/saveFile.png) + skin/classic/browser/preferences/applications.css (preferences/applications.css) + skin/classic/browser/window-controls/close.svg (window-controls/close.svg) + skin/classic/browser/window-controls/close-highcontrast.svg (window-controls/close-highcontrast.svg) + skin/classic/browser/window-controls/close-themes.svg (window-controls/close-themes.svg) + skin/classic/browser/window-controls/maximize.svg (window-controls/maximize.svg) + skin/classic/browser/window-controls/maximize-highcontrast.svg (window-controls/maximize-highcontrast.svg) + skin/classic/browser/window-controls/maximize-themes.svg (window-controls/maximize-themes.svg) + skin/classic/browser/window-controls/minimize.svg (window-controls/minimize.svg) + skin/classic/browser/window-controls/minimize-highcontrast.svg (window-controls/minimize-highcontrast.svg) + skin/classic/browser/window-controls/minimize-themes.svg (window-controls/minimize-themes.svg) + skin/classic/browser/window-controls/restore.svg (window-controls/restore.svg) + skin/classic/browser/window-controls/restore-highcontrast.svg (window-controls/restore-highcontrast.svg) + skin/classic/browser/window-controls/restore-themes.svg (window-controls/restore-themes.svg) + skin/classic/browser/e10s-64@2x.png (../shared/e10s-64@2x.png) + skin/classic/browser/history-swipe-arrow.svg (../shared/swipe-gesture-icons/history-swipe-arrow.svg) diff --git a/browser/themes/windows/monitor-base.png b/browser/themes/windows/monitor-base.png Binary files differnew file mode 100644 index 0000000000..45a2410217 --- /dev/null +++ b/browser/themes/windows/monitor-base.png diff --git a/browser/themes/windows/monitor-border.png b/browser/themes/windows/monitor-border.png Binary files differnew file mode 100644 index 0000000000..f05dcb7839 --- /dev/null +++ b/browser/themes/windows/monitor-border.png diff --git a/browser/themes/windows/moz.build b/browser/themes/windows/moz.build new file mode 100644 index 0000000000..20e4e3af75 --- /dev/null +++ b/browser/themes/windows/moz.build @@ -0,0 +1,9 @@ +# -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- +# vim: set filetype=python: +# 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/. + +JAR_MANIFESTS += ["jar.mn"] + +DEFINES["MENUBAR_CAN_AUTOHIDE"] = 1 diff --git a/browser/themes/windows/notification-icons/camera.png b/browser/themes/windows/notification-icons/camera.png Binary files differnew file mode 100644 index 0000000000..110f3e4728 --- /dev/null +++ b/browser/themes/windows/notification-icons/camera.png diff --git a/browser/themes/windows/notification-icons/microphone.png b/browser/themes/windows/notification-icons/microphone.png Binary files differnew file mode 100644 index 0000000000..e0fceee6f7 --- /dev/null +++ b/browser/themes/windows/notification-icons/microphone.png diff --git a/browser/themes/windows/notification-icons/screen.png b/browser/themes/windows/notification-icons/screen.png Binary files differnew file mode 100644 index 0000000000..3620c87135 --- /dev/null +++ b/browser/themes/windows/notification-icons/screen.png diff --git a/browser/themes/windows/pageInfo.css b/browser/themes/windows/pageInfo.css new file mode 100644 index 0000000000..265384b2fa --- /dev/null +++ b/browser/themes/windows/pageInfo.css @@ -0,0 +1,178 @@ +/* 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 "chrome://global/skin/global.css"; +@namespace html url("http://www.w3.org/1999/xhtml"); + +#topBar { + -moz-window-dragging: drag; + border-bottom: 1px solid ThreeDLightShadow; + padding-inline-start: 10px; + background-color: Field; + color: FieldText; +} + +/* View buttons */ +#viewGroup { + padding-inline-start: 10px; +} + +#viewGroup > radio { + list-style-image: url("chrome://browser/skin/pageInfo.png"); + appearance: none; + min-width: 4.5em; + margin: 0; + padding: 3px; +} + +#viewGroup > radio:hover { + background-color: #E0E8F6; + color: black; +} + +#viewGroup > radio[selected="true"] { + background-color: #C1D2EE; + color: black; +} + +#viewGroup > radio > .radio-label-box { + margin: 0; + padding: 0 6px; +} + +#viewGroup:focus-visible > radio[focused="true"] > .radio-label-box { + outline: var(--default-focusring); +} + +#generalTab { + -moz-image-region: rect(0px, 32px, 32px, 0px) +} + +#generalTab:hover, +#generalTab[selected="true"] { + -moz-image-region: rect(32px, 32px, 64px, 0px) +} + +#mediaTab { + -moz-image-region: rect(0px, 64px, 32px, 32px) +} + +#mediaTab:hover, +#mediaTab[selected="true"] { + -moz-image-region: rect(32px, 64px, 64px, 32px) +} + +#permTab { + -moz-image-region: rect(0px, 128px, 32px, 96px) +} + +#permTab:hover, +#permTab[selected="true"] { + -moz-image-region: rect(32px, 128px, 64px, 96px) +} + +#securityTab { + -moz-image-region: rect(0px, 160px, 32px, 128px) +} + +#securityTab:hover, +#securityTab[selected="true"] { + -moz-image-region: rect(32px, 160px, 64px, 128px) +} + +/* Misc */ +tree { + margin: .5em; +} + +html|input { + background: transparent; + border: none; + padding: 0; +} + +html|input.header { + margin-inline-start: 0; +} + +#imagecontainerbox { + margin: .5em; + background: white; + overflow: auto; + border: 1px solid ThreeDLightShadow; +} + +html|input:disabled { + font-style: italic; +} + +/* General Tab */ + +#securityBox description { + margin-inline-start: 10px; +} + +#general-security-identity { + white-space: pre-wrap; + line-height: 2em; +} + +/* Media Tab */ +#imagetree { + min-height: 10em; + margin-bottom: 0; +} + +#mediaSplitter { + border-style: none; + background: none; + height: .8em; +} + +#mediaTable { + margin-bottom: 2em; +} + +#mediaLabelColumn { + min-width: 10em; +} + +#thepreviewimage { + margin: 1em; +} + +treechildren::-moz-tree-cell-text(broken) { + font-style: italic; + color: graytext; +} + +/* Permissions Tab */ +#permList { + margin: .5em; + overflow: auto; + appearance: auto; + -moz-default-appearance: listbox; + color: FieldText; +} + +.permission { + padding: 6px 7px; + min-height: 25px; + border-bottom: 1px dotted ThreeDShadow; +} + +.permissionLabel { + font-weight: bold; +} + +.permission:hover { + background-color: -moz-dialog; + color: -moz-dialogText; +} + +/* Security Tab */ + +#securityPanel table { + margin-bottom: 1em; +} diff --git a/browser/themes/windows/pageInfo.png b/browser/themes/windows/pageInfo.png Binary files differnew file mode 100644 index 0000000000..684342f451 --- /dev/null +++ b/browser/themes/windows/pageInfo.png diff --git a/browser/themes/windows/places/organizer.css b/browser/themes/windows/places/organizer.css new file mode 100644 index 0000000000..86736bcafb --- /dev/null +++ b/browser/themes/windows/places/organizer.css @@ -0,0 +1,401 @@ +/* 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/. */ + +:root { + --organizer-color: -moz-DialogText; + --organizer-deemphasized-color: GrayText; + + --organizer-toolbar-background: -moz-Dialog; + --organizer-pane-background: -moz-Dialog; + --organizer-content-background: -moz-Dialog; + + --organizer-hover-background: SelectedItem; + --organizer-hover-color: SelectedItemText; + --organizer-selected-background: SelectedItem; + --organizer-selected-color: SelectedItemText; + --organizer-outline-color: SelectedItem; + + --organizer-separator-color: ThreeDDarkShadow; + --organizer-border-color: ThreeDShadow; + + --organizer-toolbar-field-background: Field; + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: ThreeDShadow; + --organizer-toolbar-field-focus-border-color: var(--organizer-outline-color); + --organizer-toolbar-field-focus-box-shadow: unset; + --organizer-pane-field-border-color: ThreeDShadow; +} + +@media not (prefers-contrast) { + :root { + --organizer-color: rgb(21,20,26); + --organizer-deemphasized-color: rgb(91,91,102); + + --organizer-toolbar-background: rgb(249,249,251); + --organizer-pane-background: rgb(240,240,244); + --organizer-content-background: white; + + --organizer-hover-background: rgba(207,207,216,.66); + --organizer-hover-color: var(--organizer-color); + --organizer-selected-background: rgb(207,207,216); + --organizer-selected-color: var(--organizer-color); + --organizer-outline-color: rgb(0,97,224); + + --organizer-separator-color: var(--organizer-pane-field-border-color); + --organizer-border-color: ThreeDLightShadow; + + --organizer-toolbar-field-background: rgb(240,240,244); + --organizer-toolbar-field-background-focused: Field; + --organizer-toolbar-field-border-color: transparent; + --organizer-toolbar-field-focus-border-color: color-mix(in srgb, var(--organizer-outline-color) 50%, transparent); + --organizer-toolbar-field-focus-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.23); + --organizer-pane-field-border-color: color-mix(in srgb, currentColor 41%, transparent); + } + + @media (prefers-color-scheme: dark) { + :root { + --organizer-color: rgb(251,251,254); + --organizer-deemphasized-color: rgb(191,191,201); + + --organizer-toolbar-background: rgb(43,42,51); + --organizer-pane-background: rgb(35,34,43); + --organizer-content-background: rgb(28,27,34); + + --organizer-hover-background: rgb(82,82,94); + --organizer-selected-background: rgb(91,91,102); + --organizer-outline-color: rgb(0,221,255); + + --organizer-toolbar-field-background: rgb(28,27,34); + --organizer-toolbar-field-background-focused: rgb(66,65,77); + scrollbar-color: rgba(249,249,250,.4) rgba(20,20,25,.3); + } + } +} + +/* Toolbar and menus */ + +#placesToolbar { + appearance: none; + background-color: var(--organizer-toolbar-background); + color: var(--organizer-color); + border-bottom: 1px solid var(--organizer-border-color); + padding: 4px; + padding-inline-end: 6px; +} + +#placesToolbar > toolbarbutton { + appearance: none; + padding: 5px; + border-radius: 4px; +} + +#placesToolbar > toolbarbutton[disabled] { + opacity: .6; +} + +#placesToolbar > toolbarbutton:not([disabled]):hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#placesToolbar > toolbarbutton:not([disabled]):hover:active { + background-color: var(--organizer-selected-background); +} + +#placesToolbar > toolbarbutton > .toolbarbutton-icon, +#placesMenu > menu > image, +#placesMenu > menu > .menubar-text { + -moz-context-properties: fill; + fill: currentColor; +} + +#placesMenu { + margin-inline-start: 6px; +} + +#placesMenu > menu { + appearance: none; + color: var(--organizer-color); + border-radius: 4px; + padding-block: 5px; + padding-inline-start: 5px; + margin-inline-end: 2px; +} + +#placesMenu > menu:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#placesMenu > menu:hover:active, +#placesMenu > menu[open] { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} + +#placesMenu > menu > .menubar-text { + margin-block: 0 !important; /* override menu.css */ + padding-inline-end: 8px; + background: url(chrome://global/skin/icons/arrow-down-12.svg) right center no-repeat; + background-size: 6px; +} + +#placesMenu > menu > .menubar-text:-moz-locale-dir(rtl) { + background-position-x: left; +} + +/* Toolbar icons */ + +#back-button { + list-style-image: url("chrome://browser/skin/back.svg"); +} + +#forward-button { + list-style-image: url("chrome://browser/skin/forward.svg"); +} + +#back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon, +#forward-button:-moz-locale-dir(rtl) > .toolbarbutton-icon { + transform: scaleX(-1); +} + +#organizeButton { + list-style-image: url("chrome://global/skin/icons/settings.svg"); +} + +#viewMenu { + list-style-image: url("chrome://browser/skin/sort.svg"); +} + +#maintenanceButton { + list-style-image: url("chrome://browser/skin/import-export.svg"); +} + +/* Search bar */ + +#searchFilter { + appearance: none; + background-color: var(--organizer-toolbar-field-background); + color: var(--organizer-color); + border: 1px solid var(--organizer-toolbar-field-border-color); + border-radius: 4px; + margin: 0; + padding-block: 2px; + min-height: 24px; +} + +#searchFilter[focused] { + box-shadow: var(--organizer-toolbar-field-focus-box-shadow); + background-color: var(--organizer-toolbar-field-background-focused); + border-color: transparent; + outline: 2px solid var(--organizer-toolbar-field-focus-border-color); + outline-offset: -2px; +} + +/* Sidebar and splitter */ + +#placesList { + background-color: var(--organizer-pane-background); +} + +#placesView > splitter { + border: 0; + border-inline-end: 1px solid var(--organizer-border-color); + min-width: 0; + width: 3px; + background-color: transparent; + margin-inline-start: -3px; + position: relative; +} + +/* Downloads pane */ + +#downloadsListBox { + color: var(--organizer-color); + background-color: var(--organizer-content-background); +} + +#clearDownloadsButton:focus-visible { + outline: 2px solid var(--organizer-outline-color); +} + +/* Tree */ + +#contentView treecol { + /* Use box-shadow to draw a bottom border instead of border-bottom + * because otherwise the items on contentView won't be perfectly + * aligned with the items on the sidebar. */ + box-shadow: inset 0 -1px var(--organizer-border-color) +} + +tree { + background-color: var(--organizer-content-background); + color: var(--organizer-color); +} + +treechildren::-moz-tree-row { + background-color: transparent; +} + +treechildren::-moz-tree-row(hover) { + background-color: var(--organizer-hover-background); +} + +treechildren::-moz-tree-row(selected) { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); + border: 1px solid transparent; +} + +treechildren::-moz-tree-image(hover), +treechildren::-moz-tree-twisty(hover), +treechildren::-moz-tree-cell-text(hover) { + color: var(--organizer-hover-color); +} + +treechildren::-moz-tree-image(selected), +treechildren::-moz-tree-twisty(selected), +treechildren::-moz-tree-cell-text(selected) { + color: var(--organizer-selected-color); +} + +treechildren::-moz-tree-separator { + height: 1px; + border-color: var(--organizer-separator-color); +} + +treechildren::-moz-tree-separator(hover) { + border-color: var(--organizer-hover-color); +} + +treechildren::-moz-tree-separator(selected) { + border-color: var(--organizer-selected-color); +} + +/* Info box */ +#infoBox:not([hidden="true"]) { + display: block; +} + +#editBookmarkPanelContent { + grid-template-columns: auto 1fr; +} + +#editBookmarkPanelContent .caption-label:not([hidden="true"]) { + display: block; + grid-column: 2; +} + +#editBookmarkPanelContent label { + align-self: center; +} + +#editBMPanel_itemsCountText { + grid-column: auto / span 2; + justify-self: center; +} + +#editBMPanel_tagsSelectorRow { + grid-column: auto / span 2; +} + +#detailsPane { + background-color: var(--organizer-pane-background); + color: var(--organizer-color); + height: 16em; + padding: 5px; + border-top: 1px solid var(--organizer-border-color); +} + +#editBookmarkPanelContent .expander-up, +#editBookmarkPanelContent .expander-down { + appearance: none; + min-width: 0; + padding: 5px; + margin: 0; + margin-inline-end: 4px; + border: 1px solid var(--organizer-pane-field-border-color); + border-radius: 4px; + color: var(--organizer-color); + background-color: var(--organizer-content-background); + list-style-image: url("chrome://global/skin/icons/arrow-down-12.svg"); + -moz-context-properties: fill; + fill: currentColor; +} + +#editBookmarkPanelContent .expander-up:hover, +#editBookmarkPanelContent .expander-down:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#editBookmarkPanelContent .expander-up:hover:active, +#editBookmarkPanelContent .expander-down:hover:active { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} + +#editBookmarkPanelContent .expander-up:focus-visible, +#editBookmarkPanelContent .expander-down:focus-visible { + outline: 2px solid var(--organizer-outline-color); + outline-offset: -1px; +} + +#editBookmarkPanelContent .expander-up { + list-style-image: url("chrome://global/skin/icons/arrow-up-12.svg"); +} + +#editBookmarkPanelContent .expander-up > .button-box, +#editBookmarkPanelContent .expander-down > .button-box { + padding: 0; +} + +#places input { + border: 1px solid var(--organizer-pane-field-border-color); + border-radius: 4px; + background-color: var(--organizer-content-background); + color: var(--organizer-color); + min-height: 20px; + padding-inline: 4px; +} + +#places input:focus { + outline: 2px solid var(--organizer-outline-color); + outline-offset: -1px; +} + +#places input:not(:read-write):focus { + outline: none; +} + +.caption-label { + margin-inline-start: 8px; + color: var(--organizer-deemphasized-color); +} + +#editBookmarkPanelContent input { + margin: 4px; +} + +#editBMPanel_tagsSelector { + appearance: none; + color: var(--organizer-color); + background-color: var(--organizer-content-background); + border: 1px solid var(--organizer-border-color); + border-radius: 4px; +} + +#editBMPanel_tagsSelector > richlistitem { + border: 1px solid transparent; +} + +#editBMPanel_tagsSelector > richlistitem:hover { + background-color: var(--organizer-hover-background); + color: var(--organizer-hover-color); +} + +#editBMPanel_tagsSelector > richlistitem[selected] { + background-color: var(--organizer-selected-background); + color: var(--organizer-selected-color); +} diff --git a/browser/themes/windows/preferences/alwaysAsk.png b/browser/themes/windows/preferences/alwaysAsk.png Binary files differnew file mode 100644 index 0000000000..b394da070b --- /dev/null +++ b/browser/themes/windows/preferences/alwaysAsk.png diff --git a/browser/themes/windows/preferences/application.png b/browser/themes/windows/preferences/application.png Binary files differnew file mode 100644 index 0000000000..da3689e917 --- /dev/null +++ b/browser/themes/windows/preferences/application.png diff --git a/browser/themes/windows/preferences/applications.css b/browser/themes/windows/preferences/applications.css new file mode 100644 index 0000000000..2ff372d9e7 --- /dev/null +++ b/browser/themes/windows/preferences/applications.css @@ -0,0 +1,43 @@ +/* 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/. */ + +richlistitem[appHandlerIcon="handleInternally"], +menuitem[appHandlerIcon="handleInternally"] { + list-style-image: url("chrome://branding/content/icon32.png"); +} + +richlistitem[appHandlerIcon="ask"], +menuitem[appHandlerIcon="ask"] { + list-style-image: url("chrome://browser/skin/preferences/alwaysAsk.png"); +} + +richlistitem[appHandlerIcon="save"], +menuitem[appHandlerIcon="save"] { + list-style-image: url("chrome://browser/skin/preferences/saveFile.png"); +} + +richlistitem[appHandlerIcon="plugin"], +menuitem[appHandlerIcon="plugin"] { + list-style-image: url("chrome://global/skin/icons/plugin.svg"); +} + +#appList { + min-height: 212px; +} + +#appList > richlistitem { + -moz-box-align: center; +} + +#appList > richlistitem > image { + margin: 5px; + width: 32px; + height: 32px; +} + +#appList > richlistitem > label { + margin: 0px; + padding: 5px; + white-space: nowrap; +} diff --git a/browser/themes/windows/preferences/saveFile.png b/browser/themes/windows/preferences/saveFile.png Binary files differnew file mode 100644 index 0000000000..a1089af09b --- /dev/null +++ b/browser/themes/windows/preferences/saveFile.png diff --git a/browser/themes/windows/sanitizeDialog.css b/browser/themes/windows/sanitizeDialog.css new file mode 100644 index 0000000000..dbe51cf157 --- /dev/null +++ b/browser/themes/windows/sanitizeDialog.css @@ -0,0 +1,16 @@ +/* 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/. */ + +#sanitizeDurationChoice { + margin-inline-end: 0; +} + +/* Align the duration label with the warning box and item list */ +#sanitizeDurationLabel { + margin-inline-start: 3px; +} + +#sanitizeEverythingWarningIcon { + list-style-image: url("chrome://global/skin/icons/warning-large.png"); +} diff --git a/browser/themes/windows/window-controls/close-highcontrast.svg b/browser/themes/windows/window-controls/close-highcontrast.svg new file mode 100644 index 0000000000..b37b28a28b --- /dev/null +++ b/browser/themes/windows/window-controls/close-highcontrast.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <path stroke="context-stroke" stroke-width="1.9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/> +</svg> diff --git a/browser/themes/windows/window-controls/close-themes.svg b/browser/themes/windows/window-controls/close-themes.svg new file mode 100644 index 0000000000..e6eac2fc55 --- /dev/null +++ b/browser/themes/windows/window-controls/close-themes.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M1,1 l 10,10 M1,11 l 10,-10"/> + <path stroke="white" stroke-width="1.9" d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/> +</svg> diff --git a/browser/themes/windows/window-controls/close.svg b/browser/themes/windows/window-controls/close.svg new file mode 100644 index 0000000000..9d0a252357 --- /dev/null +++ b/browser/themes/windows/window-controls/close.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <path stroke="context-stroke" stroke-width=".9" fill="none" d="M1,1 l 10,10 M1,11 l 10,-10"/> +</svg> diff --git a/browser/themes/windows/window-controls/maximize-highcontrast.svg b/browser/themes/windows/window-controls/maximize-highcontrast.svg new file mode 100644 index 0000000000..48ea6166f3 --- /dev/null +++ b/browser/themes/windows/window-controls/maximize-highcontrast.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <rect stroke="context-stroke" stroke-width="1.9" fill="none" x="2" y="2" width="8" height="8"/> +</svg> diff --git a/browser/themes/windows/window-controls/maximize-themes.svg b/browser/themes/windows/window-controls/maximize-themes.svg new file mode 100644 index 0000000000..5740a992ae --- /dev/null +++ b/browser/themes/windows/window-controls/maximize-themes.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none"> + <rect stroke="black" stroke-width="3.6" stroke-opacity=".75" x="2" y="2" width="8" height="8"/> + <rect stroke="white" stroke-width="1.9" x="2" y="2" width="8" height="8"/> +</svg> diff --git a/browser/themes/windows/window-controls/maximize.svg b/browser/themes/windows/window-controls/maximize.svg new file mode 100644 index 0000000000..e9cc939af3 --- /dev/null +++ b/browser/themes/windows/window-controls/maximize.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <rect stroke="context-stroke" stroke-width=".9" fill="none" x="1.5" y="1.5" width="9" height="9"/> +</svg> diff --git a/browser/themes/windows/window-controls/minimize-highcontrast.svg b/browser/themes/windows/window-controls/minimize-highcontrast.svg new file mode 100644 index 0000000000..2ba29a839d --- /dev/null +++ b/browser/themes/windows/window-controls/minimize-highcontrast.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <line stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges" x1="1" y1="6" x2="11" y2="6"/> +</svg> diff --git a/browser/themes/windows/window-controls/minimize-themes.svg b/browser/themes/windows/window-controls/minimize-themes.svg new file mode 100644 index 0000000000..d74f16bdbc --- /dev/null +++ b/browser/themes/windows/window-controls/minimize-themes.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"> + <line stroke="black" stroke-width="3.6" stroke-opacity=".75" x1="0" y1="6" x2="12" y2="6"/> + <line stroke="white" stroke-width="1.9" x1="1" y1="6" x2="11" y2="6"/> +</svg> diff --git a/browser/themes/windows/window-controls/minimize.svg b/browser/themes/windows/window-controls/minimize.svg new file mode 100644 index 0000000000..7ffa1fecbb --- /dev/null +++ b/browser/themes/windows/window-controls/minimize.svg @@ -0,0 +1,6 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg"> + <line stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges" x1="1" y1="5.5" x2="11" y2="5.5"/> +</svg> diff --git a/browser/themes/windows/window-controls/restore-highcontrast.svg b/browser/themes/windows/window-controls/restore-highcontrast.svg new file mode 100644 index 0000000000..f2cdfa8a9c --- /dev/null +++ b/browser/themes/windows/window-controls/restore-highcontrast.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width="1.9" fill="none" shape-rendering="crispEdges"> + <rect x="2" y="4" width="6" height="6"/> + <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" stroke-width=".9"/> +</svg> diff --git a/browser/themes/windows/window-controls/restore-themes.svg b/browser/themes/windows/window-controls/restore-themes.svg new file mode 100644 index 0000000000..e3c92f58a2 --- /dev/null +++ b/browser/themes/windows/window-controls/restore-themes.svg @@ -0,0 +1,8 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" fill="none" stroke="white"> + <path stroke="black" stroke-width="3.6" stroke-opacity=".75" d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8"/> + <rect stroke-width="1.9" x="2" y="4" width="6" height="6"/> + <polyline stroke-width=".9" points="3.5,1.5 10.5,1.5 10.5,8.5"/> +</svg> diff --git a/browser/themes/windows/window-controls/restore.svg b/browser/themes/windows/window-controls/restore.svg new file mode 100644 index 0000000000..80b71b178d --- /dev/null +++ b/browser/themes/windows/window-controls/restore.svg @@ -0,0 +1,7 @@ +<!-- 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/. --> +<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" stroke="context-stroke" stroke-width=".9" fill="none" shape-rendering="crispEdges"> + <rect x="1.5" y="3.5" width="7" height="7"/> + <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/> +</svg> |
