notifications: make popup window

5 files changed, 187 insertions, 80 deletions

diff --git a/scss/_lib.scss b/scss/_lib.scss
index e12140f..d2ad3d0 100644
--- a/scss/_lib.scss
+++ b/scss/_lib.scss
@@ -15,7 +15,7 @@ $scale: 0.068rem;
     border: s($width) $style color.change($colour, $alpha: $alpha);
 }
 
-@mixin shadow($colour: scheme.$mantle, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
+@mixin shadow($colour: black, $alpha: 0.4, $x: 2, $y: 3, $blur: 8, $spread: 0) {
     box-shadow: s($x) s($y) s($blur) s($spread) color.change($colour, $alpha: $alpha);
 }
 
diff --git a/scss/bar.scss b/scss/bar.scss
index ab75b00..1d73319 100644
--- a/scss/bar.scss
+++ b/scss/bar.scss
@@ -92,7 +92,7 @@
         color: scheme.$blue;
     }
 
-    .notifications {
+    .unread {
         color: scheme.$mauve;
     }
 
diff --git a/scss/notifications.scss b/scss/notifications.scss
new file mode 100644
index 0000000..51f1a0b
--- /dev/null
+++ b/scss/notifications.scss
@@ -0,0 +1,101 @@
+@use "sass:color";
+@use "scheme";
+@use "lib";
+@use "font";
+
+@mixin popup($accent) {
+    .separator {
+        background-color: $accent;
+    }
+
+    .image {
+        @include lib.border($accent, 0.05);
+    }
+}
+
+.notifications {
+    @include lib.rounded(8);
+    @include lib.border(scheme.$mauve, 0.4, 2);
+    @include lib.shadow;
+
+    min-width: lib.s(400);
+    min-height: lib.s(600);
+    background-color: scheme.$base;
+    color: scheme.$mauve;
+    padding: lib.s(10) lib.s(12);
+
+    .header {
+        @include font.mono;
+        @include lib.spacing(8);
+
+        padding: 0 lib.s(5);
+        margin-bottom: lib.s(8);
+
+        button {
+            @include lib.rounded(5);
+            @include lib.element-decel;
+
+            padding: lib.s(3) lib.s(8);
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface0;
+            }
+
+            &:active {
+                background-color: scheme.$surface1;
+            }
+
+            &.enabled {
+                background-color: scheme.$mauve;
+                color: scheme.$base;
+
+                &:hover,
+                &:focus {
+                    background-color: color.mix(scheme.$mauve, scheme.$base, 80%);
+                }
+
+                &:active {
+                    background-color: color.mix(scheme.$mauve, scheme.$base, 70%);
+                }
+            }
+        }
+    }
+
+    .notification {
+        .wrapper {
+            padding-bottom: lib.s(10);
+        }
+
+        .inner {
+            background-color: color.mix(scheme.$surface0, scheme.$base, 70%);
+
+            &.low {
+                @include popup(scheme.$overlay0);
+            }
+
+            &.normal {
+                @include lib.border(scheme.$lavender, 0.3);
+                @include popup(scheme.$lavender);
+            }
+
+            &.critical {
+                @include lib.border(scheme.$red, 0.5);
+                @include popup(scheme.$red);
+            }
+        }
+
+        .actions > * {
+            background-color: scheme.$surface1;
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface2;
+            }
+
+            &:active {
+                background-color: scheme.$overlay0;
+            }
+        }
+    }
+}
diff --git a/scss/notifpopups.scss b/scss/notifpopups.scss
index 25e52e1..cec24a4 100644
--- a/scss/notifpopups.scss
+++ b/scss/notifpopups.scss
@@ -21,86 +21,22 @@
     min-width: lib.s(410);
     padding-left: lib.s(10); // So notifications can overshoot for init animation
 
