/* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/variables.css?17807586303534*/ /* variables.css — CSS Custom Properties (Design Tokens) */ /* === Тёмная тема (по умолчанию) === */ /* Важно: НЕ ставим bare-селектор .aero-app в это правило — иначе переменные тёмной темы жёстко привязываются к самому элементу .aero-app и перекрывают каскад от . Тема всегда наследуется от . */ :root, [data-theme="dark"], .aero-app[data-theme="dark"] { --color-canvas: #12131A; --color-panel: #15161F; --color-card: #1A1B26; --color-hover: #252636; --color-border: #2A2B3A; --color-border-light: #1E1F2E; --color-accent: #4F9AFF; --color-accent-bg: #1D2B4A; --color-airflow: #3DD68C; --color-airflow-bg: #0F1A14; --color-fan: #F0A500; --color-fan-bg: #1A1305; --color-fire: #E85454; --color-fire-bg: #1A0A0A; --color-text-primary: #E8E9F5; --color-text-secondary: #A0A0C0; --color-text-muted: #6A6B8A; --color-grid: #1E1F2E; --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); /* Canvas JS colors (read by uiTheme.js) */ --canvas-bg: #12131A; --canvas-grid: rgba(30,31,46,0.8); --canvas-selection: rgba(79,154,255,0.15); --canvas-selection-border: #4F9AFF; --canvas-text-fill: #E8E9F5; --canvas-text-bg: rgba(18,19,26,0.85); --image-shadow-color: rgba(255,255,255,0.45); } /* === Светлая тема === */ [data-theme="light"], .aero-app[data-theme="light"] { --color-canvas: #F0F1F5; --color-panel: #FFFFFF; --color-header: #E6E7ED; --color-context-bar: #EFF0F4; --color-card: #F7F8FA; --color-hover: #E8EAF0; --color-border: #C4C6D2; --color-border-light: #D4D6E0; --color-context-sep: #A8ABB8; --color-accent: #2B6FE8; --color-accent-bg: #E8F0FE; --color-airflow: #1A9F5C; --color-airflow-bg: #E6F7EF; --color-fan: #C88500; --color-fan-bg: #FFF7E0; --color-fire: #D03030; --color-fire-bg: #FDE8E8; --color-text-primary: #1A1C24; --color-text-secondary: #4A4D5E; --color-text-muted: #8A8DA0; --color-grid: #E2E4EC; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1); --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12); --canvas-bg: #FFFFFF; --canvas-grid: rgba(210,214,226,0.6); --canvas-selection: rgba(43,111,232,0.15); --canvas-selection-border: #2B6FE8; --canvas-text-fill: #1A1C24; --canvas-text-bg: rgba(255,255,255,0.6); --image-shadow-color: rgba(0,0,0,0.15); } /* === Общие токены (не зависят от темы) === */ :root, .aero-app { --font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-size-xs: 9px; --font-size-sm: 10px; --font-size-base: 11px; --font-size-md: 13px; --font-size-lg: 14px; --radius-sm: 4px; --radius-md: 5px; --radius-lg: 6px; --radius-xl: 8px; --header-height: 40px; --toolbar-width: 52px; --context-bar-height: 38px; --properties-width: 48px; /* только рейл с иконками */ --properties-drawer-width: 340px; /* ширина выдвижной панели */ --statusbar-height: 24px; --btn-height-sm: 26px; --btn-height-md: 32px; --icon-size: 18px; --icon-container: 36px; --transition-fast: 120ms ease; --transition-base: 150ms ease; --transition-slow: 200ms ease-out; --transition-modal: 180ms ease-out; } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/reset.css?17800232801194*/ /* reset.css — Минимальный CSS Reset */ .aero-app, .aero-app *, .aero-app *::before, .aero-app *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body.aero-standalone { height: 100%; margin: 0; padding: 0; } body.aero-standalone { overflow: hidden; } .aero-app { width: 100%; height: 100vh; overflow: hidden; font-family: var(--font-family); font-size: var(--font-size-base); color: var(--color-text-primary); background: var(--color-canvas); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .aero-app button { font-family: inherit; font-size: inherit; color: inherit; cursor: pointer; border: none; background: none; line-height: 1; } .aero-app input, .aero-app select, .aero-app textarea { font-family: inherit; font-size: inherit; color: inherit; background: none; border: none; outline: none; } .aero-app a { color: inherit; text-decoration: none; } .aero-app ul, .aero-app ol { list-style: none; } .aero-app img, .aero-app svg { display: block; max-width: 100%; } .aero-app :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/layout.css?178075977013540*/ /* layout.css — CSS Grid раскладка приложения (5 зон) */ .app-shell { display: grid; grid-template-columns: 1fr var(--toolbar-width); /* Хедер может растягиваться вниз, когда контекстная панель переносит кнопки на вторую строку (минимум — --header-height). */ grid-template-rows: minmax(var(--header-height), auto) 1fr var(--statusbar-height); grid-template-areas: "header header" "canvas properties" "statusbar statusbar"; height: 100%; width: 100%; overflow: hidden; } /* === Полноэкранный режим === Класс вешается на КОРЕНЬ #aeroApp (.aero-app), а не на .app-shell — чтобы модалки, контекстное меню и уведомления (сиблинги .app-shell внутри #aeroApp) остались в одном стекинг-контексте и рисовались над холстом. */ .aero-app--fullscreen { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 99999; background: var(--color-canvas); } /* В обычном состоянии видна только кнопка "развернуть", в fullscreen — только "свернуть" */ .app-header__fullscreen-exit { display: none; } .aero-app--fullscreen .app-header__fullscreen-enter { display: none; } .aero-app--fullscreen .app-header__fullscreen-exit { display: inline-flex; } /* Блокируем скролл документа, пока приложение развёрнуто на весь экран */ body.aero-fullscreen { overflow: hidden; } /* === Хедер === */ .app-header { grid-area: header; display: grid; /* Средняя колонка ограничена сверху max-content, снизу 0 — это позволяет ей сжиматься при недостатке места и заставлять .app-context-bar переносить кнопки на вторую строку (см. flex-wrap ниже), вместо того чтобы наезжать на правый блок со статусом. */ grid-template-columns: minmax(60px, 1fr) minmax(0, max-content) minmax(220px, 1fr); /* Высота строки растёт под содержимое, минимум — --header-height (40px). */ grid-template-rows: auto; min-height: var(--header-height); align-items: center; padding: 0 12px; background: var(--color-header, var(--color-panel)); border-bottom: 1px solid var(--color-border-light); z-index: 100; column-gap: 8px; overflow: visible; } .app-header__logo { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text-primary); white-space: nowrap; flex-shrink: 0; grid-column: 1; grid-row: 1; justify-self: start; } .app-header__logo span { color: var(--color-accent); } .app-header__menu { display: none; gap: 2px; flex: 1; justify-content: center; } .app-header__menu-item { padding: 6px 12px; font-size: var(--font-size-base); color: var(--color-text-secondary); border-radius: var(--radius-md); transition: background var(--transition-fast), color var(--transition-fast); } .app-header__menu-item:hover { background: var(--color-hover); color: var(--color-text-primary); } .app-header__status { display: flex; align-items: center; gap: 6px; flex-shrink: 0; grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); position: relative; z-index: 130; } .app-header__save-badge { display: flex; align-items: center; gap: 4px; } .app-header__save-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-airflow); } .app-header__save-dot.unsaved { background: var(--color-fan); } /* === Тулбар (внутри .app-properties, под рейлом, в одной колонке) === */ .app-toolbar { width: 100%; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 6px 0; background: var(--color-context-bar, var(--color-panel)); box-shadow: var(--shadow-sm); z-index: 90; overflow: visible; order: 2; } .toolbar-group { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; width: 100%; } .toolbar-group + .toolbar-group { border-top: 1px solid var(--color-context-sep, var(--color-border-light)); } .toolbar-spacer { flex: 1; } .toolbar-btn { position: relative; width: var(--icon-container); height: var(--icon-container); display: flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); color: var(--color-text-secondary); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); border: 1px solid transparent; } .toolbar-btn:hover { background: var(--color-hover); color: var(--color-text-primary); } /* п.23 (D4): активная кнопка выбора режима — явная подсветка с тенью. * Раньше отличие было слишком слабым: фон acceht-bg почти не отличается * от обычного hover, юзер не понимал какой режим активен. */ .toolbar-btn.active { background: var(--color-accent); color: #fff; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-bg), 0 2px 6px rgba(79,154,255,0.35); } .toolbar-btn.active:hover { background: var(--color-accent); color: #fff; } .toolbar-btn svg { width: var(--icon-size); height: var(--icon-size); flex-shrink: 0; } .zoom-level { font-size: 10px; color: var(--color-text-secondary); text-align: center; line-height: 1; padding: 1px 0; user-select: none; white-space: nowrap; } /* П.19: ручной ввод масштаба — скрываем нативные стрелки number-инпута */ .aero-app input.zoom-level::-webkit-outer-spin-button, .aero-app input.zoom-level::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .aero-app input.zoom-level { -moz-appearance: textfield; } .aero-app input.zoom-level:hover, .aero-app input.zoom-level:focus { outline: 1px solid var(--color-accent); border-radius: 3px; } /* === Контекстная панель === */ .app-context-bar { grid-column: 2; grid-row: 1; justify-self: center; flex: 0 0 auto; min-width: 0; /* Высоту по содержимому, чтобы при переносе на 2 строки панель росла, а не обрезала вторую строку фиксированной height: 100%. */ height: auto; min-height: var(--header-height); display: flex; align-items: center; justify-content: center; /* Перенос кнопок на новую строку при нехватке ширины. gap задаёт расстояния и между колонками, и между рядами, padding даёт вертикальное «дыхание», когда строк становится больше одной. */ flex-wrap: wrap; gap: 4px; padding: 4px 0; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom: none; z-index: 120; overflow: visible; } .context-separator { width: 1px; height: 18px; background: var(--color-context-sep, var(--color-border)); flex-shrink: 0; margin: 0 4px; } /* === Холст === */ .app-canvas { grid-area: canvas; position: relative; overflow: hidden; background: var(--color-canvas); } .app-canvas #canvas-wrapper { width: 100%; height: 100%; } .app-canvas #fabric-canvas { display: block; width: 100% !important; height: 100% !important; } /* === Правая панель свойств: рейл (48px) + выдвижной drawer === */ .app-properties { grid-area: properties; position: relative; display: flex; flex-direction: column; background: var(--color-panel); border-left: 1px solid var(--color-border-light); z-index: 90; /* Пользовательская переменная, управляющая положением drawer'а. Дефолт — 100% (спрятан), .open переключает на 0 (выдвинут). */ --drawer-shift: 100%; } .app-properties.open { --drawer-shift: 0%; } /* Рейл — наверху общего правого столбца, над тулбаром */ .panel-rail { width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; padding: 6px 0; gap: 4px; background: var(--color-panel); z-index: 3; order: 1; } .panel-rail__btn { height: 44px; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); background: transparent; border: none; cursor: pointer; transition: color var(--transition-base), background var(--transition-base); position: relative; } .panel-rail__btn svg { width: 20px; height: 20px; flex-shrink: 0; } .panel-rail__btn:hover { color: var(--color-text-secondary); background: var(--color-hover); } .panel-rail__btn.active { color: var(--color-accent); background: var(--color-hover); } /* Синяя вертикальная полоска слева у активной иконки */ .panel-rail__btn.active::before { content: ''; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; background: var(--color-accent); border-radius: 0 2px 2px 0; } /* Drawer — выдвижная панель с контентом. Положение управляется переменной --drawer-shift на .app-properties: 100% (закрыт, за пределы рейла) ↔ 0 (выдвинут). */ .panel-drawer { position: absolute; top: 0; right: var(--toolbar-width); /* слева от единого столбца справа */ bottom: 0; width: var(--properties-drawer-width); background: var(--color-panel); border-left: 1px solid var(--color-border-light); box-shadow: -4px 0 12px rgba(0, 0, 0, 0.25); transform: translateX(var(--drawer-shift)); transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1); z-index: 2; display: flex; flex-direction: column; overflow: hidden; will-change: transform; } /* Заголовок drawer'а */ .panel-drawer__header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 14px; border-bottom: 1px solid var(--color-border-light); flex-shrink: 0; font-size: var(--font-size-base); font-weight: 600; color: var(--color-text-primary); background: var(--color-panel); } .panel-drawer__close { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; background: transparent; color: var(--color-text-muted); border: none; cursor: pointer; border-radius: var(--radius-sm); font-size: 18px; line-height: 1; transition: color var(--transition-base), background var(--transition-base); } .panel-drawer__close:hover { color: var(--color-text-primary); background: var(--color-hover); } .panel-content { flex: 1; overflow-y: auto; padding: 8px; } .panel-content[hidden] { display: none !important; } /* === Статус-бар === */ .app-statusbar { grid-area: statusbar; display: flex; align-items: center; padding: 0 12px; background: var(--color-context-bar, var(--color-panel)); border-top: 1px solid var(--color-context-sep, var(--color-border-light)); z-index: 100; font-size: var(--font-size-sm); color: var(--color-text-secondary); gap: 16px; } .statusbar-left { display: flex; align-items: center; gap: 8px; } .statusbar-center { display: flex; align-items: center; gap: 8px; } .statusbar-right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .statusbar-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-muted); } .statusbar-dot.calculated { background: var(--color-airflow); } /* === Баннер восстановления === */ .autosave-banner { position: fixed; top: var(--header-height); left: 0; right: var(--toolbar-width); z-index: 200; display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--color-fan-bg); border: 1px solid var(--color-fan); border-radius: 0; font-size: var(--font-size-base); color: var(--color-text-primary); } .autosave-banner button { padding: 4px 12px; border-radius: var(--radius-sm); font-size: var(--font-size-sm); } /* === Легенда холста === */ .canvas-legend { position: absolute; bottom: 8px; right: 8px; z-index: 50; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px 10px; font-size: var(--font-size-sm); color: var(--color-text-muted); } .canvas-legend.collapsed .canvas-legend__body { display: none; } .canvas-legend__toggle { cursor: pointer; font-size: var(--font-size-sm); color: var(--color-text-secondary); } .canvas-legend__item { display: flex; align-items: center; gap: 6px; padding: 2px 0; } .canvas-legend__color { width: 18px; height: 3px; border-radius: 1px; } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/components.css?178162368415550*/ /* components.css — Кнопки, инпуты, карточки, тултипы, нотификации */ /* === Продвинутый режим (advancedMode.js) === * Элементы с .advanced-only по умолчанию скрыты — показываются только когда * на body класс .advanced-mode (включается Ctrl+Shift+A или ?advanced=1). * Используется для скрытия от обычных пользователей: «Анализ точек», «3D», * «Разделить по центрам» и др. служебных инструментов (пп.20, 21, 22 docx). */ .aero-app .advanced-only { display: none !important; } body.aero-standalone.advanced-mode .advanced-only, .aero-app.advanced-mode .advanced-only { display: inline-flex !important; } /* === Кнопки === */ .aero-app .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--btn-height-sm); padding: 0 10px; font-size: var(--font-size-base); font-weight: 400; border-radius: var(--radius-md); transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform 80ms ease; white-space: nowrap; cursor: pointer; } .aero-app .btn:active { transform: scale(0.98); opacity: 0.9; } /* Default */ .aero-app .btn, .aero-app .btn-default { background: transparent; border: 1px solid var(--color-border); color: var(--color-text-secondary); } .aero-app .btn:hover, .aero-app .btn-default:hover { background: var(--color-hover); color: var(--color-text-primary); } /* Primary */ .aero-app .btn-primary { background: var(--color-accent-bg); border: 1px solid var(--color-accent); color: var(--color-accent); } .aero-app .btn-primary:hover { background: rgba(79, 154, 255, 0.2); color: var(--color-accent); } /* Danger */ .aero-app .btn-danger { background: var(--color-fire-bg); border: 1px solid var(--color-fire); color: var(--color-fire); } .aero-app .btn-danger:hover { background: rgba(232, 84, 84, 0.2); color: var(--color-fire); } /* Secondary */ .aero-app .btn-secondary { background: var(--color-card); border: 1px solid var(--color-border); color: var(--color-text-secondary); } .aero-app .btn-secondary:hover { background: var(--color-hover); color: var(--color-text-primary); } /* Warning */ .aero-app .btn-warning { background: var(--color-fan-bg); border: 1px solid var(--color-fan); color: var(--color-fan); } .aero-app .btn-warning:hover { background: rgba(240, 165, 0, 0.2); } /* Ghost */ .aero-app .btn-ghost { background: transparent; border: none; color: var(--color-text-muted); } .aero-app .btn-ghost:hover { color: var(--color-text-primary); } /* Размеры */ .aero-app .btn-md { height: var(--btn-height-md); padding: 0 14px; font-size: var(--font-size-lg); } .aero-app .btn-sm { height: 22px; padding: 0 6px; font-size: var(--font-size-xs); } /* Кнопка контекстного бара */ .aero-app .context-btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: var(--btn-height-sm); padding: 0 8px; font-size: var(--font-size-base); color: var(--color-text-secondary); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: transparent; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .aero-app .context-btn:hover { background: var(--color-hover); color: var(--color-text-primary); } .aero-app .context-btn.active { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent); } .aero-app .context-btn-primary { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent); } .aero-app .context-btn-primary:hover { background: rgba(79, 154, 255, 0.2); } /* Выпадающие группы верхней панели */ .aero-app .toolbar-menu { position: relative; display: inline-flex; flex-shrink: 0; } .aero-app .toolbar-menu > summary { list-style: none; cursor: pointer; } .aero-app .toolbar-menu > summary::-webkit-details-marker { display: none; } .aero-app .toolbar-menu__trigger::after { content: '\25BE'; font-size: 10px; line-height: 1; opacity: 0.7; margin-left: 2px; } .aero-app .toolbar-menu[open] .toolbar-menu__trigger { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent); } .aero-app .toolbar-menu__content { position: absolute; top: calc(100% + 6px); left: 0; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 4px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: 500; } .aero-app .toolbar-menu__item, .aero-app .toolbar-menu__help { min-height: 28px; border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-secondary); font-size: var(--font-size-base); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .aero-app .toolbar-menu__item { display: flex; align-items: center; justify-content: flex-start; width: 100%; padding: 0 10px; text-align: left; white-space: nowrap; } .aero-app .toolbar-menu__item--grow { flex: 1; } .aero-app .toolbar-menu__help { width: 28px; flex: 0 0 28px; padding: 0; font-weight: 700; } .aero-app .toolbar-menu__row { display: flex; align-items: stretch; gap: 2px; } .aero-app .toolbar-menu__item:hover, .aero-app .toolbar-menu__help:hover, .aero-app .toolbar-menu__item.active { background: var(--color-hover); color: var(--color-text-primary); } /* === Поля ввода === */ .aero-app input[type="text"], .aero-app input[type="number"], .aero-app input[type="url"], .aero-app input[type="color"], .aero-app select, .aero-app textarea { width: 100%; height: 28px; padding: 0 8px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: var(--font-size-base); transition: border-color var(--transition-fast); } .aero-app input:focus, .aero-app select:focus, .aero-app textarea:focus { border-color: var(--color-accent); box-shadow: 0 0 0 2px rgba(79, 154, 255, 0.15); } .aero-app input:disabled, .aero-app select:disabled { opacity: 0.5; cursor: not-allowed; } .aero-app input[readonly] { opacity: 0.7; cursor: default; } .aero-app input[type="number"] { text-align: right; font-variant-numeric: tabular-nums; } .aero-app input[type="color"] { padding: 2px; height: 28px; width: 40px; cursor: pointer; } .aero-app select { /* Safari требует -webkit- — без него остаётся нативная стрелка ОС поверх кастомной. */ -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236A6B8A'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; padding-right: 24px; } .aero-app textarea { height: auto; min-height: 60px; padding: 6px 8px; resize: vertical; } .aero-app input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; } .aero-app input[type="range"] { height: 4px; accent-color: var(--color-accent); } /* === Карточка результатов === */ .aero-app .result-card { background: var(--color-airflow-bg); border: 1px solid rgba(61, 214, 140, 0.3); border-radius: var(--radius-lg); padding: 8px 10px; } .aero-app .result-card__title { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-airflow); margin-bottom: 4px; } .aero-app .result-card__row { display: flex; justify-content: space-between; padding: 2px 0; } .aero-app .result-card__key { font-size: var(--font-size-sm); color: var(--color-text-muted); } .aero-app .result-card__value { font-size: var(--font-size-base); color: var(--color-text-primary); font-variant-numeric: tabular-nums; font-weight: 500; } /* === Тултипы === Используем нативные title-атрибуты (устанавливаются в uiTabs.js initTooltips). Работают корректно в обеих темах без дополнительного CSS. */ /* === Контекстное меню === */ .aero-app .context-menu { position: fixed; display: none; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 4px; z-index: 2000; min-width: 160px; } .aero-app .context-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-size: var(--font-size-base); color: var(--color-text-secondary); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); } .aero-app .context-menu-item:hover { background: var(--color-hover); color: var(--color-text-primary); } .aero-app .context-menu-divider { height: 1px; background: var(--color-border-light); margin: 4px 0; } /* === Нотификации === * Перенесены в ЛЕВЫЙ НИЖНИЙ угол — раньше top:right перекрывал тулбар и * правую панель (юзер «не мог подобраться к кнопкам»). * pointer-events: none на контейнере → клики проходят сквозь промежутки * между уведомлениями. На самих карточках pointer-events: auto, чтобы * кнопка × ловила клик. * max-height + overflow:auto → если уведомлений много, они скроллятся, * не растягивая контейнер до верха экрана. */ .aero-app #notificationContainer { position: fixed; /* Тулбар перенесён вправо — уведомления прижимаем к левому краю. */ left: 12px; bottom: 12px; z-index: 3000; display: flex; flex-direction: column-reverse; /* свежие сверху стека */ gap: 8px; max-height: calc(100vh - 80px); overflow-y: auto; pointer-events: none; } .aero-app .notification { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 16px; box-shadow: var(--shadow-lg); animation: notifSlideIn 0.25s ease-out; max-width: 360px; font-size: var(--font-size-base); color: var(--color-text-primary); pointer-events: auto; } .aero-app .notification button { font-family: inherit; } .aero-app .notification button:hover { color: var(--color-text-primary, #fff) !important; } /* Бейдж счётчика на кнопке журнала уведомлений */ .aero-app #notificationLogBtn { position: relative; } .aero-app #notificationLogBadge { position: absolute; top: -4px; right: -4px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--color-fire, #e74c3c); color: #fff; font-size: 10px; font-weight: 600; line-height: 16px; text-align: center; border-radius: 8px; display: none; box-sizing: border-box; } .aero-app .notification.success { border-left: 3px solid var(--color-airflow); } .aero-app .notification.error { border-left: 3px solid var(--color-fire); } .aero-app .notification.info { border-left: 3px solid var(--color-accent); } .aero-app .notification.warning { border-left: 3px solid var(--color-fan); } .aero-app .notification-title { font-weight: 500; margin-bottom: 2px; } .aero-app .notification-message { font-size: var(--font-size-sm); color: var(--color-text-secondary); } @keyframes notifSlideIn { /* въезд с левой стороны (контейнер стоит у левого края) */ from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } /* === Секции свойств (property groups) === */ .aero-app .property-group { background: var(--color-card); border-left: 3px solid var(--color-accent); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; padding: 8px 10px; margin-bottom: 8px; } .aero-app .property-group h4, .aero-app .property-group h5 { font-size: var(--font-size-sm); font-weight: 500; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .aero-app .property-row { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px solid var(--color-border-light); } .aero-app .property-row:last-child { border-bottom: none; } .aero-app .property-label { font-size: var(--font-size-base); color: var(--color-text-secondary); } .aero-app .property-value { font-size: var(--font-size-base); font-weight: 500; color: var(--color-text-primary); font-variant-numeric: tabular-nums; } /* === Placeholder === */ .aero-app .panel-placeholder { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; color: var(--color-text-muted); text-align: center; font-size: var(--font-size-base); } .aero-app .panel-placeholder svg { width: 32px; height: 32px; margin-bottom: 8px; opacity: 0.4; } /* === Библиотека изображений === */ .aero-app .image-library-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; } .aero-app .image-item { display: flex; flex-direction: column; align-items: center; padding: 4px; border: 1px solid var(--color-border-light); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .aero-app .image-item:hover { background: var(--color-hover); border-color: var(--color-border); } .aero-app .image-item img { width: 28px; height: 28px; object-fit: contain; } /* Текстовая иконка-плитка (буква вместо PNG) — например «Добавить записку». */ .aero-app .image-item__glyph { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 20px; font-weight: 700; line-height: 1; color: var(--color-text-primary); border: 1.5px solid var(--color-border); border-radius: 4px; } .aero-app .image-item-name { font-size: var(--font-size-xs); color: var(--color-text-muted); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; margin-top: 2px; } /* === Ссылки === */ .aero-app a.btn-link { display: inline-flex; align-items: center; gap: 4px; padding: 0 8px; height: var(--btn-height-sm); font-size: var(--font-size-base); color: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition-fast); } .aero-app a.btn-link:hover { background: var(--color-accent-bg); } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/canvas.css?17806765311757*/ /* canvas.css — Стили зоны холста и сетка */ /* Фон холста задаётся в JS (canvasSetup.js → initializeCanvas) */ /* Здесь — только CSS для обёртки и overlay-элементов */ .app-canvas { background-color: var(--color-canvas); } /* Подписи объёмов воздуха на холсте */ .air-volume-label { position: absolute; background: rgba(18, 19, 26, 0.85); border: 1px solid rgba(79, 154, 255, 0.4); color: var(--color-airflow); padding: 2px 6px; border-radius: 3px; font-size: var(--font-size-base); font-weight: 500; pointer-events: none; z-index: 10; } /* Метки концов линий */ .line-end-marker { fill: var(--color-accent); stroke: var(--color-accent); } .line-end-marker-bg { fill: var(--color-accent-bg); } /* Маркеры пересечений */ .intersection-point { cursor: pointer; } /* Плавающая кнопка "Расчёт воздуха" — правый верхний угол холста. Базовые размер/типографика наследуются от .context-btn, здесь — позиционирование, светло-голубой фон и тень. */ .aero-app .canvas-floating-btn { position: absolute; top: 12px; right: 12px; height: auto; padding: 10px; font-size: 16px; background: #CFE8FF; border-color: var(--color-accent, #4F9AFF); color: var(--color-accent, #4F9AFF); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); z-index: 50; } .aero-app .canvas-floating-btn:hover { background: #B5DAFF; border-color: var(--color-accent, #4F9AFF); color: var(--color-accent, #4F9AFF); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16); } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/panels.css?17800232803425*/ /* panels.css — Правая панель свойств: табы, секции, карточки */ /* Секция заголовка в панели свойств */ .props-section-title { font-size: var(--font-size-sm); font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-muted); padding: 6px 0 4px; } /* Элемент свойства: label + value */ .props-item { display: flex; justify-content: space-between; align-items: center; padding: 3px 0; border-bottom: 1px dashed var(--color-border-light); font-size: var(--font-size-base); } .props-item:last-child { border-bottom: none; } .props-item__label { color: var(--color-text-secondary); } .props-item__value { color: var(--color-text-primary); font-weight: 500; font-variant-numeric: tabular-nums; } /* Форма редактирования в панели */ .props-form-group { margin-bottom: 6px; } .props-form-group label { display: block; font-size: var(--font-size-sm); color: var(--color-text-secondary); margin-bottom: 2px; } .props-form-group input, .props-form-group select { width: 100%; } /* Кнопки внизу панели */ .props-actions { display: flex; gap: 6px; padding: 8px; border-top: 1px solid var(--color-border-light); margin-top: auto; } .props-actions .btn { flex: 1; } /* Цветовые точки для выбора цвета ветви */ .color-dots { display: flex; gap: 4px; padding: 4px 0; } .color-dot { width: 16px; height: 16px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: border-color var(--transition-fast); } .color-dot:hover, .color-dot.active { border-color: var(--color-text-primary); } /* Горячие клавиши — скрыть (теперь в тултипах) */ .hotkeys-panel { display: none; } /* Статусные бейджи в панели */ .status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-xs); font-weight: 500; } .status-badge--success { background: var(--color-airflow-bg); color: var(--color-airflow); } .status-badge--warning { background: var(--color-fan-bg); color: var(--color-fan); } .status-badge--error { background: var(--color-fire-bg); color: var(--color-fire); } /* Скролл в панели */ .app-properties .panel-content { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } .app-properties .panel-content::-webkit-scrollbar { width: 4px; } .app-properties .panel-content::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; } .app-properties .panel-content::-webkit-scrollbar-track { background: transparent; } /* Таблицы внутри модалок / панелей */ table { width: 100%; border-collapse: collapse; font-size: var(--font-size-base); } table th { text-align: left; font-weight: 500; color: var(--color-text-muted); padding: 4px 6px; border-bottom: 1px solid var(--color-border); font-size: var(--font-size-sm); text-transform: uppercase; letter-spacing: 0.3px; } table td { padding: 4px 6px; color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-light); } table tr:hover td { background: var(--color-hover); } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/modal.css?17809277787539*/ /* modal.css — Модальные окна тёмная тема */ .aero-app .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); /* Safari <15.4 требует -webkit- префикс. Без него блюр не работает на macOS. */ -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); z-index: 1000; align-items: center; justify-content: center; } .aero-app .modal.active, .aero-app .modal[style*="display: flex"], .aero-app .modal[style*="display:flex"] { display: flex; } .aero-app .modal-content { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); width: 700px; max-width: 92vw; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); animation: modalIn 0.18s ease-out; } /* Bug-fix (2026-05-19): красная рамка для модалок об ошибках схемы (напр. «два главных вентилятора дуют друг в друга»). */ .aero-app .modal-content.modal-error { border: 2px solid var(--color-fire); box-shadow: 0 0 0 1px var(--color-fire), var(--shadow-lg); } .aero-app .modal-content.modal-error .modal-header h3 { color: var(--color-fire); } .aero-app .modal-content.modal-error .modal-header { border-bottom: 1px solid var(--color-fire); } /* Секция модельных параметров */ .aero-app .model-params-section { border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 8px; } .aero-app .model-params-section__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .aero-app .model-params-section__title { font-size: var(--font-size-sm); color: var(--color-text-muted); font-style: italic; } .aero-app .model-params-section .form-group input:disabled { opacity: 0.55; cursor: not-allowed; } .aero-app .model-params-section .field-locked-icon { display: inline-block; margin-left: 4px; font-size: 10px; color: var(--color-fan); } .aero-app .modal-content[style*="max-width: 800px"], .aero-app .modal-content[style*="max-width:800px"] { width: 800px; } @keyframes modalIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .aero-app .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border-light); position: sticky; top: 0; background: var(--color-card); z-index: 1; } .aero-app .modal-title, .aero-app .modal-header h2, .aero-app .modal-header h3 { font-size: var(--font-size-md); font-weight: 600; color: var(--color-text-primary); margin: 0; } .aero-app .close-modal, .aero-app .modal-close, .aero-app .modal-header .close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; font-size: 18px; color: var(--color-text-muted); border-radius: var(--radius-sm); cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast); background: none; border: none; } .aero-app .close-modal:hover, .aero-app .modal-close:hover, .aero-app .modal-header .close:hover { background: var(--color-hover); color: var(--color-text-primary); } .aero-app .modal-form, .aero-app .modal-body { padding: 16px; } .aero-app .form-group { margin-bottom: 10px; } .aero-app .form-label, .aero-app .form-group > label { display: block; font-size: var(--font-size-base); color: var(--color-text-secondary); margin-bottom: 4px; } .aero-app .form-group input, .aero-app .form-group select, .aero-app .form-group textarea { width: 100%; } /* Чекбоксы не должны растягиваться на всю ширину form-group (правило выше с width:100% распространялось и на них). В flex-строке это раздувало чекбокс и отталкивало подпись вправо. Возвращаем естественный размер, чтобы чекбокс и подпись стояли вплотную слева. */ .aero-app .form-group input[type="checkbox"], .aero-app .form-group input[type="radio"] { width: auto; flex: 0 0 auto; } .aero-app .form-row { display: flex; gap: 10px; } .aero-app .form-row .form-group { flex: 1; } /* п.6: вертикальная раскладка для модалки параметров линии — каждое поле занимает свою строку, чтобы длинные подписи и поля не сжимались. Применяется через класс на форме. */ .aero-app .modal-form--vertical .form-row { flex-direction: column; gap: 0; } .aero-app .modal-form--vertical .form-row .form-group { flex: 1 1 100%; } .aero-app .form-control { width: 100%; height: 28px; padding: 0 8px; background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text-primary); font-size: var(--font-size-base); } .aero-app .form-check { display: flex; align-items: center; gap: 8px; } .aero-app .form-check-input { width: 16px !important; height: 16px; } .aero-app .form-check-label { font-size: var(--font-size-base); color: var(--color-text-secondary); cursor: pointer; } .aero-app .modal-buttons, .aero-app .modal-footer { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--color-border-light); } .aero-app .modal-buttons .btn, .aero-app .modal-footer .btn { flex: 1; height: var(--btn-height-md); font-size: var(--font-size-base); } /* === Стили для модалки информации о точке === */ .aero-app .line-info-table { width: 100%; border-collapse: collapse; margin: 8px 0; } .aero-app .line-info-table th, .aero-app .line-info-table td { padding: 4px 8px; text-align: left; font-size: var(--font-size-base); } .aero-app .line-info-table th { color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } .aero-app .line-info-table td { color: var(--color-text-primary); border-bottom: 1px solid var(--color-border-light); } /* Статистика точек */ .aero-app .point-stats { margin: 8px 0; } .aero-app .point-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; } .aero-app .stat-item { background: var(--color-card); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); padding: 6px 8px; text-align: center; } .aero-app .stat-value { font-size: var(--font-size-md); font-weight: 600; color: var(--color-accent); } .aero-app .stat-label { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* Элементы списков в модалках */ .aero-app .intersection-line-item, .aero-app .object-at-intersection, .aero-app .line-item, .aero-app .object-item { padding: 6px 8px; margin-bottom: 4px; background: var(--color-panel); border: 1px solid var(--color-border-light); border-radius: var(--radius-md); font-size: var(--font-size-base); color: var(--color-text-primary); } .aero-app .point-actions { display: flex; gap: 4px; margin-top: 6px; } .aero-app .point-actions .btn { font-size: var(--font-size-sm); } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/animations.css?17800232792096*/ /* animations.css — Все transition и @keyframes */ /* === Анимация вентилятора (кнопка в тулбаре) === */ @keyframes fanSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .aero-app #fanAnimationBtn.active svg { animation: fanSpin 0.8s linear infinite; transform-origin: center; } /* === Панель слоёв === */ .aero-app .layers-panel { padding: 8px; } .aero-app .layer-item:hover { background: var(--color-hover); border-radius: 4px; } /* === Reduced motion === */ @media (prefers-reduced-motion: reduce) { .aero-app, .aero-app *, .aero-app *::before, .aero-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* === Spinner для кнопки расчёта === */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .aero-app .btn-loading svg { animation: spin 1s linear infinite; } /* === Fade-in для карточки результатов === */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .aero-app .result-card--updated { animation: fadeIn 0.2s ease; } /* === Панель свойств первое открытие === */ @keyframes slideInRight { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } } .panel-content--animate { animation: slideInRight 0.2s ease-out; } /* === Скролл тулбара === */ .app-toolbar { scrollbar-width: none; } .app-toolbar::-webkit-scrollbar { display: none; } /* === Скролл для body (на всякий случай) === */ body.aero-standalone { scrollbar-width: thin; scrollbar-color: var(--color-border) var(--color-panel); } body.aero-standalone::-webkit-scrollbar { width: 6px; } body.aero-standalone::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; } body.aero-standalone::-webkit-scrollbar-track { background: var(--color-panel); } /* End */ /* Start:/local/components/aero/ventilation.canvas/templates/.default/styles/view3d.css?17800232804891*/ /* ═══════════════════════════════════════════════════════════════════ view3d.css — Стили оверлея 3D-вида шахтной сети ═══════════════════════════════════════════════════════════════════ */ .view3d-overlay { position: fixed; inset: 0; z-index: 10000; background: #0a0e1a; display: flex; flex-direction: column; font-family: inherit; color: #e6e9ef; } .view3d-header { flex: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 14px; background: #141826; border-bottom: 1px solid #222a3d; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); } .view3d-title { font-size: 14px; font-weight: 600; letter-spacing: 0.4px; color: #e6e9ef; } .view3d-header-controls { display: flex; gap: 6px; align-items: center; } .view3d-btn { background: #1d2235; color: #d4d9e4; border: 1px solid #2a3148; border-radius: 4px; padding: 5px 12px; font-size: 12px; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .view3d-btn:hover { background: #2a3148; border-color: #3a4262; } .view3d-btn-close { width: 32px; height: 28px; padding: 0; font-size: 20px; line-height: 1; color: #e85454; } .view3d-btn-close:hover { background: #3a1e20; border-color: #e85454; } .view3d-body { flex: 1 1 auto; position: relative; overflow: hidden; } #view3dCanvas { display: block; width: 100%; height: 100%; outline: none; } .view3d-controls { position: absolute; top: 14px; right: 14px; width: 220px; background: rgba(20, 24, 38, 0.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid #2a3148; border-radius: 6px; padding: 10px 12px; font-size: 12px; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45); } .view3d-control-row { margin-bottom: 8px; } .view3d-control-row:last-child { margin-bottom: 0; } .view3d-label { display: block; margin-bottom: 3px; color: #b8bfd0; font-size: 11px; } .view3d-label input[type="checkbox"] { margin-right: 5px; vertical-align: middle; } .view3d-controls input[type="range"] { width: 100%; accent-color: #4f9aff; } .view3d-legend { margin-top: 10px; padding-top: 8px; border-top: 1px solid #2a3148; } .view3d-legend-title { font-size: 11px; color: #8a92a6; margin-bottom: 5px; letter-spacing: 0.3px; } .view3d-legend-item { display: flex; align-items: center; font-size: 11px; color: #b8bfd0; margin-bottom: 3px; } .view3d-legend-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; border: 1px solid rgba(255, 255, 255, 0.2); flex-shrink: 0; } .view3d-hint { position: absolute; bottom: 12px; left: 14px; font-size: 11px; color: #6a7184; background: rgba(20, 24, 38, 0.6); padding: 5px 10px; border-radius: 4px; pointer-events: none; user-select: none; } .view3d-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; color: #6a7184; font-size: 14px; pointer-events: none; } .view3d-empty-icon { font-size: 48px; opacity: 0.4; } /* Поле elevation в панели слоёв. Селектор `input.layer-elevation-input` поднимает specificity до (0,0,2,1), чтобы перебить общее правило `input[type="number"] { width: 100% }` из components.css (specificity 0,0,1,1). Без этого input занимал всю ширину строки и elevation-поле вытесняло имя слоя за пределы панели. */ .aero-app input.layer-elevation-input { width: 52px; font-size: 10px; padding: 1px 3px; background: var(--color-hover, #1a1d2e); border: 1px solid var(--color-border, #2a3148); border-radius: 3px; color: var(--color-text-primary, #d4d9e4); text-align: right; flex-shrink: 0; margin-right: 2px; box-sizing: border-box; /* macOS Safari/Chrome рендерит native spinner-кнопки внутри input[type=number] шире 52px — строка слоя вылезает за правый край панели. Прячем spinner. */ -webkit-appearance: textfield; -moz-appearance: textfield; appearance: textfield; } .aero-app input.layer-elevation-input::-webkit-inner-spin-button, .aero-app input.layer-elevation-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .aero-app input.layer-elevation-input:focus { outline: none; border-color: var(--color-accent, #4a9eff); } /* End */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/variables.css?17807586303534 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/reset.css?17800232801194 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/layout.css?178075977013540 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/components.css?178162368415550 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/canvas.css?17806765311757 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/panels.css?17800232803425 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/modal.css?17809277787539 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/animations.css?17800232792096 */ /* /local/components/aero/ventilation.canvas/templates/.default/styles/view3d.css?17800232804891 */