/* ========================================================================== Дизайн-система «ЭУ РАН» — компоненты и каркас. Всё scoped под `.ui-modern` (класс на модерн-каркаса), чтобы стили не влияли на ещё не мигрированные экраны и переопределяли Bootstrap/старые классы там, где нужно. Токены — в tokens.css. ========================================================================== */ /* ------------------------------- База ---------------------------------- */ body.ui-modern{ background:var(--bg); color:var(--text); font-family:var(--font-ui); font-size:.9375rem; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .ui-modern h1,.ui-modern h2,.ui-modern h3,.ui-modern h4,.ui-modern h5,.ui-modern h6{ color:var(--text);margin:0;font-weight:650;letter-spacing:-.01em; } .ui-modern a{color:var(--accent);text-decoration:none} .ui-modern a:hover{color:var(--accent-hover)} .ui-modern hr{border:0;border-top:1px solid var(--border);margin:1rem 0} .ui-modern ::selection{background:var(--accent-weak-2);color:var(--text)} .ui-modern :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px} .ui-modern .fw-600{font-weight:600} @media (prefers-reduced-motion:no-preference){ .ui-modern .m-link,.ui-modern .button-smart,.ui-modern .tabs li a, .ui-modern .input-smart,.ui-modern .m-theme-toggle,.ui-modern .link-icon-light{transition:all .16s ease} } /* ------------------------------ Каркас --------------------------------- */ .ui-modern .m-shell{display:flex;min-height:100vh} .ui-modern .m-sidebar{ width:var(--sidebar-w);flex:none;position:fixed;top:0;left:0;bottom:0;z-index:50; background:var(--surface);border-right:1px solid var(--border); display:flex;flex-direction:column;transition:transform .2s ease; } .ui-modern .m-main{ flex:1;min-width:0;margin-left:var(--sidebar-w);display:flex;flex-direction:column; transition:margin .2s ease; } .ui-modern.is-collapsed .m-sidebar{transform:translateX(calc(-1 * var(--sidebar-w)))} .ui-modern.is-collapsed .m-main{margin-left:0} /* Бренд */ .ui-modern .m-brand{display:flex;align-items:center;gap:11px;padding:15px 16px;border-bottom:1px solid var(--border)} .ui-modern .m-brand .m-mark{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center; background:linear-gradient(150deg,#2E74D6,#164A94)} .ui-modern .m-brand .m-mark img{width:20px;height:20px;filter:brightness(0) invert(1)} .ui-modern .m-brand .m-mark i{color:#fff;font-size:18px} .ui-modern .m-brand .m-bt{font-family:var(--font-brand);font-weight:700;font-size:1.02rem;line-height:1;color:var(--text)} .ui-modern .m-brand .m-bs{font-size:.66rem;color:var(--text-3);letter-spacing:.02em;margin-top:2px} /* Навигация */ .ui-modern .m-nav{padding:10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;flex:1} .ui-modern .m-cap{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);padding:14px 10px 6px} .ui-modern .m-link{ display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--radius-sm); color:var(--text-2);font-size:.8438rem;font-weight:550;position:relative;cursor:pointer; background:none;border:0;width:100%;text-align:left;font-family:inherit; } .ui-modern .m-link i{width:20px;font-size:16px;color:var(--text-3);flex:none;text-align:center} .ui-modern .m-link>span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ui-modern .m-link:hover{background:var(--surface-2);color:var(--text)} .ui-modern .m-link:hover i{color:var(--text-2)} .ui-modern .m-link.active{background:var(--accent-weak);color:var(--accent);font-weight:650} .ui-modern .m-link.active i{color:var(--accent)} .ui-modern .m-link.active::before{content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--accent)} .ui-modern .m-link .m-caret{margin-left:auto;width:auto;font-size:13px;transition:transform .18s ease} .ui-modern .m-group.open>.m-link .m-caret{transform:rotate(180deg)} .ui-modern .m-submenu{display:none;flex-direction:column;gap:1px;padding:2px 0 2px 30px} .ui-modern .m-group.open>.m-submenu{display:flex} .ui-modern .m-sublink{display:block;padding:7px 10px;border-radius:var(--radius-sm);color:var(--text-2);font-size:.8125rem} .ui-modern .m-sublink:hover{background:var(--surface-2);color:var(--text)} .ui-modern .m-sublink.active{color:var(--accent);font-weight:600} .ui-modern .m-sidebar-foot{padding:10px;border-top:1px solid var(--border)} .ui-modern .m-logout{color:var(--danger)} .ui-modern .m-logout i{color:var(--danger)} .ui-modern .m-logout:hover{background:var(--danger-weak);color:var(--danger)} .ui-modern .m-logout form{display:none} /* Топбар */ .ui-modern .m-topbar{ height:var(--topbar-h);position:sticky;top:0;z-index:40;flex:none; background:var(--surface);border-bottom:1px solid var(--border); display:flex;align-items:center;gap:14px;padding:0 18px; } .ui-modern .m-hamburger,.ui-modern .m-icon-btn{ display:inline-grid;place-items:center;width:38px;height:38px;border-radius:var(--radius-sm); border:0;background:none;color:var(--text-2);cursor:pointer;font-size:18px;flex:none; } .ui-modern .m-hamburger:hover,.ui-modern .m-icon-btn:hover{background:var(--surface-2);color:var(--text)} .ui-modern .m-crumbs{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--text-2);min-width:0} .ui-modern .m-crumbs .sep{color:var(--text-3);font-size:11px} .ui-modern .m-crumbs .cur{color:var(--text);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ui-modern .m-topbar-spacer{flex:1} .ui-modern .m-theme-toggle{ display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;width:38px; border-radius:var(--pill);border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);cursor:pointer;font-size:16px; } .ui-modern .m-theme-toggle:hover{background:var(--surface-2);color:var(--text)} /* Иконка темы: показываем «луну» в светлой (переключить в тёмную) и «солнце» в тёмной */ .ui-modern .m-theme-toggle .m-i-sun{display:none} .ui-modern .m-theme-toggle .m-i-moon{display:inline-block} :root[data-theme="dark"] .ui-modern .m-theme-toggle .m-i-sun{display:inline-block} :root[data-theme="dark"] .ui-modern .m-theme-toggle .m-i-moon{display:none} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ui-modern .m-theme-toggle .m-i-sun{display:inline-block} :root:not([data-theme="light"]) .ui-modern .m-theme-toggle .m-i-moon{display:none} } /* Плашка пользователя в топбаре (Bootstrap dropdown) */ .ui-modern .m-user>a{ display:inline-flex!important;align-items:center;gap:10px;padding:5px 12px 5px 6px;border-radius:var(--pill); border:1px solid var(--border);background:var(--surface);cursor:pointer;color:var(--text); } .ui-modern .m-user>a:hover{background:var(--surface-2)} .ui-modern .m-user .m-avatar{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#fff; font-size:.72rem;font-weight:700;flex:none;background:linear-gradient(150deg,#4C8AE0,#164A94)} .ui-modern .m-user .m-uname{font-size:.8125rem;font-weight:600;line-height:1.1} .ui-modern .m-user .m-urole{font-size:.68rem;color:var(--text-3)} /* Убираем дефолтный caret Bootstrap — свой шеврон уже есть */ .ui-modern .m-user .dropdown-toggle::after{display:none} /* Меню пользователя в стиле дизайн-системы */ .ui-modern .m-user .dropdown-menu{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-md);padding:6px;min-width:190px;margin-top:8px;font-size:.875rem; } .ui-modern .m-user .dropdown-menu>li>a{ display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius-xs);color:var(--text); } .ui-modern .m-user .dropdown-menu>li>a:hover{background:var(--surface-2);color:var(--text)} .ui-modern .m-user .dropdown-menu>li>a i{color:var(--text-3);width:18px;text-align:center} .ui-modern .m-user .dropdown-menu .divider{height:1px;background:var(--border);margin:5px 6px;list-style:none;overflow:hidden} /* Контент */ .ui-modern .m-content{padding:22px;flex:1} .ui-modern .m-content>.container-fluid{padding:0;max-width:1180px} /* --------------------------- Карточки/шапка ---------------------------- */ .ui-modern .rounded-block{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius); box-shadow:var(--shadow-sm);padding:20px 24px;margin-bottom:16px; } .ui-modern .m-page-head{display:flex;align-items:center;gap:14px;margin:2px 0 16px} .ui-modern .m-page-head h5{font-size:1.35rem;font-weight:700;letter-spacing:-.02em} .ui-modern .rounded-block-full-width-element{display:none} /* ------------------------------ Вкладки -------------------------------- */ .ui-modern .tabs{ list-style:none;display:flex;gap:4px;margin:0;padding:0;border-bottom:1px solid var(--border); overflow-x:auto;overflow-y:hidden; } .ui-modern .tabs li{margin:0} .ui-modern .tabs li a{ display:inline-flex;align-items:center;gap:8px;padding:10px 14px;margin-bottom:-1px; border-bottom:2px solid transparent;color:var(--text-2);font-weight:600;font-size:.875rem;white-space:nowrap; } .ui-modern .tabs li a>div{float:none!important;display:inline-flex;align-items:center} .ui-modern .tabs li a i{color:var(--text-3);font-size:15px} .ui-modern .tabs li a:hover{color:var(--text)} .ui-modern .tabs li.active a{color:var(--accent);border-bottom-color:var(--accent)} .ui-modern .tabs li.active a i{color:var(--accent)} .ui-modern #tab-smart-content{padding-top:20px} /* --------------------------- Инфо-сетка -------------------------------- */ .ui-modern .info-text{color:var(--text-3);font-size:.75rem;font-weight:600;margin-bottom:2px} .ui-modern .form-group{margin-bottom:16px} .ui-modern .title-line{ color:var(--text);font-size:1rem;font-weight:650;text-align:left!important; margin:22px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--border); } .ui-modern h6{font-size:1rem;font-weight:650} /* ------------------------------ Кнопки --------------------------------- */ .ui-modern .button-smart{ display:inline-flex;align-items:center;justify-content:center;gap:8px;height:38px;padding:0 16px; border-radius:var(--radius-sm);border:1px solid transparent;background:var(--surface-2);color:var(--text); font:inherit;font-size:.875rem;font-weight:600;cursor:pointer;white-space:nowrap;text-decoration:none;line-height:1; } .ui-modern a.button-smart{line-height:36px} .ui-modern .button-smart:hover{text-decoration:none} .ui-modern .button-smart:active{transform:translateY(1px)} .ui-modern .button-smart-lightBlue{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-sm)} .ui-modern .button-smart-lightBlue:hover{background:var(--accent-hover);color:var(--on-accent)} .ui-modern .button-smart-green{background:var(--success);color:#fff} .ui-modern .button-smart-green:hover{filter:brightness(1.05);color:#fff} .ui-modern .button-smart-red{background:var(--danger);color:#fff} .ui-modern .button-smart-S{height:36px;padding:0 14px;font-size:.8438rem} .ui-modern .link-smart{text-align:center} /* Иконка-действие (карандаш/плюс/корзина) */ .ui-modern .link-icon-light{ display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-weight:600;font-size:.8438rem; } .ui-modern .link-icon-light:hover{color:var(--accent-hover)} .ui-modern .link-icon-light i{font-size:.95em} /* --------------------- Пилюли статусов / счётчики ---------------------- */ /* Источник вида: design/ui-kit.html. Используются в таблицах-списках. */ .ui-modern .pill{ display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 10px;border-radius:var(--pill); font-size:.75rem;font-weight:600;line-height:1;border:1px solid transparent;white-space:nowrap; } .ui-modern .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .ui-modern .pill-neutral{background:var(--surface-2);color:var(--text-2);border-color:var(--border)} .ui-modern .pill-success{background:var(--success-weak);color:var(--success);border-color:var(--success-border)} .ui-modern .pill-warning{background:var(--warning-weak);color:var(--warning);border-color:var(--warning-border)} .ui-modern .pill-danger{background:var(--danger-weak);color:var(--danger);border-color:var(--danger-border)} .ui-modern .pill-info{background:var(--info-weak);color:var(--info);border-color:var(--info-border)} .ui-modern .pill-accent{background:var(--accent);color:var(--on-accent)} /* Счётчики заданий: запрос / у эксперта / у координатора / отменено / завершено */ .ui-modern .tasks{display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;font-weight:650;font-size:.8125rem} .ui-modern .tasks span{min-width:22px;height:22px;padding:0 5px;display:inline-grid;place-items:center;border-radius:6px} .ui-modern .tasks .sep{min-width:0;padding:0;background:none;color:var(--text-3);font-weight:400} .ui-modern .tasks .t-req{color:var(--text-2);background:var(--surface-2)} .ui-modern .tasks .t-expert{color:var(--info);background:var(--info-weak)} .ui-modern .tasks .t-curator{color:var(--warning);background:var(--warning-weak)} .ui-modern .tasks .t-cancel{color:var(--danger);background:var(--danger-weak)} .ui-modern .tasks .t-done{color:var(--success);background:var(--success-weak)} /* ------------------------------ Таблицы -------------------------------- */ .ui-modern table{width:100%;border-collapse:collapse;font-size:.875rem;background:var(--surface)} .ui-modern table thead th{ text-align:left;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--text-2); background:var(--surface-2);padding:11px 14px;border-bottom:1px solid var(--border);white-space:nowrap; } .ui-modern table tbody td{padding:11px 14px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle} .ui-modern table tbody tr:hover{background:var(--surface-2)} .ui-modern table.rounded-block-full-width-element{display:table} /* Заголовок над списком-таблицей (.table-smart-title из старой разметки) */ .ui-modern .table-smart-title{font-size:1.05rem;font-weight:650;color:var(--text);letter-spacing:-.01em;margin:8px 0 12px} /* Пока DataTables не инициализировал таблицу — прячем «сырую» разметку (нет FOUC) */ .ui-modern .apply-datatables,.ui-modern .apply-datatables-scroll{display:none} /* DataTables-обвязка: раскладка (в модерн-каркасе старый DatatableStyle.css не грузится) */ .ui-modern .dataTables_wrapper{ color:var(--text-2);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 16px;align-items:center; } /* Scroll-вариант (dom "<…>", apply-datatables-scroll) заворачивает всю обвязку в один внешний div — распрямляем его, чтобы length/filter/таблица/info/paginate встали в грид (иначе всё падает в 1-ю колонку и таблица занимает половину карточки). :only-child не задевает обычный вариант — там у обёртки несколько прямых детей. */ .ui-modern .dataTables_wrapper>div:only-child{display:contents} .ui-modern .dataTables_length{grid-column:1;grid-row:1;justify-self:start} .ui-modern .dataTables_filter{grid-column:2;grid-row:1;justify-self:end} /* .dt-scroll / .table-smart-scroll оборачивают таблицу (dom из DataTablesAutoApply.js) — прокрутка по ширине внутри карточки (широкие таблицы, напр. Проверка заполнения) */ .ui-modern .dataTables_wrapper .dt-scroll, .ui-modern .dataTables_wrapper .table-smart-scroll{grid-column:1 / -1;grid-row:2;min-width:0;overflow-x:auto;margin:0} .ui-modern .dataTables_wrapper .dt-scroll>table, .ui-modern .dataTables_wrapper .table-smart-scroll>table{margin:0} .ui-modern .dataTables_wrapper>table, .ui-modern .dataTables_wrapper .dataTables_processing{grid-column:1 / -1;grid-row:2;margin:0} .ui-modern .dataTables_info{grid-column:1;grid-row:3;justify-self:start;font-size:.8125rem;color:var(--text-2)} .ui-modern .dataTables_paginate{grid-column:2;grid-row:3;justify-self:end} .ui-modern .dataTables_length label,.ui-modern .dataTables_filter label{ display:inline-flex;align-items:center;gap:8px;margin:0;font-size:.8125rem;font-weight:500;color:var(--text-2); } .ui-modern .dataTables_filter input,.ui-modern .dataTables_length select{ height:34px;border:1px solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);padding:0 10px;margin:0; } .ui-modern .dataTables_filter input:focus,.ui-modern .dataTables_length select:focus{ outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring); } .ui-modern .dataTables_paginate{display:inline-flex;flex-wrap:wrap;gap:4px} .ui-modern .dataTables_paginate .paginate_button{ display:inline-block;min-width:34px;text-align:center;padding:6px 11px;border-radius:var(--radius-xs); border:1px solid var(--border);background:var(--surface);color:var(--text)!important;cursor:pointer;font-size:.8125rem;font-weight:600; } .ui-modern .dataTables_paginate .paginate_button:hover:not(.current):not(.disabled){background:var(--surface-2)} .ui-modern .dataTables_paginate .paginate_button.current, .ui-modern .dataTables_paginate .paginate_button.current:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)!important} .ui-modern .dataTables_paginate .paginate_button.disabled{opacity:.45;cursor:default} /* Индикаторы сортировки (юникод — FA здесь в SVG-JS сборке, глифы в ::after не рендерятся) */ .ui-modern table.dataTable thead th{cursor:pointer;position:relative;padding-right:28px} .ui-modern table.dataTable thead th.sorting::after, .ui-modern table.dataTable thead th.sorting_asc::after, .ui-modern table.dataTable thead th.sorting_desc::after{ position:absolute;right:11px;top:50%;transform:translateY(-50%);line-height:1;color:var(--text-3); } .ui-modern table.dataTable thead th.sorting::after{content:"\21C5";font-size:.85em;opacity:.5} .ui-modern table.dataTable thead th.sorting_asc::after{content:"\25B2";font-size:.62em;color:var(--accent)} .ui-modern table.dataTable thead th.sorting_desc::after{content:"\25BC";font-size:.62em;color:var(--accent)} @media (max-width:600px){ .ui-modern .dataTables_wrapper{grid-template-columns:1fr} .ui-modern .dataTables_length,.ui-modern .dataTables_filter, .ui-modern .dataTables_info,.ui-modern .dataTables_paginate{grid-column:1;justify-self:start} .ui-modern .dataTables_length{grid-row:1} .ui-modern .dataTables_filter{grid-row:2} .ui-modern .dataTables_wrapper .dt-scroll, .ui-modern .dataTables_wrapper>table,.ui-modern .dataTables_wrapper .table-smart-scroll{grid-row:3} .ui-modern .dataTables_info{grid-row:4} .ui-modern .dataTables_paginate{grid-row:5} } /* ---------------- Формы (модалки и отдельные страницы) ----------------- */ .ui-modern .input-smart,.ui-modern .label-smart{font-family:var(--font-ui)} .ui-modern .input-smart{ width:100%;height:38px;padding:0 12px;border-radius:var(--radius-sm); border:1px solid var(--border-strong);background:var(--surface);color:var(--text);font-size:.875rem; } .ui-modern .input-smart::placeholder{color:var(--text-3)} .ui-modern .input-smart:hover{border-color:var(--text-3)} .ui-modern .input-smart:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring)} .ui-modern .label-smart{display:flex;align-items:center;color:var(--text);font-weight:600;font-size:.8125rem;padding-top:8px} /* Bootstrap .form-control (textarea/поля, напр. форма комментария на Диалоге, фильтры). Без height — textarea сохраняет авто-высоту; тема совпадает с .input-smart. Исключаем .bootstrap-select (обёртка-DIV несёт класс form-control — иначе двойная рамка: рамка обёртки + рамка .dropdown-toggle) и не-текстовые input (checkbox/radio/file). */ .ui-modern .form-control:not(.bootstrap-select):not([type=checkbox]):not([type=radio]):not([type=file]){ width:100%;padding:6px 12px;border-radius:var(--radius-sm); border:1px solid var(--border-strong);background:var(--surface);color:var(--text); font-family:var(--font-ui);font-size:.875rem; } .ui-modern .form-control:not(.bootstrap-select)::placeholder{color:var(--text-3)} .ui-modern .form-control:not(.bootstrap-select):not([type=checkbox]):not([type=radio]):not([type=file]):hover{border-color:var(--text-3)} .ui-modern .form-control:not(.bootstrap-select):not([type=checkbox]):not([type=radio]):not([type=file]):focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--ring);background:var(--surface);color:var(--text)} .ui-modern .input-validation-error{border-color:var(--danger)!important;box-shadow:0 0 0 3px rgba(196,60,60,.18)} .ui-modern .field-validation-error,.ui-modern .text-danger{color:var(--danger)!important;font-size:.75rem} /* bootstrap-select в модалках */ /* Обёртка-DIV несёт класс form-control → белый фон Bootstrap (radius 4px) проглядывает за скруглёнными (8px) углами тёмного .dropdown-toggle — белые уголки в тёмной теме. Фон рисует только кнопка. */ .ui-modern .bootstrap-select.form-control{background:transparent} .ui-modern .bootstrap-select-style,.ui-modern .bootstrap-select>.dropdown-toggle{ height:38px!important;border:1px solid var(--border-strong)!important;border-radius:var(--radius-sm)!important; background:var(--surface)!important;color:var(--text)!important;box-shadow:none!important;display:flex;align-items:center; } /* Выпадающее меню bootstrap-select — тёмная/светлая тема (по умолчанию было белым) */ .ui-modern .bootstrap-select>.dropdown-menu{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm); box-shadow:var(--shadow-md);padding:6px;color:var(--text); } .ui-modern .bootstrap-select .dropdown-menu .inner{max-height:280px} .ui-modern .bootstrap-select ul.dropdown-menu.inner{background:transparent;border:0;box-shadow:none;padding:0;margin:0} .ui-modern .bootstrap-select .dropdown-menu li a, .ui-modern .bootstrap-select .dropdown-menu li a.dropdown-item{ display:flex;align-items:center;padding:7px 10px;border-radius:var(--radius-xs);color:var(--text); } .ui-modern .bootstrap-select .dropdown-menu li a .text{color:var(--text)} .ui-modern .bootstrap-select .dropdown-menu li a .check-mark{color:var(--accent)} .ui-modern .bootstrap-select .dropdown-menu li a:hover, .ui-modern .bootstrap-select .dropdown-menu li a:focus{background:var(--surface-2);color:var(--text)} .ui-modern .bootstrap-select .dropdown-menu li.selected a, .ui-modern .bootstrap-select .dropdown-menu li a.active, .ui-modern .bootstrap-select .dropdown-menu li a.selected{background:var(--accent-weak);color:var(--accent)} .ui-modern .bootstrap-select .dropdown-menu li.disabled a{color:var(--text-3)} /* Кнопки «Выбрать все / Отменить все» */ .ui-modern .bootstrap-select .bs-actionsbox{padding:0 2px 8px;margin-bottom:6px;border-bottom:1px solid var(--border)} .ui-modern .bootstrap-select .bs-actionsbox .actions-btn{ background:var(--surface-2);border:1px solid var(--border);color:var(--text-2); font-size:.8rem;font-weight:600;padding:5px 8px;border-radius:var(--radius-xs); } .ui-modern .bootstrap-select .bs-actionsbox .actions-btn:hover{background:var(--surface-3);color:var(--text)} /* --------------------- Нативные контролы форм -------------------------- */ /* checkbox/radio: бренд-accent вместо браузерного дефолта. Тёмная/светлая тема нативных контролов — через color-scheme (tokens.css). */ .ui-modern input[type=checkbox], .ui-modern input[type=radio]{ accent-color:var(--accent);width:16px;height:16px;vertical-align:middle;cursor:pointer; } /* file-input: не обрезаем нативную кнопку фикс-высотой .input-smart (38px), саму кнопку выбора приводим к виду .button-smart-S */ .ui-modern input[type=file].input-smart{height:auto;padding:6px 12px;line-height:1.5} .ui-modern input[type=file]::file-selector-button{ margin:0 12px 0 0;padding:5px 12px;border-radius:var(--radius-xs); border:1px solid var(--border);background:var(--surface-2);color:var(--text); font:inherit;font-size:.8438rem;font-weight:600;cursor:pointer; } .ui-modern input[type=file]::file-selector-button:hover{background:var(--surface-3);color:var(--text)} /* --------------------- Модальное окно (pgwModal) ----------------------- */ .ui-modern #pgwModalBackdrop,#pgwModalBackdrop{background:rgba(12,20,32,.55)!important} /* .pm-body/.pm-content — обёртки pgwmodal с белым фоном и радиусом 5px. Обнуляем их, иначе белый .pm-body проглядывает за скруглёнными (16px) углами .modal-layout-smart (белые уголки в тёмной теме). Фон/скругление/тень даёт только .modal-layout-smart. */ .ui-modern .pgwModal .pm-body{background:transparent!important;border-radius:0!important;box-shadow:none!important} .ui-modern .pgwModal .pm-content,.pgwModal .pm-content{padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important} .ui-modern .modal-layout-smart,.modal-layout-smart{ background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); } .ui-modern .modal-header-smart,.modal-layout-smart .modal-header-smart{ background:var(--surface-2);border-bottom:1px solid var(--border);padding:16px 20px;cursor:move; border-radius:var(--radius-lg) var(--radius-lg) 0 0; } .modal-layout-smart .modal-header-smart h5{font-size:1.02rem;font-weight:650;color:var(--text)} .modal-layout-smart .modal-header-smart .modal-close-btn-smart{cursor:pointer;color:var(--text-3);font-size:18px} .modal-layout-smart .modal-header-smart .modal-close-btn-smart:hover{color:var(--text)} .ui-modern .modal-smart-content,.modal-layout-smart .modal-smart-content{padding:20px;background:var(--surface)} /* Футер лежит внутри .modal-smart-content (padding:20px) — вытягиваем его отрицательными отступами до краёв окна, чтобы серая заливка была вровень */ .modal-footer-smart{ display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;margin:16px -20px -20px; border-top:1px solid var(--border);background:var(--surface-2); border-radius:0 0 var(--radius-lg) var(--radius-lg); } /* ------------------ Сообщения/валидация (Boxes) ------------------------ */ /* Плейсхолдеры валидации (asp-validation-for) — пустые до ошибки: не показываем фон */ .ui-modern .box.alert-box{display:block;background:transparent;border:0;padding:3px 0 0;color:var(--danger);font-size:.75rem;font-weight:500} .ui-modern .box.alert-box:empty{display:none} /* --------------------------- Адаптивность ------------------------------ */ @media (max-width:900px){ .ui-modern .m-sidebar{transform:translateX(calc(-1 * var(--sidebar-w)))} .ui-modern .m-main{margin-left:0} .ui-modern.is-collapsed .m-sidebar{transform:none} .ui-modern .m-user .m-uname,.ui-modern .m-user .m-urole{display:none} } /* ========================================================================== KPI-плитка дашборда (.m-stat) — число + подпись + иконка, кликабельная ========================================================================== */ .ui-modern .m-stat{ display:flex; align-items:center; gap:14px; padding:16px 18px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); text-decoration:none; transition:border-color .15s ease, box-shadow .15s ease; } .ui-modern a.m-stat:hover, .ui-modern a.m-stat:focus{ border-color:var(--border-strong); box-shadow:var(--shadow-md); text-decoration:none; } .ui-modern .m-stat__icon{ display:grid; place-items:center; width:44px; height:44px; flex:0 0 auto; border-radius:var(--radius-sm); background:var(--accent-weak); color:var(--accent); font-size:18px; } .ui-modern .m-stat__body{ display:flex; flex-direction:column; min-width:0; } .ui-modern .m-stat__num{ font-size:1.7rem; font-weight:600; line-height:1.1; color:var(--text); } .ui-modern .m-stat__label{ font-size:.85rem; color:var(--text-2); } /* ========================================================================== Экран входа (auth) — центрированная карточка для _LayoutUnauthorizedModern ========================================================================== */ .ui-modern .m-auth{ min-height:100vh;display:grid;place-items:center; padding:32px 16px;background:var(--bg);position:relative; } .ui-modern .m-auth-box{width:100%;max-width:420px} /* Широкий вариант карточки — для длинных контентных страниц (юридические тексты Information/*). Опционально включается страницей через ViewData["AuthBoxModifier"]; базовое поведение auth-карточки (Login/ResetPassword) не затрагивается. */ .ui-modern .m-auth-box--wide{max-width:820px} .ui-modern .m-auth-logo{display:flex;justify-content:center;margin-bottom:20px} .ui-modern .m-auth-logo img{width:100%;max-width:340px;height:auto} /* Плавающий переключатель темы (топбара на экране входа нет) */ .ui-modern .m-auth-theme{position:fixed;top:16px;right:16px;z-index:10} /* Логотип — синие чернила на прозрачном фоне; в тёмной теме подсвечиваем (brightness 1.15 — проверено на читаемость в обеих темах). */ :root[data-theme="dark"] .ui-modern .m-auth-logo img{filter:brightness(1.15)} @media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .ui-modern .m-auth-logo img{filter:brightness(1.15)} }