/* Ported from Protesilaos Stavrou's waybar style.css: * https://github.com/protesilaos/dotfiles/tree/master/wayland-tc/.config/waybar * * SUBSTITUTION: Prot sets `font-family: FontAwesome, sans-serif`. Replaced * with FiraCode Nerd Font, which carries the FontAwesome glyphs his module * formats rely on, so the icons still render. * * SUBSTITUTION: Sway's workspace buttons get the `.focused` class; the * Hyprland module uses `.active`. Both are styled below so this survives * either way. */ * { font-family: "FiraCode Nerd Font", sans-serif; font-size: 1rem; } /* Colour is scoped to the bar on purpose. A bare `* { color: #ffffff }` also * matches the label inside the tooltip window (a separate GTK toplevel), and a * direct match beats the colour a widget inherits from Breeze's `tooltip` node * -- so tooltips rendered white text on Breeze's #f7f7f7 background. Scoping it * here leaves tooltips with the GTK theme's own colours. */ window#waybar * { color: #ffffff; } window#waybar { background-color: rgba(0,0,0, 0.7); color: #ffffff; transition-property: background-color; transition-duration: .5s; } window#waybar.hidden { opacity: 0.2; } button { /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -3px transparent; /* Avoid rounded borders under each button name */ border: none; border-radius: 0; } /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ button:hover { background: inherit; } #workspaces button { padding: 0 8px; background-color: transparent; color: #787878; } #workspaces button:hover { background: rgba(0, 0, 0, 0.2); } #workspaces button.focused, #workspaces button.active { background-color: #383838; color: #ffffff; font-weight: bold; box-shadow: inset 0 -1px #ffffff; } #workspaces button.urgent { background-color: #eb4d4b; } #submap { background-color: #64727D; border-bottom: 3px solid #ffffff; } #clock, #cpu, #memory, #disk, #temperature, #network, #pulseaudio, #wireplumber, #tray, #submap, #idle_inhibitor, #scratchpad { padding: 0 3px; } #window, #workspaces { margin: 0 1px; } /* If workspaces is the leftmost module, omit left margin */ .modules-left > widget:first-child > #workspaces { margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { margin-right: 0; } label:focus { background-color: #000000; } #tray { background-color: #2980b9; } #tray > .passive { -gtk-icon-effect: dim; } #tray > .needs-attention { -gtk-icon-effect: highlight; background-color: #eb4d4b; }