@@ Line 1: / Line 1: @@
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap');
+.rot-box {
+  background-color: #141414;
+  border: 1px solid #A67C52;
+  border-radius: 6px;
+  padding: 10px 15px;
+  margin: 10px;
+  box-sizing: border-box;
+  color: #ccc;
+}
+a:link {
+    color: #7aa9ff !important; /* Light steel blue */
+}
+a:visited {
+    color: #c98bff !important; /* Light violet */
+}
+a:hover {
+    color: #FFD700 !important;
+    text-shadow: 0 0 5px rgba(255, 215, 0, 0.2);
+}
+.rot-flex-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+}
+.rot-left, .rot-right, .rot-bottom {
+  width: 48%;
+  min-width: 320px;
+}
+/* Make portable infobox match dark theme */
+.portable-infobox {
+  background-color: #1c1c1c;
+  color: #e0e0e0;
+  border: 1px solid #444;
+  font-size: 90%;
+}
+.portable-infobox .pi-title {
+  background-color: #2a2a2a;
+  color: #f9d29d;
+  font-size: 130%;
+  font-weight: bold;
+}
+.portable-infobox .pi-image img {
+  border: 1px solid #444;
+}
+.portable-infobox .pi-data-label {
+  color: #c9a66b;
+  font-weight: bold;
+  width: 40%;
+}
+.portable-infobox .pi-data-value {
+  color: #eee;
+}
+.portable-infobox .pi-header {
+  background-color: #2e2e2e;
+  color: #d4af37;
+  font-weight: bold;
+  text-transform: uppercase;
+  font-size: 95%;
+}
+.portable-infobox .pi-navigation {
+  display: none; /* Hide empty navigation footer if unused */
+}
+#p-logo {
+    position: static !important;
+    height: auto !important;
+    margin: 0px 0 5px 5px !important;
+    padding: 0 !important;
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+}
 #mw-panel {
-     width: 150px;
+     width: 160px;
+    min-width: 150px;
+    max-width: 200px;
      padding: 2px;
      display: flex;
      flex-direction: column;
      gap: 4px;
+}
+#mw-panel .mw-portlet .vector-menu-heading-label {
+  display: inline-block;
+  text-align: center;
 }
 #mw-panel .mw-portlet {
      width: 100%;
+    overflow: hidden;
+    position: relative;
      background: linear-gradient(to bottom, #111 0%, #222 100%);
      border: 1px solid rgba(255, 215, 0, 0.3);
@@ Line 19: / Line 111: @@
 #mw-panel .mw-portlet .vector-menu-heading {
-    font-family: 'Cinzel', serif;
+  display: flex;
-    font-size: 13px;
+  align-items: center;
-    font-weight: bold;
+  justify-content: center;
-    text-transform: uppercase;
+  font-family: 'Cinzel', serif;
-    color: #C0A080;
+  font-size: 12px;
-    background: rgba(15, 15, 15, 0.9);
+  font-weight: bold;
-    padding: 4px;
+  letter-spacing: 0.5px;
-    border-radius: 6px 6px 0 0;
+  text-transform: uppercase;
-    text-align: center;
+  color: #C0A080;
-    letter-spacing: 1px;
+  background-color: rgba(15, 15, 15, 0.9);
-    line-height: 12px;
+  height: 30px;
+  margin: -2px -2px 4px -2px;
+  border-radius: 6px 6px 0 0;
+  text-align: center;
 }
 #mw-panel .mw-portlet .body a {
      font-family: 'Cinzel', serif;
-     font-size: 12px;
+     font-size: 14px;
      color: #bbb;
      text-decoration: none;
@@ Line 56: / Line 151: @@
 }
