MediaWiki:Common.css: Difference between revisions

Revision as of 01:47, 7 September 2026

/* ===========================================================
   Tidur Ragnarok Online Wiki — Premium forum-style redesign v2
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Inter:wght@400;500;600;700&display=swap');

:root{
	--tro-bg:        #0a0d16;
	--tro-bg-2:      #0d1120;
	--tro-panel:     #11162494;
	--tro-panel-solid: #131829;
	--tro-panel-2:   #1a2036;
	--tro-panel-3:   #1f2740;
	--tro-border:    #262f4a;
	--tro-border-lt: #384167;
	--tro-gold:      #e0b14a;
	--tro-gold-br:   #ffd876;
	--tro-gold-dim:  #a9843a;
	--tro-ink:       #eef0fb;
	--tro-ink-dim:   #9aa3c0;
	--tro-ink-faint: #6a7396;
	--tro-accent:    #7fdfd0;
	--tro-accent-2:  #b48cff;
	--radius-lg: 18px;
	--radius-md: 12px;
	--radius-sm: 8px;
	--shadow-soft: 0 20px 60px -20px rgba(0,0,0,0.6);
	--shadow-glow: 0 0 0 1px rgba(224,177,74,0.15), 0 20px 60px -20px rgba(0,0,0,0.7);
}

*{ box-sizing: border-box; }

html, body{
	background:
		radial-gradient(ellipse 90% 60% at 15% -10%, rgba(224,177,74,0.08) 0%, transparent 55%),
		radial-gradient(ellipse 70% 50% at 100% 0%, rgba(127,223,208,0.06) 0%, transparent 55%),
		var(--tro-bg) !important;
	color: var(--tro-ink) !important;
	background-attachment: fixed;
}
body{ font-family:"Inter","Segoe UI",Roboto,sans-serif !important; line-height:1.65; }

::selection{ background: rgba(224,177,74,0.35); color: #fff; }

/* Custom scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background: var(--tro-bg); }
::-webkit-scrollbar-thumb{ background: var(--tro-border-lt); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover{ background: var(--tro-gold-dim); }

/* ============ Header ============ */
.vector-header-container, .mw-header{
	background: linear-gradient(180deg, rgba(13,17,32,0.97), rgba(10,13,22,0.94)) !important;
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--tro-border) !important;
	box-shadow: 0 1px 0 rgba(224,177,74,0.25), 0 10px 30px rgba(0,0,0,0.35);
}
.mw-logo-wordmark, .mw-logo-container a, .vector-header-container a{ color: var(--tro-gold-br) !important; }
.mw-logo-wordmark{ font-family:"Cinzel",serif !important; font-weight:700 !important; letter-spacing:0.02em; }
.mw-logo-icon{ filter: drop-shadow(0 0 6px rgba(224,177,74,0.5)); }

.cdx-search-input{
	border: 1px solid var(--tro-border-lt) !important;
	border-radius: 999px !important;
	overflow: hidden;
	background: var(--tro-panel-2) !important;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.cdx-search-input:focus-within{ border-color: var(--tro-gold) !important; box-shadow: 0 0 0 3px rgba(224,177,74,0.15); }
#p-search input, .cdx-text-input__input{ background: transparent !important; color: var(--tro-ink) !important; border: none !important; border-radius: 0 !important; padding-left: 16px !important; }
.cdx-search-input__end-button{ background: transparent !important; border: none !important; color: var(--tro-ink-dim) !important; font-weight: 600; }
.cdx-search-input__end-button:hover{ color: var(--tro-gold-br) !important; }
.cdx-text-input{ background: transparent !important; border: none !important; }

/* ============ Sidebar (left nav) ============ */
#mw-panel, .vector-pinnable-header, .mw-portlet{ background: transparent !important; }
.mw-portlet-label{ color: var(--tro-gold) !important; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75em; font-weight: 700; }
.vector-menu-content a, #p-navigation a, #p-tb a{ color: var(--tro-ink-dim) !important; padding: 6px 10px !important; border-radius: 8px; transition: all .15s ease; }
.vector-menu-content a:hover{ color: var(--tro-gold-br) !important; background: rgba(224,177,74,0.08); }

/* ============ Main content card ============ */
#content, .mw-body{
	background: linear-gradient(160deg, var(--tro-panel-solid), #0f1424) !important;
	border: 1px solid var(--tro-border) !important;
	border-radius: var(--radius-lg) !important;
	box-shadow: var(--shadow-glow) !important;
	color: var(--tro-ink) !important;
	padding-top: 4px;
}
.mw-body-content{ color: var(--tro-ink) !important; }
.mw-body{ margin-right: 12px !important; }

/* Page action tabs (Read/Discussion/Edit/History) — cleaner pill row */
#p-views, #p-namespaces, .vector-page-titlebar-tabs{ border-bottom: 1px solid var(--tro-border) !important; }
#p-views a, #p-namespaces a, .vector-tab-noicon a{ color: var(--tro-ink-faint) !important; font-weight: 500; }
#p-views li.selected a, #p-namespaces li.selected a{ color: var(--tro-gold-br) !important; font-weight: 700; }
.vector-page-titlebar{ border-bottom: 1px solid var(--tro-border) !important; }

/* ============ Headings ============ */
.mw-body h1, .firstHeading{
	color: var(--tro-gold-br) !important;
	font-family: "Cinzel", serif !important;
	font-weight: 700 !important;
	border-bottom: none !important;
	padding-bottom: 4px !important;
	letter-spacing: 0.01em;
	font-size: 2.1em !important;
	text-shadow: 0 0 30px rgba(224,177,74,0.25);
}
.mw-body h2{
	color: var(--tro-gold-br) !important;
	font-family: "Cinzel", serif !important;
	font-weight: 600 !important;
	border-bottom: 1px solid var(--tro-border) !important;
	margin-top: 2.2em !important;
	padding-bottom: 8px;
	font-size: 1.4em !important;
	position: relative;
}
.mw-body h2::before{
	content: '';
	display: inline-block;
	width: 4px; height: 1em;
	background: linear-gradient(180deg, var(--tro-gold), var(--tro-accent));
	margin-right: 10px;
	border-radius: 2px;
	vertical-align: -2px;
}
.mw-body h3{ color: var(--tro-accent) !important; font-weight: 700 !important; margin-top: 1.6em !important; }

a{ color: #8fc4ff; text-decoration: none; border-bottom: 1px solid transparent; transition: all .15s ease; }
a:hover{ color: var(--tro-gold-br); border-bottom-color: currentColor; }
a.new{ color: #ff8a8a !important; }

/* ============ Tables ============ */
.mw-body table:not(.tro-card-grid){
	background: var(--tro-panel-2) !important;
	border: 1px solid var(--tro-border) !important;
	border-radius: var(--radius-md) !important;
	overflow: hidden;
	border-spacing: 0 !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.mw-body table:not(.tro-card-grid) th{
	background: linear-gradient(180deg, rgba(224,177,74,0.16), rgba(224,177,74,0.06)) !important;
	color: var(--tro-gold-br) !important;
	border-color: var(--tro-border) !important;
	font-family: "Cinzel", serif;
	letter-spacing: 0.02em;
	padding: 10px 14px !important;
}
.mw-body table:not(.tro-card-grid) td{ border-color: var(--tro-border) !important; color: var(--tro-ink) !important; padding: 9px 14px !important; }
.mw-body table:not(.tro-card-grid) tr:nth-child(even) td{ background: rgba(255,255,255,0.015); }
.mw-body table:not(.tro-card-grid) tr:hover td{ background: rgba(224,177,74,0.05); }

/* ============ Forum-style hub components ============ */
.tro-hero{
	position: relative;
	background:
		radial-gradient(ellipse 70% 100% at 20% 0%, rgba(224,177,74,0.18), transparent 60%),
		radial-gradient(ellipse 60% 100% at 90% 100%, rgba(127,223,208,0.12), transparent 60%),
		linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-solid));
	border: 1px solid var(--tro-border-lt);
	border-radius: var(--radius-lg);
	padding: 48px 36px;
	text-align: center;
	margin: 8px 0 32px;
	overflow: hidden;
}
.tro-hero::after{
	content: '';
	position: absolute; inset: 0;
	background-image: radial-gradient(circle, rgba(255,255,255,0.4) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.04;
	pointer-events: none;
}
.tro-hero h1{ border:none !important; margin:0 0 12px !important; font-size:2.6em !important; }
.tro-hero p{ color: var(--tro-ink-dim); margin:0; font-size: 1.05em; max-width: 640px; margin-left:auto; margin-right:auto; }

.tro-card-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin:22px 0; }
.tro-card{
	display:flex;
	flex-direction: column;
	background: linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-2));
	border:1px solid var(--tro-border);
	border-radius: var(--radius-md);
	padding:20px;
	text-decoration:none !important;
	transition: transform .2s cubic-bezier(.2,.8,.2,1), border-color .2s ease, box-shadow .2s ease;
	box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}
.tro-card:hover{ transform: translateY(-4px); border-color: var(--tro-gold); box-shadow: 0 16px 36px rgba(0,0,0,0.4), 0 0 0 1px rgba(224,177,74,0.25); }
.tro-card-icon{
	font-size:1.5em;
	display:inline-flex; align-items:center; justify-content:center;
	width: 44px; height: 44px;
	margin-bottom:12px;
	background: linear-gradient(160deg, rgba(224,177,74,0.18), rgba(224,177,74,0.05));
	border: 1px solid rgba(224,177,74,0.25);
	border-radius: 12px;
}
.tro-card-title{ color:var(--tro-gold-br) !important; font-weight:700; font-size:1.08em; display:block; margin-bottom:6px; font-family:"Cinzel",serif; }
.tro-card-desc{ color:var(--tro-ink-dim); font-size:0.87em; line-height:1.5; }

.tro-badge{ display:inline-flex; align-items:center; gap:5px; padding:4px 12px; border-radius:999px; font-size:0.7em; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin:2px 5px 2px 0; }
.tro-badge-high{ background:rgba(255,122,26,0.15); color:#ff9a52; border:1px solid rgba(255,122,26,0.35); }
.tro-badge-mid{ background:rgba(127,223,208,0.15); color:#7fdfd0; border:1px solid rgba(127,223,208,0.35); }
.tro-badge-low{ background:rgba(200,80,80,0.15); color:#e08080; border:1px solid rgba(200,80,80,0.35); }
.tro-badge-all{ background:rgba(224,177,74,0.15); color:var(--tro-gold-br); border:1px solid rgba(224,177,74,0.35); }

.tro-infobox{
	float:right;
	width:280px;
	margin:0 0 20px 24px;
	background: linear-gradient(160deg, var(--tro-panel-3), var(--tro-panel-2));
	border:1px solid var(--tro-border-lt);
	border-radius: var(--radius-md);
	padding:20px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.tro-infobox dl{ margin:0; }
.tro-infobox dt{ color:var(--tro-ink-faint); font-size:0.7em; text-transform:uppercase; letter-spacing:0.06em; margin-top:14px; font-weight:700; }
.tro-infobox dt:first-child{ margin-top:0; }
.tro-infobox dd{ margin:3px 0 0; color:var(--tro-ink); font-weight:600; font-size:0.95em; }

@media (max-width: 720px){
	.tro-infobox{ float:none; width:auto; margin:0 0 20px 0; }
	.tro-hero{ padding:32px 20px; }
	.tro-hero h1{ font-size:1.8em !important; }
}

/* ============ Cleanup: sidebar boxes, footer, appearance panel ============ */
.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{ background:transparent !important; color:var(--tro-ink) !important; }
#vector-toc *, .vector-toc-list, .vector-toc-list-item{ color:var(--tro-ink-dim) !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; }

.vector-pinned-container{ background: var(--tro-panel-2) !important; border:1px solid var(--tro-border) !important; border-radius: var(--radius-md) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.25); }
.vector-pinned-container *{ color:var(--tro-ink) !important; }
.vector-pinned-container a{ color:#8fc4ff !important; }
#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:transparent !important; }
#vector-toc-collapsed-button, .vector-dropdown-content{ background:var(--tro-panel-2) !important; color:var(--tro-ink) !important; }
.cdx-radio__icon{ background:transparent !important; }

.mw-footer-container, footer.mw-footer, #footer{ display:none !important; }

#vector-page-tools-pinned-container,
#vector-appearance-pinned-container{ display:none !important; }
.mw-body-content{ margin-right:0 !important; }