diff options
Diffstat (limited to 'browser/themes/windows/browser-aero.css')
| -rw-r--r-- | browser/themes/windows/browser-aero.css | 488 |
1 files changed, 321 insertions, 167 deletions
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css index 5ff9d8250..dbac6bb7a 100644 --- a/browser/themes/windows/browser-aero.css +++ b/browser/themes/windows/browser-aero.css @@ -46,8 +46,7 @@ color: graytext; } - @media (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7) { + @media (-moz-os-version: windows-win7) { .sidebar-header:not(:-moz-lwtheme), #sidebar-header:not(:-moz-lwtheme) { background-color: #EEF3FA; @@ -83,190 +82,353 @@ -moz-appearance: -moz-win-exclude-glass; } - @media not all and (-moz-os-version: windows-vista) { - @media not all and (-moz-os-version: windows-win7) { - @media not all and (-moz-os-version: windows-win8) { - @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 (-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%); + } - @media not all and (-moz-windows-default-theme) { - #main-window { - background-color: transparent; - } - } + :root[tabsintitlebar] .tab-label:-moz-window-inactive { + /* Calculated to match the opacity change of Windows Explorer + titlebar text change for inactive windows. */ + opacity: .6; + } + } - #titlebar-buttonbox, - .titlebar-button { - -moz-appearance: none !important; - } + @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-button { - border: none; - margin: 0 !important; - padding: 10px 17px; - } + #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-button { - padding-top: 8px; - padding-bottom: 8px; - } + #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 > .toolbarbutton-icon { - width: 12px; - height: 12px; - } + .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); + 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); + 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); + 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); - } - #titlebar-close:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-white); + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); } - - #titlebar-min:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-themes); + + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 0%, 100%, .17); } - #titlebar-max:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-themes); + .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { + background-color: hsla(0, 0%, 100%, .27); + transition: none; } - #main-window[sizemode="maximized"] #titlebar-max:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-themes); + + #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { + background-color: hsla(0, 86%, 49%, 1); } - #titlebar-close:-moz-lwtheme { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-themes); + + #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; + } + } - /* 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; - } - } + #titlebar-buttonbox, + .titlebar-button { + -moz-appearance: none !important; + } - /* 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; - } - } + .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; + } - /* 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; - } - } + #main-window[sizemode=maximized] .titlebar-button { + padding-top: 8px; + padding-bottom: 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; - } - } + .titlebar-button > .toolbarbutton-icon { + width: 12px; + height: 12px; + } - @media (-moz-windows-default-theme) { - .titlebar-button:hover { - background-color: hsla(0, 0%, 0%, .12); - } + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { + opacity: 0.5; + } - .titlebar-button:hover:active { - background-color: hsla(0, 0%, 0%, .22); - } + #main-window[chromemargin^="0,"][sizemode=normal] #navigator-toolbox { + margin-top: -4px; + } - .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { - opacity: 0.5; - } + #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 { - background-color: hsl(355, 86%, 49%); - } + #titlebar-close:hover:active { + background-color: hsla(0, 86%, 49%, 0.6); + transition: none; + } + + /* inactive window */ - #titlebar-close:hover:active { - background-color: hsl(355, 82%, 69%); - } - } - @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-highcontrast); - } - #titlebar-min:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highcontrast-hover); - } - - #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast); - } - #titlebar-max:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highcontrast-hover); - } - - #main-window[sizemode="maximized"] #titlebar-max { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast); - } - #main-window[sizemode="maximized"] #titlebar-max:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highcontrast-hover); - } - - #titlebar-close { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast); - } - #titlebar-close:hover { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highcontrast-hover); - } - } + #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; + } - @media (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7), + #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; @@ -283,7 +445,7 @@ } /* The borders on the glass frame are ours, and inside #browser, and on - * vista and win7 we want to make sure they are "glassy", so we can't use + * 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; @@ -296,18 +458,13 @@ @media (-moz-os-version: windows-win8) { /* Artificially draw window borders that are covered by lwtheme, see bug 591930. - * Borders for vista/win7 are below, win10 doesn't need them. */ + * 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) { - #toolbar-menubar:not(:-moz-lwtheme), - #TabsToolbar:not(:-moz-lwtheme) { - color: black; - } - #main-menubar > menu:not(:-moz-lwtheme) { color: inherit; } @@ -316,11 +473,9 @@ * On aero, the menubar fog disappears for inactive windows, and renders gray * illegible. */ - @media not all and (-moz-os-version: windows-vista) { - @media not all and (-moz-os-version: windows-win7) { - #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive { - color: ThreeDShadow; - } + @media not all and (-moz-os-version: windows-win7) { + #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive { + color: ThreeDShadow; } } } @@ -330,9 +485,8 @@ color: white; } - /* Show borders on vista through win8, but not on win10 and later: */ - @media (-moz-os-version: windows-vista), - (-moz-os-version: windows-win7), + /* 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), |