Bug 1500742 - Fix the toolbarbutton colors on dark LW-themes. r=jorgk DONTBUILD
authorRichard Marti <richard.marti@gmail.com>
Sat, 20 Oct 2018 00:29:21 +0200
changeset 33434 1c2a3007c1f5ab75a11afcecd0625d827383c75a
parent 33433 1f36e5572558f5693d853585ae63a5b0f0f69d96
child 33435 ded30314a53cfd75d95db2e808f3a5fdc6b4fd62
push id387
push userclokep@gmail.com
push dateMon, 10 Dec 2018 21:30:47 +0000
reviewersjorgk
bugs1500742
Bug 1500742 - Fix the toolbarbutton colors on dark LW-themes. r=jorgk DONTBUILD
mail/themes/linux/mail/messenger.css
mail/themes/windows/mail/messenger.css
--- a/mail/themes/linux/mail/messenger.css
+++ b/mail/themes/linux/mail/messenger.css
@@ -6,32 +6,29 @@
   == Styles shared throughout the Messenger application.
   ======================================================================= */
 
 @import url("chrome://global/skin/");
 @import url("chrome://messenger/content/messenger.css");
 @import url("chrome://messenger/skin/shared/messenger.css");
 
 :root {
-  --toolbarHighlight: rgba(255, 255, 255, .4);
-
   --tab-min-height: 30px;
   --tabs-border-color: rgba(0,0,0,.3);
   --tabline-color: highlight;
 
   --toolbar-non-lwt-bgcolor: -moz-dialog;
   --toolbar-non-lwt-textcolor: -moz-dialogtext;
   --toolbar-non-lwt-bgimage: linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,.15));
   --toolbar-bgcolor: var(--toolbar-non-lwt-bgcolor);
   --toolbar-bgimage: var(--toolbar-non-lwt-bgimage);
   --toolbox-border-bottom-color: ThreeDShadow;
 
   --toolbarbutton-border-radius: 2px;
   --toolbarbutton-icon-fill-opacity: .85;
-  --toolbarbutton-text-color: #222;
   --toolbarbutton-hover-background: rgba(255, 255, 255, .5) linear-gradient(rgba(255, 255, 255, .5), transparent);
   --toolbarbutton-hover-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-header-bordercolor: rgba(0, 0, 0, .25);
   --toolbarbutton-hover-boxshadow: none;
 
   --toolbarbutton-active-background: rgba(154, 154, 154, .5) linear-gradient(rgba(255, 255, 255, .7), rgba(255, 255, 255, .4));
   --toolbarbutton-active-bordercolor: rgba(0, 0, 0, .3);
   --toolbarbutton-active-boxshadow: 0 1px 1px rgba(0, 0, 0, .1) inset, 0 0 1px rgba(0, 0, 0, .3) inset;
@@ -57,52 +54,50 @@
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
+#FindToolbar:-moz-lwtheme,
+.contentTabToolbox:-moz-lwtheme,
+#ab-toolbox > toolbar:-moz-lwtheme,
+.mail-toolbox > toolbar:-moz-lwtheme,
+#compose-toolbox > toolbar:-moz-lwtheme,
+#navigation-toolbox > toolbar:-moz-lwtheme {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
+
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15)) inset;
+
+  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .2));
+}
+
 .contentTabToolbox[brighttext],
 #header-view-toolbar[brighttext],
 #ab-toolbox > toolbar[brighttext],
 .mail-toolbox > toolbar[brighttext],
 #event-toolbox > toolbar[brighttext],
 #compose-toolbox > toolbar[brighttext],
 #headers-box > toolbar[brighttext],
 #FormatToolbox > toolbar[brighttext],
 :root[lwt-tree-brighttext] #folderPane-toolbar {
-  --toolbarbutton-text-color: #fff;
-  --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
-  --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
-  --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
-
-  --toolbarbutton-active-background: rgba(255, 255, 255, .4);
-  --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
-  --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
-
-  --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
-}
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+  --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
 
