matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

feat(ags): start implementing notif center

Browse source
This commit is contained in:
matt1432 2023-09-11 13:59:51 -04:00
parent 67c1e48609
commit 49f0ea7750
7 changed files with 1040 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
config/ags/config.js
View file

@ -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,
]
}

146
config/ags/js/notifications/base.js Normal file
View file

@ -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),
})),
}),
],
}),
}),
});

87
config/ags/js/notifications/center.js Normal file
View file

@ -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(),
],
}),
})],
}),
],
}),
});

59
config/ags/js/notifications/popup.js Normal file
View file

@ -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(),
});

1
config/ags/scss/main.scss
View file

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

335
config/ags/scss/widgets/notifications.scss Normal file
View file

@ -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); }

408
config/ags/style.css
View file

@ -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); }