125 lines
2.0 KiB
CSS
125 lines
2.0 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-error: hsl(357, 77%, 51%);
|
|
|
|
--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;
|
|
}
|
|
|
|
*:disabled,
|
|
*[disabled='true'] {
|
|
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;
|
|
}
|