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; | |
| } | |
| } |