victorwesterlund.com/public/assets/css/search.css

/* Victor Westerlund - www.victorwesterlund.com */
:root {
    --padding: 20px;
    --max-width: 800px;
}

html,
body {
    justify-content: flex-start;
}

header {
    display: flex;
    align-items: center;
    height: 100px;
    min-height: 80px;
    flex: none;
}

header h1 {
    font-size: clamp(16px,5vw,25px);
    font-weight: normal;
}

/* -- Searchbox -- */

#search input {
    background-color: var(--swatch-contrast);
    color: var(--swatch-background);
    border: none;
    font-size: 16px;
    width: calc(100vw - (var(--padding) * 2));
    max-width: var(--max-width);
    text-transform: lowercase;
    padding: var(--padding);
}

#search input::placeholder {
    color: rgba(var(--palette-background),.4);
}

#search input::selection {
    color: var(--swatch-contrast);
    background-color: var(--swatch-background);
}

#search input:focus {
    outline: none;
}

/* -- Results -- */

#results {
    width: calc(var(--max-width) + (var(--padding) * 4));
    max-width: 100%;
    box-sizing: border-box;
    padding: var(--padding);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    gap: var(--padding);
}

#results > p {
    text-align: center;
}

#results > p.error {
    color: red;
}

#results > p.error::before {
    content: "😰 ";
}

.card {
    --padding-multiplier: 1.2;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: calc(var(--padding) * var(--padding-multiplier));
    padding: calc(var(--padding) * var(--padding-multiplier));
    box-sizing: border-box;
    width: 100%;
    overflow: auto;
    border: solid 1px var(--swatch-contrast);
}

.card > div {
    --icon-size: 40px;
    display: grid;
    grid-template-columns: var(--icon-size) 1fr;
    align-items: center;
    font-weight: bold;
    gap: calc(var(--padding) * var(--padding-multiplier));
}

.card > div *:not(p) {
    width: var(--icon-size);
}

.card > div p {
    font-size: clamp(16px,1vw,20px);
    word-break: break-word;
}

/* -- Results > Types -- */

.card.error {
    gap: unset;
}

.card.error p > a {
    background-color: rgba(var(--palette-contrast),.1);
}

.resultsFooter {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.resultsFooter p {
    text-align: center;
    padding: 0 var(--padding);
}

.resultsFooter p span:last-child {
    display: none;
}

.resultsFooter svg {
    width: 41px;
    height: 40px;
    flex: none;
}

.resultsFooter svg polygon {
    fill: none;
    stroke: rgba(var(--palette-contrast),.1);
    stroke-width: 1px;
}

.resultsFooter svg.active polygon {
    fill: var(--swatch-contrast);
    stroke: var(--swatch-contrast);
}

/* ---- */

.button {
    padding: var(--padding);
    text-align: center;
    background-color: var(--swatch-contrast);
    color: var(--swatch-background);
    box-shadow: inset 0 0 0 2px var(--swatch-contrast);
    user-select: none;
}

/* -- Media Queries -- */

@media (max-width: 300px) {
    .card > div {
        grid-template-columns: 1fr;
    }

    .card > div *:not(p) {
        display: none;
    }
}

@media (min-width: 600px) {
    .resultsFooter p span:last-child {
        display: initial;
    }
}

@media (hover: hover) {
    .button:hover {
        background-color: rgba(var(--palette-contrast),0);
        color: var(--swatch-contrast);
        cursor: pointer;
    }

    .button:active {
        background-color: rgba(var(--palette-contrast),.1);
        color: var(--swatch-contrast);
        cursor: pointer;
    }

    /* ---- */

    .resultsFooter svg.active:hover polygon {
        fill: var(--swatch-background);
        cursor: pointer;
    }

    .resultsFooter svg.active:active polygon {
        fill: rgba(var(--palette-contrast),.1);
    }
}

@media (pointer: fine) {
    #search input:focus {
        outline: solid 5px rgba(var(--palette-contrast),.2);
    }

    /* ---- */

    #results::-webkit-scrollbar {
        width: 10px;
    }
    
    #results::-webkit-scrollbar-track {
        background-color: rgba(var(--palette-contrast),.04);
    }
    
    #results::-webkit-scrollbar-thumb {
        background: var(--swatch-contrast);
    }

    #results::-webkit-scrollbar-thumb:hover {
        background: var(--swatch-background);
        outline: solid 2px rgba(var(--palette-contrast),1);
    }

    #results::-webkit-scrollbar-thumb:active {
        background: rgba(var(--palette-contrast),.1);
        outline: solid 2px rgba(var(--palette-contrast),1);
    }
}

@media (prefers-color-scheme: dark) {
    #search {
        --palette-background: 255,255,255;
        --palette-contrast: 33,33,33;
    
        --swatch-background: rgb(var(--palette-background));
        --swatch-contrast: rgb(var(--palette-contrast));
    }
}