re-style summary/details tags
This commit is contained in:
parent
56fc9b8a22
commit
c9cd49218d
3 changed files with 59 additions and 15 deletions
|
|
@ -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 Starlight’s 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;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue