انتقل إلى المحتوى

ميدياويكي:Common.css

من فيلسوف
مراجعة ١٤:١٥، ٣ يونيو ٢٠٢٦ بواسطة Zatara (نقاش | مساهمات) (Apply Faylasof Astro design tokens to MediaWiki Vector)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

ملاحظة: بعد الحفظ، قد يلزمك محو الاختزان الخاص بمتصفحك لرؤية التغييرات.

  • فايرفوكس / سافاري: أمسك Shift أثناء ضغط Reload، أو اضغط على إما Ctrl-F5 أو Ctrl-R (⌘-R على ماك)
  • جوجل كروم: اضغط Ctrl-Shift-R (⌘-Shift-R على ماك)
  • إنترنت إكسبلورر/إيدج: أمسك Ctrl أثناء ضغط Refresh، أو اضغط Ctrl-F5
  • أوبرا: اضغط Ctrl-F5.
/* === Faylasof — Astro design ported to MediaWiki Vector 2022 === */

@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-400.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-500.woff2") format("woff2"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Sans"; src:url("/_assets/fonts/thmanyah-sans-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Display"; src:url("/_assets/fonts/thmanyah-display-700.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Thmanyah Display"; src:url("/_assets/fonts/thmanyah-display-900.woff2") format("woff2"); font-weight:900; font-style:normal; font-display:swap; }

:root {
  --paper:#f6f0e2; --paper-card:#fbf7ee; --paper-deep:#ece2cd; --paper-edge:#e3d8be;
  --ink:#211c12; --ink-soft:#4b4435; --muted:#6e6553;
  --emerald:#0c5b3c; --emerald-deep:#084027; --emerald-bright:#0a8f5e; --emerald-tint:#e6efe2;
  --ink-deep:#0f1f18; --on-dark:#f3ecda; --on-dark-soft:#b7c2b3;
  --gold:#b0892f; --gold-soft:#d6b873;
  --font-display:"Thmanyah Display","Thmanyah Sans","SF Arabic","Noto Naskh Arabic",serif;
  --font-body:"Thmanyah Sans","SF Arabic","Noto Sans Arabic","Geeza Pro",-apple-system,sans-serif;
}

html, body, .mw-body, .mw-page-container, .mw-page-container-inner, .vector-body, #content {
  background: var(--paper) !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
}

/* Dark "bookend" header */
.mw-header, .vector-header-container, .vector-header {
  background: var(--ink-deep) !important;
  color: var(--on-dark) !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}
.mw-header *, .vector-header *, .vector-header-container * { color: var(--on-dark) !important; }
.mw-logo, .mw-logo-wordmark { color: var(--on-dark) !important; font-family: var(--font-display) !important; font-size: 24px !important; }
.mw-logo-icon, .mw-logo-icon img, img.mw-logo-icon { filter: brightness(1.1) !important; }

/* Headings */
.mw-body h1, .mw-body h2, .mw-body h3, .firstHeading, .mw-first-heading {
  font-family: var(--font-display) !important;
  color: var(--ink-deep) !important;
  border-bottom: 1px solid var(--gold) !important;
  padding-bottom: .25em !important;
}
.mw-body h1, .firstHeading, .mw-first-heading { font-size: 2.4em !important; font-weight: 900 !important; }
.mw-body h2 { font-size: 1.7em !important; font-weight: 700 !important; }
.mw-body h3 { font-size: 1.3em !important; }

/* Links */
.mw-body a, #content a, a.cdx-tabs__list__item__anchor {
  color: var(--emerald) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--gold), var(--gold)) !important;
  background-size: 0% 1.5px !important;
  background-position: 100% 100% !important;
  background-repeat: no-repeat !important;
  transition: background-size 240ms ease, color 160ms ease !important;
}
.mw-body a:hover, #content a:hover { background-size: 100% 1.5px !important; color: var(--emerald-deep) !important; }
.mw-body a.new, #content a.new { color: #a93226 !important; }

/* Search box */
#searchInput, .cdx-text-input__input {
  background: var(--paper-card) !important;
  border: 1px solid var(--gold-soft) !important;
  color: var(--ink) !important;
  border-radius: 6px !important;
  font-family: var(--font-body) !important;
}
#searchInput:focus, .cdx-text-input__input:focus {
  border-color: var(--emerald) !important;
  outline: 2px solid var(--emerald-tint) !important;
}

/* Sidebars and TOC */
.mw-portlet, .mw-sidebar, #mw-panel, .vector-toc {
  background: var(--paper-card) !important;
  border: 1px solid var(--paper-edge) !important;
  border-radius: 6px !important;
}
.mw-portlet-heading, .vector-toc-heading {
  color: var(--emerald) !important;
  font-family: var(--font-display) !important;
  border-bottom: 1px solid var(--gold) !important;
}

/* Buttons */
.cdx-button, .mw-ui-button, button.oo-ui-buttonElement-button {
  background: var(--emerald) !important;
  color: var(--on-dark) !important;
  border: 1px solid var(--emerald-deep) !important;
  font-family: var(--font-body) !important;
  border-radius: 6px !important;
}
.cdx-button:hover, .mw-ui-button:hover { background: var(--emerald-deep) !important; }

/* Footer */
.mw-footer, #footer, .vector-footer {
  background: var(--ink-deep) !important;
  color: var(--on-dark-soft) !important;
  border-top: 1px solid var(--gold-soft) !important;
}
.mw-footer a, #footer a, .vector-footer a { color: var(--gold-soft) !important; }

/* Tables */
.mw-body table, table.wikitable {
  background: var(--paper-card) !important;
  border: 1px solid var(--paper-edge) !important;
}
.mw-body table th, table.wikitable th {
  background: var(--emerald-tint) !important;
  color: var(--ink-deep) !important;
  border-color: var(--gold-soft) !important;
}

/* Code blocks */
.mw-body pre, .mw-body code {
  background: var(--paper-deep) !important;
  border: 1px solid var(--paper-edge) !important;
  color: var(--ink) !important;
  border-radius: 4px !important;
}

/* MediaWiki "no text" warning panel - soft */
.noarticletext, .mw-body .noarticletext {
  background: var(--paper-card) !important;
  border: 1px solid var(--gold-soft) !important;
  border-radius: 6px !important;
  padding: 18px !important;
}

/* Hide some legacy UI elements that look out of place */
.mw-indicators, #siteNotice { display: none !important; }