ThreadNet-Web/apps/web/res/css/views/dialogs/_SpotlightDialog.pcss

/*
Copyright 2024 New Vector Ltd.
Copyright 2021 The Matrix.org Foundation C.I.C.

SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/

.mx_SpotlightDialog_wrapper {
    .mx_Dialog_border {
        /* Disable the glass border as this dialog wasn't designed with it in mind */
        display: contents;
    }

    .mx_Dialog {
        /* !important because it's overriding compound  */
        width: fit-content !important;
        border-radius: 8px !important;
        height: 60% !important;
        overflow-y: initial;
        position: relative;
        padding: 0;
        contain: unset; /* needed for #mx_SpotlightDialog_keyboardPrompt to not be culled */

        #mx_SpotlightDialog_keyboardPrompt {
            position: absolute;
            padding: var(--cpd-space-2x);
            border-radius: 8px;
            background-color: $background;
            top: -60px; /* relative to the top of the modal */
            left: 50%;
            transform: translateX(-50%);
            font-size: $font-12px;
            line-height: $font-15px;
            color: $secondary-content;

            kbd {
                display: inline-block;
                padding: 2px var(--cpd-space-1x);
                margin: 0 var(--cpd-space-1x);
                border-radius: 6px;
                background-color: $quinary-content;
                vertical-align: middle;
                color: $tertiary-content;
                /* To avoid any styling inherent with <kbd> elements */
                font-family: inherit;
                font-weight: inherit;
                font-size: inherit;
            }
        }
    }
}

