diff --git a/config/ags/config.js b/config/ags/config.js index 5617ae1..5396a81 100644 --- a/config/ags/config.js +++ b/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, ] } diff --git a/config/ags/js/notifications/base.js b/config/ags/js/notifications/base.js new file mode 100644 index 0000000..a090322 --- /dev/null +++ b/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), + })), + }), + ], + }), + }), +}); diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js new file mode 100644 index 0000000..377c6c5 --- /dev/null +++ b/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(), + ], + }), + })], + }), + ], + }), +}); diff --git a/config/ags/js/notifications/popup.js b/config/ags/js/notifications/popup.js new file mode 100644 index 0000000..75b69f3 --- /dev/null +++ b/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(), +}); diff --git a/config/ags/scss/main.scss b/config/ags/scss/main.scss index 301c873..63964b4 100644 --- a/config/ags/scss/main.scss +++ b/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"; diff --git a/config/ags/scss/widgets/notifications.scss b/config/ags/scss/widgets/notifications.scss new file mode 100644 index 0000000..43d7c0a --- /dev/null +++ b/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); } diff --git a/config/ags/style.css b/config/ags/style.css index e8eb906..47c6171 100644 --- a/config/ags/style.css +++ b/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); }