nixos/home/hyprland/ironbar/reference/style.css

266 lines
6.1 KiB
CSS
Raw Normal View History

.container {
font-family: cjkFonts;
font-weight: bold;
font-size: 23px;
}
#cava {
font-family: renogare;
}
.time {
font-size: 23px;
font-weight: normal;
padding: 0px 10px 0px 10px;
background: linear-gradient(45deg, rgb(254, 240, 224) 0%, rgb(244, 169, 158) 50%, rgb(238, 214, 215) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
border-radius: 16px;
margin: 10px 10px 10px 10px;
font-family: Renogare;
}
.clock_date {
font-family: Renogare;
font-weight: normal;
font-size: 18;
color: rgb(49, 50, 68);
}
.background {
background-color: rgba(0, 0, 0, 0)
}
.popup-clock {
font-weight: bolder;
background: rgb(36, 39, 58);
}
.popup-pwr {
background: rgb(234, 153, 156);
color: rgb(48, 52, 70);
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
}
#power-btn {
padding: 0px 20px 0px 20px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
margin-left: 0px;
border-radius: 15px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(129, 200, 190) 0%, rgb(244, 184, 228) 43%, rgb(153, 209, 219) 80%, rgb(202, 158, 230) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
border: none;
font-weight: bolder;
box-shadow: rgba(0, 0, 0, 0.25) 2px 2px 5px 2px;
}
#shutdown {
background: rgb(238, 190, 190);
}
#reboot {
background: rgb(140, 170, 238);
}
#hibernation {
box-shadow: rgba(0, 0, 0, 0.35) 2px 2px 5px 2px;
background: rgb(153, 209, 219);
}
/* base */
.sysinfo .item,
.script,
.tray {
padding: 0px 10px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
border-radius: 15px;
background: #cdd6f4;
color: #516079;
box-shadow: rgba(0, 0, 0, 0.116) 2px 2px 5px 2px;
}
.scale,
.internet,
.script {
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border-radius: 15px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
color: #fff;
}
scale trough {
border-radius: 16px;
background-color: #E7D4CB;
box-shadow: 0 2px 3px 2px rgba(00, 00, 00, 0.4);
min-height: 10px;
min-width: 70px;
margin: 0px 5px 10px 10px;
}
scale value {
color: #77a5bf;
font-size: 0px;
}
scale trough highlight {
background-image: linear-gradient(to right, #afcee0 30%, #92B6F4 50%, #77a5bf 100%);
border-radius: 10px;
background-color: #afcee0;
}
.focused {
color: rgb(84, 111, 175);
font-size: 20px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
/* cpu */
.sysinfo .item:nth-child(1) {
background: rgb(180, 190, 254);
background: linear-gradient(52deg, rgba(180, 190, 254, 1) 0%, rgba(137, 220, 235, 1) 32%, rgba(137, 180, 250, 1) 72%, rgba(166, 227, 161, 1) 100%);
background-size: 300% 300%;
animation: gradient 20s ease infinite;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
/* background-color: #b4befe; */
color: #fff;
}
.clock {
margin-top: 10px;
margin-bottom: 10px;
margin-right: 10px;
padding-right: 20px;
padding-left: 20px;
padding-bottom: 3px;
box-shadow: rgba(0, 0, 0, 0.288) 2px 2px 5px 2px;
text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.377);
border: none;
border-radius: 15px;
font-size: 24px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
.tray {
color: rgb(84, 111, 175);
font-size: 15px;
padding: 0px 10px 0px 10px;
margin: 10px 10px 10px 0px;
background: rgb(238, 190, 190);
background: linear-gradient(45deg, rgb(244, 219, 214) 0%, rgb(223, 221, 238) 43%, rgb(245, 208, 225) 100%);
background-size: 300% 300%;
animation: gradient 5s ease infinite;
border-radius: 16px;
}
.tray>.passive {
-gtk-icon-effect: dim;
}
.tray>.needs-attention {
-gtk-icon-effect: highlight;
background-color: #eb4d4b;
}
.workspaces {
font-family: Renogare;
font-weight: normal;
font-size: 25px;
font-weight: normal;
margin: 10px 0px 0px 20px;
border-radius: 16px;
}
.workspaces .item {
box-shadow: rgba(0, 0, 0, 0.116) 2 2 5 2px;
border: unset;
background: #fff;
border-radius: 15px;
margin: 10px 10px 15px 0px;
padding: 5px 20px 5px 20px;
color: #cba6f7;
}
.workspaces .item.focused {
border: unset;
font-size: 25px;
transition: all 0.5s cubic-bezier(0.5, 1, 0.89, 1);
box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
text-shadow: 0 0 5px rgba(0, 0, 0, 0.377);
padding: 5px 10px 5px 10px;
border-radius: 16px;
margin: 10px 10px 15px 0px;
background: rgb(202, 158, 230);
background: linear-gradient(45deg, rgba(202, 158, 230, 1) 0%, rgba(245, 194, 231, 1) 43%, rgba(180, 190, 254, 1) 80%, rgba(137, 180, 250, 1) 100%);
background-size: 300% 300%;
animation: gradient 10s ease infinite;
color: #fff;
}
@keyframes gradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
tooltip.background {
background-color: rgba(00, 00, 00, 0.5);
font-size: 18;
border-radius: 10px;
color: #FDFDFD;
}
tooltip * {
padding: 4px;
background-color: transparent;
color: white;
}
.host tooltip {
background-color: rgba(255, 00, 00, 0.5);
}