.mx_SpotlightDialog {
    height: 100%;
    display: flex;
    flex-direction: column;

    .mx_Dialog_header {
        display: none;
    }

    .mx_SpotlightDialog_searchBox {
        margin: 0;
        border: none;
        border-radius: 8px 8px 0 0;
        padding: var(--cpd-space-3x) var(--cpd-space-4x);
        border-bottom: 1px solid $system;

        > .mx_SpotlightDialog_filter {
            display: flex;
            align-content: center;
            align-items: center;
            border-radius: 8px;
            margin-right: var(--cpd-space-2x);
            background-color: $quinary-content;
            vertical-align: middle;
            color: $primary-content;
            position: relative;
            padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px;

            > svg {
                color: $secondary-content;
                width: 18px;
                height: 18px;
                position: absolute;
                left: var(--cpd-space-2x);
                top: 50%;
                transform: translateY(-50%);
            }

            .mx_SpotlightDialog_filter--close {
                display: inline-block;
                width: 14px;
                height: 14px;
                padding: 1px;
                background: $system;
                border-radius: 8px;
                margin-left: var(--cpd-space-2x);
                text-align: center;
                line-height: 16px;
                color: $secondary-content;

                svg {
                    color: $secondary-content;
                    width: inherit;
                    height: inherit;
                }
            }
        }

        > input {
            display: block;
            box-sizing: border-box;
            background-color: transparent;
            width: 100%;
            height: 32px;
            padding: 0;
            color: $tertiary-content;
            font-weight: normal;
            font-size: $font-15px;
            line-height: $font-24px;
        }

        > .mx_Spinner {
            flex-grow: 0;
            width: unset;
            height: unset;
            margin-left: var(--cpd-space-4x);
        }

        &:not(:focus-within) + #mx_SpotlightDialog_content {
            /* Inhibit the styling if focus is not within the input which handles keyboard accessibility */
            --mx_SpotlightDialog_option_selectedBgColor: transparent;

            /* Hide the enter prompt as in this state pressing enter would not actuate that option */
            .mx_SpotlightDialog_enterPrompt {
                visibility: hidden;
            }
        }
    }

    #mx_SpotlightDialog_content {
        height: 100%;
        overflow-y: auto;
        padding: var(--cpd-space-4x);

        ul {
            padding: 0;
            margin: 0;
        }

        .mx_SpotlightDialog_section {
            > h4,
            > .mx_SpotlightDialog_sectionHeader > h4 {
                font-weight: var(--cpd-font-weight-semibold);
                font-size: $font-12px;
                line-height: $font-15px;
                color: $secondary-content;
                margin: 0;
            }

            > h4 {
                margin-bottom: var(--cpd-space-2x);
            }

            .mx_SpotlightDialog_sectionHeader {
                display: flex;
                justify-content: space-between;
                align-items: center;
                margin-bottom: var(--cpd-space-2x);

                .mx_SpotlightDialog_options {
                    display: flex;
                    gap: var(--cpd-space-1x);
                }
            }

            & + .mx_SpotlightDialog_section {
                margin-top: var(--cpd-space-6x);
            }
        }

        .mx_SpotlightDialog_option {
            border-radius: 8px;
            overflow: hidden;
            text-overflow: ellipsis;

            &:hover,
            &[aria-selected="true"] {
                background-color: var(--mx_SpotlightDialog_option_selectedBgColor, $quinary-content);
            }
        }

        .mx_SpotlightDialog_recentlyViewed {
            > div {
                display: flex;
                white-space: nowrap;
                overflow-x: hidden;
                margin-right: 1px; /* occlude the 1px visible of the very next tile to prevent it looking broken */
            }

            .mx_SpotlightDialog_option {
                padding: var(--cpd-space-1x);
                color: $primary-content;
                font-size: $font-12px;
                line-height: $font-15px;
                display: inline-block;
                width: 58px;
                height: 58px;
                min-width: 58px;
                box-sizing: border-box;
                text-align: center;

                .mx_DecoratedRoomAvatar {
                    margin: 0 9px var(--cpd-space-1x); /* maintain centering */
                }

                & + .mx_SpotlightDialog_option {
                    margin-left: var(--cpd-space-4x);
                }
            }
        }

        .mx_SpotlightDialog_results,
        .mx_SpotlightDialog_recentSearches,
        .mx_SpotlightDialog_otherSearches,
        .mx_SpotlightDialog_hiddenResults {
            .mx_SpotlightDialog_option {
                --mx_SpotlightDialog_option_selectedBgColor: $system;

                padding: 6px var(--cpd-space-1x);
                font-size: $font-15px;
                line-height: $font-24px;
                color: $primary-content;
                position: relative;
                display: flex;
                align-items: center;
                white-space: nowrap;

                .mx_SpotlightDialog_option--endAdornment {
                    display: inline-flex;
                    flex-direction: row;
                    margin-left: auto;
                    align-items: flex-start;
                }

                &.mx_SpotlightDialog_result_multiline {
                    align-items: flex-start;

                    .mx_AccessibleButton {
                        padding: var(--cpd-space-1x) var(--cpd-space-5x);
                        margin: 2px var(--cpd-space-1x);
                    }

                    .mx_SpotlightDialog_enterPrompt {
                        margin-top: 9px;
                        margin-right: var(--cpd-space-2x);
                    }
                }

                .mx_SpotlightDialog_result_name {
                    min-width: 0;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

                > .mx_SpotlightDialog_metaspaceResult,
                > .mx_DecoratedRoomAvatar,
                > .mx_BaseAvatar {
                    margin-right: var(--cpd-space-2x);
                    width: 24px;
                    height: 24px;
                    flex-shrink: 0;

                    .mx_BaseAvatar {
                        width: inherit;
                        height: inherit;
                    }
                }

                .mx_SpotlightDialog_result_publicRoomDetails {
                    display: flex;
                    flex-direction: column;
                    flex-grow: 1;
                    min-width: 0;

                    .mx_SpotlightDialog_result_publicRoomHeader {
                        display: flex;
                        flex-direction: row;
                        line-height: $font-24px;
                        margin-right: var(--cpd-space-2x);

                        .mx_SpotlightDialog_result_publicRoomName {
                            color: $primary-content;
                            font-size: $font-15px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        .mx_SpotlightDialog_result_publicRoomAlias {
                            color: $tertiary-content;
                            font-size: $font-12px;
                            margin-left: var(--cpd-space-2x);
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                    }
                    .mx_SpotlightDialog_result_publicRoomDescription {
                        color: $secondary-content;
                        font-size: $font-12px;
                        white-space: normal;
                        word-wrap: break-word;
                        line-height: $font-20px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 3;
                        overflow: hidden;
                    }
                }

                .mx_SpotlightDialog_notificationBadge {
                    margin-left: var(--cpd-space-2x);
                }

                .mx_SpotlightDialog_option--menu,
                .mx_SpotlightDialog_option--notifications {
                    width: 16px;
                    height: 16px;
                    padding: var(--cpd-space-0-5x);
                    flex-shrink: 0;
                    margin-top: auto;
                    margin-bottom: auto;
                    position: relative;
                    display: none;

                    svg {
                        width: inherit;
                        height: inherit;
                        display: block;
                        color: $tertiary-content;
                    }

                    &:hover svg,
                    &:focus-visible svg {
                        color: $secondary-content;
                    }
                }

                &:hover,
                &[aria-selected="true"] {
                    .mx_SpotlightDialog_option--menu,
                    .mx_SpotlightDialog_option--notifications {
                        display: block;
                    }
                }

                &[aria-selected="true"] .mx_SpotlightDialog_enterPrompt {
                    display: inline-block;
                }
            }
        }

        .mx_SpotlightDialog_inviteLink,
        .mx_SpotlightDialog_createRoom {
            margin-top: var(--cpd-space-2x);

            .mx_AccessibleButton {
                position: relative;
                margin: 0;
                padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);

                svg {
                    display: block;
                    position: absolute;
                    left: var(--cpd-space-2x);
                    width: 16px;
                    height: 16px;
                    color: var(--cpd-color-icon-primary);
                }
            }
        }

        .mx_SpotlightDialog_otherSearches {
            .mx_SpotlightDialog_option {
                padding-left: var(--cpd-space-8x);
                position: relative;

                svg {
                    color: $secondary-content;
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    left: var(--cpd-space-1x);
                    top: 50%;
                    transform: translateY(-50%);
                }
            }

            .mx_SpotlightDialog_otherSearches_messageSearchText {
                font-size: $font-15px;
                line-height: $font-24px;
            }
        }

        .mx_SpotlightDialog_result_details {
            margin-left: var(--cpd-space-2x);
            margin-right: var(--cpd-space-2x);
            color: $tertiary-content;
            font-size: $font-12px;
            line-height: $font-15px;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .mx_SpotlightDialog_recentSearches > h4 > .mx_AccessibleButton_kind_link {
            float: right;
            font-size: $font-12px;
            line-height: $font-15px;
            color: $secondary-content;
        }

        .mx_SpotlightDialog_enterPrompt {
            padding: 2px var(--cpd-space-1x);
            /* To avoid any styling inherent with <kbd> elements */
            font-family: inherit;
            font-weight: inherit;
            font-size: $font-12px;
            line-height: $font-15px;
            color: $tertiary-content;
            border-radius: 6px;
            background-color: $quinary-content;
            margin-right: var(--cpd-space-1x);
            display: none;
        }

        .mx_SpotlightDialog_metaspaceResult svg {
            color: $secondary-content;
            width: inherit;
            height: inherit;
        }
    }
}