diff --git a/.src/waybar-left.gif b/.src/waybar-left.gif deleted file mode 100644 index 647c7f6..0000000 Binary files a/.src/waybar-left.gif and /dev/null differ diff --git a/.src/waybar-middle_bar-colors.gif b/.src/waybar-middle_bar-colors.gif deleted file mode 100644 index 8236aa3..0000000 Binary files a/.src/waybar-middle_bar-colors.gif and /dev/null differ diff --git a/.src/waybar-right.gif b/.src/waybar-right.gif deleted file mode 100644 index 6669664..0000000 Binary files a/.src/waybar-right.gif and /dev/null differ diff --git a/README.md b/README.md index 795e2d3..9753f1c 100644 --- a/README.md +++ b/README.md @@ -1,63 +1,2 @@ # waybar -# showcase - - -
-left-side - -![waybar-left.gif](https://git.k4li.de/dotfiles/waybar/raw/branch/main/.src/waybar-left.gif) - -> dynamic icons on workspaces & workspace-button "change" on hover + waybar gets red if in fullscreen (will be shown in middle&&barcolor-changes) -
-
-right-side - -![waybar-right](https://git.k4li.de/dotfiles/waybar/raw/branch/main/.src/waybar-right.gif) - -> dynamic groups for memory/cpu/disk & powerslide-menu -
-
-middle && barcolor-changes - -![waybar-mid](https://git.k4li.de/dotfiles/waybar/raw/branch/main/.src/waybar-middle_bar-colors.gif) - -> 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 deleted file mode 100644 index 6823cea..0000000 --- a/ai_config.jsonc +++ /dev/null @@ -1,162 +0,0 @@ -{ - "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 deleted file mode 100644 index efdcef3..0000000 --- a/ai_style.css +++ /dev/null @@ -1,170 +0,0 @@ -* { - 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.jsonc b/config similarity index 79% rename from config.jsonc rename to config index 970a2ec..950216d 100644 --- a/config.jsonc +++ b/config @@ -72,7 +72,7 @@ "format": "{name}: {icon} [ {windows} ]", "format-icons": { "1": "󰁕", - "2": "󰁕", + "2": "󰁕", "3": "󰁕", "4": "󰁕", "5": "󰁕", @@ -81,67 +81,38 @@ "special": "󰮯", "default": "󰁕" }, - "window-rewrite-default": "", + "window-rewrite-default": "", "window-rewrite": { - "class": " ", - "class": " ", - "class": "", - "class": "", - "class": "", - "class": "", - "class": "", - "class": "", - "class": "󰝰", - "class": "󰝰", - "class": "󰝰", - "class": "󰝰", - "class": "󰝰", - "class": "󰝰", - "class": "󱐋", - "class": "󱙺", - "class": "", - "class": "", - "title<*.py>": "", - "title<*.sh>": "", - "title": "󰝰", + "foot class": " ", + "foot": "", "thorium": "󰊯", "class": "󰝰", - "class": "󰝰", - "class": "", "mercury":"", "VSCodium": "", "title": "", "balenaEtcher": "󱊞", - "class": "󰽰", - "title": "󰍳", - "class": "󱓟", "title<.*youtube.*>": "", "title<*netflix.*>": "󰝆", "title": "", "title": "󰓓", "title": "󰓓", - "class": " ", - // "Invidious": " ", + "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", - "": "󰇄 Desktop", "(.*) — Mercury": "󰈹 Mercury", + "": "󰇄 Desktop", "(.*) 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 }, @@ -160,7 +131,6 @@ }, "clock": { "format": "{:%H:%M}", - "on-click-right": "$HOME/.config/hypr/.scripts/screenshot_area", "tooltip": true }, "custom/weather": { @@ -174,7 +144,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 deleted file mode 100644 index 98e218a..0000000 --- a/mocha.css +++ /dev/null @@ -1,37 +0,0 @@ -/* -* -* 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 deleted file mode 100644 index c69995d..0000000 --- a/muted_style.css +++ /dev/null @@ -1,186 +0,0 @@ -* { - 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 978cb6b..979f492 100644 --- a/style.css +++ b/style.css @@ -1,120 +1,86 @@ * { - font-size: 0.95rem; + font-size: 1rem; font-family: Rubik, iMWritingMono Nerd Font; } - @keyframes urgent-workspace { - 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; - } -} - -tooltip { - border: solid 2px currentcolor; - - background: black; - +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; */ +} +} +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; */ - background: rgba(51, 50, 59, 0.736); - - - transition: 600ms; + background: transparent; + transition: 700ms; } - 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(189, 12, 68, 0.85); + border: solid 3px rgba(145, 11, 53, 0.8); border-radius: 8px 8px 4px 4px; - transition: 300ms; } @@ -122,132 +88,76 @@ window#waybar.fullscreen { border-top: solid 1px currentcolor; border-right: solid 1px currentcolor; 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(255, 255, 255, 0.02); - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); + margin-top: 5px; + margin-left: 0px; + padding: 0; + padding-right: 4px; + transition: 200ms; + border-radius: 2px 2px 2 0; } - -#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: #1ea54c; + color: #859900; } - #network { color: #1E90FF; } - #disk { - color: #c6673e; + color: #b58900; } - #custom-power { border-radius: 0 8px 0 0; } - #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(255, 255, 255, 0.05); - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); - transition: all 100ms ease-in-out; + padding: 0.2rem 1rem; + margin: 0 1px; + font-weight: 600; + border-top: solid 1px currentcolor; + transition: 350ms; } - #custom-reboot:hover, #custom-quit:hover, #custom-powerm:hover, #custom-lock:hover, #custom-power:hover { - border-top: solid 2px currentcolor; - - transition: 130ms; - + border-top: solid 2px red; + transition: 250ms; margin: 0; /* border-radius: 2rem; */ - - font-size: 1.1rem; + font-size: 1.5rem; } - #pulseaudio, #memory, #cpu, @@ -257,14 +167,11 @@ window#waybar.fullscreen { #network, #not-power, #tray { - padding: 4px 8px; + padding: 6px; margin: 0px 4px 0; font-weight: 600; border-top: solid 2px transparent; - 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; + transition: 550ms; } #pulseaudio:hover, @@ -275,8 +182,6 @@ window#waybar.fullscreen { #clock:hover, #network:hover { border-top: solid 2px currentcolor; - 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 + transition: 250ms; +} +