summaryrefslogtreecommitdiffstats
path: root/browser/themes/windows/browser-aero.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/windows/browser-aero.css')
-rw-r--r--browser/themes/windows/browser-aero.css466
1 files changed, 314 insertions, 152 deletions
diff --git a/browser/themes/windows/browser-aero.css b/browser/themes/windows/browser-aero.css
index 5ff9d8250..8e1de9577 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;
}
}
- }
- @media (-moz-os-version: windows-vista),
- (-moz-os-version: windows-win7),
+ /* 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;