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

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

Версія за 18:03, 2 серпня 2026

2901 байт додано , Учора о 18:03

UI Kit шар (токени + .k-компоненти) + віджет feedback мігровано на кіт

Admin

Бюрократи, Адміністратори інтерфейсу, Адміністратори

2206

редагувань

@@ Рядок 2058: / Рядок 2058: @@
 .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");
+}/* Країнопедія — дизайн-токени + house-компоненти (ПРОПОЗИЦІЯ, ще не залито).
+   Джерело правди для кольору/радіусів/тіней. Мета: 43 hex → ~14 токенів, 8 радіусів → 3. */
+:root{
+  /* — Бренд-мотив (чотири кольори смугастих банерів) — */
+  --k-brand-blue:#1070b0;
+  --k-brand-red:#f84840;
+  --k-brand-yellow:#f8b020;
+  --k-brand-teal:#00b898;
+  /* — Дієві / семантичні — */
+  --k-accent:#2a6df4;         /* лінки, первинні кнопки, фокус */
+  --k-accent-hover:#1b57cc;
+  --k-danger:#f84840;         /* = brand-red; поглинає #e63a32 #d92c1c */
+  --k-success:#00b898;
+  --k-warning:#f8b020;
+  /* — Чорнило / текст — */
+  --k-ink:#1a2240;            /* заголовки, hero */
+  --k-text:#202122;           /* основний текст */
+  --k-text-secondary:#374151; /* лейбли форм */
+  --k-text-muted:#6b7280;     /* підзаголовки, описи */
+  --k-text-hint:#9ca3af;      /* плейсхолдери, дрібні підказки */
+  /* — Поверхні / межі — */
+  --k-bg:#ffffff;
+  --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-shadow-1:0 1px 3px rgba(26,34,64,.08);   /* картки */
+  --k-shadow-2:0 8px 30px rgba(26,34,64,.16);  /* діалоги/оверлеї */
+  /* — Крок відступів — */
+  --k-space-1:4px; --k-space-2:8px; --k-space-3:12px; --k-space-4:16px; --k-space-6:24px;
 }
