MediaWiki:Common.css: Difference between revisions
Jump to navigation
Jump to search
No edit summary |
No edit summary Tag: Reverted |
||
| Line 1: | Line 1: | ||
/* | /* ═══════════════════════════════════════════════════════════════════ | ||
MediaWiki:Common.css — TimeRO Wiki Design System | |||
Add this to your wiki's MediaWiki:Common.css page. | |||
These rules enable animations, font imports, and hover effects | |||
that cannot be achieved with inline styles alone. | |||
═══════════════════════════════════════════════════════════════════ */ | |||
/* | /* ── Font Import ──────────────────────────────────────────────── */ | ||
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap'); | |||
/* | /* ── Root overrides for the main page ─────────────────────────── */ | ||
/* Make the wiki content area full-width on the main page */ | |||
body.page-Main_Page #content, | |||
body.page-Main_Page .mw-body { | |||
. | margin-left: 0 !important; | ||
padding: 0 !important; | |||
border: none !important; | |||
background: transparent !important; | |||
} | } | ||
body.page-Main_Page #bodyContent, | |||
body.page-Main_Page .mw-body-content, | |||
body.page-Main_Page .mw-parser-output { | |||
# | background: transparent !important; | ||
padding: 0 !important; | |||
} | } | ||
/* | /* Hide default wiki page title on main page */ | ||
body.page-Main_Page #firstHeading, | |||
body.page-Main_Page .mw-first-heading { | |||
display: none !important; | |||
} | } | ||
/* | /* Suppress the page subtitle */ | ||
body.page-Main_Page #contentSub { | |||
display: none !important; | |||
. | |||
} | } | ||
/* | /* ── Keyframe Animations ───────────────────────────────────────── */ | ||
@keyframes timero-pulse-glow { | |||
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); } | |||
50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); } | |||
} | |||
} | |||
} | } | ||
@keyframes timero-fade-up { | |||
from { opacity: 0; transform: translateY(20px); } | |||
to { opacity: 1; transform: translateY(0); } | |||
} | } | ||
@keyframes timero-shimmer { | |||
0% { background-position: -200% center; } | |||
60%, 100% { background-position: 200% center; } | |||
} | |||
} | |||
} | } | ||
@keyframes timero-blink { | |||
0%, 100% { opacity: 1; } | |||
50% { opacity: 0.25; } | |||
} | |||
} | } | ||
@keyframes timero-float { | |||
0%, 100% { transform: translateY(0); } | |||
50% { transform: translateY(-6px); } | |||
} | |||
} | } | ||
@keyframes timero-grid-drift { | |||
from { background-position: 0 0; } | |||
to { background-position: 0 48px; } | |||
background- | |||
} | } | ||
/** | /* ── Main page root font override ─────────────────────────────── */ | ||
.timero-wiki-root, | |||
* | .timero-wiki-root * { | ||
font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif; | |||
box-sizing: border-box; | |||
} | } | ||
.timero-wiki-root h2 { | |||
font-family: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif; | |||
border: none !important; | |||
border-bottom: none !important; | |||
} | } | ||
/* | /* ── Hero section ─────────────────────────────────────────────── */ | ||
.timero-hero { | |||
animation: timero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both; | |||
. | |||
} | } | ||
/* Animated background grid */ | |||
.timero-hero > div:first-child { | |||
animation: timero-grid-drift 8s linear infinite; | |||
} | } | ||
/* Server status dot pulse */ | |||
.timero-hero [style*="width:7px"] { | |||
animation: timero-blink 1.6s ease-in-out infinite; | |||
} | } | ||
/* | /* ── Step cards hover ─────────────────────────────────────────── */ | ||
.timero-wiki-root [style*="border-radius:18px"][style*="border:1px solid rgba(0,212,255"] { | |||
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), | |||
box-shadow 0.25s ease, | |||
border-color 0.25s ease; | |||
} | } | ||
.timero-wiki-root [style*="border-radius:18px"][style*="border:1px solid rgba(0,212,255"]:hover { | |||
. | transform: translateY(-6px); | ||
box-shadow: 0 20px 50px rgba(0, 212, 255, 0.18); | |||
} | } | ||
/* | /* ── System cards hover ───────────────────────────────────────── */ | ||
. | .timero-wiki-root [style*="display:flex"][style*="border-radius:18px"] { | ||
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1), | |||
border-color 0.22s ease; | |||
} | } | ||
.timero-wiki-root [style*="display:flex"][style*="border-radius:18px"]:hover { | |||
transform: translateX(6px); | |||
} | } | ||
/* | /* ── Guide cards hover ────────────────────────────────────────── */ | ||
.timero-wiki-root [style*="border-radius:18px"][style*="overflow:hidden"]:hover { | |||
transform: translateY(-6px); | |||
} | } | ||
.timero-wiki-root [style*="border-radius:18px"][style*="overflow:hidden"] { | |||
. | transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), | ||
box-shadow 0.25s ease; | |||
. | |||
} | } | ||
/* ── Database pill buttons hover ──────────────────────────────── */ | |||
.timero-wiki-root [style*="display:inline-flex"][style*="border-radius:14px"] { | |||
/* | transition: transform 0.2s ease, box-shadow 0.2s ease; | ||
} | } | ||
.timero-wiki-root [style*="display:inline-flex"][style*="border-radius:14px"]:hover { | |||
transform: translateY(-3px); | |||
} | } | ||
/* | /* ── Hero title gradient animation ───────────────────────────── */ | ||
.timero-wiki-root [style*="font-size:clamp(3rem"][style*="background:linear-gradient"] { | |||
background-size: 300% auto; | |||
animation: timero-shimmer 6s ease infinite; | |||
} | } | ||
/* | /* ── CTA button hover ─────────────────────────────────────────── */ | ||
.timero-wiki-root [style*="background:linear-gradient(135deg,#00d4ff"] { | |||
transition: transform 0.2s ease, box-shadow 0.2s ease; | |||
} | } | ||
.timero-wiki-root [style*="background:linear-gradient(135deg,#00d4ff"]:hover { | |||
transform: translateY(-3px); | |||
box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 18px 50px rgba(0, 212, 255, 0.45); | |||
} | } | ||
/* | /* ── Endgame goal cards hover ─────────────────────────────────── */ | ||
.timero-wiki-root [style*="text-align:center"][style*="border-radius:18px"] { | |||
transition: transform 0.22s ease, border-color 0.22s ease; | |||
} | } | ||
.timero-wiki-root [style*="text-align:center"][style*="border-radius:18px"]:hover { | |||
transform: translateY(-4px); | |||
} | } | ||
/* ── Community cards hover ────────────────────────────────────── */ | |||
.timero-wiki-root [style*="display:flex;align-items:center"][style*="border-radius:16px"] { | |||
transition: transform 0.22s ease; | |||
} | } | ||
.timero-wiki-root [style*="display:flex;align-items:center"][style*="border-radius:16px"]:hover { | |||
transform: translateX(5px); | |||
} | } | ||
/* ── Staggered fade-up animation for sections ─────────────────── */ | |||
.timero-wiki-root > div:nth-child(2) { animation: timero-fade-up 0.7s 0.1s both; } | |||
.timero-wiki-root > div:nth-child(3) { animation: timero-fade-up 0.7s 0.2s both; } | |||
.timero-wiki-root > div:nth-child(4) { animation: timero-fade-up 0.7s 0.3s both; } | |||
.timero-wiki-root > div:nth-child(5) { animation: timero-fade-up 0.7s 0.4s both; } | |||
.timero-wiki-root > div:nth-child(6) { animation: timero-fade-up 0.7s 0.5s both; } | |||
.timero-wiki-root > div:nth-child(7) { animation: timero-fade-up 0.7s 0.6s both; } | |||
.timero-wiki-root > div:nth-child(8) { animation: timero-fade-up 0.7s 0.7s both; } | |||
/* ── Sidebar hide on main page (optional) ─────────────────────── */ | |||
/* Uncomment if you want full-width on main page (requires sidebar removal) */ | |||
/* | |||
body.page-Main_Page #mw-panel, | |||
body.page-Main_Page #mw-head-base { | |||
display: none !important; | |||
} | } | ||
body.page-Main_Page #mw-content-text { | |||
margin: 0 !important; | |||
} | } | ||
*/ | |||
/* ── Link style overrides inside wiki root ────────────────────── */ | |||
.timero-wiki-root a { | |||
color: inherit !important; | |||
text-decoration: none !important; | |||
} | } | ||
.timero-wiki-root a:hover { | |||
text-decoration: none !important; | |||
color: inherit !important; | |||
} | } | ||
/* | /* ── Responsive grid breakpoints ──────────────────────────────── */ | ||
@media (max-width: 900px) { | |||
.timero-wiki-root [style*="grid-template-columns:repeat(4,1fr)"] { | |||
display: grid !important; | |||
grid-template-columns: repeat(2, 1fr) !important; | |||
} | |||
.timero-wiki-root [style*="grid-template-columns:repeat(3,1fr)"] { | |||
display: grid !important; | |||
grid-template-columns: repeat(2, 1fr) !important; | |||
} | |||
.timero-wiki-root [style*="grid-template-columns:repeat(2,1fr)"] { | |||
display: grid !important; | |||
grid-template-columns: 1fr !important; | |||
} | |||
} | } | ||
@media (max-width: 600px) { | |||
.timero-wiki-root [style*="grid-template-columns:repeat(4,1fr)"], | |||
.timero-wiki-root [style*="grid-template-columns:repeat(3,1fr)"], | |||
.timero-wiki-root [style*="grid-template-columns:repeat(2,1fr)"] { | |||
display: grid !important; | |||
grid-template-columns: 1fr !important; | |||
} | |||
.timero-wiki-root [style*="padding:64px 48px"], | |||
} | .timero-wiki-root [style*="padding:56px 48px"], | ||
.timero-wiki-root [style*="padding:52px 48px"], | |||
.timero-wiki-root [style*="padding:48px 48px"] { | |||
. | padding-left: 20px !important; | ||
padding-right: 20px !important; | |||
} | |||
.timero-hero [style*="display:flex;gap:12px;justify-content:center"] { | |||
flex-direction: column !important; | |||
} | align-items: center !important; | ||
. | |||
} | } | ||
} | } | ||
/* | /* ── Print: hide decorative elements ─────────────────────────── */ | ||
@media print { | @media print { | ||
. | .timero-hero [style*="position:absolute"] { display: none !important; } | ||
.timero-wiki-root [style*="background:linear-gradient"] { | |||
background: #f0f0f0 !important; | |||
} | } | ||
} | } | ||
Revision as of 18:25, 12 April 2026
/* ═══════════════════════════════════════════════════════════════════
MediaWiki:Common.css — TimeRO Wiki Design System
Add this to your wiki's MediaWiki:Common.css page.
These rules enable animations, font imports, and hover effects
that cannot be achieved with inline styles alone.
═══════════════════════════════════════════════════════════════════ */
/* ── Font Import ──────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Share+Tech+Mono&display=swap');
/* ── Root overrides for the main page ─────────────────────────── */
/* Make the wiki content area full-width on the main page */
body.page-Main_Page #content,
body.page-Main_Page .mw-body {
margin-left: 0 !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
}
body.page-Main_Page #bodyContent,
body.page-Main_Page .mw-body-content,
body.page-Main_Page .mw-parser-output {
background: transparent !important;
padding: 0 !important;
}
/* Hide default wiki page title on main page */
body.page-Main_Page #firstHeading,
body.page-Main_Page .mw-first-heading {
display: none !important;
}
/* Suppress the page subtitle */
body.page-Main_Page #contentSub {
display: none !important;
}
/* ── Keyframe Animations ───────────────────────────────────────── */
@keyframes timero-pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 255, 0.2); }
50% { box-shadow: 0 0 40px rgba(0, 212, 255, 0.5); }
}
@keyframes timero-fade-up {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes timero-shimmer {
0% { background-position: -200% center; }
60%, 100% { background-position: 200% center; }
}
@keyframes timero-blink {
0%, 100% { opacity: 1; }
50% { opacity: 0.25; }
}
@keyframes timero-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
@keyframes timero-grid-drift {
from { background-position: 0 0; }
to { background-position: 0 48px; }
}
/* ── Main page root font override ─────────────────────────────── */
.timero-wiki-root,
.timero-wiki-root * {
font-family: 'Rajdhani', 'Segoe UI', system-ui, sans-serif;
box-sizing: border-box;
}
.timero-wiki-root h2 {
font-family: 'Barlow Condensed', 'Segoe UI', system-ui, sans-serif;
border: none !important;
border-bottom: none !important;
}
/* ── Hero section ─────────────────────────────────────────────── */
.timero-hero {
animation: timero-fade-up 0.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Animated background grid */
.timero-hero > div:first-child {
animation: timero-grid-drift 8s linear infinite;
}
/* Server status dot pulse */
.timero-hero [style*="width:7px"] {
animation: timero-blink 1.6s ease-in-out infinite;
}
/* ── Step cards hover ─────────────────────────────────────────── */
.timero-wiki-root [style*="border-radius:18px"][style*="border:1px solid rgba(0,212,255"] {
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s ease,
border-color 0.25s ease;
}
.timero-wiki-root [style*="border-radius:18px"][style*="border:1px solid rgba(0,212,255"]:hover {
transform: translateY(-6px);
box-shadow: 0 20px 50px rgba(0, 212, 255, 0.18);
}
/* ── System cards hover ───────────────────────────────────────── */
.timero-wiki-root [style*="display:flex"][style*="border-radius:18px"] {
transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
border-color 0.22s ease;
}
.timero-wiki-root [style*="display:flex"][style*="border-radius:18px"]:hover {
transform: translateX(6px);
}
/* ── Guide cards hover ────────────────────────────────────────── */
.timero-wiki-root [style*="border-radius:18px"][style*="overflow:hidden"]:hover {
transform: translateY(-6px);
}
.timero-wiki-root [style*="border-radius:18px"][style*="overflow:hidden"] {
transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.25s ease;
}
/* ── Database pill buttons hover ──────────────────────────────── */
.timero-wiki-root [style*="display:inline-flex"][style*="border-radius:14px"] {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.timero-wiki-root [style*="display:inline-flex"][style*="border-radius:14px"]:hover {
transform: translateY(-3px);
}
/* ── Hero title gradient animation ───────────────────────────── */
.timero-wiki-root [style*="font-size:clamp(3rem"][style*="background:linear-gradient"] {
background-size: 300% auto;
animation: timero-shimmer 6s ease infinite;
}
/* ── CTA button hover ─────────────────────────────────────────── */
.timero-wiki-root [style*="background:linear-gradient(135deg,#00d4ff"] {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.timero-wiki-root [style*="background:linear-gradient(135deg,#00d4ff"]:hover {
transform: translateY(-3px);
box-shadow: 0 0 0 1px rgba(255,255,255,0.22) inset, 0 18px 50px rgba(0, 212, 255, 0.45);
}
/* ── Endgame goal cards hover ─────────────────────────────────── */
.timero-wiki-root [style*="text-align:center"][style*="border-radius:18px"] {
transition: transform 0.22s ease, border-color 0.22s ease;
}
.timero-wiki-root [style*="text-align:center"][style*="border-radius:18px"]:hover {
transform: translateY(-4px);
}
/* ── Community cards hover ────────────────────────────────────── */
.timero-wiki-root [style*="display:flex;align-items:center"][style*="border-radius:16px"] {
transition: transform 0.22s ease;
}
.timero-wiki-root [style*="display:flex;align-items:center"][style*="border-radius:16px"]:hover {
transform: translateX(5px);
}
/* ── Staggered fade-up animation for sections ─────────────────── */
.timero-wiki-root > div:nth-child(2) { animation: timero-fade-up 0.7s 0.1s both; }
.timero-wiki-root > div:nth-child(3) { animation: timero-fade-up 0.7s 0.2s both; }
.timero-wiki-root > div:nth-child(4) { animation: timero-fade-up 0.7s 0.3s both; }
.timero-wiki-root > div:nth-child(5) { animation: timero-fade-up 0.7s 0.4s both; }
.timero-wiki-root > div:nth-child(6) { animation: timero-fade-up 0.7s 0.5s both; }
.timero-wiki-root > div:nth-child(7) { animation: timero-fade-up 0.7s 0.6s both; }
.timero-wiki-root > div:nth-child(8) { animation: timero-fade-up 0.7s 0.7s both; }
/* ── Sidebar hide on main page (optional) ─────────────────────── */
/* Uncomment if you want full-width on main page (requires sidebar removal) */
/*
body.page-Main_Page #mw-panel,
body.page-Main_Page #mw-head-base {
display: none !important;
}
body.page-Main_Page #mw-content-text {
margin: 0 !important;
}
*/
/* ── Link style overrides inside wiki root ────────────────────── */
.timero-wiki-root a {
color: inherit !important;
text-decoration: none !important;
}
.timero-wiki-root a:hover {
text-decoration: none !important;
color: inherit !important;
}
/* ── Responsive grid breakpoints ──────────────────────────────── */
@media (max-width: 900px) {
.timero-wiki-root [style*="grid-template-columns:repeat(4,1fr)"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.timero-wiki-root [style*="grid-template-columns:repeat(3,1fr)"] {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
}
.timero-wiki-root [style*="grid-template-columns:repeat(2,1fr)"] {
display: grid !important;
grid-template-columns: 1fr !important;
}
}
@media (max-width: 600px) {
.timero-wiki-root [style*="grid-template-columns:repeat(4,1fr)"],
.timero-wiki-root [style*="grid-template-columns:repeat(3,1fr)"],
.timero-wiki-root [style*="grid-template-columns:repeat(2,1fr)"] {
display: grid !important;
grid-template-columns: 1fr !important;
}
.timero-wiki-root [style*="padding:64px 48px"],
.timero-wiki-root [style*="padding:56px 48px"],
.timero-wiki-root [style*="padding:52px 48px"],
.timero-wiki-root [style*="padding:48px 48px"] {
padding-left: 20px !important;
padding-right: 20px !important;
}
.timero-hero [style*="display:flex;gap:12px;justify-content:center"] {
flex-direction: column !important;
align-items: center !important;
}
}
/* ── Print: hide decorative elements ─────────────────────────── */
@media print {
.timero-hero [style*="position:absolute"] { display: none !important; }
.timero-wiki-root [style*="background:linear-gradient"] {
background: #f0f0f0 !important;
}
}