:root { --bg: #f4f7fa; --panel: #ffffff; --panel-soft: #edf3f8; --border: #c9d5df; --text: #16202a; --muted: #637282; --accent: #2b6ea6; --accent-soft: #d9e9f6; --danger: #d64b3a; --success: #66b832; --warning: #d6a12e; --scrollbar-track: #e6edf3; --scrollbar-thumb: #a9bac8; --scrollbar-thumb-hover: #7f95a8; --topbar-height: 48px; --sidebar-width: 330px; } * { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: var(--scrollbar-track); } *::-webkit-scrollbar-thumb { border: 2px solid var(--scrollbar-track); background: var(--scrollbar-thumb); } *::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } *::-webkit-scrollbar-corner { background: var(--scrollbar-track); } /* Единая база всех SVG-иконок: спрайт рендерится один раз в начале . */ .wm-icon { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* Блок спрайта хранит символы и не должен влиять на верстку. */ .wm-icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } html, body { height: 100%; margin: 0; } body { background: var(--bg); color: var(--text); font-family: Arial, Helvetica, sans-serif; font-size: 14px; } button, input, select { font: inherit; } button:focus, input:focus, select:focus, a:focus { outline: none; } button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(43, 110, 166, 0.18); } .app-shell[data-theme='dark'] button:focus-visible, .app-shell[data-theme='dark'] input:focus-visible, .app-shell[data-theme='dark'] select:focus-visible, .app-shell[data-theme='dark'] a:focus-visible { box-shadow: 0 0 0 2px rgba(98, 168, 221, 0.22); } .app-shell { min-height: 100%; background: var(--bg); } .app-shell[data-theme='dark'] { --bg: #151a1f; --panel: #20272e; --panel-soft: #27313a; --border: #3a4651; --text: #edf3f8; --muted: #a8b5c0; --accent: #62a8dd; --accent-soft: #20384d; --scrollbar-track: #1b2229; --scrollbar-thumb: #465666; --scrollbar-thumb-hover: #5f7487; } .topbar { display: flex; align-items: center; height: var(--topbar-height); border-bottom: 1px solid var(--border); background: var(--panel); } .topbar__brand { display: flex; align-items: center; justify-content: center; width: 64px; height: 100%; border: 0; border-right: 1px solid var(--border); background: var(--panel); color: var(--accent); cursor: pointer; font-weight: 700; } .topbar__brand:hover { background: var(--accent-soft); } .module-bar { display: flex; align-items: center; flex: 1; gap: 4px; min-width: 0; height: 100%; padding: 6px 8px; overflow-x: auto; } .module-button, .theme-toggle, .tree-tool { border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .module-button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; white-space: nowrap; } .module-button__icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; } .module-button__icon .wm-icon { width: 18px; height: 18px; } .module-button:hover, .theme-toggle:hover, .tree-tool:hover { border-color: var(--accent); background: var(--accent-soft); } .tree-tool.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .user-panel { display: flex; align-items: center; gap: 10px; height: 100%; padding: 0 12px; border-left: 1px solid var(--border); white-space: nowrap; } .profile-button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .profile-button--return { /* border-color: var(--accent); color: var(--accent); */ } .profile-button__return-mark { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; /* border: 1px solid currentColor; */ } .profile-button__return-mark .wm-icon { width: 12px; height: 12px; stroke-width: 2; } .profile-button__icon { display: none; align-items: center; justify-content: center; width: 18px; height: 18px; } .profile-button__icon .wm-icon { width: 18px; height: 18px; stroke-width: 2; } .workspace { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: calc(100vh - var(--topbar-height)); } .app-shell.is-sidebar-collapsed .workspace { grid-template-columns: 0 minmax(0, 1fr); } .object-sidebar { position: relative; display: flex; flex-direction: column; min-width: 0; border-right: 1px solid var(--border); background: var(--panel); overflow: hidden; } .app-shell.is-sidebar-collapsed .object-sidebar { border-right: 0; } .tree-toolbar { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); overflow-x: auto; } .tree-tool { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 32px; height: 30px; padding: 0; } .tree-tool .wm-icon { width: 18px; height: 18px; } .tree-tool--danger { color: var(--danger); } .tree-tool:disabled { border-color: var(--border); background: var(--panel); color: var(--muted); cursor: default; opacity: 0.45; } .tree-tool:disabled:hover { border-color: var(--border); background: var(--panel); } .tree-search { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 8px; padding: 8px; border-bottom: 1px solid var(--border); } .tree-search[hidden] { display: none; } .tree-search label { display: block; min-width: 0; } .tree-search label span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 12px; } .tree-search input, .tree-search select { width: 100%; height: 32px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; } .object-tree { flex: 1; min-height: 0; max-height: 100%; padding: 8px; overflow: auto; } .tree-statusbar { display: flex; align-items: center; justify-content: flex-end; gap: 5px; min-height: 34px; padding: 0 10px; border-top: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); white-space: nowrap; } .tree-statusbar strong { color: var(--text); } .tree-node__row { display: flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 5px; color: var(--text); cursor: pointer; white-space: nowrap; } .tree-node__row.is-selected { background: var(--accent-soft); color: var(--accent); } .tree-node__row.is-selected .status-dot { border-color: var(--accent); } .tree-node__row[data-tree-readonly='1'] { color: var(--muted); } .tree-node__row[data-tree-readonly='1'][data-node-type='folder'] { background: rgba(127, 144, 159, 0.08); } .tree-node__row[data-tree-readonly='1'].is-selected { background: var(--accent-soft); color: var(--accent); } .tree-node__toggle { display: inline-flex; align-items: center; justify-content: center; width: 16px; color: var(--muted); cursor: pointer; } .tree-node__toggle .wm-icon { width: 14px; height: 14px; stroke-width: 2; } .tree-node__folder { font-weight: 700; } .tree-node__folder-icon { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; color: var(--folder-color, #d8a92f); } .tree-node__folder-icon .wm-icon { width: 17px; height: 17px; fill: currentColor; fill-opacity: 0.22; } .tree-node__folder-icon.is-open .wm-icon { fill-opacity: 0.4; } /* Папка с дочерними элементами выделяется плотной заливкой фоном. Для иконок проектов заливка не применяется. */ .tree-node__folder-icon.has-children:not(.tree-node__project-icon) .wm-icon { fill-opacity: 1; } .tree-node__folder-icon.has-children:not(.tree-node__project-icon) .wm-icon path { stroke: var(--panel); } .devices-workspace { display: flex; flex: 1; flex-direction: column; min-height: 0; } /* Колонки параметров контроллера центрируются (индикатор — колонка 1). */ .devices-workspace .project-users__table th:nth-child(5), .devices-workspace .project-users__table td:nth-child(5), .devices-workspace .project-users__table th:nth-child(6), .devices-workspace .project-users__table td:nth-child(6), .devices-workspace .project-users__table th:nth-child(7), .devices-workspace .project-users__table td:nth-child(7) { text-align: center; } /* Индикатор состояния контроллера связи (зеленый/желтый/красный). */ .device-status-indicator { display: inline-block; width: 10px; height: 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; } .device-status-indicator--online { background: var(--success); } .device-status-indicator--busy { background: var(--warning); } .device-status-indicator--offline { background: var(--danger); } .devices-workspace__status-col { width: 26px; } .devices-workspace__number-filter { flex-basis: 180px; } .devices-sort-button { display: inline-flex; align-items: center; gap: 4px; width: 100%; min-height: 28px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 700; text-align: left; cursor: pointer; } .devices-sort-button:hover, .devices-sort-button:focus, .devices-sort-button.is-active { color: var(--accent); outline: none; } .devices-sort-button [data-devices-sort-marker] { display: inline-block; min-width: 10px; color: var(--accent); font-size: 10px; line-height: 1; } .devices-workspace__status-col .devices-sort-button { justify-content: center; } .devices-workspace .project-users__table th:nth-child(5) .devices-sort-button, .devices-workspace .project-users__table th:nth-child(6) .devices-sort-button { justify-content: center; text-align: center; } /* Сервисная вкладка управления конкретным контроллером связи. */ .device-manage { display: flex; flex: 1; flex-direction: column; min-height: 0; border: 1px solid var(--border); background: var(--panel); } .device-manage__header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; padding: 6px 14px; border-bottom: 1px solid var(--border); background: var(--panel-soft); } .device-manage__header--online { background: rgba(102, 184, 50, 0.16); } .device-manage__header--busy { background: rgba(214, 161, 46, 0.18); } .device-manage__header--offline { background: rgba(214, 75, 58, 0.14); } .device-manage__headline { display: flex; align-items: center; flex-wrap: wrap; flex: 0 1 auto; min-width: 0; gap: 10px; } .device-manage__title-block { min-width: 0; } .device-manage__title { margin: 0; color: var(--text); font-size: 18px; font-weight: 700; } .device-manage__subtitle { margin: 0; color: var(--muted); font-size: 13px; font-weight: 700; } .device-manage__signal-bars { display: inline-flex; flex: 0 0 auto; align-items: flex-end; gap: 2px; height: 16px; } .device-manage__signal-bars i { display: block; width: 4px; border: 1px solid var(--border); background: var(--border); } .device-manage__signal-bars i:nth-child(1) { height: 5px; } .device-manage__signal-bars i:nth-child(2) { height: 8px; } .device-manage__signal-bars i:nth-child(3) { height: 11px; } .device-manage__signal-bars i:nth-child(4) { height: 14px; } .device-manage__signal-bars i:nth-child(5) { height: 16px; } .device-manage__signal-bars i.is-active { border-color: var(--success); background: var(--success); } .device-manage__progress { display: grid; grid-template-columns: minmax(0, 1fr) 30px; gap: 4px; flex: 0 1 450px; max-width: 450px; min-width: 260px; margin-left: auto; height: 30px; } .device-manage__progress[hidden] { display: none; } .device-manage__message { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 0 1 450px; max-width: 450px; min-width: 260px; margin-left: auto; height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; line-height: 1.2; text-align: center; overflow: hidden; position: relative; } .device-manage__message[hidden] { display: none; } .device-manage__message-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .device-manage__message-close { position: absolute; right: 4px; top: 50%; width: 22px; height: 22px; padding: 0; border: 0; border-radius: 3px; background: transparent; color: inherit; font-size: 18px; line-height: 20px; transform: translateY(-50%); cursor: pointer; } .device-manage__message-close:hover { background: rgba(255, 255, 255, 0.12); } .device-manage__message--success { border-color: rgba(102, 184, 50, 0.55); background: rgba(102, 184, 50, 0.22); color: var(--text); } .device-manage__message--error { border-color: rgba(214, 75, 58, 0.6); background: rgba(214, 75, 58, 0.22); color: var(--text); } .device-manage__message--warning { border-color: rgba(214, 161, 46, 0.65); background: rgba(214, 161, 46, 0.24); color: var(--text); } .device-manage__param-title { display: grid; gap: 2px; } .device-manage__read-at { color: var(--muted); font-size: 11px; line-height: 1.2; } .device-manage__progress-text { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; height: 100%; padding: 0 8px 0 12px; color: var(--text); font-size: 14px; line-height: 30px; pointer-events: none; } .device-manage__progress-text span { display: block; min-width: 0; flex: 1 1 auto; overflow: hidden; color: var(--text); padding-left: 8px; line-height: 30px; text-overflow: ellipsis; white-space: nowrap; } .device-manage__progress-spinner { display: inline-block; flex: 0 0 auto; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: system-spinner-rotate 720ms linear infinite; } .device-manage__progress-text b { display: block; flex: 0 0 auto; margin-left: auto; color: var(--accent); font-weight: 700; line-height: 30px; white-space: nowrap; } .device-manage__progress-controls { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 4px; } .device-manage__progress-controls strong { display: none; } .device-manage__progress-stop { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--accent); cursor: pointer; padding: 0; font-weight: 700; line-height: 1; } .device-manage__progress-stop:hover { border-color: var(--accent); background: var(--accent-soft); } .device-manage__progress-track { position: relative; display: block; min-width: 0; height: 30px; overflow: hidden; border: 1px solid var(--border); background: var(--panel); } .device-manage__progress-track > span { position: absolute; inset: 0 auto 0 0; display: block; height: 100%; background: var(--accent-soft); } .device-manage__toolbar { margin: 10px 10px 0; } .device-manage__toolbar .project-users__tool.is-active { border-color: var(--accent); background: rgba(47, 111, 191, 0.12); color: var(--accent); } .device-manage__toolbar .project-users__tool:disabled { opacity: 0.5; cursor: default; } .device-manage__read-all { margin-left: auto; } .device-manage__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; padding: 10px; border-top: 1px solid var(--border); background: var(--panel); z-index: 1; } .device-manage__actions .modal-button { display: inline-flex; align-items: center; gap: 6px; } .device-manage__actions .modal-button:disabled, .device-manage__actions .modal-button.is-disabled { border-color: var(--border); background: var(--panel-soft); color: var(--muted); cursor: default; opacity: 0.45; } .device-manage__actions .modal-button:disabled:hover, .device-manage__actions .modal-button.is-disabled:hover { border-color: var(--border); background: var(--panel-soft); color: var(--muted); } .device-manage__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: auto; padding: 0 10px 10px; position: relative; } .device-manage__module-title { flex: 0 0 auto; height: 8px; margin: 0; overflow: hidden; color: var(--text); font-size: 0; font-weight: 700; } .device-manage__table-wrap { flex: 0 0 auto; width: min(100%, 980px); min-height: 0; overflow-x: auto; border: 1px solid var(--border); } .device-manage__table { width: 100%; min-width: 760px; table-layout: fixed; } .device-manage__table-wrap--servers { width: min(100%, 980px); } .device-manage__servers-table { width: 100%; min-width: 760px; table-layout: fixed; } .device-manage__servers-table th:nth-child(1), .device-manage__servers-table td:nth-child(1) { width: 42%; } .device-manage__servers-table th:nth-child(2), .device-manage__servers-table td:nth-child(2) { width: 32%; } .device-manage__servers-table th:nth-child(3), .device-manage__servers-table td:nth-child(3) { width: 230px; } .device-manage__table th:nth-child(1), .device-manage__table td:nth-child(1) { width: 42%; } .device-manage__table th:nth-child(2), .device-manage__table td:nth-child(2) { width: 32%; } .device-manage__table th:nth-child(3), .device-manage__table td:nth-child(3) { width: 230px; } .device-manage__table--readonly th:nth-child(1), .device-manage__table--readonly td:nth-child(1) { width: 42%; } .device-manage__table--readonly th:nth-child(2), .device-manage__table--readonly td:nth-child(2) { width: 58%; } .device-manage__table input, .device-manage__table select { display: block; width: 100%; height: 30px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; } .device-manage__table input[type='number'] { -moz-appearance: textfield; } .device-manage__table input[type='number']::-webkit-outer-spin-button, .device-manage__table input[type='number']::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .device-manage__number { display: grid; grid-template-columns: minmax(0, 1fr) 28px; grid-template-rows: 15px 15px; width: 100%; } .device-manage__number input { grid-row: 1 / 3; min-width: 0; border-right: 0; } .device-manage__number-step { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 15px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; padding: 0; } .device-manage__number-step:hover { border-color: var(--accent); color: var(--accent); } .device-manage__number-step .wm-icon { width: 13px; height: 13px; stroke-width: 2; } .device-manage__number-step--up .wm-icon { transform: rotate(180deg); } .device-manage__field.is-changed td { background: rgba(216, 169, 47, 0.12); } .device-manage__readonly-value { color: var(--muted); } .device-manage__journal { width: min(100%, 760px); } .device-manage__journal-date { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; } .device-manage__journal-date span { color: var(--text); font-weight: 700; } .device-manage__journal-date-controls { display: inline-flex; align-items: center; gap: 6px; } .device-manage__journal-clear { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .device-manage__journal-clear:hover, .device-manage__journal-clear:focus { border-color: var(--accent); color: var(--accent); outline: none; } .device-manage__journal-clear .wm-icon { width: 14px; height: 14px; } .device-manage__journal-date input { width: 246px; height: 30px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); padding: 0 8px; } .device-manage__journal-date input:focus { border-color: var(--accent); outline: none; } .app-shell[data-theme='dark'] .device-manage__journal-date input::-webkit-calendar-picker-indicator { filter: invert(1); } .device-manage__journal-memo { display: block; width: 100%; min-height: 290px; resize: vertical; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font: 16px/1.35 Consolas, 'Courier New', monospace; padding: 10px; } .device-manage__journal-memo:focus { border-color: var(--accent); outline: none; } .device-manage__notice { display: grid; grid-template-columns: minmax(220px, 0.35fr) minmax(0, 1fr); align-items: center; gap: 24px; width: min(100%, 980px); min-height: 38px; margin-bottom: 12px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-size: 14px; padding: 8px 12px; } .device-manage__notice h3 { margin: 0; color: var(--text); font-size: 16px; line-height: 1.2; } .device-manage__notice p { margin: 0; color: var(--muted); line-height: 1.4; } /* Рабочая область списка серверов. */ .servers-workspace { display: flex; flex: 1; flex-direction: column; min-height: 0; } /* Колонки "Порт" и "Состояние" центрируются. */ .servers-workspace .project-users__table th:nth-child(2), .servers-workspace .project-users__table td:nth-child(2), .servers-workspace .project-users__table th:nth-child(3), .servers-workspace .project-users__table td:nth-child(3) { text-align: center; } .tree-node__readonly-mark { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; margin-left: 2px; color: var(--muted); } .tree-node__readonly-mark .wm-icon { width: 13px; height: 13px; stroke-width: 2; } .tree-node__project-icon { color: var(--accent); } .tree-node__project-icon .wm-icon { fill-opacity: 0.14; } .tree-node__project-icon.is-open .wm-icon { fill-opacity: 0.28; } .tree-node__children { padding-left: 22px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height 180ms ease, opacity 140ms ease; } .tree-node--folder.is-open > .tree-node__children { opacity: 1; } .tree-empty { color: var(--muted); padding: 8px 5px; } .status-dot { width: 12px; height: 12px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; } .status-dot--green { background: var(--success); } .status-dot--red { background: var(--danger); } .content { display: flex; flex-direction: column; width: 100%; min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); } .tabs-shell { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; min-width: 0; min-height: 40px; border-bottom: 1px solid var(--border); background: var(--panel-soft); } .tabs { display: flex; min-width: 0; min-height: 40px; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; } .tabs::-webkit-scrollbar { display: none; } .tabs-scroll-button { display: inline-flex; align-items: center; justify-content: center; width: 34px; min-height: 40px; border: 0; border-right: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .tabs-scroll-button:last-child { border-right: 0; border-left: 1px solid var(--border); } .tabs-scroll-button:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); } .tabs-scroll-button:disabled { color: var(--muted); cursor: default; opacity: 0.45; } .tabs-scroll-button .wm-icon { width: 18px; height: 18px; stroke-width: 2; } .tab { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; max-width: 240px; height: 40px; border: 0; border-right: 1px solid var(--border); background: transparent; color: var(--text); cursor: pointer; padding: 0 12px; white-space: nowrap; } .tab span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tab.is-active { background: var(--panel); color: var(--accent); } .tab__close { display: inline-flex; align-items: center; flex: 0 0 auto; color: var(--muted); } .tab__close .wm-icon { width: 14px; height: 14px; stroke-width: 2; } .tab--fixed { justify-content: center; min-width: 110px; } .tab-content { display: flex; flex-direction: column; flex: 1; width: 100%; min-width: 0; min-height: 0; padding: 16px; overflow: hidden; } .content-statusbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 10px; border-top: 1px solid var(--border); background: var(--panel-soft); color: var(--muted); white-space: nowrap; } .content-statusbar__version { margin-left: auto; color: var(--text); } .project-home { flex: 1; min-height: 0; overflow: auto; } .project-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .project-panel { display: flex; flex-direction: column; align-items: flex-start; min-height: 86px; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; padding: 12px; text-align: left; } .project-panel:hover { border-color: var(--accent); background: var(--accent-soft); } .project-panel__title { margin-bottom: 7px; color: var(--text); font-weight: 700; } .project-panel__description { color: var(--muted); font-size: 13px; line-height: 1.35; } .object-workspace { flex: 1; width: 100%; min-width: 0; min-height: 0; border: 1px solid var(--border); background: var(--panel); padding: 16px; overflow: auto; } .object-workspace__title { margin: 0 0 8px; color: var(--text); font-size: 20px; font-weight: 700; } .object-workspace__note { margin: 0; color: var(--muted); } .project-users { display: flex; flex: 1; flex-direction: column; min-height: 0; } .project-users__toolbar { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-bottom: 10px; overflow-x: auto; } .project-users__table-wrap { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); } .project-users__table-wrap .project-users__table { border: 0; } .project-users__tool { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; height: 32px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; padding: 0 10px; } .project-users__tool-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } .project-users__tool-icon .wm-icon { width: 16px; height: 16px; stroke-width: 2; } .project-users__tool-text { white-space: nowrap; } .project-users__tool:hover { border-color: var(--accent); background: var(--accent-soft); } .project-users__tool[data-project-users-action='delete'] { color: var(--danger); } .project-users__tool.is-deactivate-action { color: var(--danger); } .project-users__tool.is-activate-action { color: var(--accent); } .project-users__tool[data-project-users-action='enter'] { color: var(--accent); } .project-users__filter { flex: 0 0 190px; height: 32px; margin-left: 8px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); padding: 0 8px; } .project-users__tool:disabled { color: var(--muted); cursor: default; opacity: 0.55; } .project-users__tool:disabled:hover { border-color: var(--border); background: var(--panel-soft); } .project-users__status { margin-left: auto; color: var(--muted); white-space: nowrap; } .project-users__table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); background: var(--panel); } .project-users__table th, .project-users__table td { height: 34px; border-bottom: 1px solid var(--border); color: var(--text); padding: 0 9px; text-align: left; white-space: nowrap; } .project-users__table th { position: sticky; top: 0; z-index: 1; background: var(--panel-soft); color: var(--muted); font-weight: 700; } .project-users__table tbody tr { cursor: pointer; } .project-users__table tbody tr:hover td, .project-users__table tbody tr.is-selected td { background: var(--accent-soft); color: var(--accent); } .project-users__table tbody tr.is-disabled-user td:last-child { color: var(--danger); font-weight: 700; } .project-users__empty { color: var(--muted); text-align: center; } .project-users__objects-link { min-width: 28px; height: 24px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--accent); cursor: pointer; padding: 0 6px; } /* Колонка "Объекты" центрируется, включая прочерк руководителя проекта. */ .project-users__table th:last-child, .project-users__table td:last-child { text-align: center; } .project-users__objects-link:hover { border-color: var(--accent); background: var(--accent-soft); } .project-access__toolbar { display: flex; align-items: center; flex: 0 0 auto; gap: 10px; margin-bottom: 12px; } .project-access__filter { width: 190px; height: 34px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; } .project-access__search { flex: 1 1 260px; min-width: 180px; height: 34px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 9px; } .project-access__status { margin-left: auto; color: var(--muted); white-space: nowrap; } .project-access__table-wrap { flex: 1 1 auto; min-height: 0; overflow: auto; border: 1px solid var(--border); } .project-access__table { width: 100%; border-collapse: collapse; background: var(--panel); } .project-access__table th, .project-access__table td { height: 34px; border-bottom: 1px solid var(--border); color: var(--text); padding: 0 9px; text-align: left; } .project-access__table th { position: sticky; top: 0; z-index: 1; background: var(--panel-soft); color: var(--muted); font-weight: 700; } .project-access__table th:first-child, .project-access__table td:first-child { width: 72px; text-align: center; } .project-access__table tr.has-access td { background: rgba(67, 160, 71, 0.14); } .project-access__table tr.has-access:hover td { background: rgba(67, 160, 71, 0.22); } .project-access__empty { color: var(--muted); margin: 12px 0 0; text-align: center; } .project-access__actions { flex: 0 0 auto; margin-top: 12px; } .pribor-workspace { display: flex; flex: 1; flex-direction: column; min-height: 0; } .pribor-workspace .project-users__toolbar:first-of-type { margin-bottom: 6px; } .pribor-group-row { cursor: pointer; } .pribor-group-row__title { background: var(--panel-soft); color: var(--muted); font-weight: 700; } .pribor-group-row:hover .pribor-group-row__title, .pribor-group-row.is-selected .pribor-group-row__title { background: var(--accent-soft); color: var(--accent); } .modal__window--access { width: min(96vw, 940px); height: min(82vh, 720px); max-height: calc(100vh - 40px); display: flex; flex-direction: column; overflow: hidden; } .modal__window--access .modal__body { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; } .project-user-form label { display: block; margin-bottom: 10px; } .project-user-form label[hidden] { display: none; } .project-user-form label span { display: block; margin-bottom: 5px; color: var(--muted); } .project-user-form input, .project-user-form select { width: 100%; height: 34px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; } .project-user-form__password { display: flex; gap: 6px; } .project-user-form__password input { flex: 1 1 auto; min-width: 0; } .project-user-form__password button { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; padding: 0; font-size: 18px; } .project-user-form__password button:hover { border-color: var(--accent); background: var(--accent-soft); } .project-user-form__hint { display: block; min-height: 16px; margin-top: 4px; color: var(--muted); font-size: 12px; } .project-user-form__hint[data-state='success'] { color: var(--success); } .project-user-form__hint[data-state='error'] { color: var(--danger); } .project-user-form__error { margin: 0 0 10px; border: 1px solid var(--danger); color: var(--danger); padding: 8px; } .project-user-form__error[hidden] { display: none; } .server-status { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } .server-status__dot { width: 10px; height: 10px; border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; } .server-status__dot--online { background: var(--success); } .server-status__dot--offline { background: var(--danger); } .server-status__dot--connecting { background: var(--accent); } .server-status__text { color: var(--text); } .server-status__spinner { width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: system-spinner-rotate 720ms linear infinite; } .server-status.is-connected .server-status__spinner { display: none; } .server-status.is-offline .server-status__spinner { display: none; } .server-status { cursor: pointer; user-select: none; } .server-status:focus { outline: none; } .server-status:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; } /* Панель лога WebSocket — открывается над статусной строкой. */ .ws-log { display: flex; flex: 0 0 auto; flex-direction: column; height: 220px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--panel); } .ws-log[hidden] { display: none; } .ws-log__header { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-bottom: 1px solid var(--border); background: var(--panel-soft); } .ws-log__settings { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; } .ws-log__actions { display: inline-flex; gap: 4px; } .ws-log__tool { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--border); background: var(--panel); color: var(--text); cursor: pointer; } .ws-log__tool:hover { border-color: var(--accent); color: var(--accent); } .ws-log__tool.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .ws-log__select, .ws-log__filter, .ws-log__limit { height: 26px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); font-size: 12px; padding: 0 6px; } .ws-log__select:focus, .ws-log__filter:focus, .ws-log__limit:focus { border-color: var(--accent); outline: none; } .ws-log__select { cursor: pointer; } .ws-log__filter-wrap { position: relative; display: inline-flex; align-items: center; } .ws-log__filter { width: 112px; padding-right: 24px; } .ws-log__filter-clear { position: absolute; right: 2px; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; padding: 0; border: 0; background: transparent; color: var(--muted); cursor: pointer; } .ws-log__filter-clear:hover { color: var(--accent); } .ws-log__filter-clear[hidden] { display: none; } .ws-log__filter-clear .wm-icon { width: 14px; height: 14px; } .ws-log__limit { grid-row: 1 / 3; width: 58px; min-width: 0; border-right: 0; -moz-appearance: textfield; } .ws-log__limit::-webkit-outer-spin-button, .ws-log__limit::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; } .ws-log__limit-wrap { display: grid; grid-template-columns: 58px 24px; grid-template-rows: 13px 13px; } .ws-log__limit-step { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 13px; padding: 0; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .ws-log__limit-step:hover, .ws-log__limit-step:focus { border-color: var(--accent); color: var(--accent); outline: none; } .ws-log__limit-step .wm-icon { width: 12px; height: 12px; stroke-width: 2; } .ws-log__limit-step--up .wm-icon { transform: rotate(180deg); } .ws-log__tool .wm-icon { width: 14px; height: 14px; } .ws-log__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px 10px; font-family: 'Consolas', 'Menlo', 'Courier New', monospace; font-size: 12px; line-height: 1.5; background: var(--panel); color: var(--text); white-space: pre-wrap; word-break: break-all; } .ws-log__line--in { color: var(--success); } .ws-log__line--out { color: var(--accent); } .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; background: var(--bg); } .login-form { width: min(100%, 360px); border: 1px solid var(--border); background: var(--panel); padding: 22px; } .login-form__brand { display: flex; align-items: center; justify-content: center; width: 54px; height: 38px; margin-bottom: 16px; border: 1px solid var(--border); color: var(--accent); font-weight: 700; } .login-form h1 { margin: 0 0 18px; color: var(--text); font-size: 22px; } .login-form label { display: block; margin-bottom: 12px; } .login-form label > span { display: block; margin-bottom: 5px; color: var(--muted); } .login-form input { width: 100%; height: 36px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 9px; } .login-form__password { position: relative; display: block; margin-bottom: 0; } .login-form__password input { padding-right: 42px; } .login-form__password [hidden] { display: none !important; } .login-form .login-form__password-toggle { position: absolute; right: 1px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--muted); padding: 0; cursor: pointer; } .login-form .login-form__password-toggle:hover, .login-form .login-form__password-toggle:focus { color: var(--accent); outline: none; } .login-form__password-toggle .wm-icon { width: 18px; height: 18px; } .login-form button { width: 100%; height: 38px; border: 1px solid var(--accent); background: var(--accent); color: #ffffff; cursor: pointer; } .login-form__version { margin-top: 10px; color: var(--muted); font-size: 12px; text-align: center; } .login-form__error { margin-bottom: 12px; border: 1px solid var(--danger); color: var(--danger); padding: 8px; } .modal[hidden] { display: none; } .modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 20px; } .modal__overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.38); } .modal__window { position: relative; width: min(100%, 520px); max-height: calc(100vh - 40px); border: 1px solid var(--border); background: var(--panel); overflow: auto; } .loading-overlay { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(244, 247, 250, 0.64); } .app-shell[data-theme='dark'] .loading-overlay { background: rgba(21, 26, 31, 0.64); } .loading-overlay[hidden] { display: none; } .system-spinner { width: 30px; height: 30px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: system-spinner-rotate 720ms linear infinite; } @keyframes system-spinner-rotate { to { transform: rotate(360deg); } } .modal__window--small { width: min(100%, 380px); } .modal__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--border); } .modal__header h2 { margin: 0; color: var(--text); font-size: 18px; } .modal__close { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; } .modal__close .wm-icon { width: 16px; height: 16px; stroke-width: 2; } .modal__body { padding: 14px; } .modal__text { margin: 0 0 14px; color: var(--text); } .profile-section + .profile-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .profile-section h3 { margin: 0 0 10px; color: var(--text); font-size: 16px; } .profile-section__note { margin: 0; color: var(--muted); } .theme-choice { display: flex; gap: 8px; } .theme-choice__button { height: 34px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; padding: 0 12px; } .theme-choice__button.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); } .password-form label { display: block; margin-bottom: 10px; } .password-form label span { display: block; margin-bottom: 5px; color: var(--muted); } .password-form input { width: 100%; height: 34px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 8px; } .password-form button { height: 36px; border: 1px solid var(--accent); background: var(--accent); color: #ffffff; cursor: pointer; padding: 0 12px; } .password-form button:disabled { cursor: default; opacity: 0.65; } .password-form__message { margin: 0 0 10px; font-size: 13px; } .password-form__message.is-success { color: var(--success); } .password-form__message.is-error { color: var(--danger); } .tree-item-form label { display: block; margin-bottom: 14px; } .tree-item-form label span { display: block; margin-bottom: 5px; color: var(--muted); } .tree-item-form input { width: 100%; height: 36px; border: 1px solid var(--border); background: var(--panel); color: var(--text); padding: 0 9px; } .tree-color-field { margin-bottom: 14px; } .tree-color-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 24px; margin-bottom: 12px; } .tree-color-field__title { display: block; color: var(--muted); line-height: 24px; } .tree-item-form .tree-color-switch { display: flex; align-items: center; justify-content: center; flex: 0 0 42px; height: 24px; margin: 0; color: var(--text); } .tree-item-form .tree-color-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .tree-item-form .tree-color-switch__slider { display: inline-block; flex: 0 0 auto; position: relative; width: 42px; height: 22px; border: 1px solid var(--border); background: var(--panel-soft); cursor: pointer; } .tree-item-form .tree-color-switch__slider::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; background: var(--muted); transition: transform 160ms ease, background 160ms ease; } .tree-item-form .tree-color-switch input:checked + .tree-color-switch__slider { border-color: var(--accent); background: var(--accent-soft); } .tree-item-form .tree-color-switch input:checked + .tree-color-switch__slider::after { background: var(--accent); transform: translateX(20px); } .tree-color-palette { display: grid; grid-template-columns: repeat(15, 1fr); gap: 5px; width: 100%; transition: opacity 160ms ease; } .tree-color-palette.is-disabled { opacity: 0.42; } .tree-color-swatch { width: 100%; height: 20px; border: 1px solid var(--border); background: var(--swatch-color); cursor: pointer; padding: 0; } .tree-color-swatch.is-selected { outline: 2px solid var(--accent); outline-offset: 1px; } .tree-color-palette.is-disabled .tree-color-swatch { cursor: default; } .tree-color-field[hidden] { display: none; } .modal__actions { display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 8px; } .modal-button { flex: 0 1 auto; min-width: 0; height: 34px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); cursor: pointer; padding: 0 12px; } .modal-button--icon { display: inline-flex; flex: 0 0 34px; align-items: center; justify-content: center; width: 34px; padding: 0; } .modal-button--icon .wm-icon { width: 18px; height: 18px; stroke-width: 2; } .modal-button--primary { border-color: var(--accent); background: var(--accent); color: #ffffff; } .modal-button--danger { border-color: var(--danger); background: var(--danger); color: #ffffff; } .modal__actions .modal-button--danger { margin-right: 0; } .modal__actions [data-action='tree-item-close'] { margin-left: auto; } .devices-write-confirm__wrap { max-height: 320px; margin-bottom: 14px; overflow: auto; border: 1px solid var(--border); } .devices-write-confirm__table { border: 0; } .devices-write-confirm__table th:nth-child(2), .devices-write-confirm__table td:nth-child(2), .devices-write-confirm__table th:nth-child(3), .devices-write-confirm__table td:nth-child(3) { width: 28%; } .move-search { width: 100%; height: 34px; margin-bottom: 8px; border: 1px solid var(--border); background: var(--panel-soft); color: var(--text); padding: 0 10px; } .move-targets { max-height: 280px; margin-bottom: 14px; border: 1px solid var(--border); overflow: auto; } .move-target-row { display: flex; align-items: center; width: 100%; min-height: 30px; border-bottom: 1px solid var(--border); background: var(--panel); } .move-target-row:last-child { border-bottom: 0; } .move-target-toggle { flex: 0 0 22px; width: 22px; height: 30px; border: 0; background: transparent; color: var(--muted); cursor: pointer; padding: 0; } .move-target-toggle:disabled { cursor: default; } .move-target { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: 30px; border: 0; background: transparent; color: var(--text); cursor: pointer; padding: 0 9px; text-align: left; } .move-target--with-path { flex-direction: column; align-items: flex-start; justify-content: center; min-height: 44px; gap: 2px; padding-top: 5px; padding-bottom: 5px; } .move-target__title, .move-target__path { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .move-target__path { color: var(--muted); font-size: 12px; } .move-target:hover, .move-target.is-selected { background: var(--accent-soft); color: var(--accent); } .move-target:disabled { background: var(--panel); color: var(--muted); cursor: default; opacity: 0.55; } .move-target-notice { min-height: 30px; color: var(--muted); padding: 7px 9px; } .profile-logout { display: inline-flex; align-items: center; height: 34px; border: 1px solid var(--danger); color: var(--danger); text-decoration: none; padding: 0 12px; } .profile-logout:hover { background: rgba(214, 75, 58, 0.12); } @media (max-width: 900px) { .workspace { grid-template-columns: 1fr; height: calc(100vh - var(--topbar-height)); } .app-shell.is-sidebar-collapsed .workspace { grid-template-columns: 1fr; } .app-shell.is-sidebar-collapsed .object-sidebar { display: none; } .content { grid-column: 1; } .app-shell.is-sidebar-collapsed .content { grid-column: 1; min-height: calc(100vh - var(--topbar-height)); } .object-sidebar { max-height: 45vh; border-right: 0; border-bottom: 1px solid var(--border); } .profile-button { position: relative; justify-content: center; width: 34px; padding: 0; } .profile-button__icon { display: inline-flex; } .profile-button__name { display: none; } .profile-button__return-mark { position: absolute; right: -4px; top: -4px; width: 14px; height: 14px; background: var(--panel); font-size: 10px; } .user-panel__name, .module-button__text, .project-users__tool-text, .project-users__status { display: none; } .device-manage__notice { grid-template-columns: 1fr; gap: 6px; } .project-users__tool { justify-content: center; padding: 0 8px; } .project-users__filter { flex: 0 0 120px; } .devices-workspace__number-filter { display: none; } .device-manage__header { align-items: flex-start; flex-direction: column; gap: 7px; min-height: 0; padding: 8px 14px; } .device-manage__progress { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; } .device-manage__progress[hidden] { display: none; } .device-manage__message { flex: 0 0 auto; width: 100%; max-width: none; min-width: 0; margin-left: 0; } .device-manage__progress-text { font-size: 11px; } .device-manage__actions .modal-button { justify-content: flex-start; width: auto; padding: 0 8px; } .device-manage__journal-date { align-items: flex-start; flex-direction: column; gap: 6px; } .device-manage__journal-date input { width: 100%; } }