diff --git a/dot_config/waybar/config b/dot_config/waybar/config
index 1c14581e470da40de1d5bf25848a06ec67a5a68c..7cd4a2aaecbe9d1522c03af0d1cdea24aa7cd34a 100644
--- a/dot_config/waybar/config
+++ b/dot_config/waybar/config
@@ -1,15 +1,17 @@
{
"layer": "top", // Waybar at top layer
- "height": 20, // Waybar height (to be removed for auto height)
- "spacing": 4,
- "modules-left": ["hyprland/workspaces"],
- "modules-center": ["hyprland/window"],
+ "height": 30, // Waybar height (to be removed for auto height)
+ "spacing": 5,
+ "modules-left": ["hyprland/workspaces", "hyprland/window"],
"modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "battery", "clock", "tray"],
"hyprland/workspaces": {
"disable-scroll": true,
"all-outputs": true,
"warp-on-scroll": true
},
+ "hyprland/window": {
+ "format": " {}"
+ },
"idle_inhibitor": {
"format": "{icon}",
"format-icons": {
@@ -23,7 +25,8 @@
},
"clock": {
"tooltip-format": "{:%Y %B}\n{calendar}",
- "format-alt": "{:%Y-%m-%d}"
+ "format": "{:%H:%M} ",
+ "format-alt": "{:%Y-%m-%d} "
},
"cpu": {
"format": "{usage}% ",
@@ -33,12 +36,9 @@
"format": "{}% "
},
"temperature": {
- // "thermal-zone": 2,
- // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
"critical-threshold": 80,
- // "format-critical": "{temperatureC}°C {icon}",
"format": "{temperatureC}°C {icon}",
- "format-icons": ["", "", ""]
+ "format-icons": ["", "", "", "", ""]
},
"backlight": {
"format": "{percent}% {icon}",
diff --git a/dot_config/waybar/style.css.tmpl b/dot_config/waybar/style.css.tmpl
index aabbfec27f10c7180ab4cfb92f58301e439bd16d..4f46563a9eacc7c846d7c6c19b2f9f5739ca1326 100644
--- a/dot_config/waybar/style.css.tmpl
+++ b/dot_config/waybar/style.css.tmpl
@@ -1,80 +1,53 @@
-{{- if eq .theme_variant "dark" -}}
@import "macchiato.css";
-{{- else }}
-@import "latte.css";
-{{- end }}
* {
- font-family: "JetBrainsMono NF", "Berkely Mono";
- font-size: 13px;
+ font-family: "JetBrainsMono NF", "Berkely Mono";
+ font-size: 13px;
}
window#waybar {
- background-color: @base;
- border-bottom: 3px solid rgba(100, 114, 125, 0.5);
- color: @text;
- transition-property: background-color;
- transition-duration: .5s;
+ background-color: @base;
+ color: @text;
+ transition-property: background-color;
+ transition-duration: 0.5s;
}
window#waybar.hidden {
- opacity: 0.2;
-}
-
-/*
-window#waybar.empty {
- background-color: transparent;
-}
-window#waybar.solo {
- background-color: #FFFFFF;
-}
-*/
-
-window#waybar.termite {
- background-color: #3F3F3F;
-}
-
-window#waybar.chromium {
- background-color: #000000;
- border: none;
+ 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;
- box-shadow: inset 0 -3px #ffffff;
+ /* Use box-shadow instead of border so the text isn't offset */
+ box-shadow: inset 0 -3px transparent;
+ border-radius: 0;
}
#workspaces button {
- padding: 0 5px;
- background-color: transparent;
- color: #ffffff;
+ padding: 0 5px;
+ background-color: @surface0;
+ margin: 5px 0;
+ color: @text;
}
#workspaces button:hover {
- background: rgba(0, 0, 0, 0.2);
+ background: shade(@base, 0.8);
}
#workspaces button.active {
- background-color: #64727D;
- box-shadow: inset 0 -3px #ffffff;
+ background-color: @overlay0;
}
#workspaces button.urgent {
- background-color: #eb4d4b;
+ background-color: @red;
+ color: @base;
}
-#mode {
- background-color: #64727D;
- border-bottom: 3px solid #ffffff;
+#workspaces button:first-child {
+ border-radius: 12px 0 0 12px;
+}
+
+#workspaces button:last-child {
+ border-radius: 0 12px 12px 0;
}
#clock,
@@ -93,193 +66,59 @@ button:hover {
#idle_inhibitor,
#scratchpad,
#mpd {
- padding: 0 10px;
- color: #ffffff;
+ border-radius: 12px;
+ padding: 3px 13px 3px 8px;
+ margin: 5px 0;
+ color: @text;
+ background-color: @surface0;
}
#window,
#workspaces {
- margin: 0 4px;
-}
-
-/* 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;
-}
-
-#clock {
- background-color: #64727D;
-}
-
-#battery {
- background-color: #ffffff;
- color: #000000;
-}
-
-#battery.charging, #battery.plugged {
- color: #ffffff;
- background-color: #26A65B;
+ margin: 0 4px;
}
@keyframes blink {
- to {
- background-color: #ffffff;
- color: #000000;
- }
+ to {
+ background-color: @base;
+ }
}
#battery.critical:not(.charging) {
- background-color: #f53c3c;
- color: #ffffff;
- animation-name: blink;
- animation-duration: 0.5s;
- animation-timing-function: linear;
- animation-iteration-count: infinite;
- animation-direction: alternate;
-}
-
-label:focus {
- background-color: #000000;
-}
-
-#cpu {
- background-color: #2ecc71;
- color: #000000;
-}
-
-#memory {
- background-color: #9b59b6;
-}
-
-#disk {
- background-color: #964B00;
-}
-
-#backlight {
- background-color: #90b1b1;
-}
-
-#network {
- background-color: #2980b9;
+ background-color: @red;
+ color: @base;
+ animation-name: blink;
+ animation-duration: 0.5s;
+ animation-timing-function: linear;
+ animation-iteration-count: infinite;
+ animation-direction: alternate;
}
#network.disconnected {
- background-color: #f53c3c;
-}
-
-#pulseaudio {
- background-color: #f1c40f;
- color: #000000;
-}
-
-#pulseaudio.muted {
- background-color: #90b1b1;
- color: #2a5c45;
-}
-
-#wireplumber {
- background-color: #fff0f5;
- color: #000000;
-}
-
-#wireplumber.muted {
- background-color: #f53c3c;
-}
-
-#custom-media {
- background-color: #66cc99;
- color: #2a5c45;
- min-width: 100px;
-}
-
-#custom-media.custom-spotify {
- background-color: #66cc99;
-}
-
-#custom-media.custom-vlc {
- background-color: #ffa000;
-}
-
-#temperature {
- background-color: #f0932b;
+ background-color: @red;
+ color: @base;
}
#temperature.critical {
- background-color: #eb4d4b;
+ background-color: @red;
+ color: @base;
}
#tray {
- background-color: #2980b9;
+ padding-right: 9px;
}
#tray > .passive {
- -gtk-icon-effect: dim;
+ -gtk-icon-effect: dim;
}
#tray > .needs-attention {
- -gtk-icon-effect: highlight;
- background-color: #eb4d4b;
-}
-
-#idle_inhibitor {
- background-color: #2d3436;
+ -gtk-icon-effect: highlight;
+ background-color: @red;
+ color: @base;
}
#idle_inhibitor.activated {
- background-color: #ecf0f1;
- color: #2d3436;
-}
-
-#mpd {
- background-color: #66cc99;
- color: #2a5c45;
-}
-
-#mpd.disconnected {
- background-color: #f53c3c;
-}
-
-#mpd.stopped {
- background-color: #90b1b1;
-}
-
-#mpd.paused {
- background-color: #51a37a;
-}
-
-#language {
- background: #00b093;
- color: #740864;
- padding: 0 5px;
- margin: 0 5px;
- min-width: 16px;
-}
-
-#keyboard-state {
- background: #97e1ad;
- color: #000000;
- padding: 0 0px;
- margin: 0 5px;
- min-width: 16px;
-}
-
-#keyboard-state > label {
- padding: 0 5px;
-}
-
-#keyboard-state > label.locked {
- background: rgba(0, 0, 0, 0.2);
-}
-
-#scratchpad {
- background: rgba(0, 0, 0, 0.2);
-}
-
-#scratchpad.empty {
- background-color: transparent;
+ background-color: @pink;
+ color: @base;
}