My own config starting to come alive
This commit is contained in:
pika
parent
187e1286d8
commit
2bb659730c
10 changed files with 299 additions and 1398 deletions
312
style.css
312
style.css
|
|
@ -1,203 +1,171 @@
|
|||
@import "mocha.css";
|
||||
|
||||
* {
|
||||
padding: 0px;
|
||||
margin: 0px;
|
||||
font-family: "Rubik", "JetBrains Mono Nerd Font";
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
font-size: 1rem;
|
||||
font-family: Rubik, iMWritingMono Nerd Font;
|
||||
}
|
||||
|
||||
/* ------ Set a Uniform Border Radius ------ */
|
||||
.modules-left, .modules-center, .modules-right, #cpu, #memory, #temperature, #pulseaudio, #backlight, #custom-spotify, #custom-icon, #custom-updates, #network, #battery, #tray, #idle_inhibitor, #custom-power, #custom-notification {
|
||||
border-radius: 6px;
|
||||
@keyframes urgent-workspace {
|
||||
from {
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
/* ------ Modules Left ------ */
|
||||
.modules-left {
|
||||
background-color: @base;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
to {
|
||||
color: red;
|
||||
}
|
||||
|
||||
/* ------ Modules Center ------ */
|
||||
.modules-center {
|
||||
background-color: @base;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
/* ------ Modules Right ------ */
|
||||
.modules-right {
|
||||
background-color: @base;
|
||||
padding-right: 5px;
|
||||
padding-left: 5px;
|
||||
@keyframes border-expand {
|
||||
0% {
|
||||
border-top: none;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
/* ------ Cpu Usage, Temperature, and Memory ------ */
|
||||
#cpu, #temperature, #memory {
|
||||
background-color: @surface0;
|
||||
padding: 4px 4px;
|
||||
margin: 4px 4px;
|
||||
font-size: 12px;
|
||||
33% {
|
||||
border-top: none;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: solid 2px currentcolor;
|
||||
border-radius: 66px;
|
||||
}
|
||||
|
||||
#cpu { color: @peach; }
|
||||
#memory { color: @mauve; }
|
||||
#temperature { color: @maroon; }
|
||||
|
||||
/* ------ Window Title ------ */
|
||||
#window {
|
||||
color: @color7;
|
||||
padding-right: 4px;
|
||||
66% {
|
||||
border-top: solid 2px currentcolor;
|
||||
border-left: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
border-bottom: none;
|
||||
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,
|
||||
#info {
|
||||
border-top: solid 1px #9649cd;
|
||||
color: #9649cd;
|
||||
transition: 650ms;
|
||||
}
|
||||
#p_info,
|
||||
#info:hover {
|
||||
border-bottom: solid 2px #9649cd;
|
||||
border-top: none;
|
||||
transition: 150ms;
|
||||
}
|
||||
|
||||
window#waybar {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
/* border-bottom: 0px solid #ffffff; */
|
||||
/* color: #FFFFFF; */
|
||||
background: transparent;
|
||||
transition-property: background-color;
|
||||
transition-duration: .5s;
|
||||
border-top: solid 1px transparent;
|
||||
background: transparent;
|
||||
opacity: 0.7;
|
||||
/* background: rgba(153, 153, 153, 0.3); */
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* -----------------------------------------------------
|
||||
* Workspaces
|
||||
* ----------------------------------------------------- */
|
||||
|
||||
#workspaces button.empty {
|
||||
color: @lavender;
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
window#waybar.empty {
|
||||
opacity: 1.125;
|
||||
}
|
||||
|
||||
#workspaces {
|
||||
margin: 0px 1px 0px 1px;
|
||||
padding: 0px 1px;
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
window#waybar.fullscreen {
|
||||
border: solid 2px #d70947;
|
||||
opacity: 1.0;
|
||||
}
|
||||
#window {
|
||||
padding: 2px;
|
||||
margin: 4px 4px 0;
|
||||
color: #fdf6e3;
|
||||
font-weight: 600;
|
||||
border-top: solid 1px transparent;
|
||||
transition: 2s;
|
||||
}
|
||||
|
||||
#workspaces button {
|
||||
padding: 0px 2px;
|
||||
margin: 4px 2px;
|
||||
color: @mauve;
|
||||
font-family: JetBrainsMono Nerd Font;
|
||||
border-top: solid 2px currentcolor;
|
||||
border-right: solid 2px currentcolor;
|
||||
margin-top: 4px;
|
||||
padding: 0;
|
||||
transition: 200ms;
|
||||
/* transition: transform 0.4s; */
|
||||
border-radius: 0;
|
||||
}
|
||||
#workspaces button.empty {
|
||||
opacity: 0.4;
|
||||
}
|
||||
#workspaces button.active {
|
||||
color: #e44cdf;
|
||||
padding: 0 10px;
|
||||
margin-top: 0;
|
||||
border-right: solid 2px currentcolor;
|
||||
/* transition: translateY(0.75rem) 400ms; */
|
||||
}
|
||||
#workspaces button.urgent {
|
||||
color: red;
|
||||
animation: urgent-workspace ease-out 2s infinite;
|
||||
}
|
||||
|
||||
#workspaces button:hover {
|
||||
opacity:0.5;
|
||||
color: @blue;
|
||||
}
|
||||
|
||||
/* ------ Pulseaudio ------ */
|
||||
#pulseaudio {
|
||||
color: @peach;
|
||||
background-color: @surface0;
|
||||
padding: 2px 5px;
|
||||
margin: 4px 2px;
|
||||
color: #cbb643;
|
||||
}
|
||||
|
||||
/* ------ Backlight ------ */
|
||||
#backlight {
|
||||
color: @sky;
|
||||
background-color: @surface0;
|
||||
padding: 2px 5px;
|
||||
margin: 4px 2px;
|
||||
/* #memory { */
|
||||
/* color: #740cbe; */
|
||||
/* } */
|
||||
#cpu {
|
||||
color: #a70a3c;
|
||||
}
|
||||
|
||||
/* ------ Network ------ */
|
||||
#network {
|
||||
color: @mauve;
|
||||
background-color: @surface0;
|
||||
padding: 2px 5px;
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
/* ------ Battery ------ */
|
||||
#battery {
|
||||
color: @maroon;
|
||||
background-color: @surface0;
|
||||
padding: 2px 5px;
|
||||
margin: 4px 2px;
|
||||
color: #859900;
|
||||
}
|
||||
|
||||
/* ------ Clock ------ */
|
||||
#clock {
|
||||
padding-left: 10px;
|
||||
color: @red;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
#network {
|
||||
color: #1E90FF;
|
||||
}
|
||||
|
||||
/* ------ System Tray ------ */
|
||||
#tray {
|
||||
background-color: @surface0;
|
||||
padding: 2px 5px;
|
||||
margin: 4px 2px;
|
||||
}
|
||||
|
||||
/* ------ Custom Modules ------ */
|
||||
#custom-icon {
|
||||
font-size: 18px;
|
||||
color: @teal;
|
||||
padding-right: 5px;
|
||||
}
|
||||
|
||||
#custom-separator-arrow {
|
||||
font-size: 14px;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#custom-separator-dot {
|
||||
font-size: 15px;
|
||||
color: @text;
|
||||
}
|
||||
|
||||
#custom-spotify {
|
||||
color: @mauve;
|
||||
background-color: @surface0;
|
||||
padding: 2px 9px;
|
||||
margin: 4px 2px;
|
||||
#disk {
|
||||
color: #b58900;
|
||||
}
|
||||
#custom-reboot,
|
||||
#custom-quit,
|
||||
#custom-lock,
|
||||
#custom-powerm,
|
||||
#custom-power {
|
||||
color: @red;
|
||||
background-color: @surface0;
|
||||
padding: 2px 9px;
|
||||
margin: 4px 2px;
|
||||
font-size: 15px;
|
||||
padding: 0.2rem 1rem;
|
||||
font-weight: 600;
|
||||
border-top: solid 1px currentcolor;
|
||||
transition: 350ms;
|
||||
}
|
||||
#custom-reboot:hover,
|
||||
#custom-quit:hover,
|
||||
#custom-powerm:hover,
|
||||
#custom-lock:hover,
|
||||
#custom-power:hover {
|
||||
border-top: solid 2px red;
|
||||
transition: 250ms;
|
||||
/* border-radius: 2rem; */
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
#idle_inhibitor {
|
||||
color: @green;
|
||||
background-color: @surface0;
|
||||
padding: 2px 9px;
|
||||
margin: 4px 2px;
|
||||
font-size: 15px;
|
||||
#pulseaudio,
|
||||
#memory,
|
||||
#cpu,
|
||||
#battery,
|
||||
#disk,
|
||||
#clock,
|
||||
#network,
|
||||
#not-power,
|
||||
#tray {
|
||||
padding: 6px;
|
||||
margin: 0px 4px 0;
|
||||
font-weight: 600;
|
||||
border-top: solid 2px transparent;
|
||||
transition: 550ms;
|
||||
}
|
||||
|
||||
#custom-updates {
|
||||
padding: 2px 8px;
|
||||
margin: 4px 4px;
|
||||
background-color: @surface0;
|
||||
}
|
||||
#custom-updates.green {
|
||||
color: @text;
|
||||
}
|
||||
#custom-updates.yellow {
|
||||
color: @peach;
|
||||
}
|
||||
#custom-updates.red {
|
||||
color: @red;
|
||||
#pulseaudio:hover,
|
||||
#memory:hover,
|
||||
#cpu:hover,
|
||||
#battery:hover,
|
||||
#network:hover,
|
||||
#disk:hover,
|
||||
#clock:hover {
|
||||
border-top: solid 2px currentcolor;
|
||||
transition: 250ms;
|
||||
}
|
||||
|
||||
#custom-notification {
|
||||
color: @teal;
|
||||
background-color: @surface0;
|
||||
padding: 2px 9px;
|
||||
margin: 4px 2px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
tooltip {
|
||||
background: @base;
|
||||
border: 1px solid @blue;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue