MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
 #mw-panel {
-     background: none;
+     width: 150px;
-    border-radius: 8px;
+     padding: 2px;
-     padding: 10px;
      display: flex;
      flex-direction: column;
-     gap: 12px;
+     gap: 4px;
 }
 #mw-panel .mw-portlet {
-     border: 2px solid rgba(255, 255, 255, 0.2);
+     width: 100%;
-     background: rgba(30, 30, 30, 0.9);
+    background: linear-gradient(to bottom, #111 0%, #222 100%);
-     border-radius: 10px;
+     border: 1px solid rgba(255, 215, 0, 0.3);
-     padding: 5px;
+     border-radius: 6px;
+     padding: 2px;
+    margin-bottom: 4px;
 }
 #mw-panel .mw-portlet .vector-menu-heading {
      font-family: 'Cinzel', serif;
-     font-size: 18px;
+     font-size: 13px;
-     font-weight: 700;
+     font-weight: bold;
      text-transform: uppercase;
-     background: rgba(20, 20, 20, 1);
+    color: #C0A080;
-    color: #C0A080;
+     background: rgba(15, 15, 15, 0.9);
-     padding: 8px;
+     padding: 4px;
-     border-radius: 8px 8px 0 0;
+     border-radius: 6px 6px 0 0;
-     display: flex;
+     text-align: center;
-    justify-content: left;
+     letter-spacing: 1px;
-    align-items: center;
+     line-height: 12px;
-     cursor: default;
-}
-/* Remove the arrow */
-#mw-panel .mw-portlet .vector-menu-heading::after {
-    content: "";
-     display: none;
 }
-/* Sidebar Links */
 #mw-panel .mw-portlet .body a {
-    display: block;
      font-family: 'Cinzel', serif;
-     font-size: 16px;
+     font-size: 12px;
-     color: #ddd;
+     color: #bbb;
      text-decoration: none;
-     padding: 6px 12px;
+     padding: 3px 5px;
-     border-radius: 4px;
+     display: block;
+    transition: all 0.3s ease;
 }
 #mw-panel .mw-portlet .body a:hover {
-     background: rgba(255, 255, 255, 0.15);
+    color: #FFD700;
-     color: #C0A080;
+     background: rgba(255, 255, 255, 0.1);
+     border-radius: 2px;
 }
-/* Remove collapsible functionality */
 #mw-panel .mw-portlet .body {
-     display: block !important;
+     padding: 2px;
+}
+#mw-panel .mw-portlet {
+    margin-bottom: 3px;
+}
+#floating-toc {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 250px;
+    background: linear-gradient(to bottom, #111 0%, #222 100%);
+    border: 2px solid rgba(255, 215, 0, 0.5); /* Goldish border */
+    border-radius: 10px;
+    padding: 10px;
+    font-size: 14px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+    transition: all 0.3s ease-in-out;
+    z-index: 1000;
+}
+#floating-toc.collapsed {
+    width: 150px;
+    height: 30px;
+    overflow: hidden;
+    padding: 5px;
+    text-align: center;
+    cursor: pointer;
+}
+#floating-toc h2 {
+    font-family: 'Cinzel', serif;
+    font-size: 16px;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: #C0A080; /* Gold */
+    text-align: center;
+    margin: 0;
+    padding: 5px;
+}
+#floating-toc ul {
+    list-style: none;
+    padding: 0;
+    margin-top: 10px;
+    border-top: 1px solid rgba(255, 215, 0, 0.3);
 }
-#mw-panel .mw-portlet .body a:hover {
-     background: rgba(255, 255, 255, 0.1);
+#floating-toc li {
+     padding: 4px;
 }
-/* Collapse Button (Dropdown Icon) */
+#floating-toc a {
-#mw-panel .mw-portlet .vector-menu-heading::after {
+    font-family: 'Cinzel', serif;
-     content: "▼";
+    font-size: 13px;
-     font-size: 12px;
+    color: #bbb;
-     color: white;
+    text-decoration: none;
+    display: block;
+     padding: 4px 10px;
+     border-radius: 4px;
+     transition: all 0.3s ease;
 }
-/* Collapsed Sidebar Sections */
+#floating-toc a:hover {
-#mw-panel .mw-portlet.collapsed .body {
+     color: #FFD700;
-     display: none;
+    background: rgba(255, 255, 255, 0.1);
 }
-#mw-panel .mw-portlet.collapsed .vector-menu-heading::after {
+#floating-toc.collapsed::after {
-     content: "▶";
+     content: "Contents ▼";
+    font-family: 'Cinzel', serif;
+    font-size: 14px;
+    color: #C0A080;
+    display: block;
+    text-align: center;
+    padding: 5px;
 }