luca-awesome-dotfiles/home/.config/waybar/style.css

@import '../colors.css';


/* Reset all styles */
* {
    color: @font;
    border: none;
    border-radius: 0;
    padding: 1 1;
    font-family:Hack;
    font-size: 14px;
}

.modules-center {
    background: @bg-light;
    border-radius: 4;
}

window#waybar {
    background: alpha(@bg, 0.9);
		border-radius: 5;
    /* background-color: rgba(100, 100, 100, 0); */
    transition-property: background-color;
    transition-duration: .5s;
		margin-top: 8;
    padding: 2 2;
	}

tooltip {
     background: rgba(43, 48, 59, 0.95);
     border: 1px solid rgba(100, 114, 125, 0.8);
     border-radius: 7px;
     border-color: shade(alpha(@borders, 0.9), 2.25);
}

#workspaces {
   padding: 0;
   margin: 0;
}

#workspaces button {
    color: @font;
    min-height: 0;
    border-color: shade(alpha(@borders, 0.9), 2.25);
    padding: 0 7px;
    margin: 0;
    border-bottom: 2px solid transparent;
}

#workspaces button.focused {
    border-color: @accent;
}

#workspaces button.urgent {
    background: @aur1;
    color: @font;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    border-radius: 4px;
}

#workspaces button:hover {
   background: rgba(255, 255, 255, 0.3);
   border-radius: 4px;
}

#mode {
   color: @font;
}

#clock, #custom-power, #battery, #cpu, #memory, #idle_inhibitor, #temperature, #custom-keyboard-layout, #backlight, #network, #pulseaudio, #mode, #custom-pacman {
    margin-right: 2px;
    margin-left: 2px;

    background-color: @bg-light;
    border-radius: 4px;

    padding-left:10px;
    padding-right:10px;
}

#window {
   padding-left: 5px;
   margin-right: 20px;
   border-style: hidden;
   color: @font;
}

#custom-power {
   border-radius: 4 0 0 4;
   margin-right: 0px;
}

@keyframes blink {
    to {
        color: @aur1;
        background-color: @font;
    }
}

#battery.critical:not(.charging) {
    background: @aur1;
    color: @font;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#battery.warning:not(.charging) {
    background: #f53c3c;
    color: white;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#custom-launcher{
    background-color: @accent;
    border-style: hidden;
    color: @bg-light;
    font-size: 13px;
    /* border-radius:  0 4 4 0; */
}

#tray {
   background-color: @accent;
   color: @bg;
   padding: 0 5px;
}

#custom-arrowL0,#custom-arrowR0 {
   background-color: @bg;
   /* color: shade(alpha(@borders, 1.0), 2.25); */
   color: @accent;
}

#mode {
    margin-bottom:0px;
}

#pulseaudio.muted {
    color: @aur1;
}

#temperature.critical {
    color: @aur1;
}

#network.disabled {
    color: @aur1;
}




/* ---------------------------------------------------------
 *
 *  										GAPS
 *
 * --------------------------------------------------------- */



* {
    color: @font;
    border: none;
    border-radius: 0;
    padding: 0 0;
    font-family:Hack;
    font-size: 13px;
}

window#waybar {
    background-color: rgba(100, 100, 100, 0);
    /* background: shade(alpha(@borders, 0.9), 2.25); */
}

.modules-left,.modules-right,.modules-center {
    background: alpha(@bg, 0.8);
    margin-top: 25;
    margin-left: 25;
    margin-right: 25;
    border-radius: 6;
    padding: 7;
}

#workspaces {
   padding: 0;
   margin: 0;
}

#workspaces button {
    color: @font;
    min-height: 0;
    border-color: shade(alpha(@borders, 0.9), 2.25);
    padding: 0 7px;
    margin: 0;
    border-bottom: 2px solid transparent;
}

#workspaces button.focused {
    border-color: #8db0AE;
}

#workspaces button.urgent {
    background: @aur1;
    color: @font;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#mode {
    color: @font;
}

#clock, #battery, #cpu, #memory, #idle_inhibitor, #temperature, #custom-keyboard-layout, #backlight, #network, #pulseaudio, #mode, #window, #custom-pacman {
    margin-right: 5px;
    margin-left: 5px;
}

/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */
@keyframes blink {
    to {
        color: @aur1;
        background-color: @font;
    }
}

#battery.critical:not(.charging) {
    background: @aur1;
    color: @font;
    animation-name: blink;
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

#custom-launcher,#custom-power{
    font-size: 13px;
    border-style: hidden;
    background-color: @accent;
    font-size: 13px;
    color: @bg;
}

#custom-power {
    border-radius: 3;
}

#tray {
   background-color: @accent;
   color: #2e3440;
   padding: 0 5px;
	 border-radius: 3 0 0 3;
}

#custom-arrowL0,#custom-arrowR0 {
   background-color: @bg;
   color: @accent;
}

#window{
    border-style: hidden;
}

#mode{
    margin-bottom:0px;
}

#pulseaudio.muted {
    color: @aur1;
}

#temperature.critical {
    color: @aur1;
}

#network.disabled {
    color: @aur1;
}