notifications: empty text

Scrollbar less transparent

scss/notifications.scss

@@ -17,6 +17,7 @@
     @include lib.rounded(8);
     @include lib.border(scheme.$mauve, 0.4, 2);
     @include lib.shadow;
+    @include font.mono;
 
     min-width: lib.s(400);
     min-height: lib.s(600);
@@ -25,7 +26,6 @@
     padding: lib.s(10) lib.s(12);
 
     .header {
-        @include font.mono;
         @include lib.spacing(8);
 
         padding: 0 lib.s(5);
@@ -62,6 +62,10 @@
         }
     }
 
+    .icon {
+        font-size: lib.s(32);
+    }
+
     .notification {
         .wrapper {
             padding-bottom: lib.s(10);

scss/widgets.scss

@@ -183,26 +183,22 @@ tooltip {
 }
 
 scrollbar {
-    trough {
-        background-color: transparent;
-    }
-
     slider {
         @include lib.rounded(1000);
         @include lib.element-decel;
 
         min-width: lib.s(3);
         min-height: lib.s(30);
-        background-color: color.change(scheme.$overlay0, $alpha: 0.3);
+        background-color: color.change(scheme.$overlay0, $alpha: 0.6);
 
         &:hover,
         &:focus {
             min-width: lib.s(6);
-            background-color: color.change(scheme.$overlay0, $alpha: 0.4);
+            background-color: color.change(scheme.$overlay0, $alpha: 0.7);
         }
 
         &:active {
-            background-color: color.change(scheme.$overlay1, $alpha: 0.5);
+            background-color: color.change(scheme.$overlay1, $alpha: 0.8);
         }
     }
 }

src/modules/notifications.tsx

@@ -65,9 +65,19 @@ export default () => (
                     label="Clear"
                 />
             </box>
-            <scrollable expand hscroll={Gtk.PolicyType.NEVER}>
-                <List />
-            </scrollable>
+            <stack
+                transitionType={Gtk.StackTransitionType.CROSSFADE}
+                transitionDuration={150}
+                shown={bind(AstalNotifd.get_default(), "notifications").as(n => (n.length > 0 ? "list" : "empty"))}
+            >
+                <box vertical valign={Gtk.Align.CENTER} name="empty">
+                    <label className="icon" label="notifications_active" />
+                    <label label="All caught up!" />
+                </box>
+                <scrollable expand hscroll={Gtk.PolicyType.NEVER} name="list">
+                    <List />
+                </scrollable>
+            </stack>
         </box>
     </PopupWindow>
 );