summaryrefslogtreecommitdiffstats
path: root/browser/themes
diff options
context:
space:
mode:
authorwolfbeast <mcwerewolf@gmail.com>2018-02-17 16:28:03 +0100
committerwolfbeast <mcwerewolf@gmail.com>2018-02-17 16:28:03 +0100
commitc9b266dc20054bcafeee5e59c0b7f60adbf5cdf7 (patch)
treefeea8ffdcb555a96c423c4eab0794a82dd0cd4e6 /browser/themes
parent1da0e8a095d82dd6b9ad0c0a45a7ee3b9d80ded7 (diff)
downloadUXP-c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7.tar
UXP-c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7.tar.gz
UXP-c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7.tar.lz
UXP-c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7.tar.xz
UXP-c9b266dc20054bcafeee5e59c0b7f60adbf5cdf7.zip
Use windows 10 Accent colors.
Diffstat (limited to 'browser/themes')
-rw-r--r--browser/themes/windows/browser-aero.css466
-rw-r--r--browser/themes/windows/browser.css17
-rw-r--r--browser/themes/windows/caption-buttons.svg133
-rw-r--r--browser/themes/windows/devedition.css10
4 files changed, 406 insertions, 220 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;
diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css
index 2de5a6545..15e776da1 100644
--- a/browser/themes/windows/browser.css
+++ b/browser/themes/windows/browser.css
@@ -16,6 +16,8 @@
%define conditionalForwardWithUrlbar window:not([chromehidden~="toolbar"]) #urlbar-wrapper
:root {
+ --titlebar-text-color: currentColor;
+
--space-above-tabbar: 15px;
--backbutton-urlbar-overlap: 6px;
@@ -187,19 +189,22 @@ toolbar:-moz-lwtheme {
transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
}
+#toolbar-menubar,
+#TabsToolbar {
+ color: var(--titlebar-text-color);
+}
+
@media not all and (-moz-windows-compositor),
not all and (-moz-windows-default-theme) {
/* Please keep the menu text colors in this media block in sync with
* devedition.css, minus the :not(:-moz-lwtheme) condition - see Bug 1165718.
*/
- #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
- #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
- color: CaptionText;
+ :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme) {
+ --titlebar-text-color: CaptionText;
}
- #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
- #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
- color: InactiveCaptionText;
+ :root[tabsintitlebar]:not([inFullscreen]):not(:-moz-lwtheme):-moz-window-inactive {
+ --titlebar-text-color: InactiveCaptionText;
}
}
diff --git a/browser/themes/windows/caption-buttons.svg b/browser/themes/windows/caption-buttons.svg
index 3ba4f95a1..9cb42d539 100644
--- a/browser/themes/windows/caption-buttons.svg
+++ b/browser/themes/windows/caption-buttons.svg
@@ -1,49 +1,61 @@
+<svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- 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" xmlns:xlink="http://www.w3.org/1999/xlink">
<style>
+ g {
+ stroke: ButtonText;
+ stroke-width: 0.9px;
+ fill: none;
+ }
+
g:not(:target) {
display: none;
}
+
use:target > g {
display: initial;
}
- g {
- stroke: ButtonText;
- stroke-width: 0.9px;
- fill: none;
- }
- g:not([id|="close"]) {
- shape-rendering: crispEdges;
+ .highlight > g {
+ stroke: HighlightText;
}
- .highcontrast {
- stroke-width: 1.9px;
+ .inactive > g {
+ stroke: black;
}
- .highcontrast-hover > g {
- stroke: HighlightText;
+
+ .bolder {
+ stroke-width: 1.6px;
+ stroke: black;
}
- .white > g {
- stroke: #fff;
+
+ .outline {
+ stroke-width: 4px;
+ stroke: white;
+ opacity: 0.75;
}
- .themes {
- stroke: #fff;
- stroke-width: 1.9px;
+
+ .inverted {
+ stroke-width: 1.6px;
+ stroke: white;
}
- .outer-stroke {
- stroke: #000;
- stroke-width: 3.6;
- opacity: .75;
+ .outline-inverted {
+ stroke-width: 4px;
+ stroke: black;
+ opacity: 0.75;
}
- .restore-background-window {
- stroke-width: .9;
+
+ .outline-thinner {
+ stroke-width: 3.6px;
}
+
</style>
+
<g id="close">
- <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
+ <line x1="1" y1="1" x2="11" y2="11" stroke-width="1px"/>
+ <line x1="11" y1="1" x2="1" y2="11" stroke-width="1px"/>
</g>
<g id="maximize">
<rect x="1.5" y="1.5" width="9" height="9"/>
@@ -56,45 +68,54 @@
<polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5"/>
</g>
- <use id="close-white" class="white" xlink:href="#close"/>
- <use id="maximize-white" class="white" xlink:href="#maximize"/>
- <use id="minimize-white" class="white" xlink:href="#minimize"/>
- <use id="restore-white" class="white" xlink:href="#restore"/>
-
- <g id="close-highcontrast" class="highcontrast">
- <path d="M1,1 l 10,10 M1,11 l 10,-10"/>
+ <g id="close-outline">
+ <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline"/>
+ <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline"/>
+ <line x1="1" y1="1" x2="11" y2="11" class="bolder"/>
+ <line x1="11" y1="1" x2="1" y2="11" class="bolder"/>
</g>
- <g id="maximize-highcontrast" class="highcontrast">
- <rect x="2" y="2" width="8" height="8"/>
+ <g id="maximize-outline">
+ <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline"/>
+ <rect x="1.5" y="1.5" width="9" height="9" class="bolder"/>
</g>
- <g id="minimize-highcontrast" class="highcontrast">
- <line x1="1" y1="6" x2="11" y2="6"/>
+ <g id="minimize-outline">
+ <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline outline-thinner"/>
+ <line x1="1" y1="5.5" x2="11" y2="5.5" class="bolder"/>
</g>
- <g id="restore-highcontrast" class="highcontrast">
- <rect x="2" y="4" width="6" height="6"/>
- <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
+ <g id="restore-outline">
+ <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline"/>
+ <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline"/>
+ <rect x="1.5" y="3.5" width="7" height="7" class="bolder"/>
+ <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="bolder"/>
</g>
- <use id="close-highcontrast-hover" class="highcontrast-hover" xlink:href="#close-highcontrast"/>
- <use id="maximize-highcontrast-hover" class="highcontrast-hover" xlink:href="#maximize-highcontrast"/>
- <use id="minimize-highcontrast-hover" class="highcontrast-hover" xlink:href="#minimize-highcontrast"/>
- <use id="restore-highcontrast-hover" class="highcontrast-hover" xlink:href="#restore-highcontrast"/>
-
- <g id="close-themes" class="themes">
- <path d="M1,1 l 10,10 M1,11 l 10,-10" class="outer-stroke" />
- <path d="M1.75,1.75 l 8.5,8.5 M1.75,10.25 l 8.5,-8.5"/>
+ <g id="close-outline-inverted">
+ <line x1="1" y1="1" x2="11" y2="11" stroke-linecap="round" class="outline-inverted"/>
+ <line x1="11" y1="1" x2="1" y2="11" stroke-linecap="round" class="outline-inverted"/>
+ <line x1="1" y1="1" x2="11" y2="11" class="inverted"/>
+ <line x1="11" y1="1" x2="1" y2="11" class="inverted"/>
</g>
- <g id="maximize-themes" class="themes">
- <rect x="2" y="2" width="8" height="8" class="outer-stroke"/>
- <rect x="2" y="2" width="8" height="8"/>
+ <g id="maximize-outline-inverted">
+ <rect x="1.2" y="1.2" width="9.6" height="9.6" stroke-linecap="round" class="outline-inverted"/>
+ <rect x="1.5" y="1.5" width="9" height="9" class="inverted"/>
</g>
- <g id="minimize-themes" class="themes">
- <line x1="0" y1="6" x2="12" y2="6" class="outer-stroke"/>
- <line x1="1" y1="6" x2="11" y2="6"/>
+ <g id="minimize-outline-inverted">
+ <line x1="1" y1="5.5" x2="11" y2="5.5" stroke-linecap="round" class="outline-inverted outline-thinner"/>
+ <line x1="1" y1="5.5" x2="11" y2="5.5" class="inverted"/>
</g>
- <g id="restore-themes" class="themes">
- <path d="M2,4 l 6,0 l 0,6 l -6,0z M2.5,1.5 l 8,0 l 0,8" class="outer-stroke"/>
- <rect x="2" y="4" width="6" height="6"/>
- <polyline points="3.5,1.5 10.5,1.5 10.5,8.5" class="restore-background-window"/>
+ <g id="restore-outline-inverted">
+ <rect x="1.5" y="3.5" width="7" height="7" stroke-linecap="round" class="outline-inverted"/>
+ <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" stroke-linecap="round" class="outline-inverted"/>
+ <rect x="1.5" y="3.5" width="7" height="7" class="inverted"/>
+ <polyline points="3.5,3.5 3.5,1.5 10.5,1.5 10.5,8.5 8.5,8.5" class="inverted"/>
</g>
+
+ <use id="close-highlight" class="highlight" xlink:href="#close"/>
+ <use id="maximize-highlight" class="highlight" xlink:href="#maximize"/>
+ <use id="minimize-highlight" class="highlight" xlink:href="#minimize"/>
+ <use id="restore-highlight" class="highlight" xlink:href="#restore"/>
+ <use id="close-inactive" class="inactive" xlink:href="#close"/>
+ <use id="maximize-inactive" class="inactive" xlink:href="#maximize"/>
+ <use id="minimize-inactive" class="inactive" xlink:href="#minimize"/>
+ <use id="restore-inactive" class="inactive" xlink:href="#restore"/>
</svg>
diff --git a/browser/themes/windows/devedition.css b/browser/themes/windows/devedition.css
index 4c25f33a1..2dc72eeeb 100644
--- a/browser/themes/windows/devedition.css
+++ b/browser/themes/windows/devedition.css
@@ -193,14 +193,12 @@
/* 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;
+ :root[tabsintitlebar]:not([inFullscreen]) {
+ --titlebar-text-color: CaptionText;
}
- #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:-moz-window-inactive,
- #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:-moz-window-inactive {
- color: InactiveCaptionText;
+ :root[tabsintitlebar]:not([inFullscreen]):-moz-window-inactive {
+ --titlebar-text-color: InactiveCaptionText;
}
#main-window[tabsintitlebar] #main-menubar > menu {