keyoxide-web/static-src/styles.scss

/*
Copyright (C) 2021 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/>.
*/
@use './styles/vars.scss';
@use './styles/layout.scss';
@use './styles/typography.scss';
@use './styles/forms.scss';

* {
    box-sizing: border-box;
}
:focus {
    z-index: 100;
}

/* HELPERS */
.spacer {
    flex: 1;
}

.no-margin {
    margin: 0 !important;
}

.full-width {
    display: block;
    width: 100% !important;
}

.half-width {
    display: block;
    width: 50% !important;
}

.select-all {
    user-select: all;
}

#qr {
    display: block;
    width: 100% !important;
    max-width: 256px !important;
    height: auto !important;
    margin: 0 auto 16px;
}

/* DIALOGS */
dialog {
    max-width: 480px;
    word-wrap: anywhere;
    background-color: var(--section-background-color);
    border: 0;
    border-radius: 16px;

    &::backdrop {
        background-color: #000;
        opacity: 0.8;
    }
}

dialog form[method="Dialog"] {
    margin: 1em 0 0 !important;
}

dialog form[method="Dialog"] input {
    width: auto;
}

dialog p {
    font-size: 1rem !important;
    margin: 1rem 0;
}

dialog p:first-of-type {
    margin-top: 0;
}