From 9c3c8eb04dcf846a54bc451424dfc8800f918f1d Mon Sep 17 00:00:00 2001 From: JaKooLit Date: Mon, 20 Nov 2023 12:16:04 +0900 Subject: [PATCH] Tweaked waybar styles --- config/waybar/style/Black & White.css | 42 ++- config/waybar/style/Catppuccin-Latte.css | 54 ++- config/waybar/style/Catppuccin-Mocha.css | 54 ++- config/waybar/style/Colored (Bordered).css | 40 ++- config/waybar/style/Colored (Lined).css | 47 ++- config/waybar/style/Colored.css | 51 ++- config/waybar/style/Colorful.css | 43 ++- config/waybar/style/Crimson.css | 36 +- config/waybar/style/Dark.css | 34 ++ config/waybar/style/Golden Noir.css | 38 +- config/waybar/style/Light.css | 38 +- config/waybar/style/Purpl.css | 36 +- config/waybar/style/Pywal.css | 36 +- config/waybar/style/Rose-Pine.css | 2 + config/waybar/style/Simple Pink.css | 46 ++- config/waybar/style/Transparent.css | 387 +++++++++++---------- 16 files changed, 725 insertions(+), 259 deletions(-) diff --git a/config/waybar/style/Black & White.css b/config/waybar/style/Black & White.css index 30e536c..250f44c 100644 --- a/config/waybar/style/Black & White.css +++ b/config/waybar/style/Black & White.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Black and White */ * { font-family: "JetBrainsMono Nerd Font"; @@ -8,8 +9,8 @@ min-height: 0; font-size: 98%; font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; padding: 1px; -margin-top: 1px; -margin-bottom: 1px; +margin-left: 4px; +margin-right: 4px; } window#waybar { @@ -79,12 +80,25 @@ tooltip label{ } /*-----modules indv----*/ #workspaces button { - padding: 0px 0px; background-color: transparent; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button:hover { - box-shadow: inherit; + color: grey; background-color: rgba(0,153,153,0); + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -93,7 +107,12 @@ tooltip label{ #workspaces button.active { color: white; background-color: rgba(191, 191, 191,0.1); - /*box-shadow:inherit;*/ + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #backlight, @@ -184,6 +203,19 @@ tooltip label{ #taskbar button.active { background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #waybar.empty, #waybar.tiled, #waybar.floating { background-color: transparent; diff --git a/config/waybar/style/Catppuccin-Latte.css b/config/waybar/style/Catppuccin-Latte.css index 6419148..06cfc37 100644 --- a/config/waybar/style/Catppuccin-Latte.css +++ b/config/waybar/style/Catppuccin-Latte.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Catppuccin Latte */ * { font-family: "JetBrainsMono Nerd Font"; @@ -8,8 +9,8 @@ min-height: 0; font-size: 98%; font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; padding: 1px; -margin-top: 1px; -margin-bottom: 1px; +margin-left: 4px; +margin-right: 4px; } @import "../waybar/style/catppuccin-themes/latte.css"; @@ -157,15 +158,26 @@ window#waybar.hidden { } #workspaces button { - border-radius: 5px; - /*margin: 3px;*/ - /*padding: 1px;*/ + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button:hover { - border-radius: 5px; - color: @overlay0; - background-color: @surface0; + border-radius: 8px; + color: @overlay0; + background-color: @surface0; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.persistent { @@ -174,8 +186,14 @@ window#waybar.hidden { } #workspaces button.active { - color: @peach; - border-radius: 0px; + color: @peach; + border-radius: 8px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.urgent { @@ -183,6 +201,22 @@ window#waybar.hidden { border-radius: 0px; } +#taskbar button.active { + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + #custom-menu { color: @rosewater; } diff --git a/config/waybar/style/Catppuccin-Mocha.css b/config/waybar/style/Catppuccin-Mocha.css index 856271e..3b21951 100644 --- a/config/waybar/style/Catppuccin-Mocha.css +++ b/config/waybar/style/Catppuccin-Mocha.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Catppuccin Latte */ * { font-family: "JetBrainsMono Nerd Font"; @@ -155,25 +156,42 @@ window#waybar.hidden { } #workspaces button { - border-radius: 5px; - /*margin: 3px;*/ - /*padding: 1px;*/ + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button:hover { - border-radius: 5px; - color: @overlay0; - background-color: @surface0; + border-radius: 8px; + color: @overlay0; + background-color: @surface0; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.persistent { - color: @surface1; - border-radius: 0px; + color: @surface1; + border-radius: 0px; } #workspaces button.active { - color: @peach; - border-radius: 0px; + color: @peach; + border-radius: 8px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.urgent { @@ -181,6 +199,22 @@ window#waybar.hidden { border-radius: 0px; } +#taskbar button.active { + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + #custom-menu { color: @rosewater; } diff --git a/config/waybar/style/Colored (Bordered).css b/config/waybar/style/Colored (Bordered).css index 4aaef8e..d7e5ab4 100644 --- a/config/waybar/style/Colored (Bordered).css +++ b/config/waybar/style/Colored (Bordered).css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Colored - Bordered */ * { font-family: "JetBrainsMono Nerd Font"; @@ -51,14 +52,18 @@ tooltip label{ color: #cdd6f4; } #workspaces button { - padding: 0 0px; color: #7984a4; background-color: transparent; - /* Use box-shadow instead of border so the text isn't offset */ - box-shadow: inset 0 -3px transparent; - /* Avoid rounded borders under each workspace name */ - border: none; - border-radius: 0; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -66,9 +71,19 @@ tooltip label{ } #workspace button.hover { background-color: transparent; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: white; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.urgent { @@ -326,4 +341,17 @@ label:focus { #taskbar button.active { background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } diff --git a/config/waybar/style/Colored (Lined).css b/config/waybar/style/Colored (Lined).css index c5e11e8..db44691 100644 --- a/config/waybar/style/Colored (Lined).css +++ b/config/waybar/style/Colored (Lined).css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Colored Line */ * { font-family: "JetBrainsMono Nerd Font"; @@ -8,8 +9,8 @@ min-height: 0; font-size: 98%; font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; padding: 1px; -margin-top: 1px; -margin-bottom: 1px; +margin-left: 4px; +margin-right: 4px; } window#waybar { @@ -18,16 +19,37 @@ window#waybar { } #workspaces button { - /*padding: 2px 0px;*/ - border-bottom: 1px; color: #eceff4; border-color: #d8dee9; border-style: solid; margin-top:2px; + margin-bottom: 3px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { border-color: #81a1c1; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#workspaces button:hover { + background-color: rgba(0,153,153,0); + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #backlight, @@ -176,4 +198,21 @@ window#waybar { color:#d08770; } +#taskbar button.active { + background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + diff --git a/config/waybar/style/Colored.css b/config/waybar/style/Colored.css index 2bae4fb..1e6d06a 100644 --- a/config/waybar/style/Colored.css +++ b/config/waybar/style/Colored.css @@ -13,6 +13,7 @@ @define-color accent6 #0db9d7; /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* colored */ * { font-family: "JetBrainsMono Nerd Font"; @@ -66,31 +67,37 @@ tooltip label{ } #workspaces button { - padding: 0 0 0 0; - margin: 0 0 0 0; background-color: transparent; color: #ffffff; - /*min-width: 36px;*/ - /* Use box-shadow instead of border so the text isn't offset */ - /* box-shadow: inset 0 -3px transparent;*/ - /* border-radius: 0px; */ + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { - padding: 0 0 0 0; - margin: 0 0 0 0; background-color: transparent; color: #D3D3D3; - /*min-width: 36px;*/ - /* Use box-shadow instead of border so the text isn't offset */ - /* box-shadow: inset 0 -3px transparent;*/ - /* border-radius: 0px; */ + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } -/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ #workspaces button:hover { background: rgba(0, 0, 0, 0.2); - /* box-shadow: inset 0 -3px #ffffff; */ + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -152,9 +159,6 @@ tooltip label{ #custom-weather.snowyIcyNight, #custom-weather.sunnyDay { padding: 0px 10px; - /*margin: 4px 3px 5px 3px;*/ - /*color: @fgcolor;*/ - /* background-color: #bbccdd; */ background-color:transparent; } @@ -308,6 +312,19 @@ label:focus { #taskbar button.active { background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #mpd { diff --git a/config/waybar/style/Colorful.css b/config/waybar/style/Colorful.css index 0fab764..c0ad5ab 100644 --- a/config/waybar/style/Colorful.css +++ b/config/waybar/style/Colorful.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Colorful */ * { font-family: "JetBrainsMono Nerd Font"; @@ -162,14 +163,36 @@ tooltip label{ } #workspaces button { - border-radius: 8px; background-color: #d9e0ee; color: #3A3B3C; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { background-color: #eba0ac; color: #3A3B3C; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#workspaces button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #taskbar button { @@ -181,7 +204,21 @@ tooltip label{ #taskbar button.active { background-color: #b4befe; color: #3A3B3C; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } + #custom-menu { background-color: #f5c2e7; /*padding: 1px;*/ @@ -224,6 +261,10 @@ tooltip label{ background-color: #86b4fa; } +#temperature.critical { + background-color: red; +} + #custom-power_vertical, #custom-light_dark, #idle_inhibitor { diff --git a/config/waybar/style/Crimson.css b/config/waybar/style/Crimson.css index cc67bf9..13c37b3 100644 --- a/config/waybar/style/Crimson.css +++ b/config/waybar/style/Crimson.css @@ -61,13 +61,29 @@ tooltip { #workspaces button { color: wheat; - padding: 5px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: rgb(108, 18, 18); background-color: #000000; border: 1px solid grey; + border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -82,6 +98,11 @@ tooltip { #workspaces button:hover { color: rgb(71, 14, 14); background-color: #000000; + border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } @@ -146,6 +167,19 @@ tooltip { #taskbar button.active { background-color: rgb(128, 31, 31); border: 1px solid grey; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#workspaces button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Dark.css b/config/waybar/style/Dark.css index 3015b7e..489c120 100644 --- a/config/waybar/style/Dark.css +++ b/config/waybar/style/Dark.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Dark */ * { font-family: "JetBrainsMono Nerd Font"; @@ -69,11 +70,27 @@ tooltip label { #workspaces button { color: #6E6A86; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: #cba6f7; border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -88,6 +105,10 @@ tooltip label { #workspaces button:hover { color: #9CCFD8; border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #backlight, @@ -150,6 +171,19 @@ tooltip label { #taskbar button.active { background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Golden Noir.css b/config/waybar/style/Golden Noir.css index 42dfe7b..01da284 100644 --- a/config/waybar/style/Golden Noir.css +++ b/config/waybar/style/Golden Noir.css @@ -46,7 +46,7 @@ tooltip { border-width: 2px; border-style: solid; border-color: #11111b; - color: #cba6f7; + color: #ffd700; } /*-----module groups----*/ @@ -71,15 +71,30 @@ tooltip { } #workspaces button { - padding: 2px; color: #6E6A86; - margin-right: 5px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: #ffd700; border-radius: 50%; background-color: black; + border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -94,6 +109,10 @@ tooltip { #workspaces button:hover { color: #ffd700; border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #clock#2 { @@ -159,6 +178,19 @@ tooltip { #taskbar button.active { background-color: rgb(47, 46, 46); + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Light.css b/config/waybar/style/Light.css index 1ec890b..9f58bda 100644 --- a/config/waybar/style/Light.css +++ b/config/waybar/style/Light.css @@ -1,4 +1,5 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Light */ * { font-family: "JetBrainsMono Nerd Font"; @@ -69,11 +70,27 @@ tooltip label { #workspaces button { color: #585b70; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: #000000; - border-radius: 15px 15px 15px 15px; + border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -87,7 +104,11 @@ tooltip label { #workspaces button:hover { color: #000000; - border-radius: 15px; + border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #backlight, @@ -151,6 +172,19 @@ tooltip label { #taskbar button.active { background-color: #585b70; color: #cdd6f4; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Purpl.css b/config/waybar/style/Purpl.css index 9598ae6..b590464 100644 --- a/config/waybar/style/Purpl.css +++ b/config/waybar/style/Purpl.css @@ -74,15 +74,30 @@ tooltip { } #workspaces button { - padding: 2px; color: #6E6A86; margin-right: 5px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: #cba6f7; border-radius: 50%; background-color: black; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.focused { @@ -96,7 +111,11 @@ tooltip { #workspaces button:hover { color: #9CCFD8; - border-radius: 15px; + border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #backlight, @@ -158,6 +177,19 @@ tooltip { #taskbar button.active { background-color: purple; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Pywal.css b/config/waybar/style/Pywal.css index 7a50f8a..c5ef347 100644 --- a/config/waybar/style/Pywal.css +++ b/config/waybar/style/Pywal.css @@ -1,8 +1,5 @@ /* ----------- 💫 https://github.com/JaKooLit 💫 -------- */ -/* ...........................................*/ -/* ...............Golden Noir................ */ -/* .......................................... */ -/* --- 👍 designed by https://github.com/Krautt 👍 --- */ +/* pywal */ @import '../../.cache/wal/colors-waybar.css'; @@ -74,17 +71,26 @@ tooltip { } #workspaces button { - padding: 2px; color: @foreground; - margin-right: 5px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; animation: gradient_f 20s ease-in infinite; transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: @foreground; - border-radius: 40%; background-color: @color0; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; animation: gradient_f 20s ease-in infinite; transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } @@ -100,7 +106,8 @@ tooltip { #workspaces button:hover { color: @color4; - border-radius: 15px; + padding-left: 3px; + padding-right: 3px; animation: gradient_f 20s ease-in infinite; transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } @@ -168,6 +175,19 @@ tooltip { #taskbar button.active { background-color: rgb(47, 46, 46); + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Rose-Pine.css b/config/waybar/style/Rose-Pine.css index 7d9f79c..9f10d82 100644 --- a/config/waybar/style/Rose-Pine.css +++ b/config/waybar/style/Rose-Pine.css @@ -1,4 +1,6 @@ /* ---- 💫 https://github.com/JaKooLit 💫 ---- */ +/* Rose Pine */ + @define-color bar-bg rgba(0, 0, 0, 0); @define-color main-bg #26233a; diff --git a/config/waybar/style/Simple Pink.css b/config/waybar/style/Simple Pink.css index d2a85d7..284b6d5 100644 --- a/config/waybar/style/Simple Pink.css +++ b/config/waybar/style/Simple Pink.css @@ -44,7 +44,7 @@ tooltip { border-width: 2px; border-style: solid; border-color: #11111b; - color: #cba6f7; + color: pink; } /*-----module groups----*/ @@ -71,11 +71,27 @@ tooltip { #workspaces button { color: pink; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); } #workspaces button.active { color: whitesmoke; - + border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } @@ -91,16 +107,14 @@ tooltip { #workspaces button:hover { color: #ba5663; background-color: #0d0a0d; + border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } -#taskbar button:hover { - color: #ba5663; - background-color: #0d0a0d; -} - - - #backlight, #battery, #bluetooth, @@ -162,7 +176,21 @@ tooltip { #taskbar button.active { background-color: pink; border: 1px solid #22252a; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} +#taskbar button:hover { + color: #ba5663; + background-color: #0d0a0d; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); } #battery.critical:not(.charging) { diff --git a/config/waybar/style/Transparent.css b/config/waybar/style/Transparent.css index 569787b..60b8341 100644 --- a/config/waybar/style/Transparent.css +++ b/config/waybar/style/Transparent.css @@ -12,194 +12,219 @@ font-size: 98%; font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"'; padding: 1px; - } - - window#waybar { - background:transparent; - border-radius: 1px; - color: whitesmoke; - } - - 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; - } - +} + +window#waybar { + background:transparent; + border-radius: 1px; + color: whitesmoke; +} + +window#waybar.hidden { + opacity: 0.5; +} +window#waybar.empty { + background-color: transparent; +} + +window#waybar.empty #window { + padding: 0px; + margin: 0px; + border: 0px; + background-color: transparent; +} - tooltip { - background: #1e1e2e; - border-radius: 10px; - border-width: 2px; - border-style: solid; - border-color: #11111b; - color: #cba6f7; - } - /*-----module groups----*/ - .modules-right { - - } - - .modules-center { - - - - } - - .modules-left { - - - } +tooltip { + background: #1e1e2e; + border-radius: 10px; + border-width: 2px; + border-style: solid; + border-color: #11111b; + color: #cba6f7; +} + +/*-----module groups----*/ +.modules-right { - #workspaces button { - padding: 2px; - color: #6E6A86; - margin-right: 5px; - } - - #workspaces button.active { - color: whitesmoke; +} + +.modules-center { - } - - #workspaces button.focused { - color: #d8dee9; - } +} + +.modules-left { - #workspaces button.urgent { - color: #11111b; - border-radius: 10px; - } - - #workspaces button:hover { - color: whitesmoke; - - } - +} - - #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 { - color:whitesmoke; - padding: 0px 10px; - - } - - #temperature.critical { - background-color: #ff0000; - } +#workspaces button { + color: #6E6A86; + margin-right: 5px; + box-shadow: none; + text-shadow: none; + padding: 0px; + border-radius: 9px; + margin-top: 3px; + margin-bottom: 3px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682); +} + +#workspaces button.active { + color: whitesmoke; + border-radius: 15px 15px 15px 15px; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#workspaces button.focused { + color: #d8dee9; +} + +#workspaces button.urgent { + color: #11111b; + border-radius: 10px; +} - @keyframes blink { - to { - color: #000000; - } - } +#workspaces button:hover { + color: whitesmoke; + border-radius: 15px; + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#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 { + color:whitesmoke; + padding: 0px 10px; + +} + +#temperature.critical { + background-color: #ff0000; +} + +@keyframes blink { + to { + color: #000000; + } +} +#taskbar button:hover { + padding-left: 3px; + padding-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} + +#taskbar button.active { + background-color: #7f849c; + margin-left: 3px; + padding-left: 12px; + padding-right: 12px; + margin-right: 3px; + animation: gradient_f 20s ease-in infinite; + transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682); +} - #taskbar button.active { - background-color: #7f849c; - } - - #battery.critical:not(.charging) { - color: #f53c3c; - animation-name: blink; - animation-duration: 0.5s; - animation-timing-function: linear; - animation-iteration-count: infinite; - animation-direction: alternate; - } - - #pulseaudio-slider slider { - min-width: 0px; - min-height: 0px; - opacity: 0; - background-image: none; - border: none; - box-shadow: none; - } - - #pulseaudio-slider trough { - min-width: 80px; /* Ajusta el ancho según tus preferencias */ - min-height: 10px; /* Ajusta la altura según tus preferencias */ - border-radius: 5px; - background-color: black; - } - - #pulseaudio-slider highlight { - min-height: 10px; /* Ajusta la altura según tus preferencias */ - border-radius: 5px; - background-color: wheat; - } +#battery.critical:not(.charging) { + color: #f53c3c; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} - #backlight-slider slider { - min-width: 0px; - min-height: 0px; - opacity: 0; - background-image: none; - border: none; - box-shadow: none; - } - - #backlight-slider trough { - min-width: 80px; /* Ajusta el ancho según tus preferencias */ - min-height: 10px; /* Ajusta la altura según tus preferencias */ - border-radius: 5px; - background-color: black; - } - - #backlight-slider highlight { - min-width: 10px; /* Ajusta el ancho según tus preferencias */ - border-radius: 5px; - background-color: wheat; - } +#pulseaudio-slider slider { + min-width: 0px; + min-height: 0px; + opacity: 0; + background-image: none; + border: none; + box-shadow: none; +} + +#pulseaudio-slider trough { + min-width: 80px; /* Ajusta el ancho según tus preferencias */ + min-height: 10px; /* Ajusta la altura según tus preferencias */ + border-radius: 5px; + background-color: black; +} + +#pulseaudio-slider highlight { + min-height: 10px; /* Ajusta la altura según tus preferencias */ + border-radius: 5px; + background-color: wheat; +} + +#backlight-slider slider { + min-width: 0px; + min-height: 0px; + opacity: 0; + background-image: none; + border: none; + box-shadow: none; +} + +#backlight-slider trough { + min-width: 80px; /* Ajusta el ancho según tus preferencias */ + min-height: 10px; /* Ajusta la altura según tus preferencias */ + border-radius: 5px; + background-color: black; +} + +#backlight-slider highlight { + min-width: 10px; /* Ajusta el ancho según tus preferencias */ + border-radius: 5px; + background-color: wheat; +} \ No newline at end of file