From e2e4fba00dc650092f26d7d40e38b5b6a1170776 Mon Sep 17 00:00:00 2001
From: MS_Y <alstjr7375@daum.net>
Date: Mon, 5 Jul 2021 13:06:55 +0000
Subject: [PATCH] Notifications using firefox's cssvars (#122)

* notifications using firefox's cssvars

* Proton dark notification border color like windows10
---
 chrome/proton_dark_light_notifications.css | 65 ++++++++++++++--------
 1 file changed, 42 insertions(+), 23 deletions(-)

diff --git a/chrome/proton_dark_light_notifications.css b/chrome/proton_dark_light_notifications.css
index ae085eb..4cbb789 100644
--- a/chrome/proton_dark_light_notifications.css
+++ b/chrome/proton_dark_light_notifications.css
@@ -5,9 +5,15 @@ See the above repository for updates as well as full license text. */
 
 @-moz-document url("chrome://global/content/alerts/alert.xhtml") {
   /* line below removes background from the notification "window" on linux */
-  #alertNotification{ background: transparent !important }
-  
-  #alertBox{ border-radius: 6px !important; }
+  #alertNotification{ background: transparent !important; }
+
+  #alertBox {
+    color: var(--menu-color, #15141a) !important;
+    background-color: var(--menu-background-color, #f9f9fb) !important;
+    border-color: var(--menu-border-color, #cfcfd8) !important;
+    border-radius: 6px !important;
+    -moz-window-shadow: cliprounded !important;
+  }
   #alertSettings {
     fill: currentColor !important;
     color: inherit !important;
@@ -15,34 +21,47 @@ See the above repository for updates as well as full license text. */
     margin-inline: 0 !important;
     margin-bottom: -4px !important;
   }
-  #alertSettings, 
-  .close-icon{ background: transparent !important }
-  
-  .close-icon:hover > .toolbarbutton-icon,
-  #alertSettings:is(:hover,[open]) > .button-box > .box-inherit{
-    background-color: rgba(0,0,0,.09) !important;
-  }
-  #alertSettings > .button-box > .box-inherit,
-  .close-icon > .toolbarbutton-icon{
+
+  /* Shape */
+  .close-icon > .toolbarbutton-icon,
+  #alertSettings > .button-box > .box-inherit {
+    border-radius: 4px !important;
     padding: 2px !important;
     margin: 2px 2px -2px 0 !important;
-    border-radius: 4px !important;
   }
-  #alertSettings > .button-box > .box-inherit > .button-icon { padding: 1px }
-  #alertSettings > .button-box > .box-inherit{ margin: -4px 4px 3px 0 !important; }
-  
-  @media (-moz-toolbar-prefers-color-scheme:dark){
+  #alertSettings > .button-box > .box-inherit {
+    margin: -4px 4px 3px 0 !important;
+  }
+  #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 {
-      border-color: rgba(107,107,107,.3) !important;
-      background-color: rgb(43,42,51) !important;
-      color: rgba(215,215,215,.9) !important;
+      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: rgba(215,215,215,.1) !important;
+    #alertSettings:is(:hover, [open]) > .button-box > .box-inherit {
+      background-color: var(--menuitem-hover-background-color, #52525e) !important;
     }
+
     #alertSourceLabel {
       color: rgb(5,209,241) !important;
     }
   }
-}
\ No newline at end of file
+}