160 lines
3.6 KiB
CSS
160 lines
3.6 KiB
CSS
/**
|
|
* 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;
|
|
}
|
|
} |