diff options
Diffstat (limited to '.config/waybar/style.css')
| -rw-r--r-- | .config/waybar/style.css | 434 |
1 files changed, 434 insertions, 0 deletions
diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..348bb04 --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,434 @@ +/* +@import "catppuccin/mocha.css"; +*/ + +/* +* Catppuccin Mocha palette +*/ + +@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 rgba(22, 25, 37, 0.9); +@define-color surface1 #45475a; +@define-color surface2 #585b70; +@define-color surface3 #394161; + +@define-color overlay0 #6c7086; +@define-color overlay1 #7f849c; +@define-color overlay2 #9ba3c3; + +@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; + +/* =============================== */ +/* Universal Styling */ +* { + border: none; + border-radius: 0; + font-family: 'CaskaydiaCove Nerd Font', monospace; + font-size: 13px; + min-height: 0; +} + +/* =============================== */ + + +/* =============================== */ +/* Bar Styling */ +#waybar { + background: transparent; + color: @text; +} + +/* =============================== */ + + +/* =============================== */ +/* Main Modules */ +#custom-launcher, +#workspaces, +#window, +#tray, +#backlight, +#clock, +#battery, +#pulseaudio, +#network, +#mpd, +#cpu, +#memory, +#disk, +#temperature, +#custom-music, +#custom-updates, +#custom-nordvpn, +#custom-notifications, +#custom-power, +#custom-custom, +#custom-cycle_wall, +#custom-clipboard, +#custom-ss, +#custom-weather { + background-color: @surface0; + color: @text; + border-radius: 16px; + padding: 0.5rem 1rem; + box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px; + margin-top: 10px; + /* + margin-bottom: 10px; +*/ + margin-right: 10px; +} + +/* =============================== */ +/* Launcher Module */ +#custom-launcher { + color: @green; + padding-top: 0px; + padding-bottom: 0px; + padding-right: 10px; +} + +/* =============================== */ +/* Workspaces */ +#workspaces { + padding-left: 8px; + padding-right: 8px; +} + +#workspaces * { + font-size: 0px; +} + +#workspaces button { + background-color: @surface3; + color: @mauve; + border-radius: 100%; + min-height: 14px; + min-width: 14px; + margin: 5px 8px; + padding: 0px; + /*transition: all 0.5s cubic-bezier(0.33, 1.0, 0.68, 1.0); easeInOutCubic */ + transition: all 0.5s cubic-bezier(.55, -0.68, .48, 1.68); + box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px; +} + +#workspaces button.active { + /*color: @surface0; + border-radius: 1rem; + padding: 0rem 10px;*/ + background: radial-gradient(circle, rgba(203, 166, 247, 1) 0%, rgba(193, 168, 247, 1) 12%, rgba(249, 226, 175, 1) 19%, rgba(189, 169, 247, 1) 20%, rgba(182, 171, 247, 1) 24%, rgba(198, 255, 194, 1) 36%, rgba(177, 172, 247, 1) 37%, rgba(170, 173, 248, 1) 48%, rgba(255, 255, 255, 1) 52%, rgba(166, 174, 248, 1) 52%, rgba(160, 175, 248, 1) 59%, rgba(148, 226, 213, 1) 66%, rgba(155, 176, 248, 1) 67%, rgba(152, 177, 248, 1) 68%, rgba(205, 214, 244, 1) 77%, rgba(148, 178, 249, 1) 78%, rgba(144, 179, 250, 1) 82%, rgba(180, 190, 254, 1) 83%, rgba(141, 179, 250, 1) 90%, rgba(137, 180, 250, 1) 100%); + background-size: 400% 400%; + animation: gradient_f 20s ease-in-out infinite; + transition: all 0.3s cubic-bezier(.55, -0.68, .48, 1.682); +} + +#workspaces button:hover { + background-color: @mauve; +} + +@keyframes gradient { + 0% { + background-position: 0% 50%; + } + + 50% { + background-position: 100% 30%; + } + + 100% { + background-position: 0% 50%; + } +} + +@keyframes gradient_f { + 0% { + background-position: 0% 200%; + } + + 50% { + background-position: 200% 0%; + } + + 100% { + background-position: 400% 200%; + } +} + +@keyframes gradient_f_nh { + 0% { + background-position: 0% 200%; + } + + 100% { + background-position: 200% 200%; + } +} + +/* =============================== */ + + +/* =============================== */ +/* System Monitoring Modules */ +#cpu, +#memory, +#temperature { + color: @blue; +} + +#cpu { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: 0px; + padding-right: 5px; +} + +#memory { + border-radius: 0px; + margin-right: 0px; + padding-left: 5px; + padding-right: 5px; +} + +#temperature { + border-radius: 0px; + margin-right: 0px; + padding-left: 5px; + padding-right: 5px; +} + +#disk { + color: @peach; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 5px; + padding-right: 1rem; +} + +/* Updates Module */ +#custom-updates { + color: @sky; +} + +/* =============================== */ + + +/* =============================== */ +/* Clock Module */ +#clock { + color: @flamingo; +} + +/* =============================== */ + + +#custom-music.low { + background: rgb(148, 226, 213); + background: linear-gradient(52deg, rgba(148, 226, 213, 1) 0%, rgba(137, 220, 235, 1) 19%, rgba(116, 199, 236, 1) 43%, rgba(137, 180, 250, 1) 56%, rgba(180, 190, 254, 1) 80%, rgba(186, 187, 241, 1) 100%); + background-size: 300% 300%; + text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377); + animation: gradient 15s ease infinite; + font-weight: bold; + color: #fff; +} + +#custom-music.random { + background: rgb(148, 226, 213); + background: radial-gradient(circle, rgba(148, 226, 213, 1) 0%, rgba(156, 227, 191, 1) 21%, rgba(249, 226, 175, 1) 34%, rgba(158, 227, 186, 1) 35%, rgba(163, 227, 169, 1) 59%, rgba(148, 226, 213, 1) 74%, rgba(164, 227, 167, 1) 74%, rgba(166, 227, 161, 1) 100%); + background-size: 400% 400%; + animation: gradient_f 4s ease infinite; + text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377); + font-weight: bold; + color: #fff; +} + +#custom-music.critical { + background: rgb(235, 160, 172); + background: linear-gradient(52deg, rgba(235, 160, 172, 1) 0%, rgba(243, 139, 168, 1) 30%, rgba(231, 130, 132, 1) 48%, rgba(250, 179, 135, 1) 77%, rgba(249, 226, 175, 1) 100%); + background-size: 300% 300%; + animation: gradient 15s cubic-bezier(.55, -0.68, .48, 1.68) infinite; + text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377); + font-weight: bold; + color: #fff; +} + +#custom-music.Playing { + background: rgb(137, 180, 250); + background: radial-gradient(circle, rgba(137, 180, 250, 120) 0%, rgba(142, 179, 250, 120) 6%, rgba(148, 226, 213, 1) 14%, rgba(147, 178, 250, 1) 14%, rgba(155, 176, 249, 1) 18%, rgba(245, 194, 231, 1) 28%, rgba(158, 175, 249, 1) 28%, rgba(181, 170, 248, 1) 58%, rgba(205, 214, 244, 1) 69%, rgba(186, 169, 248, 1) 69%, rgba(195, 167, 247, 1) 72%, rgba(137, 220, 235, 1) 73%, rgba(198, 167, 247, 1) 78%, rgba(203, 166, 247, 1) 100%); + background-size: 400% 400%; + animation: gradient_f 9s cubic-bezier(.72, .39, .21, 1) infinite; + text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377); + font-weight: bold; + color: #fff; +} + +#custom-music.Paused, +#custom-music.Stopped { + background: @surface0; +} + + +/* =============================== */ +/* Music/PlayerCTL Module */ +#custom-music { + color: @mauve; +} + +/* =============================== */ + + +/* =============================== */ +/* Network Module */ +#network { + color: @blue; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: 0px; + padding-right: 5px; +} + +/* =============================== */ + + +/* =============================== */ +/* PulseAudio Module */ +#pulseaudio { + color: @mauve; + border-radius: 0; + margin-right: 0px; + padding-left: 5px; + padding-right: 5px; +} + +/* =============================== */ + + +/* =============================== */ +/* Backlight Module */ +#backlight { + color: @teal; + border-radius: 0; + margin-right: 0px; + padding-left: 5px; + padding-right: 5px; +} + +/* =============================== */ + + +/* =============================== */ +/* Battery Module */ +#battery { + color: @green; + border-radius: 0; + margin-right: 0px; + padding-left: 5px; + padding-right: 5px; +} + +#battery.charging { + color: @green; +} + +#battery.warning:not(.charging) { + color: @maroon; +} + +#battery.critical:not(.charging) { + color: @red; + animation-name: blink; + animation-duration: 1s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +@keyframes blink { + to { + background: @red; + color: @surface1; + } +} + +/* =============================== */ + +/* Notifications Module */ +#custom-notifications { + color: @mauve; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 5px; + padding-right: 1.25rem; +} + + +/* =============================== */ +/* Tray Module */ +#tray { + color: @mauve; + padding-right: 1.25rem; +} + +/* =============================== */ + + +/* =============================== */ +/* | Custom Modules | */ +/* =============================== */ +#custom-custom { + color: @peach; + padding-right: 1.25rem; + margin-right: 0px; +} + +/* Screenshot */ +#custom-ss { + color: @mauve; + padding-right: 1.5rem; +} + +/* Wallpaper */ +#custom-cycle_wall { + background: linear-gradient(45deg, rgba(245, 194, 231, 1) 0%, rgba(203, 166, 247, 1) 0%, rgba(243, 139, 168, 1) 13%, rgba(235, 160, 172, 1) 26%, rgba(250, 179, 135, 1) 34%, rgba(249, 226, 175, 1) 49%, rgba(166, 227, 161, 1) 65%, rgba(148, 226, 213, 1) 77%, rgba(137, 220, 235, 1) 82%, rgba(116, 199, 236, 1) 88%, rgba(137, 180, 250, 1) 95%); + background-size: 500% 500%; + animation: gradient 7s linear infinite; +} + +/* Notifications Module */ +#custom-clipboard { + color: @mauve; + border-top-right-radius: 0; + border-bottom-right-radius: 0; + margin-right: 0px; + padding-right: 8px; +} + +/* Powermenu Module */ +#custom-power { + color: @mauve; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + padding-left: 8px; + padding-right: 1.20rem; +} + +/* =============================== */ |