Країнопедія

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

Повідомлення Обговорення

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

Версія за 02:21, 3 серпня 2026

1547 байтів додано ,  Учора о 02:21
Картки: повна консолідація (заголовки→ink, тіні→shadow-токени, CTA/meta/лінки→токени)
(.k-field: геп лейбл→інпут 12px)
(Картки: повна консолідація (заголовки→ink, тіні→shadow-токени, CTA/meta/лінки→токени))
 
(Не показані 3 проміжні версії цього користувача)
Рядок 15: Рядок 15:
   display: flex;
   display: flex;
   flex-direction: column;
   flex-direction: column;
   background: #fff;
   background: var(--k-bg);
   border: 1px solid #eef1f6;
   border: 1px solid var(--k-border);
   border-radius: 14px;
   border-radius: var(--k-radius-md);
   overflow: hidden;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
   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: 0 2px 4px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
   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: #111827; text-decoration: none; }
.place-card__title a { color: var(--k-ink); text-decoration: none; }
.place-card__title a:hover { color: #2a6df4; }
.place-card__title a:hover { color: var(--k-accent); }
.place-card__meta { font-size: 13px; color: #6b7280; margin: 0 0 10px; line-height: 1.5; }
.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: #374151; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.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:#6b7280; line-height:1.7; margin:0 0 14px; }
.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:#374151; }
.place-detail__desc { font-size:16px; line-height:1.65; color:var(--k-text-secondary); }
.place-detail__desc--empty { color:#9ca3af; font-style:italic; }
.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: #fff;
   background: var(--k-bg);
   border: 1px solid #eef1f6;
   border: 1px solid var(--k-border);
   border-radius: 14px;
   border-radius: var(--k-radius-md);
   overflow: hidden;
   overflow: hidden;
   box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 1px 8px rgba(0,0,0,.04);
   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: 0 2px 4px rgba(0,0,0,.04), 0 6px 18px rgba(0,0,0,.08);
   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: #111827; text-decoration: none; }
.service-card__title a { color: var(--k-ink); text-decoration: none; }
.service-card__title a:hover { color: #2a6df4; }
.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: #6b7280;
   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: #374151;
   color: var(--k-text-secondary);
   margin-bottom: 12px;
   margin-bottom: 12px;
}
}
Рядок 597: Рядок 597:
   gap: 4px;
   gap: 4px;
   font-size: 13px;
   font-size: 13px;
   color: #4b5563;
   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: #2a6df4; text-decoration: none; }
.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 #4b5563, URL-encoded) */
/* 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: #f8fafc;
   background: var(--k-bg-subtle);
   border: 2px dashed #cbd5e1;
   border: 2px dashed var(--k-border-strong);
   box-shadow: none;
   box-shadow: none;
   color: #4b5563;
   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: #2a6df4;
   border-color: var(--k-accent);
   background: #f0f6ff;
   background: #f0f6ff;
   color: #2a6df4;
   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: #fff;
   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: #6b7280;
   color: var(--k-text-muted);
   margin-top: 4px;
   margin-top: 4px;
}
}
Рядок 2128: Рядок 2128:
.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{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)}
.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-uikit === */


Рядок 2143: Рядок 2159:
.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-msg{font-size:13px;min-height:1em}
.krai-fb-msg{font-size:13px}
.krai-fb-msg:empty{display:none}
.krai-fb-msg.is-ok{color:var(--k-success)}
.krai-fb-msg.is-ok{color:var(--k-success)}
.krai-fb-msg.is-err{color:var(--k-danger)}
.krai-fb-msg.is-err{color:var(--k-danger)}
/* === /krai-feedback === */
/* === /krai-feedback === */
Отримано з https://nomadica.uno/Спеціальна:Мобільна_різниця_версій/2515...2519