/* GTK Color Definitions */ @define-color bg-primary rgba(28, 28, 28, 0.81); @define-color bg-secondary rgba(28, 28, 28, 0.81); @define-color bg-opaque rgba(23, 28, 39, 0.8); @define-color border-color rgba(90, 104, 115, 1); @define-color text-primary #ffffff; @define-color text-secondary #888888; @define-color accent-color #E96375; @define-color accent-alt #faa7b3; @define-color attention #FFFF00; @define-color warning #FFAA00; @define-color warning-alt #FFDDAA; @define-color danger #FF0000; @define-color success #00FF00; @define-color success-alt #AAFFAA; @define-color info #CCEEFF; * { font-family: "Iosevka Nerd Font Propo"; font-size: 15px; } /* Window */ window#waybar { background-color: transparent; color: @text-primary; transition-property: background-color; transition-duration: 0.5s; } window#waybar.hidden { opacity: 0.2; } window#waybar.termite { background-color: #3F3F3F; } window#waybar.chromium { background-color: #000000; border: none; } /* Common module styling - applied to most modules */ #mpd, #custom-pomodoro, #custom-goal, #custom-submap, #cpu, #memory, #memory.swap, #disk, #clock, #battery, #temperature, #backlight, #network, #pulseaudio, #wireplumber, #custom-media, #tray, #mode, #idle_inhibitor, #scratchpad { background: linear-gradient(to bottom, @bg-primary, @bg-secondary); border: 1px solid @border-color; border-top: none; padding: 0 10px; color: @text-primary; transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease; } /* Workspaces */ #workspaces { background: linear-gradient(to bottom, @bg-primary, @bg-secondary); border-right: 1px solid @border-color; border-bottom: 1px solid @border-color; border-radius: 0 0 10px 0; margin-right: 10px; padding-right: 5px; } #workspaces button { padding: 0 5px; background-color: transparent; color: @text-primary; border: none; border-radius: 0; box-shadow: inset 0 -3px transparent; } #workspaces button.empty { color: @text-secondary; } #workspaces button:hover { background: rgba(0, 0, 0, 0.2); box-shadow: inset 0 -3px @text-primary; } #workspaces button.active.hosting-monitor { background-color: rgba(0, 0, 0, 0.32); box-shadow: inset 0 -3px @accent-color; color: @accent-color; animation: hover 0.8s 1; } #workspaces button.urgent { color: @bg-opaque; font-weight: 700; background-color: @attention; box-shadow: inset 0 -13px @attention; transition: color 0.5s, box-shadow 0.5s, background 0.5s; } /* Side Module Groups */ .modules-left { border-left: none; border-radius: 0 0 10px 0; } .modules-right { border-right: none; border-radius: 0 0 0 10px; } /* System Modules - specific border adjustments */ #cpu, #memory, #memory.swap { margin: 0; } #cpu { margin-left: 20px; border-right: none; border-radius: 0 0 0 10px; } #memory { border-left: none; border-right: none; } #memory.swap { border-left: none; border-radius: 0 0 10px 0; } /* Custom Modules */ #custom-pomodoro, #custom-goal { color: @warning-alt; margin: 0 20px; } #custom-pomodoro { border-radius: 0 0 10px 10px; } #custom-goal { margin: 0; border-left: none; border-radius: 0 0 10px 0; } #custom-submap { color: @accent-color; border-radius: 0 0 10px 10px; } /* Pomodoro States */ #custom-pomodoro.break { color: @success; box-shadow: inset 0 -3px @success; } #custom-pomodoro.pause { color: @warning; box-shadow: inset 0 -3px @warning; } #custom-pomodoro.break + #custom-goal, #custom-pomodoro.pause + #custom-goal { color: inherit; box-shadow: inherit; } /* System Info Modules */ #cpu, #memory, #memory.swap, #disk { color: @info; } /* Standard Modules - border adjustments */ #clock, #battery, #temperature, #backlight, #network, #wireplumber, #custom-media, #tray, #mode, #idle_inhibitor, #scratchpad { border-left: none; border-right: none; } #pulseaudio { border-left: 1px solid @border-color; border-right: none; border-radius: 0 0 0 10px; margin-left: 20px; } /* MPD specific styles */ #mpd { border-radius: 0 0 10px 10px; transition: color 2s, border-color 2s, background 2s; } #mpd.playing { color: @accent-alt; } #mpd.stopped { border-color: transparent; background: transparent; color: transparent; } /* Hover Effects */ #mpd.playing:hover, #mpd.paused:hover, #clock:hover, #battery:hover, #disk:hover, #temperature:hover, #backlight:hover, #network:hover, #pulseaudio:hover, #wireplumber:hover, #custom-media:hover, #mode:hover, #idle_inhibitor:hover, #scratchpad:hover, #power-profiles-daemon:hover { color: @accent-color; transition: color 0.3s, box-shadow 0.3s, background 0.3s; } /* Battery States */ #battery.charging, #battery.plugged { color: @success-alt; box-shadow: inset 0 -3px @success-alt; } #battery.warning:not(.charging) { color: @warning; border-bottom: 3px solid @warning; } #battery.critical:not(.charging) { color: @danger; border-bottom: 3px solid @danger; } /* Power Profiles */ #power-profiles-daemon { color: @text-primary; font-size: 17px; padding: 0 7px 0 12px; } /* Warning States */ #temperature.critical, #idle_inhibitor.activated { animation: blink-warning 2s infinite; } /* Tray */ #tray > .needs-attention { -gtk-icon-effect: highlight; animation: blink-attention 2s infinite; } /* Animations */ @keyframes hover { 0% { color: @text-primary; } 100% { color: @accent-color; } } /* Layout Utilities */ #window, #workspaces { margin: 0 0px; } .modules-left > widget:first-child > #workspaces { margin-left: 0; } .modules-right > widget:last-child > #workspaces { margin-right: 0; } #mode { box-shadow: inset 0 -3px @text-primary; }