Spaces:
Running
Running
/** | |
* Admonition-based toggles | |
*/ | |
/* Visibility of the target */ | |
.admonition.toggle .admonition-title ~ * { | |
transition: opacity .3s, height .3s; | |
} | |
/* Toggle buttons inside admonitions so we see the title */ | |
.admonition.toggle { | |
position: relative; | |
} | |
/* Titles should cut off earlier to avoid overlapping w/ button */ | |
.admonition.toggle .admonition-title { | |
padding-right: 25%; | |
cursor: pointer; | |
} | |
/* Hovering will cause a slight shift in color to make it feel interactive */ | |
.admonition.toggle .admonition-title:hover { | |
box-shadow: inset 0 0 0px 20px rgb(0 0 0 / 1%); | |
} | |
/* Hovering will cause a slight shift in color to make it feel interactive */ | |
.admonition.toggle .admonition-title:active { | |
box-shadow: inset 0 0 0px 20px rgb(0 0 0 / 3%); | |
} | |
/* Remove extra whitespace below the admonition title when hidden */ | |
.admonition.toggle-hidden { | |
padding-bottom: 0; | |
} | |
.admonition.toggle-hidden .admonition-title { | |
margin-bottom: 0; | |
} | |
/* hides all the content of a page until de-toggled */ | |
.admonition.toggle-hidden .admonition-title ~ * { | |
height: 0; | |
margin: 0; | |
opacity: 0; | |
visibility: hidden; | |
} | |
/* General button style and position*/ | |
button.toggle-button { | |
/** | |
* Background and shape. By default there's no background | |
* but users can style as they wish | |
*/ | |
background: none; | |
border: none; | |
outline: none; | |
/* Positioning just inside the admonition title */ | |
position: absolute; | |
right: 0.5em; | |
padding: 0px; | |
border: none; | |
outline: none; | |
} | |
/* Display the toggle hint on wide screens */ | |
@media (min-width: 768px) { | |
button.toggle-button.toggle-button-hidden:before { | |
content: attr(data-toggle-hint); /* This will be filled in by JS */ | |
font-size: .8em; | |
align-self: center; | |
} | |
} | |
/* Icon behavior */ | |
.tb-icon { | |
transition: transform .2s ease-out; | |
height: 1.5em; | |
width: 1.5em; | |
stroke: currentColor; /* So that we inherit the color of other text */ | |
} | |
/* The icon should point right when closed, down when open. */ | |
/* Open */ | |
.admonition.toggle button .tb-icon { | |
transform: rotate(90deg); | |
} | |
/* Closed */ | |
.admonition.toggle button.toggle-button-hidden .tb-icon { | |
transform: rotate(0deg); | |
} | |
/* With details toggles, we don't rotate the icon so it points right */ | |
details.toggle-details .tb-icon { | |
height: 1.4em; | |
width: 1.4em; | |
margin-top: 0.1em; /* To center the button vertically */ | |
} | |
/** | |
* Details-based toggles. | |
* In this case, we wrap elements with `.toggle` in a details block. | |
*/ | |
/* Details blocks */ | |
details.toggle-details { | |
margin: 1em 0; | |
} | |
details.toggle-details summary { | |
display: flex; | |
align-items: center; | |
cursor: pointer; | |
list-style: none; | |
border-radius: .2em; | |
border-left: 3px solid #1976d2; | |
background-color: rgb(204 204 204 / 10%); | |
padding: 0.2em 0.7em 0.3em 0.5em; /* Less padding on left because the SVG has left margin */ | |
font-size: 0.9em; | |
} | |
details.toggle-details summary:hover { | |
background-color: rgb(204 204 204 / 20%); | |
} | |
details.toggle-details summary:active { | |
background: rgb(204 204 204 / 28%); | |
} | |
.toggle-details__summary-text { | |
margin-left: 0.2em; | |
} | |
details.toggle-details[open] summary { | |
margin-bottom: .5em; | |
} | |
details.toggle-details[open] summary .tb-icon { | |
transform: rotate(90deg); | |
} | |
details.toggle-details[open] summary ~ * { | |
animation: toggle-fade-in .3s ease-out; | |
} | |
@keyframes toggle-fade-in { | |
from {opacity: 0%;} | |
to {opacity: 100%;} | |
} | |
/* Print rules - we hide all toggle button elements at print */ | |
@media print { | |
/* Always hide the summary so the button doesn't show up */ | |
details.toggle-details summary { | |
display: none; | |
} | |
} |