diff --git a/waybar/config.jsonc b/waybar/config.jsonc
index c43a41e..92f14fc 100644
--- a/waybar/config.jsonc
+++ b/waybar/config.jsonc
@@ -2,15 +2,15 @@
"position": "top",
"layer": "top",
"spacing": 0,
- "margin": 6,
+ "margin": 0,
"reload_style_on_change": true,
"modules-left": [
"custom/logo",
"hyprland/workspaces"
],
"modules-center": [
- "hyprland/window",
"clock",
+ "hyprland/window",
"custom/media"
],
"modules-right": [
@@ -128,7 +128,7 @@
"clock": {
"format": "{:L%A %d, %H:%M}",
"format-alt": "{:%Y-%m-%d}",
- "tooltip-format": "{calendar}"
+ "tooltip-format": "{calendar}"
},
"cpu": {
diff --git a/waybar/modules.css b/waybar/modules.css
index 10b9c67..8184a99 100644
--- a/waybar/modules.css
+++ b/waybar/modules.css
@@ -11,22 +11,22 @@
/* Workspace Indicator */
#workspaces {
- padding: 5px 0;
- margin: 0 4px;
+ padding-left: 8px;
+ padding-right: 8px;
}
#workspaces > button {
- border: none;
- box-shadow: none;
+ all: unset;
+ transition: 80ms linear;
background: @color1;
border-radius: 14px;
- padding: 0 4px;
+ padding: 4px 12px;
margin: 0 2px;
}
#workspaces > button.active {
background: @foreground;
- padding-right: 24px;
+ padding-right: 30px;
}
#workspaces > button.urgent {
@@ -62,6 +62,7 @@
window.empty #window {
padding: 0;
margin: 0;
+ border: none;
}
@@ -104,11 +105,6 @@ window.empty #window {
padding: 0 10px;
}
-#bluetooth.connected {
- padding-right: 12px;
-}
-
-
/* Pulse Audio */
#pulseaudio {
padding-left: 8px;
diff --git a/waybar/style.css b/waybar/style.css
index acefbbe..a42813e 100644
--- a/waybar/style.css
+++ b/waybar/style.css
@@ -5,45 +5,55 @@
* {
color: @foreground;
transition: 120ms ease-in;
+ font-family: "Noto Sans", "Font Awesome", sans-serif;
+ font-size: 12px;
}
window#waybar {
- font-family: "Noto Sans", "Font Awesome", sans-serif;
- font-size: 12px;
- color: @foreground;
background: transparent;
}
-window#waybar > * {
- padding: 4px;
+window#waybar > box {
+ margin: 6px 6px 0px 6px;
+}
+
+/* Styling modules-[left/center/right] */
+window#waybar > box > * {
+ padding: 5px;
background: alpha(@background, .78);
margin-bottom: 4px;
- border-radius: 14px;
+ border-radius: 18px;
}
-.module {
- padding: 0 10px;
+/* Style all widgets */
+widget .module {
+ padding: 4px 10px;
font-weight: 500;
- margin: 0 1px;
-}
-
-widget > * {
+ margin: 0 2px;
border-radius: 14px;
}
-widget > *:hover:not(#workspaces):not(#tray):not(#custom-media) {
- background: @color1;
-}
-
-label {
+widget .module label {
font-size: .98em;
font-weight: 500;
}
+widget .module:hover:not(#workspaces):not(#tray):not(#custom-media) {
+ background: @color1;
+}
+
+window#waybar > box > * > widget:first-child .module {
+ margin-left: 0px;
+}
+
+window#waybar > box > * > widget:last-child .module {
+ margin-right: 0px;
+}
+
+
menu {
- background: @background;
+ background: transparent;
border: none;
- padding: 2px;
}
menu > separator {
@@ -71,14 +81,18 @@ menu > *:hover {
}
tooltip {
- padding: 3px;
- border-radius: 8px;
- border-color: @color1;
- background: @background;
+ all: unset;
+ padding: 10px;
}
-tooltip > * {
- padding: 0;
- font-weight: 500;
- font-size: .95em;
+tooltip > box {
+ border-radius: 12px;
+ border: 1px solid @color1;
+ background: @background;
+ box-shadow: 0 0 6px 1px alpha(@background, .5);
+}
+
+tooltip > box > label {
+ font-weight: 600;
+ font-size: 1em;
}