From 2babcb99753b8e7856b547d90a35c2070bad9dd8 Mon Sep 17 00:00:00 2001 From: matt1432 Date: Mon, 11 Sep 2023 16:25:57 -0400 Subject: [PATCH] feat(ags): do notification center css --- config/ags/bin/notif-toggle.sh | 49 -- config/ags/bin/notif.sh | 30 - config/ags/config.js | 1 - config/ags/js/bar/notif-button.js | 1 + config/ags/js/notifications/center.js | 8 +- config/ags/scss/main.scss | 3 +- .../ags/scss/widgets/notification-center.scss | 101 ++++ config/ags/scss/widgets/notification.scss | 216 ++++++++ config/ags/scss/widgets/notifications.scss | 335 ----------- config/ags/style.css | 520 ++++++------------ 10 files changed, 502 insertions(+), 762 deletions(-) delete mode 100755 config/ags/bin/notif-toggle.sh delete mode 100755 config/ags/bin/notif.sh create mode 100644 config/ags/scss/widgets/notification-center.scss create mode 100644 config/ags/scss/widgets/notification.scss delete mode 100644 config/ags/scss/widgets/notifications.scss diff --git a/config/ags/bin/notif-toggle.sh b/config/ags/bin/notif-toggle.sh deleted file mode 100755 index 60298a9..0000000 --- a/config/ags/bin/notif-toggle.sh +++ /dev/null @@ -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 diff --git a/config/ags/bin/notif.sh b/config/ags/bin/notif.sh deleted file mode 100755 index a986143..0000000 --- a/config/ags/bin/notif.sh +++ /dev/null @@ -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 - diff --git a/config/ags/config.js b/config/ags/config.js index 1f6040e..73fa005 100644 --- a/config/ags/config.js +++ b/config/ags/config.js @@ -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"`); diff --git a/config/ags/js/bar/notif-button.js b/config/ags/js/bar/notif-button.js index e2e24c6..e3290dc 100644 --- a/config/ags/js/bar/notif-button.js +++ b/config/ags/js/bar/notif-button.js @@ -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'; diff --git a/config/ags/js/notifications/center.js b/config/ags/js/notifications/center.js index 7e3e631..2c3c943 100644 --- a/config/ags/js/notifications/center.js +++ b/config/ags/js/notifications/center.js @@ -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(), diff --git a/config/ags/scss/main.scss b/config/ags/scss/main.scss index 63964b4..f282881 100644 --- a/config/ags/scss/main.scss +++ b/config/ags/scss/main.scss @@ -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"; diff --git a/config/ags/scss/widgets/notification-center.scss b/config/ags/scss/widgets/notification-center.scss new file mode 100644 index 0000000..8b2acb2 --- /dev/null +++ b/config/ags/scss/widgets/notification-center.scss @@ -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); + } + } +} diff --git a/config/ags/scss/widgets/notification.scss b/config/ags/scss/widgets/notification.scss new file mode 100644 index 0000000..7216b75 --- /dev/null +++ b/config/ags/scss/widgets/notification.scss @@ -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); + } + } + } + diff --git a/config/ags/scss/widgets/notifications.scss b/config/ags/scss/widgets/notifications.scss deleted file mode 100644 index 43d7c0a..0000000 --- a/config/ags/scss/widgets/notifications.scss +++ /dev/null @@ -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); } diff --git a/config/ags/style.css b/config/ags/style.css index 47c6171..c7cdaa0 100644 --- a/config/ags/style.css +++ b/config/ags/style.css @@ -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; } + .notification > box * { + font-size: 16px; + font-family: "Ubuntu Nerd Font", sans-serif; } -.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 { +.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; } + .notification .actions button * { + font-size: 16px; + font-family: "Ubuntu Nerd Font", sans-serif; } + .notification .actions button:focus { + box-shadow: inset 0 0 0 1px #51a4e7; + background-color: rgba(238, 238, 238, 0.154); + color: #f1f1f1; } + .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; } + .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 .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); } + .notification .actions button:first-child { + margin-left: 0; } + .notification .actions button:last-child { + margin-right: 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 { +.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); } -.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); } +.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); } -.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 { +.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; } + .notification button.close-button * { + font-size: 16px; + font-family: "Ubuntu Nerd Font", sans-serif; } + .notification button.close-button:focus { + box-shadow: inset 0 0 0 1px #51a4e7; + background-color: rgba(238, 238, 238, 0.154); + color: #f1f1f1; } + .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; + 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; } + .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); } + .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 * { - 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 { +.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: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); } +.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); }