roleypoly/v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

css preprocessor

Browse source
This commit is contained in:
41666 2025-04-07 00:00:52 -07:00
parent e4317ec4fd
commit 023f1651f8
9 changed files with 136 additions and 114 deletions
Download patch file Download diff file Expand all files Collapse all files

99
static/main.css
View file

@ -1,28 +1,5 @@
: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;
}
@import url(styles/palette.css);
@import url(styles/role.css);
* {
box-sizing: border-box;
@ -33,75 +10,3 @@ body {
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.369rem; /* this is silly number pls ignore :3 (^noe) */
gap: 0.269rem;
cursor: pointer;
transition: all 0.35s ease-in-out;
input {
cursor: pointer;
appearance: none;
position: relative;
width: 1.216rem;
height: 1.216rem;
margin: 0;
padding: 0;
border: 2px solid var(--role-color);
transition: all 0.25s ease-in-out;
border-radius: 1.216rem;
&:hover {
background-color: var(--role-color);
&::before {
opacity: 1;
background-color: var(--contrast-color);
}
}
&::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 {
cursor: pointer;
font-weight: 600;
}
&: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);
}
}
}

25
static/styles/palette.css Normal file
View file

@ -0,0 +1,25 @@
: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;
}

71
static/styles/role.css Normal file
View file

@ -0,0 +1,71 @@
.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.369rem; /* this is silly number pls ignore :3 (^noe) */
gap: 0.269rem;
cursor: pointer;
transition: all 0.35s ease-in-out;
input {
cursor: pointer;
appearance: none;
position: relative;
width: 1.216rem;
height: 1.216rem;
margin: 0;
padding: 0;
border: 2px solid var(--role-color);
transition: all 0.25s ease-in-out;
border-radius: 1.216rem;
&:hover {
background-color: var(--role-color);
&::before {
opacity: 1;
background-color: var(--contrast-color);
}
}
&::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 {
cursor: pointer;
font-weight: 600;
}
&: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);
}
}
}