-    .wrapper {
-        padding-top: lib.s(10);
-    }
-
     .notification {
-        @include lib.rounded(8, $tr: 0, $br: 0);
-        @include lib.shadow;
-        @include font.main;
-        @include popup(scheme.$lavender);
-
-        background-color: scheme.$base;
-        color: scheme.$text;
-        padding: lib.s(10) lib.s(12);
-
-        @include lib.spacing($vertical: true);
-
-        &.low {
-            @include popup(scheme.$overlay0);
-        }
-
-        &.critical {
-            @include popup(scheme.$red);
+        .wrapper {
+            padding-top: lib.s(10);
         }
-    }
-
-    .header,
-    .content {
-        padding: 0 lib.s(5);
-    }
-
-    .header {
-        @include font.mono;
-        @include lib.spacing(5);
-    }
-
-    .content {
-        @include lib.spacing(10);
-    }
-
-    .app-icon {
-        font-size: lib.s(18);
-    }
-
-    .image {
-        @include lib.rounded(10);
-
-        background-size: cover;
-        background-position: center;
-        min-width: lib.s(64);
-        min-height: lib.s(64);
-        margin-top: lib.s(3);
-    }
-
-    .summary {
-        @include font.title;
-
-        font-size: lib.s(16);
-    }
-
-    .body {
-        font-size: lib.s(14);
-    }
-
-    .actions {
-        @include lib.spacing;
-
-        & > * {
-            @include lib.rounded(5);
-            @include lib.element-decel;
 
-            padding: lib.s(5) lib.s(10);
-            background-color: scheme.$surface0;
+        .inner {
+            @include lib.rounded(8, $tr: 0, $br: 0);
+            @include lib.shadow;
+            @include popup(scheme.$lavender);
 
-            &:hover,
-            &:focus {
-                background-color: scheme.$surface1;
+            &.low {
+                @include popup(scheme.$overlay0);
             }
 
-            &:active {
-                background-color: scheme.$surface2;
+            &.critical {
+                @include popup(scheme.$red);
             }
         }
     }
diff --git a/scss/widgets.scss b/scss/widgets.scss
index 39ab490..e54a117 100644
--- a/scss/widgets.scss
+++ b/scss/widgets.scss
@@ -17,6 +17,78 @@ label.icon {
     @include font.icon;
 }
 
+.notification {
+    .inner {
+        @include lib.rounded(8);
+        @include font.main;
+
+        background-color: scheme.$base;
+        color: scheme.$text;
+        padding: lib.s(10) lib.s(12);
+
+        @include lib.spacing($vertical: true);
+    }
+
+    .header,
+    .content {
+        padding: 0 lib.s(5);
+    }
+
+    .header {
+        @include font.mono;
+        @include lib.spacing(8);
+    }
+
+    .content {
+        @include lib.spacing(10);
+    }
+
+    .app-icon {
+        font-size: lib.s(18);
+    }
+
+    .image {
+        @include lib.rounded(10);
+
+        background-size: cover;
+        background-position: center;
+        min-width: lib.s(64);
+        min-height: lib.s(64);
+        margin-top: lib.s(3);
+    }
+
+    .summary {
+        @include font.title;
+
+        font-size: lib.s(16);
+    }
+
+    .body {
+        font-size: lib.s(14);
+    }
+
+    .actions {
+        @include lib.spacing;
+
+        & > * {
+            @include lib.rounded(5);
+            @include lib.element-decel;
+
+            padding: lib.s(5) lib.s(10);
+            background-color: scheme.$surface0;
+
+            &:hover,
+            &:focus {
+                background-color: scheme.$surface1;
+            }
+
+            &:active {
+                background-color: scheme.$surface2;
+            }
+        }
+    }
+}
+
 separator,
 .separator {
     @include lib.rounded(2);
@@ -112,9 +184,6 @@ tooltip {
 
 scrollbar {
     trough {
-        @include lib.rounded(1000);
-
-        min-width: lib.s(12);
         background-color: transparent;
     }
 
@@ -122,12 +191,13 @@ scrollbar {
         @include lib.rounded(1000);
         @include lib.element-decel;
 
-        min-width: lib.s(6);
+        min-width: lib.s(3);
         min-height: lib.s(30);
         background-color: color.change(scheme.$overlay0, $alpha: 0.3);
 
         &:hover,
         &:focus {
+            min-width: lib.s(6);
             background-color: color.change(scheme.$overlay0, $alpha: 0.4);
         }