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

Made walker frosted glass + cattpuccino

Browse Source
This commit is contained in:
Henro Veijer
2026-02-27 20:00:42 +01:00
parent 93be75f2f1
commit 16c958381c
2 changed files with 392 additions and 359 deletions
Download Patch File Download Diff File Expand all files Collapse all files
henrovnix_ok/README.html
+309 -309
View File
File diff suppressed because it is too large Load Diff
henrovnix_ok/assets/conf/desktop/walker/themes/walker.css
+83 -50
View File
@@ -1,33 +1,39 @@
/* Catppuccin Mocha Walker Theme */ /* Catppuccin Mocha Walker Theme — Frosted Glass */
/* --- Palette --- */ /* --- Palette --- */
@define-color base rgba(220, 230, 255, 0.05); /* glass layers: low alpha + slightly cool tint */
@define-color mantle #181825; @define-color base rgba(220, 230, 255, 0.06);
@define-color crust #11111b; @define-color mantle rgba(24, 24, 37, 0.55); /* was opaque */
@define-color crust rgba(17, 17, 27, 0.80);
@define-color text #cdd6f4; @define-color text #cdd6f4;
@define-color subtext0 #a6adc8; @define-color subtext0 #a6adc8;
@define-color subtext1 #bac2de; @define-color subtext1 #bac2de;
@define-color surface0 #313244; /* use these as “edge lights” more than solid fills */
@define-color surface1 #45475a; @define-color surface0 rgba(49, 50, 68, 0.35);
@define-color surface2 #585b70; @define-color surface1 rgba(69, 71, 90, 0.40);
@define-color surface2 rgba(88, 91, 112, 0.45);
@define-color overlay0 #6c7086; @define-color overlay0 rgba(108, 112, 134, 0.70);
@define-color overlay1 #7f849c; @define-color overlay1 rgba(127, 132, 156, 0.85);
@define-color overlay2 #9399b2; @define-color overlay2 rgba(147, 153, 178, 0.90);
@define-color blue #89b4fa; @define-color blue #89b4fa;
@define-color lavender #b4befe; @define-color lavender #b4befe;
@define-color mauve #cba6f7; @define-color mauve #cba6f7;
@define-color green #a6e3a1; @define-color green #a6e3a1;
@define-color red #f38ba8; @define-color red #f38ba8;
@define-color peach #fab387; @define-color peach #fab387;
@define-color yellow #f9e2af; @define-color yellow #f9e2af;
/* --- Walker expected tokens --- */ /* --- Walker expected tokens --- */
@define-color foreground @text; @define-color foreground @text;
@define-color background alpha(@mantle, 0.98);
/* very transparent base to let compositor blur show through */
@define-color background rgba(24, 24, 37, 0.38);
/* selection tint */
@define-color color1 @blue; @define-color color1 @blue;
/* --- Reset --- */ /* --- Reset --- */
@@ -56,10 +62,12 @@ slider,
/* --- Error --- */ /* --- Error --- */
#cfgerr { #cfgerr {
background: alpha(@red, 0.4); background: alpha(@red, 0.35);
margin-top: 20px; margin-top: 20px;
padding: 8px; padding: 10px;
font-size: 1.2em; border-radius: 10px;
border: 1px solid alpha(@red, 0.3);
font-size: 1.1em;
} }
/* --- Window --- */ /* --- Window --- */
@@ -67,40 +75,53 @@ slider,
color: @foreground; color: @foreground;
} }
/* --- Main container --- */ /* --- Main container (frosted glass card) --- */
#box { #box {
border-radius: 6px; border-radius: 18px;
/* “glass”: transparent fill + soft highlight */
background: @background; background: @background;
padding: 32px;
border: 1px solid @surface1; /* glass edge highlights */
border: 1px solid alpha(@text, 0.1);
/* subtle inner highlights to feel like glass */
box-shadow: box-shadow:
0 19px 38px alpha(@crust, 0.5), inset 0 1px 0 alpha(@text, 0.08),
0 15px 12px alpha(@crust, 0.35); inset 0 0 0 1px alpha(@crust, 0.15),
0 20px 50px alpha(@crust, 0.55),
0 10px 20px alpha(@crust, 0.35);
padding: 28px;
} }
/* --- Search --- */ /* --- Search “pill” --- */
#search { #search {
background: @surface0; background: rgba(49, 50, 68, 0.22);
padding: 8px; padding: 10px 12px;
border-radius: 4px; border-radius: 14px;
border: 1px solid @surface1;
border: 1px solid alpha(@text, 0.1);
box-shadow:
inset 0 1px 0 alpha(@text, 0.06),
0 6px 16px alpha(@crust, 0.35);
} }
#prompt { #prompt {
margin-left: 4px; margin-left: 6px;
margin-right: 12px; margin-right: 12px;
color: @overlay1; color: alpha(@overlay1, 0.9);
} }
#clear { #clear {
color: @overlay2; color: alpha(@overlay2, 0.9);
} }
/* --- Inputs --- */ /* --- Inputs --- */
#password, #password,
#input, #input,
#typeahead { #typeahead {
border-radius: 4px; border-radius: 10px;
} }
#input { #input {
@@ -108,50 +129,62 @@ slider,
} }
#typeahead { #typeahead {
color: @subtext1; color: alpha(@subtext1, 0.85);
} }
#input placeholder { #input placeholder {
color: @overlay0; color: alpha(@overlay0, 0.75);
} }
/* --- List --- */ /* --- List items --- */
child { child {
padding: 8px; padding: 10px 12px;
border-radius: 4px; border-radius: 14px;
/* faint glass tile */
background: rgba(49, 50, 68, 0.1);
border: 1px solid rgba(255, 255, 255, 0.04);
} }
/* Hover / Selection */ /* Hover / Selection: brighter glass + tinted glow */
child:selected, child:selected,
child:hover { child:hover {
background: alpha(@color1, 0.25); background: alpha(@color1, 0.18);
border: 1px solid alpha(@color1, 0.2);
box-shadow:
inset 0 1px 0 alpha(@text, 0.06),
0 10px 24px alpha(@crust, 0.3);
} }
/* --- Text --- */ /* --- Text --- */
#label { #label {
font-weight: 500; font-weight: 600;
} }
#sub { #sub {
color: @subtext0; color: alpha(@subtext0, 0.85);
font-size: 0.8em; font-size: 0.85em;
} }
/* --- Activation --- */ /* --- Activation --- */
.activation #text, .activation #text,
.activation #icon, .activation #icon,
.activation #search { .activation #search {
opacity: 0.5; opacity: 0.55;
} }
/* --- AI Panel --- */ /* --- AI Panel --- */
.aiItem { .aiItem {
padding: 10px; padding: 12px;
border-radius: 4px; border-radius: 14px;
color: @foreground; color: @foreground;
background: @mantle;
/* glass tile */
background: rgba(24, 24, 37, 0.3);
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: inset 0 1px 0 alpha(@text, 0.05);
} }
.aiItem.assistant { .aiItem.assistant {
background: @surface0; background: rgba(49, 50, 68, 0.22);
} }