MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 61: / Line 61: @@
 }
+/* TOC Container */
 #toc {
-     display: none !important;
+    font-family: 'Cinzel', serif;
+    background: linear-gradient(to bottom, #111, #1a1a1a);
+    border: 1px solid rgba(255, 215, 0, 0.2);
+    border-radius: 6px;
+    padding: 10px;
+    margin: 15px 0;
+    width: fit-content;
+    max-width: 320px;
+    color: #ddd;
+    box-shadow: 0 0 5px rgba(255, 215, 0, 0.05);
+}
+/* TOC Title Bar */
+#toc .toctitle {
+    font-weight: bold;
+    color: #FFD700;
+    font-size: 14px;
+    text-transform: uppercase;
+    margin-bottom: 6px;
+     display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.15);
+    padding-bottom: 6px;
+}
+#toc .toctitle::before {
+    content: "☰";
+    font-size: 16px;
+    color: #FFD700;
+    margin-right: 6px;
 }
-#toc-sidebar {
+/* Hide the toggle label text */
-    background: linear-gradient(to bottom, #111 0%, #222 100%);
+#toc .toctogglelabel {
-    border: 1px solid rgba(255, 215, 0, 0.3);
-    border-radius: 6px;
-    padding: 2px;
-    margin-bottom: 3px;
      font-family: 'Cinzel', serif;
      font-size: 12px;
-     width: 100%;
+     color: #aaa;
-     max-width: 100%;
+     cursor: pointer;
-     position: sticky;
+     transition: color 0.3s ease;
-    top: 100px;
-    z-index: 10;
 }
-#toc-sidebar .toctitle {
+#toc .toctogglelabel:hover {
-    font-family: 'Cinzel', serif;
+     color: #FFD700;
-    font-size: 12px;
-    font-weight: bold;
-    letter-spacing: 0.5px;
-    text-transform: uppercase;
-     color: #C0A080;
-    background: rgba(15, 15, 15, 0.9);
-    padding: 6px 4px;
-    border-radius: 6px 6px 0 0;
-    text-align: center;
-    line-height: 1.2;
-    word-break: break-word;
-    white-space: normal;
-    margin: 0;
 }
-#toc-sidebar ul {
+/* Numbering System */
+#toc ul {
      list-style: none;
-     padding: 2px;
+     padding-left: 0;
+    counter-reset: toc;
      margin: 0;
 }
-#toc-sidebar li {
+#toc li {
-     margin: 2px 0;
+    counter-increment: toc;
+    margin: 4px 0;
+    margin-left: 10px;
+    font-size: 12px;
+}
+#toc li::before {
+    content: counters(toc, ".") ". ";
+    color: #FFD700;
+    font-weight: bold;
+    margin-right: 5px;
+}
+#toc ul ul {
+    counter-reset: toc;
+     margin-left: 15px;
 }
-#toc-sidebar li a {
+/* TOC Links */
-    font-family: 'Cinzel', serif;
+#toc a {
-    font-size: 12px;
+     color: #bbb;
-     color: #bbb !important;
      text-decoration: none;
-    padding: 3px 5px;
-    display: block;
      transition: all 0.3s ease;
 }
-#toc-sidebar li a:hover {
+#toc a:hover {
-     color: #FFD700 !important;
+     color: #FFD700;
-    background: rgba(255, 255, 255, 0.1);
+     text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
-    border-radius: 2px;
-     text-shadow: 0 0 4px rgba(255, 215, 0, 0.4);
-}
-#toc-sidebar .toctoggle {
-    display: none;
 }
-body.sticky-toc #toc-sidebar {
+/* Remove unnecessary toggle border styles */
-     position: fixed;
+#toc .toctoggle {
-     top: 100px;
+     border: none;
-    right: auto;
+     margin-left: auto;
-    z-index: 10;
-    width: 160px;
 }