diff --git a/waybar/colors.css b/waybar/colors.css
new file mode 100644
index 0000000..7de79b7
--- /dev/null
+++ b/waybar/colors.css
@@ -0,0 +1,26 @@
+@define-color rosewater #f5e0dc;
+@define-color flamingo #f2cdcd;
+@define-color pink #f5c2e7;
+@define-color mauve #cba6f7;
+@define-color red #f38ba8;
+@define-color maroon #eba0ac;
+@define-color peach #fab387;
+@define-color yellow #f9e2af;
+@define-color green #a6e3a1;
+@define-color teal #94e2d5;
+@define-color sky #89dceb;
+@define-color sapphire #74c7ec;
+@define-color blue #89b4fa;
+@define-color lavender #b4befe;
+@define-color text #cdd6f4;
+@define-color subtext1 #bac2de;
+@define-color subtext0 #a6adc8;
+@define-color overlay2 #9399b2;
+@define-color overlay1 #7f849c;
+@define-color overlay0 #6c7086;
+@define-color surface2 #585b70;
+@define-color surface1 #45475a;
+@define-color surface0 #313244;
+@define-color base #1a1c2d;
+@define-color mantle #0D0F17;
+@define-color crust #0C0D14;
diff --git a/waybar/config b/waybar/config
index b3282cd..60929e4 100644
--- a/waybar/config
+++ b/waybar/config
@@ -1,3 +1,4 @@
+// vim: ft=jsonc
// -*- mode: jsonc -*-
{
"output": "DP-1",
@@ -30,10 +31,10 @@
"tooltip-format": "{:%Y %B}\n{calendar}"
},
"cpu": {
- "format": "{usage}% ",
+ "format": " {usage}%",
"tooltip": false
},
"memory": {
- "format": "{}% "
+ "format": " {}%"
}
}
diff --git a/waybar/style.css b/waybar/style.css
index 31a1732..99f94fc 100644
--- a/waybar/style.css
+++ b/waybar/style.css
@@ -1,46 +1,56 @@
+@import "colors.css";
+
* {
- font-family: "JetBrainsMono Nerd Font";
- font-size: 18px;
+ font-family: "JetBrainsMono Nerd Font";
+ font-size: 18px;
+ min-height: 0;
+ font-weight: bold;
}
window#waybar {
- background-color: #0e1019;
- border-top: 1px solid #191b2b;
- color: #eceef4;
- transition-property: background-color;
- transition-duration: 0.3s;
- padding: 0 24px;
- opacity: 0.95;
+ background: transparent;
+ background-color: @mantle;
+ color: @overlay0;
+ transition-property: background-color;
+ transition-duration: 0.1s;
+}
+
+#window {
+ margin: 8px;
+ padding-left: 8;
+ padding-right: 8;
}
button {
- /* Avoid rounded borders under each button name */
- border: none;
- border-radius: 0;
+ /*box-shadow: inset 0 -3px transparent;*/
+ border: none;
+ padding-bottom: 2px;
+ border-radius: 0;
}
-button:hover {
- border: none;
- box-shadow: none; /* Remove predefined box-shadow */
- text-shadow: none; /* Remove predefined text-shadow */
- background: none; /* Remove predefined background color (white) */
- transition: none; /* Disable predefined animations */
+#workspaces button:hover,
+#workspaces button.active,
+#workspaces button.focused {
+ /*background: inherit;*/
+ color: @blue;
+ padding-bottom: 3px;
+ border-top: 3px solid @blue;
}
#workspaces button {
- color: #eceef4;
- padding: 0 5px;
+ padding: 0 8px;
}
-#workspaces button:hover {
- border: none;
+#workspaces button.active,
+#workspaces button.focused {
+ background-color: rgba(0, 0, 0, 0.3);
}
-#workspaces button.active {
- color: #89b4fa;
- background: #191b2b;
+#workspaces button.urgent {
+ background-color: @red;
}
+#pulseaudio,
#clock,
#battery,
#cpu,
@@ -48,16 +58,66 @@ button:hover {
#disk,
#temperature,
#backlight,
-#network,
-#pulseaudio,
#wireplumber,
-#custom-media,
#tray,
+#network,
#mode,
-#idle_inhibitor,
-#scratchpad,
-#power-profiles-daemon,
-#mpd {
- padding: 0 10px;
- color: #eceef4;
+#scratchpad {
+ margin-bottom: 2px;
+ margin-left: 8px;
+ margin-right: 8px;
+ padding-left: 8px;
+ padding-right: 8px;
}
+
+#clock {
+ color: @mauve;
+ border-bottom: 2px solid @mauve;
+}
+
+#clock.date {
+ color: @mauve;
+}
+
+#pulseaudio {
+ color: @blue;
+}
+
+#network {
+ color: @yellow;
+}
+
+#cpu {
+ color: @sky;
+ border-bottom: 2px solid @sapphire;
+}
+
+#memory {
+ color: @peach;
+ border-bottom: 2px solid @peach;
+}
+
+#idle_inhibitor {
+ margin-right: 12px;
+ color: @green;
+}
+
+#idle_inhibitor.activated {
+ color: @red;
+}
+
+#battery {
+ color: @green;
+ border-bottom: 2px solid @green;
+}
+
+/* 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;
+}
+