90 lines
1.8 KiB
CSS
90 lines
1.8 KiB
CSS
.details .control {
|
||
--gutter: var(--space-xs-s);
|
||
--cluster-horizontal-alignment: flex-end;
|
||
border-block-start: 1px solid var(--color-bg-accent);
|
||
padding-block-start: var(--space-xs);
|
||
}
|
||
|
||
/* Hide without JS */
|
||
is-land:not(:defined) .details .control {
|
||
display: none;
|
||
}
|
||
|
||
.details details > * + * {
|
||
margin-block-start: var(--flow-space, 1em);
|
||
}
|
||
|
||
.details details[open] + details {
|
||
margin-block-start: var(--space-2xl);
|
||
}
|
||
|
||
.details details > p:last-child {
|
||
margin-block-end: var(--space-l);
|
||
}
|
||
|
||
.details summary {
|
||
grid-column: content;
|
||
}
|
||
|
||
.details summary {
|
||
display: flex;
|
||
align-items: baseline;
|
||
line-height: 1.2;
|
||
gap: 0 1ch;
|
||
cursor: pointer;
|
||
list-style: none;
|
||
font-weight: var(--font-bold);
|
||
font-size: var(--size-step-1);
|
||
}
|
||
|
||
.details summary:hover,
|
||
.details summary:focus-visible,
|
||
.details[open] > summary {
|
||
color: var(--color-primary);
|
||
}
|
||
|
||
.details summary::before {
|
||
content: '+';
|
||
display: block;
|
||
color: var(--color-primary);
|
||
font-family: var(--font-mono);
|
||
font-size: var(--size-step-0);
|
||
font-weight: var(--font-regular);
|
||
line-height: 0.5;
|
||
transform: scale(1.4);
|
||
transform-origin: right bottom;
|
||
margin-inline-start: 0.2ch;
|
||
}
|
||
|
||
.details details[open] summary::before {
|
||
content: '–';
|
||
}
|
||
|
||
.details details > :is(h2, h3) {
|
||
font-weight: var(--font-bold);
|
||
font-size: var(--size-step-0);
|
||
border-block-end: 1px solid var(--color-bg-accent);
|
||
padding-block-end: var(--space-xs);
|
||
}
|
||
|
||
.details details > :is(h2, h3) {
|
||
font-weight: var(--font-bold);
|
||
font-size: var(--size-step-0);
|
||
border-block-end: 1px solid var(--color-bg-accent);
|
||
padding-block-end: var(--space-xs);
|
||
}
|
||
|
||
/* Hide default marker */
|
||
.details summary::-webkit-details-marker,
|
||
.details summary::marker {
|
||
content: '';
|
||
display: none;
|
||
}
|
||
|
||
.details summary + * {
|
||
margin-block-start: var(--space-s-m);
|
||
}
|
||
|
||
.details details > * + * {
|
||
margin-inline-start: 2.4ch;
|
||
}
|