From aca8e5dfe8d930ab1be3575408158e8147b42f11 Mon Sep 17 00:00:00 2001 From: JaKooLit Date: Wed, 15 Nov 2023 17:54:51 +0900 Subject: Waybar rename for easy addition --- config/waybar/style/colorful.css | 258 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 258 insertions(+) create mode 100644 config/waybar/style/colorful.css (limited to 'config/waybar/style/colorful.css') diff --git a/config/waybar/style/colorful.css b/config/waybar/style/colorful.css new file mode 100644 index 00000000..80b3f607 --- /dev/null +++ b/config/waybar/style/colorful.css @@ -0,0 +1,258 @@ +/* ---- 💫 https://github.com/JaKooLit 💫 ---- */ + +* { +font-family: "JetBrainsMono Nerd Font"; +font-weight: bold; +min-height: 0; +/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */ +font-size: 98%; +font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; +padding: 1px; +margin-top: 1px; +margin-bottom: 1px; +} + +window#waybar { + /* Transparent waybar. Make sure to comment out background-color: and border: */ + background-color: rgba(0,0,0,0); + /* background-color: #1e1e2e; */ + /* border: 2px solid #313244; */ + transition-property: background-color; + transition-duration: .5s; +} + +window#waybar.hidden { + opacity: 0.5; +} + +window#waybar.empty { + background-color: transparent; +} + +window#waybar.empty #window { + padding: 0px; + margin: 0px; + border: 0px; + /* background-color: rgba(66,66,66,0.5); */ /* transparent */ + background-color: transparent; +} + +tooltip { + background: #1e1e2e; + opacity: 0.8; + border-radius: 10px; + border-width: 2px; + border-style: solid; + border-color: #11111b; +} + +tooltip label{ + color: #cdd6f4; +} + +#backlight, +#battery, +#bluetooth, +#cava, +#clock, +#cpu, +#disk, +#idle_inhibitor, +#keyboard-state label, +#keyboard-state label.locked, +#keyboard-state, +#memory, +#mode, +#mpd, +#network, +#pulseaudio, +#taskbar button, +#taskbar, +#temperature, +#tray, +#window, +#wireplumber, +#workspaces, +#custom-cycle_wall, +#custom-keybinds, +#custom-light_dark, +#custom-lock, +#custom-menu, +#custom-power_vertical, +#custom-power, +#custom-spotify, +#custom-updater, +#custom-weather, +#custom-weather.clearNight, +#custom-weather.cloudyFoggyDay, +#custom-weather.cloudyFoggyNight, +#custom-weather.default +#custom-weather.rainyDay, +#custom-weather.rainyNight, +#custom-weather.severe, +#custom-weather.showyIcyDay, +#custom-weather.snowyIcyNight, +#custom-weather.sunnyDay { + border-radius: 8px; + margin: 4px 1px; + padding: 0px 4px; + color: #3A3B3C; + border: 1px solid #b4befe; +} + +#backlight { + background-color: #cba6f7; +} + +#taskbar { + color: #ffffff; +} + +#taskbar button.active { + background-color: #7f849c; +} + +#battery { + background-color: #f9e2af; +} + +@keyframes blink { + to { + color: #000000; + } +} + +#battery.critical:not(.charging) { + background-color: #f38ba8; + color: #f38ba8; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +#clock { + background-color: #a6e3a1; +} + +#keyboard-state, +#keyboard-state label, +#keyboard-state label.locked, +#cpu { + background-color: #89dceb; +} + +#memory { + background-color: #eba0ac; +} + +#disk { + background-color: #b4befe; +} + +#tray { + background-color: #b4befe; +} +#tray > .passive { + -gtk-icon-effect: dim; +} +#tray > .needs-attention { + -gtk-icon-effect: highlight; +} + +#workspaces button { + border-radius: 8px; + background-color: #d9e0ee; + color: #3A3B3C; +} + +#workspaces button.active { + background-color: #eba0ac; + color: #3A3B3C; +} + +#taskbar button { + border-radius: 8px; + background-color: #74c7ec; + color: #3A3B3C; +} + +#taskbar button.active { + background-color: #b4befe; + color: #3A3B3C; +} +#custom-menu { + background-color: #f5c2e7; + /*padding: 1px;*/ + padding-right: 10px; + border-radius: 8px; + color: #3A3B3C; + border: 1px solid #b4befe; +} + +#custom-power { + background-color: #f38ba8; +} + +#custom-updater { + background-color: #e6ed7b; +} + +#custom-cycle_wall { + background-color: #94e2d5; +} + +#custom-weather { + background-color: #cba6f7; +} + +#wireplumber { + background-color: #a6e3a1; +} + +#wireplumber.muted { + background-color: #313244; + color: #cdd6f4; +} + +#custom-lock { + background-color: #89dceb; +} + +#temperature { + background-color: #86b4fa; +} + +#custom-power_vertical, +#custom-light_dark, +#idle_inhibitor { + background-color: #86b4fa; +} + +#bluetooth { + background-color: #89dceb; +} +#window { + background-color: #89dceb; +} + +#pulseaudio { + background-color: #fab387; +} + +#pulseaudio.bluetooth { + background-color: #f5c2e7; +} +#pulseaudio.muted { + background-color: #313244; + color: #cdd6f4; +} + +#network { + background-color: #89b4fa; +} +#network.disconnected,#network.disabled { + background-color: #313244; + color: #cdd6f4; +} -- cgit v1.2.3 From e7546019699a80d9055d6c2d3f61c13561ec71a6 Mon Sep 17 00:00:00 2001 From: "Ja.KooLit" Date: Thu, 16 Nov 2023 10:28:50 +0900 Subject: final tweaking --- CHANGELOG.md | 4 +--- config/waybar/style/colorful.css | 1 + config/waybar/style/dark.css | 4 ++++ config/waybar/style/light.css | 4 ++++ config/waybar/style/pywal.css | 19 +++++++++---------- 5 files changed, 19 insertions(+), 13 deletions(-) (limited to 'config/waybar/style/colorful.css') diff --git a/CHANGELOG.md b/CHANGELOG.md index dca12af3..71bb3a1e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -10,9 +10,7 @@

