MediaWiki:Common.css

From TimeRO Wiki
Revision as of 18:25, 12 April 2026 by Admin (talk | contribs)
Jump to navigation Jump to search

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)
  • Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
  • Opera: Press Ctrl-F5.
/* ═══════════════════════════════════════════════════════════════════
   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;
    }
}
Retrieved from "https://wiki.timero.com.br/index.php?title=MediaWiki:Common.css&oldid=558464"