JS добавляет
иконку 📌 в каждый | . Клик → колонка становится sticky-left.
Состояние хранится в localStorage по data-pinnable id.
Класс .col-pinned ставится JS-ом на | и | закреплённой колонки. */
.col-pinned {
position: sticky;
left: 0;
background: white;
z-index: 1;
box-shadow: 1px 0 0 #e2e8f0;
}
thead .col-pinned { background: #f8fafc; z-index: 2; }
tbody tr:hover .col-pinned { background: #f8fafc; }
/* ─── sticky-first: первая колонка (PK/Артикул) всегда залипает слева ─── */
table.sticky-first th:first-child,
table.sticky-first td:first-child {
position: sticky;
left: 0;
background: #fff;
z-index: 1;
box-shadow: 1px 0 0 #e2e8f0;
}
table.sticky-first thead th:first-child { background: #f8fafc; z-index: 2; }
table.sticky-first tbody tr:hover td:first-child { background: #f8fafc; }
.pin-btn {
display: inline-flex;
align-items: center;
margin-left: 6px;
opacity: 0.25;
cursor: pointer;
background: none;
border: none;
padding: 2px;
font-size: 12px;
transition: opacity 0.15s, transform 0.15s;
vertical-align: middle;
}
.pin-btn:hover { opacity: 0.7; }
.pin-btn.active {
opacity: 1;
color: #2563eb;
transform: rotate(-15deg);
}
/* Заголовки пинабельных таблиц — не переносим текст на новую строку,
чтобы иконка 📌 не оказывалась под заголовком на узких колонках (ABC, XYZ).
На мобиле эта таблица всё равно превращается в карточки (responsive). */
table[data-pinnable] thead th { white-space: nowrap; }
/* На мобиле таблицы коллапсируются в карточки → пин не нужен */
@media (max-width: 640px) {
.pin-btn { display: none; }
}
/* Единое поле даты (date-field.js): курсор-указатель + скрытие "дд.мм.гггг" когда пусто.
При фокусе/вводе текст проявляется. Работает в Chromium/WebKit. */
input[type="date"] { cursor: pointer; }
input[type="date"].date-empty::-webkit-datetime-edit { color: transparent; }
input[type="date"].date-empty:focus::-webkit-datetime-edit { color: inherit; }
/* ─── Action-icons (Изменить/Отключить/Активировать на иконки) ─── */
.action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
margin: 0 2px;
padding: 0;
border-radius: 6px;
color: #64748b;
background: none;
border: none;
cursor: pointer;
transition: background 0.15s, color 0.15s;
}
.action-icon:hover { background: #f1f5f9; }
.action-icon.icon-edit:hover { color: #2563eb; background: #eff6ff; }
.action-icon.icon-disable:hover { color: #dc2626; background: #fef2f2; }
.action-icon.icon-enable:hover { color: #059669; background: #ecfdf5; }
.action-icon.icon-delete:hover { color: #b91c1c; background: #fef2f2; }
.action-icon svg { width: 16px; height: 16px; pointer-events: none; }
/* Кликабельные строки (row-click.js) — наведение слегка подсвечивает, курсор-указатель */
[data-href] { cursor: pointer; }
tr[data-href]:hover { background-color: #f8fafc; } /* slate-50 */
[data-href].card:hover, [data-search-row][data-href]:hover { background-color: #f8fafc; }
/* внутри кликабельной строки текстовые ссылки не подсвечиваем отдельным фоном */
tr[data-href] a:hover { background: transparent; }
/* Печать: скрываем интерактив/навигацию, оставляем документ (упаковочный лист и т.п.) */
@media print {
.no-print { display: none !important; }
/* убираем шапку приложения, меню и подвал — печатаем только документ */
body > header, body > nav, header, nav, footer, .site-nav { display: none !important; }
body { background: #fff !important; }
main { padding: 0 !important; }
/* документ во всю ширину, без теней/рамок-обрезки */
main > div { max-width: 100% !important; }
.print\:break-inside-avoid, table, tr, td, th { break-inside: avoid; }
* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
|