77 lines
1.4 KiB
CSS
77 lines
1.4 KiB
CSS
/* ----- CSS Reset & Global Settings ----- */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
/* ----- Color Variables ----- */
|
|
:root {
|
|
--theme-color: #3dc373;
|
|
--theme-color-contrast: #08180e;
|
|
--textbox-color: #edfef4;
|
|
color-scheme: light dark;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--theme-color: #4cf490;
|
|
--theme-color-contrast: #132219;
|
|
--textbox-color: #0f311d;
|
|
}
|
|
}
|
|
|
|
/* ----- Page Setup ----- */
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
|
|
'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
code {
|
|
font-family:
|
|
source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
|
|
}
|
|
|
|
/* ----- Buttons ----- */
|
|
button {
|
|
padding: 0.5rem 0.75rem;
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
background-color: var(--theme-color);
|
|
color: var(--theme-color-contrast);
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1px;
|
|
font-family: monospace;
|
|
}
|
|
|
|
/* ----- Inputs & Textareas ----- */
|
|
input,
|
|
textarea {
|
|
border: none;
|
|
border-radius: 0.375rem;
|
|
caret-color: var(--theme-color);
|
|
font-family: monospace;
|
|
font-weight: 600;
|
|
letter-spacing: 0.1px;
|
|
padding: 0.5rem 0.75rem;
|
|
}
|
|
|
|
input:focus,
|
|
textarea:focus {
|
|
outline: none;
|
|
box-shadow: 0 0 0 2px var(--theme-color);
|
|
}
|