-#floating-toc {
+.toc, .toc * {
-    position: fixed;
+  box-sizing: border-box;
-    bottom: 20px;
+}
-    right: 20px;
-    width: 260px; /* Set fixed width */
+/* Base Box Styling */
-    height: 400px; /* Set fixed height */
+.toc {
-    overflow-y: auto; /* Make it scrollable */
+  border: 1px solid rgba(255, 215, 0, 0.2);
-    background: linear-gradient(to bottom, #111 0%, #222 100%);
+  border-radius: 8px;
-    border: 2px solid rgba(255, 215, 0, 0.5); /* Goldish border */
+  background: linear-gradient(to bottom, #111, #1a1a1a);
-    border-radius: 10px;
+  padding: 10px;
-    padding: 10px;
+  margin: 20px 0;
-    font-size: 14px;
+  font-family: 'Cinzel', serif;
-    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  font-size: 14px;
-     transition: all 0.3s ease-in-out;
+  color: #ccc;
-     z-index: 1000;
+  min-width: 12em;
+  box-shadow: 0 0 8px rgba(255, 215, 0, 0.05);
+}
+.toc a {
+  color: #ccc;
+  text-decoration: none;
+  transition: all 0.3s ease;
+}
+.toc a:hover {
+  color: #FFD700;
+  background: rgba(255, 255, 255, 0.05);
+  text-shadow: 0 0 4px rgba(255, 215, 0, 0.3);
+}
+.toc .tocnumber {
+  color: #999;
+}
+.toc .tocnumber:after {
+  content: ".";
+}
+/* Header & Title */
+.toc .toctitle {
+  border-bottom: 1px solid rgba(255, 215, 0, 0.3);
+  margin-bottom: 6px;
+  padding-bottom: 4px;
+  position: relative;
+  overflow: hidden;
+  text-align: left;
+}
+.toc .toctitle h2, .toc .toctitle .toctogglespan {
+  line-height: 20px;
+  margin: 0;
+  border: 0;
+}
+.toc .toctitle h2 {
+  padding: 0 0px;
+  font-weight: bold;
+  display: flex;
+  align-items: center;
+  color: #C0A080;
+  text-transform: uppercase;
+  font-size: 14px;
+}
+.toc .toctitle h2::before {
+  content: "";
+  display: block;
+  width: 14px;
+  height: 12px;
+  --mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewbox='0 0 12 12'%3E%3Cpath id='bulleted-list-tiny' d='M1.29 9.277c-.181.19-.29.45-.29.71 0 .26.109.52.29.71.189.18.45.29.71.29.26 0 .519-.11.71-.29.18-.19.29-.45.29-.71 0-.26-.11-.52-.29-.71-.38-.37-1.05-.37-1.42 0M10 9H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M6 3h4a1 1 0 1 0 0-2H6a1 1 0 1 0 0 2m4 2H6a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2M1.29 1.277c.37-.37 1.04-.37 1.42 0 .18.19.29.45.29.71 0 .26-.11.52-.29.71-.191.18-.45.29-.71.29-.26 0-.521-.11-.71-.29-.181-.19-.29-.45-.29-.71 0-.26.109-.52.29-.71zM2.55 5.17c.06.03.11.08.16.12.18.19.29.45.29.71 0 .26-.11.521-.29.71-.05.04-.1.09-.16.12a.559.559 0 0 1-.17.09c-.06.03-.12.05-.19.06-.06.01-.13.02-.19.02-.26 0-.52-.11-.71-.29A1.05 1.05 0 0 1 1 6c0-.26.11-.52.29-.71.24-.23.58-.34.9-.269a.6.6 0 0 1 .19.058c.06.021.12.051.17.091z'%3E%3C/path%3E%3C/svg%3E") no-repeat;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: #FFD700;
+  margin: 0 4px 0 0;
+  margin-bottom: 2px;
+}
+/* Toggle button */
+.toc .toctogglelabel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  padding: 0 8px;
+  font-size: 13px;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-family: 'Cinzel', serif;
+  color: #FFD700;
+  cursor: pointer;
+}
+.toc .toctogglespan::before,
+.toc .toctogglespan::after,
+.toc .toctogglelabel::after {
+  display: none;
+}
+.toc .toctogglelabel::before {
+  content: "";
+  display: block;
+  pointer-events: none;
+  --mask: var(--icon-chevron-down) no-repeat;
+  -webkit-mask: var(--mask);
+  mask: var(--mask);
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+  -webkit-mask-position: center center;
+  mask-position: center center;
+  background-color: #FFD700;
+  width: 14px;
+  height: 14px;
+  flex: 0 0 auto;
+  transform: scaleY(-1);
+  transition: transform 0.3s ease;
+}
+.toc .toctogglelabel:hover::before {
+  background-color: #fff8dc;
+}
+.toc .toctogglecheckbox:checked + .toctitle .toctogglelabel::before {
+  transform: none;
+}
+.toc .toctogglecheckbox:checked ~ ul {
+  overflow: hidden;
+  display: block;
+  height: 0;
+  padding: 0;
+  margin: 0;
+  border: 0;
+}
+#back-to-top {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  background: linear-gradient(to bottom, #222, #111);
+  border: 1px solid rgba(255, 215, 0, 0.3);
+  color: #FFD700;
+  font-family: 'Cinzel', serif;
+  font-size: 13px;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  display: none;
+  z-index: 1000;
+  transition: all 0.3s ease;
+  box-shadow: 0 0 6px rgba(255, 215, 0, 0.1);
+}
+#back-to-top:hover {
+  background: #1a1a1a;
+  color: #fff;
+  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
+}
+body {
+     background-color: #111; /* Very dark background */
+    color: #ddd; /* Light text for readability */
+    font-family: 'Cormorant Garamond', serif;
+    font-size: 18px;
+}
+#content, .vector-body, .mw-body, #mw-content-text {
+    background-color: #111;
+    color: #ddd;
+}
+#bodyContent,
+#mw-content-text,
+.mw-parser-output {
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.6;
+     font-family: 'Cormorant Garamond', serif;
 }
