aboutsummaryrefslogtreecommitdiff
path: root/waybar/style.css
diff options
context:
space:
mode:
authorYousef Jan <yousefjan24000@gmail.com>2026-09-02 12:22:01 +0300
committerYousef Jan <yousefjan24000@gmail.com>2026-09-02 12:22:01 +0300
commit2b1dfaf36239ddad539416db262dcc5d8b08d67b (patch)
tree8ace48d5adbd4fb579467cc25fbd63e466925426 /waybar/style.css
parent1307051a867f103379687b9f88e1cd486476c281 (diff)
Updates
Diffstat (limited to 'waybar/style.css')
-rw-r--r--waybar/style.css122
1 files changed, 122 insertions, 0 deletions
diff --git a/waybar/style.css b/waybar/style.css
new file mode 100644
index 0000000..12ddd42
--- /dev/null
+++ b/waybar/style.css
@@ -0,0 +1,122 @@
+/* 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 1px;
+ 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;
+}