website/styles/globals.css
2022-11-03 21:05:58 +01:00

65 lines
1.4 KiB
CSS

:root {
/* 1 is the base color, <1 are darker variations and >1 are lighter */
--bg-shade-0: #131733;
--bg-shade-1: #1B1F3B;
--bg-shade-2: #23274A;
--bg-shade-2-5: #2D3258;
--bg-shade-3: #373C65;
--bg-shade-3-5: #404673;
--bg-shade-4: #494F81;
--accent-shade-0: #673DB6;
--accent-shade-1: #9D6FF3;
--accent-shade-2: #A185D6;
--accent-shade-3: #CAB1FB;
--text-shade-0: #8990C1;
--text-shade-1: #A1A8D9;
--text-shade-2: #CAC1F5;
--text-shade-3: #fff;
--green-shade-0: #37a985;
--green-shade-1: #59c9a5;
--red-shade-1: #a9375b;
--border: rgba(255, 255, 255, 0.1);
}
body {
background: var(--bg-shade-1);
padding-bottom: env(safe-area-inset-bottom);
}
body {
width: 100%;
max-width: 100vw;
position: relative; /* This fixes overflow-x not hiding on Safari on mobile */
overflow-x: hidden;
margin: 0;
color: var(--text-shade-3);
justify-content: center;
font-family: Poppins, Arial, Helvetica, sans-serif;
}
/* Scrollbar styling 'cause it's fancy */
*::-webkit-scrollbar {
width: 12px;
height: 12px;
}
*::-webkit-scrollbar-track {
background: var(--bg-shade-1);
}
*::-webkit-scrollbar-thumb {
background-color: var(--text-shade-0);
border-radius: 24px;
border: 3px solid var(--bg-shade-1);
}
*::-webkit-scrollbar-thumb:hover {
background-color: var(--accent-shade-1);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--text-shade-0) var(--bg-shade-1);
}