roytam1/palemoon27
1
0
Fork 0
mirror of https://github.com/roytam1/palemoon27.git synced 2026-06-01 08:19:25 +00:00
Code Issues Projects Releases Wiki Activity

Clean up Windows 10 theme styling

Browse Source 
- Use Windows accent color to determine caption button and title styling
- Fix hover animations
- Add styling for inactive windows
This commit is contained in:
Lootyhoof
2017-07-12 21:49:57 +01:00
committed by Roy Tam
parent 590e35da69
commit b0c1db3ef8
3 changed files with 60 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
browser/base/content/browser-title.css
+12 -5
View File
@@ -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;
}
}
}
browser/themes/windows/browser.css
+39 -50
View File
@@ -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 {
browser/themes/windows/caption-buttons.svg
+9 -1
View File
@@ -4,7 +4,7 @@
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<style>
g {
stroke: ButtonText;
stroke: -moz-win-accentcolortext;
stroke-width: 0.9px;
fill: none;
}
@@ -20,6 +20,10 @@
.highlight > g {
stroke: HighlightText;
}
.inactive > g {
stroke: black;
}
.bolder {
stroke-width: 1.6px;
@@ -110,4 +114,8 @@
<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>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB