From 2b1dfaf36239ddad539416db262dcc5d8b08d67b Mon Sep 17 00:00:00 2001
From: Yousef Jan <yousefjan24000@gmail.com>
Date: Wed, 2 Sep 2026 12:22:01 +0300
Subject: Updates

---
 waybar/style.css | 122 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 waybar/style.css

(limited to 'waybar/style.css')

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;
+}
-- 
cgit v1.2.3