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

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

أضف وصلات
من فيلسوف
مراجعة ٢١:١٥، ٧ يونيو ٢٠٢٦ بواسطة Zatara (نقاش | مساهمات) (redesign v3: mawdoo3-style category tiles, bigger search, hero gradient)

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

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

@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 { background: var(--paper) !important; color: var(--ink) !important; font-family: var(--font-body) !important; }
.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 editorial 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-wordmark, .mw-logo { font-family: var(--font-display) !important; font-size: 28px !important; font-weight: 900 !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: .3em !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; margin-top: 1.8em !important; }
.mw-body h3 { font-size: 1.3em !important; font-weight: 700 !important; }

/* Links */
.mw-body a, #content a { color: var(--emerald) !important; text-decoration: none !important; }
.mw-body a:hover, #content a:hover { color: var(--gold-deep) !important; text-decoration: underline !important; }
.mw-body a.new, #content a.new { color: var(--muted) !important; font-style: italic !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;
}

/* Hide noisy Vector chrome on main page */
.vector-page-tools-landmark, .vector-appearance-landmark, .vector-pinnable-element { display: none !important; }
#p-lang-btn, .mw-portlet-lang, .vector-menu-portal, [class*="ULS"] { display: none !important; }
.mw-portlet-tb, .mw-portlet-cactions, .mw-portlet-views, .vector-menu-tabs { display: none !important; }
.vector-toc { display: none !important; }
.mw-indicators, #siteNotice, .mw-jump-link { display: none !important; }
.mw-footer-container .mw-footer-info { display: none !important; }

/* Main content centering */
.mw-body, #bodyContent, .mw-parser-output { max-width: 1180px !important; margin: 0 auto !important; padding: 24px 40px !important; }

/* === HERO === */
.faylasof-hero {
  text-align: center !important; padding: 60px 20px 50px !important;
  background: var(--paper-card) !important; border: 1px solid var(--paper-edge) !important;
  border-radius: 12px !important; margin: 24px 0 40px !important; box-shadow: 0 16px 34px -14px rgba(40,28,8,0.18) !important;
}
.faylasof-mark {
  font-family: var(--font-display) !important; font-size: 72px !important; font-weight: 900 !important;
  color: var(--ink-deep) !important; line-height: 1 !important; margin-bottom: 12px !important;
  letter-spacing: -0.5px !important;
}
.faylasof-tagline {
  font-size: 20px !important; color: var(--muted) !important; margin-bottom: 28px !important;
  font-family: var(--font-body) !important;
}
.faylasof-cta { font-size: 16px !important; }
.faylasof-cta a {
  display: inline-block !important; padding: 10px 20px !important; margin: 0 6px !important;
  background: var(--emerald) !important; color: var(--on-dark) !important;
  border-radius: 6px !important; font-weight: 500 !important;
}
.faylasof-cta a:hover { background: var(--emerald-deep) !important; color: var(--on-dark) !important; text-decoration: none !important; }

/* === GRID OF CARDS === */
.faylasof-grid {
  display: grid !important; grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important; margin: 32px 0 !important;
}
@media (max-width: 900px) { .faylasof-grid { grid-template-columns: 1fr !important; } }
.faylasof-card {
  background: var(--paper-card) !important; padding: 24px 28px !important;
  border: 1px solid var(--paper-edge) !important; border-radius: 8px !important;
  box-shadow: 0 6px 16px -8px rgba(46,34,12,0.10) !important;
}
.faylasof-card h3 {
  font-family: var(--font-display) !important; color: var(--emerald) !important;
  font-size: 1.2em !important; margin-top: 0 !important; padding-bottom: .4em !important;
  border-bottom: 1px solid var(--gold-soft) !important;
}
.faylasof-card ul { padding-inline-start: 1.2em !important; }
.faylasof-card li { margin: 6px 0 !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; padding: 20px 40px !important;
}
.mw-footer a, #footer a, .vector-footer a { color: var(--gold-soft) !important; }

/* Tables + code (defensive) */
.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; }
.mw-body pre, .mw-body code { background: var(--paper-deep) !important; border: 1px solid var(--paper-edge) !important; border-radius: 4px !important; }

/* Suppress "no text in this page" giant warning - more elegant */
.noarticletext {
  background: var(--paper-card) !important; border: 1px solid var(--gold-soft) !important;
  border-radius: 8px !important; padding: 24px !important; color: var(--ink-soft) !important;
}

/* === Faylasof v3 — fixes from screenshot === */

/* CTA buttons — higher specificity than .mw-body a generic */
.mw-body .faylasof-cta a, #content .faylasof-cta a, .mw-parser-output .faylasof-cta a {
  display: inline-block !important;
  padding: 12px 24px !important;
  margin: 0 6px !important;
  background: var(--emerald) !important;
  color: var(--on-dark) !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  text-decoration: none !important;
}
.mw-body .faylasof-cta a:hover, #content .faylasof-cta a:hover {
  background: var(--emerald-deep) !important;
  color: var(--on-dark) !important;
  text-decoration: none !important;
}

/* Hide keyboard-shortcut menu + Tools dropdown contents */
.mw-portlet-mw-cdx-keyboard-shortcuts, .mw-portlet-cactions, .mw-portlet-pages,
.vector-dropdown, .vector-menu-dropdown, #mw-content-navigation,
.vector-page-tools-landmark { display: none !important; }

/* Hide "View source" / "View history" / "Read" tabs at top right */
#p-views, #p-cactions, .vector-menu-tabs, .vector-page-titlebar-tools { display: none !important; }
.mw-list-item.mw-list-item-js, .vector-tab-noicon { display: none !important; }

/* Hide "Discussion" tab next to Main Page */
#ca-talk, .vector-menu-content-list { display: none !important; }
.vector-page-titlebar-tools-dropdown { display: none !important; }

/* Hide "Add languages" button */
.mw-portlet-lang, #p-lang-btn, .vector-page-titlebar-lang-button { display: none !important; }

/* The search placeholder text was clipping — give breathing room */
.cdx-search-input, #simpleSearch, .cdx-typeahead-search { width: 100% !important; }

/* Better breathing room around hero */
.faylasof-hero { margin: 32px 0 48px !important; padding: 70px 24px 60px !important; }

/* Footer needs spacing on the right side */
.mw-footer-container, .vector-footer { padding: 20px 40px !important; }
/* --- homepage polish: hide redundant page H1 (hero shows the wordmark) --- */
body.page-Main_Page h1.firstHeading,
body.page-Main_Page .mw-first-heading,
body.page-Main_Page #firstHeading,
body.page-Main_Page #contentSub { display: none !important; }

/* ============================================================
   FAYLASOF HOMEPAGE REDESIGN — 2026-06-08 (additive)
   ============================================================ */

/* footer: fix low-contrast links on the dark band */
.mw-footer, #footer { background:#084027 !important; }
.mw-footer a, #footer a, #footer-info li, #footer-places li,
.mw-footer li, #footer-info, #footer-places { color:#dfeede !important; }
.mw-footer a:hover, #footer a:hover { color:#ffffff !important; text-decoration:underline; }

/* hero polish */
.faylasof-hero { box-shadow:0 16px 48px rgba(8,64,39,.10); border-radius:24px; }
.faylasof-mark { letter-spacing:-1px; }
.faylasof-hero .faylasof-cta a { box-shadow:0 4px 14px rgba(8,64,39,.18); }

/* cards: lift + softer shadow */
.faylasof-card { transition:transform .15s ease, box-shadow .15s ease; box-shadow:0 6px 20px rgba(8,64,39,.06); border-radius:18px; }
.faylasof-card:hover { transform:translateY(-3px); box-shadow:0 12px 30px rgba(8,64,39,.13); }

/* feature chips */
.fy-chips { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:26px 0 8px; }
.fy-chip { display:inline-block; background:#e6efe2; color:#084027; border:1px solid #cfe0cc; border-radius:999px; padding:9px 18px; font-size:14px; font-weight:600; }

/* section title */
.fy-section-title { text-align:center; font-family:"Thmanyah Display","Thmanyah Sans",serif; font-size:23px; font-weight:800; color:#0c5b3c; margin:34px 0 6px; }

/* category pills (whole pill clickable) */
.fy-pills { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:10px auto 6px; max-width:760px; }
.fy-pill a, a.fy-pill { display:inline-block; background:#fbf7ee; border:1px solid #e3d8be; border-radius:999px; padding:9px 20px; font-size:15px; font-weight:600; color:#0c5b3c !important; text-decoration:none; transition:all .12s ease; }
.fy-pill a:hover, a.fy-pill:hover { background:#0c5b3c; color:#ffffff !important; border-color:#0c5b3c; }

/* ============================================================
   FAYLASOF v3 — mawdoo3-inspired polish — 2026-06-08
   ============================================================ */

/* hero: richer gradient + bigger wordmark */
.faylasof-hero { background:linear-gradient(160deg,#fbf7ee 0%,#f0e8d4 100%); padding:60px 26px 52px; }
.faylasof-mark { font-size:92px; letter-spacing:-1.5px; }
.faylasof-tagline { font-size:23px; }

/* make the header search bar bigger / pill-shaped (Vector 2022 + fallbacks) */
#searchInput, .cdx-text-input__input, .vector-search-box-input {
  border-radius:999px !important; font-size:16px !important; padding:9px 18px !important;
  border:1px solid #cfe0cc !important;
}
.vector-search-box, .vector-search-box-inner { max-width:600px !important; }

/* category TILES grid (mawdoo3-style icon tiles) */
.fy-tiles {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:14px; margin:12px auto 10px; max-width:940px;
}
.fy-tile a {
  display:block; text-align:center; background:#fbf7ee; border:1px solid #e3d8be;
  border-radius:16px; padding:24px 12px; font-size:17px; font-weight:700;
  color:#0c5b3c !important; text-decoration:none; line-height:1.5;
  box-shadow:0 4px 14px rgba(8,64,39,.05); transition:transform .14s ease, background .14s ease, box-shadow .14s ease;
}
.fy-tile a:hover {
  background:#0c5b3c; color:#ffffff !important;
  transform:translateY(-4px); box-shadow:0 14px 30px rgba(8,64,39,.18);
}
.fy-tile .fy-ico { display:block; font-size:34px; margin-bottom:8px; line-height:1; }

/* info cards: a touch more refined */
.faylasof-card { padding:26px; }
.faylasof-grid { gap:18px; }
مجلوبة من «https://faylasof.com/w/index.php?title=ميدياويكي:Common.css&oldid=130299»