html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
overscroll-behavior: none;
background-color: #1e1e1e;
}
:root {
--exit-safe-top-right-gap: 74px;
--exit-safe-bottom-gap-mobile: 86px;
}
body { margin: 0; background-color: #1e1e1e; overflow: hidden; touch-action: none; font-family: sans-serif; user-select: none; -webkit-user-select: none; min-width: 100vw; min-width: 100dvw; min-height: 100vh; min-height: 100dvh; }
input, textarea { user-select: text; -webkit-user-select: text; }
#container { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; z-index: 1; overflow: hidden; }
#container canvas { position: fixed !important; inset: 0 !important; width: 100vw !important; width: 100dvw !important; height: 100vh !important; height: 100dvh !important; display: block !important; }
#input-blocker { position: fixed; inset: 0; width: 100vw; width: 100dvw; height: 100vh; height: 100dvh; z-index: 9999; display: none; cursor: grabbing; }
#ui-trigger { position: fixed; top: 0; left: 0; width: 25px; height: 100vh; height: 100dvh; z-index: 1000; }
#ar-ground-flow-ui {
position: fixed;
top: calc(env(safe-area-inset-top, 0px) + 18px);
right: calc(env(safe-area-inset-right, 0px) + 15px);
z-index: 30002;
display: none;
pointer-events: none;
}
#ar-ground-flow-ui.visible {
display: flex;
}
#ar-session-ui {
position: fixed;
inset: 0;
z-index: 999999;
display: none;
pointer-events: none;
}
#ar-session-ui.visible {
display: block;
}
/* AR 控制按钮 */
.ar-control-btn {
position: fixed; z-index: 999999;
border-radius: 8px; display: flex; align-items: center; justify-content: center;
cursor: pointer; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s;
pointer-events: auto;
padding: 0 !important; margin: 0 !important;
box-sizing: border-box !important;
width: 48px !important;
height: 48px !important;
}
.ar-control-btn svg { width: 28px !important; height: 28px !important; fill: white; display: block; }
/* 默认横屏/PC: 退出系统按钮位置 */
.ar-control-btn.ar-exit {
top: 15px !important;
right: 15px !important;
background: rgba(231, 76, 60, 0.8) !important;
position: fixed !important;
width: 48px !important;
height: 48px !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
.ar-control-btn.ar-exit svg { width: 28px !important; height: 28px !important; display: block; }
.ar-control-btn.ar-exit:hover { background: rgba(231, 76, 60, 1) !important; transform: scale(1.05); }
/* 设置按钮: 移到左上角，匹配三维空间绿色齿轮 */
.ar-control-btn.ar-settings {
top: 15px !important;
left: 15px !important;
right: auto !important;
background: #27ae60 !important; /* 与普通模式 icon-btn 的背景色一致 */
position: fixed !important;
width: 48px !important;
height: 48px !important;
border-radius: 8px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
}
.ar-control-btn.ar-settings svg { width: 28px !important; height: 28px !important; fill: white !important; display: block; }
.ar-control-btn.ar-settings:hover { background: #e67e22 !important; border-color: #f1c40f !important; }
/* AR 模式下的设置面板复用主 UI */
#ui.ar-mode {
z-index: 9999999 !important;
top: 65px !important;
left: 15px !important;
}
#ui.ar-mode > *:not(.ar-keep) {
display: none !important;
}
#ui.ar-mode > div:first-child {
display: flex !important;
}
#ar-load-scope-ui {
position: fixed;
inset: 0;
z-index: 30004;
display: none;
align-items: center;
justify-content: center;
padding: calc(env(safe-area-inset-top, 0px) + 20px) calc(env(safe-area-inset-right, 0px) + 16px) calc(env(safe-area-inset-bottom, 0px) + 20px) calc(env(safe-area-inset-left, 0px) + 16px);
background: rgba(0, 0, 0, 0.45);
pointer-events: none;
}
#ar-load-scope-ui.visible {
display: flex;
}
.ar-ground-flow-card {
width: min(320px, calc(100vw - 30px));
background: rgba(15, 23, 42, 0.94);
color: #ecf0f1;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 12px 30px rgba(0,0,0,0.35);
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: auto;
}
.ar-ground-flow-title {
font-size: 14px;
font-weight: bold;
color: #f1c40f;
}
#ar-ground-flow-text {
font-size: 12px;
line-height: 1.5;
color: rgba(255,255,255,0.92);
}
#ar-ground-cancel-btn {
width: auto;
margin: 0;
align-self: flex-end;
padding: 7px 14px;
font-size: 12px;
font-weight: bold;
border-radius: 999px;
background: rgba(192, 57, 43, 0.94);
border: 1px solid rgba(255,255,255,0.16);
box-shadow: none;
}
#ar-exit-session-btn {
width: auto;
margin: 0;
padding: 8px 16px;
font-size: 12px;
font-weight: bold;
border-radius: 999px;
background: rgba(192, 57, 43, 0.96);
border: 1px solid rgba(255,255,255,0.18);
box-shadow: 0 8px 22px rgba(0,0,0,0.32);
pointer-events: auto;
}
.ar-load-scope-card {
width: min(380px, calc(100vw - 32px));
background: rgba(15, 23, 42, 0.96);
color: #ecf0f1;
border: 1px solid rgba(255,255,255,0.16);
border-radius: 16px;
padding: 16px;
box-shadow: 0 18px 40px rgba(0,0,0,0.42);
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: auto;
}
.ar-load-scope-title {
font-size: 15px;
font-weight: bold;
color: #f1c40f;
}
#ar-load-scope-text {
font-size: 13px;
line-height: 1.6;
color: rgba(255,255,255,0.92);
}
.ar-load-scope-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: flex-end;
}
#ar-load-all-btn,
#ar-load-selected-btn,
#ar-load-scope-cancel-btn {
width: auto;
margin: 0;
padding: 8px 14px;
font-size: 12px;
font-weight: bold;
border-radius: 999px;
box-shadow: none;
}
#ar-load-all-btn {
background: rgba(46, 204, 113, 0.95);
border: 1px solid rgba(255,255,255,0.18);
}
#ar-load-selected-btn {
background: rgba(52, 152, 219, 0.95);
border: 1px solid rgba(255,255,255,0.18);
}
#ar-load-scope-cancel-btn {
background: rgba(192, 57, 43, 0.94);
border: 1px solid rgba(255,255,255,0.16);
}
/* UI 面板通用样式 */
#ui, #measure-ui, #memo-ui {
position: absolute; top: 75px; left: 15px; z-index: 1001;
background: rgba(30, 30, 30, 0.96); padding: 12px; border-radius: 12px; color: white; border: 1px solid #444;
width: 240px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), opacity 0.3s;
pointer-events: auto; display: flex; flex-direction: column;
max-height: 82vh; overflow-y: auto; scrollbar-width: thin;
}
.ui-resize-handle {
display: none;
position: absolute;
top: 0;
right: -10px;
width: 20px;
height: 100%;
opacity: 0;
cursor: ew-resize;
align-items: center;
justify-content: center;
transition: opacity 0.2s ease;
z-index: 3;
touch-action: none;
}
.ui-resize-handle::before {
content: '↔';
width: 16px;
height: 36px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.25);
background: rgba(20, 20, 20, 0.88);
color: rgba(255,255,255,0.9);
font-size: 12px;
line-height: 34px;
text-align: center;
box-shadow: 0 4px 10px rgba(0,0,0,0.35);
}
.desktop-resizable .ui-resize-handle {
display: flex;
}
.desktop-resizable:hover .ui-resize-handle,
.desktop-resizable .ui-resize-handle.is-dragging {
opacity: 1;
}
body.ui-resizing-active,
body.ui-resizing-active * {
cursor: ew-resize !important;
}
#ui.hidden, #measure-ui.hidden, #memo-ui.hidden { transform: translateX(-350px); opacity: 0; pointer-events: none; display: none; }
/* 工程项目资料：PC/手机横屏/手机竖屏 三套独立布局 */
#project-doc-ui {
position: fixed;
top: 50%;
left: 50%;
width: 74vw;
height: 76vh;
min-width: 760px;
min-height: 480px;
transform: translate(-50%, -50%);
z-index: 12000;
background: rgba(18, 18, 18, 0.97);
border: 1px solid rgba(255,255,255,0.22);
border-radius: 12px;
box-shadow: 0 18px 45px rgba(0,0,0,0.55);
color: white;
padding: 12px;
display: flex;
flex-direction: column;
pointer-events: auto;
opacity: 1;
overflow: hidden;
gap: 8px;
}
#project-doc-ui.hidden {
display: none;
opacity: 0;
pointer-events: none;
}
#project-doc-header {
display: flex;
justify-content: space-between;
align-items: center;
}
#project-doc-title {
font-weight: bold;
font-size: 14px;
color: #3498db;
}
#close-project-doc-btn {
cursor: pointer;
font-size: 18px;
padding: 4px 8px;
}
#project-doc-layout-variants {
flex: 1;
min-height: 0;
display: block;
}
.project-doc-layout-variant {
display: none;
height: 100%;
min-height: 0;
flex-direction: column;
gap: 8px;
}
#project-doc-ui.project-doc-mode-pc .project-doc-layout-pc {
display: flex;
}
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-layout-mobile-landscape {
display: flex;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-layout-mobile-portrait {
display: flex;
}
.project-doc-toolbar {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
padding: 8px;
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
background: rgba(255,255,255,0.03);
}
.project-doc-toolbar button {
margin: 0;
width: auto;
min-width: 70px;
background: #2980b9;
color: white;
border: 1px solid rgba(255,255,255,0.2);
border-radius: 6px;
padding: 8px 12px;
cursor: pointer;
font-size: 12px;
touch-action: manipulation;
}
.project-doc-toolbar button[data-doc-action="delete"] {
background: #c0392b;
}
.project-doc-toolbar button[data-doc-action="batch-download"],
#project-doc-ui .project-doc-mobile-btn-download {
background: #27ae60;
}
.project-doc-toolbar button[data-doc-action="batch-download"]:disabled,
#project-doc-ui .project-doc-mobile-btn-download:disabled {
opacity: 0.55;
cursor: wait;
}
.project-doc-breadcrumb {
margin-left: 4px;
padding: 6px 10px;
border-radius: 6px;
background: rgba(255,255,255,0.08);
color: #dfe6e9;
font-size: 12px;
flex: 1;
min-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.project-doc-search-box {
width: 0;
opacity: 0;
overflow: hidden;
transition: width 0.25s ease, opacity 0.2s ease;
}
.project-doc-search-box.active {
width: 176px;
opacity: 1;
}
.project-doc-search-input {
width: 100%;
box-sizing: border-box;
background: rgba(0,0,0,0.35);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 18px;
color: #ecf0f1;
font-size: 12px;
padding: 7px 10px;
outline: none;
}
.project-doc-search-input:focus {
border-color: #3498db;
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
}
.project-doc-search-btn {
margin: 0;
width: auto;
min-width: 64px;
background: #2d3748;
color: #d1d5db;
border: 1px solid #4b5563;
border-radius: 20px;
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
transition: 0.2s;
touch-action: manipulation;
}
.project-doc-search-btn:hover {
background: #374151;
color: #fff;
border-color: #6b7280;
}
.project-doc-search-btn.active {
background: #2563eb;
color: #fff;
border-color: #2563eb;
}
.project-doc-layout-main {
flex: 1;
min-height: 0;
display: grid;
grid-template-columns: 300px 1fr;
gap: 8px;
}
.project-doc-tree-panel,
.project-doc-folder-panel {
border: 1px solid rgba(255,255,255,0.14);
border-radius: 8px;
background: rgba(255,255,255,0.02);
display: flex;
flex-direction: column;
min-height: 0;
}
.project-doc-panel-title {
font-size: 12px;
color: #bdc3c7;
padding: 8px 10px;
border-bottom: 1px solid rgba(255,255,255,0.12);
}
.project-doc-tree,
.project-doc-list {
flex: 1;
overflow: auto;
padding: 6px;
-webkit-overflow-scrolling: touch;
}
.project-doc-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
gap: 8px;
align-content: start;
}
.project-doc-selection-box {
position: fixed;
z-index: 22000;
border: 1px solid rgba(52, 152, 219, 0.9);
background: rgba(52, 152, 219, 0.18);
pointer-events: none;
border-radius: 4px;
}
.project-doc-pager {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 8px 10px;
border-top: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.02);
}
.project-doc-pager button {
margin: 0;
width: auto;
min-width: 72px;
padding: 6px 10px;
font-size: 12px;
border-radius: 6px;
background: #34495e;
touch-action: manipulation;
}
.project-doc-pager button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.project-doc-page-info {
font-size: 11px;
color: #bdc3c7;
}
.project-doc-empty {
margin-top: 6px;
font-size: 11px;
color: #95a5a6;
text-align: center;
padding: 8px 0;
grid-column: 1 / -1;
}
.project-doc-tree-node,
.project-doc-item {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 8px;
padding: 8px 10px;
border: 1px solid transparent;
border-radius: 6px;
color: #ecf0f1;
font-size: 12px;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
}
.project-doc-tree-node {
margin-bottom: 2px;
}
.project-doc-card {
grid-template-columns: 1fr;
gap: 6px;
border: 1px solid rgba(255,255,255,0.14);
background: rgba(255,255,255,0.02);
padding: 8px;
margin: 0;
min-width: 0;
}
.project-doc-card-preview {
width: 100%;
aspect-ratio: 4 / 3;
border-radius: 6px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.project-doc-card-preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.project-doc-file-icon {
width: 56px;
height: 56px;
border-radius: 10px;
border: 1px solid rgba(142, 68, 173, 0.5);
background: linear-gradient(135deg, rgba(142, 68, 173, 0.5), rgba(52, 152, 219, 0.45));
color: #ffffff;
font-size: 14px;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.8px;
text-transform: uppercase;
}
.project-doc-card-name {
font-size: 12px;
color: #ecf0f1;
line-height: 1.3;
min-height: 30px;
max-height: 32px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.project-doc-card-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 6px;
min-width: 0;
}
.project-doc-card-meta-left {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.project-doc-meta-right {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
}
.project-doc-note-btn {
width: 24px;
height: 24px;
padding: 3px;
margin: 0;
border-radius: 6px;
border: 1px solid rgba(255,255,255,0.22);
background: rgba(0,0,0,0.22);
color: #95a5a6;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: color 0.2s, border-color 0.2s, background 0.2s;
}
.project-doc-note-btn svg {
width: 14px;
height: 14px;
fill: currentColor;
}
.project-doc-note-btn:hover {
color: #f1c40f;
border-color: rgba(241, 196, 15, 0.7);
background: rgba(241, 196, 15, 0.12);
}
.project-doc-note-btn.has-note {
color: #f1c40f;
border-color: rgba(241, 196, 15, 0.7);
background: rgba(241, 196, 15, 0.14);
}
.project-doc-note-tooltip {
position: fixed;
display: none;
max-width: 260px;
background: rgba(0, 0, 0, 0.85);
color: #fff;
padding: 8px 12px;
border-radius: 6px;
font-size: 12px;
line-height: 1.4;
z-index: 21000;
pointer-events: none;
white-space: pre-wrap;
word-wrap: break-word;
box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}
.project-doc-tree-node:hover,
.project-doc-item:hover {
background: rgba(52, 152, 219, 0.14);
}
.project-doc-tree-node.is-selected,
.project-doc-item.is-selected {
border-color: rgba(241, 196, 15, 0.9);
background: rgba(241, 196, 15, 0.16);
}
.project-doc-tree-node.is-cut-pending,
.project-doc-item.is-cut-pending {
opacity: 0.62;
border-style: dashed;
}
.project-doc-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
.project-doc-tree-caret {
width: 10px;
text-align: center;
color: #95a5a6;
font-size: 10px;
flex-shrink: 0;
}
.project-doc-node-icon {
width: 14px;
text-align: center;
flex-shrink: 0;
}
.project-doc-status {
font-size: 10px;
color: #f1c40f;
flex-shrink: 0;
}
.project-doc-root-eye {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 2px 4px;
border-radius: 4px;
color: #2ecc71;
}
.project-doc-root-eye:hover {
background: rgba(46, 204, 113, 0.15);
}
.project-doc-tree-node.drag-over-inside,
.project-doc-item.drag-over-inside {
border-color: rgba(46, 204, 113, 0.95);
background: rgba(46, 204, 113, 0.16);
}
.project-doc-tree-node.drag-over-before,
.project-doc-item.drag-over-before {
box-shadow: inset 0 2px 0 #2ecc71;
}
.project-doc-tree-node.drag-over-after,
.project-doc-item.drag-over-after {
box-shadow: inset 0 -2px 0 #2ecc71;
}
.project-doc-tree.drag-over-root,
.project-doc-list.drag-over-root {
border: 1px dashed rgba(46, 204, 113, 0.95);
border-radius: 8px;
background: rgba(46, 204, 113, 0.08);
}
/* 手机横屏：宽布局但按钮更大，便于手指 */
#project-doc-ui.project-doc-mode-mobile-landscape {
width: 96vw;
height: 88vh;
min-width: 0;
min-height: 0;
padding: 8px;
border-radius: 10px;
}
#project-doc-ui.project-doc-mode-mobile-landscape #project-doc-header,
#project-doc-ui.project-doc-mode-mobile-portrait #project-doc-header {
margin-bottom: 2px;
}
#project-doc-ui.project-doc-mode-mobile-landscape #project-doc-title,
#project-doc-ui.project-doc-mode-mobile-portrait #project-doc-title {
font-size: 13px;
}
#project-doc-ui.project-doc-mode-mobile-landscape .status-area,
#project-doc-ui.project-doc-mode-mobile-portrait .status-area {
margin-bottom: 2px;
font-size: 9px;
line-height: 1.2;
opacity: 0.9;
max-height: 22px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#project-doc-ui .project-doc-toolbar-mobile {
gap: 4px;
padding: 5px 6px;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-mobile-btn {
min-width: 42px;
padding: 6px 7px;
font-size: 11px;
border-radius: 5px;
letter-spacing: 0.2px;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-mobile-btn-danger {
background: #b3362a;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-mobile-btn-cut {
background: #8e44ad;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-mobile-btn-paste {
background: #16a085;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-mobile-btn-search {
min-width: 36px;
padding: 6px 8px;
background: #2d3748;
}
#project-doc-ui .project-doc-toolbar-mobile .project-doc-breadcrumb {
min-width: 100%;
margin-left: 0;
padding: 4px 8px;
font-size: 11px;
order: 10;
}
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-toolbar-mobile button {
min-width: 42px;
padding: 6px 7px;
font-size: 11px;
}
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-search-box.active {
width: 124px;
}
#project-doc-ui.project-doc-mode-mobile-landscape .mobile-landscape-main {
grid-template-columns: minmax(160px, 34%) 1fr;
gap: 5px;
}
/* 手机竖屏：上下布局，触控优先 */
#project-doc-ui.project-doc-mode-mobile-portrait {
top: calc(env(safe-area-inset-top, 0px) + 8px);
left: 50%;
width: 96vw;
height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - var(--exit-safe-bottom-gap-mobile));
min-width: 0;
min-height: 0;
padding: 8px;
border-radius: 10px;
transform: translateX(-50%);
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-toolbar-portrait {
gap: 4px;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-toolbar-portrait button {
flex: 1;
min-width: calc(25% - 4px);
font-size: 11px;
padding: 6px 5px;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-search-btn {
min-width: 36px;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-search-box {
width: 0;
flex: 0 0 auto;
min-width: 0;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-search-box.active {
width: calc(50% - 4px);
}
#project-doc-ui.project-doc-mode-mobile-portrait .mobile-portrait-main {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: minmax(28%, 0.75fr) minmax(58%, 1.25fr);
gap: 5px;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-tree-node,
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-item,
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-tree-node,
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-item {
padding-top: 10px;
padding-bottom: 10px;
font-size: 13px;
}
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-list {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 6px;
}
#project-doc-ui.project-doc-mode-mobile-landscape .project-doc-pager button,
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-pager button {
min-width: 68px;
padding: 8px 10px;
font-size: 13px;
}
#project-doc-ui.project-doc-mode-mobile-portrait .project-doc-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 6px;
}
/* 图片浏览器的关闭按钮避开右上角退出系统按钮 */
#img-close {
top: calc(env(safe-area-inset-top, 0px) + 12px) !important;
right: calc(env(safe-area-inset-right, 0px) + var(--exit-safe-top-right-gap)) !important;
}
@media (max-width: 768px) and (orientation: portrait) {
#img-close {
right: calc(env(safe-area-inset-right, 0px) + 16px) !important;
}
}
/* 插件副 UI：紧贴主 UI 右侧，高度一致，宽度不超过播放按钮宽度（约 40px） */
#plugin-ui {
position: absolute;
top: 75px;
/* 副 UI 最左侧固定在视口左侧 285px 位置，最右侧固定在 369px：宽度 = 369 - 285 = 84px */
left: 285px;
z-index: 1001;
width: 84px;
max-height: 82vh;
background: rgba(30, 30, 30, 0.96);
border-radius: 12px;
border: 1px solid #444;
box-shadow: 0 10px 40px rgba(0,0,0,0.5);
display: flex;
flex-direction: column;
align-items: center;
padding: 8px 6px;
opacity: 0;
pointer-events: none;
/* 初始向左缩进一点，用于从左往右弹出 */
transform: translateX(-60px);
transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.25s;
}
#plugin-ui.open {
opacity: 1;
pointer-events: auto;
transform: translateX(0);
}
/* 副 UI 内 PDF 图标：正方形，红底白字 + 右上角折角 */
.plugin-pdf-icon {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
background: #e74c3c;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.plugin-pdf-icon .plugin-pdf-text {
font-family: sans-serif;
font-size: 9px;
font-weight: bold;
color: white;
letter-spacing: 0.02em;
z-index: 1;
}
/* 右上角折角（浅灰，模拟纸张背面） */
.plugin-pdf-icon::after {
content: '';
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 0 14px 14px 0;
border-color: transparent #bdc3c7 transparent transparent;
}
/* 副 UI 多边形主按钮：与 PDF 样式统一，改用蓝绿色区分 */
.plugin-poly-icon {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
background: #16a085;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.plugin-poly-icon svg {
width: 20px;
height: 20px;
}
/* 副 UI 中 多边形 子菜单容器（导入/对齐/调整） */
#plugin-poly-menu {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 5px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
#plugin-poly-menu.open {
max-height: 350px;
opacity: 1;
}
/* 待定功能主按钮：与多边形样式结构类似，颜色采用不同以作区分（如紫色 #9b59b6） */
.plugin-custom-icon {
width: 36px;
height: 36px;
min-width: 36px;
min-height: 36px;
background: #9b59b6;
border: none;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.plugin-custom-icon svg {
width: 24px;
height: 24px;
}
/* 插件副 UI 主按钮间距：前段由子菜单容器 margin-top:6px 提供，后段主按钮统一 6px（PC/手机共用） */
#plugin-ui > #plugin-project-doc-icon,
#plugin-ui > #plugin-poly-rebuild-icon,
#plugin-ui > #plugin-collab-work-icon {
margin-top: 6px;
}
/* 待定功能 子菜单容器 */
#plugin-custom-menu {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 5px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
#plugin-custom-menu.open {
max-height: 350px;
opacity: 1;
}
/* 副 UI 中 PDF 子菜单容器（导入/对齐/调整） */
#plugin-pdf-menu {
margin-top: 6px;
display: flex;
flex-direction: column;
gap: 5px;
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.2s ease-out, opacity 0.2s ease-out;
}
#plugin-pdf-menu.open {
max-height: 350px;
opacity: 1;
}
.plugin-pdf-tool-btn {
width: 30px;
height: 30px;
border-radius: 6px;
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255,255,255,0.25);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex-shrink: 0;
}
.plugin-pdf-tool-btn svg {
width: 16px;
height: 16px;
fill: white;
}
.mobile-ui { width: 270px !important; top: 65px !important; }
/* ================= 手机版 UI：竖屏与横屏拆分（当前排布相同，便于后续独立调整） ================= */
/* 竖屏：小屏下主 UI 与副 UI 不重叠 */
@media (max-width: 768px) and (orientation: portrait) {
#plugin-ui {
top: 65px;
left: 315px; /* 15 + 270 + 30 与主 UI 保持与 PC 端相同的 30px 间距 */
width: min(89px, calc(100vw - 309px));
min-width: 50px;
}
/* 手机竖屏：放到全屏按钮左侧，保持透明极简风格，调亮色彩 */
#exit-btn {
top: auto !important;
bottom: 35px !important;
right: 55px !important; /* 全屏按钮宽32+右侧15+间距8 = 55 */
width: 32px !important;
height: 32px !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
border-radius: 0 !important;
}
#exit-btn svg {
width: 28px !important;
height: 28px !important;
fill: rgba(255, 255, 255, 0.8) !important; /* 调亮到 0.8 */
}
#exit-btn:hover { transform: none !important; }
/* 手机竖屏 AR 按钮适配 */
.ar-control-btn.ar-exit {
top: 15px !important;
right: 15px !important;
bottom: auto !important;
width: 48px !important; height: 48px !important; background: rgba(231, 76, 60, 0.8) !important; border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; border-radius: 8px !important;
}
.ar-control-btn.ar-exit svg { width: 28px !important; height: 28px !important; fill: white !important; display: block; }
.ar-control-btn.ar-settings {
top: 15px !important;
left: 15px !important;
bottom: auto !important;
right: auto !important;
width: 48px !important; height: 48px !important; background: #27ae60 !important; border: 1px solid rgba(255,255,255,0.2) !important; box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important; border-radius: 8px !important;
padding: 0 !important; margin: 0 !important; box-sizing: border-box !important;
}
.ar-control-btn.ar-settings svg { width: 28px !important; height: 28px !important; fill: white !important; display: block; }
.ar-control-btn.ar-settings:hover { background: #e67e22 !important; border-color: #f1c40f !important; }
}
@media (max-width: 480px) and (orientation: portrait) {
#ui.mobile-ui, #ui { width: 220px !important; }
#measure-ui.mobile-ui, #measure-ui { width: 220px !important; }
#memo-ui.mobile-ui, #memo-ui { width: 220px !important; }
#plugin-ui {
top: 65px;
left: 265px; /* 15 + 220 + 30 与主 UI 保持与 PC 端相同的 30px 间距 */
width: min(89px, calc(100vw - 259px));
min-width: 44px;
}
}
@media (max-width: 360px) and (orientation: portrait) {
#ui.mobile-ui, #ui { width: 180px !important; }
#measure-ui.mobile-ui, #measure-ui { width: 180px !important; }
#memo-ui.mobile-ui, #memo-ui { width: 180px !important; }
#plugin-ui {
top: 65px;
left: 225px; /* 15 + 180 + 30 与主 UI 保持与 PC 端相同的 30px 间距 */
width: min(89px, calc(100vw - 219px));
min-width: 40px;
}
}
/* ================= 手机版 UI：横屏 ================= */
/* 手机横屏时，宽(长边)通常在 800-950px 之间。主 UI 占据约 311px 空间 */
@media (max-width: 950px) and (orientation: landscape) {
#ui.mobile-ui, #ui { width: 270px !important; }
#measure-ui.mobile-ui, #measure-ui { width: 270px !important; }
#memo-ui.mobile-ui, #memo-ui { width: 270px !important; }
#plugin-ui {
top: 65px; /* 向上提升 10px */
/* 主 UI (15左边距 + 270宽 + 24内边距 + 2边框 = 311px)，副 UI 预留约 5px 间距 */
left: 316px;
width: min(89px, calc(100vw - 365px));
min-width: 50px;
}
}
/* 针对较窄屏幕（根据横屏时的高度判断）缩小整体 UI */
@media (max-height: 400px) and (orientation: landscape) {
#ui.mobile-ui, #ui { width: 220px !important; }
#measure-ui.mobile-ui, #measure-ui { width: 220px !important; }
#memo-ui.mobile-ui, #memo-ui { width: 220px !important; }
#plugin-ui {
top: 65px; /* 向上提升 10px */
left: 266px; /* 主UI占 261px，副UI从 266px 开始，预留约 5px 间距 */
width: min(89px, calc(100vw - 315px));
min-width: 44px;
}
}
/* 针对极窄屏幕进一步缩小 */
@media (max-height: 360px) and (orientation: landscape) {
#ui.mobile-ui, #ui { width: 180px !important; }
#measure-ui.mobile-ui, #measure-ui { width: 180px !important; }
#memo-ui.mobile-ui, #memo-ui { width: 180px !important; }
#plugin-ui {
top: 65px; /* 向上提升 10px */
left: 226px; /* 主UI占 221px，副UI从 226px 开始，预留约 5px 间距 */
width: min(89px, calc(100vw - 275px));
min-width: 40px;
}
}
.icon-bar { position: absolute; top: 15px; left: 15px; z-index: 1002; display: flex; gap: 10px; pointer-events: auto; }
.capture-precision-tip-inline {
margin-top: 4px;
margin-bottom: 8px;
padding: 6px 8px;
border-radius: 6px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(20, 20, 20, 0.18);
color: rgba(255, 255, 255, 0.72);
font-size: 11px;
line-height: 1.35;
text-align: left;
}
.icon-btn {
width: 42px; height: 42px; background: #27ae60; border-radius: 8px;
display: flex; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.2);
box-shadow: 0 4px 10px rgba(0,0,0,0.3); cursor: pointer; transition: all 0.2s;
}
.icon-btn.active { background: #e67e22; border-color: #f1c40f; }
/* 保存按钮特殊样式 */
#save-icon { background: #8e44ad; position: relative; }
#save-icon.disabled { background: #555; opacity: 0.5; cursor: not-allowed; pointer-events: none; }
#save-icon.saving { animation: pulse-purple 1.5s infinite; pointer-events: none; }
@keyframes pulse-purple { 0% { box-shadow: 0 0 0 0 rgba(142, 68, 173, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(142, 68, 173, 0); } 100% { box-shadow: 0 0 0 0 rgba(142, 68, 173, 0); } }
/* 上传状态条 */
#upload-status-bar {
position: absolute; top: 15px; right: 70px; z-index: 1002;
background: rgba(0,0,0,0.8); padding: 8px 15px; border-radius: 20px;
color: white; font-size: 12px; display: none; align-items: center; gap: 8px;
border: 1px solid #444; pointer-events: none;
}
#upload-status-bar.active { display: flex; }
.spinner { width: 12px; height: 12px; border: 2px solid #3498db; border-top: 2px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#play-icon.disabled { background: #555; opacity: 0.3; pointer-events: none; }
#play-icon.playing { background: #e74c3c; animation: pulse 2s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(231, 76, 60, 0); } 100% { box-shadow: 0 0 0 0 rgba(231, 76, 60, 0); } }
.btn-row { display: flex; gap: 4px; margin-top: 5px; }
.btn-row button { flex: 1; margin-top: 0; padding: 8px 2px; font-size: 11px; }
button { background: #27ae60; color: white; border: none; padding: 10px; width: 100%; cursor: pointer; border-radius: 6px; font-weight: bold; margin-top: 8px; font-size: 13px; }
button.secondary { background: #2980b9; }
button.neutral { background: #555; }
button.danger { background: #c0392b; }
.group-header {
font-size: 10px; font-weight: bold; color: #f1c40f; margin-top: 12px; padding-top: 8px;
border-top: 1px solid #333; letter-spacing: 0.5px;
display: flex; justify-content: space-between; align-items: center;
}
.collapsible-header { cursor: pointer; user-select: none; }
.collapsible-header .toggle-icon { transition: transform 0.2s; color: #888; font-size: 10px; }
.collapsible-header.collapsed .toggle-icon { transform: rotate(-90deg); }
.collapsible-content { display: block; flex-shrink: 0; }
.status-area { font-size: 10px; color: #888; margin-bottom: 4px; }
.layer-item { display: flex; justify-content: space-between; align-items: center; background: rgba(255,255,255,0.05); padding: 5px 8px; border-radius: 6px; margin-bottom: 4px; font-size: 10px; border: 1px solid #444; }
.camera-item {
background: rgba(52, 152, 219, 0.15); border: 1px solid #2980b9;
padding: 5px 8px; margin-bottom: 4px; border-radius: 6px; cursor: grab;
font-size: 11px; display: flex; align-items: center;
}
.camera-name { flex-grow: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 2px 4px; outline: none; }
.camera-duration-input { width: 32px; background: rgba(0,0,0,0.3); border: 1px solid #555; color: #f1c40f; font-size: 10px; text-align: center; border-radius: 3px; margin-right: 5px; }
.camera-delete { width: 16px; height: 16px; cursor: pointer; fill: #95a5a6; display: flex; align-items: center; justify-content: center; }
/* 镜头时间轴（PC） */
#camera-timeline-ui {
position: fixed;
left: 306px;
right: 106px;
bottom: 10px;
height: 132px;
display: none;
flex-direction: column;
gap: 6px;
padding: 8px 10px;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
background: rgba(20, 22, 25, 0.92);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
backdrop-filter: blur(6px);
z-index: 980;
pointer-events: auto;
}
#camera-timeline-ui.is-visible { display: flex; }
#camera-timeline-ui.timeline-collapsed { height: 52px; }
.camera-timeline-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-height: 22px;
position: relative;
}
.camera-timeline-title {
color: #f1c40f;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.3px;
white-space: nowrap;
}
.camera-timeline-scale {
display: inline-flex;
align-items: center;
gap: 6px;
flex-wrap: nowrap;
margin-left: auto;
z-index: 2;
}
.camera-timeline-transport {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: inline-flex;
align-items: center;
gap: 4px;
z-index: 1;
pointer-events: auto;
}
.camera-timeline-transport-btn {
margin: 0;
margin-top: 0;
width: 24px;
min-width: 24px;
height: 20px;
padding: 0;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.24);
background: rgba(255,255,255,0.08);
color: #d9e2ec;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.camera-timeline-transport-btn:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.42);
}
.camera-timeline-transport-btn.active {
background: rgba(46, 204, 113, 0.28);
border-color: rgba(46, 204, 113, 0.75);
color: #eafff2;
}
.camera-timeline-close-btn {
margin: 0;
margin-top: 0;
width: 22px;
min-width: 22px;
height: 20px;
padding: 0;
border-radius: 4px;
border: 1px solid rgba(255,255,255,0.28);
background: rgba(255,255,255,0.08);
color: #d6dde4;
font-size: 11px;
line-height: 1;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
}
.camera-timeline-close-btn:hover {
background: rgba(231, 76, 60, 0.22);
border-color: rgba(231, 76, 60, 0.6);
color: #ffd5cf;
}
.camera-timeline-total {
color: #f7d968;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15px;
margin-right: 4px;
white-space: nowrap;
user-select: none;
}
.camera-timeline-scale-label {
color: #9aa1a9;
font-size: 10px;
}
.camera-timeline-scale-btn {
margin: 0;
margin-top: 0;
width: auto;
min-width: 38px;
padding: 3px 8px;
border-radius: 4px;
border: 1px solid #3f4953;
background: rgba(255, 255, 255, 0.08);
color: #cfd7df;
font-size: 10px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.camera-timeline-scale-btn:hover {
background: rgba(255, 255, 255, 0.16);
border-color: rgba(255, 255, 255, 0.45);
}
.camera-timeline-scale-btn.active {
background: rgba(52, 152, 219, 0.35);
border-color: rgba(52, 152, 219, 0.9);
color: #ecf5ff;
}
.camera-timeline-track-wrap {
position: relative;
flex: 1;
min-height: 0;
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.12);
background: rgba(8, 10, 12, 0.62);
overflow-x: auto;
overflow-y: hidden;
scrollbar-gutter: stable both-edges;
}
.camera-timeline-track-wrap::-webkit-scrollbar {
height: 9px;
}
.camera-timeline-track-wrap::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.06);
border-radius: 7px;
}
.camera-timeline-track-wrap::-webkit-scrollbar-thumb {
background: rgba(130, 164, 192, 0.55);
border-radius: 7px;
}
.camera-timeline-surface {
position: relative;
height: 100%;
min-width: 100%;
}
.camera-timeline-grid {
position: absolute;
inset: 0;
pointer-events: none;
background-image:
linear-gradient(to right, rgba(255, 255, 255, 0.08) 1px, transparent 1px),
linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
background-size: 40px 100%, 100% 24px;
background-position: left top;
}
/* 0.1s 模式下，为避免刻度过密不可读，视觉刻度按 1s 显示 */
.camera-timeline-grid.scale-0-1 { background-size: 180px 100%, 100% 24px; }
.camera-timeline-grid.scale-1 { background-size: 40px 100%, 100% 24px; }
.camera-timeline-grid.scale-10 { background-size: 66px 100%, 100% 24px; }
.camera-timeline-ruler {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 24px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
pointer-events: none;
}
.camera-timeline-ruler .tick {
position: absolute;
top: 0;
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.26);
}
.camera-timeline-ruler .tick-label {
position: absolute;
top: 1px;
transform: translateX(3px);
font-size: 9px;
color: rgba(222, 229, 236, 0.84);
white-space: nowrap;
}
.camera-timeline-track {
position: absolute;
left: 0;
right: 0;
top: 24px;
bottom: 0;
overflow: visible;
}
.camera-timeline-playhead {
position: absolute;
top: 0;
bottom: 0;
width: 16px; /* 扩大命中区，便于鼠标选中拖拽 */
transform: translateX(-8px);
pointer-events: auto;
cursor: ew-resize;
z-index: 8;
}
.camera-timeline-playhead::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 7px; /* 视觉中线 */
width: 2px;
background: rgba(46, 204, 113, 0.95);
box-shadow: 0 0 0 1px rgba(46, 204, 113, 0.25);
pointer-events: none;
}
.camera-timeline-playhead-handle {
display: none;
}
.camera-timeline-playhead-label {
position: absolute;
top: 2px;
left: 0;
transform: translateX(-50%);
padding: 1px 7px;
border-radius: 5px;
background: rgba(46, 204, 113, 0.95);
color: #083620;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
white-space: nowrap;
pointer-events: none;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
.camera-timeline-playhead.is-dragging .camera-timeline-playhead-label {
background: rgba(88, 232, 149, 0.98);
box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.28), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.camera-timeline-row {
position: relative;
height: 31px;
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.camera-timeline-row:last-child { border-bottom: none; }
.camera-timeline-node {
position: absolute;
top: 4px;
height: 22px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid rgba(52, 152, 219, 0.7);
background: linear-gradient(180deg, rgba(52, 152, 219, 0.55), rgba(41, 128, 185, 0.55));
font-size: 10px;
font-weight: 600;
line-height: 20px;
padding: 0 8px;
cursor: pointer;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.camera-timeline-node:hover {
border-color: #7fc2f0;
box-shadow: 0 0 0 1px rgba(127, 194, 240, 0.35), 0 6px 16px rgba(9, 22, 33, 0.35);
}
.camera-timeline-node-name {
color: #e8f4ff;
margin-right: 4px;
}
.camera-timeline-node-duration {
color: #ffd166;
font-weight: 700;
}
.camera-timeline-node.is-selected {
border-color: #f1c40f;
box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.45);
}
.camera-timeline-node.is-dragging {
opacity: 0.92;
border-color: #ffd45e;
box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.45), 0 10px 20px rgba(0, 0, 0, 0.36);
cursor: grabbing;
z-index: 6;
}
.camera-timeline-render-node {
position: absolute;
top: 4px;
height: 22px;
box-sizing: border-box;
border-radius: 5px;
border: 1px solid rgba(155, 89, 182, 0.78);
background: linear-gradient(180deg, rgba(155, 89, 182, 0.5), rgba(142, 68, 173, 0.5));
font-size: 10px;
font-weight: 600;
line-height: 20px;
padding: 0 8px;
cursor: pointer;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: box-shadow 0.16s ease, border-color 0.16s ease, opacity 0.16s ease;
}
.camera-timeline-render-node:hover {
border-color: #d8a8f5;
box-shadow: 0 0 0 1px rgba(216, 168, 245, 0.35), 0 6px 16px rgba(36, 15, 44, 0.35);
}
.camera-timeline-render-name {
color: #f3e6ff;
margin-right: 4px;
}
.camera-timeline-render-duration {
color: #ffe082;
font-weight: 700;
}
.camera-timeline-render-node.is-selected {
border-color: #f1c40f;
box-shadow: 0 0 0 1px rgba(241, 196, 15, 0.45);
}
.camera-timeline-render-node.is-dragging {
opacity: 0.92;
border-color: #ffd45e;
box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.45), 0 10px 20px rgba(0, 0, 0, 0.36);
cursor: grabbing;
z-index: 6;
}
.camera-timeline-group-node {
position: absolute;
top: 2px;
height: 26px;
box-sizing: border-box;
border-radius: 6px;
border: 1px solid rgba(241, 196, 15, 0.72);
background: linear-gradient(180deg, rgba(241, 196, 15, 0.4), rgba(243, 156, 18, 0.28));
font-size: 10px;
font-weight: 700;
line-height: 24px;
padding: 0 9px;
cursor: pointer;
user-select: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.24);
z-index: 3;
}
.camera-timeline-group-node.is-selected {
border-color: #ffe38b;
box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.36);
}
.camera-timeline-group-name {
color: #fff3c4;
margin-right: 4px;
}
.camera-timeline-group-duration {
color: #7ee2ff;
font-weight: 700;
}
.camera-timeline-group-node.is-dragging {
border-color: #fff1b8;
box-shadow: 0 0 0 2px rgba(241, 196, 15, 0.48), 0 12px 22px rgba(0, 0, 0, 0.35);
cursor: grabbing;
z-index: 7;
}
.camera-timeline-resize-handle {
position: absolute;
top: 3px;
width: 8px;
height: 24px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.16);
border: 1px solid rgba(255, 255, 255, 0.26);
cursor: ew-resize;
z-index: 9;
transform: translateX(-50%);
transition: background 0.12s ease, border-color 0.12s ease;
}
.camera-timeline-resize-handle:hover {
background: rgba(255, 255, 255, 0.28);
border-color: rgba(255, 255, 255, 0.46);
}
.camera-timeline-resize-handle.group-handle {
top: 1px;
height: 28px;
background: rgba(241, 196, 15, 0.18);
border-color: rgba(241, 196, 15, 0.52);
}
.camera-timeline-resize-handle.group-handle:hover {
background: rgba(241, 196, 15, 0.32);
border-color: rgba(241, 196, 15, 0.82);
}
.camera-timeline-resize-handle.render-handle {
top: 3px;
height: 24px;
background: rgba(155, 89, 182, 0.22);
border-color: rgba(155, 89, 182, 0.6);
}
.camera-timeline-resize-handle.render-handle:hover {
background: rgba(155, 89, 182, 0.36);
border-color: rgba(190, 130, 230, 0.9);
}
.camera-timeline-resize-handle.is-dragging {
background: rgba(88, 232, 149, 0.38);
border-color: rgba(88, 232, 149, 0.92);
box-shadow: 0 0 0 2px rgba(88, 232, 149, 0.24);
}
.camera-timeline-drag-hint {
position: fixed;
z-index: 10020;
pointer-events: none;
font-size: 10px;
line-height: 1.3;
color: rgba(245, 250, 255, 0.96);
background: rgba(0, 0, 0, 0.35);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 4px;
padding: 1px 5px;
white-space: nowrap;
transform: translate(10px, -16px);
user-select: none;
}
.camera-timeline-ghost {
position: absolute;
top: 0;
bottom: 0;
border: 1px dashed rgba(241, 196, 15, 0.7);
background: rgba(241, 196, 15, 0.16);
pointer-events: none;
z-index: 5;
}
.camera-timeline-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: rgba(180, 187, 194, 0.9);
letter-spacing: 0.2px;
pointer-events: none;
}
@media (max-width: 950px) {
#camera-timeline-ui {
display: none !important;
}
}
#app-watermark { display: none; position: fixed; bottom: 12px; right: 15px; z-index: 99999; font-family: monospace; font-size: 11px; color: rgba(255, 255, 255, 0.3); pointer-events: none; }
#spatial-capture-ui { position: fixed; bottom: 12px; left: 15px; z-index: 99998; display: flex; align-items: center; gap: 6px; pointer-events: none; }
#spatial-capture-hint { font-size: 11px; color: rgba(241, 196, 15, 0.95); background: rgba(0,0,0,0.6); padding: 4px 8px; border-radius: 4px; max-width: 220px; line-height: 1.3; pointer-events: none; }
#spatial-capture-lock-btn {
width: 26px;
min-width: 26px;
height: 24px;
margin: 0;
margin-top: 0;
padding: 0;
border-radius: 4px;
border: 1px solid rgba(241, 196, 15, 0.7);
background: rgba(0, 0, 0, 0.75);
color: rgba(241, 196, 15, 0.95);
font-size: 13px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
pointer-events: auto;
box-shadow: none;
}
#spatial-capture-lock-btn:hover { background: rgba(40, 40, 40, 0.95); }
@media (max-width: 950px) and (orientation: landscape) {
#spatial-capture-ui { left: 50%; transform: translateX(-50%); }
}
@media (max-width: 950px) {
#project-title-ui { font-size: 11px !important; }
}
#fullscreen-btn { position: fixed; bottom: 35px; right: 15px; width: 32px; height: 32px; z-index: 99999; cursor: pointer; display: flex; align-items: center; justify-content: center; }
@media (max-width: 950px) {
#clip-ortho-exit-btn {
right: 15px !important;
bottom: 75px !important;
top: auto !important;
z-index: 99999;
}
#cloud-color-cycle-btn {
right: 15px !important;
top: auto !important;
z-index: 99999;
}
}
/* 退出按钮：PC/横屏默认显示在右上角 */
#exit-btn {
position: fixed; top: 15px; right: 15px; width: 42px; height: 42px; z-index: 900;
background: rgba(231, 76, 60, 0.8); border-radius: 8px; display: flex; align-items: center; justify-content: center;
cursor: pointer; border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 10px rgba(0,0,0,0.3); transition: all 0.2s;
}
#exit-btn:hover { background: rgba(231, 76, 60, 1); transform: scale(1.05); }
#exit-btn svg { width: 22px; height: 22px; fill: white; }
#isolate-float-btn { position: fixed; bottom: 28px; right: 59px; width: 48px; height: 48px; z-index: 99998; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(230, 126, 34, 0.95); color: #fff; font-size: 12px; font-weight: bold; border: 2px solid rgba(255,255,255,0.5); box-shadow: 0 4px 12px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
#isolate-float-btn.visible { opacity: 1; pointer-events: auto; }
input[type=range] { width: 100%; accent-color: #27ae60; cursor: pointer; margin: 4px 0; }
/* --- 手机版滑动条专属防误触排版 --- */
@media (max-width: 950px) {
input[type=range] {
width: 66% !important; /* 滑动条只占右侧约 2/3 的宽度 */
margin-left: 34% !important; /* 左侧强行留白 1/3，作为安全滑动区 */
margin-top: 6px !important;
margin-bottom: 6px !important;
display: block;
}
/* 点击选中时依然保留黄色外框提示 */
input[type=range]:focus {
outline: 2px solid #f1c40f;
outline-offset: 2px;
border-radius: 4px;
}
}
.pick-log { position: fixed; top: 15px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.8); color: #2ecc71; padding: 8px 15px; border-radius: 20px; font-size: 12px; z-index: 10000; pointer-events: none; opacity: 0; transition: opacity 0.5s; }
.pick-log.show { opacity: 1; }
/* --- 移动端测量专属 UI START --- */
#mobile-crosshair { position: fixed; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); pointer-events: none; z-index: 10000; display: none; }
#mobile-crosshair::before, #mobile-crosshair::after { content: ''; position: absolute; background: #e74c3c; }
#mobile-crosshair::before { top: 9px; left: 0; width: 20px; height: 2px; }
#mobile-crosshair::after { top: 0; left: 9px; width: 2px; height: 20px; }
#mobile-measure-action-bar { position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%); display: none; gap: 10px; z-index: 10001; background: rgba(30, 30, 30, 0.95); padding: 10px 20px; border-radius: 30px; border: 1px solid #444; box-shadow: 0 10px 30px rgba(0,0,0,0.8); white-space: nowrap; }
/* 测量与记事标签样式 */
.measure-tool-btn { background: #2980b9; color: white; border: 1px solid #1e1e1e; border-radius: 6px; padding: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.measure-tool-btn:hover { background: #3498db; }
.measure-tool-btn.active-tool { background: #e67e22; border-color: #f1c40f; box-shadow: 0 0 8px rgba(230,126,34,0.5); }
.measure-tool-btn svg { fill: currentColor; width: 22px; height: 22px; }
#measure-labels, #memo-labels { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 500; overflow: hidden; }
.measure-label { position: absolute; background: rgba(52, 152, 219, 0.9); color: white; padding: 2px 6px; border-radius: 4px; font-size: 12px; transform: translate(-50%, -50%); border: 1px solid white; font-family: monospace; white-space: nowrap; font-weight: bold; box-shadow: 0 2px 5px rgba(0,0,0,0.5); z-index: 10;}
.measure-sub-label { position: absolute; color: #f1c40f; font-size: 11px; transform: translate(-50%, -100%); font-family: monospace; white-space: nowrap; pointer-events: none; text-shadow: 1px 1px 1px black; z-index: 5;}
/* --- 对齐标签样式 --- */
#align-labels { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 550; overflow: hidden; }
#focus-point-overlay { position: absolute; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 560; overflow: hidden; }
.focus-point-cursor { position: absolute; transform: translate(-50%, -50%); transform-origin: center center; pointer-events: none; }
.focus-point-cursor svg { display: block; }
.focus-point-ring { animation: focus-point-spin 4s linear infinite; transform-origin: 32px 32px; }
@keyframes focus-point-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.align-label { position: absolute; padding: 3px 8px; border-radius: 4px; font-size: 12px; transform: translate(10px, -15px); border: 1px solid white; font-weight: bold; box-shadow: 0 4px 10px rgba(0,0,0,0.5); z-index: 10; white-space: nowrap; }
.align-label-pdf { background: rgba(155, 89, 182, 0.9); color: white; }
.align-label-model { background: rgba(46, 204, 113, 0.9); color: white; }
.align-label-poly { background: rgba(22, 160, 133, 0.9); color: white; }
/* --- 记事特有样式 --- */
.memo-label {
position: absolute; background: rgba(241, 196, 15, 0.9); color: #2c3e50;
padding: 4px 8px; border-radius: 4px 4px 4px 0px; font-size: 12px;
transform: translate(0%, -100%); border: 1px solid white; font-weight: bold;
box-shadow: 0 4px 10px rgba(0,0,0,0.4); z-index: 15; max-width: 150px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: auto; cursor: pointer;
}
.memo-label::after {
content: ''; position: absolute; bottom: -5px; left: 0;
width: 0; height: 0; border-left: 0px solid transparent; border-right: 8px solid transparent; border-top: 6px solid rgba(241, 196, 15, 0.9);
}
.memo-item-row {
display: flex; flex-direction: column; gap: 5px;
background: rgba(243, 156, 18, 0.1); border: 1px solid #d35400;
padding: 8px; margin-bottom: 8px; border-radius: 6px; position: relative;
}
.memo-header {
display: flex; justify-content: space-between; align-items: center;
border-bottom: 1px solid rgba(243, 156, 18, 0.3); padding-bottom: 4px; margin-bottom: 4px;
}
.memo-content-div {
width: 100%; min-height: 24px; max-height: none; height: auto;
background: rgba(0,0,0,0.2); border: 1px solid rgba(243, 156, 18, 0.3); color: #f39c12;
font-size: 12px; outline: none; overflow-y: hidden;
font-family: inherit; padding: 6px; border-radius: 4px;
white-space: pre-wrap; word-break: break-all; line-height: 1.5;
box-sizing: border-box;
}
.memo-content-div:focus { border-color: #f39c12; background: rgba(0,0,0,0.3); }
.interact-link, .interact-file {
color: #3498db; text-decoration: underline; cursor: pointer;
padding: 0 2px; border-radius: 2px;
}
.interact-link:hover, .interact-file:hover { background: rgba(52, 152, 219, 0.2); }
.interact-file::before { content: '📎 '; text-decoration: none; display: inline-block; }
.memo-tools { display: flex; gap: 8px; }
.memo-icon-btn { cursor: pointer; opacity: 0.8; transition: opacity 0.2s; font-size: 14px; }
.memo-icon-btn:hover { opacity: 1; transform: scale(1.1); }
.icon-upload { fill: #3498db; }
.icon-link { fill: #2ecc71; }
.icon-file { fill: #9b59b6; }
.icon-loc { color: #f39c12; font-weight: bold; }
/* 群组样式 */
.layer-group { border: 1px solid #555; border-radius: 6px; margin-bottom: 6px; background: rgba(0,0,0,0.2); }
.layer-group-header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; cursor: pointer; background: rgba(255,255,255,0.05); border-radius: 6px; }
.layer-group-content { padding-left: 8px; padding-top: 4px; padding-bottom: 4px; display: block; min-height: 15px; border-left: 2px solid #444; margin-left: 12px; margin-top: 2px; }
.layer-group-content.collapsed { display: none; }
.layer-group-header .folder-icon { margin-right: 6px; color: #f1c40f; font-size: 14px;}
.group-toggle { transition: transform 0.2s; font-size: 10px; margin-right: 6px; color:#888;}
.group-toggle.collapsed { transform: rotate(-90deg); }
.camera-group-content.collapsed { display: none; }
.camera-group-header .folder-icon { margin-right: 6px; color: #f1c40f; font-size: 14px; }
.camera-group-toggle { transition: transform 0.2s; font-size: 10px; margin-right: 6px; color:#888; }
.camera-group-toggle.collapsed { transform: rotate(-90deg); }
/* 加载浮层样式 */
#loading-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0, 0, 0, 0.6); z-index: 20000;
display: flex; justify-content: center; align-items: center;
}
.loader-content {
background: #2c2c2c; padding: 20px; border-radius: 12px;
width: 320px; box-shadow: 0 10px 40px rgba(0,0,0,0.8);
border: 1px solid #444; text-align: center;
}
.loader-bar-bg {
width: 100%; height: 6px; background: #444; border-radius: 3px; overflow: hidden;
}
#loader-bar-fill {
width: 0%; height: 100%; background: #27ae60; transition: width 0.2s;
}
/* 密码分享克隆保存全屏阻塞提示 */
#clone-save-blocking-ui {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.88);
backdrop-filter: blur(8px);
z-index: 100002;
display: none;
justify-content: center;
align-items: center;
flex-direction: column;
color: white;
font-family: sans-serif;
pointer-events: all;
}
#clone-save-blocking-ui.active {
display: flex;
}
.clone-save-blocking-panel {
background: #252526;
padding: 32px 36px;
border-radius: 14px;
text-align: center;
max-width: min(92vw, 420px);
width: 100%;
border: 1px solid #444;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
}
.clone-save-blocking-spinner {
width: 40px;
height: 40px;
margin: 0 auto 18px;
border: 3px solid rgba(142, 68, 173, 0.3);
border-top-color: #8e44ad;
border-radius: 50%;
animation: spin 1s linear infinite;
}
#clone-save-blocking-ui.is-complete .clone-save-blocking-spinner {
animation: none;
border-color: #27ae60;
border-top-color: #27ae60;
background: #27ae60;
position: relative;
}
#clone-save-blocking-ui.is-complete .clone-save-blocking-spinner::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -55%);
font-size: 22px;
font-weight: bold;
color: white;
}
.clone-save-blocking-title {
margin: 0 0 10px;
font-size: 18px;
color: #fff;
font-weight: bold;
}
.clone-save-blocking-warning {
margin: 0 0 20px;
font-size: 14px;
color: #e74c3c;
font-weight: bold;
line-height: 1.5;
}
#clone-save-blocking-ui.is-complete .clone-save-blocking-warning {
display: none;
}
.clone-save-status-text {
margin: 0 0 8px;
font-size: 15px;
color: #f1c40f;
font-weight: bold;
line-height: 1.5;
}
.clone-save-detail-text {
margin: 0 0 16px;
font-size: 13px;
color: #aaa;
line-height: 1.5;
min-height: 1.2em;
word-break: break-all;
}
.clone-save-progress-bg {
width: 100%;
height: 6px;
background: #444;
border-radius: 3px;
overflow: hidden;
margin-bottom: 8px;
}
.clone-save-progress-fill {
width: 0%;
height: 100%;
background: #8e44ad;
transition: width 0.25s ease;
}
#clone-save-blocking-ui.is-complete .clone-save-progress-fill {
background: #27ae60;
}
.clone-save-percent-text {
margin: 0;
font-size: 12px;
color: #ccc;
}