feat(ags): do notification center css
This commit is contained in:
parent
943e834af5
commit
2babcb9975
10 changed files with 502 additions and 762 deletions
|
|
@ -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
|
||||
|
|
@ -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
|
||||
|
||||
|
|
@ -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"`);
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
101
config/ags/scss/widgets/notification-center.scss
Normal file
101
config/ags/scss/widgets/notification-center.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
216
config/ags/scss/widgets/notification.scss
Normal file
216
config/ags/scss/widgets/notification.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -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); }
|
||||
|
|
@ -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); }
|
||||
|
|
|
|||
Loading…
Reference in a new issue