MediaWiki:MainPage.css - Revision history

Noorisei at 12:31, 2 January 2026

2026-01-02T12:31:15Z

← Older revision		Revision as of 08:31, 2 January 2026
Line 4:		Line 4:
	/* Cards */		/* Cards */
	.mw-parser-output .card {		.mw-parser-output .card {
	background: ~~#ffffff~~;		background: var(--surface);
	border: 1px solid ~~rgba~~(~~0,0,0,0.08~~);		border: 1px solid var(--border);
	border-left: 3px solid transparent;		border-left: 3px solid transparent;
	border-radius: 14px;		border-radius: 14px;
Line 15:		Line 15:
	.mw-parser-output .card:hover {		.mw-parser-output .card:hover {
	transform: translateY(-3px);		transform: translateY(-3px);
	box-shadow: 0 6px 24px ~~rgba~~(~~255, 79, 145, 0.18~~);		box-shadow: 0 6px 24px var(--shadow-medium);
	background: ~~#fff5fb~~;		background: var(--bg-1);
	border-left-color: ~~#ff6b9d~~;		border-left-color: var(--border-strong);
	padding-left: 4px;		padding-left: 4px;
	}		}
Line 33:		Line 33:
	margin: 0;		margin: 0;
	font-size: 16px;		font-size: 16px;
	color: ~~#222~~;		color: var(--text);
	text-align: center;		text-align: center;
	}		}
