Bluemedia/desktop-config
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Add styling for waybar

Browse source
This commit is contained in:
Oliver Traber 2024-10-10 22:53:11 +02:00
parent c288ea3531
commit 2d583e613e
Signed by: Bluemedia
GPG key ID: C0674B105057136C
2 changed files with 217 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

216
roles/desktop-environment/files/.config/waybar/style.css Normal file
View file

@ -0,0 +1,216 @@
/* Inspired by https://github.com/JaKooLit/Hyprland-Dots/blob/main/config/waybar/style/%5BDark%5D%20Half-Moon.css */
* {
font-family: "JetBrainsMono Nerd Font";
font-weight: bold;
min-height: 0;
/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
font-size: 97%;
font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
}
window#waybar {
background-color: rgba(26,27,38,0);
border-bottom: 1px solid rgba(26,27,38,0);
border-radius: 0px;
color: #E6B673;
}
#waybar.empty, #waybar.tiled, #waybar.floating {
background-color: transparent;
}
window#waybar.empty,
window#waybar.empty #window {
background-color: transparent;
}
#taskbar,
#workspaces {
background: #0F1419;
margin: 5px;
padding: 0px 1px;
border-radius: 15px;
border: 0px;
font-style: normal;
color: #0F1419;
}
#taskbar button,
#workspaces button {
padding: 0px 5px;
margin: 4px 3px;
border-radius: 15px;
border: 0px;
color: #0F1419;
background: linear-gradient(45deg, #95E6CB, #59C2FF, #D2A6FF);
opacity: 0.5;
transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}
#taskbar button.active,
#workspaces button.active {
padding: 0px 5px;
margin: 4px 3px;
border-radius: 15px;
border: 0px;
color: #0F1419;
background: linear-gradient(45deg, #59C2FF, #D2A6FF);
opacity: 1.0;
min-width: 40px;
transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}
#workspaces button:hover {
border-radius: 15px;
color: #0F1419;
background: linear-gradient(45deg, #59C2FF, #D2A6FF);
opacity: 0.8;
transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
}
@keyframes gradient_horizontal {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes swiping {
0% {
background-position: 0% 200%;
}
100% {
background-position: 200% 200%;
}
}
tooltip {
background: #0F1419;
border: 1px solid #D2A6FF;
border-radius: 10px;
}
tooltip label {
color: #F3F4F5;
}
#window {
color: #E6E1CF;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#temperature,
#memory {
color: #FF8F40;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#idle_inhibitor,
#clock {
color: #F3F4F5;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
/*-----Indicators----*/
#idle_inhibitor.activated {
color: #39FF14;
}
#bluetooth {
color: blue;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#cpu {
color: #FF8F40;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#disk {
color: #B8CC52;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#backlight,
#battery {
color: #F07178;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#battery.critical:not(.charging) {
color: #f53c3c;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#mpris {
color: #F07178;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding-left: 8px;
padding-right: 2px;
}
#backlight {
color: white;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#network {
color: #B8CC52;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#tray {
color: #E6E1CF;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}
#pulseaudio {
color: #59C2FF;
background: #0F1419;
border-radius: 50px 50px;
margin: 5px;
padding: 2px 15px;
}

2
roles/desktop-environment/templates/.config/hypr/hyprland.conf.j2
View file

@ -31,7 +31,7 @@ general {
# See https://wiki.hyprland.org/Configuring/Variables/ for more
gaps_in = 5
gaps_out = 10
gaps_out = 2,10,10,10
border_size = 2
col.active_border = rgba(33ccffee) rgba(00ff99ee) 45deg
col.inactive_border = rgba(595959aa)