From 45ed668f93ba3d1bc57eaa689e4f84d2db61374b Mon Sep 17 00:00:00 2001 From: Michel Fedde Date: Tue, 20 May 2025 20:42:47 +0200 Subject: [PATCH] updates theming --- .../theming/applications/anyrun/entry.scss | 34 ++- .../applications/swaync/controlpanel.scss | 129 ++++------- .../applications/swaync/notification.scss | 218 ++---------------- .../theming/applications/waybar/_modules.scss | 2 +- .../theming/applications/waybar/style.scss | 4 +- .config/theming/library/_colors.scss | 3 + .config/theming/library/_variables.scss | 4 +- .config/theming/watch.sh | 1 + .config/waybar/configurations/hidden.json | 2 +- 9 files changed, 102 insertions(+), 295 deletions(-) diff --git a/.config/theming/applications/anyrun/entry.scss b/.config/theming/applications/anyrun/entry.scss index 5c2e862..619c862 100644 --- a/.config/theming/applications/anyrun/entry.scss +++ b/.config/theming/applications/anyrun/entry.scss @@ -1,26 +1,39 @@ @import "../../library/entry.scss"; -$background: rgba(30, 30, 30, 0.8); -$foreground: #ffffff; +$border-gray: $border-color; +$border-primary: $color2; + +$transparentBackground: rgba(30, 30, 30, 0.6); +$text-color: $foreground; #window { background-color: rgba(0, 0, 0, 0); } + //border: 1px solid $color2; box#main { - background-color: $background; - border: 1px solid $color2; - border-radius: $border-radius; - color: $foreground; - box-shadow: $box-shadow-inner-less; + background-color: transparent; + color: $text-color; } entry { padding: $input-padding; border: none; box-shadow: none; - color: $foreground; + color: $text-color; + margin-bottom: 6px; + border: 1px solid $border-gray; + border-bottom: 1px solid $border-primary; + box-shadow: $box-shadow-inner-less; +} + +entry, list#plugin { + background-color: $transparentBackground; + border-radius: $border-radius; +} + +list { } list#main { @@ -28,8 +41,11 @@ list#main { } list#plugin { - background-color: rgba(0, 0, 0, 0); padding: 1rem; + margin-top: 3px; + + box-shadow: $box-shadow-inner-less; + border: 1px solid $border-gray; } label#match-desc { diff --git a/.config/theming/applications/swaync/controlpanel.scss b/.config/theming/applications/swaync/controlpanel.scss index b978ade..15b6047 100644 --- a/.config/theming/applications/swaync/controlpanel.scss +++ b/.config/theming/applications/swaync/controlpanel.scss @@ -5,91 +5,56 @@ background: $background; color: $foreground; border-radius: $border-radius; - border-left: 1px solid $color5; - box-shadow: $box-shadow-inner; + border-left: 1px solid $color2; + box-shadow: $box-shadow-inner-less; padding-left: 1rem; padding-right: 1rem; margin: .3rem; margin-right: 8px; + + .collapsed { + .notification-row:not(:only-child) { + .notification { + background-color: rgba(0,0,0, 0.3); + } + } + } + + .notification { + box-shadow: none; + } + + button { + + box-shadow: $box-shadow-inner-less; + color: $foreground; + border: 1px solid $border-color; + border-radius: $border-radius; + background: $background; + + &:hover { + background: transparent; + border: 1px solid $foreground; + } + } + + + + switch { + font-size: initial; + border-radius: $border-radius; + background: transparent; + border: 1px solid $foreground; + box-shadow: none; + + &:checked { + background: $color2; + } + + slider { + background: $foreground; + border-radius: $border-radius; + } + } } -.control-center .control-center-list-placeholder { - /* The placeholder when there are no notifications */ - opacity: 0.5; -} - -.control-center .control-center-list { - /* List of notifications */ - background: transparent; -} - -.control-center .control-center-list .notification { - box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3); -} - -.control-center .control-center-list .notification .notification-default-action, -.control-center .control-center-list .notification .notification-action { - transition: opacity 400ms ease-in-out, background 0.15s ease-in-out; -} - -.control-center .control-center-list .notification .notification-default-action:hover, -.control-center .control-center-list .notification .notification-action:hover { - background-color: $background; -} - -.blank-window { - /* Window behind control center and on all other monitors */ - background: transparent; -} - -.floating-notifications { - background: transparent; -} - -.floating-notifications .notification { - box-shadow: none; -} - -$btn-color: $foreground; -$btn-border-color: $foreground; -$btn-bg: rgba($foreground, 0.2); -$btn-bg-hover: transparent; - -.control-center button { - color: $btn-border-color; - border: 1px solid transparent; - border-radius: $border-radius; - background: $btn-bg; -} - -.control-center button:hover { - background: $btn-bg-hover; - border: 1px solid $btn-color; -} - -$switch-bg: transparent; -$switch-handle-bg: $foreground; -$switch-border-color: $foreground; -$switch-selected-bg: $color2; - -.control-center switch { - font-size: initial; - border-radius: $border-radius; - background: $switch-bg; - border: 1px solid $switch-border-color; - box-shadow: none; -} - -.control-center switch:checked { - background: $switch-selected-bg; -} - -.control-center switch slider { - background: $switch-handle-bg; - border-radius: $border-radius; -} - - -.widget-title, .widget-dnd { - color: $foreground; -} diff --git a/.config/theming/applications/swaync/notification.scss b/.config/theming/applications/swaync/notification.scss index 72bf6c1..eafaf75 100644 --- a/.config/theming/applications/swaync/notification.scss +++ b/.config/theming/applications/swaync/notification.scss @@ -1,203 +1,25 @@ @use 'sass:color'; -$notify-border-color: $color6; - -$notify-bg: $background; -$notify-bg-hover: $background; -$notify-bg-darker: color.adjust($background, $lightness: -2%); -$notify-bg-focus: color.adjust($background, $lightness: 4%); - -$close-bg: rgba($foreground, 0.6); -$close-bg-hover: transparent; - -.notification-row { - outline: none; -} - -.notification-row:focus, .notification-row:hover { - background: $notify-bg-focus; -} - -.notification-row .notification-background { - padding: 6px 12px; -} - -.notification-row .notification-background .close-button { - /* The notification Close Button */ - background: $close-bg; - color: $foreground; - text-shadow: none; - padding: 0; - border-radius: $border-radius; - margin-top: 5px; - margin-right: 5px; - box-shadow: none; - border: 1px solid transparent; - min-width: 24px; - min-height: 24px; -} - -.notification-row .notification-background .close-button:hover { - box-shadow: $box-shadow; - background: $close-bg-hover; - transition: background 0.15s ease-in-out; - border: 1px solid $notify-border-color; -} - -.notification-row .notification-background .notification { - /* The actual notification */ - border-radius: $border-radius; - border: 1px solid $notify-border-color; - padding: 0; - transition: background 0.15s ease-in-out; - background: $notify-bg; -} - -.notification-row .notification-background .notification.low { - /* Low Priority Notification */ -} - -.notification-row .notification-background .notification.normal { - /* Normal Priority Notification */ -} - -.notification-row .notification-background .notification.critical { - /* Critical Priority Notification */ -} - -.notification-row .notification-background .notification .notification-action, .notification-row .notification-background .notification .notification-default-action { - padding: 4px; - margin: 0; - box-shadow: none; - background: transparent; +.notification { + background: none; border: none; - color: $foreground; - transition: background 0.15s ease-in-out; + + .notification-default-action, .notification-action { + background: $background; + margin-top: 0.25rem; + border-radius: $border-radius; + border: 1px solid $border-color; + + box-shadow: $box-shadow-inner-less; + + &:hover { + border-color: $foreground; + background: rgba($background, 0.6); + } + + &.notification-action:not(:last-child) { + margin-right: 0.4rem; + } + } } -.notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover { - -gtk-icon-effect: none; - background: $notify-bg-hover; -} - -.notification-row .notification-background .notification .notification-default-action { - /* The large action that also displays the notification summary and body */ - border-radius: $border-radius; -} - -.notification-row .notification-background .notification .notification-default-action:not(:only-child) { - /* When alternative actions are visible */ - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content { - background: transparent; - border-radius: $border-radius; - padding: 0.3rem; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .image { - /* Notification Primary Image */ - -gtk-icon-effect: none; - border-radius: 100px; - /* Size in px */ - margin: 2px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon { - /* Notification app icon (only visible when the primary image is set) */ - -gtk-icon-effect: none; - -gtk-icon-shadow: 0 1px 4px black; - margin: 6px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary { - /* Notification summary/title */ - font-size: 16px; - font-weight: bold; - background: transparent; - color: $foreground; - text-shadow: none; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time { - /* Notification time-ago */ - font-size: 16px; - font-weight: bold; - background: transparent; - color: $foreground; - text-shadow: none; - margin-right: 30px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body { - /* Notification body */ - font-size: 15px; - font-weight: normal; - background: transparent; - color: $foreground; - text-shadow: none; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content progressbar { - /* The optional notification progress bar */ - margin-top: 4px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .body-image { - /* The "extra" optional bottom notification image */ - margin-top: 4px; - background-color: white; - border-radius: $border-radius; - -gtk-icon-effect: none; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply { - /* The inline reply section */ - margin-top: 4px; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry { - background: $notify-bg-darker; - color: $foreground; - caret-color: $foreground; - border: 1px solid $notify-border-color; - border-radius: $border-radius; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button { - margin-left: 4px; - background: $notify-bg; - border: 1px solid $notify-border-color; - border-radius: $border-radius; - color: $foreground; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled { - background: initial; - color: $foreground; - border: 1px solid $notify-border-color; - border-color: transparent; -} - -.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover { - background: $notify-bg-hover; -} - -.notification-row .notification-background .notification .notification-action { - /* The alternative actions below the default action */ - border-top: 1px solid $notify-border-color; - border-radius: 0px; - border-right: 1px solid $notify-border-color; -} - -.notification-row .notification-background .notification .notification-action:first-child { - /* add bottom border radius to eliminate clipping */ - border-bottom-left-radius: 12px; -} - -.notification-row .notification-background .notification .notification-action:last-child { - border-bottom-right-radius: 12px; - border-right: none; -} diff --git a/.config/theming/applications/waybar/_modules.scss b/.config/theming/applications/waybar/_modules.scss index 5e3b662..1ff1dd9 100644 --- a/.config/theming/applications/waybar/_modules.scss +++ b/.config/theming/applications/waybar/_modules.scss @@ -1,7 +1,7 @@ .module { color: $foreground; - padding: 0.2rem 0.3rem 0.2rem 0.3rem; + padding: 0.2rem 1rem; } #battery.warning, diff --git a/.config/theming/applications/waybar/style.scss b/.config/theming/applications/waybar/style.scss index 1e7ba7b..5d6b188 100644 --- a/.config/theming/applications/waybar/style.scss +++ b/.config/theming/applications/waybar/style.scss @@ -35,8 +35,8 @@ window.semi-hidden { border-radius: $border-radius; background-color: $background; - border: 1px solid rgba($foreground, 0.4); - box-shadow: $box-shadow-inner-less + border: 1px solid $border-color; + box-shadow: $box-shadow-inner-less; } .hidden { diff --git a/.config/theming/library/_colors.scss b/.config/theming/library/_colors.scss index 6006a59..7d199d7 100644 --- a/.config/theming/library/_colors.scss +++ b/.config/theming/library/_colors.scss @@ -1,4 +1,7 @@ @import "../../../.cache/wal/colors.scss"; +$walForeground: $foreground; +$walBackground: $background; + $background: rgba(30, 30, 30, 0.5); $foreground: #ffffff; diff --git a/.config/theming/library/_variables.scss b/.config/theming/library/_variables.scss index db6c0e0..fad1733 100644 --- a/.config/theming/library/_variables.scss +++ b/.config/theming/library/_variables.scss @@ -1,5 +1,5 @@ -$border-radius: 15px; -$border-color: $foreground; +$border-radius: 13px; +$border-color: rgba(white, 0.2); $input-padding: 8px 15px; diff --git a/.config/theming/watch.sh b/.config/theming/watch.sh index 1b16552..cb2dc37 100755 --- a/.config/theming/watch.sh +++ b/.config/theming/watch.sh @@ -8,4 +8,5 @@ setupWatchers() { setupWatchers | while read line; do echo "Recomiling..." $HOME/.config/theming/compile.sh >/dev/null + $HOME/.config/theming/update.sh >/dev/null done diff --git a/.config/waybar/configurations/hidden.json b/.config/waybar/configurations/hidden.json index befdc03..c303225 100644 --- a/.config/waybar/configurations/hidden.json +++ b/.config/waybar/configurations/hidden.json @@ -5,7 +5,7 @@ "layer": "overlay", "exclusive": false, - "position": "right", + "position": "top", "reload_style_on_change": true, "name": "semi-hidden", "id": "semi-hidden",