From b91f59cf915601f30fd5e27b8174a966d948816e Mon Sep 17 00:00:00 2001 From: matt1432 Date: Sun, 11 Jun 2023 15:14:20 -0400 Subject: [PATCH] feat: got a cleaner base css for swaync --- .gitignore | 1 + swaync/README.md | 1 + swaync/style.css | 106 ++++++++++++++++++++--------------------------- 3 files changed, 46 insertions(+), 62 deletions(-) create mode 100644 swaync/README.md diff --git a/.gitignore b/.gitignore index afc814dd..69064673 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ +cef_user_data/ chromium/ Electron/ GIMP/ diff --git a/swaync/README.md b/swaync/README.md new file mode 100644 index 00000000..41e965b2 --- /dev/null +++ b/swaync/README.md @@ -0,0 +1 @@ +credits : https://github.com/ErikReider/Linux/tree/master/dotfiles/swayConfig/swaync diff --git a/swaync/style.css b/swaync/style.css index 01d7074d..745c55fd 100644 --- a/swaync/style.css +++ b/swaync/style.css @@ -2,35 +2,49 @@ * vim: ft=less */ -@define-color cc-bg rgba(0, 0, 0, 0.7); +@define-color cc-bg rgba(42, 42, 42, 0.8); @define-color noti-border-color rgba(255, 255, 255, 0.15); -@define-color noti-bg rgb(48, 48, 48); -@define-color noti-bg-darker rgb(38, 38, 38); -@define-color noti-bg-hover rgb(56, 56, 56); +@define-color noti-bg rgba(55, 55, 55, 0.8); +@define-color noti-bg-hover rgba(65, 65, 65, 0.8); @define-color noti-bg-focus rgba(68, 68, 68, 0.6); @define-color noti-close-bg rgba(255, 255, 255, 0.1); @define-color noti-close-bg-hover rgba(255, 255, 255, 0.15); -@define-color text-color rgb(255, 255, 255); -@define-color text-color-disabled rgb(150, 150, 150); - @define-color bg-selected rgb(0, 128, 255); .notification-row { + transition: all 200ms ease; outline: none; + margin-bottom: 4px; + border-radius: 12px; } -.notification-row:focus, -.notification-row:hover { - background: @noti-bg-focus; +.control-center .notification-row:focus, +.control-center .notification-row:hover { + opacity: 1; + background: transparent; +} + +.notification-row:focus .notification, +.notification-row:hover .notification { + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5); + box-shadow: 0px 0px 0px 3px @bg-selected; +} + +.control-center .notification { + box-shadow: none; +} + +.control-center .notification-row { + opacity: 0.5; } .notification { + transition: all 200ms ease; border-radius: 12px; - margin: 6px 12px; - 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); + margin: 6px 6px; + box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5); padding: 0; } @@ -62,12 +76,12 @@ .close-button { background: @noti-close-bg; - color: @text-color; + color: white; text-shadow: none; padding: 0; border-radius: 100%; margin-top: 10px; - margin-right: 16px; + margin-right: 10px; box-shadow: none; border: none; min-width: 24px; @@ -88,8 +102,8 @@ box-shadow: none; background: @noti-bg; border: 1px solid @noti-border-color; - color: @text-color; - transition: all 0.15s ease-in-out; + color: white; + transition: all 200ms ease; } .notification-default-action:hover, @@ -124,32 +138,6 @@ border-right: 1px solid @noti-border-color; } -.inline-reply { - margin-top: 8px; -} -.inline-reply-entry { - background: @noti-bg-darker; - color: @text-color; - caret-color: @text-color; - border: 1px solid @noti-border-color; - border-radius: 12px; -} -.inline-reply-button { - margin-left: 4px; - background: @noti-bg; - border: 1px solid @noti-border-color; - border-radius: 12px; - color: @text-color; -} -.inline-reply-button:disabled { - background: initial; - color: @text-color-disabled; - border: 1px solid transparent; -} -.inline-reply-button:hover { - background: @noti-bg-hover; -} - .image { } @@ -163,7 +151,7 @@ font-size: 16px; font-weight: bold; background: transparent; - color: @text-color; + color: white; text-shadow: none; } @@ -171,7 +159,7 @@ font-size: 16px; font-weight: bold; background: transparent; - color: @text-color; + color: white; text-shadow: none; margin-right: 18px; } @@ -180,13 +168,17 @@ font-size: 15px; font-weight: normal; background: transparent; - color: @text-color; + color: white; text-shadow: none; } .control-center { background: @cc-bg; - border-radius: 30px; + border-radius: 12px; + background-clip: border-box; + padding: 4px; + 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-list { @@ -203,7 +195,7 @@ /* Window behind control center and on all other monitors */ .blank-window { - background: alpha(black, 0.25); + background: transparent; } /*** Widgets ***/ @@ -215,7 +207,7 @@ } .widget-title > button { font-size: initial; - color: @text-color; + color: white; text-shadow: none; background: @noti-bg; border: 1px solid @noti-border-color; @@ -261,6 +253,8 @@ .widget-mpris-player { padding: 8px; margin: 8px; + background-color: @noti-bg; + border-radius: 12px; } .widget-mpris-title { font-weight: bold; @@ -323,18 +317,6 @@ border-radius: 12px; } -.widget-volume>box>button { - background: transparent; - border: none; -} - -.per-app-volume { - background-color: @noti-bg-alt; - padding: 4px 8px 8px 8px; - margin: 0px 8px 8px 8px; - border-radius: 12px -} - /* Backlight widget */ .widget-backlight { background-color: @noti-bg; @@ -350,7 +332,7 @@ } .widget-inhibitors > button { font-size: initial; - color: @text-color; + color: white; text-shadow: none; background: @noti-bg; border: 1px solid @noti-border-color;