265 lines
5.1 KiB
CSS
265 lines
5.1 KiB
CSS
|
/*//////////////////////////////////////////////////////////
|
||
|
|
// _ __ __ __ __ //
|
||
|
|
// | | /| / /__ ___ __/ / ___ _____ ___ / /___ __/ /__ //
|
||
|
|
// | |/ |/ / _ `/ // / _ \/ _ `/ __/ (_-</ __/ // / / -_) //
|
||
|
|
// |__/|__/\_,_/\_, /_.__/\_,_/_/ /___/\__/\_, /_/\__/ //
|
||
|
|
// /___/ /___/ //
|
||
|
|
////////////////////////////////////////////////////////////
|
||
|
|
*/
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*Main settings.*/
|
||
|
|
* {
|
||
|
|
font-family: RobotoMonoNerdFont;
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: Bold;
|
||
|
|
}
|
||
|
|
window#waybar {
|
||
|
|
/*border-top: 2px solid rgba(49,50,68, 0.75);*/
|
||
|
|
border-radius: 0 0 0 0px;
|
||
|
|
/*background: rgba(24, 24, 37, 1.0);*/
|
||
|
|
background: rgba(17, 17, 27, 1.0);
|
||
|
|
color: #7f849c;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.modules-right {
|
||
|
|
border-radius: 8;
|
||
|
|
background-color: rgba(39,39,68, 0.7);
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.11) 4 4 5 2px;
|
||
|
|
margin-left: 9px;
|
||
|
|
margin-bottom: 9px;
|
||
|
|
margin-right: 9px;
|
||
|
|
padding-top: 2px;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
padding-right: 7px;
|
||
|
|
padding-left: 7px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.modules-center {
|
||
|
|
border-radius: 8;
|
||
|
|
background-color: rgba(39, 39, 68, 0.7);
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.11) 4 4 5 2px;
|
||
|
|
margin-left: 9px;
|
||
|
|
margin-right: 9px;
|
||
|
|
padding-top: 2px;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
padding-right: 2px;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
.modules-left {
|
||
|
|
border-radius: 8;
|
||
|
|
background-color: rgba(39, 39, 68, 0.7);
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.11) 4 4 5 2px;
|
||
|
|
margin-top: 9px;
|
||
|
|
margin-right: 9px;
|
||
|
|
margin-left: 9px;
|
||
|
|
padding-top: 2px;
|
||
|
|
padding-bottom: 2px;
|
||
|
|
padding-right: 2px;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
/*Modules setting.*/
|
||
|
|
|
||
|
|
|
||
|
|
/*1. Workspace switcher module.
|
||
|
|
Main.*/
|
||
|
|
#workspaces {
|
||
|
|
/*background: #1e1e2e;*/
|
||
|
|
margin-top: 2px;
|
||
|
|
margin-bottom: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*1.1. Inactive workspace button.*/
|
||
|
|
#workspaces button {
|
||
|
|
background: transparent;
|
||
|
|
color: #585b70;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
/*margin-top: 8px;
|
||
|
|
margin-bottom: 8px;
|
||
|
|
margin-left: 1px;
|
||
|
|
margin-right: 1px;*/
|
||
|
|
padding-top: 4px;
|
||
|
|
padding-bottom: 4px;
|
||
|
|
padding-right: 10px;
|
||
|
|
padding-left: 7px;
|
||
|
|
border-radius: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*1.2. Inactive workspace hover button.*/
|
||
|
|
#workspaces button:hover {
|
||
|
|
box-shadow: inherit;
|
||
|
|
text-shadow: inherit;
|
||
|
|
background: transparent;
|
||
|
|
color: #7f849c;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
#workspaces button.focused,
|
||
|
|
/*1.3. Active workspace button.*/
|
||
|
|
#workspaces button.active {
|
||
|
|
color: #b4befe;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
text-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
|
||
|
|
background: transparent;
|
||
|
|
background-size: 310% 310%;
|
||
|
|
animation: colored-gradient 10s ease infinite;
|
||
|
|
padding-right: 10px;
|
||
|
|
padding-left: 7px;
|
||
|
|
padding-top: 4px;
|
||
|
|
padding-bottom: 4px;
|
||
|
|
font-weight: bolder;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*1.4. Warning workspace button.*/
|
||
|
|
#workspaces button.urgent {
|
||
|
|
color: #f38ba8;
|
||
|
|
background: transparent ;
|
||
|
|
background-size: 300% 300%;
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
/*2. Keyboard layout module.*/
|
||
|
|
#language {
|
||
|
|
background: transparent;
|
||
|
|
color:#b4befe;
|
||
|
|
/*color:#f5e0dc;*/
|
||
|
|
padding-top: 3px;
|
||
|
|
padding-bottom: 3px;
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-left: 0px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*3. RAM usage monitoring module.*/
|
||
|
|
#memory,
|
||
|
|
|
||
|
|
/*4. PulseAudio control module.*/
|
||
|
|
#pulseaudio.audio {
|
||
|
|
background: transparent;
|
||
|
|
color: #b4befe;
|
||
|
|
background-size: 300% 300%;
|
||
|
|
text-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
|
||
|
|
border-radius: 30px;
|
||
|
|
padding-top: 10px;
|
||
|
|
padding-bottom: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-left: 0px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*5. PulseAudio muted status module3*/
|
||
|
|
#pulseaudio.audio.muted {
|
||
|
|
background: transparent;
|
||
|
|
box-shadow: rgba(0, 0, 0, 0.0) 2 2 5 2px;
|
||
|
|
color: #7f849c;
|
||
|
|
border-radius: 30px;
|
||
|
|
padding-top: 0px;
|
||
|
|
padding-bottom: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-left: 7px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#battery.bat2 {
|
||
|
|
padding-bottom:0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*6. Batteries capacity monitoring module.*/
|
||
|
|
#battery {
|
||
|
|
background: transparent;
|
||
|
|
border-radius: 30px;
|
||
|
|
margin-top: 0px;
|
||
|
|
padding-top: 0px;
|
||
|
|
padding-bottom: 8px;
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-left: 0px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#custom-pm {
|
||
|
|
/*color:#f5e0dc;*/
|
||
|
|
padding-left: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#custom-btd {
|
||
|
|
/*color:#f5e0dc;*/
|
||
|
|
padding-bottom: 8px;
|
||
|
|
padding-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#custom-btc {
|
||
|
|
/*color:#f5e0dc;*/
|
||
|
|
padding-bottom: 4px;
|
||
|
|
padding-right: 2px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#custom-logo {
|
||
|
|
font-family: RobotoMonoNerdFont;
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 15px;
|
||
|
|
padding-top: 1px;
|
||
|
|
padding-left: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
#temperature {
|
||
|
|
padding-right: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*7. Batteries charging status monitoring module.*/
|
||
|
|
#battery.charging, #battery.plugged {
|
||
|
|
background: transparent;
|
||
|
|
color: #b4befe;
|
||
|
|
text-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px;
|
||
|
|
background-size: 300% 300%;
|
||
|
|
animation: gradient 5s linear infinite;
|
||
|
|
transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
|
||
|
|
}
|
||
|
|
|
||
|
|
/*8. Date and time module.*/
|
||
|
|
#clock {
|
||
|
|
background: transparent;
|
||
|
|
padding-top: 8px;
|
||
|
|
padding-bottom: 0px;
|
||
|
|
padding-right: 0px;
|
||
|
|
padding-left: 0px;
|
||
|
|
}
|
||
|
|
/*9. Network control module.*/
|
||
|
|
#network {
|
||
|
|
background: #272744;
|
||
|
|
margin-top: 6px;
|
||
|
|
margin-bottom: 6px;
|
||
|
|
margin-left: 9px;
|
||
|
|
margin-right: 9px;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
padding-right: 10px;
|
||
|
|
padding-left: 10px;
|
||
|
|
border-radius: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/*10.*/
|
||
|
|
#custom-date {
|
||
|
|
border-radius: 30px;
|
||
|
|
background: #272744;
|
||
|
|
color: #cdd6f4;
|
||
|
|
margin-top: 10px;
|
||
|
|
margin-bottom: 7px;
|
||
|
|
margin-left: 8px;
|
||
|
|
margin-right: 8px;
|
||
|
|
padding-top: 12px;
|
||
|
|
padding-bottom: 12px;
|
||
|
|
padding-right: 2px;
|
||
|
|
padding-left: 2px;
|
||
|
|
}
|