-/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) === */
-.krai-fb-btn{position:fixed;right:16px;bottom:16px;z-index:1000;background:#1e63d0;color:#fff;border:none;border-radius:24px;padding:10px 16px;font-size:14px;font-weight:600;box-shadow:0 2px 10px rgba(0,0,0,.25);cursor:pointer;line-height:1.2}
+/* ——— Компоненти ——— */
-.krai-fb-btn:hover{background:#174ea6}
+.k-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;
-@media(max-width:640px){.krai-fb-btn{right:10px;bottom:10px;padding:9px 13px;font-size:13px}}
+  font:600 14px/1.2 inherit;padding:8px 16px;border-radius:var(--k-radius-pill);
-.krai-fb-tip{position:absolute;z-index:1002;background:#1e63d0;color:#fff;border:none;border-radius:16px;padding:6px 12px;font-size:13px;font-weight:600;box-shadow:0 3px 12px rgba(0,0,0,.3);cursor:pointer;white-space:nowrap;line-height:1.2}
+  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s}
-.krai-fb-tip:hover{background:#174ea6}
+.k-btn--primary{background:var(--k-accent);color:#fff}
-.krai-fb-overlay{display:none;position:fixed;inset:0;z-index:1001;background:rgba(0,0,0,.5);align-items:center;justify-content:center;padding:16px}
+.k-btn--primary:hover{background:var(--k-accent-hover)}
+.k-btn--quiet{background:var(--k-bg-subtle);color:var(--k-text);border-color:var(--k-border-strong)}
+.k-btn--quiet:hover{background:#f0f2f6}
+.k-btn--danger{background:var(--k-danger);color:#fff}
+.k-btn--danger:hover{filter:brightness(.94)}
+.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;
+  font:14px/1.4 inherit;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:focus,.k-textarea:focus{outline:none;background:var(--k-bg);
+  border-color:var(--k-accent);box-shadow:0 0 0 3px rgba(42,109,244,.12)}
+.k-card{background:var(--k-bg);border:1px solid var(--k-border);border-radius:var(--k-radius-md);
+  box-shadow:var(--k-shadow-1);padding:var(--k-space-4);transition:transform .15s,box-shadow .15s}
+.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);
+  padding:20px 22px}
+.k-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
+  border-radius:var(--k-radius-pill);font:600 12px/1.2 inherit}
+.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--yellow{background:rgba(248,176,32,.16);color:#9a6a00}
+.k-pill--teal{background:rgba(0,184,152,.14);color:#067a64}
+/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) — на UI Kit === */
+/* Кольори/радіуси/тіні — з токенів --k-*. Тут лише layout/позиціонування. */
+.krai-fb-btn{position:fixed;right:16px;bottom:16px;z-index:1000;box-shadow:var(--k-shadow-2)}
+@media(max-width:640px){.krai-fb-btn{right:10px;bottom:10px}}
+.krai-fb-tip{position:absolute;z-index:1002;padding:6px 12px;font-size:13px;box-shadow:var(--k-shadow-2);white-space:nowrap}
+.krai-fb-overlay{display:none;position:fixed;inset:0;z-index:1001;background:rgba(26,34,64,.5);align-items:center;justify-content:center;padding:16px}
 .krai-fb-overlay.is-open{display:flex}
-.krai-fb-modal{background:#fff;color:#202122;max-width:460px;width:100%;border-radius:12px;padding:20px 22px;position:relative;box-shadow:0 10px 40px rgba(0,0,0,.3);max-height:90vh;overflow:auto}
+.krai-fb-modal{max-width:460px;width:100%;position:relative;max-height:90vh;overflow:auto}
-.krai-fb-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:#72777d;cursor:pointer}
+.krai-fb-close{position:absolute;top:8px;right:12px;background:none;border:none;font-size:26px;line-height:1;color:var(--k-text-muted);cursor:pointer}
-.krai-fb-title{margin:0 0 4px;font-size:20px;border:none;padding:0}
+.krai-fb-title{margin:0 0 4px;font-size:20px;color:var(--k-ink);border:none;padding:0}
-.krai-fb-sub{margin:0 0 14px;font-size:13px;color:#54595d}
+.krai-fb-sub{margin:0 0 14px;font-size:13px;color:var(--k-text-muted)}
-.krai-fb-form label.krai-fb-label{display:block;font-size:13px;font-weight:600;margin:12px 0 0;color:#374151}
+.krai-fb-form label.krai-fb-label{display:block;font-size:13px;font-weight:600;margin:12px 0 4px;color:var(--k-text-secondary)}
-.krai-fb-label span{font-weight:400;color:#9ca3af}
+.krai-fb-label span{font-weight:400;color:var(--k-text-hint)}
-.krai-fb-form textarea,.krai-fb-form input[type=text]{width:100%;box-sizing:border-box;margin-top:5px;padding:9px 11px;background:#fafbfd;border:1px solid #eef1f6;border-radius:8px;font-size:14px;font-family:inherit;color:#202122;transition:border-color .15s,background .15s,box-shadow .15s}
-.krai-fb-form textarea:focus,.krai-fb-form input[type=text]:focus{outline:none;background:#fff;border-color:#2a6df4;box-shadow:0 0 0 3px rgba(42,109,244,.12)}
-.krai-fb-form ::placeholder{color:#9ca3af}
 .krai-fb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0}
 .krai-fb-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}
-.krai-fb-cancel{background:#f8f9fa;border:1px solid #a2a9b1;border-radius:6px;padding:8px 14px;cursor:pointer;font-size:14px}
-.krai-fb-submit{background:#1e63d0;color:#fff;border:none;border-radius:6px;padding:8px 16px;cursor:pointer;font-size:14px;font-weight:600}
-.krai-fb-submit:disabled{opacity:.6;cursor:default}
 .krai-fb-msg{margin-top:10px;font-size:13px;min-height:1em}
-.krai-fb-msg.is-ok{color:#14866d}
+.krai-fb-msg.is-ok{color:var(--k-success)}
-.krai-fb-msg.is-err{color:#d33}
+.krai-fb-msg.is-err{color:var(--k-danger)}
 /* === /krai-feedback === */