87 lines
1.7 KiB
CSS
87 lines
1.7 KiB
CSS
.answerBox {
|
|
margin-bottom: var(--space-3xs);
|
|
& > label {
|
|
display: inline;
|
|
}
|
|
}
|
|
.answersBox > input {
|
|
display: block;
|
|
}
|
|
details:not(.toc) {
|
|
background-color: var(--card-color);
|
|
border: var(--border-details);
|
|
border-radius: var(--border-radius);
|
|
color: var(--text-color);
|
|
margin-top: var(--space-s);
|
|
padding: var(--space-xs);
|
|
width: 100%;
|
|
font-size: var(--step--2);
|
|
font-variation-settings: var(--font-variation-ui);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--ui-letter-spacing);
|
|
font-family: var(--font-family-ui);
|
|
|
|
::marker {
|
|
content: "+ ";
|
|
}
|
|
&[open] p {
|
|
font-size: var(--step--2);
|
|
line-height: calc(var(--step--2) * 0.25 + var(--step--2));
|
|
}
|
|
&[open] summary::marker {
|
|
content: "- ";
|
|
}
|
|
&[open] summary {
|
|
border-bottom: var(--border-details);
|
|
margin-bottom: var(--space-xs);
|
|
padding-bottom: var(--space-xs);
|
|
}
|
|
summary {
|
|
font-size: var(--step--2);
|
|
font-variation-settings: var(--font-variation-ui);
|
|
text-transform: uppercase;
|
|
letter-spacing: var(--ui-letter-spacing);
|
|
font-family: var(--font-family-ui);
|
|
}
|
|
}
|
|
dialog {
|
|
background-color: var(--card-color);
|
|
border: none;
|
|
border-radius: var(--border-radius);
|
|
box-shadow: var(--box-shadow);
|
|
width: var(--grid-max-width);
|
|
h2 {
|
|
padding-top: 0;
|
|
}
|
|
p {
|
|
color: var(--text-color);
|
|
}
|
|
&::backdrop {
|
|
background-color: var(--contrast-color);
|
|
opacity: 0.5;
|
|
}
|
|
img {
|
|
max-width: 100%;
|
|
padding-top: var(--space-s);
|
|
}
|
|
}
|
|
input.answer {
|
|
display: inline;
|
|
}
|
|
.questionBox {
|
|
margin: var(--space-s) 0;
|
|
figure {
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
.quizQuestion {
|
|
font-size: var(--step-2);
|
|
font-variation-settings:
|
|
"opsz" 50,
|
|
"wght" 350,
|
|
"SOFT" 20,
|
|
"WONK" 1;
|
|
line-height: calc(var(--step-2) * 0.25 + var(--step-2));
|
|
}
|