nixos-configuration/users/jalr/modules/mixxc/style.css

.side {
    $hide: false;

    .output {
        transition: background 750ms;
        padding: 5px;

        &.master {
            transition: background 0ms;
        }

        &.master:hover {
        }

        .icon {
            -gtk-icon-style: symbolic;
            -gtk-icon-size: 16px;
        }
    }

    @if $hide {
        min-height: 0;
        min-width:  0;

        .output {
            padding: 0;

            .icon {
                -gtk-icon-style: symbolic;
                -gtk-icon-size: 0;
            }
        }
    }
}

.main {
    margin: 20px;
}

.client {
    $hide-name: false;
    $hide-description: false;

    font-family: 'Iosevka Nerd Font';
    font-size: 1.2em;

    .icon {
        -gtk-icon-style: symbolic;
    }

    @if $hide-name {
        .name {
            font-size: 0;
        }
    }

    @if $hide-description {
        .description {
            font-size: 0;
        }
    }

    scale {
        trough {
            /* Slider Bar */
            border-radius: 10px;

            slider {
                /* Slider Knob */
                padding: 0;

                border: none;
                border-radius: 2px;

                transition-duration: 400ms;
            }

            highlight {
                /* Slider Bar Filled */
                border: none;
                border-radius: 10px;

                margin: 2px;

                transition: background-image 300ms;
            }

            fill {
                /* Slider Peak */
                background: none;

                border-radius: 10px;

                margin: 0px;
            }
        }
    }

    scale:active {
        trough slider {
            /* Slider Knob */
            transform: scale(1.1);
        }
    }
}

.client.horizontal {
    &.new {
        animation: client-add-horizontal 300ms ease;
    }

    &.removed {
        animation: client-remove-horizontal 300ms ease;
    }

    .icon {
        padding-right: 13px;

        -gtk-icon-size: 16px;
    }

    .volume {
        /* Numeric Volume Level */
        padding-left: 22px;
        padding-bottom: 3px;
    }

    scale {
        trough {
            /* Slider Bar */
            min-height: 6px;

            slider {
                /* Slider Knob */
                min-height: 21px;
                min-width: 9px;

                margin-top: -7px;
                margin-bottom: -7px;
            }
        }
    }

}

@keyframes client-add-horizontal {
    from {
        transform: translateX(-200px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes client-remove-horizontal {
    from {
        opacity: 1;
    }
    to {
        transform: translateX(-200px);
        opacity: 0;
    }
}

.client.vertical {
    &.new {
        animation: client-add-vertical 300ms ease;
    }

    &.removed {
        animation: client-remove-vertical 300ms ease;
    }

    .icon {
        padding-bottom: 5px;

        -gtk-icon-size: 20px;
    }

    .volume {
        /* Numeric Volume Level */
        padding-top: 10px;
    }

    scale {
        trough {
            /* Slider Bar */
            min-width: 4px;

            margin-top: 10px;

            slider {
                /* Slider Knob */
                margin-left: -7px;
                margin-right: -7px;

                min-height: 6px;
                min-width: 14px;
            }
        }
    }
}

@keyframes client-add-vertical {
    from {
        transform: translateY(200px);
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes client-remove-vertical {
    from {
        opacity: 1;
    }
    to {
        transform: translateY(200px);
        opacity: 0;
    }
}