Unix3r

Build. Break. Learn. Repeat.

Starting0%
Skip to content

unix3r/dotfiles

Public
main
U Unix3r Initial commit: sway + waybar dotfiles (Catppuccin Mocha) eb290df
156 lines · 4.9 KB Raw History
1/* ╭──────────────────────────────────────────────────────────╮
2 │ Waybar style · Catppuccin Mocha · floating "pill" look │
3 │ GTK CSS reference: docs.gtk.org/gtk3/css-properties.html │
4 ╰──────────────────────────────────────────────────────────╯ */
5
6@define-color base #1e1e2e;
7@define-color mantle #181825;
8@define-color crust #11111b;
9@define-color surface0 #313244;
10@define-color surface1 #45475a;
11@define-color overlay0 #6c7086;
12@define-color text #cdd6f4;
13@define-color subtext0 #a6adc8;
14@define-color lavender #b4befe;
15@define-color blue #89b4fa;
16@define-color sapphire #74c7ec;
17@define-color teal #94e2d5;
18@define-color green #a6e3a1;
19@define-color yellow #f9e2af;
20@define-color peach #fab387;
21@define-color red #f38ba8;
22@define-color mauve #cba6f7;
23@define-color pink #f5c2e7;
24
25* {
26 font-family: "JetBrainsMono Nerd Font", "JetBrains Mono", FontAwesome, sans-serif;
27 font-size: 13px;
28 font-weight: 600;
29 min-height: 0;
30 border: none;
31 border-radius: 0;
32}
33
34window#waybar {
35 background: transparent;
36 color: @text;
37}
38
39window#waybar.hidden { opacity: 0.2; }
40
41tooltip {
42 background: @base;
43 border: 1px solid @lavender;
44 border-radius: 10px;
45}
46tooltip label { color: @text; padding: 2px 4px; }
47
48/* Every module is a rounded pill */
49#custom-launcher, #workspaces, #scratchpad, #mode, #mpris, #clock,
50#custom-weather, #system, #pulseaudio, #backlight, #network, #bluetooth,
51#battery, #custom-updates, #idle_inhibitor, #custom-nightlight,
52#custom-dnd, #tray, #custom-power {
53 background: alpha(@base, 0.92);
54 border-radius: 12px;
55 padding: 0 12px;
56 margin: 0 2px;
57 border: 1px solid alpha(@surface1, 0.6);
58}
59
60/* ── Left ─────────────────────────────────────────── */
61#custom-launcher {
62 color: @blue;
63 font-size: 16px;
64 padding: 0 14px 0 12px;
65}
66#custom-launcher:hover { background: @surface0; }
67
68#workspaces { padding: 0 4px; }
69#workspaces button {
70 color: @overlay0;
71 padding: 0 8px;
72 margin: 4px 1px;
73 border-radius: 8px;
74 background: transparent;
75 transition: all 0.2s ease;
76}
77#workspaces button:hover {
78 background: @surface0;
79 color: @text;
80 box-shadow: none;
81}
82#workspaces button.visible { color: @subtext0; }
83#workspaces button.focused {
84 color: @crust;
85 background: linear-gradient(90deg, @mauve, @lavender);
86 padding: 0 14px;
87}
88#workspaces button.urgent { color: @crust; background: @red; }
89#workspaces button.persistent { color: @surface1; }
90
91#scratchpad { color: @teal; }
92
93#mode {
94 color: @crust;
95 background: @peach;
96}
97
98#mpris { color: @green; }
99#mpris.paused { color: @overlay0; font-style: italic; }
100
101/* ── Center ───────────────────────────────────────── */
102#clock {
103 color: @lavender;
104 padding: 0 16px;
105}
106
107/* ── Right ────────────────────────────────────────── */
108#custom-weather { color: @sapphire; }
109
110#system { padding: 0 6px; }
111#cpu, #memory, #temperature, #disk { padding: 0 6px; }
112#cpu { color: @blue; }
113#memory { color: @mauve; }
114#temperature { color: @teal; }
115#disk { color: @peach; }
116#cpu.warning, #memory.warning { color: @yellow; }
117#cpu.critical, #memory.critical,
118#temperature.critical { color: @red; }
119
120#pulseaudio { color: @pink; }
121#pulseaudio.muted { color: @overlay0; }
122#backlight { color: @yellow; }
123#network { color: @teal; }
124#network.disconnected { color: @red; }
125#bluetooth { color: @blue; }
126#bluetooth.connected { color: @sapphire; }
127
128#battery { color: @green; }
129#battery.charging, #battery.plugged { color: @teal; }
130#battery.warning:not(.charging) { color: @peach; }
131#battery.critical:not(.charging) {
132 color: @crust;
133 background: @red;
134 animation: blink 0.8s steps(12) infinite alternate;
135}
136@keyframes blink { to { background: @base; color: @red; } }
137
138#custom-updates { color: @peach; }
139#custom-updates.none { color: @overlay0; }
140
141#idle_inhibitor { color: @overlay0; }
142#idle_inhibitor.activated { color: @yellow; }
143#custom-nightlight { color: @overlay0; }
144#custom-nightlight.on { color: @peach; }
145#custom-dnd { color: @text; }
146#custom-dnd.dnd { color: @red; }
147
148#tray { padding: 0 10px; }
149#tray > .passive { -gtk-icon-effect: dim; }
150#tray > .needs-attention { -gtk-icon-effect: highlight; background: @red; }
151
152#custom-power {
153 color: @red;
154 padding: 0 14px 0 12px;
155}
156#custom-power:hover { background: @red; color: @crust; }