mirror of
https://codeberg.org/keyoxide/keyoxide-web.git
synced 2024-12-22 23:09:29 -07:00
176 lines
No EOL
6.4 KiB
SCSS
176 lines
No EOL
6.4 KiB
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/>.
|
|
*/
|
|
:root {
|
|
--white: hsl(0, 0%, 100%);
|
|
--black: hsl(0, 0%, 0%);
|
|
--grey-10: hsl(0, 0%, 99%);
|
|
--grey-50: hsl(0, 0%, 95%);
|
|
--grey-100: hsl(0, 0%, 90%);
|
|
--grey-200: hsl(0, 0%, 80%);
|
|
--grey-300: hsl(0, 0%, 70%);
|
|
--grey-400: hsl(0, 0%, 60%);
|
|
--grey-500: hsl(0, 0%, 50%);
|
|
--grey-600: hsl(0, 0%, 40%);
|
|
--grey-700: hsl(0, 0%, 30%);
|
|
--grey-800: hsl(0, 0%, 20%);
|
|
--grey-900: hsl(0, 0%, 10%);
|
|
--grey-950: hsl(0, 0%, 7%);
|
|
--green-300: hsl(110, 45%, 70%);
|
|
--green-400: hsl(110, 45%, 60%);
|
|
--green-600: hsl(110, 45%, 40%);
|
|
--red-300: hsl(10, 60%, 70%);
|
|
--red-400: hsl(10, 60%, 60%);
|
|
--blue-500: rgb(67, 176, 234);
|
|
--blue-700: hsl(201, 90%, 30%);
|
|
--purple-50: rgb(249, 248, 251);
|
|
--purple-100: rgb(238, 236, 248);
|
|
--purple-200: hsl(250, 48%, 90%);
|
|
--purple-300: hsl(250, 48%, 80%);
|
|
--purple-400: hsl(250, 48%, 70%);
|
|
--purple-500: hsl(250, 48%, 65%);
|
|
--purple-600: hsl(250, 48%, 60%);
|
|
--purple-700: hsl(250, 48%, 55%);
|
|
--purple-900: hsl(250, 38%, 45%);
|
|
--yellow-100: hsl(56, 100%, 95%);
|
|
--yellow-200: hsl(56, 100%, 90%);
|
|
--yellow-500: hsl(56, 100%, 65%);
|
|
}
|
|
|
|
:root {
|
|
--primary-color-light: var(--purple-700);
|
|
--primary-color-dark: var(--purple-300);
|
|
|
|
--primary-color-subtle-light: var(--purple-400);
|
|
--primary-color-subtle-dark: var(--purple-500);
|
|
|
|
--background-color-light: #fafafa;
|
|
--background-color-dark: #0a0a0a;
|
|
}
|
|
:root {
|
|
--primary-color: var(--primary-color-light);
|
|
--primary-color-subtle: var(--primary-color-subtle-light);
|
|
|
|
--body-background-color: var(--background-color-light);
|
|
--section-background-color: var(--white);
|
|
|
|
--text-color: var(--grey-800);
|
|
--text-color-subtle: var(--grey-500);
|
|
--text-color-inverse: var(--white);
|
|
--h1-color: var(--text-color);
|
|
--h2-color: var(--text-color);
|
|
--h2-small-color: var(--primary-color-subtle);
|
|
--h3-color: var(--text-color-subtle);
|
|
--h3-small-color: var(--primary-color-subtle);
|
|
--h4-color: var(--text-color-subtle);
|
|
--h4-small-color: var(--primary-color-subtle);
|
|
|
|
--link-color: var(--blue-700);
|
|
--link-color-subtle: var(--text-color);
|
|
--link-color-hover: var(--primary-color);
|
|
|
|
--line-color-subtle: var(--grey-200);
|
|
|
|
--button-text-color: var(--text-color);
|
|
--button-text-color-hover: var(--text-color);
|
|
--button-border-color: var(--grey-300);
|
|
--button-border-color-hover: var(--grey-300);
|
|
--button-background-color: var(--grey-100);
|
|
--button-background-color-hover: var(--grey-200);
|
|
|
|
--input-text-color: var(--text-color);
|
|
--input-text-color-hover: var(--text-color);
|
|
--input-border-color: var(--grey-300);
|
|
--input-border-color-hover: var(--grey-300);
|
|
--input-background-color: var(--white);
|
|
--input-background-color-hover: var(--white);
|
|
|
|
--footer-text-color: var(--text-color-subtle);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
color-scheme: dark;
|
|
|
|
--primary-color: var(--primary-color-dark);
|
|
--primary-color-subtle: var(--primary-color-subtle-dark);
|
|
|
|
--body-background-color: var(--background-color-dark);
|
|
--section-background-color: var(--grey-900);
|
|
|
|
--text-color: var(--grey-50);
|
|
--text-color-subtle: var(--grey-300);
|
|
--text-color-inverse: var(--grey-800);
|
|
--h1-color: var(--text-color);
|
|
--h2-color: var(--text-color);
|
|
--h2-small-color: var(--primary-color-subtle);
|
|
--h3-color: var(--text-color-subtle);
|
|
--h3-small-color: var(--primary-color-subtle);
|
|
--h4-color: var(--text-color-subtle);
|
|
--h4-small-color: var(--primary-color-subtle);
|
|
|
|
--link-color: var(--blue-500);
|
|
--link-color-subtle: var(--text-color);
|
|
--link-color-hover: var(--primary-color);
|
|
|
|
--line-color-subtle: var(--grey-700);
|
|
|
|
--button-text-color: var(--text-color);
|
|
--button-text-color-hover: var(--text-color);
|
|
--button-border-color: var(--grey-700);
|
|
--button-border-color-hover: var(--grey-700);
|
|
--button-background-color: var(--grey-700);
|
|
--button-background-color-hover: var(--grey-600);
|
|
|
|
--input-text-color: var(--text-color);
|
|
--input-text-color-hover: var(--text-color);
|
|
--input-border-color: var(--grey-700);
|
|
--input-border-color-hover: var(--grey-700);
|
|
--input-background-color: var(--grey-800);
|
|
--input-background-color-hover: var(--grey-800);
|
|
|
|
--footer-text-color: var(--text-color-subtle);
|
|
}
|
|
}
|
|
|
|
kx-claim, kx-key {
|
|
--loader-color: var(--grey-400);
|
|
--success-color: var(--green-600);
|
|
--failure-color: var(--red-400);
|
|
|
|
--background-color: var(--grey-10);
|
|
--header-background-color: var(--grey-50);
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
--loader-color: var(--grey-400);
|
|
--success-color: var(--green-400);
|
|
--failure-color: var(--red-300);
|
|
|
|
--background-color: var(--grey-800);
|
|
--header-background-color: var(--grey-700);
|
|
}
|
|
} |