/* Контролы (RF_003 TASK_007): кнопки, поля, селекты, чекбоксы - один набор по образцу shadcn на смысловых токенах
(css/tokens.css), бренд и тёмная схема партнёра перекрашивают его через токены. Витрина - /dev-ui на *.lan.
Цвета: главная кнопка - --button (по умолчанию = --primary); выбранный переключатель, чекбоксы - --primary
(акцент стиля); удаление - --destructive. Стиль может развести кнопки и акцент (red.css).
Кнопка: .btn + вариант .btn-primary | .btn-secondary | .btn-outline | .btn-ghost | .btn-destructive | .btn-link
+ .btn-muted - приглушённый значок (с .btn-ghost)
+ размер .btn-sm (кабинет, тулбары) | .btn-xs (гриды: в шапке jqGrid - сам) | .btn-lg (призыв); высоты - --control-*; .btn-icon - квадратная, .btn-block - на всю ширину
без варианта - secondary
Переключатель: label.btn со скрытым radio/checkbox внутри; выбранный - цветом акцента (.btn-on-success,
.btn-on-destructive - цветом смысла: прийнято/відхилено), в группе .btn-group
Поле: .input на input, textarea, select; .input-sm - кабинет, гриды (селекторы с тегом: сильнее легаси-правил
input[type=text] из main_adaptive.css)
Чекбокс, радио - цвет акцента
Иконка: - цвет текста, размер по кнопке */
.btn {
position: relative;
--btn-bg: var(--secondary);
--btn-fg: var(--secondary-foreground);
--btn-border: transparent;
--btn-hover: color-mix(in srgb, var(--btn-bg) 88%, var(--foreground));
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-sizing: border-box;
height: var(--control);
padding: 0 14px;
border: 1px solid var(--btn-border);
border-radius: var(--radius);
background: var(--btn-bg);
color: var(--btn-fg);
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-align: center;
text-decoration: none;
text-shadow: none;
text-transform: none;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
transition: background-color .15s, border-color .15s, color .15s, box-shadow .15s;
}
.btn:hover {
background: var(--btn-hover);
color: var(--btn-fg);
text-decoration: none;
}
.btn:active {
box-shadow: none;
}
.btn:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.btn:disabled, .btn.disabled, .btn[aria-disabled="true"] {
opacity: .5;
pointer-events: none;
}
.btn img, .btn svg {
flex: none;
}
/* клик по значку - по кнопке (обработчики смотрят event.target, напр. beh="close" в попапах занятости) */
.btn svg {
pointer-events: none;
}
.btn-primary {
--btn-bg: var(--button);
--btn-fg: var(--button-foreground);
}
.btn-secondary {
--btn-bg: var(--secondary);
--btn-fg: var(--secondary-foreground);
}
.btn-outline {
--btn-bg: var(--background);
--btn-fg: var(--foreground);
--btn-border: var(--input);
--btn-hover: var(--muted);
}
.btn-ghost {
--btn-bg: transparent;
--btn-fg: var(--foreground);
--btn-hover: var(--muted);
}
.btn-destructive {
--btn-bg: var(--destructive);
--btn-fg: var(--color-white);
}
.btn-link {
--btn-bg: transparent;
--btn-fg: var(--link);
--btn-hover: transparent;
height: auto;
padding: 0;
}
.btn-link:hover {
color: var(--link-hover);
text-decoration: underline;
}
/* приглушённый значок (закрыть панель, высота таблицы, ширина): с .btn-ghost; при наведении - цвет текста */
.btn-muted {
--btn-fg: var(--muted-foreground);
}
.btn-muted:hover {
--btn-fg: var(--foreground);
}
/* значки в шапках панелей jQuery UI и строке «Вибрані» фильтров не раздвигают строку */
.ui-widget-header .btn-icon, .ui-state-highlight.ui-userdata .btn-icon {
margin-block: -2px;
}
.btn-sm {
height: var(--control-sm);
padding: 0 10px;
gap: 4px;
font-size: 12px;
}
.btn-lg {
height: var(--control-lg);
padding: 0 22px;
font-size: 16px;
}
.btn-icon {
width: var(--control);
padding: 0;
}
.btn-sm.btn-icon {
width: var(--control-sm);
}
.btn-xs {
height: var(--control-xs);
padding: 0 6px;
gap: 3px;
font-size: 11px;
}
.btn-xs.btn-icon {
width: var(--control-xs);
}
.btn-block {
display: flex;
width: 100%;
}
/* переключатель: выбранное состояние - цветом, без кружков и галочек */
.btn > input[type="radio"], .btn > input[type="checkbox"] {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.btn:has(> input:checked) {
--btn-bg: var(--btn-on, var(--primary));
--btn-fg: var(--btn-on-fg, var(--primary-foreground));
--btn-border: var(--btn-on, var(--primary));
--btn-hover: var(--btn-bg);
}
.btn:has(> input:focus-visible) {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
.btn:has(> input:disabled) {
opacity: .5;
pointer-events: none;
}
.btn-on-success {
--btn-on: var(--success);
--btn-on-fg: var(--color-white);
}
.btn-on-destructive {
--btn-on: var(--destructive);
--btn-on-fg: var(--color-white);
}
/* группа: кнопки впритык, общая рамка */
.btn-group {
display: inline-flex;
}
.btn-group > .btn:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-left: -1px;
}
.btn-group > .btn:has(> input:checked) {
z-index: 1;
}
.btn-group > .btn:not(:last-child) {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
input.input, select.input, textarea.input {
box-sizing: border-box;
height: var(--control);
padding: 0 10px;
border: 1px solid var(--input);
border-radius: var(--radius);
background-color: var(--field);
color: var(--foreground);
font-family: inherit;
font-size: 14px;
line-height: 1.2;
box-shadow: none;
transition: border-color .15s, box-shadow .15s;
vertical-align: middle;
}
input.input::placeholder, textarea.input::placeholder {
color: var(--muted-foreground);
}
input.input:focus, select.input:focus, textarea.input:focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
input.input:disabled, select.input:disabled, textarea.input:disabled {
opacity: .5;
cursor: not-allowed;
}
input.input:is([aria-invalid="true"], .invalid), select.input:is([aria-invalid="true"], .invalid),
textarea.input:is([aria-invalid="true"], .invalid) {
border-color: var(--destructive);
}
textarea.input {
height: auto;
min-height: 70px;
padding: 6px 10px;
line-height: 1.4;
}
select.input {
appearance: none;
padding-right: 28px;
/* стрелка - два треугольника цветом приглушённого текста: перекрашивается схемой */
background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
input.input-sm, select.input-sm {
height: var(--control-sm);
padding: 0 8px;
font-size: 12px;
}
select.input-sm {
padding-right: 24px;
background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
}
textarea.input-sm {
height: auto;
padding: 4px 8px;
}
/* Голые поля - без класса набора: вид .input, в кабинете и на панелях карты/таблицы (.ui-userdata, .map-toolbar) - sm. :where - нулевая специфичность, любое правило раздела
сильнее; поля таблиц jqGrid (свои компактные - main_adaptive.css), карты, редактора, select2 не трогаем */
:where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], textarea, select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
box-sizing: border-box;
height: var(--control);
padding: 0 10px;
border: 1px solid var(--input);
border-radius: var(--radius);
background-color: var(--field);
color: var(--foreground);
font-family: inherit;
font-size: 14px;
vertical-align: middle;
transition: border-color .15s, box-shadow .15s;
}
:where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], textarea, select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)):focus {
outline: none;
border-color: var(--ring);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 25%, transparent);
}
:where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], textarea, select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)):disabled {
opacity: .5;
}
:where(textarea):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
height: auto;
min-height: 70px;
padding: 6px 10px;
line-height: 1.4;
}
:where(select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
appearance: none;
padding-right: 28px;
background-image: linear-gradient(45deg, transparent 50%, var(--muted-foreground) 50%),
linear-gradient(135deg, var(--muted-foreground) 50%, transparent 50%);
background-position: calc(100% - 15px) 50%, calc(100% - 10px) 50%;
background-size: 5px 5px;
background-repeat: no-repeat;
}
:where(.page-cabinet, .ui-userdata, .map-toolbar) :where(input:not([type]), input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="search"], input[type="url"], input[type="number"], input[type="date"], textarea, select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
height: var(--control-sm);
padding: 0 8px;
font-size: 12px;
}
:where(.page-cabinet, .ui-userdata, .map-toolbar) :where(textarea):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
height: auto;
padding: 4px 8px;
}
:where(.page-cabinet, .ui-userdata, .map-toolbar) :where(select:not([multiple], [size])):where(:not(.input, [class*="select2"], [class*="jodit"], [class*="leaflet"], .ui-jqgrid *, .leaflet-container *, .jodit-container *, .select2-container *)) {
padding-right: 24px;
background-position: calc(100% - 13px) 50%, calc(100% - 8px) 50%;
}
input[type="checkbox"], input[type="radio"] {
accent-color: var(--primary);
}
.icon {
width: 16px;
height: 16px;
flex: none;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: -3px;
}
.btn-sm .icon {
width: 14px;
height: 14px;
}
.btn-xs .icon, .ui-jqgrid .ui-userdata .btn .icon {
width: 12px;
height: 12px;
}
.btn-lg .icon {
width: 18px;
height: 18px;
}
/* Голые кнопки - без класса набора (кабинет, старые формы): вид secondary sm. :where - нулевая специфичность, любое
правило раздела (.s11, .green...) сильнее; кнопки виджетов (jQuery UI, Jodit, Leaflet, select2, Fotorama) не трогаем */
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.btn, [class*="ui-"], [class*="jodit"], [class*="leaflet"], [class*="select2"], [class*="fotorama"], [class*="pm-button"])) {
box-sizing: border-box;
min-height: var(--control-sm);
padding: 3px 10px;
border: 1px solid transparent;
border-radius: var(--radius);
background: var(--secondary);
color: var(--secondary-foreground);
font-family: inherit;
font-size: 12px;
line-height: 1.2;
vertical-align: middle;
cursor: pointer;
transition: background-color .15s;
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.btn, [class*="ui-"], [class*="jodit"], [class*="leaflet"], [class*="select2"], [class*="fotorama"], [class*="pm-button"])):hover {
background: color-mix(in srgb, var(--secondary) 88%, var(--foreground));
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.btn, [class*="ui-"], [class*="jodit"], [class*="leaflet"], [class*="select2"], [class*="fotorama"], [class*="pm-button"])):focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
}
:where(button, input[type="button"], input[type="submit"], input[type="reset"]):where(:not(.btn, [class*="ui-"], [class*="jodit"], [class*="leaflet"], [class*="select2"], [class*="fotorama"], [class*="pm-button"])):disabled {
opacity: .5;
cursor: default;
}
/* .pm-button - кнопки плагина pm.buttons.js (панели карты и грида: «карта по списку», «вибрані»): вид outline sm,
нажатая (.pm-button_p) - акцент */
.pm-button {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: var(--control-sm);
padding: 3px 10px;
border: 1px solid var(--input);
border-radius: var(--radius);
background: var(--background);
color: var(--foreground);
font-size: 12px;
font-weight: normal;
line-height: 1.2;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition: background-color .15s;
}
.pm-button:hover {
background: var(--muted);
}
.pm-button.pm-button_p {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-foreground);
}
/* гриды: шапка и пейджер jqGrid (панель 28px, overflow:hidden) - размер xs */
.ui-jqgrid .ui-userdata .pm-button {
box-sizing: border-box; /* сбросы content-box таблицы (.ui-jqgrid *) */
min-height: var(--control-xs);
line-height: 1.2;
padding: 0 6px;
font-size: 11px;
}
.ui-jqgrid .ui-userdata .btn {
box-sizing: border-box;
height: var(--control-xs);
padding: 0 6px;
gap: 3px;
font-size: 11px;
}
/* значки, которые рисуют сами jQuery UI и jqGrid (закрыть диалог, свернуть грид) - Lucide маской цвета текста вместо
PNG-спрайта: