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