dotfiles/home/.config/waybar/style.scss

$iiv: #000;
$iv: #111;
$v: #0bb;
$vi: #aaa;
$vii: #fff;
$a: #f53;

* {
    font-family: 'Noto Sans Mono', 'Material Symbols Outlined', sans-serif;
    font-size: 12px;
    border-radius: 0;
}

window#waybar {
    // background: linear-gradient(to left, transparentize(#000, 0.6), transparentize(#000, 0));
    background: #0000;
    color: #ffffff;
    transition-property: background-color;
    transition-duration: .5s;

    padding: 4px;
    // padding-right: 0;
    // padding: 2px;

/*     padding: 6px; */
}

window#waybar.hidden {
    opacity: 0.2;
}

// #waybar > * {
// }

button {
    padding: 0;
}

.box {
}

#waybar > box {
    // margin: 4px;
    // margin-right: 0;

    // background: linear-gradient(to right, transparentize(#000, 0), transparentize(#000, 1));

    padding: 4px;
    // border-right: 1px solid $iv;
    background-color: transparentize($iiv, 0.1);
}

.modules-right, .modules-left {


    // background: linear-gradient(to bottom, lighten($iv, 10%), darken($iv, 10%));

    // background:

    // border-top-color: transparentize(lighten($iiv, 15%), 0.6);
    // border-bottom-color: transparentize(darken($iiv, 15%), 0.5);

    .module {
        margin: 3px 0;
        padding: 3px;
        // padding: 0;
        border: 1px solid transparentize(#fff, 0.9);
        border-top: 1px solid transparentize(#fff, 0.8);
        border-bottom: 1px solid transparentize(#666, 0.9);
        // background-color: transparentize($iiv, 0.2);
        background: $iv;
        color: $vii;
    }

    & > :last-child .module {
        margin-bottom: 0;
        // padding-bottom: 6px;
    }

    & > :first-child .module {
        margin-top: 0;

        // padding-top: 6px;
    }
}

#window {
    // padding: 0;

}

#pulseaudio.main, #bluetooth, #custom-power, #custom-rofication {
    font-size: 20px;
    font-weight: 300;
}

#custom-power, #custom-rofication {
    padding-top: 4px;
    padding-bottom: 2px; // Cheat squareness
}

#audio {
    #pulseaudio.preview {
        border: 0;
        padding: 0;
        margin: 0;
        background: $iiv;
        color: #0000;
        transition: .2s color;
    }

    &:hover {
        #pulseaudio.main {
            border-top: 0;
            margin-top: 0;
        }

        #pulseaudio.preview {
            background: transparent;
            color: $vi;
        }
    }
}

#pulseaudio-slider {
    padding: 0;
    margin: 0;
    border: 0;
}
#pulseaudio-slider slider {
min-height: 0px;
min-width: 0px;
opacity: 0;
background-image: none;
border: none;
box-shadow: none;
}
#pulseaudio-slider trough {
min-height: 100px;
min-width: 28px;
background: $iiv;
border: 1px solid transparentize(#fff, 0.9);
border-top: 1px solid transparentize(#fff, 0.8);
border-bottom: 0;
}
#pulseaudio-slider highlight {
min-width: 10px;
background: $iv;
border: 1px solid transparentize(#fff, 0.9);
border-top: 1px solid transparentize(#fff, 0.8);
border-bottom: 0
}

.module button:hover {
    background: #ffffff;
    transition-property: background-color;
    transition-duration: .5s;
}

.module#workspaces {

    padding: 0;
    // border: 0;
    background: $iiv;
    font-size: 4px;

    button {
        // border-top: 2px solid transparentize(#fff, 0.9);
        padding: 0;
        margin: 0;
        transition: .15s padding;
        color: $vii;

        &:hover {
            background: inherit;
            border: 0;
            padding: 18px 0;
        }
    }

    button.empty {
        color: $vi;
    }

    button.focused {
        padding: 18px 0;
        background: $iv;
        color: $v;

        &:not(:first-child) {
            border-top: 1px solid transparentize(#fff, 0.9);
        }

        &:not(:last-child) {
            border-bottom: 1px solid transparentize(#666, 0.9);
        }
    }
}

// #tray {
//     border-bottom: 0;
//     margin-bottom: 0;
// }
// #bluetooth {
//     margin-top: 0;
//     border-top: 0;
// }

#clock {
    font-size: 18px;
}
.module#clock.hour {
    color: $v;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom: 0;
    font-weight: 600;
}
.module#clock.minutes {
    background: $iiv;
    padding-top: 0;
    margin-top: 0;
    border-top: 0;
    font-weight: 300;
}