illogical-impulse/.config/ags/scss/_osd.scss

// .osd-window {
    // margin-top: 2.727rem;
// }

.osd-bg {
    min-width: 8.864rem;
    min-height: 3.409rem;
}

.osd-value {
    @include elevation-border;
    @include elevation2;
    background-color: $layer0;
    border-radius: 1.023rem;
    padding: 0.625rem 1.023rem;
    padding-top: 0.313rem;
}

.osd-progress {
    min-height: 0.955rem;
    min-width: 0.068rem;
    padding: 0rem;
    border-radius: 10rem;
    @include fluent_decel;

    trough {
        min-height: 0.954rem;
        min-width: 0.068rem;
        border-radius: 10rem;
        background-color: $layer2;
        // border: 0.068rem solid $onSecondaryContainer;
    }

    progress {
        @include fluent_decel;
        min-height: 0.680rem;
        min-width: 0.680rem;
        margin: 0rem 0.137rem;
        border-radius: 10rem;
        background-color: $onLayer2;
    }
}

.osd-label {
    font-size: 1.023rem;
    font-weight: 500;
    margin-top: 0.341rem;
}

.osd-value-txt {
    @include titlefont;
    font-size: 1.688rem;
    font-weight: 500;
    color: $onLayer0;
}

.osd-brightness {
    color: $brightnessOnLayer0;
}
.osd-brightness-progress {
    progress {
        background-color: $brightnessOnLayer0;
    }
}
.osd-volume {
    color: $volumeOnLayer0;
}
.osd-volume-progress {
    progress {
        background-color: $volumeOnLayer0;
    }
}

.osd-notifs {
    padding-top: 0.313rem;
}

.osd-colorscheme {
    border-radius: 1.023rem;
    background-color: $layer0;
    padding: 1.023rem;
    @include elevation2;
}

.osd-color {
    @include full-rounding;
    min-width: 2.727rem;
    min-height: 1.705rem;
    padding: 0rem 0.341rem;
    font-weight: bold;

    box {
        @include full-rounding;
        margin: 0.409rem;
    }
}

.osd-color-primary {
    background-color: $primary;
    color: $onPrimary;
    box { background-color: $onPrimary; }
}
.osd-color-primaryContainer {
    background-color: $primaryContainer;
    color: $onPrimaryContainer;
    box { background-color: $onPrimaryContainer; }
}
.osd-color-secondary {
    background-color: $secondary;
    color: $onSecondary;
    box { background-color: $onSecondary; }
}
.osd-color-secondaryContainer {
    background-color: $secondaryContainer;
    color: $onSecondaryContainer;
    box { background-color: $onSecondaryContainer; }
}
.osd-color-surfaceVariant {
    background-color: $surfaceVariant;
    color: $onSurfaceVariant;
    box { background-color: $onSurfaceVariant; }
}
.osd-color-L1 {
    background-color: $layer1;
    color: $onLayer1;
    box { background-color: $onLayer1; }
}
.osd-color-layer0 {
    background-color: $layer0;
    color: $onLayer0;
    box { background-color: $onLayer0; }
}

.osd-show {
    transition: 200ms cubic-bezier(0.1, 1, 0, 1);
}

.osd-hide {
    transition: 190ms cubic-bezier(0.85, 0, 0.15, 1);
}