https://utopiawiki.com/api.php?action=feedcontributions&feedformat=atom&user=YBthr 2026-04-16T21:54:18Z User contributions MediaWiki 1.45.1 https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=948 2026-03-02T23:03:43Z

<p>YBthr: Undo revision 947 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> :root {<br /> background: #000814 !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=947 2026-03-02T23:03:08Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { root-position: 0% 50%; }<br /> 50% { root-position: 100% 50%; }<br /> 100% { root-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> :root {<br /> background: transparent !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=946 2026-03-02T23:02:36Z

<p>YBthr: Undo revision 945 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> :root {<br /> background: #000814 !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=945 2026-03-02T23:01:55Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> :root {<br /> background: transparent !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=944 2026-03-02T22:54:08Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> :root {<br /> background: #000814 !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=943 2026-03-02T22:53:29Z

<p>YBthr: Undo revision 942 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=942 2026-03-02T22:52:57Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=941 2026-03-02T22:50:51Z

<p>YBthr: Undo revision 940 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=940 2026-03-02T22:50:15Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=939 2026-03-02T22:43:45Z

<p>YBthr: Undo revision 938 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=938 2026-03-02T22:43:19Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> body {<br /> background: #000814 !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=937 2026-03-02T18:12:50Z

<p>YBthr: Undo revision 936 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=936 2026-03-02T18:11:44Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> <br /> html {<br /> background: #000814 !important;<br /> }<br /> <br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=935 2026-03-02T17:12:54Z

<p>YBthr: Undo revision 934 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=934 2026-03-02T17:12:25Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=933 2026-02-21T08:07:00Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> <br /> .mw-parser-output .wikitable {<br /> width: auto !important; /* stop full-width */<br /> display: inline-table !important;/* shrink-wrap to content */<br /> max-width: 100% !important; /* don’t overflow the page */<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Formula Boxes<br /> ========================================================= */<br /> .formula-box {<br /> display: inline-block !important; /* shrink to fit */<br /> width: auto !important; /* no full width */<br /> max-width: 100% !important; /* prevent overflow */<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> <br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* =========================================================<br /> Time widgets (works in BOTH main header + sticky header)<br /> ========================================================= */<br /> <br /> .time-widgets {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> /* Nice pill styling */<br /> .time-widgets .header-widget {<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 6px !important;<br /> padding: 6px 10px !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 999px !important;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%) !important;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.18) !important;<br /> }<br /> <br /> .time-widgets .header-widget__label {<br /> color: #FFC300 !important;<br /> font-weight: 700 !important;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> .time-widgets .header-widget__value {<br /> color: #FFFFFF !important;<br /> font-weight: 700 !important;<br /> font-variant-numeric: tabular-nums;<br /> font-size: 0.95em !important;<br /> }<br /> <br /> /* MAIN header: center the bar within the header end area */<br /> .vector-header .vector-header-end {<br /> display: flex !important;<br /> align-items: center !important;<br /> }<br /> <br /> #main-time-widgets.time-widgets {<br /> flex: 1 1 auto !important;<br /> justify-content: center !important;<br /> }<br /> <br /> /* Sticky header: keep your current behavior (Discord left, widgets center) */<br /> .vector-sticky-header-icons {<br /> display: flex !important;<br /> align-items: center !important;<br /> gap: 10px !important;<br /> }<br /> <br /> #sticky-time-widgets.time-widgets,<br /> #main-time-widgets.time-widgets {<br /> margin: 0 auto !important;<br /> display: inline-flex !important;<br /> align-items: center !important;<br /> gap: 12px !important;<br /> white-space: nowrap !important;<br /> }<br /> <br /> <br /> /* Optional: hide labels when cramped */<br /> @media (max-width: 1100px) {<br /> .time-widgets .header-widget__label { display: none !important; }<br /> }<br /> <br /> /* Hide bar entirely on very small screens */<br /> @media (max-width: 860px) {<br /> #main-time-widgets,<br /> #sticky-time-widgets { display: none !important; }<br /> }<br /> <br /> @keyframes pulseRed {<br /> 0% { transform: scale(1); opacity: 1; }<br /> 50% { transform: scale(1.06); opacity: 0.85; }<br /> 100% { transform: scale(1); opacity: 1; }<br /> }<br /> <br /> .pulse-red {<br /> color: #ff4d4d !important;<br /> font-weight: 800 !important;<br /> animation: pulseRed 0.9s ease-in-out infinite !important;<br /> }<br /> <br /> /* =========================================================<br /> Discord Link Styling<br /> ========================================================= */<br /> <br /> .sticky-discord-link,<br /> #custom-sticky-link,<br /> #main-discord-link {<br /> color: #FFC300 !important;<br /> }<br /> <br /> .sticky-discord-link:hover,<br /> #custom-sticky-link:hover,<br /> #main-discord-link:hover {<br /> color: #FFD60A !important;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=932 2026-02-21T07:55:32Z

<p>YBthr: floating particles putting back in</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> (function () {<br /> 'use strict';<br /> <br /> /* =========================================================<br /> CONFIG<br /> ========================================================= */<br /> const DISCORD_URL = 'https://discord.gg/t2Rp2dRvze';<br /> <br /> // Countdown target: Sat, 18 Apr 2026 00:00 UTC<br /> const COUNTDOWN_TARGET_UTC = Date.parse('2026-04-18T00:00:00Z');<br /> <br /> // Clock timezone (same for everyone)<br /> const CLOCK_TIMEZONE = 'Etc/UTC';<br /> <br /> // Game time anchor (real UTC -&gt; game time)<br /> // At 2026-02-19 14:00:00 UTC, game time was Jan 21 YR2<br /> const GAME_ANCHOR_REAL_UTC = Date.parse('2026-02-19T14:00:00Z');<br /> const GAME_ANCHOR_MONTH_INDEX = 0; // Jan<br /> const GAME_ANCHOR_DAY = 21; // 1..24<br /> const GAME_ANCHOR_YEAR = 2; // YR2<br /> const GAME_MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];<br /> <br /> // Tick warning threshold<br /> const TICK_SOON_MINUTES = 5;<br /> <br /> const pad2 = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> /* =========================================================<br /> Tabs (your existing code)<br /> ========================================================= */<br /> $(function () {<br /> $('.wiki-tabs-container').each(function () {<br /> const $container = $(this);<br /> const $firstButton = $container.find('.wiki-tab-button').first();<br /> const firstTabId = $firstButton.data('tab');<br /> if (!firstTabId) return;<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> $('.wiki-tab-button').on('click', function () {<br /> const $button = $(this);<br /> const tabId = $button.data('tab');<br /> if (!tabId) return;<br /> <br /> const $container = $button.closest('.wiki-tabs-container');<br /> <br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> /* =========================================================<br /> Helpers: find/create containers in BOTH headers<br /> ========================================================= */<br /> function ensureDiscordLink(container, id) {<br /> if (!container) return null;<br /> const existing = document.getElementById(id);<br /> if (existing) return existing;<br /> <br /> const link = document.createElement('a');<br /> link.id = id;<br /> link.href = DISCORD_URL;<br /> link.target = '_blank';<br /> link.className =<br /> 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet sticky-discord-link';<br /> link.textContent = 'Join Us on Discord!';<br /> link.style.fontWeight = 'bold';<br /> <br /> container.prepend(link);<br /> return link;<br /> }<br /> <br /> // Sticky header: insert our widget bar inside sticky icons row<br /> function getStickyBar() {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return null;<br /> <br /> let bar = document.getElementById('sticky-time-widgets');<br /> if (bar) return bar;<br /> <br /> // Keep Discord where it was (far-left in sticky icons)<br /> const discord = ensureDiscordLink(icons, 'custom-sticky-link');<br /> <br /> bar = document.createElement('span');<br /> bar.id = 'sticky-time-widgets';<br /> bar.className = 'time-widgets';<br /> <br /> // Put widgets immediately AFTER Discord (so Discord stays at the left)<br /> if (discord &amp;&amp; discord.parentNode === icons) {<br /> discord.insertAdjacentElement('afterend', bar);<br /> } else {<br /> icons.prepend(bar);<br /> }<br /> <br /> return bar;<br /> }<br /> <br /> // Main header: put our widgets in header end area<br /> function getMainBar() {<br /> const header = document.querySelector('.vector-header');<br /> if (!header) return null;<br /> <br /> const headerEnd = header.querySelector('.vector-header-end');<br /> if (!headerEnd) return null;<br /> <br /> let bar = document.getElementById('main-time-widgets');<br /> if (bar) return bar;<br /> <br /> bar = document.createElement('span');<br /> bar.id = 'main-time-widgets';<br /> bar.className = 'time-widgets';<br /> <br /> headerEnd.prepend(bar);<br /> ensureDiscordLink(bar, 'main-discord-link');<br /> <br /> return bar;<br /> }<br /> <br /> function ensureWidget(bar, role, labelText) {<br /> if (!bar) return;<br /> if (bar.querySelector(`[data-role=&quot;${role}&quot;]`)) return;<br /> <br /> const wrap = document.createElement('span');<br /> wrap.className = 'header-widget';<br /> <br /> if (labelText) {<br /> const label = document.createElement('span');<br /> label.className = 'header-widget__label';<br /> label.textContent = labelText;<br /> wrap.appendChild(label);<br /> }<br /> <br /> const value = document.createElement('span');<br /> value.className = 'header-widget__value';<br /> value.dataset.role = role;<br /> <br /> wrap.appendChild(value);<br /> bar.appendChild(wrap);<br /> }<br /> <br /> /* =========================================================<br /> Calculations / formatting<br /> ========================================================= */<br /> function formatRemaining(ms) {<br /> if (ms &lt;= 0) return '00:00:00';<br /> <br /> const totalSeconds = Math.floor(ms / 1000);<br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;<br /> return `${pad2(hours)}:${pad2(minutes)}:${pad2(seconds)}`;<br /> }<br /> <br /> function computeGameString(nowMs) {<br /> const hoursPassed = Math.floor((nowMs - GAME_ANCHOR_REAL_UTC) / 3600000);<br /> <br /> // Day increments every hour (1..24)<br /> const dayIndex = (GAME_ANCHOR_DAY - 1) + hoursPassed;<br /> const dayNumber = ((dayIndex % 24) + 24) % 24 + 1;<br /> <br /> // Month increments every 24 hours (Jan..Jul cycle)<br /> const daysPassed = Math.floor(dayIndex / 24);<br /> const totalMonthIndex = GAME_ANCHOR_MONTH_INDEX + daysPassed;<br /> const monthIndex = ((totalMonthIndex % 7) + 7) % 7;<br /> <br /> // Year increments every 7 real days<br /> const yearsPassed = Math.floor(totalMonthIndex / 7);<br /> const year = GAME_ANCHOR_YEAR + yearsPassed;<br /> <br /> return `Current Game Date: ${GAME_MONTHS[monthIndex]} ${dayNumber} YR${year}`;<br /> }<br /> <br /> const clockFmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateAll() {<br /> const now = Date.now();<br /> <br /> // --- CLOCK ---<br /> document.querySelectorAll('[data-role=&quot;clock&quot;]').forEach((el) =&gt; {<br /> el.textContent = clockFmt.format(new Date(now));<br /> });<br /> <br /> // --- GAME DATE (Tick warning 5 minutes before the hour) ---<br /> const msUntilNextHour = 3600000 - (now % 3600000);<br /> const thresholdMs = TICK_SOON_MINUTES * 60 * 1000;<br /> const shouldWarn = msUntilNextHour &gt; 0 &amp;&amp; msUntilNextHour &lt;= thresholdMs;<br /> const minutesLeft = Math.ceil(msUntilNextHour / 60000);<br /> <br /> document.querySelectorAll('[data-role=&quot;game&quot;]').forEach((el) =&gt; {<br /> if (shouldWarn) {<br /> el.textContent = `TICK SOON (${minutesLeft}m)`;<br /> el.classList.add('pulse-red');<br /> } else {<br /> el.textContent = computeGameString(now);<br /> el.classList.remove('pulse-red');<br /> }<br /> });<br /> <br /> // --- COUNTDOWN ---<br /> document.querySelectorAll('[data-role=&quot;countdown&quot;]').forEach((el) =&gt; {<br /> el.textContent = formatRemaining(COUNTDOWN_TARGET_UTC - now);<br /> });<br /> }<br /> <br /> /* =========================================================<br /> Build + Boot<br /> ========================================================= */<br /> function buildBarsIfPossible() {<br /> const stickyBar = getStickyBar();<br /> const mainBar = getMainBar();<br /> <br /> if (stickyBar) {<br /> ensureWidget(stickyBar, 'clock', 'UTC:');<br /> ensureWidget(stickyBar, 'game', null);<br /> ensureWidget(stickyBar, 'countdown', 'Age ends in:');<br /> }<br /> <br /> if (mainBar) {<br /> ensureWidget(mainBar, 'clock', 'UTC:');<br /> ensureWidget(mainBar, 'game', null);<br /> ensureWidget(mainBar, 'countdown', 'Age ends in:');<br /> }<br /> }<br /> <br /> function startTickerOnce() {<br /> if (window.__timeWidgetsIntervalId) return;<br /> updateAll();<br /> window.__timeWidgetsIntervalId = setInterval(updateAll, 1000);<br /> }<br /> <br /> function initAll() {<br /> buildBarsIfPossible();<br /> updateAll();<br /> startTickerOnce();<br /> }<br /> <br /> $(initAll);<br /> mw.hook('wikipage.content').add(initAll);<br /> mw.hook('skin.ready').add(initAll);<br /> })();<br /> <br /> // Floating particles<br /> (function () {<br /> const canvas = document.createElement('canvas');<br /> canvas.id = 'particle-canvas';<br /> document.body.prepend(canvas);<br /> <br /> const ctx = canvas.getContext('2d');<br /> const particles = [];<br /> const COUNT = 80;<br /> <br /> const COLORS = [<br /> 'rgba(0, 53, 102, 0.9)', // #003566<br /> 'rgba(0, 29, 61, 0.8)', // #001d3d<br /> 'rgba(0, 8, 20, 0.7)', // #000814<br /> 'rgba(255, 255, 255, 0.15)', // subtle white glint<br /> ];<br /> <br /> function resize() {<br /> canvas.width = window.innerWidth;<br /> canvas.height = window.innerHeight;<br /> }<br /> <br /> function randomBetween(a, b) {<br /> return a + Math.random() * (b - a);<br /> }<br /> <br /> function createParticle() {<br /> return {<br /> x: randomBetween(0, canvas.width),<br /> y: randomBetween(canvas.height * 0.2, canvas.height),<br /> radius: randomBetween(1.5, 5),<br /> color: COLORS[Math.floor(Math.random() * COLORS.length)],<br /> speedY: randomBetween(0.2, 0.7),<br /> speedX: randomBetween(-0.2, 0.2),<br /> opacity: 0,<br /> fadeIn: randomBetween(0.003, 0.008),<br /> life: randomBetween(0.4, 1), // 0–1, fades out after 0.8<br /> };<br /> }<br /> <br /> for (let i = 0; i &lt; COUNT; i++) {<br /> const p = createParticle();<br /> p.y = randomBetween(0, canvas.height); // spread on init<br /> p.opacity = randomBetween(0, 1);<br /> particles.push(p);<br /> }<br /> <br /> function draw() {<br /> ctx.clearRect(0, 0, canvas.width, canvas.height);<br /> <br /> particles.forEach((p, i) =&gt; {<br /> // Fade in / out<br /> if (p.life &lt; 0.8) {<br /> p.opacity = Math.min(1, p.opacity + p.fadeIn);<br /> } else {<br /> p.opacity = Math.max(0, p.opacity - p.fadeIn * 0.5);<br /> }<br /> <br /> p.life += 0.001;<br /> p.y -= p.speedY;<br /> p.x += p.speedX;<br /> <br /> // Reset when off screen or fully faded<br /> if (p.y &lt; -10 || p.life &gt; 1.2) {<br /> particles[i] = createParticle();<br /> return;<br /> }<br /> <br /> ctx.beginPath();<br /> ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);<br /> ctx.globalAlpha = p.opacity;<br /> ctx.fillStyle = p.color;<br /> ctx.fill();<br /> <br /> // Soft glow<br /> ctx.shadowBlur = 8;<br /> ctx.shadowColor = p.color;<br /> ctx.fill();<br /> ctx.shadowBlur = 0;<br /> });<br /> <br /> ctx.globalAlpha = 1;<br /> requestAnimationFrame(draw);<br /> }<br /> <br /> resize();<br /> draw();<br /> window.addEventListener('resize', resize);<br /> })();</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=868 2026-02-17T09:57:34Z

<p>YBthr: </p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> &lt;div class=&quot;plainlinks&quot;&gt;[https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:20%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:80%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:20%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:80%; padding:1em; vertical-align:middle;&quot; |<br /> <br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=867 2026-02-17T09:37:00Z

<p>YBthr: plainlink discord</p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> &lt;div class=&quot;plainlinks&quot;&gt;[https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> <br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=866 2026-02-17T09:13:13Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #000814, #003566);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=865 2026-02-17T09:10:55Z

<p>YBthr: floating particles</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot;<br /> // Rules:<br /> // - Each real hour = +1 in-game day (1..24)<br /> // - Each 24 hours = +1 in-game month (Jan..Jul cycle)<br /> // - Each 7 days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: right now is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 5; // Mar (Jan=0)<br /> const ANCHOR_DAY = 14; // 1..24<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // If you want the game to follow a fixed timezone for everyone:<br /> // 0 = UTC. (Use 0 unless you KNOW you want another fixed offset.)<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current hour boundary (so it flips cleanly each hour)<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Whole hours passed since we declared &quot;Mar 1 YR1&quot;<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day increments each hour<br /> const dayIndex = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndex % 24) + 1; // 1..24<br /> <br /> // Month increments each 24 hours<br /> const daysPassed = Math.floor(dayIndex / 24); // 0..∞<br /> <br /> // Month+Year cycle is 7 days long<br /> const totalMonthIndex = (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalMonthIndex / 7) + 1;<br /> const month = months[((totalMonthIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Initial update<br /> update();<br /> <br /> // Update exactly on next hour, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });<br /> <br /> // Floating particles<br /> (function () {<br /> const canvas = document.createElement('canvas');<br /> canvas.id = 'particle-canvas';<br /> document.body.prepend(canvas);<br /> <br /> const ctx = canvas.getContext('2d');<br /> const particles = [];<br /> const COUNT = 80;<br /> <br /> const COLORS = [<br /> 'rgba(0, 53, 102, 0.9)', // #003566<br /> 'rgba(0, 29, 61, 0.8)', // #001d3d<br /> 'rgba(0, 8, 20, 0.7)', // #000814<br /> 'rgba(255, 255, 255, 0.15)', // subtle white glint<br /> ];<br /> <br /> function resize() {<br /> canvas.width = window.innerWidth;<br /> canvas.height = window.innerHeight;<br /> }<br /> <br /> function randomBetween(a, b) {<br /> return a + Math.random() * (b - a);<br /> }<br /> <br /> function createParticle() {<br /> return {<br /> x: randomBetween(0, canvas.width),<br /> y: randomBetween(canvas.height * 0.2, canvas.height),<br /> radius: randomBetween(1.5, 5),<br /> color: COLORS[Math.floor(Math.random() * COLORS.length)],<br /> speedY: randomBetween(0.2, 0.7),<br /> speedX: randomBetween(-0.2, 0.2),<br /> opacity: 0,<br /> fadeIn: randomBetween(0.003, 0.008),<br /> life: randomBetween(0.4, 1), // 0–1, fades out after 0.8<br /> };<br /> }<br /> <br /> for (let i = 0; i &lt; COUNT; i++) {<br /> const p = createParticle();<br /> p.y = randomBetween(0, canvas.height); // spread on init<br /> p.opacity = randomBetween(0, 1);<br /> particles.push(p);<br /> }<br /> <br /> function draw() {<br /> ctx.clearRect(0, 0, canvas.width, canvas.height);<br /> <br /> particles.forEach((p, i) =&gt; {<br /> // Fade in / out<br /> if (p.life &lt; 0.8) {<br /> p.opacity = Math.min(1, p.opacity + p.fadeIn);<br /> } else {<br /> p.opacity = Math.max(0, p.opacity - p.fadeIn * 0.5);<br /> }<br /> <br /> p.life += 0.001;<br /> p.y -= p.speedY;<br /> p.x += p.speedX;<br /> <br /> // Reset when off screen or fully faded<br /> if (p.y &lt; -10 || p.life &gt; 1.2) {<br /> particles[i] = createParticle();<br /> return;<br /> }<br /> <br /> ctx.beginPath();<br /> ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);<br /> ctx.globalAlpha = p.opacity;<br /> ctx.fillStyle = p.color;<br /> ctx.fill();<br /> <br /> // Soft glow<br /> ctx.shadowBlur = 8;<br /> ctx.shadowColor = p.color;<br /> ctx.fill();<br /> ctx.shadowBlur = 0;<br /> });<br /> <br /> ctx.globalAlpha = 1;<br /> requestAnimationFrame(draw);<br /> }<br /> <br /> resize();<br /> draw();<br /> window.addEventListener('resize', resize);<br /> })();</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=864 2026-02-17T09:07:45Z

<p>YBthr: try 2</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> @keyframes float {<br /> 0% { transform: translateY(0px) translateX(0px) scale(1); opacity: 0; }<br /> 10% { opacity: 1; }<br /> 90% { opacity: 1; }<br /> 100% { transform: translateY(-100vh) translateX(30px) scale(1.2); opacity: 0; }<br /> }<br /> <br /> /* ---------- Animated gradient layer ---------- */<br /> body::before {<br /> content: '';<br /> position: fixed;<br /> inset: 0;<br /> z-index: -2;<br /> background: linear-gradient(-45deg, #000814, #001d3d, #003566, #001d3d);<br /> background-size: 400% 400%;<br /> animation: gradient 15s ease infinite;<br /> }<br /> <br /> /* ---------- Base background reset ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: transparent !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Particle canvas ---------- */<br /> #particle-canvas {<br /> position: fixed;<br /> inset: 0;<br /> z-index: -1;<br /> pointer-events: none;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=863 2026-02-17T09:03:36Z

<p>YBthr: Gradient Background Animation</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Keyframes ---------- */<br /> @keyframes gradient {<br /> 0% { background-position: 0% 50%; }<br /> 50% { background-position: 100% 50%; }<br /> 100% { background-position: 0% 50%; }<br /> }<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(-45deg, #000814, #001d3d, #003566, #001d3d) !important;<br /> background-size: 400% 400% !important;<br /> background-attachment: fixed !important;<br /> animation: gradient 15s ease infinite !important;<br /> min-height: 100vh;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=860 2026-02-17T02:27:20Z

<p>YBthr: Undo revision 858 by YBthr (talk)</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=859 2026-02-17T02:27:09Z

<p>YBthr: Undo revision 857 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=858 2026-02-17T02:25:59Z

<p>YBthr: </p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });<br /> <br /> <br /> /**<br /> * Utopia Wiki Header Animations - MediaWiki Compatible<br /> * Direct targeting approach for MediaWiki 1.45+<br /> */<br /> <br /> $(document).ready(function() {<br /> 'use strict';<br /> <br /> // Find the image first as our anchor point<br /> var $logo = $('img[src*=&quot;Utopiawiki&quot;]').first();<br /> <br /> if ($logo.length === 0) {<br /> console.log('Utopia logo not found');<br /> return;<br /> }<br /> <br /> console.log('Utopia animations: Logo found, initializing...');<br /> <br /> // Find the container - go up until we find the div with padding<br /> var $container = $logo.closest('div[style*=&quot;padding&quot;]');<br /> <br /> if ($container.length === 0) {<br /> // Try alternative: find parent div<br /> $container = $logo.parent().parent();<br /> }<br /> <br /> console.log('Container found:', $container.length);<br /> <br /> // Wrap everything in our animation container if not already wrapped<br /> if (!$container.hasClass('utopia-header-container')) {<br /> $container.addClass('utopia-header-container');<br /> $container.css({<br /> 'position': 'relative',<br /> 'overflow': 'hidden',<br /> 'background': 'linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(30, 30, 60, 0.95) 100%)',<br /> 'border-radius': '12px',<br /> 'box-shadow': '0 8px 32px rgba(0, 0, 0, 0.4)',<br /> 'padding': '3em 2em'<br /> });<br /> }<br /> <br /> // Style the logo<br /> $logo.addClass('utopia-logo').css({<br /> 'filter': 'drop-shadow(0 4px 12px rgba(255, 195, 0, 0.3))',<br /> 'transition': 'transform 0.3s ease, filter 0.3s ease'<br /> });<br /> <br /> // Find and style text divs<br /> $container.find('div').each(function() {<br /> var $div = $(this);<br /> var text = $div.text().trim();<br /> <br /> if (text.includes('Comprehensive Guide')) {<br /> $div.addClass('utopia-subtitle');<br /> console.log('Added subtitle class');<br /> } else if (text.includes('Welcome to')) {<br /> $div.addClass('utopia-welcome');<br /> console.log('Added welcome class');<br /> } else if (text.includes('Age')) {<br /> $div.addClass('utopia-ages');<br /> console.log('Added ages class');<br /> }<br /> });<br /> <br /> // Style all links in the ages section<br /> $container.find('a').each(function(index) {<br /> var $link = $(this);<br /> $link.addClass('age-link');<br /> <br /> // First link is current<br /> if (index === 0) {<br /> $link.addClass('age-current');<br /> }<br /> <br /> // Wrap in a styled container for better effect<br /> $link.css({<br /> 'display': 'inline-block',<br /> 'padding': '0.8em 1.5em',<br /> 'margin': '0.5em',<br /> 'background': 'linear-gradient(135deg, rgba(255, 195, 0, 0.1) 0%, rgba(255, 195, 0, 0.05) 100%)',<br /> 'border': '2px solid rgba(255, 195, 0, 0.3)',<br /> 'border-radius': '8px',<br /> 'transition': 'all 0.3s ease',<br /> 'position': 'relative'<br /> });<br /> });<br /> <br /> // Add hover effects to links<br /> $container.on('mouseenter', '.age-link', function() {<br /> $(this).css({<br /> 'transform': 'translateY(-4px)',<br /> 'border-color': 'rgba(255, 195, 0, 0.6)',<br /> 'background': 'linear-gradient(135deg, rgba(255, 195, 0, 0.2) 0%, rgba(255, 195, 0, 0.1) 100%)',<br /> 'box-shadow': '0 8px 24px rgba(255, 195, 0, 0.3)'<br /> });<br /> <br /> $(this).find('span').css({<br /> 'text-shadow': '0 0 12px rgba(255, 195, 0, 0.8)'<br /> });<br /> }).on('mouseleave', '.age-link', function() {<br /> $(this).css({<br /> 'transform': 'translateY(0)',<br /> 'border-color': 'rgba(255, 195, 0, 0.3)',<br /> 'background': 'linear-gradient(135deg, rgba(255, 195, 0, 0.1) 0%, rgba(255, 195, 0, 0.05) 100%)',<br /> 'box-shadow': 'none'<br /> });<br /> <br /> $(this).find('span').css({<br /> 'text-shadow': 'none'<br /> });<br /> });<br /> <br /> // Add floating particles<br /> addFloatingParticles($container);<br /> <br /> // Add parallax effect to logo<br /> addParallaxEffect($container, $logo);<br /> <br /> // Add animations<br /> animateElements($container);<br /> <br /> console.log('Utopia animations initialized successfully!');<br /> <br /> function addFloatingParticles($container) {<br /> // Create particle container<br /> var $particleContainer = $('&lt;div class=&quot;utopia-particles&quot;&gt;&lt;/div&gt;').css({<br /> 'position': 'absolute',<br /> 'top': '0',<br /> 'left': '0',<br /> 'width': '100%',<br /> 'height': '100%',<br /> 'pointer-events': 'none',<br /> 'overflow': 'hidden',<br /> 'z-index': '1'<br /> });<br /> <br /> $container.prepend($particleContainer);<br /> <br /> // Create particles<br /> for (var i = 0; i &lt; 15; i++) {<br /> createParticle($particleContainer);<br /> }<br /> }<br /> <br /> function createParticle($container) {<br /> var size = Math.random() * 3 + 1;<br /> var duration = Math.random() * 15 + 10;<br /> var delay = Math.random() * 5;<br /> var startX = Math.random() * 100;<br /> var endX = startX + (Math.random() * 100 - 50);<br /> <br /> var $particle = $('&lt;div class=&quot;particle&quot;&gt;&lt;/div&gt;').css({<br /> 'position': 'absolute',<br /> 'width': size + 'px',<br /> 'height': size + 'px',<br /> 'background': 'rgba(255, 195, 0, ' + (Math.random() * 0.5 + 0.2) + ')',<br /> 'border-radius': '50%',<br /> 'left': startX + '%',<br /> 'bottom': '-10px',<br /> 'box-shadow': '0 0 ' + (size * 2) + 'px rgba(255, 195, 0, 0.5)',<br /> 'opacity': '0'<br /> });<br /> <br /> $container.append($particle);<br /> <br /> // Animate particle<br /> setTimeout(function() {<br /> animateParticle($particle, duration, endX);<br /> }, delay * 1000);<br /> }<br /> <br /> function animateParticle($particle, duration, endX) {<br /> $particle.css({<br /> 'transition': 'all ' + duration + 's linear',<br /> 'transform': 'translateY(-100vh) translateX(' + endX + 'px) rotate(360deg)',<br /> 'opacity': '1'<br /> });<br /> <br /> // Restart animation<br /> setTimeout(function() {<br /> $particle.css({<br /> 'transition': 'none',<br /> 'transform': 'translateY(0) translateX(0) rotate(0deg)',<br /> 'opacity': '0'<br /> });<br /> <br /> setTimeout(function() {<br /> animateParticle($particle, duration, endX);<br /> }, 100);<br /> }, duration * 1000);<br /> }<br /> <br /> function addParallaxEffect($container, $logo) {<br /> var mouseX = 0;<br /> var mouseY = 0;<br /> var currentX = 0;<br /> var currentY = 0;<br /> <br /> $container.on('mousemove', function(e) {<br /> var offset = $container.offset();<br /> var width = $container.width();<br /> var height = $container.height();<br /> <br /> mouseX = (e.pageX - offset.left - width / 2) / width;<br /> mouseY = (e.pageY - offset.top - height / 2) / height;<br /> });<br /> <br /> $container.on('mouseleave', function() {<br /> mouseX = 0;<br /> mouseY = 0;<br /> });<br /> <br /> function animate() {<br /> currentX += (mouseX - currentX) * 0.1;<br /> currentY += (mouseY - currentY) * 0.1;<br /> <br /> $logo.css('transform', 'translate(' + (currentX * 20) + 'px, ' + (currentY * 20) + 'px)');<br /> <br /> requestAnimationFrame(animate);<br /> }<br /> <br /> animate();<br /> }<br /> <br /> function animateElements($container) {<br /> // Animate subtitle<br /> var $subtitle = $container.find('.utopia-subtitle');<br /> if ($subtitle.length) {<br /> $subtitle.css({<br /> 'opacity': '0',<br /> 'transform': 'translateY(30px)'<br /> });<br /> <br /> setTimeout(function() {<br /> $subtitle.css({<br /> 'transition': 'all 1s ease-out',<br /> 'opacity': '1',<br /> 'transform': 'translateY(0)',<br /> 'text-shadow': '0 2px 8px rgba(255, 255, 255, 0.2)'<br /> });<br /> }, 300);<br /> }<br /> <br /> // Animate welcome<br /> var $welcome = $container.find('.utopia-welcome');<br /> if ($welcome.length) {<br /> $welcome.css({<br /> 'opacity': '0',<br /> 'transform': 'translateY(30px)'<br /> });<br /> <br /> setTimeout(function() {<br /> $welcome.css({<br /> 'transition': 'all 1.2s ease-out',<br /> 'opacity': '1',<br /> 'transform': 'translateY(0)'<br /> });<br /> <br /> // Animate the bold Utopia text<br /> $welcome.find('b, strong').css({<br /> 'color': '#FFC300',<br /> 'text-shadow': '0 0 10px rgba(255, 195, 0, 0.4)'<br /> });<br /> }, 600);<br /> }<br /> <br /> // Animate ages<br /> var $ages = $container.find('.utopia-ages');<br /> if ($ages.length) {<br /> $ages.css({<br /> 'opacity': '0',<br /> 'transform': 'translateY(30px)'<br /> });<br /> <br /> setTimeout(function() {<br /> $ages.css({<br /> 'transition': 'all 1.4s ease-out',<br /> 'opacity': '1',<br /> 'transform': 'translateY(0)'<br /> });<br /> }, 900);<br /> }<br /> <br /> // Float animation for logo<br /> floatLogo($container.find('.utopia-logo'));<br /> <br /> // Pulse animation for current age<br /> pulseCurrentAge($container.find('.age-current'));<br /> }<br /> <br /> function floatLogo($logo) {<br /> var up = true;<br /> <br /> setInterval(function() {<br /> if (up) {<br /> $logo.css('transform', 'translateY(-15px)');<br /> } else {<br /> $logo.css('transform', 'translateY(0)');<br /> }<br /> up = !up;<br /> }, 3000);<br /> <br /> $logo.css('transition', 'transform 3s ease-in-out');<br /> }<br /> <br /> function pulseCurrentAge($current) {<br /> if ($current.length === 0) return;<br /> <br /> setInterval(function() {<br /> $current.css('box-shadow', '0 0 25px rgba(255, 195, 0, 0.6), 0 0 35px rgba(255, 195, 0, 0.3)');<br /> <br /> setTimeout(function() {<br /> $current.css('box-shadow', '0 0 15px rgba(255, 195, 0, 0.3)');<br /> }, 1000);<br /> }, 2000);<br /> <br /> $current.css('transition', 'box-shadow 1s ease-in-out');<br /> }<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=857 2026-02-17T02:25:38Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> /* Utopia Wiki Animations - MediaWiki Compatible v2 */<br /> <br /> /* Particle animation keyframes */<br /> @keyframes floatUp {<br /> 0% {<br /> transform: translateY(0) translateX(0) rotate(0deg);<br /> opacity: 0;<br /> }<br /> 10% {<br /> opacity: 1;<br /> }<br /> 90% {<br /> opacity: 1;<br /> }<br /> 100% {<br /> transform: translateY(-100vh) translateX(50px) rotate(360deg);<br /> opacity: 0;<br /> }<br /> }<br /> <br /> /* Background pattern animation */<br /> .utopia-header-container::before {<br /> content: '';<br /> position: absolute;<br /> top: -50%;<br /> left: -50%;<br /> width: 200%;<br /> height: 200%;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.03) 1px, transparent 1px);<br /> background-size: 50px 50px;<br /> animation: rotatePattern 60s linear infinite;<br /> pointer-events: none;<br /> z-index: 0;<br /> }<br /> <br /> @keyframes rotatePattern {<br /> 0% {<br /> transform: translate(0, 0) rotate(0deg);<br /> }<br /> 100% {<br /> transform: translate(50px, 50px) rotate(360deg);<br /> }<br /> }<br /> <br /> /* Ensure content is above background */<br /> .utopia-header-container &gt; * {<br /> position: relative;<br /> z-index: 2;<br /> }<br /> <br /> /* Glow animation for Utopia text */<br /> @keyframes subtleGlow {<br /> 0%, 100% {<br /> text-shadow: 0 0 10px rgba(255, 195, 0, 0.4);<br /> }<br /> 50% {<br /> text-shadow: 0 0 20px rgba(255, 195, 0, 0.6), 0 0 30px rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> .utopia-welcome b,<br /> .utopia-welcome strong {<br /> animation: subtleGlow 3s ease-in-out infinite;<br /> }<br /> <br /> /* Shimmer line effect */<br /> .utopia-divider {<br /> height: 2px;<br /> background: linear-gradient(90deg, <br /> transparent 0%, <br /> rgba(255, 195, 0, 0.3) 20%, <br /> rgba(255, 195, 0, 0.6) 50%, <br /> rgba(255, 195, 0, 0.3) 80%, <br /> transparent 100%);<br /> margin: 2em 0;<br /> animation: shimmer 3s ease-in-out infinite;<br /> }<br /> <br /> @keyframes shimmer {<br /> 0%, 100% {<br /> opacity: 0.5;<br /> }<br /> 50% {<br /> opacity: 1;<br /> }<br /> }<br /> <br /> /* Responsive design */<br /> @media (max-width: 768px) {<br /> .utopia-logo {<br /> max-width: 200px !important;<br /> }<br /> <br /> .age-link {<br /> display: block !important;<br /> margin: 0.5em auto !important;<br /> max-width: 80%;<br /> }<br /> }<br /> <br /> /* Accessibility - reduced motion */<br /> @media (prefers-reduced-motion: reduce) {<br /> .utopia-header-container::before,<br /> .utopia-welcome b,<br /> .utopia-welcome strong,<br /> .utopia-divider {<br /> animation: none !important;<br /> }<br /> <br /> .age-link {<br /> transition: none !important;<br /> }<br /> <br /> * {<br /> animation: none !important;<br /> transition: none !important;<br /> }<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=856 2026-02-17T02:25:28Z

<p>YBthr: Undo revision 854 by YBthr (talk)</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=855 2026-02-17T02:25:25Z

<p>YBthr: Undo revision 853 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=854 2026-02-17T02:16:04Z

<p>YBthr: </p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });<br /> <br /> <br /> <br /> /* =========================================================<br /> UTOPIA HEADER INTERACTIVE ANIMATIONS - ADD TO COMMON.JS<br /> Sleek parallax and particle effects for gaming aesthetic<br /> ========================================================= */<br /> <br /> // Utopia Header Enhancements<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> // Only run on pages with the header section<br /> const headerSection = document.querySelector('.utopia-header-section');<br /> if (!headerSection) return;<br /> <br /> // Prevent running multiple times<br /> if (headerSection.classList.contains('utopia-enhanced')) return;<br /> headerSection.classList.add('utopia-enhanced');<br /> <br /> // Check if user prefers reduced motion<br /> const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br /> <br /> // ===============================<br /> // 1. PARALLAX MOUSE TRACKING<br /> // ===============================<br /> if (!prefersReducedMotion) {<br /> const logo = headerSection.querySelector('img[src*=&quot;Utopiawiki&quot;]');<br /> <br /> if (logo) {<br /> let mouseX = 0;<br /> let mouseY = 0;<br /> let currentX = 0;<br /> let currentY = 0;<br /> <br /> headerSection.addEventListener('mousemove', (e) =&gt; {<br /> const rect = headerSection.getBoundingClientRect();<br /> mouseX = (e.clientX - rect.left - rect.width / 2) / rect.width;<br /> mouseY = (e.clientY - rect.top - rect.height / 2) / rect.height;<br /> });<br /> <br /> headerSection.addEventListener('mouseleave', () =&gt; {<br /> mouseX = 0;<br /> mouseY = 0;<br /> });<br /> <br /> function animateParallax() {<br /> // Smooth lerp<br /> currentX += (mouseX - currentX) * 0.1;<br /> currentY += (mouseY - currentY) * 0.1;<br /> <br /> // Apply subtle parallax to logo<br /> logo.style.transform = `translate(${currentX * 15}px, ${currentY * 15}px)`;<br /> <br /> requestAnimationFrame(animateParallax);<br /> }<br /> <br /> animateParallax();<br /> }<br /> }<br /> <br /> // ===============================<br /> // 2. FLOATING PARTICLES<br /> // ===============================<br /> if (!prefersReducedMotion) {<br /> function createParticle() {<br /> const particle = document.createElement('div');<br /> particle.className = 'utopia-particle';<br /> <br /> // Random starting position<br /> const startX = Math.random() * 100;<br /> const drift = (Math.random() - 0.5) * 100;<br /> const duration = 15 + Math.random() * 10;<br /> const delay = Math.random() * 5;<br /> const size = 1 + Math.random() * 2;<br /> <br /> particle.style.cssText = `<br /> left: ${startX}%;<br /> bottom: -10px;<br /> width: ${size}px;<br /> height: ${size}px;<br /> animation-duration: ${duration}s;<br /> animation-delay: ${delay}s;<br /> --drift: ${drift}px;<br /> `;<br /> <br /> headerSection.appendChild(particle);<br /> <br /> // Remove particle after animation completes<br /> setTimeout(() =&gt; {<br /> particle.remove();<br /> }, (duration + delay) * 1000);<br /> }<br /> <br /> // Create initial particles<br /> for (let i = 0; i &lt; 15; i++) {<br /> setTimeout(() =&gt; createParticle(), i * 1000);<br /> }<br /> <br /> // Continuously spawn new particles<br /> setInterval(() =&gt; createParticle(), 3000);<br /> }<br /> <br /> // ===============================<br /> // 3. HOVER RIPPLE EFFECT ON CLICKS<br /> // ===============================<br /> headerSection.addEventListener('click', function(e) {<br /> if (prefersReducedMotion) return;<br /> <br /> const ripple = document.createElement('div');<br /> const rect = headerSection.getBoundingClientRect();<br /> const size = Math.max(rect.width, rect.height) * 1.5;<br /> const x = e.clientX - rect.left - size / 2;<br /> const y = e.clientY - rect.top - size / 2;<br /> <br /> ripple.style.cssText = `<br /> position: absolute;<br /> width: ${size}px;<br /> height: ${size}px;<br /> left: ${x}px;<br /> top: ${y}px;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.15) 0%, transparent 70%);<br /> border-radius: 50%;<br /> pointer-events: none;<br /> z-index: 10;<br /> animation: rippleExpand 1s ease-out;<br /> `;<br /> <br /> headerSection.appendChild(ripple);<br /> <br /> setTimeout(() =&gt; ripple.remove(), 1000);<br /> });<br /> <br /> // ===============================<br /> // 4. SCROLL-BASED REVEAL (if header starts off-screen)<br /> // ===============================<br /> if (!prefersReducedMotion &amp;&amp; 'IntersectionObserver' in window) {<br /> const observer = new IntersectionObserver((entries) =&gt; {<br /> entries.forEach(entry =&gt; {<br /> if (entry.isIntersecting) {<br /> entry.target.style.opacity = '1';<br /> entry.target.style.transform = 'translateY(0)';<br /> }<br /> });<br /> }, {<br /> threshold: 0.1<br /> });<br /> <br /> const animatedElements = headerSection.querySelectorAll('.utopia-subtitle, .utopia-welcome, .utopia-ages');<br /> animatedElements.forEach(el =&gt; {<br /> // Initial state (only if not already visible)<br /> if (el.getBoundingClientRect().top &gt; window.innerHeight) {<br /> el.style.opacity = '0';<br /> el.style.transform = 'translateY(30px)';<br /> el.style.transition = 'opacity 0.8s ease-out, transform 0.8s ease-out';<br /> }<br /> observer.observe(el);<br /> });<br /> }<br /> <br /> });<br /> <br /> // ===============================<br /> // RIPPLE ANIMATION KEYFRAMES (injected once)<br /> // ===============================<br /> (function() {<br /> if (document.getElementById('utopia-ripple-styles')) return;<br /> <br /> const style = document.createElement('style');<br /> style.id = 'utopia-ripple-styles';<br /> style.textContent = `<br /> @keyframes rippleExpand {<br /> 0% {<br /> transform: scale(0);<br /> opacity: 1;<br /> }<br /> 100% {<br /> transform: scale(1);<br /> opacity: 0;<br /> }<br /> }<br /> `;<br /> document.head.appendChild(style);<br /> })();</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=853 2026-02-17T02:15:41Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> <br /> /* =========================================================<br /> UTOPIA HEADER ANIMATIONS - ADD TO COMMON.CSS<br /> Sleek, elegant animations for hardcore gamers<br /> ========================================================= */<br /> <br /> /* Container animations */<br /> .utopia-header-section {<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> <br /> /* Animated scanline effect overlay */<br /> .utopia-header-section::before {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: -100%;<br /> width: 100%;<br /> height: 100%;<br /> background: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgba(255, 195, 0, 0.03) 50%,<br /> transparent 100%<br /> );<br /> animation: scanlinePass 8s ease-in-out infinite;<br /> pointer-events: none;<br /> z-index: 1;<br /> }<br /> <br /> /* Subtle grid background */<br /> .utopia-header-section::after {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> background-image: <br /> linear-gradient(rgba(255, 195, 0, 0.02) 1px, transparent 1px),<br /> linear-gradient(90deg, rgba(255, 195, 0, 0.02) 1px, transparent 1px);<br /> background-size: 60px 60px;<br /> opacity: 0;<br /> animation: gridFadeIn 2s ease-out 0.5s forwards;<br /> pointer-events: none;<br /> z-index: 0;<br /> }<br /> <br /> /* Logo floating animation */<br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;] {<br /> animation: logoFloat 6s ease-in-out infinite;<br /> filter: drop-shadow(0 4px 20px rgba(255, 195, 0, 0.4));<br /> transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);<br /> position: relative;<br /> z-index: 2;<br /> }<br /> <br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;]:hover {<br /> transform: scale(1.08) translateY(-5px) !important;<br /> filter: drop-shadow(0 8px 30px rgba(255, 195, 0, 0.6));<br /> }<br /> <br /> /* Subtitle fade-in with slide */<br /> .utopia-subtitle {<br /> animation: fadeInSlide 1s ease-out 0.3s backwards;<br /> position: relative;<br /> z-index: 2;<br /> }<br /> <br /> .utopia-subtitle::after {<br /> content: '';<br /> position: absolute;<br /> bottom: -8px;<br /> left: 0;<br /> width: 0%;<br /> height: 2px;<br /> background: linear-gradient(90deg, #FFC300, transparent);<br /> animation: underlineExpand 1.2s ease-out 0.8s forwards;<br /> }<br /> <br /> /* Welcome text with stagger */<br /> .utopia-welcome {<br /> animation: fadeInSlide 1.2s ease-out 0.6s backwards;<br /> position: relative;<br /> z-index: 2;<br /> }<br /> <br /> /* Make &quot;Utopia&quot; text glow */<br /> .utopia-welcome strong {<br /> display: inline-block;<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> -webkit-background-clip: text;<br /> -webkit-text-fill-color: transparent;<br /> background-clip: text;<br /> animation: subtleGlow 3s ease-in-out infinite;<br /> text-shadow: none;<br /> position: relative;<br /> }<br /> <br /> /* Divider line animation */<br /> .utopia-divider {<br /> height: 2px;<br /> margin: 2em auto;<br /> background: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgba(255, 195, 0, 0.2) 20%,<br /> rgba(255, 195, 0, 0.8) 50%,<br /> rgba(255, 195, 0, 0.2) 80%,<br /> transparent 100%<br /> );<br /> position: relative;<br /> overflow: hidden;<br /> animation: fadeInSlide 1s ease-out 1s backwards;<br /> z-index: 2;<br /> }<br /> <br /> .utopia-divider::before {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: -100%;<br /> width: 40%;<br /> height: 100%;<br /> background: linear-gradient(<br /> 90deg,<br /> transparent,<br /> rgba(255, 214, 10, 0.6),<br /> transparent<br /> );<br /> animation: shimmerPass 3s ease-in-out infinite;<br /> }<br /> <br /> /* Age links styling */<br /> .utopia-ages {<br /> animation: fadeInSlide 1.4s ease-out 1.2s backwards;<br /> position: relative;<br /> z-index: 2;<br /> }<br /> <br /> /* Age link buttons */<br /> .utopia-ages a {<br /> display: inline-block;<br /> position: relative;<br /> transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<br /> text-decoration: none !important;<br /> }<br /> <br /> .utopia-ages a::before {<br /> content: '';<br /> position: absolute;<br /> top: -8px;<br /> left: -8px;<br /> right: -8px;<br /> bottom: -8px;<br /> background: linear-gradient(135deg, rgba(255, 195, 0, 0.1), rgba(255, 214, 10, 0.05));<br /> border: 1px solid rgba(255, 195, 0, 0.3);<br /> border-radius: 4px;<br /> opacity: 0;<br /> transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);<br /> pointer-events: none;<br /> }<br /> <br /> .utopia-ages a:hover::before {<br /> opacity: 1;<br /> top: -12px;<br /> left: -12px;<br /> right: -12px;<br /> bottom: -12px;<br /> border-color: rgba(255, 195, 0, 0.6);<br /> box-shadow: 0 8px 24px rgba(255, 195, 0, 0.3);<br /> }<br /> <br /> .utopia-ages a:hover span {<br /> text-shadow: 0 0 12px rgba(255, 195, 0, 0.8);<br /> }<br /> <br /> /* Current age special pulse */<br /> .age-current {<br /> animation: currentAgePulse 2s ease-in-out infinite;<br /> }<br /> <br /> /* Floating particles (optional - can be enabled/disabled) */<br /> .utopia-header-section .utopia-particle {<br /> position: absolute;<br /> width: 2px;<br /> height: 2px;<br /> background: rgba(255, 195, 0, 0.4);<br /> border-radius: 50%;<br /> pointer-events: none;<br /> z-index: 1;<br /> animation: particleFloat linear infinite;<br /> box-shadow: 0 0 4px rgba(255, 195, 0, 0.6);<br /> }<br /> <br /> /* =========================================================<br /> KEYFRAME ANIMATIONS<br /> ========================================================= */<br /> <br /> @keyframes scanlinePass {<br /> 0% {<br /> left: -100%;<br /> }<br /> 100% {<br /> left: 200%;<br /> }<br /> }<br /> <br /> @keyframes gridFadeIn {<br /> to {<br /> opacity: 1;<br /> }<br /> }<br /> <br /> @keyframes logoFloat {<br /> 0%, 100% {<br /> transform: translateY(0px);<br /> }<br /> 50% {<br /> transform: translateY(-12px);<br /> }<br /> }<br /> <br /> @keyframes fadeInSlide {<br /> from {<br /> opacity: 0;<br /> transform: translateY(20px);<br /> }<br /> to {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> }<br /> <br /> @keyframes underlineExpand {<br /> to {<br /> width: 100%;<br /> }<br /> }<br /> <br /> @keyframes subtleGlow {<br /> 0%, 100% {<br /> filter: brightness(1) drop-shadow(0 0 8px rgba(255, 195, 0, 0.3));<br /> }<br /> 50% {<br /> filter: brightness(1.15) drop-shadow(0 0 16px rgba(255, 195, 0, 0.5));<br /> }<br /> }<br /> <br /> @keyframes shimmerPass {<br /> 0% {<br /> left: -100%;<br /> }<br /> 100% {<br /> left: 200%;<br /> }<br /> }<br /> <br /> @keyframes currentAgePulse {<br /> 0%, 100% {<br /> filter: drop-shadow(0 0 8px rgba(255, 195, 0, 0.4));<br /> }<br /> 50% {<br /> filter: drop-shadow(0 0 16px rgba(255, 195, 0, 0.7));<br /> }<br /> }<br /> <br /> @keyframes particleFloat {<br /> 0% {<br /> transform: translateY(0) translateX(0);<br /> opacity: 0;<br /> }<br /> 10% {<br /> opacity: 1;<br /> }<br /> 90% {<br /> opacity: 1;<br /> }<br /> 100% {<br /> transform: translateY(-100vh) translateX(var(--drift, 30px));<br /> opacity: 0;<br /> }<br /> }<br /> <br /> /* =========================================================<br /> ACCESSIBILITY - Respect reduced motion<br /> ========================================================= */<br /> <br /> @media (prefers-reduced-motion: reduce) {<br /> .utopia-header-section::before,<br /> .utopia-header-section::after,<br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;],<br /> .utopia-subtitle,<br /> .utopia-welcome,<br /> .utopia-divider,<br /> .utopia-ages,<br /> .age-current,<br /> .utopia-particle {<br /> animation: none !important;<br /> }<br /> <br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;]:hover {<br /> transform: none !important;<br /> }<br /> }<br /> <br /> /* =========================================================<br /> RESPONSIVE ADJUSTMENTS<br /> ========================================================= */<br /> <br /> @media (max-width: 768px) {<br /> .utopia-header-section::after {<br /> background-size: 40px 40px;<br /> }<br /> <br /> .utopia-ages a::before {<br /> display: none; /* Simplify on mobile */<br /> }<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=852 2026-02-17T02:09:05Z

<p>YBthr: Undo revision 849 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=851 2026-02-17T02:08:46Z

<p>YBthr: Undo revision 850 by YBthr (talk)</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=850 2026-02-17T02:06:33Z

<p>YBthr: </p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });<br /> <br /> <br /> <br /> /**<br /> * UTOPIA WIKI HEADER - GAMING ELITE ANIMATIONS<br /> * Sleek, professional animations for hardcore gamers<br /> */<br /> <br /> (function() {<br /> 'use strict';<br /> <br /> // Configuration<br /> const CONFIG = {<br /> particleCount: 30,<br /> parallaxStrength: 15,<br /> colors: {<br /> primary: '#ffc300',<br /> secondary: '#ffd60a',<br /> dark: '#000814'<br /> }<br /> };<br /> <br /> // Initialize when DOM is ready<br /> if (document.readyState === 'loading') {<br /> document.addEventListener('DOMContentLoaded', initUtopiaHeader);<br /> } else {<br /> initUtopiaHeader();<br /> }<br /> <br /> function initUtopiaHeader() {<br /> const header = findHeaderSection();<br /> if (!header) {<br /> console.warn('Utopia header section not found');<br /> return;<br /> }<br /> <br /> // Check for reduced motion preference<br /> const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;<br /> <br /> if (!prefersReducedMotion) {<br /> initParticleSystem(header);<br /> initParallaxEffect(header);<br /> initMouseTrailEffect(header);<br /> initCornerAccents(header);<br /> }<br /> <br /> initHoverEffects(header);<br /> initScrollReveal(header);<br /> }<br /> <br /> function findHeaderSection() {<br /> // Look for the header section with class<br /> let header = document.querySelector('.utopia-header-section');<br /> <br /> // Fallback: find by image<br /> if (!header) {<br /> const logo = document.querySelector('img[alt*=&quot;Utopiawiki&quot;], img[src*=&quot;Utopiawiki&quot;]');<br /> if (logo) {<br /> header = logo.closest('div[style*=&quot;padding&quot;]')?.parentElement;<br /> }<br /> }<br /> <br /> return header;<br /> }<br /> <br /> /**<br /> * Particle System - Floating tech particles<br /> */<br /> function initParticleSystem(header) {<br /> const canvas = document.createElement('canvas');<br /> canvas.style.cssText = `<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> pointer-events: none;<br /> z-index: 1;<br /> `;<br /> header.style.position = 'relative';<br /> header.insertBefore(canvas, header.firstChild);<br /> <br /> const ctx = canvas.getContext('2d');<br /> let particles = [];<br /> let animationId;<br /> <br /> function resize() {<br /> canvas.width = header.offsetWidth;<br /> canvas.height = header.offsetHeight;<br /> initParticles();<br /> }<br /> <br /> function initParticles() {<br /> particles = [];<br /> for (let i = 0; i &lt; CONFIG.particleCount; i++) {<br /> particles.push(createParticle());<br /> }<br /> }<br /> <br /> function createParticle() {<br /> return {<br /> x: Math.random() * canvas.width,<br /> y: canvas.height + Math.random() * 100,<br /> size: Math.random() * 2 + 1,<br /> speedY: Math.random() * 0.5 + 0.3,<br /> speedX: (Math.random() - 0.5) * 0.3,<br /> opacity: Math.random() * 0.5 + 0.3,<br /> hue: Math.random() &gt; 0.7 ? 45 : 42 // Gold hues<br /> };<br /> }<br /> <br /> function updateParticles() {<br /> particles.forEach((particle, index) =&gt; {<br /> particle.y -= particle.speedY;<br /> particle.x += particle.speedX;<br /> <br /> // Reset particle when it goes off screen<br /> if (particle.y &lt; -10 || particle.x &lt; -10 || particle.x &gt; canvas.width + 10) {<br /> particles[index] = createParticle();<br /> }<br /> });<br /> }<br /> <br /> function drawParticles() {<br /> ctx.clearRect(0, 0, canvas.width, canvas.height);<br /> <br /> particles.forEach(particle =&gt; {<br /> ctx.beginPath();<br /> ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);<br /> ctx.fillStyle = `hsla(${particle.hue}, 100%, 50%, ${particle.opacity})`;<br /> ctx.shadowBlur = 8;<br /> ctx.shadowColor = `hsla(${particle.hue}, 100%, 50%, 0.8)`;<br /> ctx.fill();<br /> ctx.shadowBlur = 0;<br /> });<br /> }<br /> <br /> function animate() {<br /> updateParticles();<br /> drawParticles();<br /> animationId = requestAnimationFrame(animate);<br /> }<br /> <br /> resize();<br /> animate();<br /> <br /> window.addEventListener('resize', resize);<br /> <br /> // Cleanup on navigation<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.body.contains(canvas)) {<br /> cancelAnimationFrame(animationId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> }<br /> <br /> /**<br /> * Parallax Effect - Logo follows mouse<br /> */<br /> function initParallaxEffect(header) {<br /> const logo = header.querySelector('img[alt*=&quot;Utopiawiki&quot;], img[src*=&quot;Utopiawiki&quot;]');<br /> if (!logo) return;<br /> <br /> header.setAttribute('data-parallax', 'true');<br /> <br /> let mouseX = 0;<br /> let mouseY = 0;<br /> let currentX = 0;<br /> let currentY = 0;<br /> <br /> header.addEventListener('mousemove', (e) =&gt; {<br /> const rect = header.getBoundingClientRect();<br /> mouseX = (e.clientX - rect.left - rect.width / 2) / rect.width;<br /> mouseY = (e.clientY - rect.top - rect.height / 2) / rect.height;<br /> });<br /> <br /> header.addEventListener('mouseleave', () =&gt; {<br /> mouseX = 0;<br /> mouseY = 0;<br /> });<br /> <br /> function animate() {<br /> currentX += (mouseX - currentX) * 0.1;<br /> currentY += (mouseY - currentY) * 0.1;<br /> <br /> const offsetX = currentX * CONFIG.parallaxStrength;<br /> const offsetY = currentY * CONFIG.parallaxStrength;<br /> <br /> logo.style.transform = `translate(${offsetX}px, ${offsetY}px)`;<br /> <br /> requestAnimationFrame(animate);<br /> }<br /> <br /> animate();<br /> }<br /> <br /> /**<br /> * Mouse Trail Effect - Subtle glow follows cursor<br /> */<br /> function initMouseTrailEffect(header) {<br /> const trail = document.createElement('div');<br /> trail.style.cssText = `<br /> position: absolute;<br /> width: 200px;<br /> height: 200px;<br /> border-radius: 50%;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.15) 0%, transparent 70%);<br /> pointer-events: none;<br /> z-index: 0;<br /> transition: opacity 0.3s ease;<br /> opacity: 0;<br /> `;<br /> header.appendChild(trail);<br /> <br /> let mouseX = 0;<br /> let mouseY = 0;<br /> let currentX = 0;<br /> let currentY = 0;<br /> <br /> header.addEventListener('mouseenter', () =&gt; {<br /> trail.style.opacity = '1';<br /> });<br /> <br /> header.addEventListener('mouseleave', () =&gt; {<br /> trail.style.opacity = '0';<br /> });<br /> <br /> header.addEventListener('mousemove', (e) =&gt; {<br /> const rect = header.getBoundingClientRect();<br /> mouseX = e.clientX - rect.left;<br /> mouseY = e.clientY - rect.top;<br /> });<br /> <br /> function animate() {<br /> currentX += (mouseX - currentX) * 0.15;<br /> currentY += (mouseY - currentY) * 0.15;<br /> <br /> trail.style.left = (currentX - 100) + 'px';<br /> trail.style.top = (currentY - 100) + 'px';<br /> <br /> requestAnimationFrame(animate);<br /> }<br /> <br /> animate();<br /> }<br /> <br /> /**<br /> * Corner Accents - Animated corner decorations<br /> */<br /> function initCornerAccents(header) {<br /> const corners = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];<br /> <br /> corners.forEach((corner, index) =&gt; {<br /> const accent = document.createElement('div');<br /> const [vertical, horizontal] = corner.split('-');<br /> <br /> accent.style.cssText = `<br /> position: absolute;<br /> ${vertical}: 0;<br /> ${horizontal}: 0;<br /> width: 40px;<br /> height: 40px;<br /> border-${vertical}: 2px solid rgba(255, 195, 0, 0.3);<br /> border-${horizontal}: 2px solid rgba(255, 195, 0, 0.3);<br /> z-index: 3;<br /> animation: cornerPulse ${2 + index * 0.3}s ease-in-out infinite;<br /> animation-delay: ${index * 0.2}s;<br /> `;<br /> <br /> header.appendChild(accent);<br /> });<br /> <br /> // Add corner pulse animation<br /> if (!document.getElementById('utopia-corner-styles')) {<br /> const style = document.createElement('style');<br /> style.id = 'utopia-corner-styles';<br /> style.textContent = `<br /> @keyframes cornerPulse {<br /> 0%, 100% {<br /> opacity: 0.3;<br /> transform: scale(1);<br /> }<br /> 50% {<br /> opacity: 0.6;<br /> transform: scale(1.1);<br /> }<br /> }<br /> `;<br /> document.head.appendChild(style);<br /> }<br /> }<br /> <br /> /**<br /> * Hover Effects - Enhanced age link interactions<br /> */<br /> function initHoverEffects(header) {<br /> const links = header.querySelectorAll('a');<br /> <br /> links.forEach(link =&gt; {<br /> // Add ripple effect on click<br /> link.addEventListener('click', function(e) {<br /> const ripple = document.createElement('div');<br /> const rect = this.getBoundingClientRect();<br /> const size = Math.max(rect.width, rect.height);<br /> const x = e.clientX - rect.left - size / 2;<br /> const y = e.clientY - rect.top - size / 2;<br /> <br /> ripple.style.cssText = `<br /> position: absolute;<br /> left: ${x}px;<br /> top: ${y}px;<br /> width: ${size}px;<br /> height: ${size}px;<br /> border-radius: 50%;<br /> background: rgba(255, 213, 10, 0.4);<br /> pointer-events: none;<br /> transform: scale(0);<br /> animation: rippleEffect 0.6s ease-out;<br /> `;<br /> <br /> this.style.position = 'relative';<br /> this.style.overflow = 'hidden';<br /> this.appendChild(ripple);<br /> <br /> setTimeout(() =&gt; ripple.remove(), 600);<br /> });<br /> });<br /> <br /> // Add ripple animation if not exists<br /> if (!document.getElementById('utopia-ripple-styles')) {<br /> const style = document.createElement('style');<br /> style.id = 'utopia-ripple-styles';<br /> style.textContent = `<br /> @keyframes rippleEffect {<br /> to {<br /> transform: scale(2);<br /> opacity: 0;<br /> }<br /> }<br /> `;<br /> document.head.appendChild(style);<br /> }<br /> }<br /> <br /> /**<br /> * Scroll Reveal - Fade in elements on scroll<br /> */<br /> function initScrollReveal(header) {<br /> const observer = new IntersectionObserver((entries) =&gt; {<br /> entries.forEach(entry =&gt; {<br /> if (entry.isIntersecting) {<br /> entry.target.style.opacity = '1';<br /> entry.target.style.transform = 'translateY(0)';<br /> }<br /> });<br /> }, {<br /> threshold: 0.1,<br /> rootMargin: '0px 0px -50px 0px'<br /> });<br /> <br /> observer.observe(header);<br /> }<br /> <br /> })();</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=849 2026-02-17T02:05:29Z

<p>YBthr: </p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }<br /> <br /> <br /> /* =========================================================<br /> UTOPIA WIKI HEADER - GAMING ELITE ANIMATIONS<br /> Color Palette: #000814, #001d3d, #003566, #ffc300, #ffd60a, #ffffff<br /> ========================================================= */<br /> <br /> /* ============ HEADER CONTAINER ============ */<br /> .utopia-header-section {<br /> position: relative;<br /> overflow: hidden;<br /> background: linear-gradient(135deg, #000814 0%, #001d3d 50%, #003566 100%);<br /> border-radius: 0 0 16px 16px;<br /> box-shadow: <br /> 0 8px 32px rgba(0, 8, 20, 0.6),<br /> 0 0 80px rgba(255, 195, 0, 0.1) inset;<br /> margin-bottom: 2em;<br /> }<br /> <br /> /* Animated grid overlay */<br /> .utopia-header-section::before {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> background-image: <br /> linear-gradient(rgba(255, 195, 0, 0.03) 1px, transparent 1px),<br /> linear-gradient(90deg, rgba(255, 195, 0, 0.03) 1px, transparent 1px);<br /> background-size: 50px 50px;<br /> animation: gridSlide 20s linear infinite;<br /> pointer-events: none;<br /> z-index: 1;<br /> }<br /> <br /> /* Glowing corner accents */<br /> .utopia-header-section::after {<br /> content: '';<br /> position: absolute;<br /> top: 0;<br /> right: 0;<br /> width: 300px;<br /> height: 300px;<br /> background: radial-gradient(circle at center, rgba(255, 195, 0, 0.15) 0%, transparent 70%);<br /> animation: pulseGlow 4s ease-in-out infinite;<br /> pointer-events: none;<br /> z-index: 1;<br /> }<br /> <br /> /* ============ LOGO ANIMATIONS ============ */<br /> .utopia-header-section img[alt*=&quot;Utopiawiki&quot;],<br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;] {<br /> position: relative;<br /> filter: drop-shadow(0 0 20px rgba(255, 195, 0, 0.4));<br /> animation: logoHover 6s ease-in-out infinite;<br /> transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);<br /> z-index: 2;<br /> }<br /> <br /> .utopia-header-section img[alt*=&quot;Utopiawiki&quot;]:hover,<br /> .utopia-header-section img[src*=&quot;Utopiawiki&quot;]:hover {<br /> transform: scale(1.08) rotate(2deg) !important;<br /> filter: drop-shadow(0 0 30px rgba(255, 195, 0, 0.6)) drop-shadow(0 0 50px rgba(255, 213, 10, 0.3));<br /> }<br /> <br /> /* ============ TEXT SECTIONS ============ */<br /> /* Subtitle */<br /> .utopia-header-section &gt; div &gt; div:first-of-type {<br /> position: relative;<br /> z-index: 2;<br /> animation: fadeInSlide 1s ease-out 0.2s backwards;<br /> font-family: 'Georgia', 'Times New Roman', serif;<br /> letter-spacing: 0.5px;<br /> text-shadow: 0 2px 8px rgba(0, 8, 20, 0.8);<br /> }<br /> <br /> /* Welcome text */<br /> .utopia-header-section &gt; div &gt; div:nth-of-type(2) {<br /> position: relative;<br /> z-index: 2;<br /> animation: fadeInSlide 1.2s ease-out 0.4s backwards;<br /> text-shadow: 0 2px 8px rgba(0, 8, 20, 0.8);<br /> }<br /> <br /> /* Highlight &quot;Utopia&quot; word with special glow */<br /> .utopia-header-section &gt; div &gt; div:nth-of-type(2) strong {<br /> color: #ffc300;<br /> font-weight: bold;<br /> text-shadow: <br /> 0 0 10px rgba(255, 195, 0, 0.6),<br /> 0 0 20px rgba(255, 195, 0, 0.4),<br /> 0 0 30px rgba(255, 195, 0, 0.2);<br /> animation: textPulse 3s ease-in-out infinite;<br /> display: inline-block;<br /> }<br /> <br /> /* ============ DIVIDER LINE ============ */<br /> .utopia-divider {<br /> position: relative;<br /> height: 2px;<br /> margin: 2.5em auto;<br /> max-width: 80%;<br /> background: linear-gradient(<br /> 90deg,<br /> transparent 0%,<br /> rgba(255, 195, 0, 0.2) 10%,<br /> rgba(255, 195, 0, 0.8) 30%,<br /> #ffc300 50%,<br /> rgba(255, 195, 0, 0.8) 70%,<br /> rgba(255, 195, 0, 0.2) 90%,<br /> transparent 100%<br /> );<br /> animation: dividerGlow 3s ease-in-out infinite;<br /> z-index: 2;<br /> }<br /> <br /> .utopia-divider::before,<br /> .utopia-divider::after {<br /> content: '';<br /> position: absolute;<br /> top: 50%;<br /> width: 8px;<br /> height: 8px;<br /> background: #ffc300;<br /> border-radius: 50%;<br /> box-shadow: 0 0 12px rgba(255, 195, 0, 0.8);<br /> animation: diamondPulse 2s ease-in-out infinite;<br /> }<br /> <br /> .utopia-divider::before {<br /> left: 0;<br /> transform: translate(-50%, -50%);<br /> }<br /> <br /> .utopia-divider::after {<br /> right: 0;<br /> transform: translate(50%, -50%);<br /> animation-delay: 1s;<br /> }<br /> <br /> /* ============ AGE LINKS SECTION ============ */<br /> .utopia-ages {<br /> position: relative;<br /> z-index: 2;<br /> animation: fadeInSlide 1.4s ease-out 0.6s backwards;<br /> }<br /> <br /> /* Age link styling - Current Age */<br /> .utopia-ages big:first-of-type a {<br /> display: inline-block;<br /> padding: 0.8em 2em;<br /> background: linear-gradient(135deg, #003566 0%, #001d3d 100%);<br /> border: 2px solid #ffc300;<br /> border-radius: 8px;<br /> position: relative;<br /> overflow: hidden;<br /> transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);<br /> box-shadow: <br /> 0 4px 15px rgba(255, 195, 0, 0.3),<br /> 0 0 40px rgba(255, 195, 0, 0.1) inset;<br /> animation: currentAgePulse 2s ease-in-out infinite;<br /> }<br /> <br /> /* Sliding shine effect on current age */<br /> .utopia-ages big:first-of-type a::before {<br /> content: '';<br /> position: absolute;<br /> top: -50%;<br /> left: -50%;<br /> width: 200%;<br /> height: 200%;<br /> background: linear-gradient(<br /> 45deg,<br /> transparent 30%,<br /> rgba(255, 213, 10, 0.3) 50%,<br /> transparent 70%<br /> );<br /> animation: slideShine 3s ease-in-out infinite;<br /> }<br /> <br /> .utopia-ages big:first-of-type a:hover {<br /> transform: translateY(-4px) scale(1.02);<br /> border-color: #ffd60a;<br /> box-shadow: <br /> 0 8px 25px rgba(255, 195, 0, 0.5),<br /> 0 0 60px rgba(255, 195, 0, 0.2) inset;<br /> }<br /> <br /> /* Age link styling - Archived */<br /> .utopia-ages big:nth-of-type(2) a {<br /> display: inline-block;<br /> padding: 0.6em 1.5em;<br /> background: linear-gradient(135deg, rgba(0, 53, 102, 0.6) 0%, rgba(0, 29, 61, 0.6) 100%);<br /> border: 1px solid rgba(255, 195, 0, 0.4);<br /> border-radius: 6px;<br /> position: relative;<br /> overflow: hidden;<br /> transition: all 0.3s ease;<br /> opacity: 0.8;<br /> }<br /> <br /> .utopia-ages big:nth-of-type(2) a::before {<br /> content: '';<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> width: 0;<br /> height: 0;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.2) 0%, transparent 70%);<br /> transform: translate(-50%, -50%);<br /> transition: all 0.5s ease;<br /> border-radius: 50%;<br /> }<br /> <br /> .utopia-ages big:nth-of-type(2) a:hover {<br /> opacity: 1;<br /> border-color: rgba(255, 195, 0, 0.7);<br /> background: linear-gradient(135deg, rgba(0, 53, 102, 0.8) 0%, rgba(0, 29, 61, 0.8) 100%);<br /> transform: translateY(-2px);<br /> }<br /> <br /> .utopia-ages big:nth-of-type(2) a:hover::before {<br /> width: 400px;<br /> height: 400px;<br /> }<br /> <br /> /* ============ FLOATING PARTICLES ============ */<br /> @keyframes floatParticle {<br /> 0% {<br /> transform: translate(0, 0) rotate(0deg);<br /> opacity: 0;<br /> }<br /> 10% {<br /> opacity: 0.6;<br /> }<br /> 90% {<br /> opacity: 0.6;<br /> }<br /> 100% {<br /> transform: translate(var(--tx), -120vh) rotate(360deg);<br /> opacity: 0;<br /> }<br /> }<br /> <br /> /* ============ KEYFRAME ANIMATIONS ============ */<br /> @keyframes gridSlide {<br /> 0% {<br /> transform: translate(0, 0);<br /> }<br /> 100% {<br /> transform: translate(50px, 50px);<br /> }<br /> }<br /> <br /> @keyframes pulseGlow {<br /> 0%, 100% {<br /> opacity: 0.5;<br /> transform: scale(1);<br /> }<br /> 50% {<br /> opacity: 1;<br /> transform: scale(1.2);<br /> }<br /> }<br /> <br /> @keyframes logoHover {<br /> 0%, 100% {<br /> transform: translateY(0px);<br /> }<br /> 50% {<br /> transform: translateY(-12px);<br /> }<br /> }<br /> <br /> @keyframes fadeInSlide {<br /> from {<br /> opacity: 0;<br /> transform: translateY(30px);<br /> }<br /> to {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> }<br /> <br /> @keyframes textPulse {<br /> 0%, 100% {<br /> text-shadow: <br /> 0 0 10px rgba(255, 195, 0, 0.6),<br /> 0 0 20px rgba(255, 195, 0, 0.4),<br /> 0 0 30px rgba(255, 195, 0, 0.2);<br /> }<br /> 50% {<br /> text-shadow: <br /> 0 0 15px rgba(255, 195, 0, 0.8),<br /> 0 0 30px rgba(255, 195, 0, 0.6),<br /> 0 0 45px rgba(255, 195, 0, 0.3),<br /> 0 0 60px rgba(255, 213, 10, 0.2);<br /> }<br /> }<br /> <br /> @keyframes dividerGlow {<br /> 0%, 100% {<br /> filter: brightness(1);<br /> }<br /> 50% {<br /> filter: brightness(1.3);<br /> }<br /> }<br /> <br /> @keyframes diamondPulse {<br /> 0%, 100% {<br /> transform: translate(-50%, -50%) scale(1);<br /> box-shadow: 0 0 12px rgba(255, 195, 0, 0.8);<br /> }<br /> 50% {<br /> transform: translate(-50%, -50%) scale(1.3);<br /> box-shadow: 0 0 20px rgba(255, 195, 0, 1), 0 0 30px rgba(255, 213, 10, 0.6);<br /> }<br /> }<br /> <br /> @keyframes currentAgePulse {<br /> 0%, 100% {<br /> box-shadow: <br /> 0 4px 15px rgba(255, 195, 0, 0.3),<br /> 0 0 40px rgba(255, 195, 0, 0.1) inset;<br /> }<br /> 50% {<br /> box-shadow: <br /> 0 4px 25px rgba(255, 195, 0, 0.5),<br /> 0 0 60px rgba(255, 195, 0, 0.2) inset;<br /> }<br /> }<br /> <br /> @keyframes slideShine {<br /> 0% {<br /> transform: translate(-100%, -100%) rotate(45deg);<br /> }<br /> 100% {<br /> transform: translate(100%, 100%) rotate(45deg);<br /> }<br /> }<br /> <br /> /* ============ PARALLAX EFFECT (JavaScript-driven) ============ */<br /> .utopia-header-section[data-parallax=&quot;true&quot;] img[alt*=&quot;Utopiawiki&quot;],<br /> .utopia-header-section[data-parallax=&quot;true&quot;] img[src*=&quot;Utopiawiki&quot;] {<br /> transition: transform 0.2s ease-out;<br /> }<br /> <br /> /* ============ ACCESSIBILITY - REDUCED MOTION ============ */<br /> @media (prefers-reduced-motion: reduce) {<br /> .utopia-header-section::before,<br /> .utopia-header-section::after,<br /> .utopia-header-section img,<br /> .utopia-divider,<br /> .utopia-divider::before,<br /> .utopia-divider::after,<br /> .utopia-ages big a,<br /> .utopia-ages big a::before,<br /> strong {<br /> animation: none !important;<br /> }<br /> <br /> .utopia-header-section img:hover,<br /> .utopia-ages big a:hover {<br /> transform: none !important;<br /> }<br /> }<br /> <br /> /* ============ RESPONSIVE ============ */<br /> @media (max-width: 768px) {<br /> .utopia-header-section::after {<br /> width: 200px;<br /> height: 200px;<br /> }<br /> <br /> .utopia-divider {<br /> max-width: 90%;<br /> }<br /> <br /> .utopia-ages big:first-of-type a {<br /> padding: 0.6em 1.5em;<br /> font-size: 0.9em;<br /> }<br /> <br /> .utopia-ages big:nth-of-type(2) a {<br /> padding: 0.5em 1.2em;<br /> font-size: 0.85em;<br /> }<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=848 2026-02-17T02:01:53Z

<p>YBthr: Undo revision 843 by YBthr (talk)</p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> [https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> <br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=847 2026-02-17T01:53:16Z

<p>YBthr: Undo revision 845 by YBthr (talk)</p> <hr /> <div>/* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=846 2026-02-17T01:52:47Z

<p>YBthr: Undo revision 844 by YBthr (talk)</p> <hr /> <div>/* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.js&diff=845 2026-02-17T01:50:57Z

<p>YBthr: </p> <hr /> <div>/**<br /> * Utopia Wiki Header Animations<br /> * Enhances the header section with dynamic effects<br /> */<br /> <br /> (function() {<br /> 'use strict';<br /> <br /> // Wait for DOM to be ready<br /> if (document.readyState === 'loading') {<br /> document.addEventListener('DOMContentLoaded', initUtopiaAnimations);<br /> } else {<br /> initUtopiaAnimations();<br /> }<br /> <br /> function initUtopiaAnimations() {<br /> // Find the header section (you may need to adjust the selector based on your page structure)<br /> const headerSection = findHeaderSection();<br /> <br /> if (!headerSection) {<br /> console.warn('Utopia header section not found');<br /> return;<br /> }<br /> <br /> // Wrap the section in a container for better control<br /> wrapHeaderSection(headerSection);<br /> <br /> // Apply classes to elements<br /> applyHeaderClasses(headerSection);<br /> <br /> // Add interactive effects<br /> addInteractiveEffects(headerSection);<br /> <br /> // Add floating particles effect<br /> addFloatingParticles(headerSection);<br /> <br /> // Add scroll-based animations<br /> addScrollAnimations(headerSection);<br /> }<br /> <br /> function findHeaderSection() {<br /> // Try to find the section containing the Utopia logo<br /> const logo = document.querySelector('img[alt*=&quot;Utopiawiki&quot;]') || <br /> document.querySelector('img[src*=&quot;Utopiawiki&quot;]');<br /> <br /> if (logo) {<br /> // Find the parent container (usually a few levels up)<br /> let parent = logo.parentElement;<br /> while (parent &amp;&amp; !parent.style.padding &amp;&amp; parent.tagName !== 'BODY') {<br /> parent = parent.parentElement;<br /> }<br /> return parent &amp;&amp; parent.tagName !== 'BODY' ? parent : logo.parentElement;<br /> }<br /> <br /> return null;<br /> }<br /> <br /> function wrapHeaderSection(section) {<br /> // Add container class<br /> section.classList.add('utopia-header-container');<br /> }<br /> <br /> function applyHeaderClasses(section) {<br /> // Find and style the logo<br /> const logo = section.querySelector('img');<br /> if (logo) {<br /> logo.classList.add('utopia-logo');<br /> }<br /> <br /> // Find and style text elements<br /> const divs = section.querySelectorAll('div[style*=&quot;font-size&quot;]');<br /> <br /> divs.forEach((div, index) =&gt; {<br /> const text = div.textContent.trim();<br /> <br /> if (text.includes('Comprehensive Guide')) {<br /> div.classList.add('utopia-subtitle');<br /> } else if (text.includes('Welcome to')) {<br /> div.classList.add('utopia-welcome');<br /> } else if (text.includes('Age')) {<br /> div.classList.add('utopia-ages');<br /> <br /> // Style age links<br /> const links = div.querySelectorAll('a');<br /> links.forEach((link, linkIndex) =&gt; {<br /> link.classList.add('age-link');<br /> if (linkIndex === 0) {<br /> link.classList.add('age-current');<br /> }<br /> });<br /> }<br /> });<br /> <br /> // Add divider lines between sections<br /> addDividers(section);<br /> }<br /> <br /> function addDividers(section) {<br /> const welcome = section.querySelector('.utopia-welcome');<br /> const ages = section.querySelector('.utopia-ages');<br /> <br /> if (welcome &amp;&amp; ages) {<br /> const divider = document.createElement('div');<br /> divider.className = 'utopia-divider';<br /> welcome.parentNode.insertBefore(divider, ages);<br /> }<br /> }<br /> <br /> function addInteractiveEffects(section) {<br /> // Add mousemove parallax effect<br /> let mouseX = 0;<br /> let mouseY = 0;<br /> let currentX = 0;<br /> let currentY = 0;<br /> <br /> section.addEventListener('mousemove', (e) =&gt; {<br /> const rect = section.getBoundingClientRect();<br /> mouseX = (e.clientX - rect.left - rect.width / 2) / rect.width;<br /> mouseY = (e.clientY - rect.top - rect.height / 2) / rect.height;<br /> });<br /> <br /> section.addEventListener('mouseleave', () =&gt; {<br /> mouseX = 0;<br /> mouseY = 0;<br /> });<br /> <br /> // Smooth parallax animation<br /> function animateParallax() {<br /> currentX += (mouseX - currentX) * 0.1;<br /> currentY += (mouseY - currentY) * 0.1;<br /> <br /> const logo = section.querySelector('.utopia-logo');<br /> if (logo) {<br /> logo.style.transform = `translate(${currentX * 20}px, ${currentY * 20}px)`;<br /> }<br /> <br /> requestAnimationFrame(animateParallax);<br /> }<br /> <br /> // Only enable parallax if user hasn't requested reduced motion<br /> if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {<br /> animateParallax();<br /> }<br /> <br /> // Add ripple effect on click<br /> section.addEventListener('click', createRipple);<br /> }<br /> <br /> function createRipple(e) {<br /> const ripple = document.createElement('div');<br /> const rect = e.currentTarget.getBoundingClientRect();<br /> const size = Math.max(rect.width, rect.height);<br /> const x = e.clientX - rect.left - size / 2;<br /> const y = e.clientY - rect.top - size / 2;<br /> <br /> ripple.style.cssText = `<br /> position: absolute;<br /> width: ${size}px;<br /> height: ${size}px;<br /> left: ${x}px;<br /> top: ${y}px;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.3) 0%, transparent 70%);<br /> border-radius: 50%;<br /> pointer-events: none;<br /> animation: rippleEffect 0.8s ease-out;<br /> `;<br /> <br /> e.currentTarget.appendChild(ripple);<br /> <br /> setTimeout(() =&gt; ripple.remove(), 800);<br /> }<br /> <br /> function addFloatingParticles(section) {<br /> // Skip if reduced motion is preferred<br /> if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {<br /> return;<br /> }<br /> <br /> const particleContainer = document.createElement('div');<br /> particleContainer.style.cssText = `<br /> position: absolute;<br /> top: 0;<br /> left: 0;<br /> width: 100%;<br /> height: 100%;<br /> pointer-events: none;<br /> overflow: hidden;<br /> `;<br /> <br /> section.style.position = 'relative';<br /> section.appendChild(particleContainer);<br /> <br /> // Create particles<br /> for (let i = 0; i &lt; 20; i++) {<br /> createParticle(particleContainer);<br /> }<br /> }<br /> <br /> function createParticle(container) {<br /> const particle = document.createElement('div');<br /> const size = Math.random() * 3 + 1;<br /> const duration = Math.random() * 20 + 10;<br /> const delay = Math.random() * 5;<br /> const startX = Math.random() * 100;<br /> <br /> particle.style.cssText = `<br /> position: absolute;<br /> width: ${size}px;<br /> height: ${size}px;<br /> background: rgba(255, 195, 0, ${Math.random() * 0.5 + 0.2});<br /> border-radius: 50%;<br /> left: ${startX}%;<br /> bottom: -10px;<br /> animation: floatUp ${duration}s linear ${delay}s infinite;<br /> box-shadow: 0 0 ${size * 2}px rgba(255, 195, 0, 0.5);<br /> `;<br /> <br /> container.appendChild(particle);<br /> }<br /> <br /> function addScrollAnimations(section) {<br /> // Skip if reduced motion is preferred<br /> if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) {<br /> return;<br /> }<br /> <br /> const observer = new IntersectionObserver((entries) =&gt; {<br /> entries.forEach(entry =&gt; {<br /> if (entry.isIntersecting) {<br /> entry.target.style.opacity = '1';<br /> entry.target.style.transform = 'translateY(0)';<br /> }<br /> });<br /> }, {<br /> threshold: 0.1<br /> });<br /> <br /> // Observe animated elements<br /> const animatedElements = section.querySelectorAll('.utopia-subtitle, .utopia-welcome, .utopia-ages');<br /> animatedElements.forEach(el =&gt; observer.observe(el));<br /> }<br /> <br /> // Add CSS animations for particles<br /> const style = document.createElement('style');<br /> style.textContent = `<br /> @keyframes floatUp {<br /> 0% {<br /> transform: translateY(0) translateX(0) rotate(0deg);<br /> opacity: 0;<br /> }<br /> 10% {<br /> opacity: 1;<br /> }<br /> 90% {<br /> opacity: 1;<br /> }<br /> 100% {<br /> transform: translateY(-100vh) translateX(${Math.random() * 100 - 50}px) rotate(360deg);<br /> opacity: 0;<br /> }<br /> }<br /> <br /> @keyframes rippleEffect {<br /> 0% {<br /> transform: scale(0);<br /> opacity: 1;<br /> }<br /> 100% {<br /> transform: scale(2);<br /> opacity: 0;<br /> }<br /> }<br /> `;<br /> document.head.appendChild(style);<br /> <br /> })();<br /> <br /> <br /> <br /> /* Any JavaScript here will be loaded for all users on every page load. */<br /> <br /> // Tab functionality<br /> $(document).ready(function() {<br /> // Initialize tabs - show first tab by default<br /> $('.wiki-tabs-container').each(function() {<br /> var $container = $(this);<br /> var $firstButton = $container.find('.wiki-tab-button').first();<br /> var firstTabId = $firstButton.data('tab');<br /> <br /> $firstButton.addClass('active');<br /> $container.find('#' + firstTabId).addClass('active').show();<br /> });<br /> <br /> // Tab click handler<br /> $('.wiki-tab-button').on('click', function() {<br /> var $button = $(this);<br /> var tabId = $button.data('tab');<br /> var $container = $button.closest('.wiki-tabs-container');<br /> <br /> // Remove active class from all buttons and panes in this container<br /> $container.find('.wiki-tab-button').removeClass('active');<br /> $container.find('.wiki-tab-pane').removeClass('active').hide();<br /> <br /> // Add active class to clicked button and corresponding pane<br /> $button.addClass('active');<br /> $container.find('#' + tabId).addClass('active').show();<br /> });<br /> });<br /> <br /> // ===============================<br /> // Add Custom Sticky Header Link<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> <br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicate button on navigation<br /> if (document.getElementById('custom-sticky-link')) return;<br /> <br /> const link = document.createElement('a');<br /> link.id = 'custom-sticky-link';<br /> link.href = 'https://discord.gg/t2Rp2dRvze'; // CHANGE THIS<br /> link.target = '_blank';<br /> link.className = 'cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet';<br /> link.textContent = 'Join Us on Discord!'; // CHANGE TEXT<br /> link.style.marginLeft = '10px';<br /> link.style.fontWeight = 'bold';<br /> <br /> icons.prepend(link); // use appendChild() if you want it at the end<br /> });<br /> <br /> // ===============================<br /> // Sticky Header Countdown Timer (Vector 2022) - to Apr 18, 2026 00:00 UTC<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> // Prevent duplicates<br /> if (document.getElementById('sticky-countdown')) return;<br /> <br /> // Target: Sat, 18 Apr 2026 at 00:00 GMT+00:00 (UTC)<br /> const target = new Date('2026-04-18T00:00:00Z');<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-countdown';<br /> wrap.className = 'sticky-countdown';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-countdown__label';<br /> label.textContent = 'Ends in:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-countdown__value';<br /> value.textContent = '--:--:--';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it before the default icons (Talk/History/Edit)<br /> icons.prepend(wrap);<br /> <br /> const pad = (n) =&gt; String(n).padStart(2, '0');<br /> <br /> const formatRemaining = (ms) =&gt; {<br /> if (ms &lt;= 0) return '00:00:00';<br /> const totalSeconds = Math.floor(ms / 1000);<br /> <br /> const days = Math.floor(totalSeconds / 86400);<br /> const hours = Math.floor((totalSeconds % 86400) / 3600);<br /> const minutes = Math.floor((totalSeconds % 3600) / 60);<br /> const seconds = totalSeconds % 60;<br /> <br /> if (days &gt; 0) return `${days}d ${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;<br /> };<br /> <br /> const update = () =&gt; {<br /> const now = new Date();<br /> const diff = target.getTime() - now.getTime();<br /> value.textContent = formatRemaining(diff);<br /> wrap.classList.toggle('is-expired', diff &lt;= 0);<br /> };<br /> <br /> update();<br /> const timerId = window.setInterval(update, 1000);<br /> <br /> // Cleanup if element removed (rare, but safe)<br /> const observer = new MutationObserver(() =&gt; {<br /> if (!document.getElementById('sticky-countdown')) {<br /> clearInterval(timerId);<br /> observer.disconnect();<br /> }<br /> });<br /> observer.observe(document.body, { childList: true, subtree: true });<br /> });<br /> <br /> // ===============================<br /> <br /> <br /> <br /> // ===============================<br /> // Sticky Header Game Time<br /> // Display: &quot;Mar 1 YR1&quot; (anchored at install time)<br /> // Rules:<br /> // - Each real hour = +1 in-game day number<br /> // - Each 24 hours = +1 in-game month (Jan..Jul via 7-day cycle)<br /> // - Each 7 months/days = +1 in-game year<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-game-time')) return;<br /> <br /> const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul'];<br /> <br /> // --------- ANCHOR: &quot;right now&quot; is Mar 1 YR1 ----------<br /> const ANCHOR_MONTH_INDEX = 2; // Mar (Jan=0)<br /> const ANCHOR_DAY = 1; // Day 1<br /> const ANCHOR_YEAR = 1; // YR1<br /> <br /> // Optional timezone shift (0 = UTC). If you want server/local behavior, tell me your target TZ.<br /> const GAME_TZ_OFFSET_HOURS = 0;<br /> <br /> const getShiftedNow = () =&gt; new Date(Date.now() + GAME_TZ_OFFSET_HOURS * 3600000);<br /> <br /> // Anchor to the current real-hour boundary so changes happen cleanly on the hour<br /> const now = getShiftedNow();<br /> const anchorRealHour = new Date(Date.UTC(<br /> now.getUTCFullYear(),<br /> now.getUTCMonth(),<br /> now.getUTCDate(),<br /> now.getUTCHours(), 0, 0, 0<br /> ));<br /> <br /> // Build UI pill<br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-game-time';<br /> wrap.className = 'sticky-game-time';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-game-time__value';<br /> <br /> wrap.appendChild(value);<br /> icons.prepend(wrap);<br /> <br /> function computeGameString() {<br /> const t = getShiftedNow();<br /> <br /> // Total whole hours passed since anchor<br /> const hoursPassed = Math.floor((t.getTime() - anchorRealHour.getTime()) / 3600000);<br /> <br /> // Day number advances each hour starting from ANCHOR_DAY<br /> const dayIndexFromAnchor = (ANCHOR_DAY - 1) + hoursPassed; // 0-based<br /> const dayNumber = (dayIndexFromAnchor % 24) + 1;<br /> <br /> // Every 24 hours, advance the &quot;month/day-of-week&quot; cycle<br /> const daysPassed = Math.floor(dayIndexFromAnchor / 24); // 0..∞<br /> <br /> // Total &quot;day-of-week&quot; index (0..6) across years<br /> const totalDayOfWeekIndex =<br /> (ANCHOR_YEAR - 1) * 7 + ANCHOR_MONTH_INDEX + daysPassed;<br /> <br /> const year = Math.floor(totalDayOfWeekIndex / 7) + 1;<br /> const month = months[((totalDayOfWeekIndex % 7) + 7) % 7];<br /> <br /> return `${month} ${dayNumber} YR${year}`;<br /> }<br /> <br /> function update() {<br /> value.textContent = computeGameString();<br /> }<br /> <br /> // Update now<br /> update();<br /> <br /> // Update exactly on the next hour boundary, then every hour<br /> const now2 = getShiftedNow();<br /> const msUntilNextHour =<br /> 3600000 - (now2.getUTCMinutes() * 60000 + now2.getUTCSeconds() * 1000 + now2.getUTCMilliseconds());<br /> <br /> setTimeout(function () {<br /> update();<br /> setInterval(update, 3600000);<br /> }, msUntilNextHour);<br /> });<br /> <br /> <br /> // ===============================<br /> // Sticky Header Clock (timezone-stable)<br /> // Shows the same time for everyone by forcing a timezone (UTC by default)<br /> // ===============================<br /> mw.hook('wikipage.content').add(function () {<br /> const icons = document.querySelector('.vector-sticky-header-icons');<br /> if (!icons) return;<br /> <br /> if (document.getElementById('sticky-clock')) return;<br /> <br /> // Choose the clock timezone:<br /> // - &quot;Etc/UTC&quot; for UTC (same for all users)<br /> // - Or &quot;America/New_York&quot; (same for all users, displayed in NY time)<br /> const CLOCK_TIMEZONE = 'Etc/UTC'; // &lt;-- change if you want a specific zone<br /> <br /> const wrap = document.createElement('span');<br /> wrap.id = 'sticky-clock';<br /> wrap.className = 'sticky-clock';<br /> <br /> const label = document.createElement('span');<br /> label.className = 'sticky-clock__label';<br /> label.textContent = (CLOCK_TIMEZONE === 'Etc/UTC') ? 'UTC:' : 'Time:';<br /> <br /> const value = document.createElement('span');<br /> value.className = 'sticky-clock__value';<br /> <br /> wrap.appendChild(label);<br /> wrap.appendChild(value);<br /> <br /> // Put it near the front (use appendChild to put it at the end)<br /> icons.prepend(wrap);<br /> <br /> const fmt = new Intl.DateTimeFormat('en-GB', {<br /> timeZone: CLOCK_TIMEZONE,<br /> hour: '2-digit',<br /> minute: '2-digit',<br /> second: '2-digit',<br /> hour12: false<br /> });<br /> <br /> function updateClock() {<br /> value.textContent = fmt.format(new Date());<br /> }<br /> <br /> updateClock();<br /> setInterval(updateClock, 1000);<br /> });</div>

YBthr https://utopiawiki.com/index.php?title=MediaWiki:Common.css&diff=844 2026-02-17T01:50:11Z

<p>YBthr: </p> <hr /> <div>/* Utopia Wiki Header Animations */<br /> <br /> /* Container for the entire header section */<br /> .utopia-header-container {<br /> position: relative;<br /> overflow: hidden;<br /> background: linear-gradient(135deg, rgba(15, 15, 35, 0.95) 0%, rgba(30, 30, 60, 0.95) 100%);<br /> border-radius: 12px;<br /> box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);<br /> }<br /> <br /> /* Animated background particles */<br /> .utopia-header-container::before {<br /> content: '';<br /> position: absolute;<br /> top: -50%;<br /> left: -50%;<br /> width: 200%;<br /> height: 200%;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.03) 1px, transparent 1px);<br /> background-size: 50px 50px;<br /> animation: particleFloat 60s linear infinite;<br /> pointer-events: none;<br /> }<br /> <br /> /* Logo image animation */<br /> .utopia-logo {<br /> animation: logoFloat 6s ease-in-out infinite;<br /> filter: drop-shadow(0 4px 12px rgba(255, 195, 0, 0.3));<br /> transition: transform 0.3s ease, filter 0.3s ease;<br /> }<br /> <br /> .utopia-logo:hover {<br /> transform: scale(1.05) !important;<br /> filter: drop-shadow(0 8px 20px rgba(255, 195, 0, 0.5));<br /> }<br /> <br /> /* Subtitle with fade-in and glow */<br /> .utopia-subtitle {<br /> animation: fadeInUp 1s ease-out 0.3s backwards;<br /> text-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);<br /> }<br /> <br /> /* Main welcome text */<br /> .utopia-welcome {<br /> animation: fadeInUp 1.2s ease-out 0.6s backwards;<br /> line-height: 1.9;<br /> }<br /> <br /> .utopia-welcome strong {<br /> color: #FFC300;<br /> text-shadow: 0 0 10px rgba(255, 195, 0, 0.4);<br /> animation: subtleGlow 3s ease-in-out infinite;<br /> }<br /> <br /> /* Age links container */<br /> .utopia-ages {<br /> animation: fadeInUp 1.4s ease-out 0.9s backwards;<br /> position: relative;<br /> }<br /> <br /> /* Individual age link styling */<br /> .age-link {<br /> display: inline-block;<br /> padding: 0.8em 1.5em;<br /> margin: 0.5em;<br /> background: linear-gradient(135deg, rgba(255, 195, 0, 0.1) 0%, rgba(255, 195, 0, 0.05) 100%);<br /> border: 2px solid rgba(255, 195, 0, 0.3);<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> position: relative;<br /> overflow: hidden;<br /> }<br /> <br /> .age-link::before {<br /> content: '';<br /> position: absolute;<br /> top: 50%;<br /> left: 50%;<br /> width: 0;<br /> height: 0;<br /> background: radial-gradient(circle, rgba(255, 195, 0, 0.3) 0%, transparent 70%);<br /> transform: translate(-50%, -50%);<br /> transition: width 0.6s ease, height 0.6s ease;<br /> border-radius: 50%;<br /> }<br /> <br /> .age-link:hover::before {<br /> width: 300px;<br /> height: 300px;<br /> }<br /> <br /> .age-link:hover {<br /> transform: translateY(-4px);<br /> border-color: rgba(255, 195, 0, 0.6);<br /> background: linear-gradient(135deg, rgba(255, 195, 0, 0.2) 0%, rgba(255, 195, 0, 0.1) 100%);<br /> box-shadow: 0 8px 24px rgba(255, 195, 0, 0.3);<br /> }<br /> <br /> .age-link span {<br /> position: relative;<br /> z-index: 1;<br /> transition: all 0.3s ease;<br /> }<br /> <br /> .age-link:hover span {<br /> text-shadow: 0 0 12px rgba(255, 195, 0, 0.8);<br /> }<br /> <br /> /* Current age - special styling */<br /> .age-current {<br /> animation: pulseGlow 2s ease-in-out infinite;<br /> }<br /> <br /> /* Decorative divider lines */<br /> .utopia-divider {<br /> height: 2px;<br /> background: linear-gradient(90deg, <br /> transparent 0%, <br /> rgba(255, 195, 0, 0.3) 20%, <br /> rgba(255, 195, 0, 0.6) 50%, <br /> rgba(255, 195, 0, 0.3) 80%, <br /> transparent 100%);<br /> margin: 2em 0;<br /> animation: shimmer 3s ease-in-out infinite;<br /> }<br /> <br /> /* Keyframe Animations */<br /> <br /> @keyframes particleFloat {<br /> 0% {<br /> transform: translate(0, 0) rotate(0deg);<br /> }<br /> 100% {<br /> transform: translate(50px, 50px) rotate(360deg);<br /> }<br /> }<br /> <br /> @keyframes logoFloat {<br /> 0%, 100% {<br /> transform: translateY(0px);<br /> }<br /> 50% {<br /> transform: translateY(-15px);<br /> }<br /> }<br /> <br /> @keyframes fadeInUp {<br /> from {<br /> opacity: 0;<br /> transform: translateY(30px);<br /> }<br /> to {<br /> opacity: 1;<br /> transform: translateY(0);<br /> }<br /> }<br /> <br /> @keyframes subtleGlow {<br /> 0%, 100% {<br /> text-shadow: 0 0 10px rgba(255, 195, 0, 0.4);<br /> }<br /> 50% {<br /> text-shadow: 0 0 20px rgba(255, 195, 0, 0.6), 0 0 30px rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> @keyframes pulseGlow {<br /> 0%, 100% {<br /> box-shadow: 0 0 15px rgba(255, 195, 0, 0.3);<br /> }<br /> 50% {<br /> box-shadow: 0 0 25px rgba(255, 195, 0, 0.6), 0 0 35px rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> @keyframes shimmer {<br /> 0%, 100% {<br /> opacity: 0.5;<br /> }<br /> 50% {<br /> opacity: 1;<br /> }<br /> }<br /> <br /> /* Responsive adjustments */<br /> @media (max-width: 768px) {<br /> .utopia-logo {<br /> max-width: 200px !important;<br /> }<br /> <br /> .age-link {<br /> display: block;<br /> margin: 0.5em auto;<br /> max-width: 80%;<br /> }<br /> }<br /> <br /> /* Accessibility - respect reduced motion preferences */<br /> @media (prefers-reduced-motion: reduce) {<br /> .utopia-header-container::before,<br /> .utopia-logo,<br /> .age-current {<br /> animation: none;<br /> }<br /> <br /> .age-link {<br /> transition: none;<br /> }<br /> }<br /> <br /> <br /> <br /> /* =========================================================<br /> GLOBAL THEME – MediaWiki 1.45 / Vector 2022<br /> ========================================================= */<br /> <br /> /* ---------- Background ---------- */<br /> html,<br /> body,<br /> .vector-feature-page-tools-disabled .mw-page-container,<br /> .vector-feature-page-tools-enabled .mw-page-container {<br /> background: linear-gradient(0deg, #001D3D 0%, #000814 40%) !important;<br /> background-attachment: fixed !important;<br /> }<br /> <br /> /* Transparent content containers */<br /> .mw-page-container,<br /> .mw-body,<br /> .vector-body {<br /> background: transparent !important;<br /> }<br /> <br /> /* ---------- Base text ---------- */<br /> body,<br /> .mw-body,<br /> .mw-body-content,<br /> #mw-content-text,<br /> .vector-body {<br /> color: #fff !important;<br /> }<br /> <br /> /* ---------- Headings ---------- */<br /> h1, h2, h3, h4, h5, h6,<br /> .mw-headline,<br /> #firstHeading,<br /> .mw-page-title-main,<br /> .page-Main_Page h1 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ---------- Logo ---------- */<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 100px !important;<br /> width: auto !important;<br /> max-height: 100px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 100px !important; }<br /> <br /> @media (max-width: 720px) {<br /> .mw-logo-icon,<br /> .mw-logo-icon img,<br /> .mw-logo img,<br /> .mw-logo a.mw-logo-container img {<br /> height: 32px !important;<br /> max-height: 32px !important;<br /> }<br /> .mw-logo-icon { background-size: auto 32px !important; }<br /> }<br /> <br /> /* ---------- Header ---------- */<br /> .vector-header-container,<br /> .vector-header,<br /> #mw-header-container,<br /> .mw-header {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Site name */<br /> .mw-logo-wordmark,<br /> .mw-logo-wordmark a {<br /> color: #FFC300 !important;<br /> font-size: 1.8em !important;<br /> font-weight: bold !important;<br /> text-decoration: none !important;<br /> }<br /> .mw-logo-wordmark a:hover { color: #FFD60A !important; }<br /> <br /> /* Sidebar headings */<br /> .vector-pinnable-header-label,<br /> .vector-main-menu-heading,<br /> .mw-portlet h3 {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> PAGE CONTENT LINKS<br /> ========================================================= */<br /> .mw-parser-output a { color: #4DA3FF !important; }<br /> .mw-parser-output a:visited { color: #9B7CFF !important; }<br /> .mw-parser-output a:hover { color: #6BB6FF !important; text-decoration: underline; }<br /> .mw-parser-output a:active { color: #1F4FA3 !important; }<br /> .mw-parser-output a.new,<br /> .mw-parser-output a.new:visited { color: #CC2200 !important; }<br /> <br /> /* Optional: keep only if something is overriding text colors inside articles */<br /> /* .mw-parser-output { color: #fff !important; } */<br /> <br /> /* =========================================================<br /> GLOBAL TABLE THEME (ALL PAGES)<br /> ========================================================= */<br /> .mw-parser-output .wikitable {<br /> width: 100%;<br /> border-collapse: collapse !important;<br /> margin: 0.75em 0;<br /> background: #303030 !important;<br /> border: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable caption {<br /> background: #001D3D !important;<br /> color: #fff !important;<br /> font-weight: bold;<br /> padding: 0.5em 0.7em !important;<br /> border-bottom: 1px solid #555555 !important;<br /> }<br /> <br /> .mw-parser-output .wikitable thead th {<br /> background: #000 !important;<br /> color: #EAEAEA !important;<br /> font-weight: 700;<br /> border: 1px solid #666666 !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> .mw-parser-output .wikitable tbody tr:nth-child(odd) { background-color: #303030 !important; }<br /> .mw-parser-output .wikitable tbody tr:nth-child(even) { background-color: #505050 !important; }<br /> <br /> .mw-parser-output .wikitable tbody td {<br /> border: 1px solid #555555 !important;<br /> color: #EAEAEA !important;<br /> padding: 0.5em 0.7em !important;<br /> }<br /> <br /> /* =========================================================<br /> TABLE OF CONTENTS – Vector 2022<br /> ========================================================= */<br /> #vector-toc,<br /> #toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> border-radius: 6px;<br /> padding: 0.75em;<br /> }<br /> <br /> #vector-toc .vector-pinnable-header-label,<br /> #toc .toctitle {<br /> color: #FFC300 !important;<br /> font-weight: bold;<br /> }<br /> <br /> #vector-toc .vector-toc-text,<br /> #toc a {<br /> color: #EAEAEA !important;<br /> opacity: 1 !important;<br /> text-decoration: none;<br /> }<br /> <br /> /* Active item */<br /> #vector-toc .vector-toc-list-item-active { background: transparent !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link { background-color: #FFD60A !important; }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> <br /> /* Expanded parent rules */<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded &gt; a.vector-toc-link .vector-toc-text {<br /> color: #FFC300 !important;<br /> font-weight: 600 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded.vector-toc-list-item-active &gt; a.vector-toc-link .vector-toc-text {<br /> color: #000814 !important;<br /> font-weight: 700 !important;<br /> }<br /> #vector-toc .vector-toc-level-1.vector-toc-list-item-expanded ul .vector-toc-text {<br /> color: #EAEAEA !important;<br /> font-weight: normal !important;<br /> }<br /> <br /> /* Hover */<br /> #vector-toc .vector-toc-list-item:not(.vector-toc-list-item-active) &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #FFD60A !important;<br /> }<br /> #vector-toc .vector-toc-list-item-active &gt; a.vector-toc-link:hover .vector-toc-text {<br /> color: #000814 !important;<br /> }<br /> <br /> /* Remove wrappers */<br /> .vector-toc-container,<br /> #vector-toc-pinned-container,<br /> .vector-pinned-container {<br /> background: transparent !important;<br /> border: none !important;<br /> box-shadow: none !important;<br /> }<br /> <br /> /* Inline (article) TOC only */<br /> .mw-parser-output &gt; .toc {<br /> background: #001D3D !important;<br /> border: 1px solid #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> Draft Cost Formula<br /> ========================================================= */<br /> .formula-box {<br /> background: #001D3D;<br /> border: 1px solid #FFC300;<br /> border-radius: 10px;<br /> padding: 0.8em 1em;<br /> margin: 0.75em 0;<br /> color: #EAEAEA;<br /> line-height: 1.6;<br /> white-space: normal;<br /> overflow-wrap: anywhere;<br /> }<br /> .formula-box a { color: #4DA3FF !important; }<br /> .formula-box a:visited { color: #9B7CFF !important; }<br /> <br /> /* =========================<br /> Vector 2022 – RIGHT PAGE TOOLS: remove the fade/gradient<br /> ========================= */<br /> .vector-page-tools::before,<br /> .vector-page-tools::after,<br /> .vector-page-tools-container::before,<br /> .vector-page-tools-container::after,<br /> .vector-page-tools-landmark::before,<br /> .vector-page-tools-landmark::after,<br /> .vector-sticky-pinned-container::before,<br /> .vector-sticky-pinned-container::after,<br /> .vector-page-tools .vector-sticky-pinned-container::before,<br /> .vector-page-tools .vector-sticky-pinned-container::after {<br /> background: none !important;<br /> background-image: none !important;<br /> box-shadow: none !important;<br /> filter: none !important;<br /> backdrop-filter: none !important;<br /> mask-image: none !important;<br /> -webkit-mask-image: none !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Link Colors */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> <br /> /* Change Footer Text and Icons */<br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> <br /> /* Change Navigation Icon/Link Colors */<br /> #mw-panel .portal a, <br /> #mw-panel .portal a:visited {<br /> color: #FFC300 !important; /* Change to your desired color */<br /> }<br /> <br /> /* ===== NAVIGATION ICONS - VECTOR 2022 ===== */<br /> /* User menu icon (person icon) */<br /> .vector-user-links .vector-icon,<br /> .vector-user-menu-login .vector-icon,<br /> .vector-user-menu-create-account .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Settings/hamburger menu icon */<br /> .vector-main-menu-action-toggle .vector-icon,<br /> .vector-page-tools-landmark .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* All navigation icons */<br /> .vector-icon,<br /> .mw-ui-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* User menu links (username) */<br /> .vector-user-links a,<br /> .vector-user-menu-logged-in .vector-user-links-main a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* ===== FOOTER LINKS - VECTOR 2022 ===== */<br /> /* All footer links */<br /> #footer a,<br /> #footer a:link,<br /> #footer a:visited,<br /> .mw-footer a,<br /> .mw-footer a:link,<br /> .mw-footer a:visited,<br /> footer a,<br /> footer a:link,<br /> footer a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Footer text color */<br /> #footer,<br /> #footer li,<br /> .mw-footer,<br /> .mw-footer li,<br /> footer,<br /> footer li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Older footer selectors (keeping for compatibility) */<br /> div#footer ul li a, <br /> div#footer ul li a:visited {<br /> color: #FFC300 !important;<br /> }<br /> <br /> div#footer ul li {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* =========================================================<br /> VECTOR 2022 – PAGE ACTIONS / TABS COLOR CONTROL<br /> Applies to: Main Page | Discussion | Read | Edit | History | Tools<br /> ========================================================= */<br /> <br /> /* Default page action links (not active) */<br /> .vector-page-toolbar a,<br /> .vector-page-toolbar a:link,<br /> .vector-page-toolbar a:visited,<br /> .vector-page-toolbar .mw-ui-icon a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Hover state (optional subtle brighten) */<br /> .vector-page-toolbar a:hover {<br /> color: #FFD60A !important;<br /> }<br /> <br /> /* ACTIVE / CURRENT TAB (e.g. Main Page, Edit when editing) */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive,<br /> .vector-page-toolbar .mw-ui-button.mw-ui-progressive:visited {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Ensure active tab background doesn't force dark text */<br /> .vector-page-toolbar .selected a,<br /> .vector-page-toolbar .selected span {<br /> color: #FFFFFF !important;<br /> }<br /> <br /> /* Missing page links stay red */<br /> .vector-page-toolbar a.new,<br /> .vector-page-toolbar a.new:visited {<br /> color: #CC2200 !important;<br /> }<br /> <br /> <br /> /* ============ NAVPILLS ============ */<br /> /* Navpills styling */<br /> .navpills-container {<br /> margin: 1.5em 0;<br /> padding: 0;<br /> }<br /> <br /> .navpills {<br /> display: flex;<br /> flex-wrap: wrap;<br /> gap: 0.8em;<br /> list-style: none;<br /> margin: 0;<br /> padding: 0;<br /> }<br /> <br /> .navpill-item {<br /> display: inline-block;<br /> }<br /> <br /> .navpill-item a {<br /> text-decoration: none !important;<br /> }<br /> <br /> .navpill-item a span {<br /> display: inline-block;<br /> padding: 0.7em 1.3em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> color: #FFC300 !important;<br /> border: 2px solid #FFC300;<br /> border-radius: 6px;<br /> font-weight: bold;<br /> text-decoration: none;<br /> transition: all 0.3s ease;<br /> font-size: 1.05em;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> .navpill-item a:hover span {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> color: #000814 !important;<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-2px);<br /> }<br /> <br /> /* Mobile responsive */<br /> @media (max-width: 768px) {<br /> .navpills {<br /> flex-direction: column;<br /> }<br /> <br /> .navpill-item {<br /> width: 100%;<br /> }<br /> <br /> .navpill-item a span {<br /> display: block;<br /> text-align: center;<br /> }<br /> }<br /> <br /> /* ============ TABS ============ */<br /> /* CSS-Only Tabs */<br /> .wiki-tabs-container-css {<br /> margin: 2em 0;<br /> background: linear-gradient(180deg, #001D3D 0%, #000814 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> overflow: hidden;<br /> box-shadow: 0 4px 15px rgba(255, 195, 0, 0.2);<br /> }<br /> <br /> /* Hide radio buttons */<br /> .wiki-tab-radio {<br /> display: none;<br /> }<br /> <br /> /* Tab Labels (Buttons) */<br /> .wiki-tab-label {<br /> display: inline-block;<br /> padding: 1em 1.5em;<br /> background: #001D3D;<br /> color: #FFC300;<br /> border-right: 1px solid rgba(255, 195, 0, 0.3);<br /> font-size: 1.1em;<br /> font-weight: bold;<br /> cursor: pointer;<br /> transition: all 0.3s ease;<br /> text-align: center;<br /> font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;<br /> margin: 0;<br /> border-bottom: 2px solid #000814;<br /> }<br /> <br /> .wiki-tab-label:hover {<br /> background: #003566;<br /> color: #FFD60A;<br /> }<br /> <br /> /* Active tab style */<br /> .wiki-tab-radio:checked + .wiki-tab-label {<br /> background: #FFC300;<br /> color: #000814;<br /> border-bottom: 3px solid #FFD60A;<br /> }<br /> <br /> /* Tab Content */<br /> .wiki-tab-content {<br /> display: none;<br /> padding: 2em;<br /> color: #FFFFFF;<br /> }<br /> <br /> /* Show content when tab is checked */<br /> .wiki-tab-radio:checked ~ .wiki-tab-content {<br /> display: block;<br /> }<br /> <br /> /* Mobile Responsive */<br /> @media (max-width: 768px) {<br /> .wiki-tab-label {<br /> display: block;<br /> width: 100%;<br /> border-right: none;<br /> border-bottom: 1px solid rgba(255, 195, 0, 0.3);<br /> }<br /> }<br /> <br /> /* =========================================================<br /> STICKY HEADER FIX - Keep blue background when scrolling<br /> ========================================================= */<br /> <br /> /* Sticky header container */<br /> .vector-sticky-header,<br /> .vector-sticky-header-container {<br /> background: #000814 !important;<br /> border-bottom: 2px solid #FFC300 !important;<br /> }<br /> <br /> /* Sticky header elements */<br /> .vector-sticky-header-start,<br /> .vector-sticky-header-end,<br /> .vector-sticky-header-context-bar {<br /> background: #000814 !important;<br /> }<br /> <br /> /* Page title in sticky header */<br /> .vector-sticky-header-context-bar-primary,<br /> .vector-sticky-header .mw-page-title-main {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Sticky header buttons and icons */<br /> .vector-sticky-header button,<br /> .vector-sticky-header .vector-icon {<br /> filter: brightness(0) saturate(100%) invert(85%) sepia(67%) saturate(1000%) hue-rotate(0deg) brightness(103%) contrast(101%) !important;<br /> }<br /> <br /> /* Sticky header links */<br /> .vector-sticky-header a {<br /> color: #FFC300 !important;<br /> }<br /> <br /> /* Race table text override */<br /> .racebox td {<br /> color: black !important;<br /> }<br /> <br /> .racebox th {<br /> color: white !important; /* keeps your header colors */<br /> }<br /> <br /> /* Equal-width navpills grid */<br /> .navpills-equal-grid .navpills {<br /> display: grid !important;<br /> grid-template-columns: repeat(3, 1fr) !important;<br /> gap: 1em !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item {<br /> width: 100% !important;<br /> display: block !important;<br /> }<br /> <br /> .navpills-equal-grid .navpill-item a span {<br /> display: block !important;<br /> width: 100% !important;<br /> text-align: center !important;<br /> padding: 0.5em !important;<br /> box-sizing: border-box !important;<br /> }<br /> <br /> @media (max-width: 768px) {<br /> .navpills-equal-grid .navpills {<br /> grid-template-columns: 1fr !important;<br /> }<br /> }<br /> <br /> /* Race card buttons with hover animation */<br /> .race-card {<br /> display: block;<br /> text-align: center;<br /> padding: 1.5em 1em;<br /> background: linear-gradient(135deg, #003566 0%, #001D3D 100%);<br /> border: 2px solid #FFC300;<br /> border-radius: 8px;<br /> transition: all 0.3s ease;<br /> box-shadow: 0 2px 8px rgba(255, 195, 0, 0.2);<br /> text-decoration: none;<br /> }<br /> <br /> .race-card:hover {<br /> background: linear-gradient(135deg, #FFC300 0%, #FFD60A 100%);<br /> border-color: #FFD60A;<br /> box-shadow: 0 4px 12px rgba(255, 195, 0, 0.4);<br /> transform: translateY(-4px);<br /> }<br /> <br /> .race-card img {<br /> display: block;<br /> margin: 0 auto;<br /> transition: transform 0.3s ease;<br /> }<br /> <br /> .race-card:hover img {<br /> transform: scale(1.05);<br /> }<br /> <br /> .race-card-name {<br /> margin-top: 0.8em;<br /> font-size: 1.2em;<br /> font-weight: bold;<br /> color: #FFC300;<br /> transition: color 0.3s ease;<br /> }<br /> <br /> .race-card:hover .race-card-name {<br /> color: #000814;<br /> }</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=843 2026-02-17T01:49:41Z

<p>YBthr: </p> <hr /> <div>&lt;div class=&quot;utopia-header-section&quot;&gt;<br /> [[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div class=&quot;utopia-subtitle&quot; style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div class=&quot;utopia-welcome&quot; style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;<br /> <br /> &lt;div class=&quot;utopia-divider&quot;&gt;&lt;/div&gt;<br /> <br /> &lt;div class=&quot;utopia-ages&quot;&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span class=&quot;age-link age-current&quot; style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes'''&lt;/span&gt;]]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span class=&quot;age-link&quot; style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes'''&lt;/span&gt;]]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> [https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> <br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=842 2026-02-17T01:16:01Z

<p>YBthr: </p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> [https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> <br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 1em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=841 2026-02-17T00:57:47Z

<p>YBthr: Undo revision 840 by YBthr (talk)</p> <hr /> <div>&lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;<br /> [[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]<br /> &lt;/div&gt;</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=840 2026-02-17T00:57:20Z

<p>YBthr: </p> <hr /> <div>&lt;div class=&quot;navpill-item; plainlinks&quot; style=&quot;display: inline-block;&quot;&gt;<br /> [[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]<br /> &lt;/div&gt;</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=839 2026-02-17T00:56:53Z

<p>YBthr: Undo revision 838 by YBthr (talk)</p> <hr /> <div>&lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;<br /> [[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]<br /> &lt;/div&gt;</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=838 2026-02-17T00:54:49Z

<p>YBthr: </p> <hr /> <div>&lt;includeonly&gt;{{#ifeq: {{#sub:{{{link}}}|0|4}} | http |<br /> &lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]&lt;/span&gt;&lt;/div&gt;<br /> |<br /> &lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;[[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]&lt;/div&gt;<br /> }}&lt;/includeonly&gt;</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=837 2026-02-17T00:48:18Z

<p>YBthr: </p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> [https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;&lt;span class=&quot;plainlinks&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=Main_Page&diff=836 2026-02-17T00:40:25Z

<p>YBthr: </p> <hr /> <div>[[File:Utopiawiki.png|margin: 0 auto|left|300px|link=]]<br /> &lt;div style=&quot;text-align: left; padding: 3em 2em;&quot;&gt;<br /> &lt;div style=&quot;font-size: 1.5em; color: #FFFFFF; font-style: italic; margin: 0 auto;&quot;&gt;The Comprehensive Guide to One of the Oldest MMO Strategy Games&lt;/div&gt;<br /> &lt;div style=&quot;font-size: 1.5em; line-height: 1.9; color: #FFFFFF; margin: 0 auto;&quot;&gt;<br /> Welcome to '''Utopia''' — a world of war, intrigue, strategy and diplomacy. Lead your province through the ages, master the arts of magic and warfare, and claim your place among legends.<br /> &lt;/div&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;<br /> &lt;br&gt;&lt;br&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 114|&lt;span style=&quot;color: #FFC300&quot;&gt;'''World of Legends Age 114 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;&lt;/big&gt;<br /> &lt;big&gt;&lt;big&gt;&lt;center&gt;[[Age 113|&lt;span style=&quot;color: #FFC300&quot;&gt;''Archived:'' '''World of Legends Age 113 Final Changes''']]&lt;/center&gt;&lt;/big&gt;&lt;/big&gt;&lt;/div&gt;<br /> <br /> &lt;!-- TWO COLUMN LAYOUT: RACES &amp; COMMUNITY --&gt;<br /> {| style=&quot;width:100%; border-collapse:separate; border-spacing:15px; margin:20px 0;&quot;<br /> |-<br /> | style=&quot;width:65%; vertical-align:top;&quot; |<br /> &lt;!-- LEFT COLUMN: RACES GALLERY --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Races<br /> |-<br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Avian.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Avian&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:DarkElf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dark Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;width:33.3%; text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Dwarf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Dwarf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Elf.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Elf&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Faery.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Faery&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Halfling.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Halfling&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Human.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Human&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Orc.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Orc&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> | style=&quot;text-align:center; padding:1.5em 1em; vertical-align:top;&quot; |<br /> [[File:Undead.jpg|140px|link=Age 114#Races]]<br /> &lt;div style=&quot;margin-top:0.8em; font-size:1.2em; font-weight:bold;&quot;&gt;[[Age 114#Races|&lt;span style=&quot;color:#FFC300;&quot;&gt;Undead&lt;/span&gt;]]&lt;/div&gt;<br /> <br /> |}<br /> <br /> | style=&quot;width:35%; vertical-align:top;&quot; |<br /> &lt;!-- RIGHT COLUMN: DISCORD BUTTON &amp; DRAGONS --&gt;<br /> {| style=&quot;width:100%;&quot;<br /> |-<br /> | style=&quot;padding:0 0 15px 0;&quot; |<br /> &lt;!-- DISCORD BUTTON --&gt;<br /> &lt;div style=&quot;background:linear-gradient(135deg, #003566 0%, #001D3D 100%); border:2px solid #FFC300; border-radius:8px; padding:2em; text-align:center; box-shadow:0 4px 15px rgba(255,195,0,0.2); transition:all 0.3s;&quot;&gt;<br /> [https://utopia-game.com/discord &lt;span style=&quot;display:block; font-size:1.2em; color:#FFD60A; font-size: 1.6em;&quot;&gt;'''Connect on Discord'''&lt;/span&gt;]<br /> &lt;div style=&quot;margin-top:1em; padding:1em; background:rgba(255,195,0,0.1); border-radius:4px;&quot;&gt;<br /> &lt;span style=&quot;color:#FFFFFF;&quot;&gt;Chat with players, get help, and stay updated!&lt;/span&gt;<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |-<br /> | style=&quot;padding:0;&quot; |<br /> &lt;!-- DRAGONS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Dragons.png|link=Dragons|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Dragons|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Dragons&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> |-<br /> | style=&quot;padding:15px 0 0 0;&quot; |<br /> &lt;!-- RITUALS IMAGE WITH HOVER --&gt;<br /> &lt;div style=&quot;position:relative; overflow:hidden; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;&gt;<br /> [[File:Age114 Rituals.png|link=Ritual|400px|center]]<br /> &lt;div style=&quot;position:absolute; bottom:0; left:0; right:0; background:linear-gradient(to top, rgba(0,8,20,0.95) 0%, transparent 100%); padding:1.5em 1em 1em; text-align:center;&quot;&gt;<br /> [[Ritual|&lt;span style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300;&quot;&gt;Rituals&lt;/span&gt;]]<br /> &lt;/div&gt;<br /> &lt;/div&gt;<br /> <br /> |}<br /> <br /> |}<br /> <br /> &lt;!-- BEGINNER GUIDES --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;Beginner's Guides&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=Guide to Utopia|link=A_Players_Guide_to_Utopia}}<br /> {{Navpill|label=Choosing Race and Personalities|link=Guide:Combo Selection}}<br /> {{Navpill|label=Recommended Defense|link=Recommended Defense}}<br /> {{Navpill|label=Quick Tips|link=Quick Tips}}<br /> {{Navpill|label=Commonly Used Acronyms|link=Commonly Used Acronyms}}<br /> {{Navpill|label=Time in Utopia|link=Time in Utopia}}<br /> <br /> }}<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GETTING STARTED --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;New and Returning Players&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;display: flex; flex-wrap: wrap; gap: 0.5em; list-style: none; margin: 0; padding: 0; justify-content: center;&quot;&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Getting Started with Utopia|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Getting Started with Utopia&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Age 114|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Current Age Changes&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Gold Status|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Gold Status&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[[Game Rules|&lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Game Rules&lt;/span&gt;]]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[http://dragonportal.125mb.com/guides/ &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Guides of Ages Past&lt;/span&gt;]&lt;/div&gt;<br /> &lt;div style=&quot;flex: 1 1 200px; max-width: 250px; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); border: 2px solid #FFC300; border-radius: 8px; padding: 0.8em; text-align: center; box-shadow: 0 2px 8px rgba(255,195,0,0.2);&quot;&gt;[http://dragonportal.125mb.com/History.html &lt;span style=&quot;font-size: 1em; font-weight: bold; color: #FFC300; display: block;&quot;&gt;Utopia History&lt;/span&gt;]&lt;/div&gt;<br /> &lt;/div&gt;<br /> |}<br /> <br /> &lt;!-- GUIDES BY IN-GAME MENUS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;5&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Guides by In-game Menus<br /> |-<br /> | style=&quot;width:20%; text-align:left; padding:1.5em 2em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Province Information&lt;/div&gt;<br /> * [[Throne]] ([[Economy]], [[Food]], [[Honor]], [[Networth]])<br /> * [[Kingdom]]<br /> * [[The Paper|The Paper]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Internal Management&lt;/div&gt;<br /> * [[Explore]]<br /> * [[Growth]]<br /> * [[Science]]<br /> * [[Military]]<br /> * [[Wizards]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;External Actions&lt;/div&gt;<br /> * [[Mystics]] ([[Magic Formulas]])<br /> * [[Thievery]] ([[Thievery Formulas]])<br /> * [[War Room]] <br /> ** ([[Attacking &amp; Defending]], [[Hostile Meter]], [[Relations]], [[Overpopulation]], [[Multi-Attack Protection (MAP)|MAP/GBP]])<br /> * [[Target Finder|Targets]]<br /> * [[Aid]]<br /> * [[Dragons]]<br /> * [[Ritual|Rituals]]<br /> * [[Stances]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Communication &amp; Intel Collection&lt;/div&gt;<br /> * [[Mail &amp; Forums#Messaging|Mail]]<br /> * [[Mail &amp; Forums#forum|Forum]]<br /> * [[MunkBot|Intel-Site]]<br /> <br /> | style=&quot;width:20%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.1em; color:#FFC300;&quot;&gt;Others&lt;/div&gt;<br /> * [[Politics]]<br /> * [[Rankings]]<br /> * [[Preferences]]<br /> * [[MunkBot]]<br /> * [[Invitations]]<br /> * [[Reservations]]<br /> * [[Scientists]]<br /> * [http://forums.utopia-game.com/forumdisplay.php?1782-In-Game-Custom-Themes Custom Themes]<br /> * [[Externals|Player Organization and Chat Clients]]<br /> |}<br /> <br /> &lt;!-- PLAYER WRITTEN GUIDES, TIPS &amp; TRICKS --&gt;<br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2); margin:20px 0;&quot;<br /> ! colspan=&quot;3&quot; style=&quot;background:#FFC300; font-size:1.4em; font-weight:bold; text-align:center; color:#000814; padding:0.8em; border-radius:6px 6px 0 0;&quot; |<br /> Player Written Guides, Tips &amp; Tricks &amp;nbsp; &lt;span style=&quot;font-size:85%;&quot;&gt;[[FAQ|FAQ '''NEW''']]&lt;/span&gt;<br /> |-<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 3em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Player Guides&lt;/div&gt;<br /> * [[Attacking &amp; Calculating an Attack]]<br /> * [[Ambush|How To - Ambush Guide]]<br /> * [[Chaining]]<br /> * [[Should my KD Predetermine a Setup?]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Leadership Guides&lt;/div&gt;<br /> * '''New:''' [[Warleader_Guide_to_Attrition|Warleader Guide to Attrition (2022)]]<br /> * [[Ethics_of_Waving_and_War|Ethics of Waving and War (2020)]]<br /> * [[Land Whoring Tips &amp; Tricks]]<br /> * [[Leadership_Logic|Leadership Logic (2020)]]<br /> | style=&quot;width:33.33%; text-align:left; padding:1.5em 1.5em 1.5em 1em; vertical-align:top;&quot; |<br /> &lt;div style=&quot;font-weight:bold; margin-bottom:0.8em; font-size:1.2em; color:#FFC300;&quot;&gt;Miscellaneous Guides&lt;/div&gt;<br /> * [[Time in Utopia]]<br /> * [[Dual Monarch|Dual Monarchy]]<br /> * [[Finding Good Plunder Targets|Finding Good Plunder Targets '''NEW''']]<br /> * [[Time to Move On|Time to Move On '''NEW''']]<br /> |}<br /> <br /> {| style=&quot;width:100%; background:linear-gradient(180deg, #001D3D 0%, #000814 100%); margin-top:1em; border:2px solid #FFC300; border-radius:8px; box-shadow:0 4px 15px rgba(255,195,0,0.2);&quot;<br /> |-<br /> | style=&quot;width:30%; text-align:center; padding:0em; border-right:2px solid #003566; vertical-align:middle;&quot; |<br /> &lt;div style=&quot;font-size:1.4em; font-weight:bold; color:#FFC300; margin-bottom:0em;&quot;&gt;The Utopian Encyclopedia&lt;/div&gt;<br /> &lt;div style=&quot;font-size:2em; font-weight:bold; color:#FFD60A; margin:0em 0;&quot;&gt;[[Special:Statistics|{{NUMBEROFARTICLES}}]]&lt;/div&gt;<br /> &lt;div style=&quot;font-size:1.2em; color:#FFFFFF;&quot;&gt;articles and counting&lt;/div&gt;<br /> <br /> | style=&quot;width:70%; padding:1em; vertical-align:middle;&quot; |<br /> &lt;div class=&quot;navpills-equal-grid&quot;&gt;<br /> {{Navpills<br /> |content=<br /> {{Navpill|label=About|link=UtopiaWiki:About}}<br /> {{Navpill|label=Contribute|link=Help:Contribute}}<br /> {{Navpill|label=Contents|link=Special:Categories}}<br /> {{Navpill|label=FAQ|link=FAQ}}<br /> {{Navpill|label=Dictionary|link=Dictionary}}<br /> {{Navpill|label=Special Thanks|link=SpecialThanks}}<br /> }}<br /> &lt;/div&gt;<br /> |}</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=835 2026-02-17T00:38:26Z

<p>YBthr: Undo revision 834 by YBthr (talk)</p> <hr /> <div>&lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;<br /> [[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.6em 1.2em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]<br /> &lt;/div&gt;</div>

YBthr https://utopiawiki.com/index.php?title=Template:Navpill&diff=834 2026-02-17T00:37:52Z

<p>YBthr: </p> <hr /> <div>&lt;div class=&quot;navpill-item&quot; style=&quot;display: inline-block;&quot;&gt;<br /> [[{{{link}}}|&lt;span style=&quot;display: inline-block; padding: 0.5em 1em; background: linear-gradient(135deg, #003566 0%, #001D3D 100%); color: #FFC300; border: 2px solid #FFC300; border-radius: 6px; font-weight: bold; text-decoration: none; transition: all 0.3s; font-size: 1.05em;&quot;&gt;{{{label}}}&lt;/span&gt;]]<br /> &lt;/div&gt;</div>

YBthr