diff options
Diffstat (limited to 'browser/themes/windows/devedition.css')
| -rw-r--r-- | browser/themes/windows/devedition.css | 321 |
1 files changed, 321 insertions, 0 deletions
diff --git a/browser/themes/windows/devedition.css b/browser/themes/windows/devedition.css new file mode 100644 index 000000000..4c25f33a1 --- /dev/null +++ b/browser/themes/windows/devedition.css @@ -0,0 +1,321 @@ +% 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/devedition.inc.css + +:root { + --forwardbutton-width: 29px; +} + +:root[devtoolstheme="dark"], +:root[devtoolstheme="light"] { + /* 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 XP or 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 not all and (-moz-windows-compositor) { + #main-window[tabsintitlebar] #titlebar:-moz-lwtheme { + visibility: visible; + } + + #main-window { + background: var(--chrome-background-color) !important; + } +} + +@media (-moz-windows-compositor) { + #main-window { + background: transparent !important; + } +} + +#TabsToolbar::after { + display: none; +} + +#back-button > .toolbarbutton-icon, +#forward-button > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-background) !important; + border-radius: 0 !important; + height: auto !important; + padding: var(--toolbarbutton-vertical-inner-padding) 5px !important; + margin: 0 !important; + border: 1px solid var(--chrome-nav-bar-controls-border-color) !important; + box-shadow: none !important; +} + +#back-button > .toolbarbutton-icon { + /* 18px icon + 2 * 5px padding + 2 * 1px border */ + width: 30px !important; +} + +#forward-button > .toolbarbutton-icon { + /* 18px icon + 2 * 5px padding + 1 * 1px border */ + width: 29px !important; +} + +/* the normal theme adds box-shadow: <stuff> !important when the back-button is [open]. Fix: */ +#back-button[open="true"] > .toolbarbutton-icon { + box-shadow: none !important; +} + +#forward-button > .toolbarbutton-icon { + border-inline-start: none !important; +} + +/* Override a box shadow for disabled back button */ +#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon { + box-shadow: none !important; +} + +/* Override !important properties for hovered back button */ +#main-window #back-button:hover:not([disabled="true"]) > .toolbarbutton-icon, +#main-window #forward-button:hover:not([disabled="true"]) > .toolbarbutton-icon { + background: var(--chrome-nav-buttons-hover-background) !important; + box-shadow: none !important; +} + +#back-button > .toolbarbutton-icon { + border-radius: 2px 0 0 2px !important; +} + +#nav-bar .toolbarbutton-1:not([type=menu-button]), +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button, +#nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { + padding-top: 2px; + padding-bottom: 2px; +} + +.tabbrowser-tab { + background-color: var(--tab-background-color); +} + +#toolbar-menubar { + text-shadow: none !important; +} + +:root[devtoolstheme="dark"] .findbar-closebutton, +:root[devtoolstheme="dark"] #sidebar-header > .close-icon, +/* Tab styling - make sure to use an inverted icon for the selected tab + (brighttext only covers the unselected tabs) */ +.tab-close-button[selected=true] { + list-style-image: url("chrome://global/skin/icons/close-inverted.png"); +} + +@media (min-resolution: 1.1dppx) { + :root[devtoolstheme="dark"] .findbar-closebutton, + :root[devtoolstheme="dark"] #sidebar-header > .close-icon, + .tab-close-button[selected=true] { + list-style-image: url("chrome://global/skin/icons/close-inverted@2x.png"); + } +} + +@media (-moz-os-version: windows-xp), + (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + :root { + --space-above-tabbar: 15px; + } + + /* It'd be nice if there was an element in the scrollbox's inner content + that collapsed to the current width of the tabs. Since there isn't we + need to handle overflowing and non-overflowing tabs separately. + + In the case of overflowing tabs, set a border-top on the entire container, + otherwise we need to set it on each element individually */ + #main-window[sizemode=normal] .tabbrowser-tabs[overflow="true"] { + background-clip: padding-box; + border-top: 1px solid var(--chrome-nav-bar-separator-color); + border-inline-end: 1px solid var(--chrome-nav-bar-separator-color); + background-color: var(--tab-background-color); /* Make sure there is no transparent gap during tab close animation */ + } + + /* Add a border to the left of the first tab (or scroll arrow). Using .tabbrowser-tabs + instead of #TabsToolbar because it will work even in customize mode. */ + #main-window[sizemode=normal] .tabbrowser-tabs { + background-clip: padding-box; + border-inline-start: 1px solid var(--chrome-nav-bar-separator-color); + border-inline-end: 1px solid transparent; + } + + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-down, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-arrowscrollbox > .scrollbutton-up, + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabs-newtab-button { + background-clip: padding-box; + border-top: 1px solid var(--chrome-nav-bar-separator-color); + } + + /* Allow the border-top rule to take effect */ + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .tabbrowser-tab { + -moz-border-top-colors: none; + } + + #main-window[sizemode=normal] .tabbrowser-tabs:not([overflow="true"]) .closing-tabs-spacer { + background-clip: padding-box; + border-inline-start: 1px solid var(--chrome-nav-bar-separator-color); + } + + .tabs-newtab-button { + background: var(--tab-background-color); + } + + /* Use default window colors when in non-maximized mode */ + #tabbrowser-tabs, + #TabsToolbar, + #browser-panel, + #titlebar-content { + background: transparent; + } + + /* Ensure that the entire background is styled when maximized/fullscreen */ + #main-window:not([sizemode="normal"]):not([customizing]) #browser-panel { + background: var(--chrome-background-color) !important; + } + + /* The menu items need to be visible when the entire background is styled */ + #main-window:not([sizemode="normal"]) #main-menubar { + color: var(--chrome-color); + background-color: transparent; + } + + #main-window[sizemode="maximized"] #main-menubar > menu:not(:-moz-window-inactive) { + color: inherit; + } + + /* Use proper menu text styling in Win7 classic mode (copied from browser.css) */ + @media not all and (-moz-windows-compositor), + not all and (-moz-windows-default-theme) { + #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar, + #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar { + color: CaptionText; + } + + #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive, + #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive { + color: InactiveCaptionText; + } + + #main-window[tabsintitlebar] #main-menubar > menu { + color: inherit; + } + } + + /* Use less opacity than normal since this is very dark, and on top of the default toolbar color */ + .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled], + .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] { + opacity: .6; + } + + /* Override scrollbutton gradients in normal and hover state */ + .tabbrowser-arrowscrollbox > .scrollbutton-down, + .tabbrowser-arrowscrollbox > .scrollbutton-up { + background-image: none !important; + transition: none; /* scrollbutton-down has an unwanted transition on background color */ + } + + /* Restore draggable space on the sides of tabs when maximized */ + #main-window[sizemode="maximized"] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-left: 15px; + padding-right: 15px; + } + + /* Override the padding that's intended to compensate for tabs that can overlap border-radius on nav-bar in default theme. */ + #main-window[sizemode=normal]:not([customizing]) #TabsToolbar { + padding-left: 0; + padding-right: 0; + } +} + +/* 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; +} + +#navigator-toolbox { + /* The side borders on the toolbox also look out-of-place because we don't paint over + * the native background color at all, and these are !important for the same reason as above. */ + border-left: none !important; + border-right: none !important; +} + +/* Disable dragging like in the default theme: */ +#main-window[tabsintitlebar] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):-moz-lwtheme { + -moz-window-dragging: no-drag; +} + +/* The sidebar header has no background now that the background of the #browser-panel + * has no image and is transparent. Fix: */ +.sidebar-header:-moz-lwtheme, +#sidebar-header { + background-color: var(--chrome-background-color); + color: var(--chrome-color); +} + +@media (-moz-os-version: windows-vista), + (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + /* And then we add them back on toolbars so that they don't look borderless: */ + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox::after, + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { + border-left: 1px solid hsla(209,67%,12%,0.35); + border-right: 1px solid hsla(209,67%,12%,0.35); + } +} + +@media (-moz-os-version: windows-win10) { + /* Always keep draggable space on the sides of tabs since there is no top margin on Win10 */ + #main-window .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-left: 15px; + padding-right: 15px; + } + + /* Force white caption buttons for the dark theme on Windows 10 */ + :root[devtoolstheme="dark"] #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-white); + } + :root[devtoolstheme="dark"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-white); + } + #main-window[devtoolstheme="dark"][sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-white); + } + :root[devtoolstheme="dark"] #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + } + + /* ... and normal ones for the light theme on Windows 10 */ + :root[devtoolstheme="light"] #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + :root[devtoolstheme="light"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + #main-window[devtoolstheme="light"][sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + :root[devtoolstheme="light"] #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + :root[devtoolstheme="light"] #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + } +} + +.ac-type-icon { + /* Left-align the type icon in awesomebar popup results with the icon in the + urlbar. */ + margin-inline-start: 13px; +} |