差異處

這裏顯示兩個版本的差異處。

--- bootstrap [2024/10/27 17:01] – host
+++ bootstrap [2025/10/21 00:56] (目前版本) – 外部編輯 127.0.0.1
@@ 行 1: / 行 1: @@
-<html>   .tree {
+[[NOD|《奉愛的甘露》]]\\
-  --spacing: 1.5rem;
+[[CC|《永恆的采坦亞經》]]
-  --radius: 10px;
-}
-.tree li {
-  display: block;
-  position: relative;
-  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
-}
-.tree ul {
-  margin-left: calc(var(--radius) - var(--spacing));
-  padding-left: 0;
-}
-.tree ul li {
-  border-left: 2px solid #ddd;
-}
-.tree ul li:last-child {
-  border-color: transparent;
-}
-.tree ul li::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: calc(var(--spacing) / -2);
-  left: -2px;
-  width: calc(var(--spacing) + 2px);
-  height: calc(var(--spacing) + 1px);
-  border: solid #ddd;
-  border-width: 0 0 2px 2px;
-}
-.tree summary {
-  display: block;
-  cursor: pointer;
-}
-.tree summary::marker,
-.tree summary::-webkit-details-marker {
-  display: none;
-}
-.tree summary:focus {
-  outline: none;
-}
-.tree summary:focus-visible {
-  outline: 1px dotted #000;
-}
-.tree li::after,
-.tree summary::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: calc(var(--spacing) / 2 - var(--radius));
-  left: calc(var(--spacing) - var(--radius) - 1px);
-  width: calc(2 * var(--radius));
-  height: calc(2 * var(--radius));
-  border-radius: 50%;
-  background: #ddd;
-}
-.tree summary::before {
-  z-index: 1;
-  background: #696 url('expand-collapse.svg') 0 0;
-}
-.tree details[open] > summary::before {
-  background-position: calc(-2 * var(--radius)) 0;
-}
-<ul class="tree">
-  <li>
-    <details open>
-      <summary>Giant planets</summary>
-      <ul>
-        <li>
-          <details>
-            <summary>Gas giants</summary>
-            <ul>
-              <li>Jupiter</li>
-              <li>Saturn</li>
-            </ul>
-          </details>
-        </li>
-        <li>
-          <details>
-            <summary>Ice giants</summary>
-            <ul>
-              <li>Uranus</li>
-              <li>Neptune</li>
-            </ul>
-          </details>
-        </li>
-      </ul>
-    </details>
-  </li>
-</ul>
-</html>