TheaninovOS/overlays/asztal/widget/launcher/launcher.scss

@use "sass:math";
@use "sass:color";

window#launcher .launcher {
    @include floating_widget;

    .quicklaunch {
        @include spacing;

        button {
            @include button($flat: true);
            padding: $padding;
        }
    }

    entry {
        @include button;
        padding: $padding;
        margin: $spacing;

        selection {
            color: color.mix($fg, $bg, 50%);
            background-color: transparent;
        }

        label,
        image {
            color: $fg;
        }
    }

    image.spinner {
        color: $primary-bg;
        margin-right: $spacing;
    }

    separator {
        margin: 4pt 0;
        background-color: $popover-border-color;
    }

    button.app-item {
        @include button($flat: true, $reactive: false);

        >box {
            @include spacing(0.5);
        }

        transition: $transition;
        padding: $padding;

        label {
            transition: $transition;

            &.title {
                color: $fg;
            }

            &.description {
                color: transparentize($fg, 0.3);
            }
        }

        image {
            transition: $transition;
        }

        &:hover,
        &:focus {
            .title {
                color: $primary-bg;
            }

            .description {
                color: transparentize($primary-bg, .4);
            }

            image {
                -gtk-icon-shadow: 2px 2px $primary-bg;
            }
        }

        &:active {
            background-color: transparentize($primary-bg, 0.5);
            border-radius: $radius;
            box-shadow: inset 0 0 0 $border-width $border-color;

            .title {
                color: $fg;
            }
        }
    }

    button.help,
    button.nix-item {
        @include button($flat: true, $reactive: false);
        padding: 0 ($padding * .5);

        label {
            transition: $transition;
            color: $fg;
        }

        .name {
            font-size: 1.2em;
            font-weight: bold;
        }

        .description {
            color: transparentize($fg, .3)
        }

        &:hover,
        &:focus {
            label {
                text-shadow: $text-shadow;
            }

            .name,
            .version {
                color: $primary-bg;
            }

            .description {
                color: transparentize($primary-bg, .3)
            }
        }
    }

    button.sh-item {
        @include button($flat: true, $reactive: false);
        padding: 0 ($padding * .5);

        transition: $transition;
        color: $fg;

        &:hover,
        &:focus {
            color: $primary-bg;
            text-shadow: $text-shadow;
        }
    }
}