update

doc/LectureNotes/_build/html/_static/togglebutton.css

@@ -1,90 +1,160 @@
+/**
+ * Admonition-based toggles
+ */
+
 /* Visibility of the target */
-.toggle, div.admonition.toggle .admonition-title ~ * {
-    transition: opacity .5s, height .5s;
-}
-
-.toggle-hidden:not(.admonition) {
-    visibility: hidden;
-    opacity: 0;
-    height: 1.5em;
-    margin: 0px;
-    padding: 0px;
-}
-
-/* Overrides for admonition toggles */
-
-/* Titles should cut off earlier to avoid overlapping w/ button */
-div.admonition.toggle p.admonition-title {
-    padding-right: 25%;
-}
-
-/* hides all the content of a page until de-toggled */
-div.admonition.toggle-hidden .admonition-title ~ * {
-    height: 0;
-    margin: 0;
-    float: left; /* so they overlap when hidden */
-    opacity: 0;
-    visibility: hidden;
+.admonition.toggle .admonition-title ~ * {
+    transition: opacity .3s, height .3s;
 }
 
 /* Toggle buttons inside admonitions so we see the title */
-.toggle.admonition {
+.admonition.toggle {
     position: relative;
 }
 
-.toggle.admonition.admonition-title:after {
-    content: "" !important;
+/* Titles should cut off earlier to avoid overlapping w/ button */
+.admonition.toggle .admonition-title {
+    padding-right: 25%;
+    cursor: pointer;
 }
 
-/* Note, we'll over-ride this in sphinx-book-theme */
-.toggle.admonition button.toggle-button {
-    margin-right: 0.5em;
-    right: 0em;
-    position: absolute;
-    top: .2em;
+/* 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%);
 }
 
-/* General button style */
+/* 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: #999;
+    /**
+     * Background and shape. By default there's no background
+     * but users can style as they wish
+     */  
+    background: none;
     border: none;
-    z-index: 100;
-    right: -2.5em;
-    margin-left: -2.5em; /* A hack to keep code blocks from being pushed left */
-    position: relative;
-    float: right;
-    border-radius: 100%;
-    width: 1.5em;
-    height: 1.5em;
+    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: "Click to show";
-        position: absolute;
+        content: attr(data-toggle-hint);  /* This will be filled in by JS */
         font-size: .8em;
-        left: -6.5em;
-        bottom: .4em;
+        align-self: center;
     }
 }
 
-
-/* Plus / minus toggles */
-.toggle-button .bar {
-    background-color: white;
-    position: absolute;
-    left: 15%;
-    top: 43%;
-    width: 16px;
-    height: 3px;
+/* 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 */
 }
 
-.toggle-button .vertical {
-    transition: all 0.25s ease-in-out;
-    transform-origin: center;
+/* The icon should point right when closed, down when open. */
+/* Open */
+.admonition.toggle button .tb-icon {
+    transform: rotate(90deg);
 }
 
-.toggle-button-hidden .vertical {
-    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;
+    }
 }