167 lines
3.6 KiB
CSS
167 lines
3.6 KiB
CSS
@font-face {
|
|
font-family: 'Karla';
|
|
src: url('fonts/karla-variable.ttf') format('truetype');
|
|
font-weight: 1 999;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Samurai Bob';
|
|
src: url('fonts/samuraibob.woff2') format('woff2'),
|
|
url('fonts/samuraibob.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Molot';
|
|
src: url('fonts/molot.woff2') format('woff2'),
|
|
url('fonts/molot.woff') format('woff');
|
|
font-weight: 400;
|
|
font-style: normal;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
/* LIGHT */
|
|
--background-light: #FFFFFF;
|
|
--text-light: #000000;
|
|
--primary-light: #F79E00;
|
|
--secondary-light: #F48600;
|
|
--tertiary-light: #F4BB60;
|
|
--surface-light: #FEF2DD;
|
|
--error-light: #D32F2F;
|
|
--loading-light: #DDDDDD;
|
|
--font-weight-light: 600;
|
|
|
|
/* DARK */
|
|
--background-dark: #111111;
|
|
--text-dark: #DDDDDD;
|
|
--primary-dark: #F79E00;
|
|
--secondary-dark: #F4BB60;
|
|
--tertiary-dark: #CC7313;
|
|
--surface-dark: #30240F;
|
|
--error-dark: #E53935;
|
|
--loading-dark: #444444;
|
|
--font-weight-dark: 500;
|
|
|
|
/* Define light defaults */
|
|
--background: var(--background-light);
|
|
--text: var(--text-light);
|
|
--primary: var(--primary-light);
|
|
--secondary: var(--secondary-light);
|
|
--tertiary: var(--tertiary-light);
|
|
--surface: var(--surface-light);
|
|
--error: var(--error-light);
|
|
--loading: var(--loading-light);
|
|
--font-weight: var(--font-weight-light);
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--background: var(--background-dark);
|
|
--text: var(--text-dark);
|
|
--primary: var(--primary-dark);
|
|
--secondary: var(--secondary-dark);
|
|
--tertiary: var(--tertiary-dark);
|
|
--surface: var(--surface-dark);
|
|
--error: var(--error-dark);
|
|
--loading: var(--loading-dark);
|
|
--font-weight: var(--font-weight-dark);
|
|
}
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
-webkit-print-color-adjust: exact;
|
|
print-color-adjust: exact;
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Karla', sans-serif;
|
|
background: var(--background);
|
|
color: var(--text);
|
|
font-weight: var(--font-weight);
|
|
}
|
|
|
|
.light {
|
|
color-scheme: light;
|
|
|
|
--background: var(--background-light);
|
|
--text: var(--text-light);
|
|
--primary: var(--primary-light);
|
|
--secondary: var(--secondary-light);
|
|
--tertiary: var(--tertiary-light);
|
|
--surface: var(--surface-light);
|
|
--error: var(--error-light);
|
|
--loading: var(--loading-light);
|
|
--font-weight: var(--font-weight-light);
|
|
}
|
|
|
|
@media not print {
|
|
.dark {
|
|
color-scheme: dark;
|
|
|
|
--background: var(--background-dark);
|
|
--text: var(--text-dark);
|
|
--primary: var(--primary-dark);
|
|
--secondary: var(--secondary-dark);
|
|
--tertiary: var(--tertiary-dark);
|
|
--surface: var(--surface-dark);
|
|
--error: var(--error-dark);
|
|
--loading: var(--loading-dark);
|
|
--font-weight: var(--font-weight-dark);
|
|
}
|
|
}
|
|
|
|
@media print {
|
|
#app, .light, .dark {
|
|
--background: white;
|
|
}
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
}
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
*::-webkit-scrollbar-track {
|
|
background: var(--surface);
|
|
}
|
|
*::-webkit-scrollbar-thumb {
|
|
border-radius: 100px;
|
|
border: 4px solid var(--surface);
|
|
width: 12px;
|
|
background: var(--secondary);
|
|
}
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background: var(--tertiary);
|
|
}
|
|
*::-webkit-scrollbar-thumb:active {
|
|
background: red;
|
|
}
|
|
|
|
/* IE 10+ */
|
|
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
|
|
#app {
|
|
text-align: center;
|
|
margin: 20vh auto;
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
}
|
|
#app::before {
|
|
content: '🦀';
|
|
font-size: 1.5em;
|
|
display: block;
|
|
padding: 20px;
|
|
}
|
|
#app::after {
|
|
display: block;
|
|
content: 'Crab Fit doesn\'t work in Internet Explorer. Please try using a modern browser.';
|
|
}
|
|
}
|