|
|
| (9 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ============================================================
| |
| ZelocoreCMS Wiki — MediaWiki:Common.css
| |
| Dark Futuristic Theme | Version 1.0
| |
| ============================================================ */
| |
|
| |
|
| /* ── Google Fonts ─────────────────────────────────────────── */ | | /* Hide the page title exclusively on the Main Page */ |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
| | body.page-Main_Page h1#firstHeading, |
| | | body.page-Main_Page .firstHeading, |
| /* ── Design Tokens ────────────────────────────────────────── */
| | body.page-Main_Page .mw-page-title-main { display: none !important; } |
| :root {
| |
| --zc-cyan: #00C8FF;
| |
| --zc-cyan-dim: rgba(0,200,255,0.15);
| |
| --zc-cyan-glow: 0 0 20px rgba(0,200,255,0.4);
| |
| --zc-violet: #7B4FFF;
| |
| --zc-violet-dim: rgba(123,79,255,0.15);
| |
| --zc-violet-glow: 0 0 20px rgba(123,79,255,0.4);
| |
| --zc-emerald: #00E88F;
| |
| --zc-amber: #FFB800;
| |
| --zc-red: #FF4D6A;
| |
| | |
| --zc-bg: #0A0E1A;
| |
| --zc-surface: #111827;
| |
| --zc-surface2: #1A2235;
| |
| --zc-surface3: #1E2D40;
| |
| --zc-border: #1E2D40;
| |
| --zc-border-glow: rgba(0,200,255,0.25);
| |
| | |
| --zc-text: #F0F6FF;
| |
| --zc-text-muted: #7A8FA6;
| |
| --zc-text-dim: #4A6080;
| |
| | |
| --zc-radius: 8px;
| |
| --zc-radius-lg: 14px;
| |
| --zc-radius-xl: 20px;
| |
| --zc-transition: 0.25s ease;
| |
| --zc-font-body: 'Inter', system-ui, sans-serif;
| |
| --zc-font-heading: 'Space Grotesk', 'Inter', sans-serif;
| |
| --zc-font-mono: 'JetBrains Mono', 'Courier New', monospace;
| |
| }
| |
| | |
| /* ── Global Reset & Base ──────────────────────────────────── */
| |
| * { box-sizing: border-box; }
| |
| | |
| html {
| |
| scroll-behavior: smooth;
| |
| scrollbar-width: thin;
| |
| scrollbar-color: var(--zc-cyan-dim) var(--zc-surface);
| |
| }
| |
| | |
| ::-webkit-scrollbar { width: 6px; height: 6px; }
| |
| ::-webkit-scrollbar-track { background: var(--zc-surface); }
| |
| ::-webkit-scrollbar-thumb {
| |
| background: var(--zc-surface3);
| |
| border-radius: 3px;
| |
| }
| |
| ::-webkit-scrollbar-thumb:hover { background: var(--zc-cyan); }
| |
| | |
| body {
| |
| background-color: var(--zc-bg) !important;
| |
| color: var(--zc-text) !important;
| |
| font-family: var(--zc-font-body) !important;
| |
| font-size: 15px;
| |
| line-height: 1.7;
| |
| }
| |
| | |
| /* ── Hex Grid Background Texture ──────────────────────────── */
| |
| body::before {
| |
| content: '';
| |
| position: fixed;
| |
| inset: 0;
| |
| background-image:
| |
| url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='100'%3E%3Cpath d='M28 66L0 50V16L28 0l28 16v34zm0-2L2 50.9V17.1L28 2l26 15.1v33.8z' fill='none' stroke='%231E2D40' stroke-width='0.5'/%3E%3C/svg%3E");
| |
| opacity: 0.4;
| |
| pointer-events: none;
| |
| z-index: 0;
| |
| }
| |
| | |
| /* ── Typography ───────────────────────────────────────────── */
| |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--zc-font-heading) !important;
| |
| color: var(--zc-text) !important;
| |
| line-height: 1.25;
| |
| }
| |
| | |
| #firstHeading, | |
| .mw-page-title-main { | |
| font-size: 2rem !important;
| |
| font-weight: 800 !important;
| |
| background: linear-gradient(135deg, var(--zc-cyan) 0%, var(--zc-violet) 100%);
| |
| -webkit-background-clip: text;
| |
| -webkit-text-fill-color: transparent;
| |
| background-clip: text;
| |
| padding-bottom: 4px;
| |
| }
| |
| | |
| .mw-body-content h2 { | |
| font-size: 1.4rem !important;
| |
| font-weight: 700 !important;
| |
| color: var(--zc-text) !important;
| |
| border-bottom: 2px solid var(--zc-cyan) !important;
| |
| padding-bottom: 6px !important;
| |
| margin-top: 2rem !important;
| |
| }
| |
| | |
| .mw-body-content h2 .mw-headline {
| |
| background: linear-gradient(90deg, var(--zc-cyan), var(--zc-text));
| |
| -webkit-background-clip: text;
| |
| -webkit-text-fill-color: transparent;
| |
| background-clip: text;
| |
| }
| |
| | |
| .mw-body-content h3 {
| |
| font-size: 1.15rem !important;
| |
| font-weight: 700 !important;
| |
| color: var(--zc-cyan) !important;
| |
| margin-top: 1.5rem !important;
| |
| }
| |
| | |
| .mw-body-content h4 { | |
| font-size: 1rem !important;
| |
| font-weight: 600 !important;
| |
| color: var(--zc-text-muted) !important;
| |
| }
| |
| | |
| p { margin-bottom: 1rem; color: var(--zc-text); }
| |
| | |
| /* ── Links ─────────────────────────────────────────────────── */
| |
| a,
| |
| .mw-body-content a {
| |
| color: var(--zc-cyan) !important;
| |
| text-decoration: none !important;
| |
| transition: color var(--zc-transition), text-shadow var(--zc-transition);
| |
| }
| |
| | |
| a:hover,
| |
| .mw-body-content a:hover {
| |
| color: #fff !important;
| |
| text-shadow: 0 0 8px var(--zc-cyan);
| |
| }
| |
| | |
| a.new { color: var(--zc-red) !important; }
| |
| a.new:hover { color: #ff8a9d !important; }
| |
| | |
| /* ── Header / Navbar ─────────────────────────────────────── */
| |
| #mw-head,
| |
| .mw-header {
| |
| background: rgba(10,14,26,0.85) !important;
| |
| backdrop-filter: blur(16px) !important;
| |
| -webkit-backdrop-filter: blur(16px) !important;
| |
| border-bottom: 1px solid var(--zc-border-glow) !important;
| |
| box-shadow: 0 4px 30px rgba(0,0,0,0.5) !important;
| |
| position: sticky !important;
| |
| top: 0 !important;
| |
| z-index: 1000 !important;
| |
| }
| |
| | |
| /* Logo */
| |
| .mw-logo-wordmark,
| |
| .mw-wiki-logo {
| |
| filter: drop-shadow(0 0 8px rgba(0,200,255,0.5));
| |
| }
| |
| | |
| /* ── Search Bar ───────────────────────────────────────────── */
| |
| #searchInput,
| |
| .cdx-text-input__input,
| |
| input[name="search"] {
| |
| background: var(--zc-surface2) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| color: var(--zc-text) !important;
| |
| font-family: var(--zc-font-body) !important;
| |
| transition: border-color var(--zc-transition), box-shadow var(--zc-transition);
| |
| padding: 8px 14px !important;
| |
| }
| |
| | |
| #searchInput:focus,
| |
| .cdx-text-input__input:focus,
| |
| input[name="search"]:focus {
| |
| border-color: var(--zc-cyan) !important;
| |
| box-shadow: var(--zc-cyan-glow) !important;
| |
| outline: none !important;
| |
| }
| |
| | |
| .cdx-search-input__end-button,
| |
| #searchButton, #mw-searchButton {
| |
| background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet)) !important;
| |
| border: none !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| color: #fff !important;
| |
| cursor: pointer !important;
| |
| transition: opacity var(--zc-transition), box-shadow var(--zc-transition);
| |
| }
| |
| #searchButton:hover { opacity: 0.85; box-shadow: var(--zc-cyan-glow) !important; }
| |
| | |
| /* ── Sidebar ──────────────────────────────────────────────── */
| |
| #mw-panel,
| |
| .mw-sidebar,
| |
| nav.vector-menu {
| |
| background: transparent !important;
| |
| }
| |
| | |
| .mw-panel .portal,
| |
| .vector-menu-portal {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| margin-bottom: 12px !important;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .mw-panel .portal h3,
| |
| .vector-menu-heading {
| |
| background: linear-gradient(90deg, var(--zc-surface2), transparent) !important;
| |
| color: var(--zc-cyan) !important;
| |
| font-size: 0.7rem !important;
| |
| font-weight: 700 !important;
| |
| letter-spacing: 0.1em !important;
| |
| text-transform: uppercase !important;
| |
| padding: 8px 14px !important;
| |
| border-bottom: 1px solid var(--zc-border) !important;
| |
| }
| |
| | |
| .mw-panel .portal li a,
| |
| .vector-menu-content-list li a {
| |
| color: var(--zc-text-muted) !important;
| |
| font-size: 0.875rem !important;
| |
| padding: 5px 14px !important;
| |
| display: block;
| |
| border-left: 2px solid transparent;
| |
| transition: all var(--zc-transition);
| |
| }
| |
| | |
| .mw-panel .portal li a:hover,
| |
| .vector-menu-content-list li a:hover {
| |
| color: var(--zc-cyan) !important;
| |
| background: var(--zc-cyan-dim) !important;
| |
| border-left-color: var(--zc-cyan) !important;
| |
| text-shadow: none !important;
| |
| }
| |
| | |
| /* ── Content Area ─────────────────────────────────────────── */
| |
| #mw-content-text,
| |
| .mw-body,
| |
| .mw-body-content {
| |
| background: transparent !important;
| |
| color: var(--zc-text) !important;
| |
| }
| |
| | |
| .mw-body {
| |
| padding: 24px 32px !important;
| |
| }
| |
| | |
| /* ── Tables ───────────────────────────────────────────────── */
| |
| .wikitable,
| |
| .mw-body-content table.wikitable {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| border-collapse: separate !important;
| |
| border-spacing: 0 !important;
| |
| overflow: hidden;
| |
| width: 100%;
| |
| margin: 1.5rem 0 !important;
| |
| }
| |
| | |
| .wikitable th {
| |
| background: linear-gradient(135deg, var(--zc-surface2), var(--zc-surface3)) !important;
| |
| color: var(--zc-cyan) !important;
| |
| font-weight: 700 !important;
| |
| font-size: 0.85rem !important;
| |
| letter-spacing: 0.03em;
| |
| padding: 12px 16px !important;
| |
| border-bottom: 1px solid var(--zc-border-glow) !important;
| |
| border-right: 1px solid var(--zc-border) !important;
| |
| }
| |
| | |
| .wikitable td {
| |
| background: transparent !important;
| |
| color: var(--zc-text) !important;
| |
| padding: 10px 16px !important;
| |
| border-bottom: 1px solid var(--zc-border) !important;
| |
| border-right: 1px solid var(--zc-border) !important;
| |
| }
| |
| | |
| .wikitable tr:nth-child(even) td {
| |
| background: rgba(255,255,255,0.02) !important;
| |
| }
| |
| | |
| .wikitable tr:hover td {
| |
| background: var(--zc-cyan-dim) !important;
| |
| transition: background var(--zc-transition);
| |
| }
| |
| | |
| /* ── Code & Pre ───────────────────────────────────────────── */
| |
| code, tt, kbd {
| |
| font-family: var(--zc-font-mono) !important;
| |
| background: var(--zc-surface2) !important;
| |
| color: var(--zc-cyan) !important;
| |
| padding: 2px 7px !important;
| |
| border-radius: 4px !important;
| |
| font-size: 0.875em !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| }
| |
| | |
| pre,
| |
| .mw-body-content pre {
| |
| font-family: var(--zc-font-mono) !important;
| |
| background: #060a14 !important;
| |
| color: #c9d1d9 !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-left: 3px solid var(--zc-cyan) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 20px !important;
| |
| overflow-x: auto !important;
| |
| font-size: 0.875rem !important;
| |
| line-height: 1.6 !important;
| |
| box-shadow: 0 4px 24px rgba(0,0,0,0.4);
| |
| margin: 1.25rem 0 !important;
| |
| }
| |
| | |
| /* SyntaxHighlight */
| |
| .mw-highlight {
| |
| background: #060a14 !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-left: 3px solid var(--zc-violet) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 0 !important;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .mw-highlight pre {
| |
| border: none !important;
| |
| border-left: none !important;
| |
| margin: 0 !important;
| |
| border-radius: 0 !important;
| |
| }
| |
| | |
| /* ── Infobox ──────────────────────────────────────────────── */
| |
| .infobox,
| |
| table.infobox {
| |
| background: rgba(17,24,39,0.8) !important;
| |
| backdrop-filter: blur(12px) !important;
| |
| border: 1px solid var(--zc-border-glow) !important;
| |
| border-radius: var(--zc-radius-xl) !important;
| |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.05) !important;
| |
| float: right !important;
| |
| margin: 0 0 1.5rem 2rem !important;
| |
| padding: 16px !important;
| |
| width: 280px !important;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .infobox caption,
| |
| table.infobox caption {
| |
| background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet)) !important;
| |
| color: #fff !important;
| |
| font-weight: 700 !important;
| |
| font-size: 1rem !important;
| |
| padding: 10px 16px !important;
| |
| text-align: center !important;
| |
| margin: -16px -16px 12px -16px !important;
| |
| }
| |
| | |
| .infobox th {
| |
| color: var(--zc-text-muted) !important;
| |
| font-size: 0.8rem !important;
| |
| font-weight: 600 !important;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.05em;
| |
| padding: 6px 10px !important;
| |
| background: transparent !important;
| |
| border: none !important;
| |
| }
| |
| | |
| .infobox td {
| |
| color: var(--zc-text) !important;
| |
| font-size: 0.9rem !important;
| |
| padding: 6px 10px !important;
| |
| border: none !important;
| |
| background: transparent !important;
| |
| }
| |
| | |
| /* ── Callout Boxes ────────────────────────────────────────── */
| |
| /* Note */
| |
| .zc-note, .mw-message-box-notice {
| |
| background: rgba(0,200,255,0.08) !important;
| |
| border: 1px solid rgba(0,200,255,0.3) !important;
| |
| border-left: 4px solid var(--zc-cyan) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 14px 18px !important;
| |
| margin: 1rem 0 !important;
| |
| color: var(--zc-text) !important;
| |
| }
| |
| | |
| /* Warning */
| |
| .zc-warning, .mw-message-box-warning {
| |
| background: rgba(255,184,0,0.08) !important;
| |
| border: 1px solid rgba(255,184,0,0.3) !important;
| |
| border-left: 4px solid var(--zc-amber) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 14px 18px !important;
| |
| margin: 1rem 0 !important;
| |
| color: var(--zc-text) !important;
| |
| }
| |
| | |
| /* Tip */
| |
| .zc-tip {
| |
| background: rgba(0,232,143,0.08) !important;
| |
| border: 1px solid rgba(0,232,143,0.3) !important;
| |
| border-left: 4px solid var(--zc-emerald) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 14px 18px !important;
| |
| margin: 1rem 0 !important;
| |
| color: var(--zc-text) !important;
| |
| }
| |
| | |
| /* ── Verified / Official Badge ───────────────────────────── */
| |
| .zc-verified-banner {
| |
| background: linear-gradient(135deg, rgba(0,232,143,0.1), rgba(0,200,255,0.1)) !important;
| |
| border: 1px solid var(--zc-emerald) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| padding: 10px 18px !important;
| |
| margin-bottom: 1.5rem !important;
| |
| display: flex;
| |
| align-items: center;
| |
| gap: 10px;
| |
| font-weight: 600;
| |
| color: var(--zc-emerald) !important;
| |
| box-shadow: 0 0 20px rgba(0,232,143,0.15);
| |
| animation: verifiedPulse 3s ease-in-out infinite;
| |
| }
| |
| | |
| @keyframes verifiedPulse {
| |
| 0%, 100% { box-shadow: 0 0 10px rgba(0,232,143,0.15); }
| |
| 50% { box-shadow: 0 0 25px rgba(0,232,143,0.35); }
| |
| }
| |
| | |
| /* CMS Owner Badge */
| |
| .zc-owner-badge {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| background: linear-gradient(135deg, var(--zc-amber), #ff9f00);
| |
| color: #000 !important;
| |
| font-size: 0.75rem;
| |
| font-weight: 700;
| |
| padding: 2px 10px;
| |
| border-radius: 20px;
| |
| vertical-align: middle;
| |
| margin-left: 8px;
| |
| }
| |
| | |
| /* Developer Badge */
| |
| .zc-dev-badge {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| background: var(--zc-violet-dim);
| |
| border: 1px solid var(--zc-violet);
| |
| color: var(--zc-violet) !important;
| |
| font-size: 0.75rem;
| |
| font-weight: 700;
| |
| padding: 2px 10px;
| |
| border-radius: 20px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| /* Contributor Badge */
| |
| .zc-contrib-badge {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 5px;
| |
| background: var(--zc-cyan-dim);
| |
| border: 1px solid var(--zc-cyan);
| |
| color: var(--zc-cyan) !important;
| |
| font-size: 0.75rem;
| |
| font-weight: 700;
| |
| padding: 2px 10px;
| |
| border-radius: 20px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| /* ── Developer Profile Card ──────────────────────────────── */
| |
| .zc-profile-card {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-xl) !important;
| |
| padding: 28px !important;
| |
| margin-bottom: 2rem !important;
| |
| box-shadow: 0 8px 32px rgba(0,0,0,0.3);
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .zc-profile-card::before {
| |
| content: '';
| |
| position: absolute;
| |
| top: 0; left: 0; right: 0;
| |
| height: 3px;
| |
| background: linear-gradient(90deg, var(--zc-cyan), var(--zc-violet));
| |
| }
| |
| | |
| .zc-profile-avatar {
| |
| width: 80px;
| |
| height: 80px;
| |
| border-radius: 50%;
| |
| border: 3px solid var(--zc-cyan);
| |
| box-shadow: 0 0 20px rgba(0,200,255,0.3);
| |
| }
| |
| | |
| .zc-skill-tag {
| |
| display: inline-block;
| |
| background: var(--zc-surface2);
| |
| border: 1px solid var(--zc-border);
| |
| color: var(--zc-text-muted);
| |
| font-size: 0.8rem;
| |
| font-weight: 500;
| |
| padding: 3px 10px;
| |
| border-radius: 20px;
| |
| margin: 3px;
| |
| transition: all var(--zc-transition);
| |
| }
| |
| | |
| .zc-skill-tag:hover {
| |
| border-color: var(--zc-cyan);
| |
| color: var(--zc-cyan);
| |
| background: var(--zc-cyan-dim);
| |
| }
| |
| | |
| /* ── CMS Card Grid ───────────────────────────────────────── */
| |
| .zc-cms-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
| |
| gap: 16px;
| |
| margin: 1.5rem 0;
| |
| }
| |
| | |
| .zc-cms-card {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| padding: 20px !important;
| |
| transition: all var(--zc-transition);
| |
| cursor: pointer;
| |
| text-decoration: none !important;
| |
| display: block;
| |
| position: relative;
| |
| overflow: hidden;
| |
| }
| |
| | |
| .zc-cms-card::after {
| |
| content: '';
| |
| position: absolute;
| |
| bottom: 0; left: 0; right: 0;
| |
| height: 2px;
| |
| background: linear-gradient(90deg, var(--zc-cyan), var(--zc-violet));
| |
| transform: scaleX(0);
| |
| transform-origin: left;
| |
| transition: transform var(--zc-transition);
| |
| }
| |
| | |
| .zc-cms-card:hover {
| |
| border-color: var(--zc-border-glow) !important;
| |
| box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px var(--zc-cyan-dim) !important;
| |
| transform: translateY(-3px);
| |
| }
| |
| | |
| .zc-cms-card:hover::after { transform: scaleX(1); }
| |
| | |
| /* ── Category Boxes ──────────────────────────────────────── */
| |
| .zc-category-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
| |
| gap: 12px;
| |
| margin: 1.5rem 0;
| |
| }
| |
| | |
| .zc-category-box {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| padding: 20px 16px !important;
| |
| text-align: center;
| |
| transition: all var(--zc-transition);
| |
| cursor: pointer;
| |
| }
| |
| | |
| .zc-category-box:hover {
| |
| border-color: var(--zc-cyan) !important;
| |
| background: var(--zc-cyan-dim) !important;
| |
| box-shadow: var(--zc-cyan-glow) !important;
| |
| transform: translateY(-2px);
| |
| }
| |
| | |
| .zc-category-box .zc-cat-icon {
| |
| font-size: 2rem;
| |
| display: block;
| |
| margin-bottom: 8px;
| |
| }
| |
| | |
| .zc-category-box .zc-cat-label {
| |
| font-size: 0.85rem;
| |
| font-weight: 600;
| |
| color: var(--zc-text-muted);
| |
| }
| |
| | |
| /* ── Buttons ──────────────────────────────────────────────── */
| |
| .zc-btn,
| |
| .mw-ui-button,
| |
| input[type="submit"],
| |
| input[type="button"],
| |
| button.mw-ui-progressive {
| |
| background: linear-gradient(135deg, var(--zc-cyan), #0099cc) !important;
| |
| border: none !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| color: #000 !important;
| |
| font-family: var(--zc-font-body) !important;
| |
| font-weight: 700 !important;
| |
| font-size: 0.9rem !important;
| |
| padding: 9px 22px !important;
| |
| cursor: pointer !important;
| |
| transition: all var(--zc-transition) !important;
| |
| box-shadow: 0 4px 15px rgba(0,200,255,0.3) !important;
| |
| }
| |
| | |
| .zc-btn:hover,
| |
| input[type="submit"]:hover,
| |
| button.mw-ui-progressive:hover {
| |
| box-shadow: 0 6px 25px rgba(0,200,255,0.5) !important;
| |
| transform: translateY(-1px);
| |
| filter: brightness(1.1);
| |
| }
| |
| | |
| .zc-btn-outline {
| |
| background: transparent !important;
| |
| border: 1px solid var(--zc-cyan) !important;
| |
| color: var(--zc-cyan) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| .zc-btn-outline:hover {
| |
| background: var(--zc-cyan-dim) !important;
| |
| box-shadow: var(--zc-cyan-glow) !important;
| |
| }
| |
| | |
| .zc-btn-violet {
| |
| background: linear-gradient(135deg, var(--zc-violet), #5533cc) !important;
| |
| color: #fff !important;
| |
| box-shadow: 0 4px 15px rgba(123,79,255,0.3) !important;
| |
| }
| |
| | |
| /* ── Table of Contents ───────────────────────────────────── */
| |
| #toc, .toc {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| padding: 16px 20px !important;
| |
| box-shadow: 0 4px 20px rgba(0,0,0,0.2);
| |
| }
| |
| | |
| #toc h2, .toc h2 {
| |
| font-size: 0.85rem !important;
| |
| font-weight: 700 !important;
| |
| letter-spacing: 0.08em !important;
| |
| text-transform: uppercase !important;
| |
| color: var(--zc-text-muted) !important;
| |
| background: none !important;
| |
| -webkit-text-fill-color: var(--zc-text-muted) !important;
| |
| border: none !important;
| |
| padding: 0 0 8px 0 !important;
| |
| margin: 0 0 8px 0 !important;
| |
| }
| |
| | |
| #toc li, .toc li {
| |
| font-size: 0.875rem !important;
| |
| line-height: 1.8 !important;
| |
| }
| |
| | |
| #toc a, .toc a {
| |
| color: var(--zc-text-muted) !important;
| |
| }
| |
| | |
| #toc a:hover, .toc a:hover {
| |
| color: var(--zc-cyan) !important;
| |
| }
| |
| | |
| /* ── Version / License Badges ────────────────────────────── */
| |
| .zc-version-badge {
| |
| display: inline-block;
| |
| background: var(--zc-surface2);
| |
| border: 1px solid var(--zc-border);
| |
| color: var(--zc-cyan);
| |
| font-family: var(--zc-font-mono);
| |
| font-size: 0.75rem;
| |
| font-weight: 500;
| |
| padding: 2px 8px;
| |
| border-radius: 4px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| .zc-license-badge {
| |
| display: inline-block;
| |
| background: var(--zc-violet-dim);
| |
| border: 1px solid var(--zc-violet);
| |
| color: var(--zc-violet);
| |
| font-size: 0.75rem;
| |
| font-weight: 600;
| |
| padding: 2px 8px;
| |
| border-radius: 4px;
| |
| vertical-align: middle;
| |
| }
| |
| | |
| /* ── Stats Counter Cards ─────────────────────────────────── */
| |
| .zc-stats-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, 1fr);
| |
| gap: 16px;
| |
| margin: 2rem 0;
| |
| }
| |
| | |
| .zc-stat-card {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| padding: 20px !important;
| |
| text-align: center;
| |
| }
| |
| | |
| .zc-stat-number {
| |
| font-size: 2rem;
| |
| font-weight: 800;
| |
| font-family: var(--zc-font-heading);
| |
| background: linear-gradient(135deg, var(--zc-cyan), var(--zc-violet));
| |
| -webkit-background-clip: text;
| |
| -webkit-text-fill-color: transparent;
| |
| background-clip: text;
| |
| display: block;
| |
| }
| |
| | |
| .zc-stat-label {
| |
| font-size: 0.8rem;
| |
| color: var(--zc-text-muted);
| |
| font-weight: 500;
| |
| text-transform: uppercase;
| |
| letter-spacing: 0.05em;
| |
| }
| |
| | |
| /* ── Footer ───────────────────────────────────────────────── */
| |
| #footer,
| |
| .mw-footer {
| |
| background: var(--zc-surface) !important;
| |
| border-top: 1px solid var(--zc-border) !important;
| |
| color: var(--zc-text-muted) !important;
| |
| padding: 32px !important;
| |
| margin-top: 4rem !important;
| |
| }
| |
| | |
| #footer a, .mw-footer a {
| |
| color: var(--zc-text-muted) !important;
| |
| }
| |
| | |
| #footer a:hover, .mw-footer a:hover {
| |
| color: var(--zc-cyan) !important;
| |
| text-shadow: none !important;
| |
| }
| |
| | |
| /* ── Edit / Diff Pages ───────────────────────────────────── */
| |
| .mw-editnotice { background: var(--zc-surface2) !important; border-radius: var(--zc-radius) !important; }
| |
| textarea#wpTextbox1 {
| |
| background: #060a14 !important;
| |
| color: var(--zc-text) !important;
| |
| border: 1px solid var(--zc-border) !important;
| |
| border-radius: var(--zc-radius) !important;
| |
| font-family: var(--zc-font-mono) !important;
| |
| font-size: 0.9rem !important;
| |
| padding: 16px !important;
| |
| }
| |
| textarea#wpTextbox1:focus {
| |
| border-color: var(--zc-cyan) !important;
| |
| box-shadow: var(--zc-cyan-glow) !important;
| |
| outline: none !important;
| |
| }
| |
| | |
| .diff-addedline { background: rgba(0,232,143,0.08) !important; }
| |
| .diff-deletedline { background: rgba(255,77,106,0.08) !important; }
| |
| .diffchange { background: rgba(0,200,255,0.15) !important; }
| |
| | |
| /* ── Recent Changes ──────────────────────────────────────── */
| |
| .mw-changeslist-line {
| |
| border-bottom: 1px solid var(--zc-border) !important;
| |
| padding: 6px 0 !important;
| |
| }
| |
| | |
| /* ── Notifications (Echo) ────────────────────────────────── */
| |
| .oo-ui-popupWidget {
| |
| background: var(--zc-surface) !important;
| |
| border: 1px solid var(--zc-border-glow) !important;
| |
| border-radius: var(--zc-radius-lg) !important;
| |
| box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
| |
| }
| |
| | |
| /* ── Page Action Tabs ────────────────────────────────────── */
| |
| #p-views .selected a,
| |
| .vector-tab-noaction.selected a {
| |
| color: var(--zc-cyan) !important;
| |
| border-bottom: 2px solid var(--zc-cyan) !important;
| |
| }
| |
| | |
| /* ── Responsive ──────────────────────────────────────────── */
| |
| @media (max-width: 768px) {
| |
| .zc-stats-grid { grid-template-columns: repeat(2, 1fr); }
| |
| .zc-cms-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
| |
| .zc-category-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
| |
| .infobox { float: none !important; width: 100% !important; margin: 0 0 1.5rem 0 !important; }
| |
| .mw-body { padding: 16px !important; }
| |
| }
| |
| | |
| /* ── Animations ──────────────────────────────────────────── */
| |
| @keyframes fadeInUp {
| |
| from { opacity: 0; transform: translateY(20px); }
| |
| to { opacity: 1; transform: translateY(0); }
| |
| }
| |
| | |
| @keyframes glowPulse {
| |
| 0%, 100% { box-shadow: 0 0 10px rgba(0,200,255,0.2); }
| |
| 50% { box-shadow: 0 0 30px rgba(0,200,255,0.5); }
| |
| }
| |
| | |
| .mw-body-content { animation: fadeInUp 0.4s ease forwards; }
| |
| | |
| /* ── Print Styles ────────────────────────────────────────── */
| |
| @media print {
| |
| body { background: #fff !important; color: #000 !important; }
| |
| #mw-head, #mw-panel, #footer { display: none !important; }
| |
| a { color: #0066cc !important; }
| |
| pre, code { background: #f5f5f5 !important; color: #333 !important; }
| |
| } | |