- - - +- more screenshot can be checked [here](https://github.com/JaKooLit/screenshots/tree/main/Hyprland-V2-Screenshots/waybar) ### 13-Nov-2023 - created a separated conf for Laptop (Laptops.conf) in ~/.config/hyp/configs . This was mostly from Keybinds.conf. This is just to easily identity for laptop Keybinds specific. diff --git a/config/waybar/style/colorful.css b/config/waybar/style/colorful.css index 80b3f607..0fab7642 100644 --- a/config/waybar/style/colorful.css +++ b/config/waybar/style/colorful.css @@ -237,6 +237,7 @@ tooltip label{ background-color: #89dceb; } +#custom-keybinds, #pulseaudio { background-color: #fab387; } diff --git a/config/waybar/style/dark.css b/config/waybar/style/dark.css index 289c080c..3015b7e9 100644 --- a/config/waybar/style/dark.css +++ b/config/waybar/style/dark.css @@ -48,6 +48,8 @@ tooltip label { background-color: rgba(0, 0, 0, 0.8); border: 0px solid #b4befe; border-radius: 10px; + padding-right: 2px; + padding-left: 2px; } .modules-center { @@ -60,6 +62,8 @@ tooltip label { background-color: rgba(0, 0, 0, 0.8); border: 0px solid #b4befe; border-radius: 10px; + padding-right: 2px; + padding-left: 2px; } diff --git a/config/waybar/style/light.css b/config/waybar/style/light.css index 6f73d916..1ec890bf 100644 --- a/config/waybar/style/light.css +++ b/config/waybar/style/light.css @@ -48,6 +48,8 @@ tooltip label { background-color: rgba(232, 236, 241, 0.8); border: 0px solid #b4befe; border-radius: 10px; + padding-right: 2px; + padding-left: 2px; } .modules-center { @@ -60,6 +62,8 @@ tooltip label { background-color: rgba(232, 236, 241, 0.8); border: 0px solid #b4befe; border-radius: 10px; + padding-right: 2px; + padding-left: 2px; } diff --git a/config/waybar/style/pywal.css b/config/waybar/style/pywal.css index 06b3e974..59804921 100644 --- a/config/waybar/style/pywal.css +++ b/config/waybar/style/pywal.css @@ -5,7 +5,6 @@ /* --- 👍 designed by https://github.com/Krautt 👍 --- */ @import '../../.cache/wal/colors-waybar.css'; -@import "../waybar/style/catppuccin-themes/latte.css"; * { font-family: "JetBrainsMono Nerd Font"; @@ -49,16 +48,16 @@ tooltip { /*-----module groups----*/ .modules-right { - border: 5px solid @color14; + border: 3px solid @color14; border-radius: 100px 0px 0px 0px; background-color: @color1; - padding-right: 5px; - padding-left: 5px; + padding-right: 2px; + padding-left: 2px; } .modules-center { - border: 5px solid @color14; + border: 3px solid @color14; border-radius: 100px 0px 100px 0px; background-color: @background; @@ -66,9 +65,9 @@ tooltip { } .modules-left { - padding-right: 5px; - padding-left: 5px; - border: 5px solid @color14; + padding-right: 2px; + padding-left: 2px; + border: 3px solid @color14; border-radius: 0px 0px 100px 0px; background-color: @color1; @@ -147,8 +146,8 @@ tooltip { #custom-weather.snowyIcyNight, #custom-weather.sunnyDay { color: @foreground; - padding-right: 10px; - padding-left: 15px; + padding-right: 8px; + padding-left: 12px; } #temperature.critical { -- cgit v1.2.3