cryptgeon/packages/frontend/src/app.css

139 lines
2.2 KiB
CSS

@import '@fontsource/fira-mono';
* {
box-sizing: border-box;
}
:root {
font-family: 'Fira Mono', monospace;
--ui-bg-0: #111;
--ui-bg-0-85: #111111d9;
--ui-bg-1: #333;
--ui-bg-2: #444;
--ui-text-0: #fefefe;
--ui-text-1: #eee;
--ui-clr-primary: hsl(186, 65%, 55%);
--ui-clr-primary-alt: hsl(186, 85%, 35%);
--ui-clr-error: hsl(357, 77%, 51%);
--ui-clr-error-alt: hsl(357, 87%, 41%);
--ui-anim: all 150ms ease;
}
@media (prefers-color-scheme: light) {
:root {
--ui-bg-0: #fefefe;
--ui-bg-0-85: #fefefed9;
--ui-bg-1: #eee;
--ui-bg-2: #e2e2e2;
--ui-text-0: #111;
--ui-text-1: #333;
}
}
:root[theme='dark'] {
--ui-bg-0: #111 !important;
--ui-bg-0-85: #111111d9 !important;
--ui-bg-1: #333 !important;
--ui-bg-2: #444 !important;
--ui-text-0: #fefefe !important;
--ui-text-1: #eee !important;
}
:root[theme='light'] {
--ui-bg-0: #fefefe !important;
--ui-bg-0-85: #fefefed9 !important;
--ui-bg-1: #eee !important;
--ui-bg-2: #e2e2e2 !important;
--ui-text-0: #111 !important;
--ui-text-1: #333 !important;
}
.error-text {
color: var(--ui-clr-error);
}
body {
min-height: 100vh;
margin: 0;
background-color: var(--ui-bg-0);
color: var(--ui-text-0);
}
a {
color: inherit;
text-decoration: inherit;
box-sizing: content-box;
border-bottom: 2px solid var(--ui-bg-2);
cursor: pointer;
}
a:active {
border-color: var(--ui-clr-primary);
}
a:hover {
border-color: var(--ui-text-0);
}
input,
textarea,
button {
appearance: none;
-webkit-appearance: none;
border-radius: 0;
transition: var(--ui-anim);
font-family: inherit;
font-size: inherit;
background: inherit;
color: inherit;
border: none;
padding-inline: initial;
}
*:disabled,
.disabled {
opacity: 0.5;
}
fieldset {
margin: 0;
padding: 0;
border: none;
}
.box {
width: 100%;
min-height: min(calc(100vh - 30rem), 20rem);
margin: 0;
border: 2px solid var(--ui-bg-1);
resize: vertical;
outline: none;
padding: 0.5rem;
}
@media screen and (max-width: 30rem) {
.box {
min-height: calc(100vh - 25rem);
}
}
.box:hover,
.box:focus {
border-color: var(--ui-clr-primary);
}
.tr {
text-align: right;
}
hr {
border: none;
border-bottom: 2px solid var(--ui-bg-1);
margin: 1rem 0;
}
p {
margin: 0;
}