1 files changed, 79 insertions, 0 deletions
diff --git a/.config/ags/widget/notifications/notifications.scss b/.config/ags/widget/notifications/notifications.scss
new file mode 100644
index 0000000..369932f
--- /dev/null
+++ b/.config/ags/widget/notifications/notifications.scss
@@ -0,0 +1,79 @@
+@mixin notification() {
+    &.critical {
+        box-shadow: inset 0 0 0.5em 0 $error-bg;
+    }
+
+    &:hover button.close-button {
+        @include button-hover;
+        background-color: transparentize($error-bg, 0.5);
+    }
+
+    .content {
+        .title {
+            margin-right: $spacing;
+            color: $fg;
+            font-size: 1.1em;
+        }
+
+        .time {
+            color: transparentize($fg, 0.2);
+        }
+
+        .description {
+            font-size: 0.9em;
+            color: transparentize($fg, 0.2);
+        }
+
+        .icon {
+            border-radius: $radius * 0.8;
+            margin-right: $spacing;
+
+            &.img {
+                border: $border;
+            }
+        }
+    }
+
+    box.actions {
+        @include spacing(0.5);
+        margin-top: $spacing;
+
+        button {
+            @include button;
+            border-radius: $radius * 0.8;
+            font-size: 1.2em;
+            padding: $padding * 0.7;
+        }
+    }
+
+    button.close-button {
+        @include button($flat: true);
+        margin-left: $spacing / 2;
+        border-radius: $radius * 0.8;
+        min-width: 1.2em;
+        min-height: 1.2em;
+
+        &:hover {
+            background-color: transparentize($error-bg, 0.2);
+        }
+
+        &:active {
+            background-image: none;
+            background-color: $error-bg;
+        }
+    }
+}
+
+window.notifications {
+    @include unset;
+
+    .notification {
+        @include notification;
+        @include floating-widget;
+        border-radius: $radius;
+
+        .description {
+            min-width: 200px;
+        }
+    }
+}