feat(ags): do notification center css

This commit is contained in:
matt1432 2023-09-11 16:25:57 -04:00
parent 943e834af5
commit 2babcb9975
10 changed files with 502 additions and 762 deletions

View file

@ -1,49 +0,0 @@
#!/usr/bin/env bash
on () {
swaync-client -op
eww open closer-notif1
eww open closer-notif2
eww open closer-notif3
eww open closer-notif4
eww update notif-panel-state=true
}
off () {
swaync-client -cp
eww update notif-panel-state=false
eww close closer-notif1
eww close closer-notif2
eww close closer-notif3
eww close closer-notif4
}
toggle() {
if [[ $(eww get notif-panel-state) == "true" ]]; then
echo "Off"
off > /dev/null
else
echo "On"
on > /dev/null
fi
}
state() {
if [[ $(eww get notif-panel-state) == "true" ]]; then
echo "Off"
else
echo "On"
fi
}
[[ "$1" == "toggle" ]] && toggle
if [[ "$1" == "state" ]]; then
while true; do
state
sleep 1
done
fi

View file

@ -1,30 +0,0 @@
#!/usr/bin/env bash
state () {
if [[ $(hyprctl layers | grep swaync-control-center) == "" ]]; then
if [[ $(eww get notif-panel-state) == "true" ]]; then
eww update notif-panel-state=false
fi
fi
}
icon () {
COUNT=$(swaync-client -c)
if [[ $(swaync-client -D) == "true" ]]; then
echo " 󱏨"
elif [[ $COUNT == "0" ]]; then
echo "$COUNT 󰂜"
else
echo "$COUNT 󰂚"
fi
state
}
if [[ $1 == "icon" ]]; then
while true; do
sleep 0.01
icon
done
fi

View file

@ -8,7 +8,6 @@ import { Closer } from './js/common.js';
const scss = ags.App.configDir + '/scss/main.scss';
const css = ags.App.configDir + '/style.css';
exec(`touch ${css}`);
exec(`sassc ${scss} ${css}`);
exec(`bash -c "$AGS_PATH/startup.sh"`);

View file

