Made walker frosted glass + cattpuccino

henrovnix_ok/assets/conf/desktop/walker/themes/walker.css

@@ -1,33 +1,39 @@
-/* Catppuccin Mocha Walker Theme */
+/* Catppuccin Mocha Walker Theme — Frosted Glass */
 
 /* --- Palette --- */
-@define-color base   rgba(220, 230, 255, 0.05);
-@define-color mantle #181825;
-@define-color crust  #11111b;
+/* glass layers: low alpha + slightly cool tint */
+@define-color base   rgba(220, 230, 255, 0.06);
+@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 subtext0   #a6adc8;
 @define-color subtext1   #bac2de;
 
-@define-color surface0   #313244;
-@define-color surface1   #45475a;
-@define-color surface2   #585b70;
+/* use these as “edge lights” more than solid fills */
+@define-color surface0   rgba(49, 50, 68, 0.35);
+@define-color surface1   rgba(69, 71, 90, 0.40);
+@define-color surface2   rgba(88, 91, 112, 0.45);
 
-@define-color overlay0   #6c7086;
-@define-color overlay1   #7f849c;
-@define-color overlay2   #9399b2;
+@define-color overlay0   rgba(108, 112, 134, 0.70);
+@define-color overlay1   rgba(127, 132, 156, 0.85);
+@define-color overlay2   rgba(147, 153, 178, 0.90);
 
-@define-color blue   #89b4fa;
+@define-color blue     #89b4fa;
 @define-color lavender #b4befe;
-@define-color mauve  #cba6f7;
-@define-color green  #a6e3a1;
-@define-color red    #f38ba8;
-@define-color peach  #fab387;
-@define-color yellow #f9e2af;
+@define-color mauve    #cba6f7;
+@define-color green    #a6e3a1;
+@define-color red      #f38ba8;
+@define-color peach    #fab387;
+@define-color yellow   #f9e2af;
 
 /* --- Walker expected tokens --- */
 @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;
 
 /* --- Reset --- */
@@ -56,10 +62,12 @@ slider,
 
 /* --- Error --- */
 #cfgerr {
-    background: alpha(@red, 0.4);
+    background: alpha(@red, 0.35);
     margin-top: 20px;
-    padding: 8px;
-    font-size: 1.2em;
+    padding: 10px;
+    border-radius: 10px;
+    border: 1px solid alpha(@red, 0.3);
+    font-size: 1.1em;
 }
 
 /* --- Window --- */
@@ -67,40 +75,53 @@ slider,
     color: @foreground;
 }
 
-/* --- Main container --- */
+/* --- Main container (frosted glass card) --- */
 #box {
-    border-radius: 6px;
+    border-radius: 18px;
+
+    /* “glass”: transparent fill + soft highlight */
     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:
-        0 19px 38px alpha(@crust, 0.5),
-        0 15px 12px alpha(@crust, 0.35);
+        inset 0 1px 0 alpha(@text, 0.08),
+        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 {
-    background: @surface0;
-    padding: 8px;
-    border-radius: 4px;
-    border: 1px solid @surface1;
+    background: rgba(49, 50, 68, 0.22);
+    padding: 10px 12px;
+    border-radius: 14px;
+
+    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 {
-    margin-left: 4px;
+    margin-left: 6px;
     margin-right: 12px;
-    color: @overlay1;
+    color: alpha(@overlay1, 0.9);
 }
 
 #clear {
-    color: @overlay2;
+    color: alpha(@overlay2, 0.9);
 }
 
 /* --- Inputs --- */
 #password,
 #input,
 #typeahead {
-    border-radius: 4px;
+    border-radius: 10px;
 }
 
 #input {
@@ -108,50 +129,62 @@ slider,
 }
 
 #typeahead {
-    color: @subtext1;
+    color: alpha(@subtext1, 0.85);
 }
 
 #input placeholder {
-    color: @overlay0;
+    color: alpha(@overlay0, 0.75);
 }
 
-/* --- List --- */
+/* --- List items --- */
 child {
-    padding: 8px;
-    border-radius: 4px;
+    padding: 10px 12px;
+    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: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 --- */
 #label {
-    font-weight: 500;
+    font-weight: 600;
 }
 
 #sub {
-    color: @subtext0;
-    font-size: 0.8em;
+    color: alpha(@subtext0, 0.85);
+    font-size: 0.85em;
 }
 
 /* --- Activation --- */
 .activation #text,
 .activation #icon,
 .activation #search {
-    opacity: 0.5;
+    opacity: 0.55;
 }
 
 /* --- AI Panel --- */
 .aiItem {
-    padding: 10px;
-    border-radius: 4px;
+    padding: 12px;
+    border-radius: 14px;
     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 {
-    background: @surface0;
+    background: rgba(49, 50, 68, 0.22);
 }