updating some styling, add cw styled details, moderation page
All checks were successful
/ build (push) Successful in 40s

This commit is contained in:
Ruben 2025-07-15 10:13:19 -05:00
commit f6c4ad0110
No known key found for this signature in database
GPG key ID: 8EA836555FB6D9A5
3 changed files with 69 additions and 4 deletions

View file

@ -46,7 +46,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
--mauve: #ba8aff;
--maroon: #e06c75;
--peach: #ffac6b;
--yellow: #e5c07b;
--yellow: #d29f12;
--teal: #2bbac5;
--sky: #3eacce;
--sapphire: #4db5d0;
@ -139,7 +139,7 @@ html[data-theme="light"] {
--mauve: #ba8aff;
--maroon: #e06c75;
--peach: #ffac6b;
--yellow: #e5c07b;
--yellow: #d29f12;
--teal: #2bbac5;
--sky: #3eacce;
--sapphire: #4db5d0;
@ -382,6 +382,62 @@ details.styled[open] {
}
}
/* more minimal "content warning" styled details elements */
details.cw {
summary {
span {
color: var(--yellow);
padding-right: .6rem;
transform: translateY(.1rem);
vertical-align: middle;
}
.tabler--chevron-down:last-of-type {
margin-left: .5rem;
}
background: color-mix(in srgb, var(--yellow) 5%, var(--background));
border-radius: .4rem;
border: .1rem solid var(--yellow);
cursor: pointer;
padding: .3rem;
transform: 0.2s;
width: fit-content;
}
section {
background-color: color-mix(in srgb, var(--background) 95%, white);
border-radius: .4rem;
border: .1rem solid var(--border);
margin-top: .7rem;
padding: .4rem;
text-align: start !important;
ul {
margin: 0 0 0 -.5rem;
}
p:first-of-type {
margin-top: 0 !important;
}
p:last-of-type {
margin-bottom: 0 !important;
}
}
margin-top: 1rem;
margin-bottom: 1rem;
overflow: clip;
}
details.cw[open] {
.tabler--chevron-down:last-of-type {
transform: 0.2s;
transform: rotate(180deg);
}
}
/* badge text styling */
.badge {
border-radius: .2rem;
@ -451,13 +507,13 @@ hr.rounded {
border-radius: .4rem;
&.info {
background-color: color-mix(in srgb, var(--blue) 10%, transparent);
background-color: color-mix(in srgb, var(--blue) 8%, transparent);
border-color: var(--blue);
.icon { color: var(--blue); }
}
&.warn {
background-color: color-mix(in srgb, var(--orange) 10%, transparent);
background-color: color-mix(in srgb, var(--orange) 8%, transparent);
border-color: var(--orange);
.icon { color: var(--orange); }
}