使用者工具

差異處

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

連向這個比對檢視

兩邊的前次修訂版前次修改
下次修改		前次修改
bootstrap [2024/10/27 10:01] – hostbootstrap [2024/12/17 22:11] (目前版本) – host
行 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>+

This website uses cookies. By using the website, you agree with storing cookies on your computer. Also, you acknowledge that you have read and understand our Privacy Policy. If you do not agree, please leave the website.

More information