2206
редагувань
Admin (обговорення | внесок) (krai-feedback: інпути в стилі сайту) |
Admin (обговорення | внесок) (Картки: повна консолідація (заголовки→ink, тіні→shadow-токени, CTA/meta/лінки→токени)) |
||
| (Не показано 8 проміжних версій цього користувача) | |||
| Рядок 15: | Рядок 15: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
background: | background: var(--k-bg); | ||
border: 1px solid | border: 1px solid var(--k-border); | ||
border-radius: | border-radius: var(--k-radius-md); | ||
overflow: hidden; | overflow: hidden; | ||
box-shadow: | box-shadow: var(--k-shadow-1); | ||
transition: transform .15s ease, box-shadow .15s ease; | transition: transform .15s ease, box-shadow .15s ease; | ||
} | } | ||
.place-card:hover { | .place-card:hover { | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: | box-shadow: var(--k-shadow-2); | ||
} | } | ||
.place-card__img { | .place-card__img { | ||
| Рядок 40: | Рядок 40: | ||
.place-card__body { padding: 14px 18px 18px; } | .place-card__body { padding: 14px 18px 18px; } | ||
.place-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; } | .place-card__title { font-size: 17px; font-weight: 700; margin: 0 0 8px; line-height: 1.25; } | ||
.place-card__title a { color: | .place-card__title a { color: var(--k-ink); text-decoration: none; } | ||
.place-card__title a:hover { color: | .place-card__title a:hover { color: var(--k-accent); } | ||
.place-card__meta { font-size: 13px; color: | .place-card__meta { font-size: 13px; color: var(--k-text-muted); margin: 0 0 10px; line-height: 1.5; } | ||
.place-card__desc { font-size: 14px; line-height: 1.5; color: | .place-card__desc { font-size: 14px; line-height: 1.5; color: var(--k-text-secondary); display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; } | ||
/* Whole card clickable (stretched link) */ | /* Whole card clickable (stretched link) */ | ||
.place-card { position: relative; cursor: pointer; } | .place-card { position: relative; cursor: pointer; } | ||
| Рядок 52: | Рядок 52: | ||
.place-detail { max-width: 760px; } | .place-detail { max-width: 760px; } | ||
.place-detail__img img { display:block; max-width:100%; height:auto; border-radius:14px; margin:4px 0 16px; } | .place-detail__img img { display:block; max-width:100%; height:auto; border-radius:14px; margin:4px 0 16px; } | ||
.place-detail__meta { font-size:14px; color: | .place-detail__meta { font-size:14px; color:var(--k-text-muted); line-height:1.7; margin:0 0 14px; } | ||
.place-detail__desc { font-size:16px; line-height:1.65; color: | .place-detail__desc { font-size:16px; line-height:1.65; color:var(--k-text-secondary); } | ||
.place-detail__desc--empty { color: | .place-detail__desc--empty { color:var(--k-text-hint); font-style:italic; } | ||
/* Grid: 2 columns desktop, 1 column mobile */ | /* Grid: 2 columns desktop, 1 column mobile */ | ||
| Рядок 557: | Рядок 557: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
background: | background: var(--k-bg); | ||
border: 1px solid | border: 1px solid var(--k-border); | ||
border-radius: | border-radius: var(--k-radius-md); | ||
overflow: hidden; | overflow: hidden; | ||
box-shadow: | box-shadow: var(--k-shadow-1); | ||
transition: transform .15s ease, box-shadow .15s ease; | transition: transform .15s ease, box-shadow .15s ease; | ||
} | } | ||
.service-card:hover { | .service-card:hover { | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: | box-shadow: var(--k-shadow-2); | ||
} | } | ||
.service-card__body { padding: 16px 20px 18px; } | .service-card__body { padding: 16px 20px 18px; } | ||
| Рядок 575: | Рядок 575: | ||
line-height: 1.25; | line-height: 1.25; | ||
} | } | ||
.service-card__title a { color: | .service-card__title a { color: var(--k-ink); text-decoration: none; } | ||
.service-card__title a:hover { color: | .service-card__title a:hover { color: var(--k-accent); } | ||
.service-card__members { | .service-card__members { | ||
display: inline-block; | display: inline-block; | ||
| Рядок 582: | Рядок 582: | ||
font-size: 12px; | font-size: 12px; | ||
font-weight: 500; | font-weight: 500; | ||
color: | color: var(--k-text-muted); | ||
white-space: nowrap; | white-space: nowrap; | ||
vertical-align: middle; | vertical-align: middle; | ||
| Рядок 589: | Рядок 589: | ||
font-size: 14px; | font-size: 14px; | ||
line-height: 1.5; | line-height: 1.5; | ||
color: | color: var(--k-text-secondary); | ||
margin-bottom: 12px; | margin-bottom: 12px; | ||
} | } | ||
| Рядок 597: | Рядок 597: | ||
gap: 4px; | gap: 4px; | ||
font-size: 13px; | font-size: 13px; | ||
color: | color: var(--k-text-secondary); | ||
border-top: 1px solid #f3f4f6; | border-top: 1px solid #f3f4f6; | ||
padding-top: 10px; | padding-top: 10px; | ||
| Рядок 608: | Рядок 608: | ||
background-size: 14px 14px; | background-size: 14px 14px; | ||
} | } | ||
.service-card__row a { color: | .service-card__row a { color: var(--k-accent) !important; text-decoration: none; } | ||
.service-card__row a:hover { text-decoration: underline; } | .service-card__row a:hover { text-decoration: underline; } | ||
/* SVG-іконки (Heroicons solid, fill | /* SVG-іконки (Heroicons solid, fill var(--k-text-secondary), URL-encoded) */ | ||
.service-card__row--phone { | .service-card__row--phone { | ||
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%27M1.5%204.5a3%203%200%200%201%203-3h1.372c.86%200%201.61.586%201.819%201.42l1.105%204.423a1.875%201.875%200%200%201-.694%201.955l-1.293.97c-.135.101-.164.249-.126.352a11.285%2011.285%200%200%200%206.197%206.197c.103.038.25.009.352-.126l.97-1.293a1.875%201.875%200%200%201%201.955-.694l4.423%201.105c.834.209%201.42.959%201.42%201.82V19.5a3%203%200%200%201-3%203h-2.25C8.552%2022.5%201.5%2015.448%201.5%206.75V4.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%27M1.5%204.5a3%203%200%200%201%203-3h1.372c.86%200%201.61.586%201.819%201.42l1.105%204.423a1.875%201.875%200%200%201-.694%201.955l-1.293.97c-.135.101-.164.249-.126.352a11.285%2011.285%200%200%200%206.197%206.197c.103.038.25.009.352-.126l.97-1.293a1.875%201.875%200%200%201%201.955-.694l4.423%201.105c.834.209%201.42.959%201.42%201.82V19.5a3%203%200%200%201-3%203h-2.25C8.552%2022.5%201.5%2015.448%201.5%206.75V4.5z%27%20clip-rule%3D%27evenodd%27%2F%3E%3C%2Fsvg%3E"); | ||
| Рядок 630: | Рядок 630: | ||
justify-content: center; | justify-content: center; | ||
text-align: center; | text-align: center; | ||
background: | background: var(--k-bg-subtle); | ||
border: 2px dashed | border: 2px dashed var(--k-border-strong); | ||
box-shadow: none; | box-shadow: none; | ||
color: | color: var(--k-text-secondary); | ||
text-decoration: none; | text-decoration: none; | ||
padding: 16px 20px 18px; | padding: 16px 20px 18px; | ||
| Рядок 639: | Рядок 639: | ||
} | } | ||
.service-card--cta:hover { | .service-card--cta:hover { | ||
border-color: | border-color: var(--k-accent); | ||
background: #f0f6ff; | background: #f0f6ff; | ||
color: | color: var(--k-accent); | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
box-shadow: none; | box-shadow: none; | ||
| Рядок 650: | Рядок 650: | ||
height: 36px; | height: 36px; | ||
border-radius: 50%; | border-radius: 50%; | ||
background: | background: var(--k-bg); | ||
border: 1.5px solid currentColor; | border: 1.5px solid currentColor; | ||
display: flex; | display: flex; | ||
| Рядок 668: | Рядок 668: | ||
display: block; | display: block; | ||
font-size: 12px; | font-size: 12px; | ||
color: | color: var(--k-text-muted); | ||
margin-top: 4px; | margin-top: 4px; | ||
} | } | ||
| Рядок 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"); | ||
}/* === Країнопедія UI Kit: дизайн-токени + house-компоненти === */ | |||
/* ЄДИНЕ ДЖЕРЕЛО ПРАВДИ. Живе в MediaWiki:Common.css (сайт) і віддзеркалюється | |||
на сторінці https://nomadica.uno/uikit/ (вона вантажить цей же Common.css живим). | |||
Правиш тут → міняється і сайт, і кіт. */ | |||
: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; --k-success:#00b898; --k-warning:#f8b020; | |||
/* — Чорнило / текст — */ | |||
--k-ink:#1a2240; --k-text:#202122; --k-text-secondary:#374151; --k-text-muted:#6b7280; --k-text-hint:#9ca3af; | |||
/* — Поверхні / межі — */ | |||
--k-bg:#ffffff; --k-bg-subtle:#fafbfd; --k-border:#eef1f6; --k-border-strong:#e3e7ef; | |||
/* — Скруглення — */ | |||
--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-2:0 8px 30px rgba(26,34,64,.16); | |||
--k-shadow-3:0 16px 50px rgba(26,34,64,.22); | |||
/* — Відступи / гепи (крок 4px) — */ | |||
--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:var(--k-space-2); | ||
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-radius:var(--k-radius-pill);border:1px solid transparent;cursor:pointer; | ||
.krai-fb-tip: | transition:background .15s,border-color .15s,box-shadow .15s} | ||
.krai-fb-overlay{display:none;position:fixed;inset:0;z-index:1001;background:rgba( | .k-btn--primary{background:var(--k-accent);color:#fff} | ||
.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: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: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:var(--k-space-1);padding:var(--k-space-1) var(--k-space-3); | |||
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--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} | |||
.k-form{display:flex;flex-direction:column;gap:var(--k-space-5)} /* геп між полями — регулюється тут */ | |||
.k-field{display:flex;flex-direction:column;gap:var(--k-space-3)} /* геп лейбл → інпут (12px) */ | |||
.k-label{font:var(--k-fw-medium) var(--k-fs-sm)/var(--k-lh-base) var(--k-font-sans);color:var(--k-text-secondary)} | |||
.k-label span{font-weight:var(--k-fw-normal);color:var(--k-text-hint)} | |||
/* Картки (ціль міграції .place-card / .service-card) */ | |||
.k-card--media{padding:0;overflow:hidden} | |||
.k-card__img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--k-bg-subtle)} | |||
.k-card__body{padding:var(--k-space-4) var(--k-space-5) var(--k-space-5)} | |||
.k-card__title{margin:0 0 var(--k-space-2);font:var(--k-fw-bold) var(--k-fs-md)/var(--k-lh-tight) var(--k-font-sans);color:var(--k-ink)} | |||
.k-card__title a{color:inherit;text-decoration:none} | |||
.k-card__title a:hover{color:var(--k-accent)} | |||
.k-card__meta{margin:0 0 var(--k-space-2);font-size:var(--k-fs-sm);color:var(--k-text-muted)} | |||
.k-card__desc{font-size:var(--k-fs-base);line-height:var(--k-lh-base);color:var(--k-text-secondary)} | |||
.k-card__rows{display:flex;flex-direction:column;gap:var(--k-space-2);margin-top:var(--k-space-3)} | |||
.k-card__row{display:flex;align-items:center;gap:var(--k-space-2);font-size:var(--k-fs-sm);color:var(--k-text-secondary)} | |||
.k-card__row a{color:var(--k-accent);text-decoration:none} | |||
.k-card__price{font-weight:var(--k-fw-bold);color:var(--k-ink)} | |||
.k-badge{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:var(--k-radius-xs);font:var(--k-fw-medium) var(--k-fs-xs)/1.2 var(--k-font-sans);background:var(--k-bg-subtle);color:var(--k-text-secondary)} | |||
.k-badge--success{background:rgba(0,184,152,.14);color:#067a64} | |||
/* === /krai-uikit === */ | |||
/* === Країнопедія: віджет «Повідомити про правку» (krai-feedback) — на UI Kit === */ | |||
/* Кольори/радіуси/тіні — з токенів --k-*. Тут лише layout/позиціонування. */ | |||
.krai-fb-btn{position:fixed;right:16px;bottom:16px;z-index:var(--k-z-fixed,1000);background:var(--k-bg);color:var(--k-ink);box-shadow:var(--k-shadow-2)} | |||
@media(max-width:640px){.krai-fb-btn{right:10px;bottom:10px}} | |||
.krai-fb-tip{position:absolute;z-index:var(--k-z-tip,1002);padding:6px 12px;font-size:13px;background:var(--k-bg);color:var(--k-ink);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-overlay.is-open{display:flex} | ||
.krai-fb-modal{ | .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: | .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: | .krai-fb-sub{margin:0 0 14px;font-size:13px;color:var(--k-text-muted)} | ||
.krai-fb-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0} | .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 | .krai-fb-actions{display:flex;justify-content:flex-end;gap:10px} | ||
.krai-fb- | .krai-fb-msg{font-size:13px} | ||
.krai-fb- | .krai-fb-msg:empty{display:none} | ||
.krai-fb- | .krai-fb-msg.is-ok{color:var(--k-success)} | ||
.krai-fb-msg.is-err{color:var(--k-danger)} | |||
.krai-fb-msg.is- | |||
/* === /krai-feedback === */ | /* === /krai-feedback === */ | ||