diff options
Diffstat (limited to 'application/basilisk/themes/windows/browser-aero.css')
| -rw-r--r-- | application/basilisk/themes/windows/browser-aero.css | 627 |
1 files changed, 627 insertions, 0 deletions
diff --git a/application/basilisk/themes/windows/browser-aero.css b/application/basilisk/themes/windows/browser-aero.css new file mode 100644 index 000000000..dbac6bb7a --- /dev/null +++ b/application/basilisk/themes/windows/browser-aero.css @@ -0,0 +1,627 @@ +/* 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/. */ + +%define glassActiveBorderColor rgb(37, 44, 51) +%define glassInactiveBorderColor rgb(102, 102, 102) + +@media not all and (-moz-windows-classic) { + #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel > #navigator-toolbox > #toolbar-menubar { + margin-top: 1px; + } +} + +@media (-moz-windows-default-theme) { + .sidebar-header, + #sidebar-header { + -moz-appearance: none; + border-bottom: none; + text-shadow: none; + } + + .sidebar-title, + #sidebar-title { + font-weight: bold; + } + + .sidebar-splitter { + border: 0; + border-inline-end: 1px solid ThreeDLightShadow; + min-width: 0; + width: 3px; + background-color: transparent; + margin-inline-start: -3px; + position: relative; + } + + #appcontent ~ .sidebar-splitter { + border-inline-start: 1px solid ThreeDLightShadow; + border-inline-end: none; + margin-inline-start: 0; + margin-inline-end: -3px; + } + + .menu-accel, + .menu-iconic-accel { + color: graytext; + } + + @media (-moz-os-version: windows-win7) { + .sidebar-header:not(:-moz-lwtheme), + #sidebar-header:not(:-moz-lwtheme) { + background-color: #EEF3FA; + } + + .sidebar-splitter, + #appcontent ~ .sidebar-splitter { + border-color: #A9B7C9; + } + + #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme), + #browser-bottombox:not(:-moz-lwtheme), + .browserContainer > findbar { + background-color: @customToolbarColor@; + } + + .tab-background-middle[selected=true]:not(:-moz-lwtheme) { + background-color: @customToolbarColor@; + } + } +} + +@media (-moz-windows-compositor) { + #main-window { + -moz-appearance: -moz-win-glass; + } + + + /* On win10, if we don't set this on the entire browser container including + * the sidebar, if the sidebar is open the accent color bleeds through in + * the titlebar */ + #browser { + -moz-appearance: -moz-win-exclude-glass; + } + + @media (-moz-os-version: windows-win10) { + /* Draw XUL caption buttons and background on Windows 10 */ + @media (-moz-windows-default-theme) { + #main-window { + background-color: hsl(0, 0%, 78%); + } + + :root[tabsintitlebar] .tab-label:-moz-window-inactive { + /* Calculated to match the opacity change of Windows Explorer + titlebar text change for inactive windows. */ + opacity: .6; + } + } + + @media not all and (-moz-windows-accent-color-applies) { + /* Default styling for when no accent color is applied */ + #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: hsl(235, 33%, 19%); + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --titlebar-text-color: white; + } + + #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight); + } + + #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight); + } + + #main-window[sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 100%, .17); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 100%, .27); + transition: none; + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 39%, 1); + transition: none; + } + } + + @media (-moz-windows-accent-color-applies) { + /* Styling for when an accent color is applied to the titlebar */ + #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme) { + background-color: -moz-win-accentcolor; + } + + :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { + --titlebar-text-color: -moz-win-accentcolortext; + } + + #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + + #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + + #main-window[sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + + #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + .titlebar-button:hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + @media (-moz-windows-accent-color-is-dark) { + /* dark accent color */ + #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight); + } + + #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight); + } + + #main-window[sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight); + } + + #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); + } + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 100%, .17); + } + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 100%, .27); + transition: none; + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 60%, 39%, 1); + transition: none; + } + } + } /* Windows 10 accent color applies */ + + @media not all and (-moz-windows-default-theme) { + #main-window { + background-color: transparent; + } + } + + #titlebar-buttonbox, + .titlebar-button { + -moz-appearance: none !important; + } + + .titlebar-button { + border: none; + margin: 0 !important; + padding: 9px 17px; + transition: background-color linear 120ms; + } + + #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs { + min-height: 28px; + } + + #main-window[sizemode=maximized] .titlebar-button { + padding-top: 8px; + padding-bottom: 8px; + } + + .titlebar-button > .toolbarbutton-icon { + width: 12px; + height: 12px; + } + + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { + opacity: 0.5; + } + + #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox { + margin-top: -4px; + } + + #main-window[sizemode="maximized"] #titlebar-close { + padding-right: 19px; + } + + #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); + background-color: hsla(0, 86%, 49%, 1); + } + + #titlebar-close:hover:active { + background-color: hsla(0, 86%, 49%, 0.6); + transition: none; + } + + /* inactive window */ + + #titlebar-min:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize); + } + + #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize); + } + + #main-window[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore); + } + + #titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close); + } + + .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + /* light persona */ + + .titlebar-button:-moz-lwtheme-darktext:hover { + background-color: hsla(0, 0%, 0%, .17); + } + + .titlebar-button:-moz-lwtheme-darktext:hover:active { + background-color: hsla(0, 0%, 0%, .27); + transition: none; + } + + #titlebar-min:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline); + } + + #titlebar-max:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline); + } + + #main-window[sizemode="maximized"]:-moz-lwtheme-darktext #titlebar-max:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline); + } + + #titlebar-close:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline); + } + #titlebar-close:hover:-moz-lwtheme-darktext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline); + } + + /* dark persona */ + + .titlebar-button:-moz-lwtheme-brighttext:hover { + background-color: hsla(0, 0%, 100%, .27); + } + + .titlebar-button:-moz-lwtheme-brighttext:hover:active { + background-color: hsla(0, 0%, 100%, .37); + transition: none; + } + + #titlebar-min:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outline-inverted); + } + + #titlebar-max:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outline-inverted); + } + + #main-window[sizemode="maximized"]:-moz-lwtheme-brighttext #titlebar-max:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outline-inverted); + } + + #titlebar-close:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted); + } + #titlebar-close:hover:-moz-lwtheme-brighttext { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outline-inverted); + } + + /* 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-left: 14.1px; + padding-right: 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-left: 15.3333px; + padding-right: 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 not all and (-moz-windows-default-theme) { + .titlebar-button { + background-color: -moz-field; + } + .titlebar-button:hover { + background-color: Highlight; + } + + #titlebar-min { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-outine-inverted); + } + + #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-outine-inverted); + } + + #main-window[sizemode="maximized"] #titlebar-max { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-outine-inverted); + } + + #titlebar-close { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted); + } + #titlebar-close:hover { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-outine-inverted); + } + } + } /* Win 10 styling */ + + @media (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + #main-window[sizemode="maximized"] #titlebar-buttonbox { + margin-inline-end: 3px; + } + + #main-window { + background-color: transparent; + -moz-appearance: -moz-win-borderless-glass; + } + + /* 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. */ + #browser { + -moz-appearance: none; + } + + #appcontent { + -moz-appearance: -moz-win-exclude-glass; + } + } + + @media (-moz-os-version: windows-win8) { + /* Artificially draw window borders that are covered by lwtheme, see bug 591930. + * Borders for win7 are below, win10 doesn't need them. */ + #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme { + border-top: 1px solid @toolbarShadowColor@; + } + } + + @media (-moz-windows-default-theme) { + #main-menubar > menu:not(:-moz-lwtheme) { + color: inherit; + } + + /* Use a different color only on Windows 8 and higher for inactive windows. + * On aero, the menubar fog disappears for inactive windows, and renders gray + * illegible. + */ + @media not all and (-moz-os-version: windows-win7) { + #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive { + color: ThreeDShadow; + } + } + } + + #main-window[darkwindowframe="true"] #toolbar-menubar:not(:-moz-lwtheme):not(:-moz-window-inactive), + #main-window[darkwindowframe="true"] #TabsToolbar:not(:-moz-lwtheme):not(:-moz-window-inactive) { + color: white; + } + + /* Show borders on win7 and win8, but not on win10 and later: */ + @media (-moz-os-version: windows-win7), + (-moz-os-version: windows-win8) { + /* Vertical toolbar border */ + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme), + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:-moz-lwtheme, + #main-window[customizing] #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar) { + border-left: 1px solid @toolbarShadowColor@; + border-right: 1px solid @toolbarShadowColor@; + background-clip: padding-box; + } + + #main-window:not([customizing])[sizemode=normal] #navigator-toolbox:not(:-moz-lwtheme)::after, + #main-window[customizing] #navigator-toolbox::after { + box-shadow: 1px 0 0 @toolbarShadowColor@, -1px 0 0 @toolbarShadowColor@; + margin-left: 1px; + margin-right: 1px; + } + + #main-window[sizemode=normal] #browser-border-start, + #main-window[sizemode=normal] #browser-border-end { + display: -moz-box; + background-color: @toolbarShadowColor@; + width: 1px; + } + + #main-window[sizemode=normal] #browser-bottombox { + border: 1px solid @toolbarShadowColor@; + border-top-style: none; + background-clip: padding-box; + } + } + + #main-window[sizemode=normal] #TabsToolbar { + padding-left: 1px; + padding-right: 1px; + } + + #appcontent:not(:-moz-lwtheme) { + background-color: -moz-dialog; + } +} + +@media (-moz-windows-glass) { + #main-window[sizemode=normal] #nav-bar { + border-top-left-radius: 2.5px; + border-top-right-radius: 2.5px; + } + + #main-window[sizemode=fullscreen]:not(:-moz-lwtheme) { + -moz-appearance: none; + background-color: #556; + } + + #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):not(:-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 is not necessary on win10+ */ + #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme { + border-top: 2px solid; + -moz-border-top-colors: @glassActiveBorderColor@ rgba(255,255,255,.6); + } + + #main-window[sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive { + -moz-border-top-colors: @glassInactiveBorderColor@ rgba(255,255,255,.6); + } + + /* Glass Fog */ + + #TabsToolbar:not(:-moz-lwtheme) { + position: relative; + } + + #TabsToolbar:not(:-moz-lwtheme)::after { + /* Because we use placeholders for window controls etc. in the tabstrip, + * and position those with ordinal attributes, and because our layout code + * expects :before/:after nodes to come first/last in the frame list, + * we have to reorder this element to come last, hence the + * ordinal group value (see bug 853415). */ + -moz-box-ordinal-group: 1001; + box-shadow: 0 0 30px 30px rgba(174,189,204,0.85); + content: ""; + display: -moz-box; + height: 0; + margin: 0 60px; /* (30px + 30px) from box-shadow */ + position: absolute; + pointer-events: none; + top: 50%; + width: -moz-available; + z-index: -1; + } + + /* Need to constrain the glass fog to avoid overlapping layers, see bug 886281. */ + #navigator-toolbox:not(:-moz-lwtheme) { + overflow: -moz-hidden-unscrollable; + } + + #main-window[sizemode=normal] .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox:not(:-moz-lwtheme) { + position: relative; + } + + /* End Glass Fog */ +} + +/* Aero Basic */ +@media not all and (-moz-windows-compositor) { + @media (-moz-windows-default-theme) { + #main-window { + background-color: rgb(185,209,234); + } + #main-window:-moz-window-inactive { + background-color: rgb(215,228,242); + } + + /* Render a window top border for lwthemes: */ + #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme { + background-image: linear-gradient(to bottom, + @glassActiveBorderColor@ 0, @glassActiveBorderColor@ 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + + #main-window[tabsintitlebar][sizemode="normal"] > #tab-view-deck > #browser-panel:-moz-lwtheme:-moz-window-inactive { + background-image: linear-gradient(to bottom, + @glassInactiveBorderColor@ 0, @glassInactiveBorderColor@ 1px, + rgba(255,255,255,.6) 1px, rgba(255,255,255,.6) 2px, transparent 2px); + } + } + + #print-preview-toolbar:not(:-moz-lwtheme) { + -moz-appearance: -moz-win-browsertabbar-toolbox; + } +} |