web/styles/search.css - main - githubmirror/zulip

web/styles/search.css
474 строки13 KB
JoeJoeflyn
search: Fix caret overlapping text in search bar.
10 авг 2026, 04:11
10 авг 2026, 04:117d16ef5
#searchbox {
    width: 100%;
    height: var(--header-height);

    .navbar-search {
        margin: 0.2187em 0; /* 3.5px at 16px em */
        border-radius: 5px;
        position: absolute;
        overflow: hidden;
        /* We bump the z-index to keep the search box
           clickable despite position-based layout
           adjustments. */
        z-index: 1;
    }

    .navbar-search:has(#searchbox-input-container:focus-visible) {
        outline: 2px solid var(--color-outline-focus);
    }

    .search_icon {
        grid-area: search-icon;
        align-self: center;
        text-decoration: none;
        padding: 0 0.4117em; /* 7px at 17px em */
        font-size: 1.0625em; /* 17px at 16px em */
        border: none;
        background-color: transparent;
        color: var(--color-search-icons);
        opacity: 0.5;
        cursor: default;

        &:active,
        &:focus {
            outline: none;
        }

        &:disabled {
            visibility: hidden;
        }
    }

    .search_close_button {
        grid-area: search-close;
        width: 1.75em; /* 28px at 16px em */
        height: 100%;
        background: none;
        border: none;
        opacity: 0.5;
        line-height: 0;
        border-radius: 4px;
        /* Reset iOS button defaults. */
        color: var(--color-search-icons);
        padding: 0;
        outline: none;
        font-size: inherit;

        &:hover {
            opacity: 1;
        }

        &:focus-visible {
            outline: 2px solid var(--color-outline-focus);
            outline-offset: -3px;
        }

        &:disabled {
            visibility: hidden;
        }
    }

    .search-input-and-pills {
        grid-area: search-pills;
        display: flex;
        /* Match the pills' single-line centering slack so wrapped rows
           get the same breathing room without changing the single-line
           box height. */
        padding: calc((var(--search-box-height) - var(--height-input-pill)) / 2)
            0;
        flex-wrap: wrap;
        gap: 0.3571em; /* 5px at 14px em, matches pill spacing in typeahead dropdown */
        align-self: center;
    }

    .navbar-search:not(.expanded) {
        right: 0;
        background-color: var(--color-background-search-collapsed);

        .search_close_button {
            display: none;
        }

        #searchbox-input-container {
            width: var(--search-box-width);

            @media (width < $md_min) {
                /* Square off the icon-only presentation. */
                width: var(--search-box-height);
                grid-template:
                    "search-icon search-pills" var(--search-box-height)
                    / var(--search-box-height) 0;
                column-gap: 0;
            }
        }

        .search-input {
            border-radius: 5px;
            color: var(--color-text-search);
            box-shadow: none;
        }

        &:hover {
            cursor: pointer;

            @media (width >= $md_min) {
                box-shadow:
                    0 4px 20px var(--color-search-box-hover-shadow),
                    0 1px 5px var(--color-search-box-hover-shadow);
            }

            .search_icon {
                cursor: pointer;
            }
        }

        @media (width < $md_min) {
            .search-input {
                opacity: 0;
            }
        }

        @media (height < $short_navbar_cutoff_height) {
            #searchbox-input-container .search_icon {
                font-size: 1.125em; /* 18px at 16px/em */
            }
        }
    }

    .navbar-search.expanded {
        width: 100%;
        box-shadow:
            0 4px 20px var(--color-search-shadow-wide),
            0 1px 5px var(--color-search-shadow-tight);

        .search-input {
            cursor: text;
        }

        #searchbox-input-container.pill-container {
            /* Pill container should display the same background
               color as the search typeahead. */
            background-color: var(--color-background-search);
        }

        @media (width < $md_min) {
            /* 3px chosen so that the cursor clicks the search button
               and close button from the same position. */
            width: calc(100% - 3px);
            /* z-index to not see the gear icon underneath */
            z-index: 1;
        }
    }

    .typeahead.dropdown-menu {
        /* Match the typeahead's width to its parent container. */
        right: 0;
        top: 0;
        margin-top: 0;
        padding-top: 0;
        box-shadow: none;
        position: relative;
        width: 100%;
        background: var(--color-background-search);
        color: var(--color-text-search);

        border-width: 0;
        border-top-width: 1px;
        border-top-color: var(--color-search-dropdown-top-border);
        border-radius: 0 0 4px 4px;

        .active > a {
            background-color: var(--color-background-search-option-hover);
            background-image: none;
            color: var(--color-text-search-hover);
        }

        .typeahead-menu .simplebar-content {
            min-width: unset;
        }

        .typeahead-menu .simplebar-content > li > a {
            max-width: none;
        }
    }

    .input-append {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 0;
    }

    .search-input {
        /* Avoid massive inheritance chain on font-size. */
        font-size: var(--base-font-size-px);
        /* override bootstrap padding for input[type="text"] */
        padding: 0;
        border: none;
        outline: none;
        border-radius: 0;
        font-weight: 400;
        background: transparent;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: pre;
        flex-grow: 1;

        color: var(--color-text-search);

        display: block;
        align-self: center;

        &:empty::before {
            content: attr(data-placeholder-text);
            color: var(--color-text-search-placeholder);
        }
    }

    #searchbox-input-container .user-pill-container,
    .typeahead-menu .user-pill-container {
        border: 1px solid transparent;

        > .pill-label {
            min-width: fit-content;
            white-space: nowrap;
            width: fit-content;
            /* Replaced by the 5px gap. */
            margin-right: 0;
        }

        .pill {
            height: var(--length-user-pill-height);
        }

        .pill-image {
            height: var(--length-search-pill-image);
            width: var(--length-search-pill-image);
        }

        .pill-image-border {
            border: none;
        }

        .pill:not(.deactivated-pill) {
            background-color: var(--color-background-user-pill);
        }
    }

    #searchbox-input-container {
        display: grid;
        /* The next two styles override .input-append style from app_components.js */
        letter-spacing: normal;
        font-size: 100%;
        /* Override style for .pill-container that isn't relevant for search. */
        border: none;
        grid-template:
            "search-icon search-pills search-close" var(--search-box-height)
            ". search-pills ." auto / var(--search-left-padding) minmax(0, 1fr)
            1.75em; /* 28px at 16px em */
        align-content: center;
        cursor: pointer;

        /* Override styles for .pill-container that aren't relevant for search. */
        &.pill-container {
            background: inherit;
            gap: 0;
            /* Override padding. */
            padding: 0;
        }

        .pill {
            margin: 0;
            min-width: unset;
            background-color: var(--color-background-input-pill-search);
        }

        &:not(.focused) {
            height: var(--search-box-height);
            overflow: hidden;

            .search-input-and-pills {
                flex-wrap: nowrap;
                overflow: hidden;

                @media (height < $short_navbar_cutoff_height) {
                    line-height: var(--base-line-height-unitless);
                }
            }
        }

        &.focused .user-pill-container {
            flex-flow: row wrap;
        }

        .user-pill-container {
            gap: 2px 5px;
            /* Don't enforce a height, as user-pill containers
                can contain multiple user pills that wrap onto
                new lines. */
            height: unset;

            /* Not focus-visible, because we want to support mouse+backpace
                to delete pills */
            &:focus {
                /* Unlike regular `.pill` this multi-user pill has a border,
                    so we use border instead of box-shadow on focus. */
                box-shadow: none;
                border-color: var(--color-focus-outline-input-pill);
            }

            > .pill-label {
                /* Don't inherit large line-height for user pill labels. */
                line-height: 1.1;
            }

            .pill {
                border: none;
                /* Match border radius to image */
                border-radius: 4px;
                max-width: none;
                /* Set the minimum width on the pill container;
                    this accommodates the avatar, a minimum
                    two-character username, and the closing X.
                    90px at 20px/1em.

                TODO: This would ideally be reworked, as we need to
                override it for search suggestion pills (with no X) below.
               */
                min-width: 4.5em;
                display: grid;
                grid-template-columns:
                    var(--length-search-pill-image) minmax(0, 1fr)
                    calc(
                        var(--length-input-pill-exit) +
                            var(--length-input-pill-exit-margin)
                    );
                align-content: center;
                /* Don't inherit large line-height for user pills themselves, either. */
                line-height: 1.1;
            }
        }
    }

    @media (width >= $md_min) {
        .navbar-search {
            background: var(--color-background-search);
        }

        .navbar-search:not(.expanded) {
            box-shadow: 0 0 2px var(--color-search-box-hover-shadow);
        }
    }

    @media (width < $md_min) {
        .navbar-search:not(.expanded) .search_icon:hover {
            opacity: 1;
        }

        .navbar-search.expanded {
            background: var(--color-background-search);
        }
    }

    @media (height < $short_navbar_cutoff_height) {
        #searchbox_form:not(.expanded) {
            margin: 0;
            /* Now that the header is shorter, the search box will take up the whole
               height (which looks weird), so add 1px of space above and below it
               by manipulating the margin and the height. */
            margin-top: 1px;
            height: calc(var(--header-height) - 3px);
        }

        /* It looks fine to fill the navbar when the typeahead is open. */
        #searchbox_form.expanded {
            margin-top: 1px;
        }
    }

    @media (width < $sm_min) {
        #searchbox_form.expanded {
            position: fixed;
            left: 0;
            right: 9px;
            width: 100%;
            border-radius: 0;
            box-shadow: none;
            /* To be visible over `.left-sidebar-toggle-unreadcount` */
            z-index: 20;
        }
    }

    .typeahead-menu .simplebar-content > li > a {
        padding: 3px var(--search-left-padding);
        /* Override white-space: nowrap from zulip.css */
        white-space: normal;

        .search_list_item {
            max-width: 100%;
            display: flex;
            gap: 5px;
            align-items: center;
        }

        .search_list_item .description {
            margin: 2px 0;
        }

        .search_list_item .pill-container {
            margin: 2px 0;
            /* This contains only one pill, which handles its own border */
            border: none;
            cursor: pointer;
            padding: 0;
            max-width: 100%;
        }

        .pill {
            align-items: baseline;
            margin: 0;

            /* We remove the close button's column space from the grid template
               for search suggestions, since there's no exit button.
               The min-width here prevents extra space on very short names. */
            min-width: 0;
            grid-template-columns: var(--length-search-pill-image) minmax(
                    0,
                    1fr
                );

            /* We don't show a border for focused pills
               in the search typeahead */
            &:focus {
                /* Regular pills use box-shadow. */
                box-shadow: none;

                /* User pills use border */
                border-color: var(--color-background-input-pill);

                .pill-image-border {
                    border-color: var(--color-border-input-pill-image);
                }
            }

            .exit {
                display: none;
            }
        }

        .user-pill-container {
            gap: 5px;
        }

        .pill-image {
            /* Add line-height equal to height to mimic baseline alignment. */
            line-height: var(--height-input-pill);
            align-self: center;
        }
    }

    /* Break really long words (unlikely to happen). */
    .search_list_item span {
        overflow-wrap: anywhere;
    }
}