henrov/nixos
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

New colors

Browse Source
This commit is contained in:
Henro Veijer
2026-02-27 15:45:36 +01:00
parent 8b8f3ce7c9
commit f199c0402a
2 changed files with 88 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
henrovnix_ok/assets/conf/desktop/waybar/style.css
+38 -24
View File
@@ -11,6 +11,9 @@
@define-color yellow rgba(249, 226, 175, 1.0);
@define-color overlay1 rgba(255, 255, 255, 0.55);
/* This is the exact "active" fill you requested */
@define-color active_fill rgba(255, 255, 255, 0.05);
* {
font-family:
Aporetic Sans Mono,
@@ -30,7 +33,7 @@ window#waybar {
/* --- Workspaces --- */
#workspaces button {
padding: 0px 6px;
min-width: 80px; /* fixed-ish width without max-width */
min-width: 80px;
background-color: transparent;
color: @text;
border: 1px solid @inactive;
@@ -38,25 +41,38 @@ window#waybar {
box-shadow: none;
}
/* Subtle hover glow (GTK-safe): slight tint + soft shadow */
#workspaces button:hover {
background-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 0 10px rgba(51, 204, 255, 0.18);
}
/* Active workspace with GTK-safe gradient border */
/*
* IMPORTANT:
* - To get *real* rounded corners, we avoid border-image (GTK often won't clip it to border-radius).
* - To keep your "gradient feel", we emulate it with a dual-glow shadow (blue + green).
* - Background and border color match exactly (your request).
*/
#workspaces button.active {
font-weight: bold;
border-radius: 10px;
border: 2px solid transparent;
background-color: rgba(255, 255, 255, 0.15);
border-image: linear-gradient(45deg, @blue, @green) 1;
box-shadow: 0 0 12px rgba(0, 255, 153, 0.18);
/* EXACT match: border color == background color */
background-color: @active_fill;
border: 2px solid @active_fill;
/* Gradient vibe without breaking radius */
box-shadow:
0 0 0 1px rgba(51, 204, 255, 0.55),
0 0 0 2px rgba(0, 255, 153, 0.4),
0 0 10px rgba(51, 204, 255, 0.18),
0 0 10px rgba(0, 255, 153, 0.14);
}
/* Optional: make active+hover pop a hair more */
#workspaces button.active:hover {
box-shadow:
0 0 0 1px rgba(51, 204, 255, 0.65),
0 0 0 2px rgba(0, 255, 153, 0.48),
0 0 12px rgba(51, 204, 255, 0.22),
0 0 12px rgba(0, 255, 153, 0.18);
}
@@ -114,31 +130,29 @@ window#waybar {
}
/* --- Hyprscroll overflow indicator --- */
#custom-hyprscroll_overflow {
border-radius: 10px;
box-shadow: none;
}
/* Subtle hover glow when not overflow (if it still renders as a widget) */
#custom-hyprscroll_overflow:hover {
background-color: rgba(255, 255, 255, 0.06);
box-shadow: 0 0 10px rgba(0, 255, 153, 0.16);
}
#custom-hyprscroll_overflow.overflow {
padding: 0px 6px;
min-width: 80px; /* match workspace button width */
min-width: 80px;
color: @text;
border-radius: 10px;
font-weight: bold;
border: 2px solid transparent;
background-color: rgba(255, 255, 255, 0.05);
border-image: linear-gradient(45deg, @blue, @green) 1;
box-shadow: 0 0 12px rgba(51, 204, 255, 0.18);
/* EXACT match: border color == background color */
background-color: @active_fill;
border: 2px solid @active_fill;
/* Same "gradient feel" as active workspace */
box-shadow:
0 0 0 1px rgba(51, 204, 255, 0.55),
0 0 0 2px rgba(0, 255, 153, 0.4),
0 0 10px rgba(51, 204, 255, 0.18),
0 0 10px rgba(0, 255, 153, 0.14);
}
#custom-hyprscroll_overflow.overflow:hover {
box-shadow:
0 0 0 1px rgba(51, 204, 255, 0.65),
0 0 0 2px rgba(0, 255, 153, 0.48),
0 0 12px rgba(51, 204, 255, 0.22),
0 0 12px rgba(0, 255, 153, 0.18);
}