re-style summary/details tags

This commit is contained in:
Christoph Haas 2025-08-26 01:16:41 +02:00
parent 56fc9b8a22
commit c9cd49218d
3 changed files with 59 additions and 15 deletions

View file

@ -31,13 +31,56 @@ li > br {
}
.ec-line .code {
text-indent: -1em !important;
padding-left: 2em !important;
text-indent: -1em !important;
padding-left: 2em !important;
text-wrap: wrap;
word-break: break-word;
}
.comentario-root
{
.comentario-root {
margin-top: 5em;
}
}
/* Neutralize Starlights default styling */
details.collapsible {
all: unset;
display: block; /* restore block behavior */
margin-top: 1.5rem;
margin-bottom: 1em;
}
/* Style the summary like a button */
details.collapsible summary {
all: unset;
cursor: pointer;
display: flex;
align-items: center;
padding: 0.5rem 1rem;
border: 1px solid var(--sl-color-gray-5);
border-radius: 0.5rem;
background: var(--sl-color-accent-low);
font-weight: 500;
}
details[open].collapsible {
background-image: linear-gradient(var(--sl-color-accent-low), var(--sl-color-gray-6));
border-radius: 0.5rem;
border-left: 1px solid var(--sl-color-gray-5);
border-right: 1px solid var(--sl-color-gray-5);
border-bottom: 1px solid var(--sl-color-gray-5);
}
/* Make bottom border disappear when details are opened */
details[open].collapsible summary {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom: none;
margin-bottom: 1.5rem;
}
/* Collapsible content */
details.collapsible > *:not(summary) {
margin-bottom: 1rem;
/* background: var(--sl-color-accent-low); */
margin: 0 1rem 1rem 1rem;
}