186 lines
3.5 KiB
CSS
186 lines
3.5 KiB
CSS
/* Catppuccin Mocha Walker Theme — Frosted Glass */
|
|
|
|
@import "default.css";
|
|
|
|
/* --- Palette --- */
|
|
/* glass layers: low alpha + slightly cool tint */
|
|
@define-color base rgba(220, 230, 255, 0.15);
|
|
@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;
|
|
|
|
/* 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 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 lavender #b4befe;
|
|
@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;
|
|
|
|
/* very transparent base to let compositor blur show through */
|
|
@define-color background: rgba(26, 26, 40, 0.75);
|
|
|
|
/* selection tint */
|
|
@define-color color1 @blue;
|
|
|
|
/* --- Reset --- */
|
|
#window,
|
|
#box,
|
|
#aiScroll,
|
|
#aiList,
|
|
#search,
|
|
#password,
|
|
#input,
|
|
#prompt,
|
|
#clear,
|
|
#typeahead,
|
|
#list,
|
|
child,
|
|
scrollbar,
|
|
slider,
|
|
#item,
|
|
#text,
|
|
#label,
|
|
#bar,
|
|
#sub,
|
|
#activationlabel {
|
|
all: unset;
|
|
}
|
|
|
|
/* --- Error --- */
|
|
#cfgerr {
|
|
background: alpha(@red, 0.35);
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border-radius: 10px;
|
|
border: 1px solid alpha(@red, 0.3);
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
/* --- Window --- */
|
|
#window {
|
|
color: @foreground;
|
|
}
|
|
|
|
/* --- Main container (frosted glass card) --- */
|
|
#box {
|
|
border-radius: 18px;
|
|
background: @background;
|
|
|
|
border: 1px solid alpha(@text, 0.08);
|
|
|
|
box-shadow:
|
|
inset 0 1px 0 alpha(@text, 0.04),
|
|
0 8px 18px alpha(@crust, 0.4);
|
|
|
|
padding: 28px;
|
|
}
|
|
|
|
/* --- Search “pill” --- */
|
|
#search {
|
|
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: 6px;
|
|
margin-right: 12px;
|
|
color: alpha(@overlay1, 0.9);
|
|
}
|
|
|
|
#clear {
|
|
color: alpha(@overlay2, 0.9);
|
|
}
|
|
|
|
/* --- Inputs --- */
|
|
#password,
|
|
#input,
|
|
#typeahead {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#input {
|
|
background: none;
|
|
}
|
|
|
|
#typeahead {
|
|
color: alpha(@subtext1, 0.85);
|
|
}
|
|
|
|
#input placeholder {
|
|
color: alpha(@overlay0, 0.75);
|
|
}
|
|
|
|
/* --- List items --- */
|
|
child {
|
|
padding: 10px 12px;
|
|
border-radius: 14px;
|
|
background: @background;
|
|
border: 1px solid alpha(@text, 0.05);
|
|
}
|
|
|
|
/* Hover / Selection: brighter glass + tinted glow */
|
|
child:selected,
|
|
child:hover {
|
|
background: rgba(22, 22, 34, 0.8);
|
|
border: 1px solid alpha(@text, 0.08);
|
|
|
|
box-shadow:
|
|
inset 0 1px 0 alpha(@text, 0.05),
|
|
0 6px 14px alpha(@crust, 0.35);
|
|
}
|
|
|
|
/* --- Text --- */
|
|
#label {
|
|
font-weight: 600;
|
|
}
|
|
|
|
#sub {
|
|
color: alpha(@subtext0, 0.85);
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
/* --- Activation --- */
|
|
.activation #text,
|
|
.activation #icon,
|
|
.activation #search {
|
|
opacity: 0.55;
|
|
}
|
|
|
|
/* --- AI Panel --- */
|
|
.aiItem {
|
|
padding: 12px;
|
|
border-radius: 14px;
|
|
color: @foreground;
|
|
|
|
/* 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: rgba(49, 50, 68, 0.22);
|
|
}
|