/* ------------------------------------------------- Calm Glass (Hyprland / Waybar) — GTK CSS safe -------------------------------------------------- */ # * { # font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; # font-size: 13px; # } * { 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; color: @fg; border-bottom: 1px solid @stroke; box-shadow: 0 10px 30px rgba(0,0,0,0.30); transition-property: background-color, opacity; transition-duration: .5s; } window#waybar.hidden { opacity: 0.35; } /* ---------- Buttons / Workspaces ---------- */ button { box-shadow: inset 0 -2px transparent; border: none; border-radius: 0; } button:hover { background: inherit; box-shadow: inset 0 -2px rgba(255,255,255,0.18); } #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); border-radius: 10px; } #workspaces button:hover { background: rgba(255,255,255,0.07); 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); } #workspaces button.urgent { background-color: rgba(190,110,120,0.35); border-color: rgba(190,110,120,0.50); color: @fg; } #window, #workspaces { margin: 0 4px; } .modules-left > widget:first-child > #workspaces { margin-left: 0; } .modules-right > widget:last-child > #workspaces { margin-right: 0; } /* ---------- Common “Chip” module style ---------- */ #clock, #battery, #cpu, #memory, #disk, #temperature, #backlight, #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode, #idle_inhibitor, #scratchpad, #power-profiles-daemon, #mpd, #language, #keyboard-state, #privacy, #privacy-item { padding: 0 10px; color: @fg; background-color: @glass_2; border: 1px solid @stroke_2; border-radius: 10px; margin: 4px 4px; } #pulseaudio:hover, #wireplumber:hover, #network:hover, #clock:hover { background-color: @glass_3; } #clock { border-color: rgba(140, 170, 190, 0.25); } /* Battery */ #battery.charging, #battery.plugged { background-color: rgba(120,170,140,0.22); border-color: rgba(120,170,140,0.34); } @keyframes blink { to { background-color: rgba(190,110,120,0.18); border-color: rgba(190,110,120,0.50); } } #battery.critical:not(.charging) { background-color: rgba(190,110,120,0.35); border-color: rgba(190,110,120,0.55); color: @fg; animation-name: blink; animation-duration: 0.6s; animation-timing-function: steps(10); animation-iteration-count: infinite; animation-direction: alternate; } /* Network */ #network.disconnected { background-color: rgba(190,110,120,0.30); border-color: rgba(190,110,120,0.45); } /* Audio */ #pulseaudio:hover { background-color: rgba(190,160,110,0.20); border-color: rgba(190,160,110,0.28); } #pulseaudio.muted { background-color: rgba(140,170,190,0.18); border-color: rgba(140,170,190,0.26); color: @fg-dim; } #wireplumber.muted { background-color: rgba(190,110,120,0.28); border-color: rgba(190,110,120,0.40); } /* Temperature */ #temperature.critical { background-color: rgba(190,110,120,0.30); border-color: rgba(190,110,120,0.45); } /* Tray */ #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; background-color: rgba(190,110,120,0.30); 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; } /* Scratchpad */ #scratchpad { background: rgba(255,255,255,0.05); } #scratchpad.empty { background-color: transparent; border-color: transparent; } /* Privacy */ #privacy { padding: 0; background-color: transparent; border-color: transparent; } #privacy-item { padding: 0 6px; color: @fg; } #privacy-item.screenshare { background-color: rgba(190,160,110,0.30); border-color: rgba(190,160,110,0.40); } #privacy-item.audio-in { background-color: rgba(120,170,140,0.25); border-color: rgba(120,170,140,0.36); } #privacy-item.audio-out { background-color: rgba(140,170,190,0.25); border-color: rgba(140,170,190,0.36); }