feat(ags): start implementing notif center

config/ags/config.js

@@ -1,7 +1,8 @@
 import { exec } from 'resource:///com/github/Aylur/ags/utils.js';
 import { Powermenu } from './js/powermenu.js';
 import { Bar } from './js/bar/bar.js';
-//import { DragTest } from './js/test/drag.js';
+import { NotificationCenter } from './js/notifications/center.js';
+import { NotificationsPopupList } from './js/notifications/popup.js'
 import { Closer } from './js/common.js';
 
 const scss = ags.App.configDir + '/scss/main.scss';
@@ -18,6 +19,7 @@ export default {
       Powermenu,
       Bar,
       Closer,
-      //DragTest,
+      NotificationCenter,
+      NotificationsPopupList,
     ]
 }

config/ags/js/notifications/base.js

@@ -0,0 +1,146 @@
+const { GLib } = imports.gi;
+const { Notifications } = ags.Service;
+const { lookUpIcon, timeout } = ags.Utils;
+const { Box, Icon, Label, EventBox, Button } = ags.Widget;
+
+import { Draggable } from '../misc/drag.js';
+
+const NotificationIcon = ({ appEntry, appIcon, image }) => {
+  if (image) {
+    return Box({
+      valign: 'start',
+      hexpand: false,
+      className: 'icon img',
+      style: `
+        background-image: url("${image}");
+        background-size: contain;
+        background-repeat: no-repeat;
+        background-position: center;
+        min-width: 78px;
+        min-height: 78px;
+      `,
+    });
+  }
+
+  let icon = 'dialog-information-symbolic';
+  if (lookUpIcon(appIcon)) {
+    icon = appIcon;
+  }
+
+  if (lookUpIcon(appEntry)) {
+    icon = appEntry;
+  }
+
+  return Box({
+    valign: 'start',
+    hexpand: false,
+    className: 'icon',
+    style: `
+      min-width: 78px;
+      min-height: 78px;
+    `,
+    children: [Icon({
+      icon, size: 58,
+      halign: 'center',
+      hexpand: true,
+      valign: 'center',
+      vexpand: true,
+    })],
+  });
+};
+
+export default ({ id, summary, body, actions, urgency, time, ...icon }) => Draggable({
+  maxOffset: 200,
+  command: () => Notifications.close(id),
+
+  /// Port of Aylur's notification
+  properties: [['hovered', false]],
+  addOnHover: w => {
+    if (w._hovered) {
+      return;
+    }
+
+    timeout(300, () => w._hovered = true);
+  },
+  addOnHoverLost: w => {
+    if (!w._hovered) {
+      return;
+    }
+
+    w._hovered = false;
+    Notifications.dismiss(id);
+  },
+  ///
+
+  child: EventBox({
+    className: `notification ${urgency}`,
+    /// TODO: see if this is still necessary
+    //
+    //onPrimaryClick: () => Notifications.dismiss(id),
+    vexpand: false,
+    // Notification
+    child: Box({
+      vertical: true,
+      children: [
+        // Content
+        Box({
+          children: [
+            NotificationIcon(icon),
+            Box({
+              hexpand: true,
+              vertical: true,
+              children: [
+                // Top of Content
+                Box({
+                  children: [
+                    Label({
+                      className: 'title',
+                      xalign: 0,
+                      justification: 'left',
+                      hexpand: true,
+                      maxWidthChars: 24,
+                      truncate: 'end',
+                      wrap: true,
+                      label: summary,
+                      useMarkup: summary.startsWith('<'),
+                    }),
+                    Label({
+                      className: 'time',
+                      valign: 'start',
+                      label: GLib.DateTime.new_from_unix_local(time).format('%H:%M'),
+                    }),
+                    Button({
+                      className: 'close-button',
+                      valign: 'start',
+                      onClicked: () => Notifications.close(id),
+                      child: Icon('window-close-symbolic'),
+                    }),
+                  ],
+                }),
+                Label({
+                  className: 'description',
+                  hexpand: true,
+                  useMarkup: true,
+                  xalign: 0,
+                  justification: 'left',
+                  label: body,
+                  wrap: true,
+                }),
+              ],
+            }),
+          ],
+        }),
+        // Actions
+        Box({
+          className: 'actions',
+          children: actions.map(action => Button({
+            className: 'action-button',
+            onClicked: () => Notifications.invoke(id, action.id),
+            hexpand: true,
+            child: Label(action.label),
+          })),
+        }),
+      ],
+    }),
+  }),
+});

