94 lines
1.7 KiB
CSS
94 lines
1.7 KiB
CSS
:root {
|
|
--taupe100: #332d2d;
|
|
--taupe200: #453e3d;
|
|
--taupe300: #5d5352;
|
|
--taupe400: #756867;
|
|
--taupe500: #ab9b9a;
|
|
--taupe600: #ebd6d4;
|
|
|
|
--discord100: #23272a;
|
|
--discord200: #2c2f33;
|
|
--discord400: #7289da;
|
|
--discord500: #99aab5;
|
|
|
|
--green400: #46b646;
|
|
--green200: #1d8227;
|
|
|
|
--red400: #e95353;
|
|
--red200: #f14343;
|
|
|
|
--gold400: #efcf24;
|
|
|
|
--grey100: #1c1010;
|
|
--grey500: #dbd9d9;
|
|
--grey600: #f2efef;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
font-family: "Atkinson Hyperlegible", sans-serif;
|
|
background-color: var(--taupe200);
|
|
color: var(--taupe600);
|
|
}
|
|
|
|
.role {
|
|
/* TODO: dont do this, don't remember why?? (^aki) */
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 2px solid var(--role-color);
|
|
border-radius: 3px;
|
|
user-select: none;
|
|
padding: 0.217rem; /* this is silly number pls ignore :3 (^noe) */
|
|
gap: 0.215rem;
|
|
|
|
input {
|
|
appearance: none;
|
|
position: relative;
|
|
width: 1.216rem;
|
|
height: 1.216rem;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 2px solid var(--role-color);
|
|
transition: all 0.35s ease-in-out;
|
|
border-radius: 1.216rem;
|
|
|
|
&::before {
|
|
transition: all 0.35s ease-in-out;
|
|
content: "";
|
|
mask-image: url(/static/images/check.svg);
|
|
mask-size: cover;
|
|
mask-position: center center;
|
|
background-color: var(--role-color);
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 1.216rem;
|
|
}
|
|
}
|
|
|
|
label {
|
|
}
|
|
|
|
&:has(input:checked) {
|
|
background-color: var(--role-color);
|
|
|
|
input {
|
|
border-color: var(--contrast-color);
|
|
opacity: 1;
|
|
|
|
&::before {
|
|
opacity: 1;
|
|
background-color: var(--contrast-color);
|
|
}
|
|
}
|
|
|
|
label {
|
|
color: var(--contrast-color);
|
|
}
|
|
}
|
|
}
|