Line 50:		Line 50:
	font-size: 26px;		font-size: 26px;
	font-weight: 800;		font-weight: 800;
	color: ~~#d02f72~~;		color: var(--heading);
	}		}

	.mw-parser-output .section-lead {		.mw-parser-output .section-lead {
	color: ~~#666~~;		color: var(--text-muted);
	font-size: 16px;		font-size: 16px;
	margin: 0;		margin: 0;
Line 66:		Line 66:
	border-radius: 14px;		border-radius: 14px;
	font-weight: 700;		font-weight: 700;
	color: ~~white~~;		color: var(--text-strong);
	background: linear-gradient(135deg, ~~#ff4f91~~, ~~#d02f72~~);		background: linear-gradient(135deg, var(--primary), var(--primary-hover));
	transition: all .2s ease;		transition: all .2s ease;
	font-size: 14px;		font-size: 14px;
	box-shadow: 0 4px 12px ~~rgba~~(~~255, 107, 157, 0.3~~);		box-shadow: 0 4px 12px var(--shadow-strong);
	}		}

	.mw-parser-output .back-to-top:hover {		.mw-parser-output .back-to-top:hover {
	background: linear-gradient(135deg, ~~#e93c81~~, ~~#b32561~~);		background: linear-gradient(135deg, var(--primary-hover), var(--primary));
	transform: translateY(-2px);		transform: translateY(-2px);
	box-shadow: 0 6px 20px ~~rgba~~(~~255, 107, 157, 0.4~~);		box-shadow: 0 6px 20px var(--shadow-strong);
	}		}

Line 116:		Line 116:

	.mw-parser-output .info-card {		.mw-parser-output .info-card {
	background: ~~#ffffff~~;		background: var(--surface);
	border: 1px solid ~~rgba~~(~~0,0,0,0.08~~);		border: 1px solid var(--border);
	border-left: 3px solid transparent;		border-left: 3px solid transparent;
	border-radius: 14px;		border-radius: 14px;
Line 126:		Line 126:
	.mw-parser-output .info-card:hover {		.mw-parser-output .info-card:hover {
	transform: translateY(-2px);		transform: translateY(-2px);
	box-shadow: 0 2px 8px ~~rgba~~(~~0, 0, 0, 0.05~~);		box-shadow: 0 2px 8px var(--shadow-soft);
	background: ~~#fff5fb~~;		background: var(--bg-1);
	border-left-color: ~~#ff6b9d~~;		border-left-color: var(--border-strong);
	padding-left: 20px;		padding-left: 20px;
	}		}
Line 142:		Line 142:

	.mw-parser-output .wikitable-like .column {		.mw-parser-output .wikitable-like .column {
	background: ~~#ffffff~~;		background: var(--surface);
	border: 1px solid ~~rgba~~(~~0,0,0,0.08~~);		border: 1px solid var(--border);
	border-left: 3px solid transparent;		border-left: 3px solid transparent;
	border-radius: 14px;		border-radius: 14px;
Line 152:		Line 152:
	.mw-parser-output .wikitable-like .column:hover {		.mw-parser-output .wikitable-like .column:hover {
	transform: translateY(-2px);		transform: translateY(-2px);
	box-shadow: 0 2px 8px ~~rgba~~(~~0, 0, 0, 0.05~~);		box-shadow: 0 2px 8px var(--shadow-soft);
	background: ~~#fff5fb~~;		background: var(--bg-1);
	border-left-color: ~~#ff6b9d~~;		border-left-color: var(--border-strong);
	padding-left: 20px;		padding-left: 20px;
	}		}
Line 280:		Line 280:
	}		}
	}		}
	~~html[data-theme="dark"] .mw-parser-output .card { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }~~
	html[data-theme="dark"] .mw-parser-output .card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 4px }
	~~html[data-theme="dark"] .mw-parser-output .card-title { color: #cfe6ff }~~
	~~html[data-theme="dark"] .mw-parser-output .section-header h2 { color: #9fd0ff }~~
	~~html[data-theme="dark"] .mw-parser-output .section-lead { color: #a8c6e8 }~~
	~~html[data-theme="dark"] .mw-parser-output .back-to-top { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff; box-shadow: 0 6px 20px rgba(123,187,255,.22) }~~
	~~html[data-theme="dark"] .mw-parser-output .back-to-top:hover { background: linear-gradient(135deg, #315b8f, #223451); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(123,187,255,.25) }~~
	~~html[data-theme="dark"] .mw-parser-output .info-card { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }~~
	html[data-theme="dark"] .mw-parser-output .info-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 20px }
	html[data-theme="dark"] .mw-parser-output .wikitable-like .column { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }
	html[data-theme="dark"] .mw-parser-output .wikitable-like .column:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 20px }
	~~html[data-theme="dark"] .mw-parser-output .hero-title { color: #cfe6ff }~~
	~~html[data-theme="dark"] .mw-parser-output .hero-subtitle { color: #a8c6e8 }~~

Noorisei at 15:37, 3 December 2025

2025-12-03T15:37:16Z

← Older revision		Revision as of 11:37, 3 December 2025
Line 280:		Line 280:
	}		}
	}		}
			html[data-theme="dark"] .mw-parser-output .card { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }
			html[data-theme="dark"] .mw-parser-output .card:hover { transform: translateY(-3px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 4px }
			html[data-theme="dark"] .mw-parser-output .card-title { color: #cfe6ff }
			html[data-theme="dark"] .mw-parser-output .section-header h2 { color: #9fd0ff }
			html[data-theme="dark"] .mw-parser-output .section-lead { color: #a8c6e8 }
			html[data-theme="dark"] .mw-parser-output .back-to-top { background: linear-gradient(135deg, #274c77, #1b2b41); color: #ffffff; box-shadow: 0 6px 20px rgba(123,187,255,.22) }
			html[data-theme="dark"] .mw-parser-output .back-to-top:hover { background: linear-gradient(135deg, #315b8f, #223451); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(123,187,255,.25) }
			html[data-theme="dark"] .mw-parser-output .info-card { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }
			html[data-theme="dark"] .mw-parser-output .info-card:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 20px }
			html[data-theme="dark"] .mw-parser-output .wikitable-like .column { background: #141c2a; border: 1px solid rgba(159,208,255,.18); border-left: 3px solid transparent; box-shadow: 0 6px 24px rgba(123,187,255,.18) }
			html[data-theme="dark"] .mw-parser-output .wikitable-like .column:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(123,187,255,.25); background: rgba(61,97,146,.12); border-left-color: #7bbbff; padding-left: 20px }
			html[data-theme="dark"] .mw-parser-output .hero-title { color: #cfe6ff }
			html[data-theme="dark"] .mw-parser-output .hero-subtitle { color: #a8c6e8 }

Noorisei: Created page with " /* [COMPONENTS] UI COMPONENTS ======================================== / / Cards */ .mw-parser-output .card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-left: 3px solid transparent; border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease; padding: 0; } .mw-parser-output .card:hover { transform: translateY(-3px); box-shadow:..."

2025-10-21T20:47:47Z

Created page with " [COMPONENTS] UI COMPONENTS ========================================: Cards: .mw-parser-output .card { background: #ffffff; border: 1px solid rgba(0,0,0,0.08); border-left: 3px solid transparent; border-radius: 14px; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease; padding: 0; } .mw-parser-output .card:hover { transform: translateY(-3px); box-shadow:..."

New page

/* [COMPONENTS] UI COMPONENTS
======================================== */
/* Cards */
.mw-parser-output .card {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-left: 3px solid transparent;
border-radius: 14px;
overflow: hidden;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
padding: 0;
}

.mw-parser-output .card:hover {
transform: translateY(-3px);
box-shadow: 0 6px 24px rgba(255, 79, 145, 0.18);
background: #fff5fb;
border-left-color: #ff6b9d;
padding-left: 4px;
}

.mw-parser-output .card-media {
text-align: center;
padding-top: 6px;
}

.mw-parser-output .card-body {
padding: 10px 12px;
}

.mw-parser-output .card-title {
margin: 0;
font-size: 16px;
color: #222;
text-align: center;
}

/* [NAVIGATION] TAB SYSTEM
======================================== */

/* Section Headers */
.mw-parser-output .section-header {
text-align: center;
margin-bottom: 20px;
}

.mw-parser-output .section-header h2 {
margin: 0 0 8px 0;
font-size: 26px;
font-weight: 800;
color: #d02f72;
}

.mw-parser-output .section-lead {
color: #666;
font-size: 16px;
margin: 0;
}

/* Buttons */
.mw-parser-output .back-to-top {
border: 0;
cursor: pointer;
padding: 12px 24px;
border-radius: 14px;
font-weight: 700;
color: white;
background: linear-gradient(135deg, #ff4f91, #d02f72);
transition: all .2s ease;
font-size: 14px;
box-shadow: 0 4px 12px rgba(255, 107, 157, 0.3);
}

.mw-parser-output .back-to-top:hover {
background: linear-gradient(135deg, #e93c81, #b32561);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 157, 0.4);
}

/* Lists */
.mw-parser-output .inline-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}

.mw-parser-output .inline-list li {
white-space: nowrap;
margin-right: 8px;
margin-bottom: 8px;
}

/* Grid Layouts */
.mw-parser-output .highlights-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
margin: 1rem 0;
}

.mw-parser-output .highlights-grid > * {
margin: 8px;
}

.mw-parser-output .info-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin-top: 20px;
}

.mw-parser-output .info-grid > * {
margin: 8px;
}

.mw-parser-output .info-card {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-left: 3px solid transparent;
border-radius: 14px;
padding: 16px;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
}

.mw-parser-output .info-card:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
background: #fff5fb;
border-left-color: #ff6b9d;
padding-left: 20px;
}

.mw-parser-output .wikitable-like {
display: grid;
grid-template-columns: repeat(3, 1fr);
}

.mw-parser-output .wikitable-like > * {
margin: 8px;
}

.mw-parser-output .wikitable-like .column {
background: #ffffff;
border: 1px solid rgba(0,0,0,0.08);
border-left: 3px solid transparent;
border-radius: 14px;
padding: 16px;
transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, padding .2s ease;
}

.mw-parser-output .wikitable-like .column:hover {
transform: translateY(-2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
background: #fff5fb;
border-left-color: #ff6b9d;
padding-left: 20px;
}

.mw-parser-output .wikitable-like ul {
margin: 0;
padding-left: 18px;
}

.mw-parser-output .tab-footer {
display: flex;
justify-content: center;
margin-top: 20px;
}

/* [ANIMATIONS] KEYFRAMES
======================================== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeInOut {
0%, 100% {
opacity: 0.8;
}
50% {
opacity: 1;
}
}

/* [RESPONSIVE] MEDIA QUERIES
======================================== */
@media (max-width: 768px) {
.mw-parser-output .hero-inner {
padding: 18px;
}

.mw-parser-output .hero-title {
font-size: 24px;
}

.mw-parser-output .hero-subtitle {
font-size: 14px;
}

.mw-parser-output .tab-content {
padding: 18px;
}

.mw-parser-output .card-title {
font-size: 14px;
}

.mw-parser-output .nav-tab {
font-size: 12px;
}

.mw-parser-output .section-header {
margin-bottom: 16px;
}

.mw-parser-output .section-header h2 {
font-size: 22px;
}

.mw-parser-output .section-lead {
font-size: 14px;
}

.mw-parser-output .info-card {
padding: 14px;
}

.mw-parser-output .info-card:hover {
padding-left: 18px;
}

.mw-parser-output .tab-footer {
margin-top: 16px;
}

.mw-parser-output .highlights-grid {
grid-template-columns: repeat(2, 1fr);
}

.mw-parser-output .info-grid {
grid-template-columns: 1fr;
}

.mw-parser-output .nav-tab .full-text {
display: none;
}

.mw-parser-output .nav-tab .short-text {
display: inline;
}

.mw-parser-output .wikitable-like {
grid-template-columns: 1fr;
}
}

@media (max-width: 480px) {
.mw-parser-output .hero-inner {
padding: 16px;
}

.mw-parser-output .hero-title {
font-size: 20px;
}

.mw-parser-output .tab-content {
padding: 16px;
}

.mw-parser-output .highlights-grid {
grid-template-columns: 1fr;
}
}