From b0c1db3ef8d1cd76cf393a1948e66d26ca0d88d7 Mon Sep 17 00:00:00 2001 From: Lootyhoof Date: Wed, 12 Jul 2017 21:49:57 +0100 Subject: [PATCH] Clean up Windows 10 theme styling - Use Windows accent color to determine caption button and title styling - Fix hover animations - Add styling for inactive windows --- browser/base/content/browser-title.css | 17 +++-- browser/themes/windows/browser.css | 89 ++++++++++------------ browser/themes/windows/caption-buttons.svg | 10 ++- 3 files changed, 60 insertions(+), 56 deletions(-) diff --git a/browser/base/content/browser-title.css b/browser/base/content/browser-title.css index 294b7e9762..fb38dbab27 100644 --- a/browser/base/content/browser-title.css +++ b/browser/base/content/browser-title.css @@ -158,6 +158,11 @@ font-size: 15px; text-align: center; } + + #main-window[darkwindowframe="true"]:not(:-moz-window-inactive):not(:-moz-lwtheme)::after { + /* Dark window frame/accent color on Win 8 */ + color: white; + } } @media (-moz-os-version: windows-win10) { @@ -171,16 +176,18 @@ color: white; } } + + @media (-moz-windows-accent-color-applies) { + #main-window:not(:-moz-window-inactive):not(:-moz-lwtheme)::after { + /* Accent color is applied - use the associated text styling */ + color: -moz-win-accentcolortext; + } + } } #main-window[sizemode="maximized"]::after { top: -5px; } - - #main-window[darkwindowframe="true"]:not(:-moz-window-inactive):not(:-moz-lwtheme)::after { - /* Dark window frame/accent color on Win 8/10 */ - color: white; - } } } diff --git a/browser/themes/windows/browser.css b/browser/themes/windows/browser.css index f64fc8300b..c65d7bb90c 100644 --- a/browser/themes/windows/browser.css +++ b/browser/themes/windows/browser.css @@ -3064,7 +3064,7 @@ toolbar[brighttext] #addonbar-closebutton { } :root:not(:-moz-window-inactive):not(:-moz-lwtheme) { - --window-text-color: #ffffff; + --window-text-color: white; } #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) { @@ -3085,7 +3085,6 @@ toolbar[brighttext] #addonbar-closebutton { .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { background-color: hsla(0, 0%, 100%, .17); - transition: background-color linear 120ms; } .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { @@ -3095,39 +3094,12 @@ toolbar[brighttext] #addonbar-closebutton { #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { background-color: hsla(0, 86%, 49%, 1); - transition: background-color linear 120ms; } #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { background-color: hsla(0, 60%, 39%, 1); transition: none; } - - #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) { - 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); - transition: background-color linear 160ms; - } - - .titlebar-button:-moz-window-inactive:not(:-moz-lwtheme):hover:active { - background-color: hsla(0, 0%, 0%, .27); - transition: none; - } } @media (-moz-windows-accent-color-applies) { @@ -3158,7 +3130,6 @@ toolbar[brighttext] #addonbar-closebutton { .titlebar-button:hover { background-color: hsla(0, 0%, 0%, .17); - transition: background-color linear 160ms; } .titlebar-button:hover:active { @@ -3167,25 +3138,8 @@ toolbar[brighttext] #addonbar-closebutton { } /* dark accent color */ - #main-window[darkwindowframe="true"] #titlebar-min:not(:-moz-window-inactive):not(:-moz-lwtheme) { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-highlight); - } - - #main-window[darkwindowframe="true"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-highlight); - } - - #main-window[darkwindowframe="true"][sizemode="maximized"] #titlebar-max:not(:-moz-window-inactive):not(:-moz-lwtheme) { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-highlight); - } - - #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme) { - list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-highlight); - } - #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover { background-color: hsla(0, 0%, 100%, .17); - transition: background-color linear 120ms; } #main-window[darkwindowframe="true"] .titlebar-button:not(#titlebar-close):not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { @@ -3195,7 +3149,6 @@ toolbar[brighttext] #addonbar-closebutton { #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover { background-color: hsla(0, 86%, 49%, 1); - transition: background-color linear 120ms; } #main-window[darkwindowframe="true"] #titlebar-close:not(:-moz-window-inactive):not(:-moz-lwtheme):hover:active { @@ -3217,6 +3170,7 @@ toolbar[brighttext] #addonbar-closebutton { border: none; margin: 0 !important; padding: 9px 17px; + transition: background-color linear 120ms; } #main-window[sizemode="maximized"][tabsontop=true] #tabbrowser-tabs { @@ -3232,7 +3186,7 @@ toolbar[brighttext] #addonbar-closebutton { width: 12px; height: 12px; } - + .titlebar-button:not(:hover) > .toolbarbutton-icon:-moz-window-inactive { opacity: 0.5; } @@ -3256,8 +3210,44 @@ toolbar[brighttext] #addonbar-closebutton { transition: none; } + /* inactive window */ + + #titlebar-min:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-inactive); + } + + #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#maximize-inactive); + } + + #main-window[sizemode="maximized"] #titlebar-max:-moz-window-inactive:not(:-moz-lwtheme) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-inactive); + } + + #titlebar-close:-moz-window-inactive:not(:-moz-lwtheme):not(:hover) { + list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-inactive); + } + + .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); } @@ -3281,7 +3271,6 @@ toolbar[brighttext] #addonbar-closebutton { .titlebar-button:-moz-lwtheme-brighttext:hover { background-color: hsla(0, 0%, 100%, .27); - transition: background-color linear 160ms; } .titlebar-button:-moz-lwtheme-brighttext:hover:active { diff --git a/browser/themes/windows/caption-buttons.svg b/browser/themes/windows/caption-buttons.svg index 798deb9e39..9342aca935 100644 --- a/browser/themes/windows/caption-buttons.svg +++ b/browser/themes/windows/caption-buttons.svg @@ -4,7 +4,7 @@ - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->