keyoxide-web/static-src/styles/forms.scss

/*
Copyright (C) 2023 Yarmo Mackenbach

This program is free software: you can redistribute it and/or modify it under
the terms of the GNU Affero General Public License as published by the Free
Software Foundation, either version 3 of the License, or (at your option)
any later version.

This program is distributed in the hope that it will be useful, but WITHOUT
ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
details.

You should have received a copy of the GNU Affero General Public License along
with this program. If not, see <https://www.gnu.org/licenses/>.

Also add information on how to contact you by electronic and paper mail.

If your software can interact with users remotely through a computer network,
you should also make sure that it provides a way for users to get its source.
For example, if your program is a web application, its interface could display
a "Source" link that leads users to an archive of the code. There are many
ways you could offer source, and different solutions will be better for different
programs; see section 13 for the specific requirements.

You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary. For
more information on this, and how to apply and follow the GNU AGPL, see <https://www.gnu.org/licenses/>.
*/
.form-wrapper {
    align-items: center;
    padding-top: 1.4rem;
    padding-bottom: 1.6rem;
    margin-bottom: 48px;
}

.form-wrapper *:last-child {
    margin-bottom: 0;
}

.form-wrapper form {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.form-wrapper h2 {
    margin-top: 0;
}

form input[type="text"],
form input[type="search"] {
    margin: 8px 0;
    padding: 4px;
    border: 1px solid var(--input-border-color);
    border-radius: 3px;
    font-size: 0.9rem;
}

form textarea {
    width: 100%;
    height: 128px;
    margin: 8px 0;
    resize: vertical;
    font-size: 0.9rem;
    border: 1px solid var(--input-border-color);
}

.button-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0;
}

input,
textarea {
    color: var(--input-text-color);
    background-color: var(--input-background-color);
    border: solid 1px var(--input-border-color);
    border-radius: 4px;

    &:hover {
        background-color: var(--input-background-color-hover);
        border-color: var(--input-border-color-hover);
        color: var(--input-text-color-hover);
    }
}

input[type="button"],
input[type="submit"],
button,
a.button {
    display: inline-block;
    margin: 8px 0;
    padding: 4px 8px;
    font-family: sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    color: var(--button-text-color);
    background-color: var(--button-background-color);
    border: solid 1px var(--button-border-color);
    border-radius: 4px;
    cursor: pointer;

    &:hover {
        background-color: var(--button-background-color-hover);
        border-color: var(--button-border-color-hover);
        color: var(--button-text-color-hover);
    }

    &.themed {
        padding: 8px 12px;
        color: var(--text-color-inverse);
        background-color: var(--primary-color);
        border: 0;

        &:hover {
            color: var(--text-color-inverse);
            background-color: var(--primary-color-subtle);
        }
    }
}

button {
    margin-right: 8px;
}

button.inline {
    min-height: auto;
    margin: 0;
    padding: 2px 8px;
}

#search {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 50vh;
    gap: 48px;
    background: transparent;
    border: 0;

    & > svg {
        width: 96px;
        fill: var(--primary-color);
    }

    form {
        display: flex;
        flex-direction: row;
        width: 100%;
        max-width: 30em;

        input {
            font-size: 1rem;
        }

        input[type="search"] {
            flex: 1;
            min-width: 0;
            margin: 0;
            padding: 8px;
            border-radius: 8px 0 0 8px;

            &:focus {
              outline: none;
            }
        }

        &:has(input[type="search"]:focus) {
          outline: 5px auto Highlight;
          outline: 5px auto -webkit-focus-ring-color;
        }

        input[type="submit"] {
            margin: 0;
            padding: 8px 16px;
            border-left: 0;
            border-radius: 0 8px 8px 0;
        }
    }
}