.topBarRow { display: flex; align-items: center; gap: 12px; width: 100%; } .brandButton { display: flex; align-items: center; gap: 10px; border: none; background: transparent; cursor: pointer; padding: 0; color: inherit; font: inherit; } .brandLogo { flex-shrink: 0; display: block; } .brandTitle { font-weight: 700; } .fileToolbar { display: flex; align-items: center; gap: 14px; color: var(--text2); } .fileMenuTrigger { border: none; background: transparent; color: var(--text2); cursor: pointer; padding: 0; font: inherit; } .flex1 { flex: 1; } .appVersion { flex-shrink: 0; font-size: var(--text-xs); color: var(--text2); user-select: none; } .headerActions { display: flex; align-items: center; gap: 10px; } .splitRun { display: inline-flex; align-items: stretch; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--accent-border); background: var(--accent-fill-solid); overflow: hidden; } .splitRun:disabled, .splitRun[aria-disabled='true'] { opacity: 0.45; pointer-events: none; } .splitRunMain, .splitRunChevron { border: 0; background: transparent; color: rgba(255, 255, 255, 0.95); cursor: pointer; font: inherit; font-weight: 600; } .splitRunMain { padding: 0 14px; } .splitRunMain:hover:not(:disabled), .splitRunChevron:hover:not(:disabled) { background: color-mix(in srgb, var(--accent-fill-solid) 72%, white); } .splitRunMain:active:not(:disabled), .splitRunChevron:active:not(:disabled), .splitRunChevronOpen { background: color-mix(in srgb, var(--accent-fill-solid) 78%, black); } .splitRunDivider { width: 1px; align-self: stretch; background: rgba(0, 0, 0, 0.28); flex: 0 0 auto; } .splitRunChevron { width: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; } .splitRunChevronSvg { width: 12px; height: 12px; display: block; } .editorSidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 0; padding: 12px; border-right: 1px solid var(--stroke); background: var(--editor-column-bg); overflow: hidden; position: relative; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .editorSidebarDragOver { border-right-color: var(--accent); background: var(--accent-fill-soft); box-shadow: inset 0 0 0 2px var(--accent); } .editorGraphHost { height: 100%; min-height: 0; min-width: 0; display: flex; flex-direction: column; background: var(--bg0); overflow: hidden; } .editorInspector { height: 100%; min-height: 0; display: flex; flex-direction: column; overflow: hidden; padding: 14px; border-left: 1px solid var(--stroke); background: var(--editor-column-bg); } .gridTools { display: grid; gap: 10px; flex: 0 0 auto; } .gridTools > * { width: 100%; max-width: 100%; display: flex; box-sizing: border-box; } .gridTools button { width: 100%; box-sizing: border-box; flex: 1; } .spacer14 { height: 14px; flex: 0 0 auto; } .spacer18 { height: 18px; } .gamePropsButtons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .gamePropsButtons > * { width: 100%; min-width: 0; max-width: 100%; display: flex; box-sizing: border-box; } .gamePropsButtons button { width: 100%; box-sizing: border-box; flex: 1; } .sidebarScroll { overflow: auto; padding-right: 2px; min-height: 0; flex: 1 1 auto; align-self: stretch; } .sceneListGrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-content: start; justify-items: stretch; } .centerEmpty { height: 100%; flex: 1; background: var(--bg0); } .progressOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; /* Выше модалок (20001), чтобы прогресс импорта не уходил под диалог выбора. */ z-index: 30000; } .editorLockOverlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; z-index: 11000; } .editorLockModal { width: min(520px, calc(100vw - 32px)); border-radius: 12px; padding: 14px; background: rgba(25, 28, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); display: grid; gap: 8px; } .editorLockTitle { font-weight: 800; opacity: 0.95; } .editorLockText { opacity: 0.85; font-size: 12px; line-height: 1.45; } .progressModal { width: min(520px, calc(100vw - 32px)); border-radius: 12px; padding: 16px 16px 20px; background: rgba(25, 28, 38, 0.92); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55); display: grid; gap: 12px; justify-items: center; } .progressTitle { font-weight: 700; width: 100%; text-align: center; } .progressBar { height: 10px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; } .progressFill { height: 100%; width: 0%; background: rgba(167, 139, 250, 0.85); } .progressMeta { margin-top: 0; display: flex; justify-content: space-between; gap: 12px; opacity: 0.9; font-size: 12px; width: 100%; } .inspectorTitle { font-weight: 800; margin-bottom: 12px; flex-shrink: 0; } .inspectorScroll { flex: 1; min-height: 0; overflow: auto; padding-right: 4px; } .muted { color: var(--text2); } .noticeMessage { white-space: pre-wrap; line-height: 1.45; } .fileMenu { position: fixed; min-width: 220px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--color-surface-elevated-2); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 4px; z-index: var(--z-file-menu); } .fileMenuItem { text-align: left; padding: 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text0); cursor: pointer; font: inherit; } .fileMenuItemDanger { text-align: left; padding: 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--color-danger); cursor: pointer; font: inherit; } .fileMenuSubHost { position: relative; } .fileMenuItemExpand { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; } .fileMenuSub { position: absolute; left: calc(100% + 6px); top: 0; min-width: 200px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--color-surface-elevated-2); box-shadow: var(--shadow-lg); padding: 6px; display: grid; gap: 4px; z-index: calc(var(--z-file-menu) + 1); } .modalBackdrop { position: fixed; inset: 0; z-index: var(--z-modal-backdrop); border: none; padding: 0; margin: 0; background: var(--color-scrim); cursor: default; } .modalDialog { position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -50%); width: 520px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow: auto; box-sizing: border-box; min-width: 0; border-radius: var(--radius-lg); border: 1px solid var(--stroke); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); padding: 16px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); } .modalHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .modalTitle { font-weight: 900; font-size: var(--text-lg); } .modalClose { border: none; background: var(--panel2); color: var(--text2); border-radius: var(--radius-sm); width: 34px; height: 34px; cursor: pointer; font-size: 18px; line-height: 1; } .fieldGrid { display: grid; gap: 6px; min-width: 0; } .fieldGroup { display: grid; gap: 6px; min-width: 0; } .fieldGroupSpaced { margin-top: 10px; } .fieldLabel { color: var(--text2); font-size: var(--text-xs); font-weight: 800; } .fieldError { color: var(--color-danger); font-size: var(--text-xs); } .rowFlex { display: flex; gap: 8px; align-items: center; } .modalFooter { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 4px; width: 100%; min-width: 0; box-sizing: border-box; } .licenseBlockTitle { font-weight: 900; font-size: var(--text-lg); margin-bottom: 8px; } .licenseTextarea { width: 100%; min-height: 120px; box-sizing: border-box; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--bg0); color: var(--text0); font: inherit; resize: vertical; } .eulaScroll { max-height: min(52vh, 420px); overflow: auto; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--bg0); white-space: pre-wrap; font-size: var(--text-sm); line-height: 1.45; } .instructionsDialog { position: fixed; z-index: var(--z-modal); left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(920px, calc(100vw - 32px)); max-height: min(86vh, 720px); border-radius: var(--radius-lg); border: 1px solid var(--stroke); background: var(--color-surface-elevated); box-shadow: var(--shadow-xl); padding: 16px; display: grid; grid-template-rows: auto 1fr auto; gap: 12px; } .instructionsLayout { display: grid; grid-template-columns: 1fr 220px; gap: 14px; min-height: 0; max-height: min(62vh, 560px); } .instructionsContent { min-height: 0; overflow: auto; padding: 12px 14px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--bg0); } .instructionsContentTitle { font-weight: 800; font-size: var(--text-md); margin-bottom: 12px; } .instructionsParagraph { margin: 0 0 12px; color: var(--text1); font-size: var(--text-sm); line-height: 1.55; white-space: pre-wrap; } .instructionsParagraph:last-child { margin-bottom: 0; } .instructionsInlineLink { display: inline; margin: 0; padding: 0; border: none; background: none; color: var(--accent, #a78bfa); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .instructionsInlineLink:hover { color: var(--text0); } .instructionsNav { min-height: 0; overflow: auto; display: grid; gap: 4px; align-content: start; padding: 6px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--panel2); } .instructionsNavItem { text-align: left; padding: 9px 10px; border-radius: var(--radius-sm); border: none; background: transparent; color: var(--text2); cursor: pointer; font: inherit; font-size: var(--text-xs); line-height: 1.35; } .instructionsNavItem:hover { background: var(--scene-list-hover-bg); color: var(--text0); } .instructionsNavItemActive { background: rgba(167, 139, 250, 0.18); color: var(--text0); font-weight: 700; } .aboutBody { display: grid; gap: 10px; } .aboutAppName { font-weight: 900; font-size: var(--text-lg); } .aboutTagline { color: var(--text2); font-size: var(--text-sm); line-height: 1.45; } .aboutParagraph { margin: 0; color: var(--text1); font-size: var(--text-sm); line-height: 1.55; } .aboutMetaGrid { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; align-items: baseline; margin-top: 4px; } .aboutLink { color: var(--color-accent, #a78bfa); text-decoration: none; } .aboutLink:hover { text-decoration: underline; } .fileSuffix { color: var(--text2); font-size: var(--text-xs); flex-shrink: 0; } .projectPicker { display: grid; gap: 12px; min-height: 0; } .projectPickerTitle { font-weight: 900; } .projectPickerForm { display: grid; gap: 10px; } .projectPickerForm > * { width: 100%; max-width: 100%; box-sizing: border-box; } .projectPickerForm > *:has(button), .projectPickerForm > span { display: flex; } .projectPickerForm button { width: 100%; box-sizing: border-box; flex: 1; } .spacer6 { height: 6px; } .sectionLabel { color: var(--text2); font-size: var(--text-xs); font-weight: 900; letter-spacing: 0.6px; } .projectListScroll { overflow: auto; padding-right: 2px; } .projectList { display: grid; gap: 10px; } .projectCard { display: flex; align-items: flex-start; gap: 8px; padding: 12px; border-radius: 14px; border: 1px solid var(--stroke); background: var(--color-overlay-dark-2); } .projectCardBody { flex: 1; min-width: 0; cursor: pointer; border-radius: 10px; } .projectCardBodyOpening { cursor: wait; opacity: 0.72; } .projectCardBodyDisabled { cursor: default; opacity: 0.55; } .projectCardMenuBtn { flex-shrink: 0; margin: -4px -4px 0 0; border: none; background: transparent; color: var(--text2); cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); font-size: 18px; line-height: 1; } .projectCardMenuBtn:hover { background: var(--panel2); color: var(--text0); } .projectCardName { font-weight: 800; } .projectCardMeta { color: var(--text2); font-size: var(--text-xs); } .sceneInspector { display: grid; gap: 10px; } .labelSm { color: var(--text2); font-size: var(--text-xs); font-weight: 700; } .labelRow { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; } .labelRow .labelSm { flex: 1; min-width: 0; } .spacer8 { height: 8px; } .textarea { min-height: 92px; padding: 12px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--color-overlay-dark-3); resize: none; color: var(--text1); outline: none; } .descriptionEmpty { min-height: 36px; padding: 8px 10px; border-radius: var(--radius-md); border: 1px dashed var(--stroke-2); background: var(--color-overlay-dark-2); color: var(--text2); font-size: var(--text-xs); line-height: 1.4; display: flex; align-items: center; } .descriptionPreview { max-height: 4.6em; overflow-x: hidden; overflow-y: auto; padding: 8px 10px; border-radius: var(--radius-md); border: 1px solid var(--stroke); background: var(--color-overlay-dark-3); color: var(--text1); font-size: var(--text-xs); line-height: 1.45; word-break: break-word; } .descriptionPreview :global(p), .descriptionPreview :global(h2), .descriptionPreview :global(h3), .descriptionPreview :global(ul), .descriptionPreview :global(ol), .descriptionPreview :global(blockquote), .descriptionPreview :global(pre) { margin: 0 0 0.35em; } .descriptionPreview :global(p:last-child), .descriptionPreview :global(h2:last-child), .descriptionPreview :global(h3:last-child), .descriptionPreview :global(ul:last-child), .descriptionPreview :global(ol:last-child), .descriptionPreview :global(blockquote:last-child), .descriptionPreview :global(pre:last-child) { margin-bottom: 0; } .descriptionPreview :global(h2), .descriptionPreview :global(h3) { font-size: 1em; font-weight: 800; color: var(--text0); } .descriptionPreview :global(ul), .descriptionPreview :global(ol) { padding-left: 1.2em; } .descriptionPreview :global(strong), .descriptionPreview :global(b) { font-weight: 800; color: var(--text0); } .descriptionPreview :global(a) { color: var(--accent2); } .hint { color: var(--text2); font-size: var(--text-xs); line-height: 1.4; } .previewBox { border-radius: var(--radius-md); border: 1px solid var(--stroke); overflow: hidden; background: var(--color-overlay-dark-3); aspect-ratio: 16 / 9; width: 100%; display: flex; align-items: center; justify-content: center; position: relative; transition: border-color 0.15s ease, background 0.15s ease; } .previewBoxDragOver { border-color: var(--accent); border-style: dashed; background: var(--accent-fill-soft); } .previewFill { position: absolute; inset: 0; } .previewBusyOverlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; padding: 12px; } .previewBusyModal { display: grid; justify-items: center; gap: 10px; color: var(--text1); text-align: center; } .previewBusyText { font-size: var(--text-xs); font-weight: 700; color: rgba(255, 255, 255, 0.92); } .previewSpinner { width: 26px; height: 26px; border-radius: 999px; border: 3px solid rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.9); animation: previewSpin 0.9s linear infinite; } @keyframes previewSpin { to { transform: rotate(360deg); } } .videoCover { width: 100%; height: 100%; object-fit: cover; } .previewEmpty { color: var(--text2); font-size: var(--text-xs); padding: 12px; } .actionsRow { display: flex; gap: 8px; flex-wrap: wrap; } .checkboxLabel { display: flex; gap: 8px; align-items: center; color: var(--text2); } .checkboxLabelSm { display: flex; gap: 6px; align-items: center; cursor: pointer; } .spanSm { font-size: var(--text-xs); font-weight: 700; } .spanXs { font-size: 11px; } .audioDrop { border-radius: var(--radius-md); border: 1px dashed var(--stroke2); padding: 10px; display: grid; gap: 8px; position: relative; transition: border-color 0.15s ease, background 0.15s ease; } .audioDropEmpty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 96px; text-align: center; padding: 8px 4px; } .audioDropEmpty > * { max-width: 100%; } .audioDropDragOver { border-color: var(--accent); background: var(--accent-fill-soft); } .dropHintOverlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 10px; border-radius: inherit; background: var(--accent-fill-soft-2); color: var(--accent); font-size: var(--text-xs); font-weight: 700; text-align: center; pointer-events: none; z-index: 2; } .audioList { display: grid; gap: 6px; max-height: 160px; overflow: auto; } .audioRow { font-size: var(--text-xs); padding: 6px 8px; border-radius: var(--radius-xs); background: var(--color-overlay-dark-3); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; min-width: 0; } .audioName { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .audioControls { color: var(--text2); flex-shrink: 0; display: flex; gap: 8px; align-items: center; min-width: 0; } .audioRemove { flex-shrink: 0; min-width: 28px; min-height: 28px; padding: 4px; margin: -4px; border: none; background: transparent; color: var(--text-muted-on-dark); cursor: pointer; line-height: 1; display: grid; place-items: center; } .audioRemove:hover { color: rgba(255, 255, 255, 0.72); } .audioRemoveIcon { display: block; opacity: 0.92; } .hintBlock { color: var(--text2); } .sceneCard { border-radius: var(--scene-tile-radius); overflow: hidden; cursor: grab; border: 1px solid transparent; box-sizing: border-box; background: transparent; } .sceneCard:not(.sceneCardActive):hover { background: var(--scene-list-hover-bg); } .sceneCardActive { border-color: var(--scene-list-selected-border); background: var(--scene-list-selected-bg); } .sceneCardDragging { opacity: 0.45; } .sceneCardDropBefore, .sceneCardDropAfter { position: relative; } .sceneCardDropBefore::before, .sceneCardDropAfter::after { content: ''; position: absolute; left: 8px; right: 8px; height: 3px; border-radius: 999px; background: var(--accent); z-index: 2; pointer-events: none; } .sceneCardDropBefore::before { top: 0; } .sceneCardDropAfter::after { bottom: 0; } .sceneThumb { height: 92px; position: relative; box-sizing: border-box; padding: 8px; } .sceneThumbInner { width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } .sceneThumbInner img, .sceneThumbInner video, .sceneThumbVideo { -webkit-user-drag: none; user-select: none; } .sceneThumbVideo { display: block; width: 100%; height: 100%; object-fit: cover; } .sceneThumbEmpty { height: 92px; position: relative; box-sizing: border-box; padding: 8px; } .sceneThumbEmptyInner { width: 100%; height: 100%; border-radius: 10px; background: var(--bg0); } .sceneCardBody { padding: 10px; display: grid; gap: 6px; } .sceneCardHeader { display: flex; align-items: center; gap: 8px; } .badgeCurrent { font-size: var(--text-xs); color: var(--accent2); } .sceneMenuBtn { margin-left: auto; border: none; background: var(--panel2); border-radius: var(--radius-xs); padding: 4px 10px; cursor: pointer; color: var(--text2); line-height: 1; font-size: 16px; flex-shrink: 0; } .sceneCardTitle { font-weight: 750; } .menuBackdrop { position: fixed; inset: 0; z-index: var(--z-menu-backdrop); border: none; padding: 0; margin: 0; background: transparent; cursor: default; } .sceneCtxMenu { position: fixed; z-index: var(--z-file-menu); min-width: 160px; padding: 6px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--color-surface-menu); box-shadow: var(--shadow-menu); display: grid; gap: 2px; } .sceneCtxDanger { text-align: left; padding: 8px 10px; border-radius: var(--radius-xs); border: none; background: transparent; color: var(--color-danger); font-size: 13px; cursor: pointer; width: 100%; } .modalDialogWide { width: 640px; } .storylineChecklist { display: grid; gap: 8px; max-height: 280px; overflow-y: auto; padding: 4px 0; } .storylineCheck { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--color-surface); cursor: pointer; font-size: 13px; } .storylineCheck input { margin-top: 2px; } .storylineCheckDisabled { opacity: 0.55; cursor: not-allowed; } .conflictList { display: grid; gap: 12px; max-height: 360px; overflow-y: auto; } .conflictRow { display: grid; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); border: 1px solid var(--stroke); background: var(--color-surface); } .conflictRowTitle { font-weight: 700; font-size: 13px; } .conflictRowOptions { display: grid; gap: 6px; } .importFileRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .reportList { display: grid; gap: 6px; font-size: 13px; margin: 0; padding-left: 18px; }