config/ags/js/notifications/center.js

@@ -0,0 +1,87 @@
+import Notification from './base.js';
+const { Notifications } = ags.Service;
+const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget;
+
+const ClearButton = () => Button({
+    onClicked: Notifications.clear,
+    connections: [[Notifications, button => {
+        button.sensitive = Notifications.notifications.length > 0;
+    }]],
+    child: Box({
+        children: [
+            Label('Clear '),
+            Icon({
+                connections: [[Notifications, icon => {
+                    icon.icon = Notifications.notifications.length > 0
+                        ? 'user-trash-full-symbolic' : 'user-trash-symbolic';
+                }]],
+            }),
+        ],
+    }),
+});
+
+const Header = () => Box({
+    className: 'header',
+    children: [
+        Label({ label: 'Notifications', hexpand: true, xalign: 0 }),
+        ClearButton(),
+    ],
+});
+
+const NotificationList = () => Box({
+    vertical: true,
+    vexpand: true,
+    connections: [[Notifications, box => {
+        box.children = Notifications.notifications
+            .reverse()
+            .map(n => Notification(n));
+
+        box.visible = Notifications.notifications.length > 0;
+    }]],
+});
+
+const Placeholder = () => Box({
+    className: 'placeholder',
+    vertical: true,
+    valign: 'center',
+    halign: 'center',
+    vexpand: true,
+    hexpand: true,
+    children: [
+        Icon('notifications-disabled-symbolic'),
+        Label('Your inbox is empty'),
+    ],
+    connections: [[Notifications, box => {
+        box.visible = Notifications.notifications.length === 0;
+    }]],
+});
+
+export const NotificationCenter = Window({
+  name: 'notification-center',
+  layer: 'overlay',
+  anchor: 'top right',
+  className: 'dashboard',
+  child: Box({
+    className: 'notifications',
+    vertical: true,
+    children: [
+        Header(),
+        Box({
+            className: 'notification-wallpaper-box',
+            children: [Scrollable({
+                className: 'notification-list-box',
+                hscroll: 'never',
+                vscroll: 'automatic',
+                child: Box({
+                    className: 'notification-list',
+                    vertical: true,
+                    children: [
+                        NotificationList(),
+                        Placeholder(),
+                    ],
+                }),
+            })],
+        }),
+    ],
+  }),
+});

config/ags/js/notifications/popup.js

@@ -0,0 +1,59 @@
+import Notification from './base.js';
+const { Notifications } = ags.Service;
+const { Box, Revealer, Window } = ags.Widget;
+const { timeout } = ags.Utils;
+
+const Popups = () => Box({
+    vertical: true,
+    properties: [
+        ['map', new Map()],
+        ['dismiss', (box, id, force = false) => {
+            if (!id || !box._map.has(id))
+                return;
+
+            if (box._map.get(id)._hovered && !force)
+                return;
+
+            if (box._map.size - 1 === 0)
+                box.get_parent().reveal_child = false;
+
+            timeout(200, () => {
+                box._map.get(id)?.destroy();
+                box._map.delete(id);
+            });
+        }],
+        ['notify', (box, id) => {
+            if (!id || Notifications.dnd)
+                return;
+
+            box._map.delete(id);
+            box._map.set(id, Notification(Notifications.getNotification(id)));
+            box.children = Array.from(box._map.values()).reverse();
+            timeout(10, () => {
+                box.get_parent().revealChild = true;
+            });
+        }],
+    ],
+    connections: [
+        [Notifications, (box, id) => box._notify(box, id), 'notified'],
+        [Notifications, (box, id) => box._dismiss(box, id), 'dismissed'],
+        [Notifications, (box, id) => box._dismiss(box, id, true), 'closed'],
+    ],
+});
+
+const PopupList = ({ transition = 'slide_down' } = {}) => Box({
+    className: 'notifications-popup-list',
+    style: 'padding: 1px',
+    children: [
+        Revealer({
+            transition,
+            child: Popups(),
+        }),
+    ],
+});
+
+export const NotificationsPopupList = Window({
+    name: `notifications`,
+    anchor: 'top',
+    child: PopupList(),
+});

config/ags/scss/main.scss

@@ -7,3 +7,4 @@
 @import "./widgets/traybuttons.scss";
 @import "./widgets/workspaces.scss";
 @import "./widgets/systray.scss";
+@import "./widgets/notifications.scss";

config/ags/scss/widgets/notifications.scss

