diff --git a/.src/waybar-left.gif b/.src/waybar-left.gif
new file mode 100644
index 0000000..647c7f6
Binary files /dev/null and b/.src/waybar-left.gif differ
diff --git a/.src/waybar-middle_bar-colors.gif b/.src/waybar-middle_bar-colors.gif
new file mode 100644
index 0000000..8236aa3
Binary files /dev/null and b/.src/waybar-middle_bar-colors.gif differ
diff --git a/.src/waybar-right.gif b/.src/waybar-right.gif
new file mode 100644
index 0000000..6669664
Binary files /dev/null and b/.src/waybar-right.gif differ
diff --git a/README.md b/README.md
index 9753f1c..795e2d3 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,63 @@
# waybar
+# showcase
+
+
+
+left-side
+
+
+
+> dynamic icons on workspaces & workspace-button "change" on hover + waybar gets red if in fullscreen (will be shown in middle&&barcolor-changes)
+
+
+right-side
+
+
+
+> dynamic groups for memory/cpu/disk & powerslide-menu
+
+
+middle && barcolor-changes
+
+
+
+> bar changes red if fullscreen is on (not the whole screen of course, but the 'light'-fullscreen mode instead)
+> also changes color if NO window is present, and if something is on the screen
+
+
+> i know the visuals are slight, but i like and love the clean look. Also it's my first complete own design :D
+
+## installation
+To install this waybar theme, you could, if you do not have a waybar folder under your ~/.config/ folder currently installed, just clone the repo directly inside your ~/.config/ folder and update the repo, to get the newest commit
+```bash
+git clone https://git.k4li.de/dotfiles/waybar ~/.config/waybar
+```
+
+> - You can also checkout the dev branch
+
+## dependencies
+```
+grim grimshot
+```
+> for screenshots
+```
+wttrbar
+```
+> to display the weather icon + info
+```
+wlogout swaylock-effects
+```
+> to logout and shutdown menu
+```
+pamixer pavucontrol
+```
+> for sound related settings
+```
+iwd
+```
+or
+```
+nmcli
+```
+> for wifi
diff --git a/ai_config.jsonc b/ai_config.jsonc
new file mode 100644
index 0000000..6823cea
--- /dev/null
+++ b/ai_config.jsonc
@@ -0,0 +1,162 @@
+{
+ "layer": "top",
+ "position": "top",
+ "margin": 0,
+ "spacing": 0,
+
+ "modules-left": [
+ "hyprland/workspaces",
+ "custom/separator",
+ "hyprland/window"
+ ],
+
+ "modules-center": [
+ "group/system_metrics"
+ ],
+
+ "modules-right": [
+ "group/status",
+ "custom/separator",
+ "group/power"
+ ],
+
+ "group/system_metrics": {
+ "orientation": "horizontal",
+ "modules": [
+ "cpu",
+ "memory",
+ "disk",
+ "network"
+ ]
+ },
+
+ "group/status": {
+ "orientation": "horizontal",
+ "modules": [
+ "pulseaudio",
+ "battery",
+ "clock",
+ "custom/weather"
+ ]
+ },
+
+ "hyprland/workspaces": {
+ "format": "{icon}",
+ "on-click": "activate",
+ "format-icons": {
+ "active": "",
+ "default": "",
+ "urgent": ""
+ }
+ },
+
+ "custom/separator": {
+ "format": "│",
+ "interval": "once",
+ "tooltip": false
+ },
+
+ "hyprland/window": {
+ "format": "{}",
+ "separate-outputs": true
+ },
+
+ "cpu": {
+ "interval": 1,
+ "format": " {usage}%",
+ "max-length": 10,
+ "on-click": "foot htop"
+ },
+
+ "memory": {
+ "interval": 5,
+ "format": " {percentage}%",
+ "max-length": 10
+ },
+
+ "disk": {
+ "interval": 30,
+ "format": " {percentage_used}%",
+ "path": "/"
+ },
+
+ "network": {
+ "format-wifi": " {essid}",
+ "format-ethernet": " {ipaddr}",
+ "format-disconnected": "",
+ "tooltip-format": "{ifname} via {gwaddr}",
+ "on-click": "kitty --title 'Network Manager' nmtui",
+ "on-click-right": "nm-connection-editor"
+ },
+
+ "pulseaudio": {
+ "format": "{icon} {volume}%",
+ "format-muted": "",
+ "format-icons": {
+ "default": ["", "", ""]
+ },
+ "on-click": "pavucontrol"
+ },
+
+ "battery": {
+ "states": {
+ "warning": 30,
+ "critical": 15
+ },
+ "format": "{icon} {capacity}%",
+ "format-icons": ["", "", "", "", "", "", "", "", "", ""]
+ },
+
+ "clock": {
+ "format": " {:%H:%M}",
+ "format-alt": " {:%Y-%m-%d}",
+ "tooltip-format": "{calendar}"
+ },
+
+ "custom/weather": {
+ "format": "{}°",
+ "tooltip": true,
+ "interval": 3600,
+ "exec": "wttrbar",
+ "return-type": "json"
+ },
+
+ "group/power": {
+ "orientation": "horizontal",
+ "drawer": {
+ "transition-duration": 300,
+ "children-class": "power-item",
+ "transition-left-to-right": false
+ },
+ "modules": [
+ "custom/power",
+ "custom/lock",
+ "custom/reboot",
+ "custom/quit"
+ ]
+ },
+
+ "custom/power": {
+ "format": "",
+ "on-click": "wlogout",
+ "tooltip": false
+ },
+
+ "custom/lock": {
+ "format": "",
+ "on-click": "swaylock --screenshots --clock --indicator --effect-pixelate 18 --effect-blur 8x8",
+ "tooltip": false
+ },
+
+ "custom/reboot": {
+ "format": "",
+ "on-click": "reboot",
+ "tooltip": false
+ },
+
+ "custom/quit": {
+ "format": "",
+ "on-click": "hyprctl dispatch exit",
+ "tooltip": false
+ }
+}
\ No newline at end of file
diff --git a/ai_style.css b/ai_style.css
new file mode 100644
index 0000000..efdcef3
--- /dev/null
+++ b/ai_style.css
@@ -0,0 +1,170 @@
+* {
+ font-family: "JetBrainsMono Nerd Font", "Symbols Nerd Font", monospace;
+ font-size: 14px;
+ font-weight: bold;
+ min-height: 0;
+}
+
+/* AI-inspired color palette in RGBA:
+ * Deep Space: rgba(42, 44, 65, 1) [#2a2c41]
+ * Steel Blue: rgba(142, 154, 175, 1) [#8e9aaf]
+ * Crystal: rgba(236, 241, 243, 1) [#ecf1f3]
+ * Neural Red: rgba(239, 37, 60, 1) [#ef253c]
+ * Core Red: rgba(215, 4, 39, 1) [#d70427]
+ * Quantum: rgba(2, 108, 90, 1) [#026c5a]
+ * Deep Core: rgba(1, 54, 45, 1) [#01362d]
+ */
+
+@keyframes quantum_pulse {
+ 0% { border-color: rgba(2, 108, 90, 0.3); }
+ 50% { border-color: rgba(2, 108, 90, 0.8); }
+ 100% { border-color: rgba(2, 108, 90, 0.3); }
+}
+
+@keyframes neural_alert {
+ 0% { border-width: 1px; background: rgba(239, 37, 60, 0.1); }
+ 50% { border-width: 2px; background: rgba(215, 4, 39, 0.2); }
+ 100% { border-width: 1px; background: rgba(239, 37, 60, 0.1); }
+}
+
+window#waybar {
+ background: rgba(42, 44, 65, 0.85);
+ border: none;
+ box-shadow: 0 0 15px rgba(1, 54, 45, 0.2);
+ margin: 8px;
+ border-radius: 0;
+}
+
+window#waybar.empty {
+ background: rgba(42, 44, 65, 0.75);
+}
+
+window#waybar.fullscreen {
+ margin: 0;
+ background: rgba(42, 44, 65, 0.95);
+ border-bottom: 2px solid rgba(239, 37, 60, 0.8);
+}
+
+#workspaces {
+ margin: 0 8px;
+ background: rgba(1, 54, 45, 0.1);
+ border-radius: 0;
+ padding: 2px;
+}
+
+#workspaces button {
+ color: rgba(142, 154, 175, 0.8);
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: 0;
+ margin: 2px;
+ padding: 1px 8px;
+ min-width: 24px;
+ transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+#workspaces button:hover {
+ color: rgba(236, 241, 243, 0.95);
+ border-bottom: 1px solid rgba(2, 108, 90, 0.5);
+}
+
+#workspaces button.active {
+ color: rgba(236, 241, 243, 1);
+ background: rgba(2, 108, 90, 0.2);
+ border: 1px solid rgba(2, 108, 90, 0.3);
+ animation: quantum_pulse 4s infinite;
+}
+
+#workspaces button.urgent {
+ color: rgba(236, 241, 243, 1);
+ border: 1px solid rgba(239, 37, 60, 0.8);
+ animation: neural_alert 1s infinite;
+}
+
+#window {
+ margin: 4px 8px;
+ padding: 0 12px;
+ background: transparent;
+ border-left: 2px solid rgba(2, 108, 90, 0.3);
+ color: rgba(236, 241, 243, 0.95);
+}
+
+/* Modules Grid Layout */
+#pulseaudio,
+#memory,
+#cpu,
+#battery,
+#disk,
+#clock,
+#network,
+#tray {
+ margin: 4px;
+ padding: 0 12px;
+ background: transparent;
+ border: 1px solid rgba(2, 108, 90, 0.2);
+ transition: all 200ms ease;
+}
+
+#memory:hover,
+#cpu:hover,
+#battery:hover,
+#disk:hover,
+#network:hover {
+ background: rgba(2, 108, 90, 0.1);
+ border-color: rgba(2, 108, 90, 0.4);
+}
+
+#clock {
+ color: rgba(239, 37, 60, 0.95);
+ border-color: rgba(239, 37, 60, 0.3);
+ margin-right: 8px;
+}
+
+#battery.warning {
+ animation: neural_alert 2s infinite;
+}
+
+#battery.critical {
+ color: rgba(215, 4, 39, 1);
+ animation: neural_alert 750ms infinite;
+}
+
+/* Power Menu Styling */
+#custom-power,
+#custom-reboot,
+#custom-lock,
+#custom-quit,
+#custom-powerm {
+ min-width: 24px;
+ margin: 4px 2px;
+ padding: 0 8px;
+ background: transparent;
+ color: rgba(142, 154, 175, 0.9);
+ border: 1px solid rgba(2, 108, 90, 0.2);
+ transition: all 150ms ease;
+}
+
+#custom-power {
+ margin-right: 8px;
+ border-right: 2px solid rgba(2, 108, 90, 0.3);
+}
+
+#custom-power:hover,
+#custom-reboot:hover,
+#custom-lock:hover,
+#custom-quit:hover,
+#custom-powerm:hover {
+ color: rgba(236, 241, 243, 1);
+ background: rgba(215, 4, 39, 0.15);
+ border-color: rgba(239, 37, 60, 0.4);
+}
+
+tooltip {
+ background: rgba(42, 44, 65, 0.98);
+ border: 1px solid rgba(2, 108, 90, 0.3);
+ border-radius: 0;
+}
+
+tooltip label {
+ color: rgba(236, 241, 243, 0.95);
+}
\ No newline at end of file
diff --git a/config b/config.jsonc
similarity index 79%
rename from config
rename to config.jsonc
index 950216d..970a2ec 100644
--- a/config
+++ b/config.jsonc
@@ -72,7 +72,7 @@
"format": "{name}: {icon} [ {windows} ]",
"format-icons": {
"1": "",
- "2": "",
+ "2": "",
"3": "",
"4": "",
"5": "",
@@ -81,38 +81,67 @@
"special": "",
"default": ""
},
- "window-rewrite-default": "",
+ "window-rewrite-default": "",
"window-rewrite": {
- "foot class": " ",
- "foot": "",
+ "class": " ",
+ "class": " ",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "class": "",
+ "title<*.py>": "",
+ "title<*.sh>": "",
+ "title": "",
"thorium": "",
"class": "",
+ "class": "",
+ "class": "",
"mercury":"",
"VSCodium": "",
"title": "",
"balenaEtcher": "",
+ "class": "",
+ "title": "",
+ "class": "",
"title<.*youtube.*>": "",
"title<*netflix.*>": "",
"title": "",
"title": "",
"title": "",
- "Invidious": " ",
+ "class": " ",
+ // "Invidious": " ",
"class title<.*github.*>": "", // Windows whose class is "firefox" and title contains "github". Note that "class" always comes first.
},
},
"hyprland/window": {
"format": " {title}",
- "on-click-right": "$HOME/.config/hypr/scripts/screenshot_area",
+ "on-click-right": "$HOME/.config/hypr/.scripts/screenshot_area",
"rewrite": {
"(.*) - NVIM": " NeoVim",
"(.*) — Mozilla Firefox": " Firefox",
- "(.*) — Mercury": " Mercury",
"": " Desktop",
+ "(.*) — Mercury": " Mercury",
"(.*) Spotify Free": " Spotify",
"(.*) Spotify": " Spotify",
- "(.*) Tidal": " Tidal",
+ "(.*) - Tidal": " Tidal",
" ~": " pika@home",
"(.*) - Obsidian(.*)": " Obsidian",
+ "(.*) - Cursor": " Cursor AI",
+ "(.*) - QFlipper": " QFlipper",
+ "(.*) - yazi": " yazi",
+ "(.*)python(.*)": " Python",
},
"separate-outputs": false
},
@@ -131,6 +160,7 @@
},
"clock": {
"format": "{:%H:%M}",
+ "on-click-right": "$HOME/.config/hypr/.scripts/screenshot_area",
"tooltip": true
},
"custom/weather": {
@@ -144,7 +174,7 @@
"network": {
"interval": 30,
"on-click": "wl-copy $(ip address show up scope global | grep inet | head -n1 | cut -d/ -f 1 | tr -d [:space:] | cut -c5-)",
- "on-click-right": "foot $HOME/.config/hypr/scripts/wlan.sh",
+ "on-click-right": "foot $HOME/.config/hypr/.scripts/wlan.sh",
"format-wifi": " {essid}",
"format-ethernet": " Wired",
"fomat-disconnected": " Disconnected",
diff --git a/mocha.css b/mocha.css
new file mode 100644
index 0000000..98e218a
--- /dev/null
+++ b/mocha.css
@@ -0,0 +1,37 @@
+/*
+*
+* Catppuccin Mocha palette
+* Maintainer: rubyowo
+*
+*/
+
+@define-color base #1e1e2e;
+@define-color mantle #181825;
+@define-color crust #11111b;
+
+@define-color text #cdd6f4;
+@define-color subtext0 #a6adc8;
+@define-color subtext1 #bac2de;
+
+@define-color surface0 #313244;
+@define-color surface1 #45475a;
+@define-color surface2 #585b70;
+
+@define-color overlay0 #6c7086;
+@define-color overlay1 #7f849c;
+@define-color overlay2 #9399b2;
+
+@define-color blue #89b4fa;
+@define-color lavender #b4befe;
+@define-color sapphire #74c7ec;
+@define-color sky #89dceb;
+@define-color teal #94e2d5;
+@define-color green #a6e3a1;
+@define-color yellow #f9e2af;
+@define-color peach #fab387;
+@define-color maroon #eba0ac;
+@define-color red #f38ba8;
+@define-color mauve #cba6f7;
+@define-color pink #f5c2e7;
+@define-color flamingo #f2cdcd;
+@define-color rosewater #f5e0dc;
diff --git a/muted_style.css b/muted_style.css
new file mode 100644
index 0000000..c69995d
--- /dev/null
+++ b/muted_style.css
@@ -0,0 +1,186 @@
+* {
+ font-size: 0.95rem;
+ font-family: Rubik, iMWritingMono Nerd Font;
+}
+
+/* Main color palette - slightly more vibrant versions:
+ * Base Gray: #9B9B9B (brightened for better readability)
+ * Workspace Active: #E4C493 (brighter warm gold)
+ * CPU: #C48988 (brightened rose)
+ * Memory: #8AA8C0 (brightened steel blue)
+ * Network: #92AB8D (brightened sage)
+ * Battery: #A6998B (brightened taupe)
+ * Disk: #B3A89A (warm neutral)
+ */
+
+@keyframes urgent-workspace {
+ from { color: #8B8B8B; }
+ 75% { color: #B47978; }
+ to { color: #8B8B8B; }
+}
+
+tooltip {
+ border: solid 2px #9B9B9B;
+ background: rgba(35, 35, 35, 0.95);
+ color: #E4C493;
+}
+
+window#waybar {
+ border: solid 2px rgba(139, 139, 139, 0.2);
+ border-radius: 6px;
+ background: rgba(35, 35, 35, 0.9);
+ transition: 600ms;
+}
+
+window#waybar.empty {
+ margin-top: 4px;
+ border: solid 2px rgba(139, 139, 139, 0.2);
+ background: rgba(40, 40, 40, 0.75);
+}
+
+window#waybar.fullscreen {
+ background: rgba(40, 40, 40, 0.9);
+ margin: 0;
+ border: solid 3px rgba(180, 121, 120, 0.8);
+ border-radius: 8px 8px 4px 4px;
+ transition: 300ms;
+}
+
+#workspaces button {
+ border-top: solid 1px #8B8B8B;
+ border-right: solid 1px #8B8B8B;
+ border-bottom: solid 1px transparent;
+ margin-top: 4px;
+ margin-left: 1px;
+ margin-right: 1px;
+ padding: 0 6px;
+ transition: all 200ms ease;
+ border-radius: 4px 4px 2px 0;
+ background: rgba(155, 155, 155, 0.08);
+ color: #9B9B9B;
+}
+
+#workspaces button:hover {
+ margin-top: 2px;
+ background: rgba(212, 180, 131, 0.1);
+ border-top: solid 2px #D4B483;
+ border-right: solid 2px #D4B483;
+ color: #D4B483;
+}
+
+#workspaces button.active {
+ color: #E4C493;
+ background: rgba(228, 196, 147, 0.18);
+ padding: 0 8px;
+ margin-top: 0;
+ border-top: solid 2px currentcolor;
+ border-right: solid 2px currentcolor;
+ border-radius: 8px 4px 2px 0;
+}
+
+#workspaces button.urgent {
+ color: #B47978;
+ border-color: #B47978;
+ background: rgba(180, 121, 120, 0.1);
+ animation: urgent-workspace ease-out 4s infinite;
+}
+
+#pulseaudio,
+#memory,
+#cpu,
+#battery,
+#disk,
+#clock,
+#network,
+#tray {
+ padding: 4px 8px;
+ margin: 0px 4px 0;
+ font-weight: 600;
+ border-top: solid 2px transparent;
+ border-radius: 6px;
+ background: rgba(35, 35, 35, 0.6);
+ transition: all 300ms ease;
+}
+
+#memory {
+ color: #8AA8C0;
+}
+
+#cpu {
+ color: #C48988;
+}
+
+#battery {
+ color: #A6998B;
+}
+
+#network {
+ color: #92AB8D;
+}
+
+#clock {
+ color: #E4C493;
+}
+
+#pulseaudio {
+ color: #9B9B9B;
+}
+
+#disk {
+ color: #B3A89A;
+}
+
+#pulseaudio:hover,
+#memory:hover,
+#cpu:hover,
+#battery:hover,
+#disk:hover,
+#clock:hover,
+#network:hover {
+ border-top: solid 2px currentcolor;
+ background: rgba(255, 255, 255, 0.12);
+ transition: all 200ms ease;
+}
+
+#custom-weather,
+#custom-reboot,
+#custom-quit,
+#custom-lock,
+#custom-powerm,
+#custom-power {
+ padding: 0 1rem;
+ margin: 0 2px;
+ font-weight: 500;
+ border-radius: 6px;
+ background: rgba(139, 139, 139, 0.05);
+ color: #96897B;
+ transition: all 100ms ease-in-out;
+}
+
+#custom-reboot:hover,
+#custom-quit:hover,
+#custom-powerm:hover,
+#custom-lock:hover,
+#custom-power:hover {
+ border-top: solid 2px currentcolor;
+ background: rgba(139, 139, 139, 0.1);
+ color: #B47978;
+ transition: 130ms;
+ margin: 0;
+}
+
+#window {
+ padding: 0 8px;
+ margin: 4px;
+ color: #B3A89A;
+ font-weight: 500;
+ background: rgba(179, 168, 154, 0.08);
+ border-radius: 4px;
+ border-bottom: solid 2px transparent;
+ transition: all 300ms ease;
+}
+
+#window:hover {
+ /* border-bottom: solid 2px #B3A89A; */
+ background: rgba(179, 168, 154, 0.12);
+}
\ No newline at end of file
diff --git a/style.css b/style.css
index 979f492..978cb6b 100644
--- a/style.css
+++ b/style.css
@@ -1,86 +1,120 @@
* {
- font-size: 1rem;
+ font-size: 0.95rem;
font-family: Rubik, iMWritingMono Nerd Font;
}
+
@keyframes urgent-workspace {
-from {
- color: white;
-}
-75% {
- color: red;
-}
-to {
- color: white;
-}
+ from {
+ color: white;
+ }
+
+ 75% {
+ color: red;
+ }
+
+ to {
+ color: white;
+ }
}
+
@keyframes border-expand {
-0% {
- border-top: transparent;
- border-left: transparent;
- border-right: transparent;
- border-bottom: solid 2px currentcolor;
- border-radius: 100px;
-}
-33% {
- border-top: transparent;
- border-left: solid 2px currentcolor;
- border-right: solid 2px currentcolor;
- border-bottom: solid 2px currentcolor;
- border-radius: 66px;
-}
-66% {
- border-top: solid 2px currentcolor;
- border-left: solid 2px currentcolor;
- border-right: solid 2px currentcolor;
- border-bottom: transparent;
- border-radius: 33px;
-}
-to {
- border-top: solid 2px currentcolor;
- border-radius: 0;
- /* border-radius: 0rem 0rem 1rem 1rem; */
-}
+ 0% {
+ border-top: transparent;
+ border-left: transparent;
+ border-right: transparent;
+ border-bottom: solid 2px currentcolor;
+
+ border-radius: 100px;
+ }
+
+ 33% {
+ border-top: transparent;
+ border-left: solid 2px currentcolor;
+ border-right: solid 2px currentcolor;
+ border-bottom: solid 2px currentcolor;
+
+ border-radius: 66px;
+ }
+
+ 66% {
+ border-top: solid 2px currentcolor;
+ border-left: solid 2px currentcolor;
+ border-right: solid 2px currentcolor;
+ border-bottom: transparent;
+
+ border-radius: 33px;
+ }
+
+ to {
+ border-top: solid 2px currentcolor;
+
+ border-radius: 0;
+ }
}
+
tooltip {
border: solid 2px currentcolor;
+
background: black;
+
color: white;
}
+
#p-info,
#weather,
#info {
border-top: solid 1px currentcolor;
+
transition: 650ms;
}
+
#p-info:hover,
#weather:hover,
#info:hover {
border-bottom: solid 2px currentcolor;
border-top: solid 0px transparent;
+
transition: 350ms;
}
#window {
padding: 2px;
+
color: #fdf6e3;
+
font-weight: 600;
+
transition: 300ms;
}
+
window#waybar {
border: solid 2px rgba(160, 160, 160, 0.329);
+
border-radius: 6px;
- background: transparent;
- transition: 700ms;
+
+ /* background: transparent; */
+ background: rgba(51, 50, 59, 0.736);
+
+
+ transition: 600ms;
}
+
window#waybar.empty {
margin-top: 4px;
+
border: solid 2px rgba(136, 136, 136, 0.8);
+ background: rgba(89, 87, 102, 0.336);
}
+
+
window#waybar.fullscreen {
background: rgba(55, 55, 55, 0.6);
+
margin: 0;
- border: solid 3px rgba(145, 11, 53, 0.8);
+
+ border: solid 3px rgba(189, 12, 68, 0.85);
border-radius: 8px 8px 4px 4px;
+
transition: 300ms;
}
@@ -88,76 +122,132 @@ window#waybar.fullscreen {
border-top: solid 1px currentcolor;
border-right: solid 1px currentcolor;
border-bottom: solid 1px transparent;
- margin-top: 5px;
- margin-left: 0px;
- padding: 0;
- padding-right: 4px;
- transition: 200ms;
- border-radius: 2px 2px 2 0;
+
+ margin-top: 4px;
+ margin-left: 1px;
+ margin-right: 1px;
+
+ padding: 0 6px;
+
+ transition: all 200ms ease;
+ border-radius: 4px 4px 2px 0;
+
+ background: rgba(255, 255, 255, 0.02);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
+
+#workspaces button:hover {
+ margin-top: 2px;
+ background: rgba(255, 255, 255, 0.05);
+ border-top: solid 2px currentcolor;
+ border-right: solid 2px currentcolor;
+
+ transition: all 200ms ease;
+}
+
#workspaces button.empty {
+ opacity: 0.7;
}
+
#workspaces button.active {
color: rgba(255, 238, 0, 0.9);
+ background: rgba(255, 255, 255, 0.08);
+
padding: 0 8px;
+
margin-top: 0;
margin-right: 2px;
margin-left: 1px;
+
border-top: solid 2px currentcolor;
border-right: solid 2px currentcolor;
+
border-radius: 8px 4px 2px 0;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
+
#workspaces button.urgent {
color: red;
+ border-color: red;
+ background: rgba(255, 0, 0, 0.1);
animation: urgent-workspace ease-out 4s infinite;
}
#pulseaudio {
color: #cbb643;
}
+
+#p-info,
+#info,
+#memory,
+#cpu,
+#battery,
+#disk,
+#clock,
+#network,
+#not-power,
+#pulseaudio,
+#tray {
+ box-shadow: 0 2px 3px rgba(0,0,0,0.2);
+ background-color: rgba(47, 44, 63, 0.425);
+}
+
#p-info,
#info,
#memory {
color: #9649cd;
}
+
#cpu {
color: #a70a3c;
}
+
#battery {
- color: #859900;
+ color: #1ea54c;
}
+
#network {
color: #1E90FF;
}
+
#disk {
- color: #b58900;
+ color: #c6673e;
}
+
#custom-power {
border-radius: 0 8px 0 0;
}
+
#custom-weather,
#custom-reboot,
#custom-quit,
#custom-lock,
#custom-powerm,
#custom-power {
- padding: 0.2rem 1rem;
- margin: 0 1px;
- font-weight: 600;
- border-top: solid 1px currentcolor;
- transition: 350ms;
+ padding: 0 1rem;
+ margin: 0 2px;
+ font-weight: 500;
+ border-radius: 6px;
+ background: rgba(255, 255, 255, 0.05);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+ transition: all 100ms ease-in-out;
}
+
#custom-reboot:hover,
#custom-quit:hover,
#custom-powerm:hover,
#custom-lock:hover,
#custom-power:hover {
- border-top: solid 2px red;
- transition: 250ms;
+ border-top: solid 2px currentcolor;
+
+ transition: 130ms;
+
margin: 0;
/* border-radius: 2rem; */
- font-size: 1.5rem;
+
+ font-size: 1.1rem;
}
+
#pulseaudio,
#memory,
#cpu,
@@ -167,11 +257,14 @@ window#waybar.fullscreen {
#network,
#not-power,
#tray {
- padding: 6px;
+ padding: 4px 8px;
margin: 0px 4px 0;
font-weight: 600;
border-top: solid 2px transparent;
- transition: 550ms;
+ border-radius: 6px;
+ background: rgba(255, 255, 255, 0.02);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+ transition: all 300ms ease;
}
#pulseaudio:hover,
@@ -182,6 +275,8 @@ window#waybar.fullscreen {
#clock:hover,
#network:hover {
border-top: solid 2px currentcolor;
- transition: 250ms;
-}
-
+ background: rgba(255, 255, 255, 0.05);
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
+ /* transform: translateY(-1px); */
+ transition: all 200ms ease;
+}
\ No newline at end of file