updating some styling, add cw styled details, moderation page
All checks were successful
/ build (push) Successful in 40s
All checks were successful
/ build (push) Successful in 40s
This commit is contained in:
parent
fea78b27d8
commit
f6c4ad0110
3 changed files with 69 additions and 4 deletions
|
|
@ -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); }
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue