MediaWiki:Common.css: Difference between revisions

Revision as of 01:43, 7 September 2026

/* ===========================================================
   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,
#vector-main-menu-pinned-container{ display:none !important; }
.mw-body-content{ margin-right:0 !important; }