From d70f79375777fc18bce8a5a2b98629187c45a286 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Dias?= Date: Fri, 16 Aug 2024 20:43:55 -0300 Subject: [PATCH] :sparkles: feat(swaync): more vivid colors, better sliders --- swaync/_colors.css | 8 ++- swaync/config.json | 3 +- swaync/style.css | 149 ++++++++++++++++++++++++++------------------- 3 files changed, 93 insertions(+), 67 deletions(-) diff --git a/swaync/_colors.css b/swaync/_colors.css index e222dd3..315f239 100644 --- a/swaync/_colors.css +++ b/swaync/_colors.css @@ -25,8 +25,10 @@ @define-color mantle #181825; @define-color crust #11111b; -@define-color background alpha(shade(@yellow, .2), .98); +@define-color background shade(@yellow, .2); @define-color background-alt shade(@yellow, .3); -@define-color hover shade(@yellow, .5); -@define-color active shade(@yellow, .55); @define-color highlight shade(@yellow, .9); +@define-color button-bg shade(@yellow, .72); +@define-color hover shade(@yellow, .6); +@define-color active shade(@yellow, .55); +@define-color text-dark @crust; diff --git a/swaync/config.json b/swaync/config.json index 602436d..c256401 100644 --- a/swaync/config.json +++ b/swaync/config.json @@ -77,7 +77,8 @@ "blur": true }, "volume": { - "label": "" + "label": "", + "collapse-button-label": "⇩" }, "backlight": { "label": "" diff --git a/swaync/style.css b/swaync/style.css index 19921c5..606c66e 100644 --- a/swaync/style.css +++ b/swaync/style.css @@ -5,7 +5,7 @@ * { all: unset; font-size: 14px; - font-family: "0xProto Nerd Font Regular", otf-font-awesome, Cantarell, sans-serif; + font-family: Cantarell, otf-font-awesome, sans-serif; transition: 160ms ease-in; } @@ -15,36 +15,6 @@ tooltip { border-radius: 6px; } -trough { /* slider's background */ - margin: 0rem 1rem; - background-color: @background-alt; - min-height: 8px; - min-width: 70px; - border-radius: 8px; -} - -trough:hover, trough:active { - padding: 4px; - border-radius: 10.5px; -} - -trough slider { /* slider's dot indicator */ - background: shade(@yellow, .72); - border-radius: 50%; - padding: 8px; - box-shadow: inset 0 0 1px .5px @background-alt; -} - -trough slider:active { - background: @active; -} - -trough highlight { /* slider bar */ - border-top-left-radius: 8px; - border-bottom-left-radius: 8px; - background: shade(@highlight, .9); -} - /* Notifications (Not from control center) */ .floating-notifications .notification-row .notification-background { @@ -62,14 +32,17 @@ trough highlight { /* slider bar */ } .notification-row .notification-background .notification.critical { - border: 2px solid shade(@red, .7); + border: 2px solid @yellow; } -.notification-row .notification-background .notification .notification-content { - margin: 7px; +.notification-row .notification-background .notification { + padding: 14px; } .notification-row .notification-background .notification .notification-content .summary { + font-size: 1.2em; + margin-bottom: 2px; + font-weight: 600; color: @text; } @@ -87,19 +60,18 @@ trough highlight { /* slider bar */ .notification-row .notification .notification-action { border-radius: 16px; - color: @text; - background-color: shade(@highlight, .5); - border: .5px solid @mantle; + color: @text-dark; + background-color: @button-bg; + border: .6px solid @background; margin: 5px; } .notification-row .notification .notification-action:hover { - border: 1px solid #45475a; background-color: @hover; } .notification-row .notification .notification-action:active { - background-color: shade(@highlight, .6); + background-color: @active; color: @text; } @@ -109,26 +81,23 @@ trough highlight { /* slider bar */ padding: 2.5px; border-radius: 8px; color: @crust; - background-color: shade(@red, .85); + background-color: @button-bg; } .close-button:hover { - background-color: shade(@red, .95); - color: @crust; + background-color: @hover; } .close-button:active { - background-color: @red; - color: @crust; + background-color: @active; } /* Control Center Notifications */ .control-center .notification-row .notification-background { border-radius: 16px; - color: @text; background-color: @background-alt; - border: 1px solid #45475a; + border: 1px solid @yellow; margin-top: 14px; } @@ -137,14 +106,13 @@ trough highlight { /* slider bar */ } .control-center .notification-row .notification-background .notification.critical { - border: 2px solid shade(@red, .8); + border: 2px solid @highlight; } .control-center .notification-row .notification-background .notification .notification-content { margin: 8px; } - .control-center .notification-row .notification-background .notification .notification-content .summary { color: #cdd6f4; font-size: 1.2em; @@ -235,23 +203,40 @@ trough highlight { /* slider bar */ } +/* MPRIS */ + .widget-mpris { margin-top: 16px; } .widget-mpris .widget-mpris-player { - box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .4); + box-shadow: inset 0 0 0 100px rgba(0, 0, 0, .3); padding: 24px; background-color: transparent; padding-bottom: 16px; border-radius: 16px; outline: none; + margin-left: 8px; + margin-right: 8px; +} + +/* mpris controls */ +.widget-mpris .widget-mpris-player > *:last-child > button { + border-radius: 8px; +} + +.widget-mpris .widget-mpris-player > *:last-child > button:hover { + background: @hover; +} + +.widget-mpris .widget-mpris-player > *:last-child > button:active { + background: @active; } .widget-mpris .widget-mpris-title { - font-size: 1.2rem; - font-weight: 600; - text-shadow: 1px 1px 2px black; + font-family: "0xProto Nerd Font"; + font-size: 1.2rem; + text-shadow: 1px 1px 2px black; } .widget-mpris .widget-mpris-subtitle { @@ -259,6 +244,7 @@ trough highlight { /* slider bar */ text-shadow: 1px 1px 2px black; } + .widget-menubar > box > .menu-button-bar > button > label { font-size: 3rem; padding: 0.5rem 2rem; @@ -279,26 +265,23 @@ trough highlight { /* slider bar */ font-size: 2rem; } + .widget-buttons-grid { - padding-top: 2px; - margin-left: 75px; + margin-top: 2px; + margin-left: 75px; } .widget-buttons-grid button { - background: @background-alt; - padding: 10px; - border-radius: 16px; - margin: 2px; + background: @button-bg; + padding: 10px; + border-radius: 16px; + margin: 2px; } -.widget-buttons-grid button .active { +.widget-buttons-grid button.active { background: @active; } -.widget-buttons-grid button label { - font-size: 0.95rem; -} - .widget-buttons-grid button:hover { background: @hover; } @@ -307,6 +290,46 @@ trough highlight { /* slider bar */ background: @active; } +.widget-buttons-grid button label { + font-size: 0.95rem; + color: black; +} + +.widget-volume trough, +.widget-backlight trough { /* slider's background */ + margin: 0rem 1rem; + background-color: @background-alt; + min-height: 8px; + min-width: 70px; + border-radius: 8px; +} + +.widget-volume trough:hover, +.widget-volume trough:active, +.widget-backlight trough:hover, +.widget-backlight trough:active { + padding: 4px; + border-radius: 10.5px; +} +.widget-volume trough slider, +.widget-backlight trough slider { /* slider's dot indicator */ + background: shade(@yellow, .72); + border-radius: 50%; + padding: 8px; + box-shadow: inset 0 0 1px .5px @background-alt; +} +.widget-volume trough slider:active, +.widget-backlight trough slider:active { + background: @active; +} + +.widget-volume trough highlight, +.widget-backlight trough highlight { /* slider bar */ + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; + background: shade(@highlight, .9); +} + .widget-volume { margin-top: 1rem; margin-bottom: 0.8rem;