diff --git a/style.css b/style.css index 979f492..cfc2b9e 100644 --- a/style.css +++ b/style.css @@ -2,56 +2,66 @@ font-size: 1rem; font-family: Rubik, iMWritingMono Nerd Font; } + @keyframes urgent-workspace { -from { - color: white; -} -75% { - color: red; -} -to { - color: white; -} + from { + color: white; + } + + 75% { + color: red; + } + + to { + color: white; + } } + @keyframes border-expand { -0% { - border-top: transparent; - border-left: transparent; - border-right: transparent; - border-bottom: solid 2px currentcolor; - border-radius: 100px; -} -33% { - border-top: transparent; - border-left: solid 2px currentcolor; - border-right: solid 2px currentcolor; - border-bottom: solid 2px currentcolor; - border-radius: 66px; -} -66% { - border-top: solid 2px currentcolor; - border-left: solid 2px currentcolor; - border-right: solid 2px currentcolor; - border-bottom: transparent; - border-radius: 33px; -} -to { - border-top: solid 2px currentcolor; - border-radius: 0; - /* border-radius: 0rem 0rem 1rem 1rem; */ -} + 0% { + border-top: transparent; + border-left: transparent; + border-right: transparent; + border-bottom: solid 2px currentcolor; + border-radius: 100px; + } + + 33% { + border-top: transparent; + border-left: solid 2px currentcolor; + border-right: solid 2px currentcolor; + border-bottom: solid 2px currentcolor; + border-radius: 66px; + } + + 66% { + border-top: solid 2px currentcolor; + border-left: solid 2px currentcolor; + border-right: solid 2px currentcolor; + border-bottom: transparent; + border-radius: 33px; + } + + to { + border-top: solid 2px currentcolor; + border-radius: 0; + /* border-radius: 0rem 0rem 1rem 1rem; */ + } } + tooltip { border: solid 2px currentcolor; background: black; color: white; } + #p-info, #weather, #info { border-top: solid 1px currentcolor; transition: 650ms; } + #p-info:hover, #weather:hover, #info:hover { @@ -66,16 +76,19 @@ tooltip { font-weight: 600; transition: 300ms; } + window#waybar { border: solid 2px rgba(160, 160, 160, 0.329); border-radius: 6px; background: transparent; transition: 700ms; } + window#waybar.empty { margin-top: 4px; border: solid 2px rgba(136, 136, 136, 0.8); } + window#waybar.fullscreen { background: rgba(55, 55, 55, 0.6); margin: 0; @@ -95,8 +108,13 @@ window#waybar.fullscreen { transition: 200ms; border-radius: 2px 2px 2 0; } -#workspaces button.empty { + +#workspaces button:hover { + margin-top: 3px; } + +#workspaces button.empty {} + #workspaces button.active { color: rgba(255, 238, 0, 0.9); padding: 0 8px; @@ -107,6 +125,7 @@ window#waybar.fullscreen { border-right: solid 2px currentcolor; border-radius: 8px 4px 2px 0; } + #workspaces button.urgent { color: red; animation: urgent-workspace ease-out 4s infinite; @@ -115,26 +134,33 @@ window#waybar.fullscreen { #pulseaudio { color: #cbb643; } + #p-info, #info, #memory { color: #9649cd; } + #cpu { color: #a70a3c; } + #battery { color: #859900; } + #network { color: #1E90FF; } + #disk { color: #b58900; } + #custom-power { border-radius: 0 8px 0 0; } + #custom-weather, #custom-reboot, #custom-quit, @@ -147,6 +173,7 @@ window#waybar.fullscreen { border-top: solid 1px currentcolor; transition: 350ms; } + #custom-reboot:hover, #custom-quit:hover, #custom-powerm:hover, @@ -158,6 +185,7 @@ window#waybar.fullscreen { /* border-radius: 2rem; */ font-size: 1.5rem; } + #pulseaudio, #memory, #cpu, @@ -184,4 +212,3 @@ window#waybar.fullscreen { border-top: solid 2px currentcolor; transition: 250ms; } -