@@ -0,0 +1,335 @@
+.notifications-popup-list .notification.critical > box {
+  box-shadow: inset 0 0 0.5em 0 #e67090; }
+
+.notifications-popup-list .notification > box {
+  border-radius: 4.5px;
+  padding: 9px; }
+
+.notifications-popup-list .notification:hover .close-button {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1;
+  background-color: rgba(230, 112, 144, 0.5); }
+
+.notifications-popup-list .notification .title {
+  margin-right: 9px;
+  color: #eee;
+  font-size: 1.1em; }
+
+.notifications-popup-list .notification .time {
+  color: rgba(238, 238, 238, 0.8); }
+
+.notifications-popup-list .notification .description {
+  font-size: .9em;
+  color: rgba(238, 238, 238, 0.8); }
+
+.notifications-popup-list .notification .icon {
+  border-radius: 7.2px;
+  margin-right: 9px; }
+  .notifications-popup-list .notification .icon.img {
+    border: 1px solid rgba(238, 238, 238, 0.03); }
+
+.notifications-popup-list .notification .actions button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: rgba(238, 238, 238, 0.06);
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  border-radius: 7.2px;
+  font-size: 1.2em;
+  padding: 4.5px 9px;
+  margin: 9px 4.5px 0; }
+  .notifications-popup-list .notification .actions button * {
+    font-size: 16px;
+    font-family: "Ubuntu Nerd Font", sans-serif; }
+  .notifications-popup-list .notification .actions button:focus {
+    box-shadow: inset 0 0 0 1px #51a4e7;
+    background-color: rgba(238, 238, 238, 0.154);
+    color: #f1f1f1; }
+  .notifications-popup-list .notification .actions button:hover {
+    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+    background-color: rgba(238, 238, 238, 0.154);
+    color: #f1f1f1; }
+  .notifications-popup-list .notification .actions button:active, .notifications-popup-list .notification .actions button.on, .notifications-popup-list .notification .actions button.active, .notifications-popup-list .notification .actions button:checked {
+    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+    background-color: #51a4e7;
+    color: #141414; }
+    .notifications-popup-list .notification .actions button:active:hover, .notifications-popup-list .notification .actions button.on:hover, .notifications-popup-list .notification .actions button.active:hover, .notifications-popup-list .notification .actions button:checked:hover {
+      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+  .notifications-popup-list .notification .actions button:disabled {
+    box-shadow: none;
+    background-color: transparent;
+    color: rgba(238, 238, 238, 0.3); }
+  .notifications-popup-list .notification .actions button:first-child {
+    margin-left: 0; }
+  .notifications-popup-list .notification .actions button:last-child {
+    margin-right: 0; }
+
+.notifications-popup-list .notification button.close-button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  margin-left: 9px;
+  border-radius: 7.2px;
+  min-width: 1.2em;
+  min-height: 1.2em; }
+  .notifications-popup-list .notification button.close-button * {
+    font-size: 16px;
+    font-family: "Ubuntu Nerd Font", sans-serif; }
+  .notifications-popup-list .notification button.close-button:focus {
+    box-shadow: inset 0 0 0 1px #51a4e7;
+    background-color: rgba(238, 238, 238, 0.154);
+    color: #f1f1f1; }
+  .notifications-popup-list .notification button.close-button:hover {
+    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+    background-color: rgba(238, 238, 238, 0.154);
+    color: #f1f1f1; }
+  .notifications-popup-list .notification button.close-button:active, .notifications-popup-list .notification button.close-button.on, .notifications-popup-list .notification button.close-button.active, .notifications-popup-list .notification button.close-button:checked {
+    box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+    background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+    background-color: #51a4e7;
+    color: #141414; }
+    .notifications-popup-list .notification button.close-button:active:hover, .notifications-popup-list .notification button.close-button.on:hover, .notifications-popup-list .notification button.close-button.active:hover, .notifications-popup-list .notification button.close-button:checked:hover {
+      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+  .notifications-popup-list .notification button.close-button:disabled {
+    box-shadow: none;
+    background-color: transparent;
+    color: rgba(238, 238, 238, 0.3); }
+  .notifications-popup-list .notification button.close-button:hover {
+    background-color: rgba(230, 112, 144, 0.5); }
+  .notifications-popup-list .notification button.close-button:active {
+    background-image: linear-gradient(#e67090, #e67090); }
+
+.notifications-popup-list .notification > box {
+  all: unset;
+  box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+  margin: 9px;
+  border: 1px solid rgba(238, 238, 238, 0.04);
+  border-radius: 15.3px;
+  background-color: #171717;
+  color: #eee;
+  padding: 16.2px;
+  border-radius: 9px; }
+  .notifications-popup-list .notification > box * {
+    font-size: 16px;
+    font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.notifications-popup-list .notification .description {
+  min-width: 350px; }
+
+.dashboard {
+  all: unset;
+  box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+  margin: 9px;
+  border: 1px solid rgba(238, 238, 238, 0.04);
+  border-radius: 15.3px;
+  background-color: #171717;
+  color: #eee;
+  padding: 16.2px; }
+  .dashboard * {
+    font-size: 16px;
+    font-family: "Ubuntu Nerd Font", sans-serif; }
+  .dashboard .notifications {
+    min-width: 450px;
+    min-height: 600px;}
+    .dashboard .notifications .header {
+      padding-left: .3em;
+      margin-bottom: 9px; }
+      .dashboard .notifications .header label {
+        font-size: 1.2em; }
+      .dashboard .notifications .header button {
+        all: unset;
+        transition: 200ms;
+        border-radius: 9px;
+        color: #eee;
+        background-color: rgba(238, 238, 238, 0.06);
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        padding: 4.5px 9px; }
+        .dashboard .notifications .header button * {
+          font-size: 16px;
+          font-family: "Ubuntu Nerd Font", sans-serif; }
+        .dashboard .notifications .header button:focus {
+          box-shadow: inset 0 0 0 1px #51a4e7;
+          background-color: rgba(238, 238, 238, 0.154);
+          color: #f1f1f1; }
+        .dashboard .notifications .header button:hover {
+          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+          background-color: rgba(238, 238, 238, 0.154);
+          color: #f1f1f1; }
+        .dashboard .notifications .header button:active, .dashboard .notifications .header button.on, .dashboard .notifications .header button.active, .dashboard .notifications .header button:checked {
+          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+          background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+          background-color: #51a4e7;
+          color: #141414; }
+          .dashboard .notifications .header button:active:hover, .dashboard .notifications .header button.on:hover, .dashboard .notifications .header button.active:hover, .dashboard .notifications .header button:checked:hover {
+            box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+        .dashboard .notifications .header button:disabled {
+          box-shadow: none;
+          background-color: transparent;
+          color: rgba(238, 238, 238, 0.3); }
+        .dashboard .notifications .header button label {
+          font-size: 1.2em; }
+    .dashboard .notifications .notification-wallpaper-box {
+      all: unset;
+      border-radius: 9px;
+      color: #eee;
+      background-color: rgba(238, 238, 238, 0.06);
+      border: 1px solid rgba(238, 238, 238, 0.03); }
+      .dashboard .notifications .notification-wallpaper-box * {
+        font-size: 16px;
+        font-family: "Ubuntu Nerd Font", sans-serif; }
+      .dashboard .notifications .notification-wallpaper-box .wallpaper {
+        border-radius: 8px;
+        background-position: bottom right;
+        box-shadow: inset 0 0 9px 0 rgba(0, 0, 0, 0.6); }
+    .dashboard .notifications .notification-list-box scrollbar, .dashboard .notifications .notification-list-box scrollbar * {
+      all: unset; }
+    .dashboard .notifications .notification-list-box scrollbar.vertical {
+      transition: 200ms;
+      background-color: rgba(23, 23, 23, 0.3); }
+      .dashboard .notifications .notification-list-box scrollbar.vertical:hover {
+        background-color: rgba(23, 23, 23, 0.7); }
+        .dashboard .notifications .notification-list-box scrollbar.vertical:hover slider {
+          background-color: rgba(238, 238, 238, 0.7);
+          min-width: .6em; }
+    .dashboard .notifications .notification-list-box scrollbar.vertical slider {
+      background-color: rgba(238, 238, 238, 0.5);
+      border-radius: 9px;
+      min-width: .4em;
+      min-height: 2em;
+      transition: 200ms; }
+    .dashboard .notifications .notification-list-box scrollbar, .dashboard .notifications .notification-list-box scrollbar:hover {
+      border-radius: 8px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0; }
+    .dashboard .notifications .notification-list-box .notification-list {
+      padding: 4.5px; }
+    .dashboard .notifications .notification-list-box .notification.critical > box {
+      box-shadow: inset 0 0 0.5em 0 #e67090; }
+    .dashboard .notifications .notification-list-box .notification > box {
+      border-radius: 4.5px;
+      padding: 9px; }
+    .dashboard .notifications .notification-list-box .notification:hover .close-button {
+      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+      background-color: rgba(238, 238, 238, 0.154);
+      color: #f1f1f1;
+      background-color: rgba(230, 112, 144, 0.5); }
+    .dashboard .notifications .notification-list-box .notification .title {
+      margin-right: 9px;
+      color: #eee;
+      font-size: 1.1em; }
+    .dashboard .notifications .notification-list-box .notification .time {
+      color: rgba(238, 238, 238, 0.8); }
+    .dashboard .notifications .notification-list-box .notification .description {
+      font-size: .9em;
+      color: rgba(238, 238, 238, 0.8); }
+    .dashboard .notifications .notification-list-box .notification .icon {
+      border-radius: 7.2px;
+      margin-right: 9px; }
+      .dashboard .notifications .notification-list-box .notification .icon.img {
+        border: 1px solid rgba(238, 238, 238, 0.03); }
+    .dashboard .notifications .notification-list-box .notification .actions button {
+      all: unset;
+      transition: 200ms;
+      border-radius: 9px;
+      color: #eee;
+      background-color: rgba(238, 238, 238, 0.06);
+      box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+      border-radius: 7.2px;
+      font-size: 1.2em;
+      padding: 4.5px 9px;
+      margin: 9px 4.5px 0; }
+      .dashboard .notifications .notification-list-box .notification .actions button * {
+        font-size: 16px;
+        font-family: "Ubuntu Nerd Font", sans-serif; }
+      .dashboard .notifications .notification-list-box .notification .actions button:focus {
+        box-shadow: inset 0 0 0 1px #51a4e7;
+        background-color: rgba(238, 238, 238, 0.154);
+        color: #f1f1f1; }
+      .dashboard .notifications .notification-list-box .notification .actions button:hover {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-color: rgba(238, 238, 238, 0.154);
+        color: #f1f1f1; }
+      .dashboard .notifications .notification-list-box .notification .actions button:active, .dashboard .notifications .notification-list-box .notification .actions button.on, .dashboard .notifications .notification-list-box .notification .actions button.active, .dashboard .notifications .notification-list-box .notification .actions button:checked {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: #51a4e7;
+        color: #141414; }
+        .dashboard .notifications .notification-list-box .notification .actions button:active:hover, .dashboard .notifications .notification-list-box .notification .actions button.on:hover, .dashboard .notifications .notification-list-box .notification .actions button.active:hover, .dashboard .notifications .notification-list-box .notification .actions button:checked:hover {
+          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+      .dashboard .notifications .notification-list-box .notification .actions button:disabled {
+        box-shadow: none;
+        background-color: transparent;
+        color: rgba(238, 238, 238, 0.3); }
+      .dashboard .notifications .notification-list-box .notification .actions button:first-child {
+        margin-left: 0; }
+      .dashboard .notifications .notification-list-box .notification .actions button:last-child {
+        margin-right: 0; }
+    .dashboard .notifications .notification-list-box .notification button.close-button {
+      all: unset;
+      transition: 200ms;
+      border-radius: 9px;
+      color: #eee;
+      background-color: transparent;
+      background-image: none;
+      box-shadow: none;
+      margin-left: 9px;
+      border-radius: 7.2px;
+      min-width: 1.2em;
+      min-height: 1.2em; }
+      .dashboard .notifications .notification-list-box .notification button.close-button * {
+        font-size: 16px;
+        font-family: "Ubuntu Nerd Font", sans-serif; }
+      .dashboard .notifications .notification-list-box .notification button.close-button:focus {
+        box-shadow: inset 0 0 0 1px #51a4e7;
+        background-color: rgba(238, 238, 238, 0.154);
+        color: #f1f1f1; }
+      .dashboard .notifications .notification-list-box .notification button.close-button:hover {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-color: rgba(238, 238, 238, 0.154);
+        color: #f1f1f1; }
+      .dashboard .notifications .notification-list-box .notification button.close-button:active, .dashboard .notifications .notification-list-box .notification button.close-button.on, .dashboard .notifications .notification-list-box .notification button.close-button.active, .dashboard .notifications .notification-list-box .notification button.close-button:checked {
+        box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+        background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+        background-color: #51a4e7;
+        color: #141414; }
+        .dashboard .notifications .notification-list-box .notification button.close-button:active:hover, .dashboard .notifications .notification-list-box .notification button.close-button.on:hover, .dashboard .notifications .notification-list-box .notification button.close-button.active:hover, .dashboard .notifications .notification-list-box .notification button.close-button:checked:hover {
+          box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+      .dashboard .notifications .notification-list-box .notification button.close-button:disabled {
+        box-shadow: none;
+        background-color: transparent;
+        color: rgba(238, 238, 238, 0.3); }
+      .dashboard .notifications .notification-list-box .notification button.close-button:hover {
+        background-color: rgba(230, 112, 144, 0.5); }
+      .dashboard .notifications .notification-list-box .notification button.close-button:active {
+        background-image: linear-gradient(#e67090, #e67090); }
+    .dashboard .notifications .notification-list-box .notification > box {
+      all: unset;
+      box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+      margin: 9px;
+      border: 1px solid rgba(238, 238, 238, 0.04);
+      border-radius: 15.3px;
+      background-color: #171717;
+      color: #eee;
+      padding: 16.2px;
+      border-radius: 9px;
+      padding: 9px;
+      margin: 4.5px; }
+      .dashboard .notifications .notification-list-box .notification > box * {
+        font-size: 16px;
+        font-family: "Ubuntu Nerd Font", sans-serif; }
+    .dashboard .notifications .placeholder {
+      color: white; }
+      .dashboard .notifications .placeholder image {
+        font-size: 7em; }
+      .dashboard .notifications .placeholder label {
+        font-size: 1.2em; }
+      .dashboard .notifications .placeholder label, .dashboard .notifications .placeholder image {
+        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+        -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }

config/ags/style.css

@@ -178,3 +178,411 @@ tooltip {
     transition: all 0.2s ease-in-out; }
     .sys-tray menuitem:not(.tray-item):hover {
       background: #1b1b1b; }
+
+.notifications-popup-list .notification.critical > box {
+  box-shadow: inset 0 0 0.5em 0 #e67090; }
+
+.notifications-popup-list .notification > box {
+  border-radius: 4.5px;
+  padding: 9px; }
+
+.notifications-popup-list .notification:hover .close-button {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1;
+  background-color: rgba(230, 112, 144, 0.5); }
+
+.notifications-popup-list .notification .title {
+  margin-right: 9px;
+  color: #eee;
+  font-size: 1.1em; }
+
+.notifications-popup-list .notification .time {
+  color: rgba(238, 238, 238, 0.8); }
+
+.notifications-popup-list .notification .description {
+  font-size: .9em;
+  color: rgba(238, 238, 238, 0.8); }
+
+.notifications-popup-list .notification .icon {
+  border-radius: 7.2px;
+  margin-right: 9px; }
+
+.notifications-popup-list .notification .icon.img {
+  border: 1px solid rgba(238, 238, 238, 0.03); }
+
+.notifications-popup-list .notification .actions button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: rgba(238, 238, 238, 0.06);
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  border-radius: 7.2px;
+  font-size: 1.2em;
+  padding: 4.5px 9px;
+  margin: 9px 4.5px 0; }
+
+.notifications-popup-list .notification .actions button * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.notifications-popup-list .notification .actions button:focus {
+  box-shadow: inset 0 0 0 1px #51a4e7;
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.notifications-popup-list .notification .actions button:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.notifications-popup-list .notification .actions button:active, .notifications-popup-list .notification .actions button.on, .notifications-popup-list .notification .actions button.active, .notifications-popup-list .notification .actions button:checked {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+  background-color: #51a4e7;
+  color: #141414; }
+
+.notifications-popup-list .notification .actions button:active:hover, .notifications-popup-list .notification .actions button.on:hover, .notifications-popup-list .notification .actions button.active:hover, .notifications-popup-list .notification .actions button:checked:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+
+.notifications-popup-list .notification .actions button:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  color: rgba(238, 238, 238, 0.3); }
+
+.notifications-popup-list .notification .actions button:first-child {
+  margin-left: 0; }
+
+.notifications-popup-list .notification .actions button:last-child {
+  margin-right: 0; }
+
+.notifications-popup-list .notification button.close-button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  margin-left: 9px;
+  border-radius: 7.2px;
+  min-width: 1.2em;
+  min-height: 1.2em; }
+
+.notifications-popup-list .notification button.close-button * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.notifications-popup-list .notification button.close-button:focus {
+  box-shadow: inset 0 0 0 1px #51a4e7;
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.notifications-popup-list .notification button.close-button:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.notifications-popup-list .notification button.close-button:active, .notifications-popup-list .notification button.close-button.on, .notifications-popup-list .notification button.close-button.active, .notifications-popup-list .notification button.close-button:checked {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+  background-color: #51a4e7;
+  color: #141414; }
+
+.notifications-popup-list .notification button.close-button:active:hover, .notifications-popup-list .notification button.close-button.on:hover, .notifications-popup-list .notification button.close-button.active:hover, .notifications-popup-list .notification button.close-button:checked:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+
+.notifications-popup-list .notification button.close-button:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  color: rgba(238, 238, 238, 0.3); }
+
+.notifications-popup-list .notification button.close-button:hover {
+  background-color: rgba(230, 112, 144, 0.5); }
+
+.notifications-popup-list .notification button.close-button:active {
+  background-image: linear-gradient(#e67090, #e67090); }
+
+.notifications-popup-list .notification > box {
+  all: unset;
+  box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+  margin: 9px;
+  border: 1px solid rgba(238, 238, 238, 0.04);
+  border-radius: 15.3px;
+  background-color: #171717;
+  color: #eee;
+  padding: 16.2px;
+  border-radius: 9px; }
+
+.notifications-popup-list .notification > box * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.notifications-popup-list .notification .description {
+  min-width: 350px; }
+
+.dashboard {
+  all: unset;
+  box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+  margin: 9px;
+  border: 1px solid rgba(238, 238, 238, 0.04);
+  border-radius: 15.3px;
+  background-color: #171717;
+  color: #eee;
+  padding: 16.2px; }
+
+.dashboard * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications {
+  min-width: 450px;
+  min-height: 600px; }
+
+.dashboard .notifications .header {
+  padding-left: .3em;
+  margin-bottom: 9px; }
+
+.dashboard .notifications .header label {
+  font-size: 1.2em; }
+
+.dashboard .notifications .header button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: rgba(238, 238, 238, 0.06);
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  padding: 4.5px 9px; }
+
+.dashboard .notifications .header button * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications .header button:focus {
+  box-shadow: inset 0 0 0 1px #51a4e7;
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .header button:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .header button:active, .dashboard .notifications .header button.on, .dashboard .notifications .header button.active, .dashboard .notifications .header button:checked {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+  background-color: #51a4e7;
+  color: #141414; }
+
+.dashboard .notifications .header button:active:hover, .dashboard .notifications .header button.on:hover, .dashboard .notifications .header button.active:hover, .dashboard .notifications .header button:checked:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+
+.dashboard .notifications .header button:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  color: rgba(238, 238, 238, 0.3); }
+
+.dashboard .notifications .header button label {
+  font-size: 1.2em; }
+
+.dashboard .notifications .notification-wallpaper-box {
+  all: unset;
+  border-radius: 9px;
+  color: #eee;
+  background-color: rgba(238, 238, 238, 0.06);
+  border: 1px solid rgba(238, 238, 238, 0.03); }
+
+.dashboard .notifications .notification-wallpaper-box * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications .notification-wallpaper-box .wallpaper {
+  border-radius: 8px;
+  background-position: bottom right;
+  box-shadow: inset 0 0 9px 0 rgba(0, 0, 0, 0.6); }
+
+.dashboard .notifications .notification-list-box scrollbar, .dashboard .notifications .notification-list-box scrollbar * {
+  all: unset; }
+
+.dashboard .notifications .notification-list-box scrollbar.vertical {
+  transition: 200ms;
+  background-color: rgba(23, 23, 23, 0.3); }
+
+.dashboard .notifications .notification-list-box scrollbar.vertical:hover {
+  background-color: rgba(23, 23, 23, 0.7); }
+
+.dashboard .notifications .notification-list-box scrollbar.vertical:hover slider {
+  background-color: rgba(238, 238, 238, 0.7);
+  min-width: .6em; }
+
+.dashboard .notifications .notification-list-box scrollbar.vertical slider {
+  background-color: rgba(238, 238, 238, 0.5);
+  border-radius: 9px;
+  min-width: .4em;
+  min-height: 2em;
+  transition: 200ms; }
+
+.dashboard .notifications .notification-list-box scrollbar, .dashboard .notifications .notification-list-box scrollbar:hover {
+  border-radius: 8px;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.dashboard .notifications .notification-list-box .notification-list {
+  padding: 4.5px; }
+
+.dashboard .notifications .notification-list-box .notification.critical > box {
+  box-shadow: inset 0 0 0.5em 0 #e67090; }
+
+.dashboard .notifications .notification-list-box .notification > box {
+  border-radius: 4.5px;
+  padding: 9px; }
+
+.dashboard .notifications .notification-list-box .notification:hover .close-button {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1;
+  background-color: rgba(230, 112, 144, 0.5); }
+
+.dashboard .notifications .notification-list-box .notification .title {
+  margin-right: 9px;
+  color: #eee;
+  font-size: 1.1em; }
+
+.dashboard .notifications .notification-list-box .notification .time {
+  color: rgba(238, 238, 238, 0.8); }
+
+.dashboard .notifications .notification-list-box .notification .description {
+  font-size: .9em;
+  color: rgba(238, 238, 238, 0.8); }
+
+.dashboard .notifications .notification-list-box .notification .icon {
+  border-radius: 7.2px;
+  margin-right: 9px; }
+
+.dashboard .notifications .notification-list-box .notification .icon.img {
+  border: 1px solid rgba(238, 238, 238, 0.03); }
+
+.dashboard .notifications .notification-list-box .notification .actions button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: rgba(238, 238, 238, 0.06);
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  border-radius: 7.2px;
+  font-size: 1.2em;
+  padding: 4.5px 9px;
+  margin: 9px 4.5px 0; }
+
+.dashboard .notifications .notification-list-box .notification .actions button * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications .notification-list-box .notification .actions button:focus {
+  box-shadow: inset 0 0 0 1px #51a4e7;
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .notification-list-box .notification .actions button:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .notification-list-box .notification .actions button:active, .dashboard .notifications .notification-list-box .notification .actions button.on, .dashboard .notifications .notification-list-box .notification .actions button.active, .dashboard .notifications .notification-list-box .notification .actions button:checked {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+  background-color: #51a4e7;
+  color: #141414; }
+
+.dashboard .notifications .notification-list-box .notification .actions button:active:hover, .dashboard .notifications .notification-list-box .notification .actions button.on:hover, .dashboard .notifications .notification-list-box .notification .actions button.active:hover, .dashboard .notifications .notification-list-box .notification .actions button:checked:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+
+.dashboard .notifications .notification-list-box .notification .actions button:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  color: rgba(238, 238, 238, 0.3); }
+
+.dashboard .notifications .notification-list-box .notification .actions button:first-child {
+  margin-left: 0; }
+
+.dashboard .notifications .notification-list-box .notification .actions button:last-child {
+  margin-right: 0; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button {
+  all: unset;
+  transition: 200ms;
+  border-radius: 9px;
+  color: #eee;
+  background-color: transparent;
+  background-image: none;
+  box-shadow: none;
+  margin-left: 9px;
+  border-radius: 7.2px;
+  min-width: 1.2em;
+  min-height: 1.2em; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:focus {
+  box-shadow: inset 0 0 0 1px #51a4e7;
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-color: rgba(238, 238, 238, 0.154);
+  color: #f1f1f1; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:active, .dashboard .notifications .notification-list-box .notification button.close-button.on, .dashboard .notifications .notification-list-box .notification button.close-button.active, .dashboard .notifications .notification-list-box .notification button.close-button:checked {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
+  background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
+  background-color: #51a4e7;
+  color: #141414; }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:active:hover, .dashboard .notifications .notification-list-box .notification button.close-button.on:hover, .dashboard .notifications .notification-list-box .notification button.close-button.active:hover, .dashboard .notifications .notification-list-box .notification button.close-button:checked:hover {
+  box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03), inset 0 0 0 99px rgba(238, 238, 238, 0.154); }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:disabled {
+  box-shadow: none;
+  background-color: transparent;
+  color: rgba(238, 238, 238, 0.3); }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:hover {
+  background-color: rgba(230, 112, 144, 0.5); }
+
+.dashboard .notifications .notification-list-box .notification button.close-button:active {
+  background-image: linear-gradient(#e67090, #e67090); }
+
+.dashboard .notifications .notification-list-box .notification > box {
+  all: unset;
+  box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
+  margin: 9px;
+  border: 1px solid rgba(238, 238, 238, 0.04);
+  border-radius: 15.3px;
+  background-color: #171717;
+  color: #eee;
+  padding: 16.2px;
+  border-radius: 9px;
+  padding: 9px;
+  margin: 4.5px; }
+
+.dashboard .notifications .notification-list-box .notification > box * {
+  font-size: 16px;
+  font-family: "Ubuntu Nerd Font", sans-serif; }
+
+.dashboard .notifications .placeholder {
+  color: white; }
+
+.dashboard .notifications .placeholder image {
+  font-size: 7em; }
+
+.dashboard .notifications .placeholder label {
+  font-size: 1.2em; }
+
+.dashboard .notifications .placeholder label, .dashboard .notifications .placeholder image {
+  text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
+  -gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }