From a1e9ed8be597045ef7b7c0f5f9cb1c359e1c7ffc Mon Sep 17 00:00:00 2001 From: Warren Hood Date: Tue, 5 Mar 2024 17:57:53 +0200 Subject: [PATCH] Update waybar style --- waybar/.config/waybar/style.css | 224 +++++++++++++++++++++++++++----- 1 file changed, 194 insertions(+), 30 deletions(-) diff --git a/waybar/.config/waybar/style.css b/waybar/.config/waybar/style.css index 952ffc8..6659a7a 100644 --- a/waybar/.config/waybar/style.css +++ b/waybar/.config/waybar/style.css @@ -1,41 +1,205 @@ -@import "mocha.css"; +/* ============================================================================= + * + * Waybar configuration + * + * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration + * + * =========================================================================== */ + +/* ----------------------------------------------------------------------------- + * Keyframes + * -------------------------------------------------------------------------- */ + + +/* +Polar Night +nord0 #2e3440 +nord1 #3b4252 +nord2 #434c5e +nord3 #4c566a +Snow Storm +nord4 #d8dee9 +nord5 #e5e9f0 +nord6 #eceff4 +Frost +nord7 #8fbcbb +nord8 #88c0d0 +nord9 #81a1c1 +nord10 #5e81ac +Aurora +nord11 #bf616a +nord12 #d08770 +nord13 #ebcb8b +nord14 #a3be8c +nord15 #b48ead +*/ + +/* ----------------------------------------------------------------------------- + * Base styles + * -------------------------------------------------------------------------- */ + +/* Reset all styles */ * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; - font-size: 13px; - color: @text; -} + color: #eceff4; + border: 1px; + border-radius: 5px; + padding: 0 0; + font-family:JetBrainsMono, SymbolsNerdFont; + font-size: 15px; + margin-right: 2px; + margin-left: 2px; + padding-bottom:2px; + } window#waybar { - background-color: @crust; - border: 2px solid alpha(@mantle, 0.3); - color: #ffffff; - transition-property: background-color; - transition-duration: .5s; + background:#2e3440; + background-color:rgba(43, 45, 50, 0.6); } -#workspaces button.active { - box-shadow: inset 0 -4px @green; - background-color: @overlay1; +#workspaces button { + padding: 2px 8px; + border-bottom: 2px; + color: #eceff4; + border-color: #d8dee9; + border-style: solid; + margin-top:2px; } -#clock, -#battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, +#workspaces button.focused { + border-color: #81a1c1; +} + +#mode { + color: #ebcb8b; +} + +#custom-launcher, #mode, +#window, +#network, +#custom-updates, +#custom-keyboard-layout, +#cpu, +#temperature, +#memory, #idle_inhibitor, -#scratchpad, -#gamemode, -#mpd { - padding: 0 10px; +#backlight, +#pulseaudio, +#battery, +#clock, +#tray, +#custom-power { + padding: 2px 8px; + border: 1px; + border-bottom: 2px; + border-style: solid; + border-radius: 5px; + margin-top: 1px; } + + +/* ----------------------------------------------------------------------------- + * Module styles + * -------------------------------------------------------------------------- */ + + +#custom-launcher { + border-style: hidden; + margin-top:2px; +} + +#mode{ + margin-bottom:3px; +} + +#window{ + border-style: hidden; + margin-top:1px; +} + +#network { + color:#81a1c1; +} + +#network.disabled,#network.disconnected { + color:#bf616a; +} + +#custom-updates{ + color: #ebcb8b; +} + +#custom-keyboard-layout{ + color:#d08770; +} + +#cpu { + color:#a3be8c; +} + +#temperature { + color: #8fbcbb; +} + +#temperature.critical { + color: #bf616a; +} + +#memory { + color: #b48ead; +} + +#idle_inhibitor { + color: #81a1c1; +} + +#backlight { + color: #ebcb8b; +} + +#pulseaudio { + color: #b48ead; +} + +#pulseaudio.muted { + color: #3b4252; +} + +#battery { + color: #d8dee9; +} + +#battery.charging { + color: #81a1c1; +} + +@keyframes blink { + to { + color: #4c566a; + background-color: #eceff4; + } +} + +#battery.critical:not(.charging) { + background: #bf616a; + color: #eceff4; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +#clock { + color: #a3be8c; +} + +#tray { +} + +#custom-power{ + border-style: hidden; + margin-top:2px; +} +