nosignal-shell/scss/launcher.scss

@use "sass:color";
@use "scheme";
@use "lib";
@use "font";

@mixin launcher($mode, $colour) {
    &.#{$mode} {
        @include lib.border($colour, 0.7, 2);

        label.icon {
            color: $colour;
        }

        .separator {
            background-color: color.change($colour, $alpha: 0.7);
        }

        .result:focus {
            color: $colour;

            .sublabel {
                color: color.mix(scheme.$subtext0, $colour, 60%);
            }
        }

        &.lines {
            .search-bar {
                .mode {
                    @include lib.border($colour, $width: 2, $force: true);
                }

                .entry {
                    border-bottom: lib.s(2) solid $colour;
                }
            }

            .mode-switcher .mode {
                &.selected {
                    border-top: lib.s(2) solid $colour;
                }

                &:hover,
                &:focus {
                    color: $colour;
                }

                &:active {
                    color: color.mix($colour, scheme.$base, 80%);
                }
            }

            .result:focus {
                border-bottom: lib.s(2) solid $colour;
            }
        }

        &.round {
            .search-bar .mode {
                background-color: $colour;
            }

            .mode-switcher .mode.selected {
                color: $colour;
            }
        }
    }
}

.launcher {
    @include lib.rounded(10);
    @include lib.element-decel;
    @include lib.shadow;
    @include font.mono;

    background-color: scheme.$base;
    color: scheme.$text;
    padding: lib.s(14);
    font-size: lib.s(16);
    min-width: lib.s(700);
    min-height: lib.s(420);

    @include launcher(apps, scheme.$primary);
    @include launcher(files, scheme.$secondary);
    @include launcher(math, scheme.$tertiary);

    .search-bar {
        margin-bottom: lib.s(15);

        @include lib.spacing(10);

        .mode {
            @include lib.rounded(5);
            @include lib.element-decel;

            padding: lib.s(5) lib.s(10);

            @include lib.spacing(3);

            .icon {
                font-size: lib.s(20);
            }
        }
    }

    .mode-switcher .mode {
        @include lib.element-decel;

        padding-top: lib.s(10);

        .icon {
            font-size: lib.s(24);
        }

        & > box {
            @include lib.spacing(10);
        }
    }

    .result {
        @include lib.element-decel;

        padding-left: lib.s(10);

        .icon {
            font-size: lib.s(32);
        }

        .has-sublabel {
            padding: lib.s(3) 0;
        }

        .sublabel {
            @include lib.element-decel;

            color: scheme.$subtext0;
            font-size: lib.s(14);
        }

        & > box {
            @include lib.spacing(10);
        }

        &.italic {
            font-style: italic;
        }

        &:hover {
            background-color: scheme.$surface0;
        }

        &:active {
            background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
        }
    }

    .math {
        .preview > * {
            margin-bottom: lib.s(10);
        }

        .result {
            @include lib.spacing(10);
        }
    }

    .swatches {
        margin-bottom: lib.s(5);

        @include lib.spacing(3);
    }

    .swatch {
        @include lib.rounded(100);

        min-width: lib.s(16);
        min-height: lib.s(16);

        &.big {
            min-height: lib.s(32);

            &.left {
                @include lib.border(scheme.$overlay0, 0.3, $force: true);

                border-right: none;
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
            }

            &.right {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }
        }
    }

    .wallpaper {
        .thumbnail {
            background-size: cover;
            background-position: center;
        }

        &.compact .thumbnail {
            @include lib.rounded(100);

            min-width: lib.s(32);
            min-height: lib.s(32);
        }

        &:not(.compact) {
            @include lib.spacing(3, true);

            .thumbnail {
                @include lib.rounded(10);

                & > * {
                    background-size: cover;
                    background-position: center;

                    &:first-child {
                        @include lib.rounded(10, $tr: 0, $br: 0);
                    }

                    &:last-child {
                        @include lib.rounded(10, $tl: 0, $bl: 0);
                    }
                }
            }
        }

        &.medium .thumbnail {
            min-height: lib.s(96);
        }

        &.large .thumbnail {
            min-height: lib.s(160);
        }
    }

    &.lines {
        .mode-switcher .mode {
            border-top: lib.s(2) solid transparent;
        }

        .result {
            border-bottom: lib.s(2) solid transparent;
        }

        .wallpaper {
            padding-top: lib.s(5);

            &.compact {
                padding-top: lib.s(3);
                padding-bottom: lib.s(3);
            }
        }
    }

    &.round {
        .search-bar {
            .mode {
                @include lib.rounded(10);

                color: color.change(scheme.$base, $alpha: 1);

                .icon {
                    color: color.change(scheme.$base, $alpha: 1);
                }
            }

            .entry {
                @include lib.rounded(10);

                padding: lib.s(5) lib.s(10);
                background-color: color.mix(scheme.$base, scheme.$surface0, 30%);
            }
        }

        .mode-switcher {
            padding-top: lib.s(10);

            @include lib.spacing(10);

            .mode {
                @include lib.rounded(10);

                padding: lib.s(5);
                background-color: color.mix(scheme.$base, scheme.$surface0, 50%);

                &:not(.selected) .icon {
                    color: scheme.$text;
                }

                &:hover,
                &:focus {
                    background-color: scheme.$surface0;
                }

                &:active {
                    background-color: color.mix(scheme.$surface0, scheme.$surface1, 70%);
                }
            }
        }

        .result {
            @include lib.rounded(10);

            padding-right: lib.s(10);
            margin-bottom: lib.s(5);
            margin-right: lib.s(5);

            &:focus {
                background-color: scheme.$surface0;
            }
        }

        .math .preview .result {
            @include lib.rounded(20);

            background-color: scheme.$surface0;
            padding: lib.s(5) lib.s(10);
        }

        .wallpaper-container {
            padding-right: 0;

            .wallpaper:not(.compact) {
                padding-top: lib.s(8);
                padding-bottom: lib.s(3);
            }
        }
    }
}