58 lines
1.7 KiB
CSS
58 lines
1.7 KiB
CSS
/* exo — exercise cards, hint folds (sequential unlock), solution fold */
|
|
|
|
.exo {
|
|
margin: 1.2rem 0;
|
|
padding: 0.6rem 0.9rem;
|
|
border: 1px solid color-mix(in srgb, var(--calc-notecolor, #B45309) 35%, transparent);
|
|
border-left: 3px solid var(--calc-notecolor, #B45309);
|
|
border-radius: 0.35rem;
|
|
scroll-margin-top: 5rem;
|
|
}
|
|
.exo-head p { margin: 0 0 0.4rem; }
|
|
.exo-head strong { color: var(--calc-notecolor, #B45309); }
|
|
|
|
.exo details {
|
|
margin: 0.45rem 0;
|
|
border-radius: 0.3rem;
|
|
}
|
|
.exo details > summary {
|
|
cursor: pointer;
|
|
list-style: none;
|
|
user-select: none;
|
|
font-size: 0.9em;
|
|
font-weight: 600;
|
|
}
|
|
.exo details > summary::-webkit-details-marker { display: none; }
|
|
.exo details > summary::before { content: "▸ "; }
|
|
.exo details[open] > summary::before { content: "▾ "; }
|
|
|
|
/* hints: small highlight boxes */
|
|
.exo-hint {
|
|
background: color-mix(in srgb, var(--calc-notecolor, #B45309) 6%, transparent);
|
|
border: 1px solid color-mix(in srgb, var(--calc-notecolor, #B45309) 30%, transparent);
|
|
padding: 0.25rem 0.6rem;
|
|
}
|
|
.exo-hint > summary { color: var(--calc-notecolor, #B45309); }
|
|
|
|
/* locked hints: unlock one by one */
|
|
.exo-hint.exo-locked > summary {
|
|
cursor: not-allowed;
|
|
opacity: 0.45;
|
|
}
|
|
.exo-hint.exo-locked > summary::before { content: "🔒 "; }
|
|
|
|
/* solution: closed by default, visually separated */
|
|
.exo-sol {
|
|
border-top: 1px dashed color-mix(in srgb, var(--calc-notecolor, #B45309) 40%, transparent);
|
|
padding: 0.35rem 0.1rem 0.1rem;
|
|
}
|
|
|
|
.exo-fold-body { margin-top: 0.3rem; }
|
|
.exo-fold-body > p:first-child { margin-top: 0; }
|
|
.exo-fold-body > p:last-child { margin-bottom: 0; }
|
|
|
|
@media print {
|
|
.exo details > summary::before { content: ""; }
|
|
.exo-hint.exo-locked > summary { opacity: 1; cursor: default; }
|
|
}
|