|
|
| (13 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* ============================================================ | | /* ════════════════════════════════════════════════════════════════════ |
| ZelocoreCMS Wiki — MediaWiki:Common.css | | ZelocoreCMS Wiki — MediaWiki:Common.css v4.0 |
| Wikipedia-style Classic Light Theme | | Wikipedia-style layout with modern card polish |
| ============================================================ */ | | ════════════════════════════════════════════════════════════════════ */ |
|
| |
|
| /* ── Google Fonts ─────────────────────────────────────────── */ | | /* ── GLOBAL: Hide Main Page title ──────────────────────────────────── */ |
| @import url('https://fonts.googleapis.com/css2?family=Linux+Libertine+O&family=Source+Sans+3:wght@300;400;600;700&family=Source+Serif+4:wght@400;600&family=JetBrains+Mono:wght@400;500&display=swap');
| | body.page-Main_Page h1#firstHeading, |
| | body.page-Main_Page .firstHeading, |
| | body.page-Main_Page .mw-page-title-main { display: none !important; } |
|
| |
|
| /* ── Design Tokens ────────────────────────────────────────── */ | | /* ── GLOBAL: Better wikitable ──────────────────────────────────────── */ |
| :root {
| | table.wikitable { |
| --wp-bg: #f8f9fa; | | border-radius: 8px; |
| --wp-white: #ffffff; | | overflow: hidden; |
| --wp-border: #a2a9b1; | | border-collapse: separate; |
| --wp-border-light: #eaecf0; | | border-spacing: 0; |
| --wp-blue: #3366cc; | | border: 1px solid #e2e8f0; |
| --wp-blue-visited: #6b4ba1;
| | box-shadow: 0 2px 8px rgba(37,99,235,.06); |
| --wp-blue-light: #eaf3fb;
| | width: 100%; |
| --wp-blue-header: #cee0f2;
| |
| --wp-red: #cc0000;
| |
| --wp-green: #14866d;
| |
| --wp-yellow-light: #fef6e7;
| |
| --wp-yellow-border:#f0c93a;
| |
| --wp-text: #202122;
| |
| --wp-text-muted: #54595d;
| |
| --wp-text-small: #72777d; | |
| --wp-heading: #000000;
| |
| --wp-accent: #0088cc;
| |
| --zc-cyan: #00a8cc;
| |
| --zc-teal: #006e8a;
| |
| --wp-font-serif: 'Linux Libertine O', 'Linux Libertine', Georgia, 'Times New Roman', serif;
| |
| --wp-font-sans: 'Source Sans 3', -apple-system, 'Helvetica Neue', Arial, sans-serif; | |
| --wp-font-mono: 'JetBrains Mono', 'Courier New', monospace;
| |
| } | | } |
| | | table.wikitable th { |
| /* ── Base ─────────────────────────────────────────────────── */
| | background: linear-gradient(90deg, #1e1b4b, #2563eb) !important; |
| * { box-sizing: border-box; }
| | color: #ffffff !important; |
| | |
| html {
| |
| scroll-behavior: smooth; | |
| scrollbar-width: thin;
| |
| scrollbar-color: #c8ccd1 #f8f9fa;
| |
| }
| |
| | |
| ::-webkit-scrollbar { width: 8px; }
| |
| ::-webkit-scrollbar-track { background: #f8f9fa; }
| |
| ::-webkit-scrollbar-thumb { background: #c8ccd1; border-radius: 4px; }
| |
| ::-webkit-scrollbar-thumb:hover { background: #a2a9b1; }
| |
| | |
| body {
| |
| background-color: var(--wp-bg) !important;
| |
| color: var(--wp-text) !important;
| |
| font-family: var(--wp-font-sans) !important;
| |
| font-size: 14px;
| |
| line-height: 1.6;
| |
| }
| |
| | |
| /* ── Typography ───────────────────────────────────────────── */
| |
| h1, h2, h3, h4, h5, h6 {
| |
| font-family: var(--wp-font-sans) !important;
| |
| color: var(--wp-heading) !important; | |
| font-weight: 700; | | font-weight: 700; |
| line-height: 1.3;
| | border: none !important; |
| }
| | padding: 10px 12px !important; |
| | |
| #firstHeading,
| |
| .mw-page-title-main {
| |
| font-family: var(--wp-font-sans) !important;
| |
| font-size: 1.95em !important;
| |
| font-weight: normal !important;
| |
| color: var(--wp-heading) !important;
| |
| border-bottom: 1px solid var(--wp-border) !important; | |
| padding-bottom: 3px !important;
| |
| margin-bottom: 0.6em !important;
| |
| -webkit-text-fill-color: var(--wp-heading) !important;
| |
| background: none !important;
| |
| }
| |
| | |
| .mw-body-content h2 {
| |
| font-size: 1.5em !important;
| |
| font-weight: normal !important;
| |
| color: var(--wp-heading) !important;
| |
| border-bottom: 1px solid var(--wp-border) !important;
| |
| padding-bottom: 2px !important; | |
| margin-top: 1.5em !important;
| |
| margin-bottom: 0.5em !important;
| |
| }
| |
| | |
| .mw-body-content h2 .mw-headline {
| |
| background: none !important;
| |
| -webkit-text-fill-color: var(--wp-heading) !important;
| |
| color: var(--wp-heading) !important;
| |
| }
| |
| | |
| .mw-body-content h3 {
| |
| font-size: 1.2em !important;
| |
| font-weight: bold !important;
| |
| color: var(--wp-heading) !important;
| |
| } | | } |
| | | table.wikitable td { |
| .mw-body-content h4 { | |
| font-size: 1em !important;
| |
| font-weight: bold !important;
| |
| color: var(--wp-heading) !important;
| |
| }
| |
| | |
| p { color: var(--wp-text); margin-bottom: 0.8em; }
| |
| | |
| /* ── Links ─────────────────────────────────────────────────── */
| |
| a,
| |
| .mw-body-content a {
| |
| color: var(--wp-blue) !important;
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| a:hover,
| |
| .mw-body-content a:hover {
| |
| text-decoration: underline !important;
| |
| color: var(--wp-blue) !important;
| |
| text-shadow: none !important;
| |
| }
| |
| | |
| a:visited,
| |
| .mw-body-content a:visited {
| |
| color: var(--wp-blue-visited) !important;
| |
| }
| |
| | |
| a.new,
| |
| .mw-body-content a.new {
| |
| color: #cc2200 !important;
| |
| }
| |
| | |
| a.new:visited { color: #a55858 !important; }
| |
| | |
| /* ── Header / Navbar ─────────────────────────────────────── */
| |
| #mw-head,
| |
| .mw-header {
| |
| background: var(--wp-white) !important;
| |
| border-bottom: 1px solid var(--wp-border-light) !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| /* ── Search Bar ───────────────────────────────────────────── */
| |
| #searchInput,
| |
| .cdx-text-input__input,
| |
| input[name="search"] {
| |
| background: var(--wp-white) !important;
| |
| border: 1px solid var(--wp-border) !important;
| |
| border-radius: 2px !important;
| |
| color: var(--wp-text) !important;
| |
| font-family: var(--wp-font-sans) !important;
| |
| font-size: 13px !important;
| |
| padding: 6px 10px !important;
| |
| transition: border-color 0.15s !important;
| |
| box-shadow: none !important;
| |
| }
| |
| | |
| #searchInput:focus,
| |
| .cdx-text-input__input:focus,
| |
| input[name="search"]:focus {
| |
| border-color: var(--wp-blue) !important;
| |
| box-shadow: 0 0 0 2px rgba(51,102,204,0.15) !important;
| |
| outline: none !important;
| |
| }
| |
| | |
| #searchButton, #mw-searchButton,
| |
| .cdx-search-input__end-button {
| |
| background: var(--wp-blue) !important;
| |
| border: 1px solid #2a4b8d !important;
| |
| border-radius: 2px !important;
| |
| color: #fff !important;
| |
| font-size: 13px !important;
| |
| padding: 6px 14px !important;
| |
| cursor: pointer !important;
| |
| font-family: var(--wp-font-sans) !important;
| |
| }
| |
| | |
| #searchButton:hover { background: #2a4b8d !important; }
| |
| | |
| /* ── Sidebar ──────────────────────────────────────────────── */
| |
| #mw-panel,
| |
| .mw-sidebar,
| |
| nav.vector-menu {
| |
| background: transparent !important;
| |
| }
| |
| | |
| .mw-panel .portal,
| |
| .vector-menu-portal {
| |
| background: transparent !important;
| |
| border: none !important; | | border: none !important; |
| border-radius: 0 !important; | | border-bottom: 1px solid #f1f5f9 !important; |
| margin-bottom: 8px !important; | | padding: 8px 12px !important; |
| | vertical-align: middle !important; |
| } | | } |
| | table.wikitable tr:hover td { background: #eff6ff !important; } |
| | table.wikitable tr:last-child td { border-bottom: none !important; } |
|
| |
|
| .mw-panel .portal h3,
| | /* ── GLOBAL: Code blocks ───────────────────────────────────────────── */ |
| .vector-menu-heading {
| | code, tt, kbd { |
| background: transparent !important; | | background: #f1f5f9; |
| color: var(--wp-text-muted) !important; | | border: 1px solid #e2e8f0; |
| font-size: 0.8em !important; | | border-radius: 4px; |
| font-weight: bold !important;
| | padding: 1px 6px; |
| letter-spacing: 0 !important;
| | font-size: .88em; |
| text-transform: uppercase !important;
| | color: #7c3aed; |
| padding: 4px 0 2px 0 !important; | |
| border-bottom: 1px solid var(--wp-border-light) !important; | |
| margin-bottom: 4px !important; | |
| } | | } |
| | | pre { |
| .mw-panel .portal li a,
| | background: #0f172a; |
| .vector-menu-content-list li a {
| | color: #e2e8f0; |
| color: var(--wp-blue) !important; | | border: 1px solid #334155; |
| font-size: 0.875em !important; | | border-radius: 8px; |
| padding: 2px 0 !important; | | padding: 16px 18px; |
| display: block;
| | font-size: .875em; |
| border-left: none !important; | | line-height: 1.6; |
| background: transparent !important; | | overflow-x: auto; |
| | position: relative; |
| } | | } |
|
| |
|
| .mw-panel .portal li a:hover,
| | /* ── GLOBAL: Heading styles ────────────────────────────────────────── */ |
| .vector-menu-content-list li a:hover {
| | #mw-content-text h2 { |
| color: var(--wp-blue) !important; | | border-bottom: 2px solid #2563eb; |
| background: transparent !important;
| | padding-bottom: 4px; |
| text-decoration: underline !important; | | margin-top: 1.5em; |
| border-left: none !important; | | color: #1e1b4b; |
| text-shadow: none !important; | |
| } | | } |
| | #mw-content-text h3 { color: #2563eb; } |
|
| |
|
| /* ── Content Area ─────────────────────────────────────────── */ | | /* ── GLOBAL: Template callout boxes ────────────────────────────────── */ |
| #mw-content-text, | | .cms-note { background: #eff6ff; border-left: 4px solid #2563eb; border-radius: 8px; padding: 12px 16px; margin: 14px 0; color: #1e3a5f; font-size: .92em; } |
| .mw-body, | | .cms-warning { background: #fff7ed; border-left: 4px solid #f59e0b; border-radius: 8px; padding: 12px 16px; margin: 14px 0; color: #7c2d12; font-size: .92em; } |
| .mw-body-content { | | .cms-tip { background: #f0fdf4; border-left: 4px solid #059669; border-radius: 8px; padding: 12px 16px; margin: 14px 0; color: #064e3b; font-size: .92em; } |
| background: var(--wp-white) !important;
| | .cms-stub { background: #fefce8; border: 1px solid #fde047; border-radius: 8px; padding: 10px 14px; margin: 16px 0; color: #713f12; font-size: .88em; } |
| color: var(--wp-text) !important;
| |
| } | |
|
| |
|
| .mw-body {
| | /* ── GLOBAL: Fixed utility buttons ─────────────────────────────────── */ |
| background: var(--wp-white) !important; | | #cms-dark-toggle { |
| border: none !important; | | position: fixed; bottom: 80px; right: 18px; |
| padding: 20px !important; | | width: 42px; height: 42px; |
| | background: #1e1b4b; color: #fff; |
| | border: none; border-radius: 50%; |
| | font-size: 1.2em; cursor: pointer; |
| | box-shadow: 0 4px 16px rgba(0,0,0,.3); |
| | z-index: 9999; |
| } | | } |
| | | #cms-back-top { |
| /* ── Tables (Wikipedia wikitable style) ───────────────────── */
| | position: fixed; bottom: 24px; right: 18px; |
| .wikitable,
| | width: 42px; height: 42px; |
| .mw-body-content table.wikitable {
| | background: #2563eb; color: #fff; |
| background: var(--wp-white) !important; | | border: none; border-radius: 50%; |
| border: 1px solid var(--wp-border) !important; | | font-size: 1.2em; cursor: pointer; |
| border-collapse: collapse !important; | | box-shadow: 0 4px 16px rgba(37,99,235,.4); |
| border-radius: 0 !important; | | z-index: 9999; opacity: 0; pointer-events: none; |
| margin: 1em 0 !important; | |
| font-size: 0.9em;
| |
| } | | } |
| | | #cms-back-top.visible { opacity: 1; pointer-events: all; } |
| .wikitable th { | | #cms-progress { |
| background: var(--wp-blue-header) !important;
| | position: fixed; top: 0; left: 0; |
| color: var(--wp-text) !important; | | height: 3px; width: 0%; |
| font-weight: bold !important;
| | background: linear-gradient(90deg, #2563eb, #7c3aed); |
| font-size: 1em !important; | | z-index: 99999; |
| padding: 5px 8px !important;
| |
| border: 1px solid var(--wp-border) !important; | |
| letter-spacing: 0; | |
| } | | } |
| | | #cms-helpful { |
| .wikitable td {
| | background: #f8fafc; border: 1px solid #e2e8f0; |
| background: var(--wp-white) !important; | | border-radius: 10px; padding: 14px 18px; |
| color: var(--wp-text) !important; | | margin: 24px 0 8px; font-size: .9em; color: #334155; |
| padding: 5px 8px !important;
| |
| border: 1px solid var(--wp-border) !important; | |
| } | | } |
| | | .cms-helpful-btn { |
| .wikitable tr:nth-child(even) td { | | background: #fff; border: 1.5px solid #e2e8f0; |
| background: var(--wp-bg) !important; | | border-radius: 20px; padding: 5px 16px; |
| | cursor: pointer; font-size: .88em; font-weight: 600; margin: 0 4px; |
| } | | } |
|
| |
|
| .wikitable tr:hover td {
| | /* ══════════════════════════════════════════════════════════════════════ |
| background: var(--wp-blue-light) !important;
| | MAIN PAGE — Wikipedia-style layout (scoped to body.page-Main_Page) |
| }
| | ══════════════════════════════════════════════════════════════════════ */ |
|
| |
|
| /* Sortable tables */ | | /* ── Top welcome banner ────────────────────────────────────────────── */ |
| .wikitable.sortable th { | | body.page-Main_Page #mp-topbanner { |
| cursor: pointer; | | background: #cee0f2; |
| | border: 1px solid #a2a9b1; |
| | border-radius: 0; |
| | padding: 8px 16px; |
| | margin-bottom: 14px; |
| | text-align: center; |
| | font-size: 1em; |
| | color: #202122; |
| | line-height: 1.5; |
| } | | } |
| | body.page-Main_Page #mp-topbanner a { color: #3366cc; } |
|
| |
|
| /* ── Code & Pre ───────────────────────────────────────────── */ | | /* ── Two-column layout — Wikipedia proportions ─────────────────────── */ |
| code, tt, kbd {
| | body.page-Main_Page #mp-upper { |
| font-family: var(--wp-font-mono) !important;
| | display: flex; |
| background: var(--wp-bg) !important;
| | flex-wrap: wrap; |
| color: var(--wp-text) !important;
| | gap: 14px; |
| padding: 1px 5px !important;
| | margin-bottom: 14px; |
| border-radius: 2px !important;
| | align-items: flex-start; |
| font-size: 0.875em !important;
| |
| border: 1px solid var(--wp-border-light) !important;
| |
| }
| |
| | |
| pre,
| |
| .mw-body-content pre {
| |
| font-family: var(--wp-font-mono) !important; | |
| background: var(--wp-bg) !important; | |
| color: var(--wp-text) !important;
| |
| border: 1px solid var(--wp-border) !important; | |
| border-left: 3px solid var(--wp-border) !important; | |
| border-radius: 0 !important;
| |
| padding: 1em !important; | |
| overflow-x: auto !important;
| |
| font-size: 0.875em !important;
| |
| line-height: 1.5 !important;
| |
| margin: 0.8em 0 !important;
| |
| } | | } |
| | body.page-Main_Page #mp-left { flex: 1 1 58%; min-width: 300px; } |
| | body.page-Main_Page #mp-right { flex: 1 1 35%; min-width: 260px; } |
|
| |
|
| /* SyntaxHighlight */ | | /* ── Content cards — Wikipedia-box style ───────────────────────────── */ |
| .mw-highlight { | | body.page-Main_Page .mp-card { |
| background: var(--wp-bg) !important; | | background: #ffffff; |
| border: 1px solid var(--wp-border) !important; | | border: 1px solid #a2a9b1; |
| border-radius: 0 !important; | | border-radius: 4px; |
| padding: 0 !important; | | margin-bottom: 14px; |
| overflow: hidden; | | overflow: hidden; |
| } | | } |
| .mw-highlight pre { border: none !important; border-left: none !important; margin: 0 !important; } | | body.page-Main_Page .mp-card-header { |
| | | padding: 6px 12px; |
| /* ── Wikipedia-style Infobox ──────────────────────────────── */
| | font-weight: bold; |
| .infobox,
| | font-size: .95em; |
| table.infobox {
| | border-bottom: 1px solid #a2a9b1; |
| background: var(--wp-white) !important; | |
| border: 1px solid var(--wp-border) !important; | |
| border-collapse: collapse !important;
| |
| float: right !important;
| |
| margin: 0 0 1em 1.5em !important;
| |
| padding: 0 !important;
| |
| width: 22em !important;
| |
| font-size: 88% !important; | |
| line-height: 1.5 !important;
| |
| box-shadow: none !important; | |
| backdrop-filter: none !important;
| |
| } | | } |
| | body.page-Main_Page .mp-card-header-blue { background: #cee0f2; color: #202122; } |
| | body.page-Main_Page .mp-card-header-yellow { background: #fef6e7; color: #202122; } |
| | body.page-Main_Page .mp-card-header-green { background: #d5f5e3; color: #202122; } |
| | body.page-Main_Page .mp-card-header-purple { background: #e8d5f5; color: #202122; } |
| | body.page-Main_Page .mp-card-header-gray { background: #eaecf0; color: #202122; } |
| | body.page-Main_Page .mp-card-body { padding: 10px 12px; font-size: .9em; line-height: 1.65; color: #202122; } |
| | body.page-Main_Page .mp-card-body ul { margin: 0; padding-left: 1.4em; } |
| | body.page-Main_Page .mp-card-body li { margin-bottom: 4px; } |
|
| |
|
| .infobox caption,
| | /* ── Category cards inside Browse box ──────────────────────────────── */ |
| table.infobox caption {
| | body.page-Main_Page .mp-cat-grid { |
| background: var(--wp-blue-header) !important;
| | display: flex; |
| color: var(--wp-text) !important;
| | flex-wrap: wrap; |
| font-weight: bold !important; | | gap: 8px; |
| font-size: 1.1em !important; | | margin-top: 4px; |
| padding: 6px 10px !important;
| |
| text-align: center !important; | |
| margin: 0 !important; | |
| border-bottom: 1px solid var(--wp-border) !important;
| |
| } | | } |
| | | body.page-Main_Page .mp-cat-card { |
| .infobox th { | | flex: 1 1 120px; |
| background: var(--wp-bg) !important;
| | border-radius: 6px; |
| color: var(--wp-text) !important; | | padding: 10px 8px; |
| font-size: 1em !important; | | text-align: center; |
| font-weight: bold !important; | | border: 1px solid #c8ccd1; |
| padding: 4px 6px !important; | | transition: transform .18s, box-shadow .18s; |
| border: 1px solid var(--wp-border) !important; | |
| text-transform: none; | |
| letter-spacing: 0;
| |
| } | | } |
| | | body.page-Main_Page .mp-cat-card:hover { |
| .infobox td { | | transform: translateY(-3px); |
| background: var(--wp-white) !important;
| | box-shadow: 0 4px 12px rgba(0,0,0,.12); |
| color: var(--wp-text) !important; | |
| padding: 4px 6px !important; | |
| border: 1px solid var(--wp-border) !important;
| |
| font-size: 1em !important;
| |
| } | | } |
| | | body.page-Main_Page .mp-cat-card a { |
| /* ── Table of Contents ────────────────────────────────────── */
| | display: flex; |
| #toc, .toc {
| | flex-direction: column; |
| background: var(--wp-bg) !important;
| | align-items: center; |
| border: 1px solid var(--wp-border) !important; | | gap: 3px; |
| border-radius: 0 !important; | | text-decoration: none !important; |
| padding: 10px 16px !important; | | color: inherit !important; |
| display: inline-block; | |
| min-width: 180px; | |
| box-shadow: none !important; | |
| } | | } |
| | body.page-Main_Page .mp-cat-icon { font-size: 1.8em; line-height: 1; display: block; } |
| | body.page-Main_Page .mp-cat-name { font-size: .82em; font-weight: bold; display: block; margin-top: 3px; color: #202122; } |
| | body.page-Main_Page .mp-cat-desc { font-size: .7em; color: #54595d; display: block; line-height: 1.2; } |
|
| |
|
| #toc h2, .toc h2 { | | /* Card colour themes */ |
| font-size: 1em !important;
| | body.page-Main_Page .mp-cat-blogging { background: linear-gradient(135deg,#fef3c7,#fde68a); border-color: #c8a000; } |
| font-weight: bold !important; | | body.page-Main_Page .mp-cat-headless { background: linear-gradient(135deg,#ede9fe,#ddd6fe); border-color: #6d28d9; } |
| text-align: center !important;
| | body.page-Main_Page .mp-cat-ecommerce { background: linear-gradient(135deg,#dcfce7,#bbf7d0); border-color: #059669; } |
| letter-spacing: 0 !important;
| | body.page-Main_Page .mp-cat-enterprise { background: linear-gradient(135deg,#dbeafe,#bfdbfe); border-color: #2563eb; } |
| text-transform: none !important;
| | body.page-Main_Page .mp-cat-opensource { background: linear-gradient(135deg,#fee2e2,#fecaca); border-color: #dc2626; } |
| color: var(--wp-text) !important;
| | body.page-Main_Page .mp-cat-saas { background: linear-gradient(135deg,#e0f2fe,#bae6fd); border-color: #0891b2; } |
| background: none !important;
| | body.page-Main_Page .mp-cat-wiki { background: linear-gradient(135deg,#f0fdf4,#dcfce7); border-color: #16a34a; } |
| -webkit-text-fill-color: var(--wp-text) !important;
| | body.page-Main_Page .mp-cat-all { background: linear-gradient(135deg,#f1f5f9,#e2e8f0); border-color: #64748b; } |
| border: none !important;
| |
| padding: 0 0 6px 0 !important;
| |
| margin: 0 0 4px 0 !important;
| |
| } | |
|
| |
|
| #toc li, .toc li { | | /* ── Portal grid — "Other areas" section ───────────────────────────── */ |
| font-size: 0.875em !important; | | body.page-Main_Page #mp-portals { |
| line-height: 1.7 !important; | | background: #ffffff; |
| | border: 1px solid #a2a9b1; |
| | border-radius: 4px; |
| | margin-top: 14px; |
| | overflow: hidden; |
| } | | } |
| | | body.page-Main_Page #mp-portals-header { |
| #toc a, .toc a { color: var(--wp-blue) !important; }
| | background: #cee0f2; |
| #toc a:hover, .toc a:hover { text-decoration: underline !important; } | | border-bottom: 1px solid #a2a9b1; |
| | | padding: 6px 12px; |
| /* ── Wikipedia-style Article Message Boxes ────────────────── */
| | font-weight: bold; |
| .zc-note, .mw-message-box-notice {
| | font-size: .95em; |
| background: #eaf3fb !important; | | color: #202122; |
| border: 1px solid #36c !important; | |
| border-left: 4px solid #36c !important;
| |
| border-radius: 0 !important;
| |
| padding: 8px 12px !important; | |
| margin: 0.8em 0 !important; | |
| font-size: 0.9em !important; | |
| color: var(--wp-text) !important; | |
| } | | } |
| | | body.page-Main_Page .mp-portal-grid { |
| .zc-warning, .mw-message-box-warning { | | display: flex; |
| background: #fef6e7 !important; | | flex-wrap: wrap; |
| border: 1px solid #f0c93a !important; | | background: #ffffff; |
| border-left: 4px solid #f0c93a !important; | |
| border-radius: 0 !important;
| |
| padding: 8px 12px !important;
| |
| margin: 0.8em 0 !important;
| |
| font-size: 0.9em !important;
| |
| color: var(--wp-text) !important;
| |
| } | | } |
| | | body.page-Main_Page .mp-portal-cell { |
| .zc-tip { | | flex: 1 1 140px; |
| background: #f3fbef !important; | | border-right: 1px solid #eaecf0; |
| border: 1px solid #36a73a !important; | | border-bottom: 1px solid #eaecf0; |
| border-left: 4px solid #36a73a !important; | | padding: 12px 8px; |
| border-radius: 0 !important;
| | text-align: center; |
| padding: 8px 12px !important; | | font-size: .85em; |
| margin: 0.8em 0 !important; | | transition: background .15s; |
| font-size: 0.9em !important; | |
| color: var(--wp-text) !important; | |
| } | | } |
| | body.page-Main_Page .mp-portal-cell:hover { background: #eaf3fb; } |
| | body.page-Main_Page .mp-portal-cell a { color: #3366cc !important; font-weight: bold; display: block; text-decoration: none; } |
| | body.page-Main_Page .mp-portal-icon { font-size: 1.8em; display: block; margin-bottom: 4px; } |
| | body.page-Main_Page .mp-portal-desc { display: block; color: #54595d; font-size: .8em; margin-top: 2px; font-weight: normal; } |
|
| |
|
| /* ── Official Verified Banner ─────────────────────────────── */ | | /* ── Contribute CTA ────────────────────────────────────────────────── */ |
| .zc-verified-banner { | | body.page-Main_Page #mp-contribute { |
| background: #f3fbf7 !important; | | background: linear-gradient(135deg, #059669, #065f46); |
| border: 1px solid #14866d !important;
| | border-radius: 4px; |
| border-left: 4px solid #14866d !important; | | padding: 20px 20px; |
| padding: 8px 12px !important; | | text-align: center; |
| margin-bottom: 1em !important; | | margin-top: 14px; |
| display: flex;
| | color: #ffffff; |
| align-items: center;
| |
| gap: 10px; | |
| font-weight: normal;
| |
| color: var(--wp-text) !important; | |
| box-shadow: none !important;
| |
| animation: none !important;
| |
| border-radius: 0 !important;
| |
| } | | } |
| | | body.page-Main_Page #mp-contribute-title { font-size: 1.15em; font-weight: bold; color: #ffffff; margin-bottom: 8px; } |
| /* ── Badges ───────────────────────────────────────────────── */
| | body.page-Main_Page #mp-contribute-desc { color: rgba(255,255,255,.9); margin-bottom: 14px; font-size: .92em; line-height: 1.55; } |
| .zc-owner-badge { | | body.page-Main_Page #mp-contribute a { |
| display: inline-block; | | display: inline-block; |
| background: #14866d; | | background: #ffffff; |
| color: #fff !important; | | color: #065f46 !important; |
| font-size: 0.75em; | | border-radius: 20px; |
| | padding: 7px 18px; |
| font-weight: bold; | | font-weight: bold; |
| padding: 1px 6px; | | font-size: .9em; |
| border-radius: 2px; | | text-decoration: none; |
| margin-left: 5px; | | margin: 3px; |
| } | | } |
|
| |
|
| .zc-dev-badge { | | /* ── Responsive ────────────────────────────────────────────────────── */ |
| display: inline-block;
| | @media screen and (max-width: 768px) { |
| background: var(--wp-blue); | | body.page-Main_Page #mp-upper { display: block; } |
| color: #fff !important;
| | body.page-Main_Page #mp-left, body.page-Main_Page #mp-right { width: 100%; min-width: 0; } |
| font-size: 0.75em;
| | body.page-Main_Page .mp-cat-card { flex: 1 1 calc(50% - 8px); } |
| font-weight: bold; | | body.page-Main_Page .mp-portal-cell { flex: 1 1 calc(50% - 0px); } |
| padding: 1px 6px; | |
| border-radius: 2px;
| |
| } | | } |
|
| |
|
| .zc-contrib-badge {
| | /* Advanced Create Article Widget */ |
| display: inline-block;
| | #advanced-create-widget { |
| background: #72777d;
| | display: flex; |
| color: #fff !important;
| | flex-direction: column; |
| font-size: 0.75em;
| | gap: 8px; |
| font-weight: bold;
| |
| padding: 1px 6px;
| |
| border-radius: 2px;
| |
| } | | } |
| | | #create-article-title { |
| .zc-version-badge {
| | padding: 8px 12px; |
| display: inline-block;
| | border: 1px solid #c8ccd1; |
| background: var(--wp-bg);
| | border-radius: 4px; |
| border: 1px solid var(--wp-border);
| | font-size: 14px; |
| color: var(--wp-text);
| | outline: none; |
| font-family: var(--wp-font-mono);
| | transition: border-color 0.2s, box-shadow 0.2s; |
| font-size: 0.8em;
| |
| padding: 1px 5px;
| |
| border-radius: 2px;
| |
| } | | } |
| | | #create-article-title:focus { |
| .zc-license-badge {
| | border-color: #3366cc; |
| display: inline-block;
| | box-shadow: 0 0 0 2px rgba(51,102,204,0.2); |
| background: var(--wp-blue-light);
| |
| border: 1px solid var(--wp-border);
| |
| color: var(--wp-blue);
| |
| font-size: 0.8em;
| |
| font-weight: bold;
| |
| padding: 1px 5px;
| |
| border-radius: 2px;
| |
| } | | } |
| | | #create-article-title.is-invalid { |
| /* ── Developer Profile Card ──────────────────────────────── */
| | border-color: #d33; |
| .zc-profile-card { | | box-shadow: 0 0 0 2px rgba(221,51,51,0.2); |
| background: var(--wp-white) !important;
| |
| border: 1px solid var(--wp-border) !important;
| |
| padding: 16px !important;
| |
| margin-bottom: 1.5em !important;
| |
| box-shadow: none !important;
| |
| border-radius: 0 !important;
| |
| } | | } |
| | | #create-article-title.is-valid { |
| .zc-skill-tag { | | border-color: #00af89; |
| display: inline-block;
| | box-shadow: 0 0 0 2px rgba(0,175,137,0.2); |
| background: var(--wp-bg);
| |
| border: 1px solid var(--wp-border);
| |
| color: var(--wp-text-muted);
| |
| font-size: 0.8em;
| |
| padding: 2px 7px;
| |
| border-radius: 2px;
| |
| margin: 2px;
| |
| } | | } |
| | | #create-article-status { |
| /* ── Buttons ──────────────────────────────────────────────── */
| | font-size: 12px; |
| .mw-ui-button,
| | min-height: 16px; |
| input[type="submit"],
| | font-weight: 500; |
| input[type="button"],
| |
| button.mw-ui-progressive {
| |
| background: var(--wp-bg) !important;
| |
| border: 1px solid var(--wp-border) !important;
| |
| border-radius: 2px !important;
| |
| color: var(--wp-text) !important;
| |
| font-family: var(--wp-font-sans) !important;
| |
| font-weight: normal !important;
| |
| font-size: 0.875em !important;
| |
| padding: 6px 16px !important;
| |
| cursor: pointer !important;
| |
| box-shadow: none !important;
| |
| transition: background 0.1s !important;
| |
| } | | } |
| | .status-checking { color: #72777d; } |
| | .status-error { color: #d33; } |
| | .status-success { color: #00af89; } |
|
| |
|
| .mw-ui-button:hover { background: var(--wp-border-light) !important; }
| | #create-article-btn { |
| | | background-color: #3366cc; |
| button.mw-ui-progressive {
| | color: white; |
| background: var(--wp-blue) !important;
| | border: none; |
| border-color: #2a4b8d !important;
| | border-radius: 4px; |
| color: #fff !important;
| | padding: 8px 16px; |
| | font-size: 14px; |
| | font-weight: bold; |
| | cursor: pointer; |
| | transition: background-color 0.2s, transform 0.1s; |
| } | | } |
| button.mw-ui-progressive:hover { background: #2a4b8d !important; }
| | #create-article-btn:hover:not(:disabled) { |
| | | background-color: #2a4b8d; |
| /* ── Tabs ─────────────────────────────────────────────────── */
| |
| #p-views .selected a,
| |
| .vector-tab-noaction.selected a {
| |
| color: var(--wp-text) !important;
| |
| border-bottom: 2px solid var(--wp-text) !important;
| |
| } | | } |
| | | #create-article-btn:active:not(:disabled) { |
| .vector-page-toolbar {
| | transform: translateY(1px); |
| background: transparent !important;
| |
| border-bottom: 1px solid var(--wp-border-light) !important;
| |
| } | | } |
| | | #create-article-btn:disabled { |
| /* ── Footer ───────────────────────────────────────────────── */
| | background-color: #c8ccd1; |
| #footer, .mw-footer { | | cursor: not-allowed; |
| background: var(--wp-bg) !important;
| |
| border-top: 1px solid var(--wp-border) !important;
| |
| color: var(--wp-text-small) !important;
| |
| padding: 16px 20px !important;
| |
| font-size: 0.875em !important;
| |
| text-align: center !important;
| |
| margin-top: 2em !important;
| |
| } | | } |
| | | .create-article-links { |
| #footer a, .mw-footer a { color: var(--wp-blue) !important; }
| | font-size: 12px; |
| #footer a:hover, .mw-footer a:hover { text-decoration: underline !important; text-shadow: none !important; }
| | text-align: center; |
| | | margin-top: 4px; |
| /* ── Edit Page ────────────────────────────────────────────── */
| |
| textarea#wpTextbox1 {
| |
| background: var(--wp-white) !important;
| |
| color: var(--wp-text) !important;
| |
| border: 1px solid var(--wp-border) !important;
| |
| font-family: var(--wp-font-mono) !important;
| |
| font-size: 0.9em !important;
| |
| padding: 8px !important;
| |
| border-radius: 2px !important;
| |
| } | | } |
|
| |
|
| .diff-addedline { background: #d4f4d4 !important; }
| | /* Strict Article Creator */ |
| .diff-deletedline { background: #f4d4d4 !important; }
| | .strict-creator { |
| .diffchange { background: #ffd !important; }
| | background: #f8fafc; |
| | | border: 1px solid #e2e8f0; |
| /* ── Recent Changes ──────────────────────────────────────── */
| | border-radius: 8px; |
| .mw-changeslist-line { border-bottom: 1px solid var(--wp-border-light) !important; padding: 4px 0 !important; }
| | padding: 14px; |
| | |
| /* ── Notification popups ──────────────────────────────────── */ | |
| .oo-ui-popupWidget { | |
| background: var(--wp-white) !important;
| |
| border: 1px solid var(--wp-border) !important;
| |
| box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
| |
| border-radius: 2px !important;
| |
| } | | } |
| | | .strict-creator label.sc-main-label { |
| /* ── Vector 2022 specific ─────────────────────────────────── */
| | font-weight: bold; |
| .mw-page-container { background: var(--wp-bg) !important; } | | display: block; |
| .mw-content-container { background: var(--wp-white) !important; }
| | margin-bottom: 6px; |
| | | font-size: 0.9em; |
| /* ── Reading Progress Bar ─────────────────────────────────── */
| | color: #334155; |
| #zc-reading-progress {
| |
| background: var(--wp-blue) !important;
| |
| box-shadow: none !important;
| |
| } | | } |
| | | #sc-title { |
| /* ── Back to Top Button ───────────────────────────────────── */
| | width: 100%; |
| #zc-back-to-top { | | padding: 8px 12px; |
| background: var(--wp-blue) !important;
| | border: 1px solid #cbd5e1; |
| color: #fff !important;
| | border-radius: 4px; |
| box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
| | font-size: 14px; |
| | box-sizing: border-box; |
| | transition: all 0.2s; |
| } | | } |
| | | #sc-title:focus { |
| /* ── Copy button ──────────────────────────────────────────── */
| | border-color: #3b82f6; |
| .zc-copy-btn {
| | box-shadow: 0 0 0 2px rgba(59,130,246,0.2); |
| background: var(--wp-bg) !important;
| | outline: none; |
| border: 1px solid var(--wp-border) !important;
| |
| color: var(--wp-text-muted) !important;
| |
| } | | } |
| .zc-copy-btn:hover { background: var(--wp-border-light) !important; }
| | #sc-status { |
| | | font-size: 12px; |
| /* ============================================================
| | min-height: 18px; |
| HOMEPAGE — Wikipedia Main Page Style
| | margin-top: 4px; |
| ============================================================ */
| | margin-bottom: 12px; |
| | | font-weight: bold; |
| /* Top welcome banner */
| |
| .zc-mp-topbanner {
| |
| background: var(--wp-blue-header);
| |
| border: 1px solid var(--wp-border);
| |
| padding: 12px 16px;
| |
| margin-bottom: 16px;
| |
| text-align: center;
| |
| font-size: 1.05em;
| |
| } | | } |
| | | #sc-cats { |
| /* Left column boxes (blue header, white body) */
| | display: flex; |
| .zc-mp-box {
| | flex-wrap: wrap; |
| background: var(--wp-white);
| | gap: 6px; |
| border: 1px solid var(--wp-border);
| | margin-bottom: 14px; |
| margin-bottom: 12px;
| |
| } | | } |
| | | .sc-cat-label { |
| .zc-mp-box-header { | | background: #ffffff; |
| background: var(--wp-blue-header);
| | border: 1px solid #cbd5e1; |
| border-bottom: 1px solid var(--wp-border);
| | border-radius: 16px; |
| padding: 5px 10px;
| | padding: 4px 10px; |
| font-weight: bold;
| | font-size: 0.85em; |
| font-size: 0.95em;
| | cursor: pointer; |
| | user-select: none; |
| | transition: all 0.2s; |
| | color: #475569; |
| | margin: 0 !important; |
| } | | } |
| | | .sc-cat-label.is-checked { |
| .zc-mp-box-body { | | background: #eff6ff; |
| padding: 10px 12px;
| | border-color: #3b82f6; |
| font-size: 0.9em;
| | color: #1d4ed8; |
| | font-weight: 500; |
| } | | } |
| | | .sc-cat-label.is-disabled { |
| /* DYK box — yellow header */
| | opacity: 0.5; |
| .zc-mp-dyk-header { | | cursor: not-allowed; |
| background: #fef6e7;
| |
| border-bottom: 1px solid var(--wp-border);
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| font-size: 0.95em;
| |
| color: #7a6206;
| |
| } | | } |
| | | .sc-cat-label input { |
| /* Community box — green header */
| | display: none; |
| .zc-mp-comm-header { | |
| background: #f3fbf7;
| |
| border-bottom: 1px solid var(--wp-border);
| |
| padding: 5px 10px;
| |
| font-weight: bold;
| |
| font-size: 0.95em;
| |
| color: #14866d;
| |
| } | | } |
| | | #sc-btn { |
| /* Portal grid at bottom */
| | width: 100%; |
| .zc-mp-portals-header {
| | background-color: #00af89; |
| background: #dce3ee;
| | color: white; |
| border-bottom: 1px solid var(--wp-border);
| | border: none; |
| padding: 5px 10px;
| | border-radius: 4px; |
| font-weight: bold;
| | padding: 10px; |
| font-size: 0.95em;
| | font-size: 14px; |
| text-align: center;
| | font-weight: bold; |
| | cursor: pointer; |
| | transition: background-color 0.2s; |
| } | | } |
| | | #sc-btn:hover:not(:disabled) { |
| /* ── Responsive ──────────────────────────────────────────── */
| | background-color: #008a6d; |
| @media (max-width: 720px) {
| |
| .infobox { float: none !important; width: 100% !important; margin: 0 0 1em 0 !important; }
| |
| .mw-body { padding: 12px !important; }
| |
| } | | } |
| | | #sc-btn:disabled { |
| /* ── Print ────────────────────────────────────────────────── */
| | background-color: #cbd5e1; |
| @media print {
| | cursor: not-allowed; |
| #mw-head, #mw-panel, #footer, .noprint { display: none !important; }
| |
| body { background: #fff !important; color: #000 !important; font-family: serif !important; }
| |
| a { color: #000 !important; text-decoration: underline !important; }
| |
| } | | } |