MediaWiki:Common.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ===========================================================
Tidur Ragnarok Online Wiki — "forum" reskin over Vector-2022
=========================================================== */
:root{
--tro-bg: #0b0f1a;
--tro-panel: #141a29;
--tro-panel-2: #1a2136;
--tro-border: #2a3350;
--tro-gold: #e0b14a;
--tro-gold-br: #ffd876;
--tro-ink: #e8e6f0;
--tro-ink-dim: #9aa3c0;
--tro-accent: #7fdfd0;
}
html, body{ background:var(--tro-bg) !important; color:var(--tro-ink) !important; }
body{ font-family:"Segoe UI",Roboto,Trebuchet MS,Verdana,sans-serif !important; }
/* Header bar */
.vector-header-container, .mw-header{ background:linear-gradient(180deg,#141a29,#0d1120) !important; border-bottom:2px solid var(--tro-gold) !important; }
.mw-logo-wordmark, .mw-logo-container a, .vector-header-container a{ color:var(--tro-gold-br) !important; }
.cdx-search-input{ border:1px solid var(--tro-border) !important; border-radius:20px !important; overflow:hidden; background:var(--tro-panel) !important; }
#p-search input, .cdx-text-input__input{ background:var(--tro-panel) !important; color:var(--tro-ink) !important; border:none !important; border-radius:0 !important; }
.cdx-search-input__end-button{ background:var(--tro-panel) !important; border:none !important; border-radius:0 !important; color:var(--tro-ink-dim) !important; }
.cdx-text-input{ background:var(--tro-panel) !important; border:none !important; }
/* Sidebar */
#mw-panel, .vector-pinnable-header, .mw-portlet{ background:transparent !important; }
.mw-portlet-label{ color:var(--tro-gold) !important; text-transform:uppercase; letter-spacing:0.05em; font-size:0.8em; }
.vector-menu-content a, #p-navigation a, #p-tb a{ color:var(--tro-ink-dim) !important; }
.vector-menu-content a:hover{ color:var(--tro-gold-br) !important; }
/* Main content card */
#content, .mw-body{
background:var(--tro-panel) !important;
border:1px solid var(--tro-border) !important;
border-radius:14px !important;
box-shadow:0 18px 50px rgba(0,0,0,0.55) !important;
color:var(--tro-ink) !important;
}
.mw-body-content{ color:var(--tro-ink) !important; }
/* Headings — big, bold, "forum thread title" feel */
.mw-body h1, .firstHeading{
color:var(--tro-gold-br) !important;
font-family:Georgia,serif !important;
border-bottom:2px solid var(--tro-gold) !important;
padding-bottom:12px !important;
letter-spacing:0.02em;
}
.mw-body h2{
color:var(--tro-gold-br) !important;
border-bottom:1px solid var(--tro-border) !important;
margin-top:1.8em !important;
font-family:Georgia,serif !important;
}
.mw-body h3{ color:var(--tro-accent) !important; }
a{ color:#8fc4ff; }
a:hover{ color:var(--tro-gold-br); }
a.new{ color:#ff8a8a !important; }
/* Tables -> clean "stat card" look instead of default wiki grid */
.mw-body table:not(.tro-card-grid){
background:var(--tro-panel-2) !important;
border:1px solid var(--tro-border) !important;
border-radius:8px !important;
overflow:hidden;
}
.mw-body table:not(.tro-card-grid) th{
background:rgba(224,177,74,0.12) !important;
color:var(--tro-gold-br) !important;
border-color:var(--tro-border) !important;
}
.mw-body table:not(.tro-card-grid) td{ border-color:var(--tro-border) !important; color:var(--tro-ink) !important; }
/* ---- Forum-style hub components (used via raw HTML in page wikitext) ---- */
.tro-hero{
background:linear-gradient(135deg, rgba(224,177,74,0.14), rgba(127,223,208,0.06));
border:1px solid var(--tro-border);
border-radius:14px;
padding:32px 28px;
text-align:center;
margin-bottom:26px;
}
.tro-hero h1{ border:none !important; margin:0 0 8px !important; font-size:2.1em; }
.tro-hero p{ color:var(--tro-ink-dim); margin:0; }
.tro-card-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin:18px 0; }
.tro-card{
display:block;
background:var(--tro-panel-2);
border:1px solid var(--tro-border);
border-radius:12px;
padding:18px;
text-decoration:none !important;
transition:transform .15s ease, border-color .15s ease;
}
.tro-card:hover{ transform:translateY(-3px); border-color:var(--tro-gold); }
.tro-card-icon{ font-size:1.8em; display:block; margin-bottom:8px; }
.tro-card-title{ color:var(--tro-gold-br) !important; font-weight:700; font-size:1.05em; display:block; margin-bottom:4px; }
.tro-card-desc{ color:var(--tro-ink-dim); font-size:0.86em; line-height:1.4; }
.tro-badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:0.72em; font-weight:700; text-transform:uppercase; letter-spacing:0.04em; margin:2px 4px 2px 0; }
.tro-badge-high{ background:rgba(255,122,26,0.18); color:#ff7a1a; border:1px solid rgba(255,122,26,0.4); }
.tro-badge-mid{ background:rgba(127,223,208,0.18); color:#7fdfd0; border:1px solid rgba(127,223,208,0.4); }
.tro-badge-low{ background:rgba(138,45,45,0.18); color:#c9504f; border:1px solid rgba(138,45,45,0.4); }
.tro-badge-all{ background:rgba(224,177,74,0.18); color:var(--tro-gold-br); border:1px solid rgba(224,177,74,0.4); }
.tro-infobox{
float:right;
width:260px;
margin:0 0 16px 20px;
background:var(--tro-panel-2);
border:1px solid var(--tro-border);
border-radius:12px;
padding:16px;
}
.tro-infobox dt{ color:var(--tro-ink-dim); font-size:0.75em; text-transform:uppercase; letter-spacing:0.04em; margin-top:10px; }
.tro-infobox dt:first-child{ margin-top:0; }
.tro-infobox dd{ margin:2px 0 0; color:var(--tro-ink); font-weight:600; }
@media (max-width: 720px){
.tro-infobox{ float:none; width:auto; margin:0 0 16px 0; }
}
/* Broader background overrides — Vector-2022 wraps content in several
containers that each carry their own white background by default. */
.mw-page-container, #mw-content-container, .vector-body, .mw-page-container-inner,
.vector-column-start, .vector-column-end, .vector-sticky-pinned-container,
.vector-pinnable-element, #vector-page-titlebar, .vector-page-titlebar,
.vector-toc, #vector-toc, .vector-toc-pinnable-header, .cdx-typeahead-search,
.cdx-menu, #p-lang-btn, .mw-indicators, .mw-footer-container, footer.mw-footer{
background:transparent !important;
color:var(--tro-ink) !important;
}
#vector-toc *, .vector-toc-list, .vector-toc-list-item{ color:var(--tro-ink-dim) !important; }
.mw-footer-container{ background:var(--tro-bg) !important; }
.mw-footer, #footer{ color:var(--tro-ink-dim) !important; }
.mw-footer a, #footer a{ color:#8fc4ff !important; }
body.skin-vector-2022{ background:var(--tro-bg) !important; }
.vector-pinnable-header-label, .vector-pinnable-header-toggle-button{ color:var(--tro-ink-dim) !important; }
/* Catch-all for remaining nested white boxes (TOC container, etc.) */
#vector-toc-pinnable-header, .vector-toc-pinnable-header-container,
.mw-table-of-contents-container, .vector-pinnable-header-container,
.vector-page-toolbar, .vector-page-toolbar-container{ background:var(--tro-panel) !important; }
#vector-toc-collapsed-button, .vector-dropdown-content{ background:var(--tro-panel) !important; color:var(--tro-ink) !important; }
/* Fix remaining white pinned sidebar boxes (Contents/TOC, Appearance, page tools) */
.vector-pinned-container{ background:var(--tro-panel) !important; border:1px solid var(--tro-border) !important; border-radius:10px !important; }
.vector-pinned-container *{ color:var(--tro-ink) !important; }
.vector-pinned-container a{ color:#8fc4ff !important; }
.cdx-radio__icon{ background:transparent !important; }
/* Remove footer entirely per site owner request (no "Powered by" branding, no footer at all) */
.mw-footer-container, footer.mw-footer, #footer{ display:none !important; }
/* Remove the right-hand "Appearance" (text size/width) and page-tools
sidebar boxes entirely - not useful on a documentation/forum site. */
#vector-page-tools-pinned-container,
#vector-appearance-pinned-container{ display:none !important; }
.mw-body-content{ margin-right:0 !important; }