diff options
Diffstat (limited to 'config/swaync/style.css')
| -rw-r--r-- | config/swaync/style.css | 349 |
1 files changed, 349 insertions, 0 deletions
diff --git a/config/swaync/style.css b/config/swaync/style.css new file mode 100644 index 00000000..f0d41fb4 --- /dev/null +++ b/config/swaync/style.css @@ -0,0 +1,349 @@ +/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */ + +@import '../../.cache/wal/colors-waybar.css'; + +@define-color noti-border-color @color2; +@define-color noti-bg rgba(0, 0, 0, 0.8); +@define-color noti-bg-alt #111111; +@define-color noti-bg-hover @color2; +@define-color text-color @color2; +@define-color text-color-alt @color7; +@define-color text-color-disabled rgba(150, 150, 150, 0.8); + +* { + font-family: FiraCode; + font-weight: Bolder; +} + +.control-center .notification-row:focus, +.control-center .notification-row:hover { + opacity: 1; + background: @noti-bg; + border-radius: 10px +} + +.notification-row { + outline: none; + margin: 0px; +} + +.notification { + border-radius: 10px; +} + +.notification-content{ + color: @text-color; + background: @noti-bg; + padding: 3px 10px 3px 6px; + border-radius: 10px; + border: 2px solid @noti-border-color; + margin: 0px; +} + +.notification-default-action { + margin: 0; + padding: 0; + border-radius: 10px; +} + +.close-button { + background: #f7768e; + color: @noti-bg; + text-shadow: none; + padding: 0; + border-radius: 10px; + margin-top: 5px; + margin-right: 5px; +} + +.close-button:hover { + box-shadow: none; + background: #f7768e; + transition: all .15s ease-in-out; + border: none +} + + +.notification-action { + border: 2px solid @noti-border-color; + border-top: none; + border-radius: 10px; +} + + +.notification-default-action:hover, +.notification-action:hover { + color: @text-color; + background: @color1 +} + +.notification-default-action { + border-radius: 10px; + margin: 5px; +} + +.notification-default-action:not(:only-child) { + border-bottom-left-radius: 7px; + border-bottom-right-radius: 7px +} + +.notification-action:first-child { + border-bottom-left-radius: 10px; + background: #1b1b2b +} + +.notification-action:last-child { + border-bottom-right-radius: 10px; + background: #1b1b2b +} + +.inline-reply { + margin-top: 8px +} + +.inline-reply-entry { + background: @noti-bg; + color: @text-color; + caret-color: @text-color; + border: 1px solid @noti-border-color; + border-radius: 10px +} + +.inline-reply-button { + font-size: 0.5rem; + margin-left: 4px; + background: @noti-bg; + border: 1px solid @noti-border-color; + border-radius: 10px; + 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 +} + +.body-image { + margin-top: 6px; + color: @text-color-alt; + border-radius: 10px +} + +.summary { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color-alt; + text-shadow: none +} + +.time { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color; + text-shadow: none; + margin-right: 18px +} + +.body { + font-size: 1rem; + font-weight: 200; + background: transparent; + color: @text-color; + text-shadow: none +} + +.control-center { + background: @noti-bg; + border: 2px solid @noti-border-color; + border-radius: 10px; +} + +.control-center-list { + background: transparent +} + +.control-center-list-placeholder { + opacity: 0.5 +} + +.floating-notifications { + background: transparent; +} + +.blank-window { + background: alpha(black, 0.1) +} + +.widget-title { + color: @noti-border-color; + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + font-size: 1rem; + border-radius: 10px; +} + +.widget-title>button { + font-size: 0.75rem; + color: @text-color; + border-radius: 10px; + background: transparent; + border: 0.5px solid @noti-border-color; +} + +.widget-title>button:hover { + background: #f7768e; + color: @noti-border-color; +} + +.widget-dnd { + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + border-radius: 10px; + font-size: 1rem; + color: @noti-border-color; +} + +.widget-dnd>switch { + border-radius: 10px; + /* border: 1px solid #7aa2f7; */ + background: @noti-border-color; +} + +.widget-dnd>switch:checked { + background: #f7768e; + border: 1px solid #f7768e; +} + +.widget-dnd>switch slider { + background: @noti-bg; + border-radius: 10px +} + +.widget-dnd>switch:checked slider { + background: @noti-bg; + border-radius: 10px +} + +.widget-label { + margin: 5px; +} + +.widget-label>label { + font-size: 1rem; + color: @text-color; +} + +.widget-mpris { + color: @text-color; + background: @noti-bg-alt; + padding: 3px 6px; + margin: 5px; + border-radius: 10px; +} + +.widget-mpris > box > button { + border-radius: 10px; +} + +.widget-mpris-player { + padding: 3px 6px; + margin: 5px; +} + +.widget-mpris-title { + font-weight: 100; + font-size: 1rem +} + +.widget-mpris-subtitle { + font-size: 0.75rem +} + +.widget-buttons-grid { + font-size: large; + color: @noti-border-color; + padding: 2px; + margin: 5px; + border-radius: 10px; + background: @noti-bg-alt; +} + +.widget-buttons-grid>flowbox>flowboxchild>button { + margin: 1px; + background: @noti-bg; + border-radius: 10px; + color: @text-color +} + +.widget-buttons-grid>flowbox>flowboxchild>button:hover { + background: rgba(122, 162, 247, 0.1); + color: @text-color-alt +} + +.widget-menubar>box>.menu-button-bar>button { + border: none; + background: transparent +} + +.topbar-buttons>button { + border: none; + background: transparent +} + +.widget-volume { + background: @noti-bg-alt; + padding: 2px; + margin: 10px 10px 5px 10px; + border-radius: 10px; + font-size: x-large; + color: @text-color +} + +.widget-volume>box>button { + background: #7aa2f7; + border: none +} + +.per-app-volume { + background-color: @noti-bg; + padding: 4px 8px 8px; + margin: 0 8px 8px; + border-radius: 10px; + color: @text-color +} + +.widget-backlight { + background: @noti-bg-alt; + padding: 5px; + margin: 10px 10px 5px 10px; + border-radius: 10px; + font-size: x-large; + color: @text-color +} + +.low { + background: @text-color; + padding: 0px; + border-radius: 10px; +} + +.normal { + background: @text-color; + padding: 0px; + border-radius: 10px; +} + +.critical { + background: red; + padding: 0px; + border-radius: 10px; +} |