-#FindToolbar:-moz-lwtheme,
-.contentTabToolbox:-moz-lwtheme,
-#ab-toolbox > toolbar:-moz-lwtheme,
-.mail-toolbox > toolbar:-moz-lwtheme,
-#compose-toolbox > toolbar:-moz-lwtheme,
-#navigation-toolbox > toolbar:-moz-lwtheme {
-  --toolbarbutton-text-color: currentColor;
-  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
-  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .2));
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
 
-  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(70%, 70%, 70%, .25));
-  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .3));
-  --toolbarbutton-active-boxshadow: 0 0 2px var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .6)) inset;
-
-  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(85%, 85%, 85%, .25));
+  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
 }
 
 /* Hide the titlebar explicitly on versions of GTK+ where
  * it's rendered by window manager. */
 @media (-moz-gtk-csd-available: 0) {
   #titlebar {
     display: none;
   }
--- a/mail/themes/windows/mail/messenger.css
+++ b/mail/themes/windows/mail/messenger.css
@@ -76,51 +76,51 @@
   --arrowpanel-dimmed: rgba(249, 249, 250, .1);
   --arrowpanel-dimmed-further: rgba(249, 249, 250, .15);
 }
 
 toolbar[brighttext] {
   --toolbarbutton-icon-fill-attention: var(--lwt-toolbarbutton-icon-fill-attention, #45a1ff);
 }
 
-.contentTabToolbox[brighttext],
-#header-view-toolbar[brighttext],
-#ab-toolbox > toolbar[brighttext],
-.mail-toolbox > toolbar[brighttext],
-#event-toolbox > toolbar[brighttext],
-#compose-toolbox > toolbar[brighttext],
-#navigation-toolbox > toolbar[brighttext],
-:root[lwt-tree-brighttext] #folderPane-toolbar {
-  --toolbarbutton-hover-background: rgba(255, 255, 255, .25);
-  --toolbarbutton-hover-bordercolor: rgba(255, 255, 255, .5);
-  --toolbarbutton-header-bordercolor: rgba(255, 255, 255, .25);
-
-  --toolbarbutton-active-background: rgba(255, 255, 255, .4);
-  --toolbarbutton-active-bordercolor: rgba(255, 255, 255, .7);
-  --toolbarbutton-active-boxshadow: 0 0 0 1px rgba(255, 255, 255, .4) inset;
-
-  --toolbarbutton-checkedhover-backgroundcolor: rgba(255, 255, 255, .5);
-}
-
 #FindToolbar:-moz-lwtheme,
 .contentTabToolbox:-moz-lwtheme,
 #ab-toolbox > toolbar:-moz-lwtheme,
 .mail-toolbox > toolbar:-moz-lwtheme,
 #compose-toolbox > toolbar:-moz-lwtheme,
 #navigation-toolbox > toolbar:-moz-lwtheme {
   --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
   --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .1));
 
   --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15));
   --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15));
   --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(0, 0, 0, .15)) inset;
 
   --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(0, 0, 0, .2));
 }
 
+.contentTabToolbox[brighttext],
+#header-view-toolbar[brighttext],
+#ab-toolbox > toolbar[brighttext],
+.mail-toolbox > toolbar[brighttext],
+#event-toolbox > toolbar[brighttext],
+#compose-toolbox > toolbar[brighttext],
+#navigation-toolbox > toolbar[brighttext],
+:root[lwt-tree-brighttext] #folderPane-toolbar {
+  --toolbarbutton-hover-background: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+  --toolbarbutton-hover-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+  --toolbarbutton-header-bordercolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .25));
+
+  --toolbarbutton-active-background: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4));
+  --toolbarbutton-active-bordercolor: var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .7));
+  --toolbarbutton-active-boxshadow: 0 0 0 1px var(--lwt-toolbarbutton-active-background, rgba(255, 255, 255, .4)) inset;
+
+  --toolbarbutton-checkedhover-backgroundcolor: var(--lwt-toolbarbutton-hover-background, rgba(255, 255, 255, .5));
+}
+
 .menu-iconic > .menu-iconic-left,
 .menuitem-iconic > .menu-iconic-left {
   display: -moz-box;
   padding-top: 0;
 }
 
 #tabbar-toolbar[customizing="true"] {
   min-width: 24px;