diff --git a/.config/waybar/config b/.config/waybar/config index 72e42c1..360d4a0 100644 --- a/.config/waybar/config +++ b/.config/waybar/config @@ -8,9 +8,9 @@ // "width": 1280, // Waybar width "spacing": 4, // Gaps between modules (4px) // Choose the order of the modules - "modules-left": ["hyprland/window", "custom/media"], - "modules-center": ["hyprland/workspaces"], - "modules-right": ["pulseaudio", "cpu", "memory", "temperature", "backlight", "hyprland/language", "battery", "clock", "tray"], + "modules-left": ["hyprland/workspaces"], + "modules-center": ["clock"], + "modules-right": ["pulseaudio", "temperature", "cpu", "memory", "battery", "backlight", "hyprland/language", "tray"], "hyprland/workspaces": { "disable-scroll": false, "all-outputs": false, @@ -38,14 +38,25 @@ "unlocked": "" } }, + "wlr/taskbar": { + "format": "{icon}", + "icon-size": 14, + "on-click": "activate", + }, "tray": { // "icon-size": 21, "spacing": 10 }, "clock": { - // "timezone": "America/New_York", - "tooltip-format": "{:%Y %B}\n{calendar}", - "format-alt": "{:%Y-%m-%d}" + "timezones": ["Europe/Berlin", "Asia/Hong_Kong"], + "tooltip-format": "{tz_list}\n{:%Y %B}\n{calendar}", + "format": "{:%H:%M}", + "format-alt": "{:%Y-%m-%d}", + "actions":{ + "on-scroll-up": "tz_up", + "on-scroll-down": "tz_down", + }, + "smooth-scrolling-threshold": 6.0, }, "cpu": { "format": "{usage}% ", @@ -64,7 +75,7 @@ "format-icons": ["", "", ""] }, "backlight": { - // "device": "acpi_video1", + "device": "intel_backlight", "format": "{percent}%",// {icon}", "format-icons": ["", "", "", "", "", "", "", "", ""] }, diff --git a/.config/waybar/style.css b/.config/waybar/style.css index 11732c9..4d25032 100644 --- a/.config/waybar/style.css +++ b/.config/waybar/style.css @@ -1,21 +1,29 @@ * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: "Hurmit Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif; - font-size: 1.1rem; + /* `otf-font-awesome` is required to be installed for icons */ + font-family: "Hurmit Nerd Font", FontAwesome, Roboto, Helvetica, Arial, + sans-serif; + font-size: 1.1rem; + margin: 0; } window#waybar { - background-color: rgba(43, 48, 59, 0.0); - /*border-bottom: 3px solid rgba(100, 114, 125, 0.5);*/ - color: rgb(204,204,204); - /*padding-top: 2px; - margin-top: 2px;*/ - transition-property: background-color; - transition-duration: .5s; + background-color: rgba(43, 48, 59, 0); + color: rgb(204, 204, 204); + transition-property: background-color; + transition-duration: 0.5s; } window#waybar.hidden { - opacity: 0.0; + opacity: 0; +} + +.modules-left, +.modules-center, +.modules-right { + /*background-color: black; rgba(255, 255, 255, 1);*/ + border: 1px solid; + border-radius: 8px; + padding: 0px; } /* @@ -28,40 +36,54 @@ window#waybar.solo { */ 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: 0px; - border-radius: 0px; + /* 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: 0px; + border-radius: 0px; } /* 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; + background: inherit; + box-shadow: inset 0 3px #ffffff; } #workspaces button { - padding: 0 5px; - border: 1px solid transparent; /*avoid jumping by always having a border*/ - background-color: transparent; - color: #ffffff; - border-radius: 8px; - transition: linear .1s; + padding: 2px 5px 0px 5px; + border: 1px solid transparent; /*avoid jumping by always having a border*/ + background-color: transparent; + color: #ffffff; + border-radius: 8px; +} + +#workspaces button, +#workspaces button.empty, +#workspaces button.active, +#workspaces button.special, +#workspaces button.special.empty, +#workspaces button.special.active { + background-color: transparent; + transition: linear 0.1s; +} + +#workspaces button.urgent, +#workspaces button.special.urgent { + background-color: rgba(250, 17, 55, 0.6); } #workspaces button.empty { - color: rgba(255, 255, 255, .4); + color: rgba(255, 255, 255, 0.4); } #workspaces button:hover { - border: 1px solid rgba(40, 220, 255, 0.8); - box-shadow: inset 0 0 0 0 transparent; - transition: linear 0s; + border: 1px solid rgba(40, 220, 255, 0.8); + box-shadow: inset 0 0 0 0 transparent; + padding: 0px 5px 2px 5px; } #workspaces button.active { - color: rgba(40, 240, 255, 0.9); - transition: linear .1s; + color: rgba(40, 240, 255, 0.9); + padding: 1px 5px 1px 5px; } /*#workspaces button.active { @@ -69,25 +91,16 @@ button:hover { padding-top: 1px; }*/ -#workspaces button.special.active, -#workspaces button.special { - background-color: transparent; -} - -#workspaces button.urgent { - background-color: rgba(250, 17, 55, 0.6); -} - #workspaces { - background-color: rgba(255, 255, 255, .1); - border: 1px solid; - border-radius: 8px; - padding: 1px; + background-color: rgba(255, 255, 255, 0.1); + /*border: 1px solid;*/ + border-radius: 8px; + padding: 1px; } #mode { - background-color: #64727D; - /*border-bottom: 3px solid #ffffff;*/ + background-color: #64727d; + /*border-bottom: 3px solid #ffffff;*/ } #clock, @@ -107,70 +120,75 @@ button:hover { #scratchpad, #language, #mpd { - padding: 0 8px; - color: #909090; - border-radius: 0px; - border-top: 1rem; - border: solid; + padding: 0 8px; + color: #909090; + border-radius: 0px; + border-top: 1rem; + border: solid; + margin: 0px; + border-bottom: 0rem; } #backlight, #battery, #clock, #tray { - color: #eeeeee; + color: #eeeeee; } -#window, +/*#window, #workspaces { - margin: 0 4px; -} + margin: 0 4px; +}*/ /* If workspaces is the leftmost module, omit left margin */ .modules-left > widget:first-child > #workspaces { - margin-left: 0; + margin-left: 0; } /* If workspaces is the rightmost module, omit right margin */ .modules-right > widget:last-child > #workspaces { - margin-right: 0; + margin-right: 0; } #clock { - background-color: #64727D; - border-radius: 5px; - margin: 2px 0; + font-weight: bold; + font-size: 1.2rem; + background-color: rgba(255, 255, 255, 0.1); + border-radius: 8px; + margin: 0; } -#battery { - border-top: 2px #ffffff; -} - -#battery.charging, #battery.plugged { - background-color: #26A65B; +#battery.charging, +#battery.plugged { + background-color: #26a65b; } @keyframes blink { - to { - background-color: #ffffff; - } + to { + background-color: #ffffff; + } } #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; + 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; + background-color: #000000; } -#cpu { - border-top: solid 2px #1de8d1; +#cpu, +#battery, +#temperature, +#memory { + border-top: solid 2px #1de8d1; + margin: 0; } /*#memory { @@ -178,123 +196,117 @@ label:focus { }*/ #disk { - background-color: #964B00; + background-color: #964b00; } #backlight { - border-top: solid 2px #d1f2f2; + border-top: solid 2px #d1f2f2; } #network { - border-top: solid 2px #2980b9; + border-top: solid 2px #2980b9; } #network.disconnected { - border-top: 2px #f53c3c; + border-top: 2px #f53c3c; } #pulseaudio { - border-top: 2px #f1c40f; - color: #1acbc4; + border-top: 2px #f1c40f; + color: #1acbc4; } #pulseaudio.muted { - border-top: 2px #90b1b1; - color: #01534c; + border-top: 2px #90b1b1; + color: #01534c; } #wireplumber { - color: #000000; + color: #000000; } #custom-media { - /*background-color: #66cc99;*/ - color: #2a5c45; - min-width: 100px; + /*background-color: #66cc99;*/ + color: #2a5c45; + min-width: 100px; } #custom-media.custom-spotify { - /*background-color: #66cc99;*/ + /*background-color: #66cc99;*/ } #custom-media.custom-vlc { - /*background-color: #ffa000;*/ -} - -#temperature { - border-top: 2px #f0932b; + /*background-color: #ffa000;*/ } #temperature.critical { - background-color: #eb4d4b; + background-color: #eb4d4b; } #tray { - border-top: 2px #2980b9; + border-top: 2px #2980b9; } #tray > .passive { - -gtk-icon-effect: dim; + -gtk-icon-effect: dim; } #tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; + -gtk-icon-effect: highlight; + background-color: #eb4d4b; } #idle_inhibitor { - background-color: #2d3436; + background-color: #2d3436; } #idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; + background-color: #ecf0f1; + color: #2d3436; } #mpd { - background-color: #66cc99; - color: #2a5c45; + background-color: #66cc99; + color: #2a5c45; } #mpd.disconnected { - background-color: #f53c3c; + background-color: #f53c3c; } #mpd.stopped { - background-color: #90b1b1; + background-color: #90b1b1; } #mpd.paused { - background-color: #51a37a; + background-color: #51a37a; } #language { - border-top: 2px #df73cf; - color: #909090; - padding: 0 5px; - margin: 0 5px; - min-width: 16px; + border-top: 2px #df73cf; + color: #909090; + padding: 0 5px; + min-width: 16px; } #keyboard-state { - border-top: 2px #97e1ad; - padding: 0 0px; - margin: 0 5px; - min-width: 16px; + border-top: 2px #97e1ad; + padding: 0 0px; + min-width: 16px; } #keyboard-state > label { - padding: 0 5px; + padding: 0 5px; } #keyboard-state > label.locked { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); } #scratchpad { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.2); } #scratchpad.empty { - background-color: transparent; + background-color: transparent; }