-/* Scrollbar Styling */
+a {
-#floating-toc::-webkit-scrollbar {
+    color: #bbb;
-     width: 8px;
+    text-decoration: none;
+     transition: color 0.3s ease;
 }
-#floating-toc::-webkit-scrollbar-thumb {
+a:hover {
-     background: rgba(255, 215, 0, 0.5); /* Gold scroll bar */
+     color: #FFD700;
-    border-radius: 4px;
 }
-#floating-toc::-webkit-scrollbar-track {
+.mw-parser-output {
-     background: rgba(20, 20, 20, 0.8);
+     background-color: transparent; /* Prevent overrides */
+    color: inherit;
 }
-/* Header - Centered, Bold, and Gold */
+h1, h2, h3, h4, h5, h6 {
-#floating-toc h2 {
+    color: #C0A080; /* Stylish headers */
      font-family: 'Cinzel', serif;
-    font-size: 16px;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: #C0A080; /* Gold */
-    text-align: center;
-    margin: 0;
-    padding: 5px;
 }
-/* ToC List - Properly Aligned */
+.mw-parser-output a:link {
-#floating-toc ul {
+  color: #7aa9ff;
-    list-style: none;
+}
-    padding: 0;
-    margin-top: 10px;
+.mw-parser-output a:visited {
-    border-top: 1px solid rgba(255, 215, 0, 0.3);
+  color: #c98bff;
-    text-align: left;
+}
+.mw-parser-output a:hover {
+  color: #FFD700;
+  text-shadow: 0 0 3px rgba(255, 215, 0, 0.4);
 }
-#floating-toc li {
+#mw-head {
-     padding: 4px 10px;
+     background-color: #111;
+    color: #ddd;
+    border-bottom: 1px solid rgba(255, 215, 0, 0.2);
 }
-/* Links - Aligned and Styled */
+#mw-head a {
-#floating-toc a {
-    font-family: 'Cinzel', serif;
-    font-size: 13px;
      color: #bbb;
      text-decoration: none;
-     display: block;
+     font-family: 'Cinzel', serif;
-    padding: 4px 10px;
-    border-radius: 4px;
-    transition: all 0.3s ease;
 }
-#floating-toc a:hover {
+#mw-head a:hover {
-     color: #FFD700; /* Golden Hover */
+     color: #FFD700;
      background: rgba(255, 255, 255, 0.1);
+    border-radius: 2px;
 }
