From 73a9bdd0726907056c803b9b2dc0f5c94e00ab06 Mon Sep 17 00:00:00 2001
From: MrOtherGuy <jastekken@outlook.com>
Date: Mon, 5 Jul 2021 17:27:33 +0300
Subject: [PATCH] Define color variables for the notification popup

Variable values are defined such that Firefox' own rules will override
them where applicable (Win10 currently). This change lets us simplify
css by not requiring fallback values and it is clearer since color definitions are all in one place.
---
 chrome/proton_dark_light_notifications.css | 74 +++++++++++-----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/chrome/proton_dark_light_notifications.css b/chrome/proton_dark_light_notifications.css
index 4cbb789..9a4234c 100644
--- a/chrome/proton_dark_light_notifications.css
+++ b/chrome/proton_dark_light_notifications.css
@@ -4,13 +4,34 @@ See the above repository for updates as well as full license text. */
 /* Makes web notifications use dark/light theme based on your selected theme, and makes them fit a bit better to rounded proton style. */
 
 @-moz-document url("chrome://global/content/alerts/alert.xhtml") {
-  /* line below removes background from the notification "window" on linux */
-  #alertNotification{ background: transparent !important; }
-
+  
+  /* Color scheme definitions
+   * Intentionally let Firefox override these on Windows10
+   */
+  :root{
+    --menu-color: #15141a;
+    --menu-background-color: #f9f9fb;
+    --menu-border-color: #cfcfd8;
+    --menuitem-hover-background-color: #e0e0e6;
+  }
+  @media (-moz-toolbar-prefers-color-scheme:dark) {
+    :root {
+      --menu-border-color: #5b5b66;
+      --menu-color: #fbfbfe;
+      --menu-background-color: #2b2a33;
+      --menuitem-hover-background-color: #52525e;
+    }
+    #alertSourceLabel { color: rgb(5,209,241) !important; }
+  }
+  
+  /* The line below removes background "layer" from the notification on linux, Windows and macOS don't have that layer in the first place */
+  :root{ background: transparent !important; }
+  
+  /* Make Firefox actually use the colors set above */
   #alertBox {
-    color: var(--menu-color, #15141a) !important;
-    background-color: var(--menu-background-color, #f9f9fb) !important;
-    border-color: var(--menu-border-color, #cfcfd8) !important;
+    color: var(--menu-color) !important;
+    background-color: var(--menu-background-color) !important;
+    border-color: var(--menu-border-color) !important;
     border-radius: 6px !important;
     -moz-window-shadow: cliprounded !important;
   }
@@ -21,8 +42,16 @@ See the above repository for updates as well as full license text. */
     margin-inline: 0 !important;
     margin-bottom: -4px !important;
   }
-
-  /* Shape */
+  .close-icon,
+  #alertSettings {
+    background: transparent !important
+  }
+  .close-icon:hover > .toolbarbutton-icon,
+  #alertSettings:is(:hover,[open]) > .button-box > .box-inherit {
+    background-color: var(--menuitem-hover-background-color);
+  }
+  
+  /* Reshape and move the buttons a bit */
   .close-icon > .toolbarbutton-icon,
   #alertSettings > .button-box > .box-inherit {
     border-radius: 4px !important;
@@ -35,33 +64,4 @@ See the above repository for updates as well as full license text. */
   #alertSettings > .button-box > .box-inherit > .button-icon {
     padding: 1px;
   }
-
-  /* Color */
-  .close-icon,
-  #alertSettings {
-    background: transparent !important
-  }
-  .close-icon:hover > .toolbarbutton-icon,
-  #alertSettings:is(:hover,[open]) > .button-box > .box-inherit {
-    background-color: var(--menuitem-hover-background-color, #e0e0e6) !important;
-  }
-
-  @media (-moz-toolbar-prefers-color-scheme:dark) {
-    :root {
-      --menu-border-color: #5b5b66 !important;
-    }
-
-    #alertBox {
-      color: var(--menu-color, #fbfbfe) !important;
-      background-color: var(--menu-background-color, #2b2a33) !important;
-    }
-    .close-icon:hover > .toolbarbutton-icon,
-    #alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
-      background-color: var(--menuitem-hover-background-color, #52525e) !important;
-    }
-
-    #alertSourceLabel {
-      color: rgb(5,209,241) !important;
-    }
-  }
 }