mirror of
https://codeberg.org/keyoxide/keyoxide-web.git
synced 2024-12-22 14:59:29 -07:00
102 lines
No EOL
2.5 KiB
SCSS
102 lines
No EOL
2.5 KiB
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;
|
|
} |