add notifications to astal

2 files changed, 90 insertions, 0 deletions

diff --git a/pkgs/astal/src/style/style.scss b/pkgs/astal/src/style/style.scss
index 7be2b2f..0c66051 100644
--- a/pkgs/astal/src/style/style.scss
+++ b/pkgs/astal/src/style/style.scss
@@ -1,3 +1,4 @@
+@use "sass:string";
 @use "sass:color";
 @use "sass:math";
 
diff --git a/pkgs/astal/src/style/widget/deck.scss b/pkgs/astal/src/style/widget/deck.scss
new file mode 100644
index 0000000..cd926f0
--- /dev/null
+++ b/pkgs/astal/src/style/widget/deck.scss
@@ -0,0 +1,89 @@
+
+@function gtkalpha($c, $a) {
+    @return string.unquote("alpha(#{$c},#{$a})");
+}
+
+$deck-scale: $font-size * 5;
+
+.deck {
+
+    > box {
+        padding: $outer-gap;
+    }
+
+    .notification {
+        > box {
+            color: $fg;
+            background: $bg;
+            border-radius: $outer-radius;
+            margin-bottom: $outer-gap;
+            min-width: $deck-scale * 5;
+        }
+    }
+}
+
+.notification {
+    > box {
+        &.critical {
+            .app-name {
+                color: gtkalpha($error, .8);
+            }
+
+            .app-icon {
+                color: gtkalpha($error, .6);
+            }
+        }
+    }
+
+    .header {
+        padding: $outer-gap;
+        color: gtkalpha($fg, 0.5);
+
+        .app-icon {
+            margin-left: $inner-gap;
+            margin-right: $outer-gap;
+        }
+
+        .app-name {
+            margin-right: $inner-gap;
+            font-weight: bold;
+
+            &:first-child {
+                margin-left: $outer-gap;
+            }
+        }
+
+        .time {
+            margin: 0 $outer-gap;
+        }
+
+        button {
+            padding: $inner-gap;
+            border-radius: $inner-radius;
+            min-width: 0;
+            min-height: 0;
+        }
+    }
+
+    separator {
+        margin: 0 $outer-gap;
+        background: gtkalpha($fg, .1);
+    }
+
+    .content {
+        margin: $outer-gap;
+
+        .body {
+            color: gtkalpha($fg, 0.8);
+        }
+
+        .image {
+            margin-right: $outer-gap;
+            border-radius: $inner-gap;
+            min-width: $deck-scale;
+            min-height: $deck-scale;
+            background-size: cover;
+            background-position: center;
+        }
+    }
+}