gBar/css/style.scss

// colorscheme(dracula)
// See https://github.com/dracula/dracula-theme/blob/master/LICENSE or dracula/LICENSE for the license
$bg: #282a36;
$fg: #f8f8f2;
$inactive: #44475a;
$darkblue: #6272a4;
$cyan: #8be9fd;
$green: #50fa7b;
$orange: #ffb86c;
$pink: #ff79c6;
$purple: #bd93f9;
$red: #ff5555;
$yellow: #f1fa8c;


$btblue: #1793D1;

$textsize: 16px;

*{
    all: unset;
    font-family: "CaskaydiaCove Nerd Font";
}

// debug
.cpu-box{
    //background-color: #00cc00
}

.popup {
    color: #50fa7b;
}


.bar,tooltip{
    background-color: $bg;
    border-radius: 16px;
}

.right {
    border-radius: 16px;
}

.time-text {
    font-size: $textsize;
}

.reboot-button {
    font-size: 28px;
    
    color: $darkblue;
}
.sleep-button {
    font-size: 28px;

    color: $darkblue;
}
.exit-button {
    font-size: 28px;

    color: $darkblue;
}

.power-button {
    font-size: 28px;

    color: $red;
}

.power-box {
}

.power-box-expand {
}

.system-confirm {
    color: $green;
}

// Common slider settings
trough {
    border-radius: 3px;
    border-width: 1px;
    border-style: none;
    background-color: $inactive;
    // margin-top: 2px;
    min-width: 4px;
    min-height: 4px;
}

slider {
    // Controls the size of the control area (set border-style to solid to see)
    border-radius: 0%;
    border-width: 1px;
    border-style: none;
    margin: -9px -9px -9px -9px;
    min-width: 16px;
    min-height: 16px;
    background-color: transparent;
}

highlight {
    border-radius: 3px;
    border-width: 1px;
    border-style: none;
    // For vertical we need width, for horizontal we need height
    // Both can coexist though
    min-width: 6px;
    min-height: 6px;
}

.audio-icon {
    font-size: 24px;
    color: $orange;
}

.audio-volume {
    trough {
        background-color: $inactive;
    }

    slider {
        background-color: transparent;
    }

    highlight {
        background-color: $orange;
    }

    font-size: 16px;
    color: $orange;
}

.mic-icon {
    font-size: 24px;
    color: $purple;
    // margin-right: 0px;
}

.mic-volume {
    trough {
        background-color: $inactive;
    }

    slider {
        background-color: transparent;
    }

    highlight {
        background-color: $purple;
    }

    font-size: 16px;
    color: $purple;
}

.package-outofdate {
    margin: -5px -5px -5px -5px;
    font-size: 24px;
    color: $red;
}

.bt-num {
    font-size: $textsize;
    color: $btblue;
}
.bt-label-on {
    font-size: 20px;
    color: $btblue;
}
.bt-label-off {
    font-size: 24px;
    color: $btblue;
}
.bt-label-connected {
    font-size: 28px;
    color: $btblue;
}

.disk-util-progress {
    color: $purple;
    background-color: $inactive;
    font-size: $textsize;
}
.disk-data-text {
    color: $purple;
    font-size: $textsize;
}

.vram-util-progress {
    color: $orange;
    background-color: $inactive;
}
.vram-data-text {
    color: $orange;
    font-size: $textsize;
}

.ram-util-progress {
    color: $yellow;
    background-color: $inactive;
}
.ram-data-text {
    color: $yellow;
    font-size: $textsize;
}

.gpu-util-progress {
    color: $cyan;
    background-color: $inactive;
}
.gpu-data-text {
    color: $cyan;
    font-size: $textsize;
}

.cpu-util-progress {
    color: $green;
    background-color: $inactive;
    font-size: $textsize;
}
.cpu-data-text {
    color: $green;
    font-size: $textsize;
}

.battery-util-progress {
    color: $pink;
    background-color: $inactive;
    font-size: $textsize;
}
.battery-data-text {
    color: $pink;
    font-size: $textsize;
}

.network-data-text {
    color: $green;
    font-size: $textsize;
}

// <= 0% (Below MinUploadBytes)
.network-up-under {
    color: $inactive;
}
// <= 25%
.network-up-low {
    color: $green;
}
// <= 50%
.network-up-mid-low {
    color: $yellow;
}
// <= 75%
.network-up-mid-high {
    color: $orange;
}
// <= 100%
.network-up-high {
    color: $purple;
}
// > 100% (Above MaxUploadBytes)
.network-up-over {
    color: $red;
}

// <= 0% (Below MinDownloadBytes)
.network-down-under {
    color: $inactive;
}
// <= 25%
.network-down-low {
    color: $green;
}
// <= 50%
.network-down-mid-low {
    color: $yellow;
}
// <= 75%
.network-down-mid-high {
    color: $orange;
}
// <= 100%
.network-down-high {
    color: $purple;
}
// > 100% (Above MaxDownloadBytes)
.network-down-over {
    color: $red;
}

.ws-dead {
    color: $inactive;
    font-size: $textsize;
}
.ws-inactive {
    color: $darkblue;
    font-size: $textsize;
}
.ws-visible {
    color: $cyan;
    font-size: $textsize;
}
.ws-current {
    color: $yellow;
    font-size: $textsize;
}
.ws-active {
    color: $green;
    font-size: $textsize;
}

// Bluetooth Widget
@keyframes connectanim {
    from {
        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, transparent 0%, transparent 100%)
    }
    to {
        background-image: radial-gradient(circle farthest-side at center, $btblue 0%, $btblue 100%, transparent 100%)
    }
}
@keyframes disconnectanim {
    from {
        background-image: radial-gradient(circle farthest-side at center, transparent 0%, $btblue 0%, $btblue 100%)
    }
    to {
        background-image: radial-gradient(circle farthest-side at center, transparent 0%, transparent 100%, $btblue 100%)
    }
}

@keyframes scanonanim {
    from {
        color: $yellow;
    }
    to {
        color: $green;
    }
}
@keyframes scanoffanim {
    from {
        color: $green;
    }
    to {
        color: $yellow;
    }
}

.bt-bg {
    background-color: $bg;
    border-radius: 16px;
}
.bt-header-box {
    margin-top: 4px;
    margin-right: 8px;
    margin-left: 8px;
    font-size: 24px;
    color: $btblue;
} 
.bt-body-box {
    margin-right: 8px;
    margin-left: 8px;
}
.bt-button {
    &.active {
        animation-name: connectanim;
        animation-duration: 50ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    &.inactive {
        animation-name: disconnectanim;
        animation-duration: 50ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    &.failed {
        color: $red;
    }
    border-radius: 16px;
    padding-left: 8px;
    padding-right: 8px;
    padding-top: 4px;
    padding-bottom: 4px;

    margin-bottom: 4px;
    margin-top: 4px;

    font-size: 16px;
    // color: $green;
}
.bt-close {
    color: $red;
    background-color: $inactive;
    border-radius: 16px;
	padding: 0px 8px 0px 7px;
	margin: 0px 0px 0px 8px;
}
.bt-scan {
    &.active {
        animation-name: scanonanim;
        animation-duration: 50ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    &.inactive {
        animation-name: scanoffanim;
        animation-duration: 50ms;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
    }
    color: $yellow;
    background-color: $inactive;
    border-radius: 16px;
    padding: 2px 11px 0px 7px;
	margin: 0px 0px 0px 10px;
    font-size: 18px;
}