dotfiles/waybar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

addet hover effect for buttons

Browse source
This commit is contained in:
pika 2024-06-11 20:04:11 +02:00
parent e31af65995
commit 03dbe80e76
1 changed files with 64 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

101
style.css
View file

@ -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;
}