diff options
| author | krolxon <krolyxon@tutanota.com> | 2025-08-16 20:49:05 +0530 |
|---|---|---|
| committer | krolxon <krolyxon@tutanota.com> | 2025-08-16 20:49:05 +0530 |
| commit | f3bdd21020b8e618433a06c1efc1cc665cb6839d (patch) | |
| tree | 32427d47c079637b670a20b62e0339df0e248641 /.config/waybar/style.css | |
first commit using stow
Diffstat (limited to '.config/waybar/style.css')
| -rw-r--r-- | .config/waybar/style.css | 272 |
1 files changed, 272 insertions, 0 deletions
diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..1e0c6bf --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,272 @@ +/* +* +* 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; + +* { +font-family: "Fira Code", "FontAwesome"; +font-weight: bold; +min-height: 0; +/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */ +font-size: 97%; +font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; +padding: 0.03125rem; +} + +window#waybar { + transition-property: background-color; + transition-duration: 0.5s; + background: transparent; + /*border: 2px solid @overlay0;*/ + /*background: @theme_base_color;*/ + border-radius: 10px; +} + +window#waybar.hidden { + opacity: 0.2; +} + +#waybar.empty #window { + background: none; +} + + +/**************/ +/* Workspaces */ +/**************/ + +#workspaces { + /* border-radius: 8px; */ + padding: 0 3px 0 8px; + margin: 5px 5px 5px 0; + transition: all 0.2s ease; +} + +/* non-empty workspaces */ +#workspaces button { + background-color: @base; + + border: none; + border-radius: 0; + + color: @text; + transition: all 0.2s ease; + text-shadow: none; + + /* center the icon, no clue why this is necessary */ + padding-left: 5px; + padding-right: 10px; + padding-top: 1px; + + box-shadow: inset 0 -1px #e3e3e3; +} + +/* the first and last buttons should be rounded */ +#workspaces button:first-child { + border-top-left-radius: 8px; + border-bottom-left-radius: 8px; +} +#workspaces button:last-child { + border-top-right-radius: 8px; + border-bottom-right-radius: 8px; +} + +/* empty persistent workspaces */ +#workspaces button.empty { + background-color: @base; + box-shadow: none; +} + +#workspaces button:hover { + /* transition-duration: .3s; */ + color: @base; + background-color: #7da6ff; + box-shadow: inset 0 -1px #ffffff; + /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ + text-shadow: inherit; +} + +/* non-empty persistent workspaces */ +#workspaces button.persistent { + background-color: #4c566a; +} + + + +/* active or visible workspaces */ +#workspaces button.active, +#workspaces button.visible { + /* background-color: #4c566a; */ + color: @surface0; + background-color: #7da6ff; + /* box-shadow: inset 0 -4px #eceff4; */ +} + +#workspaces button.urgent { + color: #bf616a; +} + +/**************/ + +#mode { + background-color: #64727D; + border-bottom: 3px solid #ffffff; +} + +#clock, +#custom-date, +#custom-gpumode, +#battery, +#backlight, +#cpu, +#memory, +#disk, +#temperature, +#network, +#pulseaudio, +#wireplumber, +#mpris, +#custom-media, +#tray, +#window, +#custom-notification, +#mpd { + background-color: @base; + border-radius: 8px; + padding: 0 12px 0 12px; + margin: 5px 5px 5px 0; +} + +/* If workspaces is the leftmost module, omit left margin */ +.modules-left>widget:first-child>#workspaces { + margin-left: 0; +} + +/* If workspaces is the rightmost module, omit right margin */ +.modules-right>widget:last-child>#workspaces { + margin-right: 0; +} + +#window { + color: @text +} + +#clock { + color: #eceff4; +} + +#custom-date { + color: #b48ead; +} + +#battery { + color: #ebcb8b; +} + +#backlight { + color: @teal +} + +@keyframes blink { + to { + background-color: #ffffff; + color: black; + } +} + +#battery.critical:not(.charging) { + background-color: #bf616a; + color: #ffffff; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: black; +} + +#cpu { + color: #bf616a; +} + +#memory { + color: #a3be8c; +} + +/* #disk { + background-color: #964B00; +} */ + +#network { + color: #5e81ac; +} + +#network.disconnected { + color: #81a1c1; +} + +#network.linked { + color: #bf616a; +} + +#pulseaudio { + color: @text; +} + + +#temperature { + color: #d08770; +} + +#temperature.critical { + color: #bf616a; +} + +#tray { + color: @subtext0; + +} + +#tray>.passive { + -gtk-icon-effect: dim; +} + +#tray>.needs-attention { + -gtk-icon-effect: highlight; + background-color: #bf616a; +} |
