basb-cli/frontend/styles/components/searchBox.css

Blog as Second Brain!

search-box .container {
    --search-box-height: calc(2rem + 18px);

    position: fixed;
    top: 1rem;
    left: calc(var(--page-horizonal-padding));
    right: calc(var(--page-horizonal-padding));
    padding: 0 8px;
    box-sizing: border-box;
    transform: translateY(calc(-2rem - var(--search-box-height)));
    transition: transform .3s,
                opacity .3s;
}

@media screen and (max-width: 767px) {
    search-box .container {
        padding: 0 1rem;
    }
}

search-box .container.show {
    transform: translateY(0);
}

search-box .container input {
    width: 100%;
    height: 100%;
    padding-left: 12px;
}

search-box .container button {
    height: 100%;
}

body.dark search-box .container img {
    filter: invert(1);
}

/* --- --- --- --- --- --- */

search-box .container .input-group {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr calc(3rem);
    height: var(--search-box-height);
    background-color: var(--dimmed-bg-color);
    box-shadow: var(--shadow-sm);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .3s;
}

search-box .container .input-group img {
    width: 100%;
}

search-box .container .input-group button {
    outline: none;
}
search-box .container .input-group button:focus {
    border-color: var(--default-tx-color);
}

search-box .container .input-group:hover,
search-box .container .input-group:focus-within {
    box-shadow: var(--shadow-md-1);
}

search-box .container .result-container {
    max-height: calc(100vh - var(--search-box-height) - 3rem);
    box-sizing: border-box;
    border-radius: 8px;
    margin: 1rem -8px 0;
    padding: 1rem;
    background-color: var(--default-bg-color);
    box-shadow: var(--shadow-sm);
    overflow-y: auto;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
}

search-box .container .result-container:not(.show) {
    pointer-events: none !important;
}
search-box .container .result-container.show {
    opacity: 1;
}

search-box .container .result-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

search-box .container .result-container .no-result {
    display: none;
    text-align: center;
    user-select: none;
    opacity: .6;
}
search-box .container .result-container ul:empty + .no-result {
    display: block;
}

search-box .container .result-container li {
    padding: .6rem 1rem;
    color: var(--default-tx-color);
    background-color: var(--allpage-bg-color);
    cursor: pointer;

    /* text overflow */
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
search-box .container .result-container li:hover {
    background-color: var(--hovered-bg-color);
}
search-box .container .result-container li::before {
    content: "🔗";
    margin-right: .2rem;
}

search-box .container .result-container .loadmore-btn {
    display: none;
    margin: .6rem auto 0;
    padding: 8px 12px;
    font-size: 1rem;
}
search-box .container .result-container .loadmore-btn.show {
    display: block;
}