feat: Better ez-toc

2025-08-19 12:14:29 +02:00
parent e662c7cda4
commit 8ac4c6b675
4 changed files with 269 additions and 1 deletions
--- a/assets/css/scss/components/_ez-toc.scss
+++ b/assets/css/scss/components/_ez-toc.scss
@@ -0,0 +1,144 @@
+/* Styles for ez-toc-container */
+#ez-toc-container {
+  background-color: transparent;
+  border: none;
+  border-radius: 0;
+  padding: 16px 0;
+  box-shadow: none;
+  max-width: 100%;
+  margin: 16px 0;
+  width: 100%;
+
+  .ez-toc-title {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 10px;
+    border-bottom: 2px solid #ddd;
+    padding-bottom: 5px;
+  }
+
+  .ez-toc-cssicon-toggle-label {
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 10px;
+
+    .ez-toc-icon-toggle-span {
+      margin-left: 8px;
+    }
+  }
+
+  .ez-toc-list {
+    list-style-type: none;
+    padding-left: 0;
+
+    /* Base styles for all list items */
+    .ez-toc-link {
+      display: block;
+      padding: 8px 0;
+      color: #333;
+      text-decoration: none;
+      border-bottom: 1px solid #f0f0f0;
+
+      &:hover {
+        background-color: #f9f9f9;
+        border-radius: 4px;
+      }
+    }
+
+    /* Hierarchy-based alignment */
+    .ez-toc-list-level-1 {
+      padding-left: 0;
+
+      .ez-toc-link {
+        font-size: 1em;
+        font-weight: 600;
+      }
+    }
+
+    .ez-toc-list-level-2 {
+      padding-left: 20px;
+
+      .ez-toc-link {
+        font-size: 0.95em;
+        font-weight: 500;
+        padding-left: 10px;
+      }
+    }
+
+    .ez-toc-list-level-3 {
+      padding-left: 40px;
+
+      .ez-toc-link {
+        font-size: 0.9em;
+        font-weight: 400;
+        padding-left: 10px;
+      }
+    }
+
+    .ez-toc-list-level-4 {
+      padding-left: 60px;
+
+      .ez-toc-link {
+        font-size: 0.85em;
+        font-weight: 400;
+        padding-left: 10px;
+      }
+    }
+
+    /* Add more levels if needed */
+  }
+
+  /* Responsive styles */
+  @media (max-width: 768px) {
+    padding: 12px 0;
+
+    .ez-toc-title {
+      font-size: 1.125rem;
+    }
+
+    .ez-toc-link {
+      padding: 6px 0;
+      font-size: 0.9em;
+    }
+
+    /* Adjust hierarchy padding for tablets */
+    .ez-toc-list-level-2 {
+      padding-left: 15px;
+    }
+
+    .ez-toc-list-level-3 {
+      padding-left: 30px;
+    }
+
+    .ez-toc-list-level-4 {
+      padding-left: 45px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    padding: 10px 0;
+
+    .ez-toc-title {
+      font-size: 1rem;
+    }
+
+    .ez-toc-link {
+      padding: 4px 0;
+      font-size: 0.85em;
+    }
+
+    /* Adjust hierarchy padding for mobile */
+    .ez-toc-list-level-2 {
+      padding-left: 10px;
+    }
+
+    .ez-toc-list-level-3 {
+      padding-left: 20px;
+    }
+
+    .ez-toc-list-level-4 {
+      padding-left: 30px;
+    }
+  }
+}