Перейти до вмісту

MediaWiki:Common.css: відмінності між версіями

MediaWiki:Common.css (переглянути вихідний код)

Версія за 19:05, 2 серпня 2026

364 байти додано ,  Учора о 19:05
UI Kit: розширені токени (spacing/radii/shadow/typography/z)
(UI Kit шар (токени + .k-компоненти) + віджет feedback мігровано на кіт)
(UI Kit: розширені токени (spacing/radii/shadow/typography/z))
Рядок 2058: Рядок 2058:
.service-card__row--cnas {
.service-card__row--cnas {
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12.516%202.17a.75.75%200%2000-1.032%200%2011.209%2011.209%200%2001-7.877%203.08.75.75%200%2000-.722.515A12.74%2012.74%200%20002.25%209.75c0%205.942%204.064%2010.933%209.563%2012.348a.749.749%200%2000.374%200C17.686%2020.683%2021.75%2015.692%2021.75%209.75c0-1.44-.24-2.83-.678-4.128a.75.75%200%2000-.722-.515%2011.209%2011.209%200%2001-7.834-3.08zM15.53%209.53a.75.75%200%2000-1.06-1.06l-3.97%203.97-1.47-1.47a.75.75%200%2000-1.06%201.06l2%202a.75.75%200%20001.06%200l4.5-4.5z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
   background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27%234b5563%27%3E%3Cpath%20fill-rule%3D%27evenodd%27%20d%3D%27M12.516%202.17a.75.75%200%2000-1.032%200%2011.209%2011.209%200%2001-7.877%203.08.75.75%200%2000-.722.515A12.74%2012.74%200%20002.25%209.75c0%205.942%204.064%2010.933%209.563%2012.348a.749.749%200%2000.374%200C17.686%2020.683%2021.75%2015.692%2021.75%209.75c0-1.44-.24-2.83-.678-4.128a.75.75%200%2000-.722-.515%2011.209%2011.209%200%2001-7.834-3.08zM15.53%209.53a.75.75%200%2000-1.06-1.06l-3.97%203.97-1.47-1.47a.75.75%200%2000-1.06%201.06l2%202a.75.75%200%20001.06%200l4.5-4.5z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E");
}/* Країнопедія — дизайн-токени + house-компоненти (ПРОПОЗИЦІЯ, ще не залито).
}/* === Країнопедія UI Kit: дизайн-токени + house-компоненти === */
   Джерело правди для кольору/радіусів/тіней. Мета: 43 hex → ~14 токенів, 8 радіусів → 3. */
/* ЄДИНЕ ДЖЕРЕЛО ПРАВДИ. Живе в MediaWiki:Common.css (сайт) і віддзеркалюється
   на сторінці https://nomadica.uno/uikit/ (вона вантажить цей же Common.css живим).
  Правиш тут → міняється і сайт, і кіт. */
:root{
:root{
   /* — Бренд-мотив (чотири кольори смугастих банерів) — */
   /* — Бренд-мотив (чотири кольори смугастих банерів) — */
   --k-brand-blue:#1070b0;
   --k-brand-blue:#1070b0; --k-brand-red:#f84840; --k-brand-yellow:#f8b020; --k-brand-teal:#00b898;
  --k-brand-red:#f84840;
  --k-brand-yellow:#f8b020;
  --k-brand-teal:#00b898;
 
   /* — Дієві / семантичні — */
   /* — Дієві / семантичні — */
   --k-accent:#2a6df4;         /* лінки, первинні кнопки, фокус */
   --k-accent:#2a6df4; --k-accent-hover:#1b57cc;
  --k-accent-hover:#1b57cc;
   --k-danger:#f84840; --k-success:#00b898; --k-warning:#f8b020;
   --k-danger:#f84840;         /* = brand-red; поглинає #e63a32 #d92c1c */
  --k-success:#00b898;
  --k-warning:#f8b020;
 
   /* — Чорнило / текст — */
   /* — Чорнило / текст — */
   --k-ink:#1a2240;           /* заголовки, hero */
   --k-ink:#1a2240; --k-text:#202122; --k-text-secondary:#374151; --k-text-muted:#6b7280; --k-text-hint:#9ca3af;
  --k-text:#202122;           /* основний текст */
  --k-text-secondary:#374151; /* лейбли форм */
  --k-text-muted:#6b7280;     /* підзаголовки, описи */
  --k-text-hint:#9ca3af;     /* плейсхолдери, дрібні підказки */
 
   /* — Поверхні / межі — */
   /* — Поверхні / межі — */
   --k-bg:#ffffff;
   --k-bg:#ffffff; --k-bg-subtle:#fafbfd; --k-border:#eef1f6; --k-border-strong:#e3e7ef;
  --k-bg-subtle:#fafbfd;     /* фон інпутів/карток; поглинає #f8fafc #f9fafc #f5f7fb… */
  --k-border:#eef1f6;         /* поглинає #eef1f7 #eef0f4 #e8eef7 */
  --k-border-strong:#e3e7ef;
 
  /* — Радіуси — */
  --k-radius-sm:8px;          /* інпути, кнопки */
  --k-radius-md:14px;        /* картки, діалоги */
  --k-radius-pill:999px;      /* пігулки, теги */


  /* — Скруглення — */
  --k-radius-xs:6px; --k-radius-sm:8px; --k-radius-md:14px; --k-radius-lg:20px; --k-radius-pill:999px;
   /* — Тіні — */
   /* — Тіні — */
   --k-shadow-1:0 1px 3px rgba(26,34,64,.08);   /* картки */
   --k-shadow-1:0 1px 3px rgba(26,34,64,.08);
   --k-shadow-2:0 8px 30px rgba(26,34,64,.16); /* діалоги/оверлеї */
   --k-shadow-2:0 8px 30px rgba(26,34,64,.16);
 
  --k-shadow-3:0 16px 50px rgba(26,34,64,.22);
   /* — Крок відступів — */
   /* — Відступи / гепи (крок 4px) — */
   --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-6:24px;
   --k-space-0:0; --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px;
  --k-space-5:20px; --k-space-6:24px; --k-space-8:32px; --k-space-10:40px; --k-space-12:48px;
  /* — Типографіка — */
  --k-font-sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --k-fs-xs:12px; --k-fs-sm:13px; --k-fs-base:14px; --k-fs-md:16px; --k-fs-lg:20px; --k-fs-xl:24px; --k-fs-2xl:30px;
  --k-fw-normal:400; --k-fw-medium:600; --k-fw-bold:700;
  --k-lh-tight:1.2; --k-lh-base:1.5; --k-lh-relaxed:1.7;
  /* — Шари (z-index) — */
  --k-z-fixed:1000; --k-z-overlay:1001; --k-z-tip:1002;
}
}


/* ——— Компоненти ——— */
/* ——— Компоненти (розширюємо під приклад Александра) ——— */
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--k-space-2);
   font:600 14px/1.2 inherit;padding:8px 16px;border-radius:var(--k-radius-pill);
   font:var(--k-fw-medium) var(--k-fs-base)/var(--k-lh-tight) var(--k-font-sans);padding:var(--k-space-2) var(--k-space-4);
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
  border-radius:var(--k-radius-pill);border:1px solid transparent;cursor:pointer;
  transition:background .15s,border-color .15s,box-shadow .15s}
.k-btn--primary{background:var(--k-accent);color:#fff}
.k-btn--primary{background:var(--k-accent);color:#fff}
.k-btn--primary:hover{background:var(--k-accent-hover)}
.k-btn--primary:hover{background:var(--k-accent-hover)}
Рядок 2113: Рядок 2105:
.k-input,.k-textarea{width:100%;box-sizing:border-box;background:var(--k-bg-subtle);
.k-input,.k-textarea{width:100%;box-sizing:border-box;background:var(--k-bg-subtle);
   border:1px solid var(--k-border);border-radius:var(--k-radius-sm);padding:9px 11px;
   border:1px solid var(--k-border);border-radius:var(--k-radius-sm);padding:9px 11px;
   font:14px/1.4 inherit;color:var(--k-text);transition:border-color .15s,background .15s,box-shadow .15s}
   font:var(--k-fs-base)/var(--k-lh-base) var(--k-font-sans);color:var(--k-text);
  transition:border-color .15s,background .15s,box-shadow .15s}
.k-input::placeholder,.k-textarea::placeholder{color:var(--k-text-hint)}
.k-input::placeholder,.k-textarea::placeholder{color:var(--k-text-hint)}
.k-input:focus,.k-textarea:focus{outline:none;background:var(--k-bg);
.k-input:focus,.k-textarea:focus{outline:none;background:var(--k-bg);
Рядок 2122: Рядок 2115:
.k-card:hover{transform:translateY(-2px);box-shadow:var(--k-shadow-2)}
.k-card:hover{transform:translateY(-2px);box-shadow:var(--k-shadow-2)}


.k-dialog{background:var(--k-bg);border-radius:var(--k-radius-md);box-shadow:var(--k-shadow-2);
.k-dialog{background:var(--k-bg);border-radius:var(--k-radius-md);box-shadow:var(--k-shadow-2);padding:20px 22px}
  padding:20px 22px}


.k-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
.k-pill{display:inline-flex;align-items:center;gap:var(--k-space-1);padding:var(--k-space-1) var(--k-space-3);
   border-radius:var(--k-radius-pill);font:600 12px/1.2 inherit}
   border-radius:var(--k-radius-pill);font:var(--k-fw-medium) var(--k-fs-xs)/var(--k-lh-tight) var(--k-font-sans)}
.k-pill--blue{background:rgba(16,112,176,.12);color:var(--k-brand-blue)}
.k-pill--blue{background:rgba(16,112,176,.12);color:var(--k-brand-blue)}
.k-pill--red{background:rgba(248,72,64,.12);color:var(--k-danger)}
.k-pill--red{background:rgba(248,72,64,.12);color:var(--k-danger)}
.k-pill--yellow{background:rgba(248,176,32,.16);color:#9a6a00}
.k-pill--yellow{background:rgba(248,176,32,.16);color:#9a6a00}
.k-pill--teal{background:rgba(0,184,152,.14);color:#067a64}
.k-pill--teal{background:rgba(0,184,152,.14);color:#067a64}
/* === /krai-uikit === */


/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) — на UI Kit === */
/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) — на UI Kit === */
Отримано з https://nomadica.uno/Спеціальна:Мобільна_різниця_версій/2509