-/* Nested Lists - Indentation */
+.vector-menu-content-list a {
-#floating-toc ul ul {
+    position: relative;
-     margin-left: 15px;
+    font-size: 15px;
+    overflow: hidden;
+}
+.vector-menu-content-list a::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    bottom: 0px;
+    width: 0%;
+    height: 2px;
+    background-color: #E5C07B;
+    transition: width 0.3s ease;
+}
+.vector-menu-content-list a:hover::after {
+    width: 100%;
+}
+.vector-menu-content-list a:visited,
+.vector-menu-content-list a:link,
+.vector-menu-content-list a:active {
+     color: #E5C07B !important;
+    text-decoration: none !important;
+}
+.vector-menu-tabs,
+.vector-menu-tabs li,
+.vector-menu-tabs li a,
+.vector-menu-tabs li.selected a {
+    background: #111 !important;
+    border-color: rgba(255, 215, 0, 0.2) !important;
+    color: #bbb !important;
+}
+.vector-menu-tabs li a:hover,
+.vector-menu-tabs li.selected a {
+    background: #1a1a1a !important;
+    color: #FFD700 !important;
+    border-color: #FFD700 !important;
+}
+@keyframes logoPopIn {
+% {
+        opacity: 0;
+        transform: scale(0.7);
+    }
+% {
+        opacity: 1;
+        transform: scale(1.1);
+    }
+% {
+        transform: scale(1);
+    }
 }
+.mw-wiki-logo {
+	animation: logoPopIn 0.6s ease-out forwards;
+    width: 230px !important;
+    height: 85px !important;
+    background-image: url('https://static.wikioasis.org/realmofthroneswiki/9/9d/ADOD.gif');
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain !important;
+    margin: 0 auto !important;
+}
-#floating-toc.collapsed {
+.mw-wiki-logo:hover {
-     width: 150px;
+     filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
-     height: 30px;
+     transform: scale(1.03);
-     overflow: hidden;
+     transition: all 0.3s ease;
-    padding: 5px;
-    text-align: center;
      cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: linear-gradient(to bottom, #111 0%, #222 100%);
-    border: 2px solid rgba(255, 215, 0, 0.5);
-    border-radius: 10px;
 }
-#floating-toc.collapsed::after {
+#footer, .mw-footer {
-     content: "Contents ▼";
+    background: #111 !important;
+     color: #bbb !important;
      font-family: 'Cinzel', serif;
      font-size: 14px;
-     font-weight: bold;
+     border-top: 1px solid rgba(255, 215, 0, 0.1);
-     color: #C0A080;
+     padding: 15px 20px;
-    display: block;
      text-align: center;
-    width: 100%;
 }
-/* Fix the logo positioning */
+#footer li,
-#p-logo {
+.mw-footer li,
-     position: absolute;
+#footer-info,
-     top: 10px; /* Adjust as needed */
+#footer-info-lastmod,
-     left: 50%;
+#footer-info-copyright {
-     transform: translateX(-50%); /* Center the logo */
+    color: #E5C07B !important;
-     width: 250px; /* Adjust width if necessary */
+    opacity: 1 !important;
-     height: auto;
+}
-     z-index: 100; /* Ensure it's above other elements */
+#footer-places {
+    display: none !important;
+}
+#footer a, .mw-footer a {
+    color: #E5C07B !important;
+    text-decoration: none;
+}
+#footer a:hover, .mw-footer a:hover {
+    color: #FFD700 !important;
+    text-shadow: 0 0 5px rgba(255, 215, 0, 0.4);
+}
+#footer-icons {
+     opacity: 0.9;
+     margin-top: 10px;
+     display: flex;
+     justify-content: center;
+    gap: 10px;
+}
+#footer-icons img {
+    filter: brightness(0.9);
+    transition: filter 0.3s ease;
+}
+#footer-icons img:hover {
+    filter: brightness(1.2);
+}
+#searchInput {
+    background: #1a1a1a;
+    color: #ddd;
+    border: 1px solid rgba(255, 215, 0, 0.2);
+     padding: 6px 8px;
+     font-family: 'Cinzel', serif;
+     border-radius: 4px;
 }
-/* Push the sidebar down so it doesn't overlap */
+#searchInput:focus {
-#mw-panel {
+     outline: none;
-     position: relative;
+    border-color: #FFD700;
-     margin-top: 80px; /* Adjust as needed */
+     box-shadow: 0 0 5px rgba(255, 215, 0, 0.3);
 }

MediaWiki:Common.css: Difference between revisions