@ -29,6 +29,7 @@ export const NotifButton = EventBox({
Icon({
connections: [
[Notifications, icon => {
// TODO: add no notifs vs notifs
icon.icon = Notifications.dnd
? 'notifications-disabled-symbolic'
: 'preferences-system-notifications-symbolic';

View file

@ -1,8 +1,9 @@
import Notification from './base.js';
import { EventBox } from '../common.js'
const { Notifications } = ags.Service;
const { Button, Label, Box, Icon, Scrollable, Window } = ags.Widget;
const ClearButton = () => Button({
const ClearButton = () => EventBox({child: Button({
onClicked: Notifications.clear,
connections: [[Notifications, button => {
button.sensitive = Notifications.notifications.length > 0;
@ -18,7 +19,7 @@ const ClearButton = () => Button({
}),
],
}),
});
})});
const Header = () => Box({
className: 'header',
@ -61,9 +62,8 @@ export const NotificationCenter = Window({
popup: true,
layer: 'overlay',
anchor: 'top right',
className: 'dashboard',
child: Box({
className: 'notifications',
className: 'notification-center',
vertical: true,
children: [
Header(),

View file

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

View file

@ -0,0 +1,101 @@
.notification-center {
min-height: 700px;
min-width: 500px;
margin-top: 6px;
margin-right: 60px;
background: $bg;
border-radius: 12px;
border-top-right-radius: 0px;
border: 2px solid $contrastbg;
padding: 0px;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
* {
font-size: 16px;
}
.header {
padding: 10px;
margin-top: 22px;
margin-bottom: 9px;
label {
font-size: 22px;
}
button {
all: unset;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: #664C90;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
padding: 4.5px 9px;
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: rgba(238, 238, 238, 0.154);
color: #f1f1f1;
}
&:disabled {
box-shadow: none;
background-color: rgba(#664C90, 0.3);
color: rgba(238, 238, 238, 0.3);
}
label {
font-size: 1.2em;
}
}
}
.notification-list-box {
background: $bgfull;
border-radius: 12px;
border-top: 3px solid $bgSecondary;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2);
scrollbar {
all: unset;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
* {
all: unset;
}
&:hover {
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
}
scrollbar.vertical {
transition: 200ms;
background-color: rgba(23, 23, 23, 0.3);
&:hover {
background-color: rgba(23, 23, 23, 0.7);
slider {
background-color: rgba(238, 238, 238, 0.7);
min-width: .6em;
}
}
slider {
background-color: rgba(238, 238, 238, 0.5);
border-radius: 9px;
min-width: .4em;
min-height: 2em;
transition: 200ms;
}
}
}
.placeholder {
color: white;
image {
font-size: 7em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
label {
font-size: 1.2em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
}
}
}

View file

@ -0,0 +1,216 @@
$color_1: #f1f1f1;
$color_2: #eee;
$color_3: rgba(238, 238, 238, 0.8);
$color_4: #141414;
$color_5: rgba(238, 238, 238, 0.3);
$color_6: white;
$font-family_1: "Ubuntu Nerd Font", sans-serif;
$background-color_1: rgba(238, 238, 238, 0.154);
$background-color_2: rgba(230, 112, 144, 0.5);
$background-color_3: rgba(238, 238, 238, 0.06);
$background-color_4: #51a4e7;
$background-color_5: transparent;
$background-color_6: #171717;
$background-color_7: rgba(23, 23, 23, 0.3);
$background-color_8: rgba(23, 23, 23, 0.7);
$background-color_9: rgba(238, 238, 238, 0.7);
$background-color_10: rgba(238, 238, 238, 0.5);
.notification.critical {
>box {
box-shadow: inset 0 0 0.5em 0 #e67090;
}
}
.notification {
>box {
border-radius: 4.5px;
padding: 9px;
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: $background-color_6;
color: $color_2;
padding: 16.2px;
border-radius: 9px;
* {
font-size: 16px;
font-family: $font-family_1;
}
}
&:hover {
.close-button {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $color_1;
background-color: $background-color_2;
}
}
.title {
margin-right: 9px;
color: $color_2;
font-size: 1.1em;
}
.time {
color: $color_3;
}
.description {
font-size: .9em;
color: $color_3;
min-width: 350px;
}
.icon {
border-radius: 7.2px;
margin-right: 9px;
}
.icon.img {
border: 1px solid rgba(238, 238, 238, 0.03);
}
.actions {
button {
all: unset;
transition: 200ms;
border-radius: 9px;
color: $color_2;
background-color: $background-color_3;
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;
* {
font-size: 16px;
font-family: $font-family_1;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
color: $color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $color_1;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
color: $color_5;
}
&:first-child {
margin-left: 0;
}
&:last-child {
margin-right: 0;
}
}
button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
}
button.close-button {
all: unset;
transition: 200ms;
border-radius: 9px;
color: $color_2;
background-color: $background-color_5;
background-image: none;
box-shadow: none;
margin-left: 9px;
border-radius: 7.2px;
min-width: 1.2em;
min-height: 1.2em;
* {
font-size: 16px;
font-family: $font-family_1;
}
&:focus {
box-shadow: inset 0 0 0 1px #51a4e7;
background-color: $background-color_1;
color: $color_1;
}
&:hover {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-color: $background-color_1;
color: $color_1;
background-color: $background-color_2;
}
&:active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
background-image: linear-gradient(#e67090, #e67090);
&: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);
}
}
&:checked {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
&:disabled {
box-shadow: none;
background-color: $background-color_5;
color: $color_5;
}
}
button.close-button.on {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
button.close-button.active {
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
background-image: linear-gradient(to right, #51a4e7, #6cb2eb);
background-color: $background-color_4;
color: $color_4;
&: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);
}
}
}

View file

@ -1,335 +0,0 @@
.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); }

View file

@ -179,132 +179,90 @@ tooltip {
.sys-tray menuitem:not(.tray-item):hover {
background: #1b1b1b; }
.notifications-popup-list .notification.critical > box {
.notification-center {
min-height: 700px;
min-width: 500px;
margin-top: 6px;
margin-right: 60px;
background: rgba(40, 42, 54, 0.8);
border-radius: 12px;
border-top-right-radius: 0px;
border: 2px solid rgba(189, 147, 249, 0.8);
padding: 0px;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6); }
.notification-center * {
font-size: 16px; }
.notification-center .header {
padding: 10px;
margin-top: 22px;
margin-bottom: 9px; }
.notification-center .header label {
font-size: 22px; }
.notification-center .header button {
all: unset;
transition: 200ms;
border-radius: 9px;
color: #eee;
background-color: #664C90;
box-shadow: inset 0 0 0 1px rgba(238, 238, 238, 0.03);
padding: 4.5px 9px; }
.notification-center .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; }
.notification-center .header button:disabled {
box-shadow: none;
background-color: rgba(102, 76, 144, 0.3);
color: rgba(238, 238, 238, 0.3); }
.notification-center .header button label {
font-size: 1.2em; }
.notification-center .notification-list-box {
background: #282a36;
border-radius: 12px;
border-top: 3px solid rgba(56, 44, 74, 0.8);
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.2); }
.notification-center .notification-list-box scrollbar {
all: unset;
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.notification-center .notification-list-box scrollbar * {
all: unset; }
.notification-center .notification-list-box scrollbar:hover {
border-radius: 8px;
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.notification-center .notification-list-box scrollbar.vertical {
transition: 200ms;
background-color: rgba(23, 23, 23, 0.3); }
.notification-center .notification-list-box scrollbar.vertical:hover {
background-color: rgba(23, 23, 23, 0.7); }
.notification-center .notification-list-box scrollbar.vertical:hover slider {
background-color: rgba(238, 238, 238, 0.7);
min-width: .6em; }
.notification-center .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; }
.notification-center .placeholder {
color: white; }
.notification-center .placeholder image {
font-size: 7em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }
.notification-center .placeholder label {
font-size: 1.2em;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6);
-gtk-icon-shadow: 2px 2px 2px rgba(0, 0, 0, 0.6); }
.notification.critical > box {
box-shadow: inset 0 0 0.5em 0 #e67090; }
.notifications-popup-list .notification > box {
.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 {
padding: 9px;
all: unset;
box-shadow: 0 0 4.5px 0 rgba(0, 0, 0, 0.6);
margin: 9px;
@ -314,157 +272,37 @@ tooltip {
color: #eee;
padding: 16.2px;
border-radius: 9px; }
.notifications-popup-list .notification > box * {
.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 {
.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 {
.notification .title {
margin-right: 9px;
color: #eee;
font-size: 1.1em; }
.dashboard .notifications .notification-list-box .notification .time {
.notification .time {
color: rgba(238, 238, 238, 0.8); }
.dashboard .notifications .notification-list-box .notification .description {
.notification .description {
font-size: .9em;
color: rgba(238, 238, 238, 0.8); }
color: rgba(238, 238, 238, 0.8);
min-width: 350px; }
.dashboard .notifications .notification-list-box .notification .icon {
.notification .icon {
border-radius: 7.2px;
margin-right: 9px; }
.dashboard .notifications .notification-list-box .notification .icon.img {
.notification .icon.img {
border: 1px solid rgba(238, 238, 238, 0.03); }
.dashboard .notifications .notification-list-box .notification .actions button {
.notification .actions button {
all: unset;
transition: 200ms;
border-radius: 9px;
@ -475,42 +313,57 @@ tooltip {
font-size: 1.2em;
padding: 4.5px 9px;
margin: 9px 4.5px 0; }
.dashboard .notifications .notification-list-box .notification .actions button * {
.notification .actions button * {
font-size: 16px;
font-family: "Ubuntu Nerd Font", sans-serif; }
.dashboard .notifications .notification-list-box .notification .actions button:focus {
.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 {
.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 {
.notification .actions button:active {
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 {
.notification .actions button:active: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 {
.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; }
.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); }
.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 {
.notification .actions button:first-child {
margin-left: 0; }
.dashboard .notifications .notification-list-box .notification .actions button:last-child {
.notification .actions button:last-child {
margin-right: 0; }
.dashboard .notifications .notification-list-box .notification button.close-button {
.notification .actions button.on {
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; }
.notification .actions button.on: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); }
.notification .actions button.active {
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; }
.notification .actions button.active: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); }
.notification button.close-button {
all: unset;
transition: 200ms;
border-radius: 9px;
@ -522,67 +375,50 @@ tooltip {
border-radius: 7.2px;
min-width: 1.2em;
min-height: 1.2em; }
.dashboard .notifications .notification-list-box .notification button.close-button * {
.notification button.close-button * {
font-size: 16px;
font-family: "Ubuntu Nerd Font", sans-serif; }
.dashboard .notifications .notification-list-box .notification button.close-button:focus {
.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 {
.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 {
color: #f1f1f1;
background-color: rgba(230, 112, 144, 0.5); }
.notification button.close-button:active {
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;
background-image: linear-gradient(#e67090, #e67090); }
.notification button.close-button:active: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); }
.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 {
.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 {
.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); }
.notification button.close-button.on {
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; }
.notification button.close-button.on: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: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); }
.notification button.close-button.active {
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; }
.notification button.close-button.active: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); }