/** * Освеженный вид общего интерфейса: меню, панель над гридом, грид, карточка записи, общие окна, страница входа. * * Образец - Яндекс Почта: белые панели с крупным скруглением на светло-сером фоне, кнопки и поля с серой заливкой * без рамок, желтая главная кнопка, выбранный пункт - серая «таблетка», строки только с тонкими горизонтальными * разделителями, черный текст и жирные заголовки. * * Только оформление поверх прежних стилей (css/main.css, css/slickgrid/slick.grid.css, bootstrap). Разметка и * поведение не меняются; содержимое конфигураторов (установка, GFC и прочие) не затронуто - правила ограничены меню, * #slickGrid, #slickGridRecord, панелью .add_item_link, рамкой общих окон и формой входа. Подключается в * protected/views/layouts/head.php и configurator.php (там - только меню) после стилей приложения, перед css/scale.css. * Серый фон страницы - класс ui-grid-page у body в protected/views/layouts/slick.php. Подсветку текущего пункта меню * и название таблицы над гридом ставит js/ui-refresh.js. * * Цвета - переменные; тем три: светлая (по умолчанию), светлая приглушенная и темная, см. раздел «Темы» ниже. * * Размер текста грида и карточки - 0.9375rem: шрифт PT Sans заметно мельче запасного Arial/Helvetica, которым русский * текст рисовался, пока в css/fonts лежали неполные файлы PT Sans (см. css/fonts/google-fonts.css). */ /* светлая тема (по умолчанию); те же значения - у блоков с прежними стилями, которые в темной теме остаются светлыми (класс ui-legacy, раздел «Темная тема») */ :root, .ui-theme-dark .ui-legacy { --ui-accent: #223f81; --ui-primary: #ffdb4d; --ui-primary-hover: #ffd21f; --ui-on-primary: #1a1a1c; --ui-text: #1a1a1c; --ui-text-2: #5b5e66; --ui-muted: #8b8e97; --ui-text-disabled: #6c6f77; /* поверхности: панель, поле в фокусе (ячейка в правке, пустая галочка), фон страницы, заливки полей и кнопок, подложки шапок таблиц и строк при наведении, линии */ --ui-panel: #fff; --ui-field: #fff; --ui-bg: #f0f1f5; --ui-fill: #eceef2; --ui-fill-hover: #e0e2e8; --ui-fill-strong: #dcdfe6; --ui-fill-disabled: #f5f6f8; --ui-tint: #f7f8fa; --ui-tint-hover: #f5f6f8; --ui-hover: rgba(20, 22, 30, 0.04); --ui-active: rgba(20, 22, 30, 0.08); --ui-line: #e9eaee; --ui-line-strong: #cfd2d9; --ui-table-line: #e3e5ea; --ui-grid-top: #d3d3d3; --ui-check-line: #b4b8c1; --ui-check-line-hover: #7d818b; --ui-focus-ring: rgba(26, 26, 28, 0.1); --ui-focus-ring-strong: rgba(26, 26, 28, 0.14); --ui-focus-outline: rgba(26, 26, 28, 0.35); --ui-select: #fff6d1; --ui-select-line: #f0b000; --ui-danger: #d93025; --ui-danger-text: #b3261e; --ui-danger-bg: #fce8e6; --ui-danger-bg-hover: #f9d6d2; --ui-ok: #1a7f37; --ui-ok-text: #17603a; --ui-ok-bg: #e2f4e8; --ui-ok-bg-hover: #d2eddb; --ui-ok-line: #a8d5b5; --ui-ok-strong: #4a9c68; /* справка (значение взято из документа, сведения) и предупреждение (неоднозначно, пропуск) */ --ui-info-text: #123c63; --ui-info-bg: #e6f0fb; --ui-info-line: #9cc3ea; --ui-warn-text: #7a5a00; --ui-warn-bg: #fff6d1; --ui-warn-line: #e3c96b; /* рамка, которой в новом виде нет: у полей, кнопок и панелей со своими стилями (css/crm.css), где в прежнем виде она была */ --ui-no-line: transparent; --ui-radius: 8px; --ui-radius-panel: 14px; --ui-shadow: 0 10px 32px rgba(20, 22, 30, 0.16); --ui-font: 'PT Sans', Helvetica, Arial, sans-serif; } /* ============================== Темы ============================== */ /* Тему выбирает пользователь в шестеренке (js/ui-switch.js, protected/components/UiLook.php); это класс у . Без класса - светлая тема, значения выше. Тема меняет только переменные; то, что переменными не выразить (цвета состояний строк, картинки, значки), - в разделе «Темная тема» в конце файла. Те же три набора для страницы просмотра 3D-модели - в ea-viewer/css/app.css. */ /* Светлая приглушенная: панели светло-серые вместо белых - при многочасовой работе белый утомляет глаза. Вся шкала сдвинута вместе с панелью: фон страницы, заливки и линии темнее ровно настолько, чтобы различаться на ней, как в светлой теме различаются на белом. Белым остается только то, что должно выделяться: поле в фокусе, ячейка в правке, пустая галочка */ :root.ui-theme-soft { --ui-muted: #80838c; --ui-panel: #f3f3f5; --ui-bg: #e4e5ea; --ui-fill: #e4e6eb; --ui-fill-hover: #d8dae1; --ui-fill-strong: #cfd2da; --ui-fill-disabled: #ecedf0; --ui-tint: #eaebef; --ui-tint-hover: #e7e8ec; --ui-line: #dfe0e5; --ui-line-strong: #c6c9d1; --ui-table-line: #d8dae0; --ui-select: #fff3c2; } /* Темная: панели темно-серые на почти черном фоне, текст светлый, желтый акцент прежний (текст на нем темный) */ :root.ui-theme-dark { color-scheme: dark; --ui-accent: #8ab4ff; --ui-text: #e4e5e9; --ui-text-2: #a6aab4; --ui-muted: #838791; --ui-text-disabled: #8d919b; --ui-panel: #23252b; --ui-field: #17181c; --ui-bg: #17181c; --ui-fill: #30333b; --ui-fill-hover: #3a3d47; --ui-fill-strong: #464a55; --ui-fill-disabled: #292b32; --ui-tint: #2a2c33; --ui-tint-hover: #2e3138; --ui-hover: rgba(255, 255, 255, 0.05); --ui-active: rgba(255, 255, 255, 0.1); --ui-line: #33363e; --ui-line-strong: #484c57; --ui-table-line: #3a3d46; --ui-grid-top: #33363e; --ui-check-line: #6b6f7a; --ui-check-line-hover: #9a9ea8; --ui-focus-ring: rgba(255, 255, 255, 0.16); --ui-focus-ring-strong: rgba(255, 255, 255, 0.22); --ui-focus-outline: rgba(255, 255, 255, 0.5); --ui-select: #4a4122; --ui-danger: #f0695d; --ui-danger-text: #ffb1a8; --ui-danger-bg: #4b2623; --ui-danger-bg-hover: #5c2e2a; --ui-ok: #5cc878; --ui-ok-text: #8fe0a6; --ui-ok-bg: #1f3d2a; --ui-ok-bg-hover: #274c34; --ui-ok-line: #2f5a3f; --ui-info-text: #cfe3fa; --ui-info-bg: #1f3550; --ui-info-line: #3f6ea3; --ui-warn-text: #f0d48a; --ui-warn-bg: #3d3420; --ui-warn-line: #8a7430; --ui-shadow: 0 10px 32px rgba(0, 0, 0, 0.5); } /* ============================== Фон страницы с гридом ============================== */ /* содержимое страницы стоит абсолютно, тело высотой только в меню - растягиваем, иначе фон виден лишь под меню */ body.ui-grid-page {min-height: 100vh;background-color: var(--ui-bg);} /* ============================== Меню ============================== */ nav.navbar.nav-menu {background-color: var(--ui-bg) !important;border-bottom: 0;font-family: var(--ui-font);} nav.navbar.nav-menu .nav-link {margin-right: 0.125rem;padding: 0.375rem 0.75rem;color: var(--ui-text);border-radius: var(--ui-radius);transition: background-color 0.15s;} nav.navbar.nav-menu .nav-link:hover, nav.navbar.nav-menu .nav-item.show > .nav-link {color: var(--ui-text);background: var(--ui-fill-hover);} /* текущий раздел - «таблетка», без жирного: жирный меняет ширину пункта, и меню дергается */ nav.navbar.nav-menu .nav-link.ui-current {color: var(--ui-text);background: var(--ui-fill-strong);} nav.navbar.nav-menu .dropdown-menu {margin-top: 0.375rem;padding: 0.375rem;font-family: var(--ui-font);border: 0;border-radius: 12px;box-shadow: var(--ui-shadow);} nav.navbar.nav-menu .dropdown-item {padding: 0.375rem 0.75rem;color: var(--ui-text);border-radius: var(--ui-radius);} nav.navbar.nav-menu .dropdown-item:hover, nav.navbar.nav-menu .dropdown-item:focus {color: var(--ui-text);background: var(--ui-fill);} nav.navbar.nav-menu .dropdown-item.ui-current {color: var(--ui-text);background: var(--ui-fill-strong);} nav.navbar.nav-menu .dropdown-divider {margin: 0.375rem 0.5rem;border-top-color: var(--ui-line);} nav.navbar.nav-menu .btn-outline-primary {color: var(--ui-text);background: var(--ui-fill-hover);border-color: transparent;border-radius: var(--ui-radius);} nav.navbar.nav-menu .btn-outline-primary:hover {color: var(--ui-text);background: var(--ui-fill-strong);border-color: transparent;} /* ============================== Панель над гридом ============================== */ .add_item_link.btn-group > .btn {margin-left: 0.375rem;padding: 0.3125rem 0.8125rem;font-family: var(--ui-font);font-size: 0.9375rem;line-height: 1.35;color: var(--ui-text);background: var(--ui-fill-hover);border: 1px solid transparent;border-radius: var(--ui-radius) !important;box-shadow: none;transition: background-color 0.15s;} .add_item_link.btn-group > .btn i.fa, .add_item_link.btn-group > .btn i.fas, .add_item_link.btn-group > .btn i.far {margin-right: 0.1875rem;color: var(--ui-text-2);} .add_item_link.btn-group > .btn:hover {color: var(--ui-text);background: var(--ui-fill-strong);} .add_item_link.btn-group > .btn:focus {box-shadow: 0 0 0 2px var(--ui-focus-ring-strong);} .add_item_link.btn-group > .btn:disabled {color: var(--ui-muted);background: var(--ui-fill);opacity: 1;} .add_item_link.btn-group > .btn:disabled i {color: var(--ui-muted);} .add_item_link.btn-group > .btn #buffer-size {font-style: normal;color: inherit;} /* главное действие */ .add_item_link.btn-group > #addElement {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);} .add_item_link.btn-group > #addElement i {color: var(--ui-on-primary);} .add_item_link.btn-group > #addElement:hover {color: var(--ui-on-primary);background: var(--ui-primary-hover);} /* название таблицы слева от кнопок (js/ui-refresh.js); на телефоне панель в потоке, название не выводится */ .ui-table-title {display: none;} @media (min-width: 992px) { /* панель стояла вплотную к гриду, а под меню было пусто: панель выше, грид чуть ниже - зазоры равные. При полосе предупреждения под меню (ui-has-banner, js/ui-refresh.js) положение прежнее, название не выводится */ body.ui-grid-page:not(.ui-has-banner) .add_item_link.btn-group {top: 5.4375rem;} body.ui-grid-page:not(.ui-has-banner) #container {top: 8.4375rem !important;} body.ui-has-banner .add_item_link.btn-group > .ui-table-title {visibility: hidden;} .add_item_link.btn-group {left: 1.25rem;justify-content: flex-end;align-items: center;pointer-events: none;} .add_item_link.btn-group > * {pointer-events: auto;} .add_item_link.btn-group > .btn {flex: 0 0 auto;} .add_item_link.btn-group > .ui-table-title {display: block;flex: 1 1 auto;min-width: 0;margin-right: auto;padding-left: 0.25rem;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font: bold 1.375rem var(--ui-font);color: var(--ui-text);cursor: default;pointer-events: none;} .add_item_link.btn-group > .ui-table-title .ui-table-title__section {font-weight: normal;color: var(--ui-muted);} .add_item_link.btn-group > .ui-table-title .ui-table-title__section::after {content: "/";margin: 0 0.4375rem;color: var(--ui-line-strong);} } @media (max-width: 991px) { .add_item_link.btn-group {flex-wrap: wrap;} .add_item_link.btn-group > .btn {margin: 0 0.25rem 0.25rem 0;} } /* ============================== Грид ============================== */ /* панель со скруглением; карточка - вторая панель справа, между ними зазор */ #slickGrid {background: var(--ui-panel);border-radius: var(--ui-radius-panel);overflow: hidden;} #slickGrid .slick-header.ui-state-default {background: var(--ui-panel);border: 0;border-bottom: 1px solid var(--ui-line);} #slickGrid .slick-header-columns {background: var(--ui-panel);} #slickGrid .slick-header-column.ui-state-default {padding-left: 0.5rem !important;font-size: 0.875rem;font-weight: bold;color: var(--ui-text-2);background: var(--ui-panel);border-left-color: var(--ui-line);transition: background-color 0.15s, color 0.15s;} #slickGrid .slick-header-column.ui-state-default:hover, #slickGrid .slick-header-column.slick-header-column-active {color: var(--ui-text);background: var(--ui-fill);} #slickGrid .slick-header-column-sorted {font-style: normal;color: var(--ui-text);} /* значок сортировки: прежний - картинка 13x5 пикселей в рамке 0.5x0.3125rem, после перевода размеров в rem она обрезалась. Рисуем стрелку векторно, она тянется за масштабом */ #slickGrid .slick-sort-indicator {width: 0.5625rem;height: 0.5625rem;margin: 0.21875rem 0.25rem 0 0;background: center / contain no-repeat;} #slickGrid .slick-sort-indicator-asc {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1.5L9 8.5H1z' fill='%231a1a1c'/%3E%3C/svg%3E");} #slickGrid .slick-sort-indicator-desc {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 8.5L1 1.5h8z' fill='%231a1a1c'/%3E%3C/svg%3E");} /* строка фильтров: поля с серой заливкой без рамки */ #slickGrid .slick-headerrow.ui-state-default {background: var(--ui-panel);border: 0;border-bottom: 1px solid var(--ui-line);} #slickGrid .slick-headerrow-columns {background: var(--ui-panel);} #slickGrid .slick-headerrow-column.ui-state-default {background: var(--ui-panel);border-left-color: var(--ui-line);border-bottom: 0;} #slickGrid .slick-headerrow-column.l0 {border-left-color: transparent;} #slickGrid .slick-headerrow-column input, #slickGrid .slick-headerrow-column select {font-size: 0.9375rem !important;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: 6px !important;box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #slickGrid .slick-headerrow-column input:hover, #slickGrid .slick-headerrow-column select:hover {background: var(--ui-fill-hover);} #slickGrid .slick-headerrow-column input:focus, #slickGrid .slick-headerrow-column select:focus {background: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} /* строки: высота строки задается в js/slickgrid/dvaoblaka.slick.grid.js (rowHeights), здесь - высота текста */ #slickGrid .slick-cell {font-size: 0.9375rem;line-height: 1.5rem;text-indent: 0.5rem;color: var(--ui-text);border-left-color: var(--ui-line);border-bottom-color: var(--ui-line);} #slickGrid .slick-cell.l0, #slickGrid .slick-header-column.ui-state-default:first-child {border-left-color: transparent;} #slickGrid .slick-cell input[type="text"], #slickGrid .slick-cell input[type="file"], #slickGrid .slick-cell select {height: 1.5rem;margin-left: -0.5rem;font-size: 0.9375rem !important;line-height: 1.5rem;text-indent: 0.5rem;} /* наведение и выбранная строка не заливаются своим цветом: заливка строки - это цвет состояния записи (желтый, красный, зеленый и др. - css/main.css), и он должен оставаться виден. Наведение - легкое затемнение, выбранная строка - сплошная рамка насыщенным желтым (--ui-select-line: сам цвет акцента на белой и желтой строке виден плохо), нарисована поверх строки одним блоком, чтобы границы ячеек ее не разрывали; заливка строки не меняется */ #slickGrid .slick-row:hover .slick-cell {background-color: var(--ui-hover);} #slickGrid .slick-row.active .slick-cell {background-color: transparent;} #slickGrid .slick-row.active::after {content: "";position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 3;border: 2px solid var(--ui-select-line);pointer-events: none;} /* активная ячейка: в прежних стилях - рамка со сдвигом на пиксель вверх и вправо, она вылезала за рамку строки; здесь ячейка остается на месте и отмечена затемнением */ #slickGrid .slick-row.active .slick-cell.active {margin: 0;background-color: var(--ui-active);border-top: 0 !important;border-right: 0 !important;border-bottom-color: var(--ui-line) !important;border-left-color: var(--ui-line) !important;} #slickGrid .slick-row.active .slick-cell.l0.active {border-left-color: transparent !important;} /* у ячеек первой строки таблицы есть верхняя граница (css/landscape.css) - у активной ячейки она остается */ #slickGrid .slick-row.active[style="top:0px"] .slick-cell.active {border-top: 1px solid var(--ui-grid-top) !important;} #slickGrid .slick-row.active[style="top:0px"]::after {bottom: -1px;} /* правка в ячейке: белое поле во всю ячейку с темной рамкой, рамка лежит поверх рамки строки и совпадает с ней по высоте; собственная обводка фокуса у поля убрана - она обрезалась краями ячейки */ #slickGrid .slick-cell.editable {background-color: var(--ui-field);} #slickGrid .slick-row.active .slick-cell.active.editable {z-index: 4;background-color: var(--ui-field);outline: 2px solid var(--ui-text);outline-offset: -2px;} #slickGrid .slick-cell.editable input[type="text"]:focus, #slickGrid .slick-cell.editable select:focus {outline: none;box-shadow: none;} /* список в ячейке: отступ текста полем, а не text-indent - иначе длинное значение заезжает под стрелку */ #slickGrid .slick-cell select {padding-left: calc(0.5rem - 4px);padding-right: 0.375rem;text-indent: 0;text-overflow: ellipsis;} #slickGrid .slick-cell.l0 {text-indent: 0.375rem;} /* корзина в строке и в строке фильтров: значок без плашки */ #slickGrid .slick-cell .sl-delete-button, #slickGrid .slick-headerrow-column .deleteSelectedButton {min-width: 0;padding: 0 0.375rem;line-height: 1.5rem;text-indent: 0;color: var(--ui-muted);background: transparent;border-color: transparent;border-radius: 6px !important;box-shadow: none;transition: color 0.15s, background-color 0.15s;} #slickGrid .slick-cell .sl-delete-button:hover, #slickGrid .slick-headerrow-column .deleteSelectedButton:hover {color: var(--ui-danger);background: var(--ui-danger-bg);} /* галочки грида и карточки: скругленный квадрат, отмеченная - желтая с черной птичкой. Размер - целое число пикселей, иначе соседние галочки рисуются разного размера */ #slickGrid .slick-cell input[type="checkbox"], #slickGridRecord .rrow .value input[type="checkbox"] {-webkit-appearance: none;appearance: none;box-sizing: border-box;width: 14px;width: round(1.125rem, 1px);height: 14px;height: round(1.125rem, 1px);padding: 0;vertical-align: middle;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #slickGrid .slick-cell input[type="checkbox"] {margin: -2px 0.125rem 0 0;} #slickGridRecord .rrow .value input[type="checkbox"] {margin: 0.3125rem 0 0;} #slickGrid .slick-cell input[type="checkbox"]:hover, #slickGridRecord .rrow .value input[type="checkbox"]:not(:disabled):hover {border-color: var(--ui-check-line-hover);} #slickGrid .slick-cell input[type="checkbox"]:checked, #slickGridRecord .rrow .value input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #slickGridRecord .rrow .value input[type="checkbox"]:disabled {opacity: 0.55;cursor: default;} #slickGrid .slick-cell input[type="checkbox"]:focus-visible, #slickGridRecord .rrow .value input[type="checkbox"]:focus-visible {outline: 2px solid var(--ui-focus-outline);outline-offset: 1px;} /* переключатель вида интерфейса (css/ui-switch.css, js/ui-switch.js): в новом оформлении - как «Выйти» */ nav.navbar .ui-look__btn {width: 2.25rem;height: 2.25rem;color: var(--ui-text-2);background: var(--ui-fill);border-color: transparent;border-radius: var(--ui-radius);transition: background-color 0.15s, color 0.15s;} nav.navbar .ui-look__btn:hover, nav.navbar .ui-look__btn:focus {color: var(--ui-text);background: var(--ui-fill-strong);} nav.navbar .ui-look__menu {border: 0;border-radius: 12px;box-shadow: var(--ui-shadow);} nav.navbar .ui-look__head {color: var(--ui-muted);} nav.navbar .ui-look__item {color: var(--ui-text);border-radius: var(--ui-radius);} nav.navbar .ui-look__item:hover, nav.navbar .ui-look__item:focus {background: var(--ui-fill);} nav.navbar .ui-look__item.is-current::before {border-color: var(--ui-text);} nav.navbar .ui-look__head:not(:first-child) {border-top-color: var(--ui-line);} nav.navbar .ui-look__swatch {box-shadow: 0 0 0 1px var(--ui-check-line);} /* ============================== Карточка записи ============================== */ #slickGridRecord {padding: 1.25rem 1.5rem;background: var(--ui-panel);border: 0;border-radius: var(--ui-radius-panel);box-shadow: none;} @media (min-width: 992px) { #slickGridRecord {left: calc(70% + 0.75rem);} } #slickGridRecord h1 {font: bold 1.5rem var(--ui-font);color: var(--ui-text);} #slickGridRecord h2 {margin-top: 1.25rem;padding: 0.25rem 0 0.375rem;font: bold 1.125rem var(--ui-font);color: var(--ui-text);border-bottom: 0;} #slickGridRecord .record_actions {color: var(--ui-muted);transition: color 0.15s;} #slickGridRecord .record_actions:hover {color: var(--ui-text);} #slickGridRecord .rrow {font-size: 0.9375rem;border-bottom-color: var(--ui-line);} #slickGridRecord .rrow .rlabel {color: var(--ui-text-2);} #slickGridRecord .rrow .rlabel a {color: var(--ui-accent);} #slickGridRecord .rrow .value {color: var(--ui-text);} #slickGridRecord .rrow .value input[type="text"], #slickGridRecord .rrow .value input[type="email"], #slickGridRecord .rrow .value textarea {font-size: 0.9375rem;color: var(--ui-text);border-radius: 6px;transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;} /* редактируемое поле показывает заливку при наведении, поле только для чтения приглушено */ #slickGridRecord .rrow .value input[type="text"]:not(:disabled):hover, #slickGridRecord .rrow .value input[type="email"]:not(:disabled):hover, #slickGridRecord .rrow .value textarea:not(:disabled):hover {border-color: transparent;background: var(--ui-fill);} #slickGridRecord .rrow .value input[type="text"]:not(:disabled):focus, #slickGridRecord .rrow .value input[type="email"]:not(:disabled):focus, #slickGridRecord .rrow .value textarea:not(:disabled):focus {border-color: var(--ui-text);background: var(--ui-field);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #slickGridRecord .rrow .value input:disabled, #slickGridRecord .rrow .value textarea:disabled {color: var(--ui-text-disabled);-webkit-text-fill-color: var(--ui-text-disabled);opacity: 1;} #slickGridRecord .rrow .value select {font-size: 0.9375rem;color: var(--ui-text);background: var(--ui-fill);border-color: transparent;border-radius: 6px;transition: background-color 0.15s;} #slickGridRecord .rrow .value select:hover {background: var(--ui-fill-hover);} #slickGridRecord .rrow .value select:focus {border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} /* кнопки карточки (карточка КП и подобные): серая заливка без рамки */ #slickGridRecord .btn-white, #slickGridRecord .btn-lightgrey {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #slickGridRecord .btn-white:hover, #slickGridRecord .btn-lightgrey:hover {color: var(--ui-text);background: var(--ui-fill-strong);} #slickGridRecord .btn-white:focus, #slickGridRecord .btn-lightgrey:focus {box-shadow: 0 0 0 2px var(--ui-focus-ring-strong);} /* кнопки действий в шапке карточки (css/main.css, #slick-grid-card > .btn) и блока доступа - тот же вид */ #slick-grid-card > .btn, #slick-grid-card > a.btn, #slick-grid-card > button.btn, #slick-grid-card .crm-access-buttons .btn {color: var(--ui-text);background: var(--ui-fill);border-color: transparent;border-radius: var(--ui-radius);transition: background-color 0.15s;} #slick-grid-card > .btn:hover, #slick-grid-card .crm-access-buttons .btn:hover {color: var(--ui-text);background: var(--ui-fill-strong);border-color: transparent;} /* кнопки карточки КП: высота под две строки текста у всех, чтобы длинная подпись не сжималась и ряды были ровными */ #slickGridRecord .btn-card {display: inline-flex;align-items: center;justify-content: center;height: auto;min-height: 2.5rem;padding: 0.1875rem 0.5rem;line-height: 1.1;vertical-align: top;} /* кнопки идут парами в ряд (views/main/newCardInterface.php): каждая занимает свою половину целиком и обе одной высоты. Раньше кнопка была 95% ширины блока, ссылка - 85%, а значок ссылки прилипал к тексту */ #slickGridRecord .card-image-row-buttons {display: flex;align-items: stretch;gap: 0.5rem;min-height: 0 !important;margin-top: 0.5rem;} #slickGridRecord .card-image-row-buttons > .card-image-block {display: flex;float: none;flex: 0 0 calc(50% - 0.25rem);width: auto;min-width: 0;margin-top: 0;} #slickGridRecord .card-image-row-buttons .btn-card {flex: 1 1 auto;gap: 0.4375rem;width: 100% !important;min-width: 0;margin: 0;white-space: normal;} #slickGridRecord .card-image-row-buttons .btn-card > i {flex: none;font-size: 0.875rem;color: var(--ui-text-2);} /* поле файла (css/slickgrid/slick.grid.css) в тех же тонах */ #slickGridRecord .file-field__preview {border-color: var(--ui-line-strong);border-radius: var(--ui-radius);} #slickGridRecord .file-field__preview:hover {border-color: var(--ui-text-2);} #slickGridRecord .file-field .file-field__btn {color: var(--ui-text);background: var(--ui-fill);border-color: transparent;border-radius: var(--ui-radius);} #slickGridRecord .file-field .file-field__btn:hover {color: var(--ui-text);background: var(--ui-fill-strong);border-color: transparent;} #slickGridRecord .file-field .file-field__btn.delete-file:hover {color: var(--ui-danger);background: var(--ui-danger-bg);} #slickGridRecord .file-field .file-field__drop {color: var(--ui-text-2);border-color: var(--ui-line-strong);border-radius: var(--ui-radius);} #slickGridRecord .file-field .file-field__drop:hover, #slickGridRecord .file-field.is-dragover .file-field__drop {color: var(--ui-text);background: var(--ui-fill);border-color: var(--ui-text-2);} #slickGridRecord .file-field__file {color: var(--ui-accent);} /* ============================== Просмотр 3D-модели (проекты проектировщиков) ============================== */ /* рамка просмотра на странице проектов (layouts/slick.php, css/landscape.css): белая панель с шапкой, как карточка. В шапке - название вида (js/revit/model.js) и кнопки «обновить» / «закрыть»; раньше значки лежали поверх модели. Сама страница просмотра - ea-viewer/css/app.css */ #container #energyAnalysisModel {background: var(--ui-panel);border: 0;border-radius: var(--ui-radius-panel);} @media (min-width: 992px) { #container #energyAnalysisModel {left: calc(50% + 0.75rem);} } #container #energyAnalysisModel__title {position: absolute;top: 0;left: 1.25rem;right: 6rem;height: 3rem;overflow: hidden;font: bold 1.125rem/3rem var(--ui-font);color: var(--ui-text);white-space: nowrap;text-overflow: ellipsis;} #container #energyAnalysisModel iframe {position: absolute;top: 3rem;left: 0;width: 100%;height: calc(100% - 3rem);border: 0;border-top: 1px solid var(--ui-line);} #container #energyAnalysisModel__close, #container #energyAnalysisModel__reload {top: 0.5rem;left: auto;display: flex;align-items: center;justify-content: center;width: 2rem;height: 2rem;font-size: 0.9375rem;color: var(--ui-text-2);background: var(--ui-fill);border-radius: var(--ui-radius);transition: background-color 0.15s, color 0.15s;} #container #energyAnalysisModel__close {right: 0.75rem;} #container #energyAnalysisModel__reload {right: 3.25rem;} #container #energyAnalysisModel__close:hover, #container #energyAnalysisModel__reload:hover {color: var(--ui-text);background: var(--ui-fill-strong);} /* Страницы отчетов в отдельной вкладке: спецификации установки (views/configurator/specification*.php, automatics/automaticSpecification.php), спецификация производственного модуля (modules/cp/views/report), «Почему эта иконка?» (views/configurator/iconsExplain.php). Разметка - bootstrap (заголовки, таблицы, кнопки); класс ui-report корневому блоку ставит сама страница. Фон задан и блоку: браузер без :has() оставит страницу белой, а текст отчета шел бы по теме */ html:has(.ui-report), body:has(.ui-report) {background: var(--ui-panel);} .ui-report {padding-top: 1.25rem;padding-bottom: 2.5rem;font-family: var(--ui-font);font-size: 0.9375rem;color: var(--ui-text);background: var(--ui-panel);} .ui-report h1, .ui-report h2 {margin: 0 0 0.875rem;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} .ui-report h3 {margin: 0 0 0.625rem;font: bold 1.1875rem/1.3 var(--ui-font);color: var(--ui-text);} .ui-report h4, .ui-report h5 {margin: 0 0 0.5rem;font: bold 1.0625rem/1.3 var(--ui-font);color: var(--ui-text);} .ui-report h4.warning-text {color: var(--ui-danger-text);} .ui-report a:not(.btn) {color: var(--ui-accent);} .ui-report .table {color: var(--ui-text);border-color: var(--ui-table-line);} .ui-report .table th, .ui-report .table td {border-color: var(--ui-table-line);} .ui-report .table thead th {border-bottom-width: 1px;} .ui-report .table th {color: var(--ui-text);background: var(--ui-tint);} .ui-report .table-hover tbody tr:hover {color: var(--ui-text);background-color: var(--ui-hover);} /* выбранная строка (в разметке задана цветом) */ .ui-report tr[style*="#d4edda"] {background: var(--ui-ok-bg) !important;} .ui-report .btn {padding: 0.4375rem 1rem;font: 0.9375rem var(--ui-font);color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} .ui-report .btn:hover, .ui-report .btn:focus, .ui-report .btn:active {color: var(--ui-text) !important;background: var(--ui-fill-strong) !important;border-color: transparent !important;box-shadow: none !important;} .ui-report .btn-primary {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);} .ui-report .btn-primary:hover, .ui-report .btn-primary:focus, .ui-report .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;} .ui-report .conf_image {padding: 0 0 0.75rem;} .ui-report img {max-width: 100%;height: auto;} /* чертеж установки на светлом листе: в приглушенной теме - в цвет панели */ .ui-theme-soft .ui-report img {mix-blend-mode: multiply;} /* журнал построения энергетической модели (modules/ea/views/calculator/status.php, отдельная вкладка) */ .ui-log-page {max-width: 60rem;margin: 0 auto;padding: 0 1.5rem 2.5rem;font-family: var(--ui-font);color: var(--ui-text);} .ui-log-page__head {position: sticky;top: 0;z-index: 2;display: flex;align-items: center;gap: 1rem;padding: 1.125rem 0 0.875rem;background: var(--ui-panel);border-bottom: 1px solid var(--ui-line);} .ui-log-page__head h1 {flex: 1 1 auto;min-width: 0;margin: 0;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} .ui-log-page .btn-primary {flex: none;padding: 0.4375rem 1.25rem;font: bold 0.9375rem var(--ui-font);color: var(--ui-on-primary);background: var(--ui-primary);border: 0;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} .ui-log-page .btn-primary:hover, .ui-log-page .btn-primary:focus, .ui-log-page .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;box-shadow: none !important;} .ui-log-page__list {margin: 0.75rem 0 0;padding-left: 3.75rem;font-size: 0.9375rem;line-height: 1.6;} .ui-log-page__list li {padding-left: 0.5rem;} .ui-log-page__list li::marker {color: var(--ui-muted);} .ui-log-page__list a {color: var(--ui-accent);} .ui-log-page__empty {margin: 1rem 0 0;font-size: 0.9375rem;color: var(--ui-text-2);} /* ============================== Окна и выпадающие списки ============================== */ /* только окна общего интерфейса: окна конфигураторов не трогаем */ #universeModal .modal-content, #modal-image-popup .modal-content, #ea-ifc-modal .modal-content, #ea-views-list-modal .modal-content, #google-maps .modal-content {border: 0;border-radius: 16px;box-shadow: 0 20px 48px rgba(20, 22, 30, 0.26);} #universeModal .modal-header, #modal-image-popup .modal-header, #ea-ifc-modal .modal-header, #ea-views-list-modal .modal-header, #google-maps .modal-header {border-bottom-color: var(--ui-line);} /* окна проектировщика (layouts/slick.php): загрузка IFC и список видов проекта */ #ea-ifc-modal .modal-header, #ea-views-list-modal .modal-header {align-items: center;padding: 1rem 1.25rem;} #ea-ifc-modal .modal-title, #ea-views-list-modal .modal-title {font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #ea-ifc-modal .modal-body, #ea-views-list-modal .modal-body {padding: 1rem 1.25rem 1.25rem;font-family: var(--ui-font);font-size: 0.9375rem;color: var(--ui-text);} #ea-ifc-modal label {display: block;margin: 0 0 0.375rem;font-size: 0.9375rem;color: var(--ui-text-2);} #ea-ifc-modal label .required {color: var(--ui-danger);} #ea-ifc-modal input[type="file"] {display: block;box-sizing: border-box;width: 100% !important;height: auto !important;margin: 0 0 1rem;padding: 0.5rem 0.625rem;font-size: 0.9375rem;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;} #ea-ifc-modal .mb-3 {margin-bottom: 0 !important;} #ea-ifc-modal .btn-primary {padding: 0.4375rem 1.25rem;font: bold 0.9375rem var(--ui-font);color: var(--ui-on-primary);background: var(--ui-primary);border: 0;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #ea-ifc-modal .btn-primary:hover, #ea-ifc-modal .btn-primary:focus, #ea-ifc-modal .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;box-shadow: none !important;} #ea-views-list-modal .modal-body h4 {margin: 0;padding: 0.375rem 0;font: 1rem var(--ui-font);} #ea-views-list-modal .modal-body a {color: var(--ui-accent);} #universeModal .modal-footer, #google-maps .modal-footer {border-top-color: var(--ui-line);} .ui-autocomplete.ui-menu {padding: 0.375rem;border: 0;border-radius: 12px;box-shadow: var(--ui-shadow);} .ui-autocomplete.ui-menu .ui-menu-item a, .ui-autocomplete.ui-menu .ui-menu-item > div {border-radius: var(--ui-radius);} /* ============================== Индикаторы загрузки ============================== */ /* Один вид на весь портал: кольцо - серая дорожка и желтая дуга. Кольцо без подписи - заглушка в блоке, пока его содержимое подгружается (window.spinnerHtml, UiLook::spinnerHtml()), и поверх страницы на время расчета (GFC, расчет инженерных систем); подпись есть только там, где она сообщает, что именно происходит. */ @keyframes ui-spin {to {transform: rotate(360deg);}} body .spinner-border {box-sizing: border-box;width: 1.75rem;height: 1.75rem;vertical-align: middle;border: 3px solid var(--ui-fill-strong) !important;border-top-color: var(--ui-select-line) !important;border-radius: 50% !important;animation: ui-spin 0.8s linear infinite;} body .spinner-border.spinner-border-sm {width: 1rem;height: 1rem;border-width: 2px !important;} /* таблица открывается: пока в блоке таблицы ничего нет, в его центре - кольцо */ #slickGrid:empty::before {content: "";position: absolute;top: calc(50% - 0.875rem);left: calc(50% - 0.875rem);box-sizing: border-box;width: 1.75rem;height: 1.75rem;border: 3px solid var(--ui-fill-strong);border-top-color: var(--ui-select-line);border-radius: 50%;animation: ui-spin 0.8s linear infinite;} /* загрузка строк таблицы: кольцо в белом кружке по центру таблицы, без подписи */ .loading-indicator {z-index: 1000;padding: 0.625rem;font-family: var(--ui-font);background: var(--ui-panel);border-radius: 999px;box-shadow: var(--ui-shadow);} .loading-indicator label {display: flex;align-items: center;gap: 0.625rem;margin: 0;} .loading-indicator label::before {content: "";box-sizing: border-box;flex: 0 0 auto;width: 1.5rem;height: 1.5rem;border: 3px solid var(--ui-fill-strong);border-top-color: var(--ui-select-line);border-radius: 50%;animation: ui-spin 0.8s linear infinite;} .loading-indicator h1 {display: none;margin: 0;font: normal 1rem/1.25 var(--ui-font);color: var(--ui-text);} /* сообщение о дублировании: тот же блок с текстом; кольцо - пока текста еще нет */ .loading-indicator#duplicate_msg {padding: 0.625rem 1.125rem;} .loading-indicator#duplicate_msg h1:not(:empty) {display: block;} .loading-indicator#duplicate_msg label:has(h1:not(:empty))::before {display: none;} /* расчет инженерных систем: полупрозрачный слой поверх страницы */ #global-overlay {font-family: var(--ui-font);color: var(--ui-text-2);} /* пересчет в GFC: страница бледнеет, кольцо по центру (слой .gfc-busy-overlay ставит gfc/views/layout.php) */ #page.gfc-busy {opacity: 0.5;} /* тени без смещения: блок вращается вместе с кольцом */ .gfc-busy-overlay .spinner-border {background: var(--ui-panel);box-shadow: 0 0 0 0.625rem var(--ui-panel), 0 0 1.5rem 0.625rem rgba(20, 22, 30, 0.2);} /* ============================== Страница-форма (курсы валют и коэффициенты) ============================== */ /* обертка .ui-form-page в protected/views/nomenclature/priceset*.php; классы .conf_row общие с конфигураторами, поэтому все правила - только внутри обертки. Фон страницы и отступ сверху - через :has (старый браузер оставит белый фон, форма при этом та же) */ body:has(.ui-form-page) {min-height: 100vh;background-color: var(--ui-bg);} body:has(.ui-form-page) #container {top: 5.75rem !important;overflow: auto;} .ui-form-page {max-width: 46rem;padding: 1.5rem 1.75rem 1.25rem;font-family: var(--ui-font);background: var(--ui-panel);border-radius: var(--ui-radius-panel);} .ui-form-page #page {height: auto;padding-right: 0;overflow: visible;} .ui-form-page h2 {margin: 0 0 0.75rem;font: bold 1.5rem var(--ui-font);color: var(--ui-text);} .ui-form-page h4, .ui-form-page h5 {flex: 1 1 100%;margin: 0.75rem 0 0;font: bold 1.125rem var(--ui-font);color: var(--ui-text);} .ui-form-page h5 {font-size: 1rem;color: var(--ui-text-2);} .ui-form-page .conf_row {display: flex;align-items: center;gap: 1.25rem;padding: 0.5rem 0;border-top: 1px solid var(--ui-line);} .ui-form-page form > .conf_row:first-of-type {border-top: 0;} .ui-form-page .conf_col_label {float: none;flex: 1 1 auto;width: auto;min-width: 0;font-size: 0.9375rem;line-height: 1.35;color: var(--ui-text);} .ui-form-page .conf_col_label label {margin: 0;} .ui-form-page .conf_col_label .required {color: var(--ui-danger);} .ui-form-page .conf_col_input {float: none;flex: 0 0 16rem;width: 16rem;} .ui-form-page .conf_col_input input[type="text"], .ui-form-page .conf_col_input select {height: 2.25rem;margin: 0;padding: 0 0.75rem;font-size: 0.9375rem;line-height: normal;text-indent: 0;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} .ui-form-page .conf_col_input input[type="text"]:hover, .ui-form-page .conf_col_input select:hover {background: var(--ui-fill-hover);} .ui-form-page .conf_col_input input[type="text"]:focus, .ui-form-page .conf_col_input select:focus {background: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} .ui-form-page .conf_col_input input.error {border-color: var(--ui-danger);} .ui-form-page .conf_col_input input[type="checkbox"] {-webkit-appearance: none;appearance: none;display: block;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);margin: 0;padding: 0;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} .ui-form-page .conf_col_input input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} .ui-form-page .conf_col_input input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} .ui-form-page .errorMessage, .ui-form-page .errorSummary {margin-top: 0.25rem;font-size: 0.875rem;color: var(--ui-danger);} .ui-form-page .errorSummary {margin: 0 0 0.75rem;padding: 0.625rem 0.875rem;background: var(--ui-danger-bg);border-radius: var(--ui-radius);} .ui-form-page .errorSummary ul {margin: 0.25rem 0 0;padding-left: 1.125rem;} .ui-form-page .btn-primary {padding: 0.4375rem 1.25rem;font: bold 0.9375rem var(--ui-font);color: var(--ui-on-primary);background: var(--ui-primary);border: 0;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} .ui-form-page .btn-primary:hover, .ui-form-page .btn-primary:focus, .ui-form-page .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;box-shadow: none !important;} .ui-form-page .ui-form-note {margin-top: 0.375rem;font-size: 0.875rem;color: var(--ui-text-2);} .ui-form-page .ui-form-note a {color: var(--ui-accent);} /* широкая форма (настройка мануала): подпись узкой колонкой слева, поле на всю оставшуюся ширину */ .ui-form-page.ui-form-page--wide {max-width: 64rem;} .ui-form-page--wide .conf_row {align-items: flex-start;} .ui-form-page--wide .conf_col_label {flex: 0 0 11rem;padding-top: 0.5rem;color: var(--ui-text-2);} .ui-form-page--wide .conf_col_input {flex: 1 1 auto;width: auto;min-width: 0;} .ui-form-page--wide .conf_col_input input[type="text"] {width: 100% !important;} .ui-form-page .conf_col_input textarea {display: block;box-sizing: border-box;width: 100%;margin: 0;padding: 0.625rem 0.75rem;font: 0.9375rem/1.45 var(--ui-font);color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;resize: vertical;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} .ui-form-page .conf_col_input textarea:hover {background: var(--ui-fill-hover);} .ui-form-page .conf_col_input textarea:focus {background: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} .ui-form-page .conf_col_input input[type="file"] {display: block;max-width: 100%;margin: 0;font: 0.9375rem var(--ui-font);color: var(--ui-text-2);background: transparent;} .ui-form-page .conf_col_input input[type="file"]::file-selector-button {margin-right: 0.75rem;padding: 0.4375rem 1rem;font: 0.9375rem var(--ui-font);color: var(--ui-text);background: var(--ui-fill-hover);border: 0;border-radius: var(--ui-radius);cursor: pointer;transition: background-color 0.15s;} .ui-form-page .conf_col_input input[type="file"]::file-selector-button:hover {background: var(--ui-fill-strong);} @media (max-width: 767px) { .ui-form-page--wide .conf_col_label {flex: 1 1 100%;padding-top: 0;} .ui-form-page .conf_row {flex-wrap: wrap;gap: 0.375rem;} .ui-form-page .conf_col_input {flex: 1 1 100%;width: auto;} } /* ============================== Страница мануала ============================== */ /* protected/views/main/informationPage*.php, выводится в область грида (#slickGrid). Прокручивается сам блок: у панели грида overflow скрыт ради скругления, а js ставит ей прокрутку только при открытой карточке. #slickGrid в селекторах со скруглением - чтобы перекрыть общее правило #slickGrid * {border-radius} */ #slickGrid:has(> .ui-manual) {overflow: hidden !important;} .ui-manual {height: 100%;overflow-y: auto;font-family: var(--ui-font);color: var(--ui-text);} .ui-manual__body {max-width: 60rem;padding: 1.5rem 1.75rem 1.75rem;} .ui-manual__title {margin: 0 0 0.875rem;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} .ui-manual__text {max-width: 52rem;font-size: 1rem;line-height: 1.55;white-space: pre-line;color: var(--ui-text);} .ui-manual__text a, .ui-manual__link {color: var(--ui-accent);} .ui-manual__section {margin-top: 1.5rem;} .ui-manual__subtitle {margin: 0 0 0.625rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);} #slickGrid .ui-manual__video {display: block;width: 100%;max-width: 52rem;max-height: 70vh;background: #000;border-radius: 12px;} .ui-manual__link {display: block;width: fit-content;margin-bottom: 0.375rem;font-size: 1rem;} .ui-manual__link:hover {color: var(--ui-accent);text-decoration: underline;} .ui-manual__link + .ui-manual__video {margin-top: 0.75rem;} .ui-manual__logos {display: flex;flex-wrap: wrap;align-items: center;gap: 1rem 1.75rem;} .ui-manual__logos img {width: 9.375rem;height: auto;} #slickGrid .ui-manual__option {display: flex;align-items: flex-start;gap: 0.625rem;width: fit-content;max-width: 100%;margin: 0 0 1rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;line-height: 1.35;color: var(--ui-text);background: var(--ui-fill);border-radius: var(--ui-radius);cursor: pointer;transition: background-color 0.15s;} .ui-manual__option:hover {background: var(--ui-fill-hover);} .ui-manual__option input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);margin: 0.0625rem 0 0;padding: 0;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} .ui-manual__option input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} .ui-manual__option input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} @media (max-width: 767px) { .ui-manual__body {padding: 1rem 1rem 1.25rem;} } /* ============================== Остальные конфигураторы (общий слой) ============================== */ /* Расчеты оборудования в области грида, кроме вентустановки и GFC: фанкойл, чиллер, воздухораспределители, теплообменник, радиатор, ККБ, компакт, завеса и другие. У них одна схема: #page с формой из строк .conf_row > .conf_col_label + .conf_col_input, результат - таблицей .table либо блоком .conf_result > .attribute_table. Класс ui-conf у #page ставит js/ui-refresh.js по ключу конфигуратора в адресе: у страницы результата своего класса нет, а #page есть и у других страниц. Разметка не меняется. Строки формы оставлены на float (как в css/main.css), без flex: скрипты конфигураторов прячут и показывают строки через display none / block, .hide(), .d-none - любой способ продолжает работать */ #page.ui-conf {box-sizing: border-box;padding: 1.25rem 1.75rem 1.75rem;font-family: var(--ui-font);font-size: 0.9375rem;color: var(--ui-text);} #page.ui-conf h2 {margin: 0 0 0.875rem;padding: 0;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} #page.ui-conf h2:empty {display: none;} #page.ui-conf h3 {margin: 1.25rem 0 0.75rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #page.ui-conf h4 {margin: 1.25rem 0 0.625rem;padding: 0;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);} #page.ui-conf h5 {margin: 1rem 0 0.5rem;font: bold 1rem/1.3 var(--ui-font);color: var(--ui-text);} #page.ui-conf h2.heading, #page.ui-conf .heading {height: auto;margin: 0;padding: 1rem 0 0.5rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);border-bottom: 1px solid var(--ui-line-strong);} #page.ui-conf hr {max-width: 56rem;margin: 1.25rem 0;border: 0;border-top: 1px solid var(--ui-line);} #page.ui-conf .alert {box-sizing: border-box;max-width: 56rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;border: 0;border-radius: var(--ui-radius);} #page.ui-conf .errors_list, #page.ui-conf .errorSummary, #page.ui-conf #js-errors:not(:empty) {box-sizing: border-box;max-width: 56rem;margin: 0 0 0.75rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;color: var(--ui-danger-text);background: var(--ui-danger-bg);border: 0;border-radius: var(--ui-radius);clear: none;} #page.ui-conf .errorSummary ul {margin: 0.25rem 0 0;padding-left: 1.125rem;} #page.ui-conf .errorMessage {margin-top: 0.25rem;font-size: 0.8125rem;color: var(--ui-danger);} /* кнопки: расчет - желтая главная, остальные серые */ #page.ui-conf .btn {font-size: 0.9375rem;} #page.ui-conf .btn-lightgrey, #page.ui-conf .btn-default, #page.ui-conf .btn-secondary, #page.ui-conf .btn-success, #page.ui-conf .btn-info {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page.ui-conf .btn-lightgrey:hover, #page.ui-conf .btn-default:hover, #page.ui-conf .btn-secondary:hover, #page.ui-conf .btn-success:hover, #page.ui-conf .btn-success:focus, #page.ui-conf .btn-success:active, #page.ui-conf .btn-info:hover, #page.ui-conf .btn-info:focus, #page.ui-conf .btn-info:active {color: var(--ui-text) !important;background: var(--ui-fill-strong) !important;border-color: transparent !important;box-shadow: none !important;} #page.ui-conf .btn-primary {padding: 0.5rem 1.5rem;font: bold 1rem var(--ui-font);color: var(--ui-on-primary);background: var(--ui-primary);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page.ui-conf .btn-primary:hover, #page.ui-conf .btn-primary:focus, #page.ui-conf .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;border-color: transparent !important;box-shadow: none !important;} #page.ui-conf .btn:disabled {opacity: 0.6;} /* ссылки-кнопки под расчетом (спецификация, выгрузки, техданные): серые и одного размера, какой бы цветной класс ни стоял в разметке (btn-primary, btn-danger) - желтой остается только кнопка расчета */ #page.ui-conf a.btn-primary, #page.ui-conf a.btn-success, #page.ui-conf a.btn-danger, #page.ui-conf a.btn-warning {padding: 0.375rem 0.75rem;font: normal 0.9375rem/1.5 var(--ui-font);color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page.ui-conf a.btn-primary:hover, #page.ui-conf a.btn-primary:focus, #page.ui-conf a.btn-primary:active, #page.ui-conf a.btn-danger:hover, #page.ui-conf a.btn-danger:focus, #page.ui-conf a.btn-danger:active, #page.ui-conf a.btn-warning:hover, #page.ui-conf a.btn-warning:focus, #page.ui-conf a.btn-warning:active {color: var(--ui-text) !important;background: var(--ui-fill-strong) !important;border-color: transparent !important;box-shadow: none !important;} #page.ui-conf form > .btn-primary, #page.ui-conf form > .conf_row > .btn-primary:only-child {margin-top: 0.625rem;} #page.ui-conf #close_configurator, #page.ui-conf #back_to_configurator {min-width: 2.25rem;height: 2.25rem;padding: 0 0.625rem;color: var(--ui-text-2);} /* форма */ #page.ui-conf form {max-width: 56rem;} #page.ui-conf .conf_row {padding: 0.3125rem 0;border-top: 1px solid var(--ui-line);} #page.ui-conf .conf_row::after {content: "";display: block;clear: both;} #page.ui-conf .conf_col_label {display: flex;align-items: center;width: 45%;min-height: 2.125rem;padding-right: 1rem;box-sizing: border-box;font-size: 0.9375rem;line-height: 1.3;color: var(--ui-text);} #page.ui-conf .conf_col_label label {margin: 0;color: var(--ui-text);} #page.ui-conf .conf_col_label span.required {color: var(--ui-danger);} /* значок «сохранить как значение по умолчанию» (виден администратору): свое место слева от подписи, мелкий и бледный - без этого крупный значок стоял вплотную к тексту */ #page.ui-conf .conf_col_label .default-value {flex: 0 0 auto;width: 1.5rem;margin: 0 !important;font-size: 0.8125rem;line-height: 2.125rem;text-align: left;color: var(--ui-check-line);cursor: pointer;transition: color 0.15s;} #page.ui-conf .conf_col_label .default-value:hover {color: var(--ui-text);} #page.ui-conf .conf_col_input {width: 55%;} #page.ui-conf .conf_col_input input[type="text"], #page.ui-conf .conf_col_input input[type="number"], #page.ui-conf .conf_col_input select, #page.ui-conf .conf_col_input textarea {height: 2.125rem;margin: 0;padding: 0 0.75rem;font-size: 0.9375rem;line-height: normal;text-indent: 0;color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #page.ui-conf .conf_col_input select {padding-left: 0.5rem;} #page.ui-conf .conf_col_input textarea {height: auto;padding: 0.5rem 0.75rem;line-height: 1.4;} #page.ui-conf .conf_col_input input[type="text"]:hover, #page.ui-conf .conf_col_input input[type="number"]:hover, #page.ui-conf .conf_col_input select:hover, #page.ui-conf .conf_col_input textarea:hover {background-color: var(--ui-fill-hover);} #page.ui-conf .conf_col_input input[type="text"]:focus, #page.ui-conf .conf_col_input input[type="number"]:focus, #page.ui-conf .conf_col_input select:focus, #page.ui-conf .conf_col_input textarea:focus {background-color: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #page.ui-conf .conf_col_input input:disabled, #page.ui-conf .conf_col_input input[readonly], #page.ui-conf .conf_col_input select:disabled, #page.ui-conf .conf_col_input textarea:disabled {color: var(--ui-muted);background-color: var(--ui-fill-disabled);} #page.ui-conf .conf_col_input input.error, #page.ui-conf .conf_col_input select.error {border-color: var(--ui-danger);} #page.ui-conf input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);padding: 0;vertical-align: middle;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #page.ui-conf input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} #page.ui-conf input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #page.ui-conf input[type="checkbox"]:disabled {opacity: 0.55;cursor: default;} #page.ui-conf .conf_col_input > input[type="checkbox"] {display: inline-block;margin: 0.4375rem 0 0;} /* результат таблицей */ #page.ui-conf table.table {width: auto;min-width: min(100%, 56rem);max-width: 100%;margin: 0.75rem 0;font-size: 0.9375rem;color: var(--ui-text);border: 0;} #page.ui-conf table.table th, #page.ui-conf table.table td {padding: 0.4375rem 0.625rem;vertical-align: middle;border: 1px solid var(--ui-table-line);border-radius: 0;} #page.ui-conf table.table th {font-weight: bold;color: var(--ui-text);background-color: var(--ui-tint);} #page.ui-conf table.table-striped tbody tr:nth-of-type(odd) {background-color: transparent;} #page.ui-conf table.table-hover tbody tr:hover {background-color: var(--ui-tint-hover);} /* результат блоком .conf_result (форма - подбор - техданные) */ #page.ui-conf .conf_result {font-size: 0.9375rem;color: var(--ui-text);} #page.ui-conf .conf_result .attribute_table {margin-bottom: 0.25rem;} #page.ui-conf .conf_result .attribute_table th, #page.ui-conf .conf_result .attribute_table td {padding: 0.3125rem 0.5rem;border-color: var(--ui-table-line);border-radius: 0;} #page.ui-conf .conf_result .attribute_table th {color: var(--ui-text-2);background-color: var(--ui-tint);} #page.ui-conf .conf_result .subtable {color: var(--ui-text-2);} #page.ui-conf .conf_result .subtable td {border-color: var(--ui-table-line);border-radius: 0;} #page.ui-conf .conf_result input[type="text"], #page.ui-conf .conf_result select {height: 2rem;padding: 0 0.625rem;font-size: 0.9375rem;text-indent: 0;color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} @media (max-width: 767px) { #page.ui-conf {padding: 1rem;} #page.ui-conf .conf_col_label, #page.ui-conf .conf_col_input {float: none;width: auto;padding-right: 0;} } /* отдельные страницы расчетов проектировщика (layouts/calc-page.php: противодымная вентиляция; расчеты инженерных систем - modules/esc/views/calculator/interface.php): та же форма, но страница целиком, без меню и панели */ body.ui-calc-page {background: var(--ui-panel);} /* страницы без общего макета (расчет инженерных систем - макет configurator-without-header, журнал построения модели): фон страницы тоже цвета панели */ html:has(body.ui-calc-page), html:has(#page.ui-esc), body:has(#page.ui-esc), html:has(.ui-log-page), body:has(.ui-log-page) {background: var(--ui-panel);} body.ui-calc-page > #page {height: auto;min-height: 100vh;overflow: visible;} body.ui-calc-page > #page > #container {position: static !important;} #page.ui-conf form > h4 {max-width: 56rem;} #page.ui-conf .conf_result_list, #page.ui-conf .row ul {margin: 0.25rem 0 0.75rem;padding-left: 1.25rem;list-style: none;line-height: 1.6;} #page.ui-conf .row ul ul {margin: 0;} /* расчет инженерной системы: блок результата идет отдельным блоком под формой */ #page.ui-esc > div:not(.configuration_input) > h2 {margin-top: 1.5rem;} #page.ui-esc > div > ul {margin: 0 0 0.75rem;padding-left: 1.25rem;line-height: 1.5;} #page.ui-esc > div > p {max-width: 56rem;} /* ошибка расчета (сервис вернул ошибку или не ответил) - заметной плашкой */ #page.ui-esc p.ui-esc-error {box-sizing: border-box;max-width: 44.75rem;margin: 0.5rem 0 1rem;padding: 0.75rem 1rem;line-height: 1.5;color: var(--ui-text);background: var(--ui-danger-bg);border-left: 3px solid var(--ui-danger);border-radius: var(--ui-radius);} #page.ui-esc p.ui-esc-error b {font-weight: normal;} /* список видов расчета */ .ui-calc-list {max-width: 60rem;} .ui-calc-list ul {margin: 0;padding: 0;list-style: none;} .ui-calc-list li {border-top: 1px solid var(--ui-line);} .ui-calc-list li:first-child {border-top: 0;} .ui-calc-list a {display: flex;align-items: baseline;gap: 0.75rem;padding: 0.5rem 0.5rem 0.5rem 0.25rem;font-size: 0.9375rem;line-height: 1.35;color: var(--ui-text);text-decoration: none;border-radius: var(--ui-radius);transition: background-color 0.15s;} .ui-calc-list a:hover {color: var(--ui-text);text-decoration: none;background: var(--ui-fill);} .ui-calc-list a > span {flex: 0 0 1.5rem;color: var(--ui-muted);text-align: right;} /* ============================== Конфигуратор VRF-системы ============================== */ /* views/vrf/configurator.php: схема рисуется скриптом по координатам, поэтому поле схемы не трогаем - только кнопки над ним (класс ui-vrf-bar их блоку ставит js/ui-refresh.js) */ .ui-vrf-bar {padding: 0.75rem 0.75rem 0 0;} .ui-vrf-bar::after {content: "";display: block;clear: both;} #slickGrid .ui-vrf-bar .btn {font-size: 0.9375rem;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #slickGrid .ui-vrf-bar .btn:hover {color: var(--ui-text);background: var(--ui-fill-strong);} #slickGrid .ui-vrf-bar #end-system-calculation, #slickGrid .ui-vrf-bar #facility-calculate {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);} #slickGrid .ui-vrf-bar #end-system-calculation:hover, #slickGrid .ui-vrf-bar #facility-calculate:hover {color: var(--ui-on-primary);background: var(--ui-primary-hover);} /* ============================== Плитки выбора типа оборудования ============================== */ /* страницы .prod-main (views/prod, categories.php расчетов): заголовок и плитки с картинкой и подписью */ .prod-main {box-sizing: border-box;padding: 1.25rem 1.75rem 1.75rem;font-family: var(--ui-font);} .prod-main h1 {margin: 0 0 0.875rem;padding: 0;font: bold 1.5rem/1.25 var(--ui-font);letter-spacing: 0;text-transform: none;color: var(--ui-text);} .prod-main .prod-all-items {display: inline-block;margin: 0 0 0.5rem;font: 0.9375rem var(--ui-font);color: var(--ui-accent);text-decoration: none;} .prod-main .prod-all-items:hover {text-decoration: underline;} .prod-main .prod-items {margin-top: 0.5rem;text-align: left;} .prod-main .prod-item {box-sizing: content-box;height: auto;min-height: 13.75rem;margin: 0 0.5rem 0.75rem 0;padding: 0.625rem;vertical-align: top;border-radius: 12px;transition: background-color 0.15s;} .prod-main .prod-item:hover {background: var(--ui-fill);} .prod-main .prod-item:hover img {opacity: 1;} .prod-main .prod-item img {border-radius: var(--ui-radius);} .prod-main .prod-item a {display: block;font: 0.9375rem/1.3 var(--ui-font);color: var(--ui-text);text-decoration: none;} .prod-main .prod-item a + a {margin-top: 0.5rem;} /* ============================== Конфигуратор GFC (расчет вентилятора) ============================== */ /* protected/components/gfc/views: форма и результат грузятся в #page внутри области грида. Разметка формы не меняется (обработчики значков «сохранить для КП / по умолчанию» и показа строк завязаны на нее), только оформление. Все, что вне формы и списков с собственным id, ограничено классом ui-gfc у #page, чтобы не задеть другие конфигураторы с тем же #page; класс ставит js/ui-refresh.js, когда в #page загружена форма #gfc-form (не :has - программа открывается и во встроенном браузере плагинов, он бывает старым) */ #page.ui-gfc {box-sizing: border-box;padding: 1.25rem 1.75rem 1.75rem;font-family: var(--ui-font);color: var(--ui-text);} #page.ui-gfc > #close_configurator, #page.ui-gfc > a > #back_to_configurator {float: right;width: 2.25rem;height: 2.25rem;margin: 0 0 0.5rem 0.5rem;padding: 0;font-size: 1rem;line-height: 1;color: var(--ui-text-2);background: var(--ui-fill);border: 0;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, color 0.15s;} #page.ui-gfc > #close_configurator:hover, #page.ui-gfc > a > #back_to_configurator:hover {color: var(--ui-text);background: var(--ui-fill-strong);} #page.ui-gfc > h2 {margin: 0 0 0.875rem;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} #page.ui-gfc > h2:empty {display: none;} #page.ui-gfc > h3 {margin: 0 0 0.75rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #page.ui-gfc h4 {margin: 1.25rem 0 0.75rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);} #page.ui-gfc > hr {max-width: 56rem;margin: 1.5rem 0;border: 0;border-top: 1px solid var(--ui-line);} #page.ui-gfc .alert {box-sizing: border-box;max-width: 56rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;border: 0;border-radius: var(--ui-radius);} #page.ui-gfc .errors_list {box-sizing: border-box;max-width: 56rem;margin: 0 0 0.75rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;color: var(--ui-danger-text);background: var(--ui-danger-bg);border: 0;border-radius: var(--ui-radius);clear: none;} #page.ui-gfc .btn-lightgrey {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page.ui-gfc .btn-lightgrey:hover {color: var(--ui-text);background: var(--ui-fill-strong);} /* форма: подпись слева, значки сохранения значения - между подписью и полем, поле фиксированной ширины. Строки скрываются и показываются из js через display none / block, поэтому flex задан с !important, а скрытая строка ловится по инлайн-стилю */ #gfc-form {max-width: 56rem;} #gfc-form .conf_row {display: flex !important;align-items: flex-start;gap: 1rem;padding: 0.3125rem 0;border-top: 1px solid var(--ui-line);clear: none;} #gfc-form .conf_row[style*="display: none"], #gfc-form .conf_row[style*="display:none"] {display: none !important;} #gfc-form .conf_row:empty {margin-bottom: 1rem;padding: 0;} #gfc-form .conf_col_label {float: none;display: flex;align-items: center;flex: 1 1 auto;width: auto;min-width: 0;min-height: 2.125rem;font-size: 0.9375rem;line-height: 1.3;color: var(--ui-text);} #gfc-form .conf_col_label label {order: -1;flex: 1 1 auto;min-width: 0;margin: 0;color: var(--ui-text);} #gfc-form .conf_col_label span.required {color: var(--ui-danger);} #gfc-form .conf_col_label .default-value {flex: 0 0 auto;width: 1.625rem;margin: 0 !important;font-size: 0.8125rem;line-height: 2.125rem;text-align: center;color: var(--ui-check-line);transition: color 0.15s;} #gfc-form .conf_col_label .default-value:hover {color: var(--ui-text);} #gfc-form .conf_col_input {float: none;flex: 0 0 22rem;width: 22rem;max-width: 55%;} #gfc-form .conf_col_input input[type="text"], #gfc-form .conf_col_input select {display: block;width: 100%;height: 2.125rem;margin: 0;padding: 0 0.75rem;font-size: 0.9375rem;line-height: normal;text-indent: 0;color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #gfc-form .conf_col_input select {padding-left: 0.5rem;} #gfc-form .conf_col_input input[type="text"]:hover, #gfc-form .conf_col_input select:hover {background-color: var(--ui-fill-hover);} #gfc-form .conf_col_input input[type="text"]:focus, #gfc-form .conf_col_input select:focus {background-color: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #gfc-form .conf_col_input input.error, #gfc-form .conf_col_input select.error {border-color: var(--ui-danger);} #gfc-form .conf_col_input input:disabled, #gfc-form .conf_col_input select:disabled {opacity: 0.65;} #gfc-form .conf_col_input > span {display: block;margin-top: 0.25rem;font-size: 0.8125rem;line-height: 1.3;color: var(--ui-text-2);} #gfc-form .conf_col_input > span:empty {display: none;} #gfc-form .conf_col_input input[type="checkbox"], #gfc-fan-option-list input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);margin: 0;padding: 0;vertical-align: middle;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #gfc-form .conf_col_input input[type="checkbox"] {display: block;margin-top: 0.4375rem;} #gfc-form .conf_col_input input[type="checkbox"]:hover, #gfc-fan-option-list input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} #gfc-form .conf_col_input input[type="checkbox"]:checked, #gfc-fan-option-list input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #gfc-form .conf_col_input input[type="checkbox"]:disabled, #gfc-fan-option-list input[type="checkbox"]:disabled {opacity: 0.55;cursor: default;} #gfc-form .errorMessage {margin-top: 0.25rem;font-size: 0.8125rem;color: var(--ui-danger);} #gfc-form .errorSummary, #gfc-form #js-errors:not(:empty) {margin: 0 0 0.75rem;padding: 0.625rem 0.875rem;font-size: 0.9375rem;color: var(--ui-danger-text);background: var(--ui-danger-bg);border: 0;border-radius: var(--ui-radius);} #gfc-form .errorSummary ul {margin: 0.25rem 0 0;padding-left: 1.125rem;} /* «Результаты расчета находятся ниже формы» - спокойная плашка, по щелчку прокрутка к результату (js/ui-refresh.js) */ #gfc-form > h3 {margin: 0 0 0.75rem;font-size: 0.9375rem;line-height: 1.3;} #gfc-form > h3 .badge {display: inline-block;padding: 0.5rem 0.875rem;font: 0.9375rem/1.3 var(--ui-font);color: var(--ui-ok-text);text-align: left;white-space: normal;background: var(--ui-ok-bg);border-radius: var(--ui-radius);cursor: pointer;transition: background-color 0.15s;} #gfc-form > h3 .badge:hover {background: var(--ui-ok-bg-hover);} #gfc-form > h3 .badge::after {content: " \2193";} #gfc-calc-submit.btn-primary {padding: 0.5rem 1.5rem;font: bold 1rem var(--ui-font);color: var(--ui-on-primary);background: var(--ui-primary);border: 0;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #gfc-calc-submit.btn-primary:hover, #gfc-calc-submit.btn-primary:focus, #gfc-calc-submit.btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;box-shadow: none !important;} #gfc-calc-submit.btn-primary:disabled {opacity: 0.6;} /* ссылки выгрузки техданных - кнопками */ #page.ui-gfc > h5 {display: flex;flex-wrap: wrap;gap: 0.5rem;margin: 0 0 1.5rem;font-size: 0;} #page.ui-gfc > h5 a {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;font: 0.9375rem/1.3 var(--ui-font);color: var(--ui-text);text-decoration: none;background: var(--ui-fill);border-radius: var(--ui-radius);transition: background-color 0.15s;} #page.ui-gfc > h5 a:hover {color: var(--ui-text);background: var(--ui-fill-strong);} #page.ui-gfc > h5 a::before {content: "";flex: 0 0 auto;width: 1.125rem;height: 1.125rem;background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11'/%3E%3Cpath d='M7.5 10.5 12 15l4.5-4.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E") center / contain no-repeat;} /* подобранные вентиляторы: строки выбора; красный цвет строки (нет номенклатуры) задан в разметке */ #gfc-list {display: flex;flex-direction: column;gap: 0.125rem;max-width: 56rem;margin: 0;padding: 0;list-style: none;} #gfc-list li {position: relative;padding: 0.5rem 0.75rem 0.5rem 2.5rem;font-size: 0.9375rem;line-height: 1.3;border-radius: var(--ui-radius);cursor: pointer;transition: background-color 0.12s;} #gfc-list li:hover {background: var(--ui-fill);} #gfc-list li.gfc-selected {font-weight: bold;background: var(--ui-select);} #gfc-list li::before {content: "";position: absolute;left: 0.75rem;top: 50%;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);background: var(--ui-field);border: 1px solid var(--ui-check-line);border-radius: 50%;transform: translateY(-50%);} #gfc-list li.gfc-selected::before {background: radial-gradient(circle, var(--ui-on-primary) 0 32%, var(--ui-primary) 36%);border-color: var(--ui-primary);} /* опции вентилятора */ #gfc-fan-option-list {max-width: 56rem;font-size: 0.9375rem;} #gfc-fan-option-list h4 {margin: 0 1rem 0.625rem 0 !important;vertical-align: middle;} #gfc-fan-option-list > p {margin: 0;color: var(--ui-text-2);} #gfc-fan-option-list label {display: inline-flex !important;align-items: center;gap: 0.5rem;margin: 0;font-size: 0.9375rem;line-height: 1.3;cursor: pointer;} #gfc-fan-option-list .gfc-consider-resistance-label {vertical-align: middle;margin-bottom: 0.625rem;} #gfc-fan-option-list table {width: auto;} #gfc-fan-option-list table td {padding: 0.25rem 0;vertical-align: middle;} #gfc-fan-option-list table td + td {padding-left: 1rem;white-space: nowrap;} #gfc-fan-option-list .btn {font-size: 0.9375rem;} #gfc-fan-option-list .option_count {display: inline-block;width: 3.25rem !important;height: 1.875rem;padding: 0 0.375rem;font-size: 0.9375rem;text-align: center;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);} #gfc-fan-option-list .option_count:focus {background: var(--ui-field);border-color: var(--ui-text);outline: none;} #gfc-fan-option-list .option_count:disabled {opacity: 0.6;} #gfc-fan-option-list .gfc-custom-options-divider {border-top-color: var(--ui-line) !important;} #gfc-fan-option-list .gfc-custom-option-form {padding: 1rem;background: var(--ui-tint);border: 0;border-radius: 12px;} #gfc-fan-option-list .gfc-custom-option-form label {display: block !important;font-size: 0.8125rem;color: var(--ui-text-2);cursor: default;} #gfc-fan-option-list .gfc-custom-option-form input[type="text"], #gfc-fan-option-list .gfc-custom-option-form select {height: 2.125rem;padding: 0 0.625rem;font-size: 0.9375rem;color: var(--ui-text);background: var(--ui-field);border: 1px solid var(--ui-line-strong);border-radius: var(--ui-radius);} #gfc-fan-option-list .gfc-custom-option-form input[type="text"]:focus, #gfc-fan-option-list .gfc-custom-option-form select:focus {border-color: var(--ui-text);outline: none;} /* результат: график, чертеж, таблица техданных */ /* график - блоком, иначе текст после него встает справа в ту же строку; перенос строки после картинки лишний */ #page.ui-gfc > #gfc-svg, #page.ui-gfc > #gfc-svg-image {display: block;} #page.ui-gfc > #gfc-svg-image ~ br {display: none;} /* кнопка выгрузки модели в Revit или сообщение, почему ее нет */ #page.ui-gfc > .gfc-model-export {max-width: 56rem;margin: 0.75rem 0 0;font-size: 0.875rem;line-height: 1.4;color: var(--ui-text-2);} #page.ui-gfc > .gfc-model-export:empty {display: none;} #page.ui-gfc > div[style*="text-align"] {max-width: 56rem;} #page.ui-gfc > div > img {max-width: 100%;height: auto;} #page.ui-gfc > table.table {max-width: 56rem;margin: 0.5rem 0 0;font-size: 0.9375rem;border: 0;} #page.ui-gfc > table.table td, #page.ui-gfc > table.table th {padding: 0.4375rem 0.75rem;vertical-align: middle;border: 0;border-bottom: 1px solid var(--ui-line);border-radius: 0;} #page.ui-gfc > table.table th {padding: 1.125rem 0 0.5rem;font-size: 1rem;font-weight: bold;text-align: left !important;color: var(--ui-text);background: var(--ui-panel);border-bottom-color: var(--ui-line-strong);} #page.ui-gfc > table.table tr:first-child th {padding-top: 0.25rem;} #page.ui-gfc > table.table tbody tr {background: transparent;} #page.ui-gfc > table.table tbody tr:hover td {background: var(--ui-tint-hover);} #page.ui-gfc > table.table td:first-child {padding-left: 0;color: var(--ui-text-2);} #page.ui-gfc > table.table td:nth-child(2) {width: 6rem;color: var(--ui-muted);white-space: nowrap;} #page.ui-gfc > table.table td:nth-child(3) {width: 45%;} @media (max-width: 767px) { #page.ui-gfc {padding: 1rem;} #gfc-form .conf_row {flex-wrap: wrap;gap: 0.25rem;} #gfc-form .conf_col_label {flex: 1 1 100%;} #gfc-form .conf_col_input {flex: 1 1 100%;width: auto;max-width: none;} } /* ============================== Расчет вентустановки ============================== */ /* Три стадии в области грида: схема с опросным листом (views/configurator/configurator.php, censuspaper.php), ход расчета (calc_many.php), результат (builds.php, ahu-calc-result-html.php). Разметка не меняется, только оформление. Класс .conf_result общий со многими другими расчетами, поэтому результат ограничен #builds_data. Стадия схемы стилизуется без классов от js: отрисовщик схемы (js/configurator/drawer.js) берет ширину поля сборки сразу при вставке страницы, отступы должны действовать уже в этот момент */ /* --- стадия 1: схема и опросный лист --- */ /* #page в селекторах кнопок - чтобы скругление перекрыло общее правило #slickGrid * {border-radius} */ #page > .main_ned {padding: 0.5rem 0.25rem 1.25rem 1.5rem;} #page .main_ned .btn-lightgrey, #page .calc-result-buttons .btn-lightgrey, #builds_data .conf_result .btn-lightgrey, #builds_data .conf_result .btn-success, #builds_data .conf_result .btn-primary {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page .main_ned .btn-lightgrey:hover, #page .calc-result-buttons .btn-lightgrey:hover, #builds_data .conf_result .btn-lightgrey:hover, #builds_data .conf_result .btn-success:hover, #builds_data .conf_result .btn-success:focus, #builds_data .conf_result .btn-success:active, #builds_data .conf_result .btn-primary:hover, #builds_data .conf_result .btn-primary:focus, #builds_data .conf_result .btn-primary:active {color: var(--ui-text) !important;background: var(--ui-fill-strong) !important;border-color: transparent !important;box-shadow: none !important;} #page .main_ned #calculate_builds, #page .main_ned #calculate_builds_copy, #page #continue_button {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page .main_ned #calculate_builds:hover, #page .main_ned #calculate_builds_copy:hover, #page #continue_button:hover {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;} #page .main_ned #calculate_builds, #page .main_ned #calculate_builds_copy {padding-left: 1.5rem;padding-right: 1.5rem;} #configurator-toolbar #close_configurator {width: 2.25rem;height: 2.25rem;padding: 0;color: var(--ui-text-2);} #build-orientation-bar {color: var(--ui-text-2);} #build-orientation-bar select {color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #build-orientation-bar select:hover {background-color: var(--ui-fill-hover);} .build-glider-wrap .glider-prev, .build-glider-wrap .glider-next {color: var(--ui-check-line);transition: color 0.15s;} .build-glider-wrap .glider-prev:hover, .build-glider-wrap .glider-next:hover {color: var(--ui-text);} .build-glider-wrap .glider-prev.disabled, .build-glider-wrap .glider-next.disabled {color: var(--ui-fill-hover);} #components-field .component-image {border-radius: var(--ui-radius);transition: background-color 0.12s;} #components-field .component-image:hover {background-color: var(--ui-fill);} #components-field .component-image .img-thumbnail {background: transparent;} #configurator-actions .badge-secondary {padding: 0.25rem 0.5rem;font-size: 0.8125rem;font-weight: normal;color: var(--ui-text-2);background: var(--ui-fill);border-radius: 6px;} /* опросный лист: сетка строк остается прежней (css/main.css), меняются заголовки, поля и галочки */ #censusPaperBody .configuration_input h2.heading {height: auto;padding: 1.125rem 0 0.5rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);border-bottom: 1px solid var(--ui-line-strong);} #censusPaperBody .conf_row {border-top-color: var(--ui-line);} #censusPaperBody h2.heading + .conf_row {border-top: 0;} #censusPaperBody .conf_col_label {color: var(--ui-text);} #censusPaperBody .conf_col_input label {color: var(--ui-text);} #censusPaperBody .conf_col_input .default-value {color: var(--ui-check-line);transition: color 0.15s;} #censusPaperBody .conf_col_input .default-value:hover {color: var(--ui-text);} #censusPaperBody .conf_col_input input[type="text"], #censusPaperBody .conf_col_input select, #censusPaperBody .conf_col_input textarea {padding-left: 0.5rem;text-indent: 0;color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #censusPaperBody .conf_col_input input[type="text"] {padding-left: 0.625rem;} #censusPaperBody .conf_col_input input[type="text"]:hover, #censusPaperBody .conf_col_input select:hover, #censusPaperBody .conf_col_input textarea:hover {background-color: var(--ui-fill-hover);} #censusPaperBody .conf_col_input input[type="text"]:focus, #censusPaperBody .conf_col_input select:focus, #censusPaperBody .conf_col_input textarea:focus {background-color: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #censusPaperBody .conf_col_input input[type="text"]:disabled, #censusPaperBody .conf_col_input input[type="text"][readonly], #censusPaperBody .conf_col_input select:disabled, #censusPaperBody .conf_col_input textarea:disabled {color: var(--ui-muted);background-color: var(--ui-fill-disabled);} #censusPaperBody .conf_col_input input.error, #censusPaperBody .conf_col_input select.error {border-color: var(--ui-danger);} #censusPaperBody input[type="checkbox"], #builds_data .conf_result input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);padding: 0;vertical-align: middle;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #censusPaperBody input[type="checkbox"]:hover, #builds_data .conf_result input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} #censusPaperBody input[type="checkbox"]:checked, #builds_data .conf_result input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #censusPaperBody input[type="checkbox"]:disabled, #builds_data .conf_result input[type="checkbox"]:disabled {opacity: 0.55;cursor: default;} /* окно «Опции» секции */ #censusPaperBody .modal-content {border: 0;border-radius: var(--ui-radius-panel);box-shadow: var(--ui-shadow);} #censusPaperBody .modal-header, #censusPaperBody .modal-footer {border-color: var(--ui-line);} #censusPaperBody .modal-title {font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);} #censusPaperBody .modal .btn-secondary {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;} #censusPaperBody .modal .btn-secondary:hover {background: var(--ui-fill-strong);} /* --- стадия 2: ход расчета (класс ui-ahu-calc ставит js/ui-refresh.js) --- */ #page.ui-ahu-calc {box-sizing: border-box;padding: 1.25rem 1.5rem;font-size: 0.9375rem;color: var(--ui-text);} #page.ui-ahu-calc [id^="header_"], #page.ui-ahu-calc [id^="link_"] {margin-bottom: 0.5rem;font-weight: bold;} #page.ui-ahu-calc .progress {height: 0.625rem;margin-bottom: 0.5rem;background: var(--ui-fill);border-radius: 999px;box-shadow: none;} #page.ui-ahu-calc .progress .bar {color: var(--ui-on-primary);background: var(--ui-primary);border-radius: 999px;box-shadow: none;text-shadow: none;} #page.ui-ahu-calc [id^="textInfo_"] {color: var(--ui-text-2);} #page.ui-ahu-calc .calcLogToggler {color: var(--ui-accent);} /* лог расчета: плоский список строк. Название этапа (курсив в разметке) - жирный подзаголовок, строки этапа под ним с отступом, типоразмер - плашка с чертой сверху, варианты вентилятора - строки с галочкой */ #page.ui-ahu-calc .calcLogToggler {display: inline-block;margin-top: 0.375rem;} #page.ui-ahu-calc ul[id^="calcLog_"] {max-width: 60rem;margin: 0.75rem 0 0;padding: 0;font-size: 0.9375rem;line-height: 1.5;list-style: none;color: var(--ui-text-2);} #page.ui-ahu-calc ul[id^="calcLog_"] > li {padding-left: 1rem;} #page.ui-ahu-calc ul[id^="calcLog_"] > li:first-child {padding-left: 0;font-size: 1rem;color: var(--ui-text);} #page.ui-ahu-calc ul[id^="calcLog_"] > li > i:first-child {display: inline-block;margin: 0.625rem 0 0.125rem -1rem;font-style: normal;font-weight: bold;color: var(--ui-text);} #page.ui-ahu-calc ul[id^="calcLog_"] > li[class^="size-header"] {margin-top: 1rem;padding: 0.875rem 0 0;border-top: 1px solid var(--ui-line);border-radius: 0;} #page.ui-ahu-calc ul[id^="calcLog_"] > li[class^="size-header"] h2 {display: inline-block;margin: 0;padding: 0.25rem 0.75rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);background: var(--ui-fill);border-radius: var(--ui-radius);} #page.ui-ahu-calc ul[id^="calcLog_"] > li > label {display: inline-flex;align-items: center;gap: 0.5rem;margin: 0.5rem 0 0;cursor: pointer;} #page.ui-ahu-calc ul[id^="calcLog_"] > li > label a {color: var(--ui-accent);} #page.ui-ahu-calc ul[id^="calcLog_"] input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.25rem, 1px);height: 16px;height: round(1.25rem, 1px);margin: 0;padding: 0;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #page.ui-ahu-calc ul[id^="calcLog_"] input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} #page.ui-ahu-calc ul[id^="calcLog_"] input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #page.ui-ahu-calc ul[id^="calcLog_"] details {margin: 0.125rem 0 0.25rem 1.75rem;} #page.ui-ahu-calc ul[id^="calcLog_"] summary {width: fit-content;font-size: 0.875rem;color: var(--ui-muted);cursor: pointer;} #page.ui-ahu-calc ul[id^="calcLog_"] summary:hover {color: var(--ui-text);} #page.ui-ahu-calc ul[id^="calcLog_"] summary font {color: inherit;} #page.ui-ahu-calc ul[id^="calcLog_"] summary b {font-weight: normal;} #page.ui-ahu-calc ul[id^="calcLog_"] details[open] > summary {margin-bottom: 0.375rem;color: var(--ui-text);} /* цвет строки «Характеристики теплообменника / рекуператора / вентилятора» - оценка варианта расчетом (protected/views/tableForLogs): зеленый - подходит, красный - не подходит. Цвет сохраняется и при наведении, и у раскрытого блока */ #page.ui-ahu-calc ul[id^="calcLog_"] summary:has(font[color="green"]), #page.ui-ahu-calc ul[id^="calcLog_"] details[open] > summary:has(font[color="green"]) {font-weight: bold;color: var(--ui-ok);} #page.ui-ahu-calc ul[id^="calcLog_"] summary:has(font[color="red"]), #page.ui-ahu-calc ul[id^="calcLog_"] details[open] > summary:has(font[color="red"]) {font-weight: bold;color: var(--ui-danger);} #page.ui-ahu-calc ul[id^="calcLog_"] summary:has(font[color="green"]) b, #page.ui-ahu-calc ul[id^="calcLog_"] summary:has(font[color="red"]) b {font-weight: bold;} #page.ui-ahu-calc ul[id^="calcLog_"] .attribute_table {font-size: 0.875rem;color: var(--ui-text);} #page.ui-ahu-calc ul[id^="calcLog_"] .attribute_table th, #page.ui-ahu-calc ul[id^="calcLog_"] .attribute_table td {padding: 0.25rem 0.5rem;border-color: var(--ui-table-line);border-radius: 0;} #page.ui-ahu-calc ul[id^="calcLog_"] .attribute_table th {color: var(--ui-text-2);background-color: var(--ui-tint);} /* «Назад» и «Далее» в разметке приклеены к низу окна (position: fixed) и упирались в край панели. Теперь это полоса у нижнего края панели, всегда на одном месте: при коротком логе ее прижимает к низу свободное место (страница - колонка, у полосы margin-top: auto), при длинном она остается видна поверх лога (sticky). Пока лог растет во время расчета, кнопки не сдвигаются */ #page.ui-ahu-calc {display: flex;flex-direction: column;} #page.ui-ahu-calc > * {flex: 0 0 auto;} #page.ui-ahu-calc > div[style*="position: fixed"]:not(#manualSelectOverlay) {position: sticky !important;bottom: -1.25rem !important;z-index: 2;display: flex;gap: 0.5rem;margin: auto -1.5rem -1.25rem;padding: 0.75rem 1.5rem 1.25rem;text-align: left !important;background: var(--ui-panel);border-top: 1px solid var(--ui-line);border-radius: 0;} /* отступ между логом и полосой кнопок */ #page.ui-ahu-calc > div:has(> .progress):last-of-type, #page.ui-ahu-calc > div:has(> .progress) {padding-bottom: 1rem;} #page.ui-ahu-calc #back_button, #page.ui-ahu-calc #continue_button {padding: 0.5rem 1.5rem !important;font-size: 1rem !important;} #page.ui-ahu-calc #back_button {color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page.ui-ahu-calc #back_button:hover {background: var(--ui-fill-strong);} /* окно ручного выбора варианта секции (галочка «Выбрать секцию вручную» в опросном листе, calc_many.php): остается окном поверх страницы; заголовок и кнопки видны всегда, прокручивается только таблица вариантов */ #manualSelectOverlay {background: rgba(20, 22, 30, 0.45) !important;} #manualSelectModal {display: flex;flex-direction: column;box-sizing: border-box;padding: 1.25rem 1.5rem !important;overflow: hidden !important;font-family: var(--ui-font);color: var(--ui-text);border-radius: 16px !important;box-shadow: 0 20px 48px rgba(20, 22, 30, 0.26);} #manualSelectTitle {flex: 0 0 auto;margin: 0 0 0.875rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #manualSelectTableWrap {flex: 1 1 auto;min-height: 0;overflow: auto !important;border: 1px solid var(--ui-line-strong);border-radius: var(--ui-radius);} #manualSelectTableWrap table {margin: 0;font-size: 0.9375rem;border: 0;border-collapse: separate;border-spacing: 0;border-radius: 0;} #manualSelectTableWrap th, #manualSelectTableWrap td {padding: 0.375rem 0.75rem;border: 0;border-bottom: 1px solid var(--ui-line);border-left: 1px solid var(--ui-line);border-radius: 0 !important;} #manualSelectTableWrap th:first-child, #manualSelectTableWrap td:first-child {width: 1%;text-align: center;border-left: 0;} #manualSelectTableWrap tbody tr:last-child td {border-bottom: 0;} #manualSelectTableWrap th {position: sticky;top: 0;z-index: 1;font-size: 0.875rem;color: var(--ui-text-2);background: var(--ui-tint);border-bottom-color: var(--ui-line-strong);} #manualSelectTableWrap tr.manual-variant-row {cursor: pointer;} #manualSelectTableWrap tr.manual-variant-row:hover td {background: var(--ui-tint-hover);} #manualSelectTableWrap tr.manual-variant-row:has(.manual-variant-radio:checked) td {background: var(--ui-select);} #manualSelectTableWrap .manual-variant-radio {min-width: 0;margin: 0;vertical-align: middle;accent-color: var(--ui-text);cursor: pointer;} #manualSelectModal > div:last-child {flex: 0 0 auto;display: flex;justify-content: flex-end;gap: 0.5rem;margin-top: 1rem !important;} #manualSelectCancel, #manualSelectConfirm {margin: 0 !important;padding: 0.5rem 1.5rem !important;font-size: 1rem !important;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #manualSelectCancel:hover {background: var(--ui-fill-strong);} #manualSelectConfirm {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);} #manualSelectConfirm:hover {color: var(--ui-on-primary);background: var(--ui-primary-hover);} /* --- стадия 3: результат --- */ #page > .calc-result-buttons {display: flex;flex-wrap: wrap;gap: 0.375rem;padding: 1rem 0.25rem 0 1.5rem;} #page > .calc-result-buttons ~ br {display: none;} #page > .calc-result-buttons .btn {display: inline-flex;align-items: center;justify-content: center;min-width: 2.5rem;height: 2.5rem;padding: 0 0.75rem;font-size: 1rem;line-height: 1;color: var(--ui-text-2);} #page > .calc-result-buttons .btn:hover {color: var(--ui-text);} #page > .calc-result-buttons .btn-danger {color: var(--ui-danger);background: var(--ui-danger-bg);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s;} #page > .calc-result-buttons .btn-danger:hover {color: var(--ui-danger-text);background: var(--ui-danger-bg-hover);} #page > #builds_data {padding: 1rem 0.25rem 1.5rem 1.5rem;} #builds_data .conf_result {font-size: 0.9375rem;color: var(--ui-text);} #builds_data .conf_result .conf_line {line-height: 1.75rem;} #builds_data .conf_result .conf_line b {font-weight: normal;color: var(--ui-text-2);} #builds_data .conf_result h2 {padding: 1.25rem 0 0.5rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #builds_data .conf_result h3 {margin: 1.25rem 0 0.5rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} #builds_data .conf_result h4 {padding: 1.125rem 0 0.375rem;font: bold 1.125rem/1.3 var(--ui-font);color: var(--ui-text);} #builds_data .conf_result h5 {margin: 0.75rem 0 0.375rem;font: bold 1rem/1.3 var(--ui-font);color: var(--ui-text);} #builds_data .conf_result .btn {margin-bottom: 0.25rem;font-size: 0.9375rem;} #builds_data .conf_result .alert {padding: 0.625rem 0.875rem;font-size: 0.9375rem;border: 0;border-radius: var(--ui-radius);} #builds_data .conf_result .attribute_table {margin-bottom: 0.25rem;} #builds_data .conf_result .attribute_table th, #builds_data .conf_result .attribute_table td {padding: 0.3125rem 0.5rem;border-color: var(--ui-table-line);border-radius: 0;} #builds_data .conf_result .attribute_table th {color: var(--ui-text-2);background-color: var(--ui-tint);} #builds_data .conf_result .subtable {color: var(--ui-text-2);} #builds_data .conf_result .subtable td {border-color: var(--ui-table-line);border-radius: 0;} /* поля размеров секций и установки: подпись и поле в одну строку */ #builds_data .conf_result .form-horizontal .control-group {display: flex;align-items: center;gap: 0.75rem;margin: 0 0 0.375rem;} #builds_data .conf_result .form-horizontal .control-label {flex: 0 0 15rem;margin: 0;color: var(--ui-text-2);} #builds_data .conf_result .form-horizontal .controls {flex: 0 1 auto;} #builds_data .conf_result input[type="text"], #builds_data .conf_result select, #builds_data .conf_result textarea {padding: 0 0.625rem;font-size: 0.9375rem;text-indent: 0;color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #builds_data .conf_result input[type="text"], #builds_data .conf_result select {height: 2rem;} #builds_data .conf_result textarea {padding: 0.5rem 0.625rem;} #builds_data .conf_result input[type="text"]:hover, #builds_data .conf_result select:hover, #builds_data .conf_result textarea:hover {background-color: var(--ui-fill-hover);} #builds_data .conf_result input[type="text"]:focus, #builds_data .conf_result select:focus, #builds_data .conf_result textarea:focus {background-color: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #builds_data .conf_result input[type="text"]:disabled, #builds_data .conf_result select:disabled {color: var(--ui-muted);background-color: var(--ui-fill-disabled);} #builds_data .conf_result input[type="file"] {font-size: 0.9375rem;color: var(--ui-text-2);background: transparent;} #builds_data .conf_result input[type="file"]::file-selector-button {margin-right: 0.75rem;padding: 0.375rem 0.875rem;font: 0.9375rem var(--ui-font);color: var(--ui-text);background: var(--ui-fill-hover);border: 0;border-radius: var(--ui-radius);cursor: pointer;} /* ============================== Добавление оборудования (/nomenclature) ============================== */ /* Страница «Дополнительное оборудование» (protected/views/nomenclature/index.php, таблицы jsGrid): позиции КП или установки и добавление позиции из таблицы цен. Обертку .ui-nomen ставит сама страница. */ html:has(.ui-nomen), body:has(.ui-nomen) {background: var(--ui-bg);} body:has(.ui-nomen) #container {padding: 0 1rem;overflow: auto;} .ui-nomen {padding-bottom: 1.5rem;font-family: var(--ui-font);font-size: 0.9375rem;color: var(--ui-text);} .ui-nomen__panel {margin-bottom: 1rem;padding: 1.25rem 1.5rem;background: var(--ui-panel);border-radius: var(--ui-radius-panel);} .ui-nomen__title, .ui-nomen h4 {margin: 0 0 1rem;font: bold 1.25rem/1.3 var(--ui-font);color: var(--ui-text);} .ui-nomen .alert {margin: 0 0 0.75rem !important;border: 0;border-radius: var(--ui-radius);} /* категория и описание: два списка с прокруткой */ .ui-nomen .checkbox-container {gap: 1.5rem;margin-bottom: 1rem;} .ui-nomen .checkbox-container > div {flex: 0 1 24rem;min-width: 0;max-height: 15rem;margin: 0;overflow-y: auto;} .ui-nomen .checkbox-container > div:empty {display: none;} .ui-nomen .checkbox-container p {margin: 0;} .ui-nomen .checkbox-container label {display: flex;align-items: center;gap: 0.5rem;margin: 0;padding: 0.3125rem 0.625rem;line-height: 1.3;border-radius: var(--ui-radius);cursor: pointer;transition: background-color 0.15s;} .ui-nomen .checkbox-container label:hover {background: var(--ui-fill);} .ui-nomen .checkbox-container label:has(input:checked) {font-weight: bold;background: var(--ui-select);} .ui-nomen .checkbox-container input[type="radio"] {flex: 0 0 auto;margin: 0;accent-color: var(--ui-text);cursor: pointer;} /* таблицы */ .ui-nomen .jsgrid {border: 1px solid var(--ui-line-strong);border-radius: var(--ui-radius);overflow: hidden;} .ui-nomen .jsgrid-grid-header, .ui-nomen .jsgrid-grid-body {background: var(--ui-panel);border: 0;} .ui-nomen .jsgrid-grid-header {border-bottom: 1px solid var(--ui-line-strong);} .ui-nomen .jsgrid-table {border-collapse: collapse;} .ui-nomen .jsgrid-cell, .ui-nomen .jsgrid-header-cell {padding: 0.375rem 0.5rem;border: 0;border-left: 1px solid var(--ui-line);border-bottom: 1px solid var(--ui-line);} .ui-nomen .jsgrid-cell:first-child, .ui-nomen .jsgrid-header-cell:first-child {border-left: 0;} .ui-nomen .jsgrid-header-row > .jsgrid-header-cell {font-size: 0.875rem;font-weight: bold;color: var(--ui-text-2);background: var(--ui-panel);} .ui-nomen .jsgrid-header-sortable:hover {color: var(--ui-text);background: var(--ui-fill);} .ui-nomen .jsgrid-filter-row > .jsgrid-cell, .ui-nomen .jsgrid-insert-row > .jsgrid-cell, .ui-nomen .jsgrid-edit-row > .jsgrid-cell {background: var(--ui-tint);} .ui-nomen .jsgrid-row > .jsgrid-cell, .ui-nomen .jsgrid-alt-row > .jsgrid-cell {background: var(--ui-panel);} .ui-nomen .jsgrid-selected-row > .jsgrid-cell {background: var(--ui-tint-hover);border-color: var(--ui-line);} .ui-nomen .jsgrid-grid-body tr:last-child > .jsgrid-cell {border-bottom: 0;} .ui-nomen .jsgrid-nodata-row > .jsgrid-cell {padding: 1.5rem 0.5rem;color: var(--ui-muted);background: var(--ui-panel);} .ui-nomen .jsgrid input[type="text"], .ui-nomen .jsgrid input[type="number"], .ui-nomen .jsgrid select, .ui-nomen .jsgrid textarea {box-sizing: border-box;width: 100%;height: 1.875rem;margin: 0;padding: 0 0.5rem;font-size: 0.9375rem;text-indent: 0;color: var(--ui-text);background: var(--ui-fill);border: 1px solid transparent;border-radius: 6px;box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} .ui-nomen .jsgrid select {padding: 0 0.25rem;} .ui-nomen .jsgrid-filter-row input[type="text"], .ui-nomen .jsgrid-filter-row input[type="number"], .ui-nomen .jsgrid-filter-row select {background: var(--ui-field);border-color: var(--ui-line-strong);} .ui-nomen .jsgrid input[type="text"]:focus, .ui-nomen .jsgrid input[type="number"]:focus, .ui-nomen .jsgrid select:focus {background: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} /* кнопки в строках: вместо картинок-спрайтов - контурные значки, главная (добавить) - желтая */ .ui-nomen .jsgrid-control-field {padding-left: 0.125rem;padding-right: 0.125rem;white-space: nowrap;} .ui-nomen .jsgrid .jsgrid-button {width: 1.5rem;height: 1.5rem;margin: 0 0.0625rem;padding: 0;vertical-align: middle;background: center / 1rem 1rem no-repeat;border: 0;border-radius: 6px;opacity: 1;cursor: pointer;transition: background-color 0.15s;} .ui-nomen .jsgrid .jsgrid-button:hover {background-color: var(--ui-fill-hover);opacity: 1;} .ui-nomen .jsgrid .jsgrid-search-mode-button, .ui-nomen .jsgrid .jsgrid-search-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b5e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.2 10.2L13.5 13.5'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-clear-filter-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b5e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 3h11l-4.2 5v4.5l-2.6-1.3V8z'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-edit-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b5e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l.6-2.8 7.2-7.2 2.2 2.2-7.2 7.2z'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-delete-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b5e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5h10M6.5 4.5V3h3v1.5M4.5 4.5l.6 8.5h5.8l.6-8.5M6.8 7v4M9.2 7v4'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-delete-button:hover {background-color: var(--ui-danger-bg);} .ui-nomen .jsgrid .jsgrid-cancel-edit-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%235b5e66' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-insert-mode-button, .ui-nomen .jsgrid .jsgrid-insert-button, .ui-nomen .jsgrid .jsgrid-update-button {background-color: var(--ui-primary);} .ui-nomen .jsgrid .jsgrid-insert-mode-button:hover, .ui-nomen .jsgrid .jsgrid-insert-button:hover, .ui-nomen .jsgrid .jsgrid-update-button:hover {background-color: var(--ui-primary-hover);} .ui-nomen .jsgrid .jsgrid-insert-mode-button, .ui-nomen .jsgrid .jsgrid-insert-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v10M3 8h10'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-update-button {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231a1a1c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-6.5'/%3E%3C/svg%3E");} .ui-nomen .jsgrid .jsgrid-search-mode-button.jsgrid-mode-on-button {background-color: var(--ui-fill-strong);} /* страницы */ .ui-nomen .jsgrid-pager-container {margin: 0 0 0.625rem;font-size: 0.875rem;color: var(--ui-text-2);} .ui-nomen .jsgrid-pager-page, .ui-nomen .jsgrid-pager-nav-button {padding: 0;} .ui-nomen .jsgrid-pager-page a, .ui-nomen .jsgrid-pager-nav-button a {display: inline-block;padding: 0.1875rem 0.5rem;color: var(--ui-text);text-decoration: none;border-radius: 6px;transition: background-color 0.15s;} .ui-nomen .jsgrid-pager-page a:hover, .ui-nomen .jsgrid-pager-nav-button a:hover {background: var(--ui-fill);} .ui-nomen .jsgrid-pager-current-page {display: inline-block;padding: 0.1875rem 0.5rem;font-weight: bold;color: var(--ui-text);background: var(--ui-fill-strong);border-radius: 6px;} .ui-nomen .jsgrid-pager-nav-inactive-button a {color: var(--ui-muted);pointer-events: none;} /* загрузка таблицы: общий индикатор - кольцо в белом кружке, без подписи */ .ui-nomen .jsgrid .jsgrid-load-shader {background: var(--ui-panel);opacity: 0.6;} .ui-nomen .jsgrid .jsgrid-load-panel {width: 2.75rem;height: 2.75rem;margin: -1.375rem 0 0 -1.375rem;padding: 0;font-size: 0;background: var(--ui-panel);border: 0;border-radius: 50%;box-shadow: var(--ui-shadow);} .ui-nomen .jsgrid .jsgrid-load-panel::before {content: "";position: absolute;top: calc(50% - 0.75rem);left: calc(50% - 0.75rem);box-sizing: border-box;width: 1.5rem;height: 1.5rem;margin: 0;border: 3px solid var(--ui-fill-strong);border-top-color: var(--ui-select-line);border-radius: 50%;animation: ui-spin 0.8s linear infinite;} /* ============================== Подбор из документации и массовый расчет (модуль autodoc) ============================== */ /* Страницы protected/modules/autodoc/views (default/kp.php - #ad-root с окнами #ad-bulk и #ad-modal, calc/kp.php - #mc-root) открываются в области грида. У них своя разметка на классах bootstrap и свои стили в самой странице; здесь - только оформление в тон порталу: шрифт, кнопки, поля, галочки, плашки. Часть размеров и цветов задана в разметке атрибутом style - такие правила с !important. Смысловые цвета формы остались: зеленая плашка - установка будет создана, голубое поле - значение прочитано из документа, желтое - прочитано неоднозначно. */ /* отступ сверху - у заголовка, а не у самой области: плашка установки липнет к ее верхнему краю, и над ней не должно оставаться полосы, в которой видна прокручиваемая форма */ #ad-root, #mc-root {padding: 0 1.75rem !important;font-family: var(--ui-font);font-size: 0.9375rem;color: var(--ui-text);} #ad-root > h3, #mc-root > h3 {margin: 0;padding: 1.25rem 0 0.75rem;font: bold 1.5rem/1.25 var(--ui-font);color: var(--ui-text);} #ad-root > h3 small, #mc-root > h3 small {font-size: 1rem;font-weight: normal;} #ad-root .text-muted, #mc-root .text-muted, #ad-bulk .text-muted {color: var(--ui-text-2) !important;} #ad-root .text-danger, #mc-root .text-danger {color: var(--ui-danger) !important;} #ad-root a:not(.btn), #mc-root a:not(.btn) {color: var(--ui-accent);} #ad-root label, #mc-root label {color: var(--ui-text);} /* кнопки: главное действие желтое, остальные серые, отмена - красная плашка */ #ad-root .btn, #mc-root .btn, #ad-bulk .btn {height: auto !important;padding: 0.4375rem 1rem !important;font: 0.9375rem/1.3 var(--ui-font);border: 1px solid transparent !important;border-radius: var(--ui-radius);box-shadow: none !important;transition: background-color 0.15s;} #ad-root .btn-sm, #mc-root .btn-sm {padding: 0.3125rem 0.75rem !important;} #ad-root .btn-default, #mc-root .btn-default, #ad-bulk .btn-default {color: var(--ui-text);background: var(--ui-fill);} #ad-root .btn-default:hover, #mc-root .btn-default:hover, #ad-bulk .btn-default:hover, #ad-root .btn-default:focus, #mc-root .btn-default:focus, #ad-bulk .btn-default:focus {color: var(--ui-text);background: var(--ui-fill-strong);} #ad-root .btn-primary, #mc-root .btn-primary, #ad-bulk .btn-primary {font-weight: bold;color: var(--ui-on-primary);background: var(--ui-primary);} #ad-root .btn-primary:hover, #mc-root .btn-primary:hover, #ad-bulk .btn-primary:hover, #ad-root .btn-primary:focus, #mc-root .btn-primary:focus, #ad-bulk .btn-primary:focus, #ad-root .btn-primary:active, #mc-root .btn-primary:active, #ad-bulk .btn-primary:active {color: var(--ui-on-primary) !important;background: var(--ui-primary-hover) !important;} #ad-root .btn-danger, #mc-root .btn-danger {color: var(--ui-danger);background: var(--ui-danger-bg);} #ad-root .btn-danger:hover, #mc-root .btn-danger:hover, #ad-root .btn-danger:focus, #mc-root .btn-danger:focus {color: var(--ui-danger-text);background: var(--ui-danger-bg-hover);} #ad-root .btn:disabled, #mc-root .btn:disabled {opacity: 0.6;} /* поля: серая заливка без рамки, в фокусе - светлое поле с темной рамкой */ #ad-root .form-control, #mc-root .form-control, #ad-bulk .form-control {font-family: var(--ui-font);color: var(--ui-text);background-color: var(--ui-fill);border: 1px solid transparent;border-radius: var(--ui-radius);box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} #ad-root .form-control:hover, #mc-root .form-control:hover, #ad-bulk .form-control:hover {background-color: var(--ui-fill-hover);} #ad-root .form-control:focus, #mc-root .form-control:focus, #ad-bulk .form-control:focus {background-color: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 2px var(--ui-focus-ring);outline: none;} #ad-root .form-control:disabled, #mc-root .form-control:disabled {color: var(--ui-muted);background-color: var(--ui-fill-disabled);} #ad-root .form-control::placeholder {color: var(--ui-muted);} #ad-root input[type="checkbox"], #mc-root input[type="checkbox"], #ad-bulk input[type="checkbox"] {-webkit-appearance: none;appearance: none;flex: 0 0 auto;box-sizing: border-box;width: 16px;width: round(1.125rem, 1px);height: 16px;height: round(1.125rem, 1px);margin: 0;padding: 0;vertical-align: middle;background: var(--ui-field) center / 100% 100% no-repeat;border: 1px solid var(--ui-check-line);border-radius: 4px;cursor: pointer;transition: background-color 0.12s, border-color 0.12s;} #ad-root input[type="checkbox"]:hover, #mc-root input[type="checkbox"]:hover, #ad-bulk input[type="checkbox"]:hover {border-color: var(--ui-check-line-hover);} #ad-root input[type="checkbox"]:checked, #mc-root input[type="checkbox"]:checked, #ad-bulk input[type="checkbox"]:checked {background-color: var(--ui-primary);border-color: var(--ui-primary);background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.6 2.6L12 5.4' fill='none' stroke='%231a1a1c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");} #ad-root input[type="checkbox"]:disabled, #mc-root input[type="checkbox"]:disabled {opacity: 0.55;cursor: default;} #ad-root label > input[type="checkbox"], #mc-root label > input[type="checkbox"] {margin-right: 0.375rem;} /* состояние задания и плашки сообщений */ #ad-root .label, #mc-root .label {display: inline-block;padding: 0.1875rem 0.625rem;font-size: 0.875rem;font-weight: normal;line-height: 1.3;color: var(--ui-text);background: var(--ui-fill);border-radius: 999px;} #ad-root .label-success, #mc-root .label-success {color: var(--ui-ok-text);background: var(--ui-ok-bg);} #ad-root .label-danger, #mc-root .label-danger {color: var(--ui-danger-text);background: var(--ui-danger-bg);} #ad-root .label-primary, #mc-root .label-primary, #ad-root .label-info, #mc-root .label-info {color: var(--ui-info-text);background: var(--ui-info-bg);} #ad-root .label-warning, #mc-root .label-warning {color: var(--ui-warn-text);background: var(--ui-warn-bg);} #ad-root .alert, #mc-root .alert {padding: 0.625rem 0.875rem;font-size: 0.9375rem;border: 0;border-radius: var(--ui-radius);} #ad-root .alert-info, #mc-root .alert-info {color: var(--ui-info-text);background-color: var(--ui-info-bg);} #ad-root .alert-danger, #mc-root .alert-danger {color: var(--ui-danger-text);background-color: var(--ui-danger-bg);} #ad-root .alert-warning, #mc-root .alert-warning {color: var(--ui-warn-text);background-color: var(--ui-warn-bg);} #ad-root .alert-success, #mc-root .alert-success {color: var(--ui-ok-text);background-color: var(--ui-ok-bg);} /* таблицы результата */ #ad-root .table, #mc-root .table {font-size: 0.9375rem;color: var(--ui-text);} #ad-root .table th, #mc-root .table th {font-size: 0.875rem;color: var(--ui-text-2);border-top: 0;border-bottom: 1px solid var(--ui-line-strong);} #ad-root .table td, #mc-root .table td {border-color: var(--ui-line);} #ad-root .table-striped tbody tr:nth-of-type(odd), #mc-root .table-striped tbody tr:nth-of-type(odd) {background-color: var(--ui-tint);} #mc-root .panel {margin-bottom: 0.5rem;border: 1px solid var(--ui-line);border-radius: var(--ui-radius);} #mc-root .panel-heading {padding: 0.5rem 0.875rem;background: var(--ui-tint);border-radius: var(--ui-radius) var(--ui-radius) 0 0;} /* загрузка файла */ #ad-dropzone {color: var(--ui-text);background: var(--ui-tint) !important;border: 2px dashed var(--ui-line-strong) !important;border-radius: 12px !important;transition: background-color 0.15s, border-color 0.15s;} #ad-dropzone:hover, #ad-dropzone[style*="238, 246, 255"] {background: var(--ui-fill) !important;border-color: var(--ui-text-2) !important;} #ad-root .ad-spinner {border-color: var(--ui-fill-strong);border-top-color: var(--ui-select-line);} /* классификация страниц: карточки страниц, блок «Прочие страницы», полоса с кнопкой продолжения */ #ad-root .ad-pagecard {background: var(--ui-panel);border: 1px solid var(--ui-line-strong) !important;border-radius: 12px !important;} #ad-root .ad-pagecard img {border-radius: var(--ui-radius);} #ad-root [style*="solid #e5e5e5"] {border-color: var(--ui-line) !important;border-radius: 12px !important;} #ad-root [style*="position:sticky"][style*="background:#fff"] {background: var(--ui-panel) !important;border-top-color: var(--ui-line) !important;} #ad-root .ad-gap::before, #ad-root .ad-gap::after {border-top-color: var(--ui-warn-line);} #ad-root .ad-gap span {color: var(--ui-warn-text);background: var(--ui-warn-bg);border-color: var(--ui-warn-line);border-radius: 999px;} #ad-bulk {font-family: var(--ui-font);color: var(--ui-text);background: var(--ui-panel) !important;border: 0 !important;border-radius: 12px !important;box-shadow: var(--ui-shadow) !important;} #ad-modal > div {background: var(--ui-panel) !important;border-radius: 12px !important;} #ad-root [style*="color:#333"] {color: var(--ui-text) !important;} #ad-root [style*="#a94442"] {color: var(--ui-danger) !important;} /* форма проверки установок */ #ad-root .ad-fld-l, #ad-root .ad-idx-head, #ad-root .ad-why {color: var(--ui-muted);} #ad-root .ad-sec-name {background: var(--ui-tint);} #ad-root .ad-sec-table td {border-color: var(--ui-line);} #ad-root .ad-flow-bar {background: var(--ui-info-bg);border-bottom-color: var(--ui-info-line);} #ad-root .ad-unit-bar, #ad-root .ad-idx-row {background: var(--ui-ok-bg);border-color: var(--ui-ok-line);border-left-color: var(--ui-ok-strong);border-radius: var(--ui-radius);} #ad-root .ad-unit-bar.ad-unit-off, #ad-root .ad-idx-row.ad-idx-off {background: var(--ui-tint);border-color: var(--ui-table-line);border-left-color: var(--ui-check-line);} #ad-root .ad-bar-chk, #ad-root .ad-unit-title, #ad-root .ad-idx-link {color: var(--ui-ok-text);} #ad-root a.ad-idx-link {color: var(--ui-ok-text);} #ad-root a.ad-idx-link:hover {color: var(--ui-text);} #ad-root .ad-unit-off .ad-bar-chk, #ad-root .ad-unit-off .ad-unit-title, #ad-root #ad-root .ad-idx-off a.ad-idx-link {color: var(--ui-text-disabled);} #ad-root .ad-bar-doc, #ad-root .ad-idx-doc {color: var(--ui-text-2);} #ad-root .ad-unit-off .ad-bar-doc {color: var(--ui-muted);} #ad-root .ad-unit-sep {border-top: 1px solid var(--ui-line-strong);} #ad-root #ad-form .ad-cm {color: var(--ui-text-2);background: transparent;border: 1px dashed var(--ui-line-strong);} #ad-root #ad-form .ad-cm:focus {background: var(--ui-field);border: 1px solid var(--ui-text);} #ad-root #ad-form .ad-cm-filled .ad-cm {color: var(--ui-text);background: var(--ui-warn-bg);border: 1px solid var(--ui-warn-line);} #ad-root a.ad-src {color: var(--ui-info-text);background: var(--ui-info-bg);} #ad-root a.ad-src:hover {background: var(--ui-info-line);} #ad-root a.ad-amb {color: var(--ui-warn-text);background: var(--ui-warn-line);} #ad-root .ad-fld-amb .form-control {background-color: var(--ui-warn-bg);border-color: var(--ui-warn-line);} #ad-root .ad-fld-doc .form-control {color: var(--ui-info-text);background-color: var(--ui-info-bg);border-color: var(--ui-info-line);} #ad-root a.ad-orig {color: var(--ui-accent);} #ad-root a.ad-orig:hover {color: var(--ui-text);} #ad-dropped-list {color: var(--ui-text-2) !important;background: var(--ui-tint) !important;border: 0 !important;border-radius: var(--ui-radius) !important;} #ad-root .ad-create-bar {margin: 0.875rem -1.75rem 0;padding: 0.75rem 1.75rem;background: var(--ui-panel);border-top: 1px solid var(--ui-line);box-shadow: none;} /* ============================== Белый из прежних стилей ============================== */ /* Поверхности, которым белый задан не этим файлом (jQuery UI, bootstrap, css/configurator.css, разметка), приводятся к цвету панели - иначе в приглушенной и темной темах на панели остаются белые пятна. В светлой теме панель белая, и эти правила ничего не меняют. */ /* строки таблицы: белая подложка jQuery UI (.ui-widget-content) убрана, виден фон панели. Цвет состояния строки (желтый, красный, зеленый и др.) задан в css/main.css с !important и остается */ #slickGrid .slick-row.ui-widget-content {background: transparent;} /* выпадающие списки меню и подсказки полей */ nav.navbar.nav-menu .dropdown-menu, nav.navbar .ui-look__menu, .ui-autocomplete.ui-menu {background: var(--ui-panel);} /* окна */ #universeModal .modal-content, #modal-image-popup .modal-content, #ea-ifc-modal .modal-content, #ea-views-list-modal .modal-content, #google-maps .modal-content, #censusPaperBody .modal-content {background-color: var(--ui-panel);} #manualSelectModal {background: var(--ui-panel) !important;} /* схема установки: подписи краев поля сборки перекрывают пунктир цветом панели, плитки палитры секций без подложки */ #droppable-field .orientation-mark span {background: var(--ui-panel);} #components-field .component-image {background-color: transparent;} /* приглушенная тема: картинки с белым фоном (фото оборудования, значки секций, чертежи) стояли бы на панели белыми прямоугольниками - умножение превращает их белый в цвет панели, остальные цвета картинки почти не меняются. В темной теме у картинок свои правила (раздел «Темная тема») */ .ui-theme-soft #slickGridRecord img, .ui-theme-soft #slickGrid #page img, .ui-theme-soft #slickGrid .prod-main img, .ui-theme-soft .ui-manual__logos img, .ui-theme-soft #modal-image-popup .modal-content img {mix-blend-mode: multiply;} /* лента готовых конфигураций установки: у ленты свой слой (transform в css/glider.min.css), умножение действует только внутри него - подложка цвета панели задается самой ленте */ .build-glider .glider-track {background: var(--ui-panel);} /* ============================== Страница входа ============================== */ body.ui-login {display: flow-root;min-height: 100vh;background: var(--ui-bg);} body.ui-login #login-form {margin: 0 -2rem;padding: 1.75rem 3rem 1.25rem;background: var(--ui-panel);border: 0;border-radius: 20px;box-shadow: 0 12px 40px rgba(20, 22, 30, 0.08);} body.ui-login #login-form img {max-width: 100%;margin: 0.25rem auto 1.5rem !important;} body.ui-login #login-form label {margin-bottom: 0.25rem;font-size: 14px !important;color: var(--ui-text-2);} body.ui-login #login-form .form-control {height: 3rem;color: var(--ui-text);background: var(--ui-fill);border-color: transparent;border-radius: 10px;box-shadow: none;transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;} body.ui-login #login-form .form-control:hover {background: var(--ui-fill-hover);} body.ui-login #login-form .form-control:focus {background: var(--ui-field);border-color: var(--ui-text);box-shadow: 0 0 0 3px var(--ui-focus-ring);} body.ui-login #login-form input[type="submit"] {min-height: 3rem !important;font-size: 1.0625rem;font-weight: bold;border-radius: 10px;transition: opacity 0.15s;} body.ui-login #login-form input[type="submit"]:hover {opacity: 0.9;} body.ui-login #login-form .errorMessage {color: var(--ui-danger);} /* ============================== Темная тема ============================== */ /* Цвета темы - переменные :root.ui-theme-dark в начале файла. Здесь то, что переменными не выразить: текст и рамки, заданные прежними стилями, цвета состояний строк, картинки и значки. */ /* пункты меню: в css/main.css цвет задан с !important */ .ui-theme-dark nav.navbar.nav-menu .nav-link {color: var(--ui-text) !important;} /* логотип компании в меню и на странице входа - любой, в том числе с темным текстом на прозрачном фоне: ему оставлена светлая подложка (тень вместо отступов - размеры не меняются). Если у компании загружен логотип для темной темы, js/ui-refresh.js подставляет его и ставит класс ui-logo-dark - подложка не нужна */ .ui-theme-dark nav.navbar.nav-menu .navbar-brand img:not(.ui-logo-dark), .ui-theme-dark body.ui-login #login-form img:not(.ui-logo-dark) {background: #fff;border-radius: 4px;box-shadow: 0 0 0 0.3125rem #fff;filter: brightness(0.9);} /* текст в панелях: прежние стили (bootstrap, jQuery UI) задают темный */ .ui-theme-dark #slickGrid, .ui-theme-dark #slickGridRecord, .ui-theme-dark #slickGrid .slick-row.ui-widget-content {color: var(--ui-text);} /* Страница в области грида, которую новое оформление не покрывает (класс ui-legacy ставит js/ui-refresh.js): CRM, подбор из документации, схема VRF и другие со своими прежними стилями. Она остается светлой - прежние стили рассчитаны на белый фон; переменные светлой темы ей возвращает первый блок файла, а правила этого раздела на нее не действуют (#slickGrid:not(.ui-legacy)) */ .ui-theme-dark #slickGrid.ui-legacy {color-scheme: light;color: #212529;background: #fff;} /* цвета состояний строк таблицы (css/main.css): пастельные фоны рассчитаны на темный текст - в темной теме те же оттенки, но темные */ .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.green, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.green {background: #1f3f2a !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.dark-green, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.dark-green {background: #2b5a39 !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.yellow, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.yellow {background: #4b4420 !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.light-yellow, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.light-yellow {background: #34321f !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.orange, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.orange {background: #5a3f1c !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.red, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.red {background: #542a2a !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.thistle, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.thistle {background: #4c3852 !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.light-blue, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.light-blue {background: #4f2d4b !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.sky-blue, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.sky-blue {background: #213f5c !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.grey, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.grey {background: rgba(255, 255, 255, 0.1) !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.light-grey, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.light-grey {background: #32353c !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.dark-grey, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.dark-grey {background: #555963 !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row.white, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.white {background: #30333b !important;} /* таблица: верхняя граница первой строки (css/landscape.css), темная стрелка сортировки */ .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-row[style="top:0px"] .slick-cell {border-top-color: var(--ui-grid-top);} .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-sort-indicator {filter: invert(1);} /* ссылки в ячейках: jQuery UI красит их в цвет текста (#222) */ .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell a {color: var(--ui-text);} /* правка в ячейке: прежние стили дают полю белый фон */ .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.editable input[type="text"], .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.editable select, .ui-theme-dark #slickGrid:not(.ui-legacy) .slick-cell.editable textarea {color: var(--ui-text);background-color: var(--ui-field);} /* подсказки полей (jQuery UI): цвет текста пунктов задан темным */ .ui-theme-dark .ui-autocomplete.ui-menu, .ui-theme-dark .ui-autocomplete.ui-menu .ui-menu-item a:not(.ui-state-hover):not(.ui-state-focus):not(.ui-state-active), .ui-theme-dark .ui-autocomplete.ui-menu .ui-menu-item > div:not(.ui-state-hover):not(.ui-state-focus):not(.ui-state-active) {color: var(--ui-text);} /* красный и зеленый текст, заданный прямо в разметке (предупреждения, оценка вариантов): чистые цвета на темном читаются плохо - те же цвета светлее */ .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color:red"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color: red"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color:#f00"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color: #f00"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color:#c00"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color: #c00"], .ui-theme-dark #slickGrid:not(.ui-legacy) font[color="red"], .ui-theme-dark #slickGridRecord [style*="color:red"], .ui-theme-dark #slickGridRecord [style*="color: red"] {color: var(--ui-danger) !important;} .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color:green"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color: green"], .ui-theme-dark #slickGrid:not(.ui-legacy) [style*="color: #080"], .ui-theme-dark #slickGrid:not(.ui-legacy) font[color="green"] {color: var(--ui-ok) !important;} /* Картинки. Фото и чертежи с белым фоном остаются светлым листом - слегка приглушенным и со скругленными углами; значки секций на схеме установки и графики - линии на белом или прозрачном фоне - переворачиваются в светлые линии на темном (поворот оттенка возвращает цветам их тон), белый фон значка при этом сливается с панелью */ .ui-theme-dark #slickGridRecord img, .ui-theme-dark #slickGrid:not(.ui-legacy) #page img, .ui-theme-dark #slickGrid:not(.ui-legacy) .prod-main img, .ui-theme-dark .ui-manual__logos img, .ui-theme-dark #modal-image-popup .modal-content img {filter: brightness(0.86);border-radius: var(--ui-radius);} .ui-theme-dark #slickGrid:not(.ui-legacy) #page .build-glider img, .ui-theme-dark #slickGrid:not(.ui-legacy) #page #droppable-field img, .ui-theme-dark #slickGrid:not(.ui-legacy) #page #components-field img {filter: invert(1) hue-rotate(180deg);mix-blend-mode: screen;border-radius: 0;} .ui-theme-dark #slickGrid:not(.ui-legacy) #page img[src*=".svg"], .ui-theme-dark #slickGrid:not(.ui-legacy) #page svg[id^="svg_"], .ui-theme-dark #slickGrid:not(.ui-legacy) #page #gfc-svg svg, .ui-theme-dark #slickGrid:not(.ui-legacy) #page svg#gfc-svg {filter: invert(1) hue-rotate(180deg);border-radius: 0;} /* чертеж установки - черные линии на белом листе (файл ventilationUnitsImage/.png, чертеж режима - _mode_.png; изометрия _iso.png остается картинкой): в темной теме - светлыми линиями на фоне панели */ .ui-theme-dark #slickGrid:not(.ui-legacy) #page img[src*="/ventilationUnitsImage/"]:not([src*="_iso."]) {filter: invert(1) hue-rotate(180deg);mix-blend-mode: screen;border-radius: 0;} /* то же на страницах отчетов; на странице «Почему эта иконка?» чертеж встроен в разметку (data:) */ .ui-theme-dark .ui-report img[src*="/ventilationUnitsImage/"]:not([src*="_iso."]), .ui-theme-dark .ui-report img[src^="data:image/png"] {filter: invert(1) hue-rotate(180deg);mix-blend-mode: screen;} /* значки, нарисованные темной линией */ .ui-theme-dark #page.ui-gfc > h5 a::before {filter: invert(1);} .ui-theme-dark .ui-nomen .jsgrid .jsgrid-search-mode-button, .ui-theme-dark .ui-nomen .jsgrid .jsgrid-search-button, .ui-theme-dark .ui-nomen .jsgrid .jsgrid-clear-filter-button, .ui-theme-dark .ui-nomen .jsgrid .jsgrid-edit-button, .ui-theme-dark .ui-nomen .jsgrid .jsgrid-delete-button, .ui-theme-dark .ui-nomen .jsgrid .jsgrid-cancel-edit-button {filter: invert(1) brightness(1.6);} .ui-theme-dark .ui-nomen .jsgrid .jsgrid-button:hover {background-color: transparent;} /* таблицы jsGrid: рамки темы jsGrid светло-серые */ .ui-theme-dark .ui-nomen .jsgrid-grid-header, .ui-theme-dark .ui-nomen .jsgrid-grid-body, .ui-theme-dark .ui-nomen .jsgrid-cell, .ui-theme-dark .ui-nomen .jsgrid-header-cell {border-color: var(--ui-line);} .ui-theme-dark .ui-nomen .jsgrid-pager-container {color: var(--ui-text-2);} /* окна: крестик закрытия bootstrap черный */ .ui-theme-dark .modal-content .close {color: var(--ui-text);text-shadow: none;} /* календарь выбора дат (js/daterangepicker): фильтры таблиц и поля дат */ .ui-theme-dark .daterangepicker {color: var(--ui-text);background: var(--ui-panel);border-color: var(--ui-line-strong);box-shadow: var(--ui-shadow);} .ui-theme-dark .daterangepicker.opensleft::after, .ui-theme-dark .daterangepicker.opensright::after {border-bottom-color: var(--ui-panel);} .ui-theme-dark .daterangepicker .ranges label {color: var(--ui-text-2);} .ui-theme-dark .daterangepicker .ranges li {color: var(--ui-accent);background: var(--ui-fill);border-color: var(--ui-fill);} .ui-theme-dark .daterangepicker .ranges li.active, .ui-theme-dark .daterangepicker .ranges li:hover {color: var(--ui-on-primary);background: var(--ui-primary);border-color: var(--ui-primary);} .ui-theme-dark .daterangepicker .ranges input, .ui-theme-dark .daterangepicker select {color: var(--ui-text);background: var(--ui-fill);border-color: var(--ui-line-strong);} .ui-theme-dark .daterangepicker .calendar, .ui-theme-dark .daterangepicker .calendar-date {background: var(--ui-panel);border-color: var(--ui-line-strong);} .ui-theme-dark .daterangepicker td.off, .ui-theme-dark .daterangepicker td.disabled, .ui-theme-dark .daterangepicker td.week, .ui-theme-dark .daterangepicker th.week {color: var(--ui-muted);} .ui-theme-dark .daterangepicker td.available:hover, .ui-theme-dark .daterangepicker th.available:hover {background: var(--ui-fill-hover);} .ui-theme-dark .daterangepicker td.in-range {background: var(--ui-fill);} .ui-theme-dark .daterangepicker td.active, .ui-theme-dark .daterangepicker td.active:hover {color: var(--ui-on-primary);text-shadow: none;background: var(--ui-primary);} /* окна jQuery UI: подложка под окном - светло-серая дымка, на темном она высветляет страницу */ .ui-theme-dark .ui-widget-overlay {background: #000;opacity: 0.55;} /* всплывающие подсказки bootstrap (код установки и подобные) */ .ui-theme-dark .popover {background-color: var(--ui-fill);border-color: var(--ui-line-strong);box-shadow: var(--ui-shadow);} .ui-theme-dark .popover-body {color: var(--ui-text);} .ui-theme-dark .popover-header {color: var(--ui-text);background-color: var(--ui-fill-hover);border-bottom-color: var(--ui-line-strong);} .ui-theme-dark .bs-popover-top .arrow::after, .ui-theme-dark .bs-popover-auto[x-placement^="top"] .arrow::after {border-top-color: var(--ui-fill);} .ui-theme-dark .bs-popover-right .arrow::after, .ui-theme-dark .bs-popover-auto[x-placement^="right"] .arrow::after {border-right-color: var(--ui-fill);} .ui-theme-dark .bs-popover-bottom .arrow::after, .ui-theme-dark .bs-popover-auto[x-placement^="bottom"] .arrow::after {border-bottom-color: var(--ui-fill);} .ui-theme-dark .bs-popover-left .arrow::after, .ui-theme-dark .bs-popover-auto[x-placement^="left"] .arrow::after {border-left-color: var(--ui-fill);} /* подбор из документации: картинки страниц документа - светлые листы, слегка приглушенные */ .ui-theme-dark #ad-root .ad-pagecard img, .ui-theme-dark #ad-modal img {filter: brightness(0.88);} /* конфигуратор VRF (views/vrf/configurator.php, css/vrf/main.css): схему рисует js/vrf/drawer.js блоками - черные линии труб, темно-зеленые рамки, значки темной линией на белом. Копия схемы для картинки в отчет (saveImage и end в том же скрипте) вставляется прямо в , вне #slickGrid: правила схемы на нее не действуют, а темный текст ей возвращает последнее правило - картинка остается черной по белому */ .ui-theme-dark #slickGrid .facility-field .horizontal-line, .ui-theme-dark #slickGrid .facility-field .vertical-line {background-color: var(--ui-text-2);} /* у блока свой слой (z-index), значок смешивается только внутри него - поэтому фон панели задан самому блоку */ .ui-theme-dark #slickGrid .facility-field .section-box {background-color: var(--ui-panel);border-color: var(--ui-ok);} .ui-theme-dark #slickGrid .facility-field .hover-box {background-color: var(--ui-ok-bg);border-color: var(--ui-danger);} .ui-theme-dark #slickGrid .facility-field .white-information {background-color: var(--ui-panel);} .ui-theme-dark #slickGrid .components-field .component-image {background-color: transparent;} .ui-theme-dark #slickGrid .facility-field .section-box img, .ui-theme-dark #slickGrid .components-field img {filter: invert(1) hue-rotate(180deg);mix-blend-mode: screen;} .ui-theme-dark #slickGrid .facility-field .vrf-outer-device img {filter: brightness(0.86);mix-blend-mode: normal;border-radius: var(--ui-radius);} .ui-theme-dark > .facility-field {color: #000;color-scheme: light;} /* приглушенная тема: белые подложки подписей и значков схемы - в цвет панели */ .ui-theme-soft #slickGrid .facility-field .white-information, .ui-theme-soft #slickGrid .facility-field .section-box:not(.hover-box) {background-color: var(--ui-panel);} .ui-theme-soft #slickGrid .components-field .component-image {background-color: transparent;} .ui-theme-soft #slickGrid .facility-field .section-box img, .ui-theme-soft #slickGrid .components-field img {mix-blend-mode: multiply;} /* окна VRF (параметры блока, общие параметры, предупреждения) вставляются в body */ .ui-theme-dark .section-popover {color: var(--ui-text);background-color: var(--ui-panel);border-color: var(--ui-line-strong);box-shadow: var(--ui-shadow);} .ui-theme-dark .section-popover .nav-tabs {border-bottom-color: var(--ui-line-strong);} .ui-theme-dark .section-popover .nav-tabs .nav-link {color: var(--ui-text-2);} .ui-theme-dark .section-popover .nav-tabs .nav-link.active {color: var(--ui-text);background-color: var(--ui-panel);border-color: var(--ui-line-strong) var(--ui-line-strong) var(--ui-panel);} .ui-theme-dark .section-popover .conf_row {border-top-color: var(--ui-line);} .ui-theme-dark .section-popover .configuration_input h2.heading {color: var(--ui-accent);border-bottom-color: var(--ui-accent);} .ui-theme-dark .section-popover .errors_list, .ui-theme-dark .section-popover .help-block.error {color: var(--ui-danger-text);background: var(--ui-danger-bg);border-color: var(--ui-danger);} .ui-theme-dark .section-popover .btn-lightgrey {color: var(--ui-text);background: var(--ui-fill);border-color: transparent;} .ui-theme-dark .section-popover .btn-lightgrey:hover {background: var(--ui-fill-strong);} .ui-theme-dark .section-popover .table {color: var(--ui-text);} .ui-theme-dark .section-popover .table th, .ui-theme-dark .section-popover .table td, .ui-theme-dark .section-popover .table-bordered {border-color: var(--ui-table-line);} .ui-theme-dark .section-popover .table-striped tbody tr:nth-of-type(odd) {background-color: var(--ui-hover);} .ui-theme-dark .section-popover .table-hover tbody tr:hover {color: var(--ui-text);background-color: var(--ui-active);}