Olivier/colorshell
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ feat(swaync): dynamic colors with pywal

Browse Source
This commit is contained in:
João Dias
2024-09-04 22:35:22 -03:00
parent 0a80ff2af1
commit f98c3b26d8
2 changed files with 23 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
swaync/_colors.css
+9 -33
View File
@@ -1,34 +1,10 @@
@define-color rosewater #f5e0dc;
@define-color flamingo #f2cdcd;
@define-color pink #f5c2e7;
@define-color mauve #cba6f7;
@define-color red #f38ba8;
@define-color maroon #eba0ac;
@define-color peach #fab387;
@define-color yellow #f9e2af;
@define-color green #a6e3a1;
@define-color teal #94e2d5;
@define-color sky #89dceb;
@define-color sapphire #74c7ec;
@define-color blue #89b4fa;
@define-color lavender #b4befe;
@define-color text #cdd6f4;
@define-color subtext1 #bac2de;
@define-color subtext0 #a6adc8;
@define-color overlay2 #9399b2;
@define-color overlay1 #7f849c;
@define-color overlay0 #6c7086;
@define-color surface2 #585b70;
@define-color surface1 #45475a;
@define-color surface0 #313244;
@define-color base #1e1e2e;
@define-color mantle #181825;
@define-color crust #11111b;
@define-color background shade(@yellow, .2);
@define-color background-alt shade(@yellow, .3);
@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;
@import "../../.cache/wal/colors-swaync.css";
@define-color highlight @color1;
@define-color bg-slider shade(@highlight, .2);
@define-color bg-button shade(@highlight, .72);
@define-color background-alt shade(@highlight, .6);
@define-color hover shade(@highlight, .6);
@define-color active shade(@highlight, .58);
@define-color text rgb(255, 255, 255);
swaync/style.css
+14 -12
View File
@@ -1,7 +1,6 @@
@import "_colors.css";
* {
all: unset;
font-size: 14px;
@@ -47,11 +46,11 @@ tooltip {
}
.notification-row .notification-background .notification .notification-content .time {
color: @subtext1;
color: @foreground;
}
.notification-row .notification-background .notification .notification-content .body {
color: @text;
color: @foreground;
}
.notification-row .notification-background .notification > *:last-child > * {
@@ -60,7 +59,7 @@ tooltip {
.notification-row .notification .notification-action {
border-radius: 16px;
color: @text-dark;
color: @text;
background-color: @button-bg;
border: .6px solid @background;
margin: 5px;
@@ -147,7 +146,7 @@ tooltip {
border-radius: 12.6px;
margin: 18px;
background: @background;
color: #cdd6f4;
color: @text;
padding: 1.5rem;
}
@@ -234,7 +233,8 @@ tooltip {
}
.widget-mpris .widget-mpris-title {
font-family: "0xProto Nerd Font";
font-family: "Cantarell";
font-weight: 700;
font-size: 1.2rem;
text-shadow: 1px 1px 2px black;
}
@@ -272,7 +272,7 @@ tooltip {
}
.widget-buttons-grid button {
background: @button-bg;
background: @bg-button;
padding: 12px;
border-radius: 16px;
margin: 2px;
@@ -292,8 +292,8 @@ tooltip {
.widget-buttons-grid button label {
font-size: 0.95rem;
color: black;
font-weight: 500;
color: @text;
font-weight: 600;
}
.widget-volume trough,
@@ -302,7 +302,8 @@ tooltip {
background-color: @background-alt;
min-height: 8px;
min-width: 70px;
border-radius: 8px;
border-radius: 10px;
padding: 2px;
}
.widget-volume trough:hover,
@@ -314,14 +315,15 @@ tooltip {
}
.widget-volume trough slider,
.widget-backlight trough slider { /* slider's dot indicator */
background: shade(@yellow, .72);
background: shade(@text, .9);
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;
padding: 10px;
background: shade(@text, .75);
}
.widget-volume trough highlight,