mathias2784/dotfiles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

consistent styling

Browse Source
This commit is contained in:
mathias2784
2026-09-21 22:39:09 +02:00
parent c54c7a2b9d
commit 90a9390f37
37 changed files with 1004 additions and 263 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hypr/.config/waybar/mocha.css
Symlink
+1
View File
@@ -0,0 +1 @@
../../../basic/.config/themes/themes/catppuccin-mocha/theme.css
hypr/.config/waybar/style.css
+59 -62
View File
@@ -1,29 +1,19 @@
/* -------------------------------------------------
Calm Glass (Hyprland / Waybar) — GTK CSS safe
-------------------------------------------------- */
/* Central theme: roles + palette imported from basic/.config/themes
* (mocha.css is a symlink into the current theme's theme.css).
* This file must use @role/@palette names only — never hardcoded colors —
* so a future theme only swaps the central files. */
@import url("mocha.css");
* {
font-family: "JetBrainsMono Nerd Font", FontAwesome, sans-serif;
font-size: 13px;
}
/* ---------- GTK Color Definitions ---------- */
@define-color fg rgba(235, 238, 242, 0.92);
@define-color fg-dim rgba(235, 238, 242, 0.72);
@define-color fg-muted rgba(235, 238, 242, 0.55);
@define-color glass rgba(18, 22, 30, 0.55);
@define-color glass_2 rgba(18, 22, 30, 0.32);
@define-color glass_3 rgba(18, 22, 30, 0.22);
@define-color stroke rgba(255, 255, 255, 0.12);
@define-color stroke_2 rgba(255, 255, 255, 0.07);
/* ---------- Waybar Container ---------- */
window#waybar {
background-color: @glass;
background-color: @bg_dim;
color: @fg;
border-bottom: 1px solid @stroke;
border-bottom: 1px solid @border;
box-shadow: 0 10px 30px rgba(0,0,0,0.30);
transition-property: background-color, opacity;
@@ -43,35 +33,35 @@ button {
button:hover {
background: inherit;
box-shadow: inset 0 -2px rgba(255,255,255,0.18);
box-shadow: inset 0 -2px @accent;
}
#workspaces button {
padding: 0 8px;
margin: 4px 3px;
background-color: rgba(255,255,255,0.04);
color: @fg-dim;
border: 1px solid rgba(255,255,255,0.06);
background-color: @surface;
color: @fg_dim;
border: 1px solid @border;
border-radius: 10px;
}
#workspaces button:hover {
background: rgba(255,255,255,0.07);
background: @border;
color: @fg;
}
#workspaces button.focused,
#workspaces button.active {
background-color: rgba(255,255,255,0.10);
color: @fg;
border: 1px solid rgba(255,255,255,0.12);
box-shadow: inset 0 -2px rgba(255,255,255,0.18);
background-color: @accent;
color: @bg_deep;
border: 1px solid @accent;
box-shadow: inset 0 -2px @accent2;
}
#workspaces button.urgent {
background-color: rgba(190,110,120,0.35);
border-color: rgba(190,110,120,0.50);
color: @fg;
background-color: @urgent;
border-color: @urgent;
color: @bg_deep;
}
#window,
@@ -99,6 +89,7 @@ button:hover {
#pulseaudio,
#wireplumber,
#custom-media,
#custom-gpu,
#tray,
#mode,
#idle_inhibitor,
@@ -111,8 +102,8 @@ button:hover {
#privacy-item {
padding: 0 10px;
color: @fg;
background-color: @glass_2;
border: 1px solid @stroke_2;
background-color: @surface;
border: 1px solid @border;
border-radius: 10px;
margin: 4px 4px;
}
@@ -121,31 +112,32 @@ button:hover {
#wireplumber:hover,
#network:hover,
#clock:hover {
background-color: @glass_3;
background-color: @border;
}
#clock {
border-color: rgba(140, 170, 190, 0.25);
border-color: @accent;
}
/* Battery */
#battery.charging,
#battery.plugged {
background-color: rgba(120,170,140,0.22);
border-color: rgba(120,170,140,0.34);
background-color: @ok;
border-color: @ok;
color: @bg_deep;
}
@keyframes blink {
to {
background-color: rgba(190,110,120,0.18);
border-color: rgba(190,110,120,0.50);
background-color: @urgent;
border-color: @urgent;
}
}
#battery.critical:not(.charging) {
background-color: rgba(190,110,120,0.35);
border-color: rgba(190,110,120,0.55);
color: @fg;
background-color: @urgent;
border-color: @urgent;
color: @bg_deep;
animation-name: blink;
animation-duration: 0.6s;
animation-timing-function: steps(10);
@@ -155,31 +147,33 @@ button:hover {
/* Network */
#network.disconnected {
background-color: rgba(190,110,120,0.30);
border-color: rgba(190,110,120,0.45);
background-color: @urgent;
border-color: @urgent;
color: @bg_deep;
}
/* Audio */
#pulseaudio:hover {
background-color: rgba(190,160,110,0.20);
border-color: rgba(190,160,110,0.28);
background-color: @border;
}
#pulseaudio.muted {
background-color: rgba(140,170,190,0.18);
border-color: rgba(140,170,190,0.26);
color: @fg-dim;
background-color: @surface;
border-color: @border;
color: @fg_muted;
}
#wireplumber.muted {
background-color: rgba(190,110,120,0.28);
border-color: rgba(190,110,120,0.40);
background-color: @urgent;
border-color: @urgent;
color: @bg_deep;
}
/* Temperature */
#temperature.critical {
background-color: rgba(190,110,120,0.30);
border-color: rgba(190,110,120,0.45);
background-color: @urgent;
border-color: @urgent;
color: @bg_deep;
}
/* Tray */
@@ -189,20 +183,20 @@ button:hover {
#tray > .needs-attention {
-gtk-icon-effect: highlight;
background-color: rgba(190,110,120,0.30);
background-color: @urgent;
border-radius: 10px;
}
/* Idle inhibitor */
#idle_inhibitor.activated {
background-color: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.14);
color: @fg;
background-color: @accent;
border-color: @accent;
color: @bg_deep;
}
/* Scratchpad */
#scratchpad {
background: rgba(255,255,255,0.05);
background: @surface;
}
#scratchpad.empty {
@@ -223,14 +217,17 @@ button:hover {
}
#privacy-item.screenshare {
background-color: rgba(190,160,110,0.30);
border-color: rgba(190,160,110,0.40);
background-color: @warn;
border-color: @warn;
color: @bg_deep;
}
#privacy-item.audio-in {
background-color: rgba(120,170,140,0.25);
border-color: rgba(120,170,140,0.36);
background-color: @ok;
border-color: @ok;
color: @bg_deep;
}
#privacy-item.audio-out {
background-color: rgba(140,170,190,0.25);
border-color: rgba(140,170,190,0.36);
background-color: @accent;
border-color: @accent;
color: @bg_deep;
}