/* ================= 全局布局与顶栏 ================= */ body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; background-color: #000000; color: var(--td-text, #e8e8ea); overflow: hidden; height: 100vh; margin: 0; padding: 0; display: flex; flex-direction: column; /* 纵向排布：1. 头部 2. 工作区 */ } /* 这就是救命的横向包裹层 */ .main-workspace { display: flex; /* 让里面的 左、中、右 三个面板横向并排 */ flex-direction: row; flex: 1; /* 自动撑满扣除头部以后的所有屏幕高度 */ overflow: hidden; width: 100%; } /* 顶部全局导航栏 */ .app-header { height: 50px; flex-shrink: 0; background: rgba(10, 12, 16, 0.95); border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; justify-content: space-between; align-items: center; padding: 0 20px; z-index: var(--td-z-header, 100); } .app-brand { display: flex; align-items: baseline; gap: 8px; } .brand-logo { font-size: 18px; font-weight: 800; color: #ffffff; letter-spacing: 1px; } .brand-tag { font-size: 11px; color: #FF9933; font-weight: 600; letter-spacing: 2px; } .app-user-zone { display: flex; align-items: center; gap: 20px; } .header-tools-group { display: flex; align-items: center; gap: 14px; } .pin-btn-wrap { position: relative; } .action-icon-circle { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; flex-shrink: 0; } .action-icon-circle:hover { filter: brightness(1.3); transform: scale(1.05); } .action-icon-circle svg { width: 18px; height: 18px; } .avatar-svg { width: 18px; height: 18px; flex-shrink: 0; } /* 下拉菜单兜底隐藏（各页面内联样式有完整定义时会被覆盖） */ .annotation-dropdown:not(.show) { display: none !important; } .auth-status { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #0bd318; font-family: monospace; letter-spacing: 1px;} .pulse-dot { width: 6px; height: 6px; background-color: #0bd318; border-radius: 50%; animation: heartBeat 2s infinite; } @keyframes heartBeat { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.2); opacity: 1; } } .btn-disconnect { background: transparent; color: rgba(255, 59, 48, 0.8); border: 1px solid rgba(255, 59, 48, 0.3); display: flex; align-items: center; gap: 6px; padding: 4px 12px; font-size: 12px; border-radius: 4px; cursor: pointer; transition: all 0.2s; } .btn-disconnect:hover { background: rgba(255, 59, 48, 0.15); color: #ff3b30; border-color: #ff3b30; box-shadow: 0 0 10px rgba(255, 59, 48, 0.4); transform: scale(1.02); } /* 苹果风格基础 CSS & 全局设定 */ :root { --bg-dark: #000000; --panel-bg: rgba(28, 28, 30, 0.7); --border-color: rgba(255, 255, 255, 0.18); --text-primary: var(--td-text, #e8e8ea); --text-secondary: #D3D3D3; --accent-color: #0bd318; } * { box-sizing: border-box; margin: 0; padding: 0; user-select: none; } #canvas-container { position: relative; overflow: hidden; flex: 1; } #canvas-container canvas { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; outline: none !important; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "PingFang SC", "Microsoft YaHei", sans-serif; background-color: var(--bg-dark); color: var(--text-primary); overflow: hidden; height: 100vh; display: flex; } /* ---------------- 左中面板结构（右侧面板已随布局重构移除） ---------------- */ .panel-left { width: 10%; min-width: 150px; border-right: 1px solid var(--border-color); background: var(--panel-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); padding: 20px; display: flex; flex-direction: column; z-index: 10; } .panel-center { flex: 1; display: flex; flex-direction: column; position: relative; min-width: 0; } .panel-title { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, 0.6); letter-spacing: 1px; margin-bottom: 12px; text-transform: uppercase; } /* ----- 宏观卡片 ----- */ .stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 10px; } /* 压缩 padding 将卡片拍扁，减少冗余留白 */ .stat-card { background: linear-gradient(145deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%); border: 1px solid rgba(255,255,255,0.05); border-radius: 12px; padding: 10px 14px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: center; box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: transform 0.2s; } .stat-card:hover { transform: translateY(-2px); background: linear-gradient(145deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 100%); } .stat-val { font-size: 20px; font-weight: 700; color: #ffffff; letter-spacing: 0.5px; display: flex; align-items: baseline; gap: 4px; } .stat-val span { font-size: 11px; font-weight: 500; color: #ffffff; opacity: 0.7; } /* 缩短文字与数字之间的间距 margin-top: 3px */ .stat-label { font-size: 12px; color: rgba(255, 255, 255, 0.85); margin-top: 3px; font-weight: 500; letter-spacing: 0.5px; } /* ----- 底部 BOM 表 ----- */ .sub-panel-2 { flex: 1; display: flex; flex-direction: column; min-height: 0; } .bom-header, .bom-row { display: grid; grid-template-columns: 24px 0.7fr 0.7fr 1.2fr 1.3fr 1.3fr 1.1fr 0.7fr; padding-left: 5px; padding-right: 5px; column-gap: 2px; } .bom-header div, .bom-row div { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 提亮字体颜色至 0.75，并加粗字重，让层级、型号看得清 */ .bom-header { font-size: 12px; color: rgba(255, 255, 255, 0.75); padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); text-align: left; font-weight: 600; letter-spacing: 0.5px;} .bom-row { padding-top: 8px; padding-bottom: 8px; font-size: 12px; color: #cccccc; font-family: tabular-nums; text-align: left; background: rgba(255, 255, 255, 0.015); border-radius: 6px; border: 1px solid transparent; cursor: pointer; transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .bom-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding-right: 4px; margin-top: 2px; padding-bottom: 60px; } .bom-scroll::-webkit-scrollbar { width: 6px; } .bom-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.1); border-radius: 3px; } .bom-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 3px; } .bom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.4); } .bom-row:hover, .bom-row.hovered { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); color: #ffffff; } .bom-row.active { background: var(--td-primary-soft, rgba(255, 153, 51, 0.1)) !important; border: 1px solid var(--td-primary-border, rgba(255, 153, 51, 0.3)); color: var(--td-primary-text, #ff9933) !important; font-weight: 600; } /* ----- [项目树重构] 顶部形态长廊已删除，屏幕卡片迁入左栏树②（样式见 styles/panel-tree.css） ----- */ .module-card { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transition: transform 0.15s var(--td-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); padding-bottom: 5px; width: max-content; cursor: pointer; position: relative;} /* 增加双击提示微光 */ .module-card::after { content: "双击看像素"; position: absolute; top: 5px; /* 初始位置稍微往上坐一点，避免挡住边框 */ font-size: 10px; /* 稍微调大了一点点，你可以按需改回8px */ color: rgba(255, 255, 255, 0.55); opacity: 0; transition: 0.2s ease-out; /* 让浮出动画更丝滑 */ white-space: nowrap; pointer-events: none; /* 防止鼠标指针卡在字上产生闪烁 */ } .module-card:hover::after { opacity: 0.8; top: -16px; /* 【核心修改】：改成 -12px（或其他更大的负数），字就会飞得更高 */ } .module-card.active { transform: scale(1.1); transform-origin: bottom center; } .module-card.hovered .module-svg polygon { fill: var(--td-primary-soft, rgba(255, 153, 51, 0.18)); stroke: var(--td-primary, #ff9933); stroke-width: 2; } .module-card.hovered .module-svg text { fill: var(--td-primary, #ff9933); } .module-card.hovered .module-qty { color: var(--td-primary, #ff9933); } .module-svg { display: flex; align-items: center; justify-content: center; margin-bottom: 8px; } .module-svg svg { overflow: visible; } .module-svg polygon { fill: rgba(255, 255, 255, 0.08); stroke: var(--text-secondary); stroke-width: 1.5; transition: fill 0.08s, stroke 0.08s, filter 0.08s; } .module-card.active .module-svg polygon { fill: var(--td-primary, #FF9933); stroke: #ffffff; stroke-width: 2; } .module-svg text { fill: #ffffff; font-size: 13px; font-weight: bold; text-anchor: middle; dominant-baseline: central; pointer-events: none; } .module-card.active .module-svg text { fill: #000000; } .module-qty { font-size: 12px; color: var(--text-secondary); font-family: tabular-nums; font-weight: 600; transition: color 0.08s; } .module-card.error-card .module-svg polygon { stroke: #ff3333 !important; stroke-width: 2px !important; animation: pulseError 1.2s infinite; } .module-card.error-card .module-svg text { fill: #ff3333 !important; font-weight: bold; animation: pulseError 1.2s infinite; } .module-card.error-card.active .module-svg polygon { stroke: #ff0000 !important; stroke-width: 2.5px !important; fill: rgba(255, 0, 0, 0.15) !important; filter: drop-shadow(0 0 8px rgba(255, 0, 0, 0.8)); animation: none; } @keyframes pulseError { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 51, 51, 0.8)); } 50% { opacity: 0.4; filter: drop-shadow(0 0 2px rgba(255, 51, 51, 0.3)); } } /* ----- 中间3D画布区 ----- */ .viewport-container { flex: 1; position: relative; background-color: #000; overflow: hidden; } /* [视窗控件重排] 视图按钮条：3D 视窗右上角，从上往下竖排，无底色（选中态用主题标志色） */ .view-controls { position: absolute; top: 14px; right: 14px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; z-index: 20; } /* [布局重构] 操作提示条：3 秒后淡出，问号按钮可随时呼出（JS 在 left-panel.js） */ .canvas-hint { position: absolute; right: 56px; bottom: 20px; color: var(--td-text-2, rgba(255, 255, 255, 0.7)); font-size: var(--td-font-xs, 11px); z-index: 20; pointer-events: none; text-shadow: 0 1px 4px rgba(0,0,0,0.8); background: rgba(0,0,0,0.25); padding: 5px 12px; border-radius: var(--td-radius-md, 8px); letter-spacing: 0.5px; transition: opacity 0.4s var(--td-ease, ease); } .canvas-hint.is-faded { opacity: 0; } .canvas-hint-btn { position: absolute; right: 20px; bottom: 18px; width: 24px; height: 24px; z-index: 21; border-radius: 50%; border: 1px solid var(--td-border, rgba(255,255,255,0.2)); background: rgba(0,0,0,0.3); color: var(--td-text-2, rgba(255,255,255,0.6)); font-size: 12px; line-height: 1; cursor: pointer; transition: color var(--td-dur-fast, 0.15s) var(--td-ease), background var(--td-dur-fast, 0.15s) var(--td-ease); } .canvas-hint-btn:hover { color: var(--td-text, #ffffff); background: rgba(255,255,255,0.12); } .btn-view { background: transparent; border: none; color: var(--text-secondary); font-size: 12px; font-weight: 500; cursor: pointer; padding: 5px 8px; border-radius: 8px; transition: color 0.2s ease; text-shadow: 0 1px 3px rgba(0,0,0,0.5); } .btn-view:hover { color: var(--text-primary); } /* [视窗控件重排] 选中态用主题标志色（橙），无底色 */ .btn-view.active { background: transparent; color: var(--td-primary, #ff9933); } .divider { width: 1px; background: rgba(255,255,255,0.1); margin: 4px 2px; } /* ----- 左侧输入控制区 UI ----- */ .placeholder-title { font-size: 13px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); margin-bottom: 16px; border-bottom: 1px solid var(--border-color); padding-bottom: 8px; } .control-group { margin-bottom: 20px; } .control-group label { display: block; font-size: 13px; color: #d1d1d6; margin-bottom: 6px; letter-spacing: 0.5px; font-weight: 500; } .input-container { display: flex; align-items: stretch; background: rgba(0, 0, 0, 0.4); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; height: 30px; transition: border 0.2s ease; } .input-container:focus-within { border-color: #ffffff; } .input-container input { flex: 1; background: transparent; border: none; color: var(--text-primary); font-size: 14px; padding: 0 8px; outline: none; width: 100%; font-family: "SF Pro Text", "Helvetica Neue", sans-serif; } .input-container input[type="number"]::-webkit-inner-spin-button, .input-container input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .spin-controls { display: flex; flex-direction: row; width: 56px; background: rgba(255, 255, 255, 0.08); } .spin-btn { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: bold; color: var(--text-secondary); cursor: pointer; user-select: none; transition: background 0.1s, color 0.1s; } .spin-btn:first-child { border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } .spin-btn:hover { background: rgba(255, 255, 255, 0.2); color: var(--text-primary); } .spin-btn:active { background: rgba(255, 255, 255, 0.3); } /* ----- 滑块 ----- */ .slider-container { margin-top: 10px; padding-top: 15px; border-top: 1px dotted var(--border-color); } .slider-wrapper { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .slider-wrapper input[type="range"] { flex: 1; -webkit-appearance: none; background: transparent; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); outline: none; cursor: pointer; } .slider-wrapper input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text-primary); cursor: pointer; box-shadow: 0 0 5px rgba(0,0,0,0.5); transition: transform 0.1s; } .slider-wrapper input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.2); } .slider-value { font-size: 12px; color: var(--text-primary); width: 32px; text-align: right; font-variant-numeric: tabular-nums; } /* ----- 警告弹窗 ----- */ #toast-message { position: absolute; top: 30px; left: 50%; transform: translateX(-50%) translateY(-20px); background: rgba(30, 30, 35, 0.85); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); border: 1px solid var(--td-primary-border, rgba(255, 153, 51, 0.4)); color: #ffffff; font-size: 15px; letter-spacing: 0.5px; display: flex; align-items: center; justify-content: center; line-height: 1; padding: 12px 24px 14px 24px; border-radius: 30px; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.6); z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.3s, transform 0.3s; } #toast-message.toast-fatal-error { border: 1px solid rgba(255, 51, 51, 0.8) !important; box-shadow: 0 10px 30px rgba(255, 51, 51, 0.3) !important; } #toast-message.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } .toast-icon { font-size: 19px; display: flex; align-items: center; line-height: 1; } /* ----- 工具按钮 ----- */ .bottom-actions { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--border-color); display: flex; gap: 10px; flex-direction: column; } /* 恢复橙色文字(var(--text-primary))，底色保留加深质感 */ .btn-io { flex: 1; background: rgba(150, 150, 160, 0.2); border: 1px solid rgba(255,255,255,0.25); color: var(--text-primary); padding: 10px 0; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 500; transition: all 0.2s; display: flex; justify-content: center; align-items: center; gap: 5px; text-shadow: 0 1px 3px rgba(0,0,0,0.5);} /* 鼠标悬停时，文字才像通电一样亮成纯白 */ .btn-io:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.3); color: #ffffff; border-color: rgba(255,255,255,0.5) } /* ================= 【新增】：80% 全屏尺寸的三十三维检视弹窗 ================= */ .pixel-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: var(--td-z-overlay, 300); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; } .pixel-overlay.show { opacity: 1; pointer-events: auto; } .pixel-modal { width: 80%; height: 80%; background: linear-gradient(135deg, rgba(20, 20, 25, 0.95) 0%, rgba(10, 10, 12, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; box-shadow: var(--td-shadow-lg, 0 20px 50px rgba(0,0,0,0.6)); display: flex; flex-direction: column; overflow: hidden; transform: scale(0.97); transition: transform 0.3s var(--td-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } .pixel-overlay.show .pixel-modal { transform: scale(1); } .pixel-header { height: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: space-between; padding: 0 30px; } .pixel-title { font-size: 16px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 15px;} /* 将原本胡乱覆盖所有 span 的规则，限定死只给右侧的胶囊标签用 */ #pixel-modal-info { font-size: 12px; color: #ffffff; background: rgba(255,255,255,0.15); padding: 4px 10px; border-radius: 20px;} .pixel-close { background: none; border: none; color: #888; font-size: 36px; cursor: pointer; transition: color 0.2s; line-height: 1;} .pixel-close:hover { color: #f33; } .pixel-body { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } /* 替代之前的 canvas，变成一个铺满并带有星空深渊感的 3D 托盘 */ #pixel-3d-container { width: 100%; height: 100%; background: radial-gradient(circle at center, #2c3142 0%, #0a0d14 100%); cursor: grab; } #pixel-3d-container:active { cursor: grabbing; } /* 按住平移/旋转时的抓取手势 */ /* 【新增】：拼缝图表 HUD 样式 */ /* ================= 一体式雷达舱样式 ================= */ #seam-chart-hud { position: absolute; top: 20px; left: 20px; width: 560px; height: 400px; background: rgba(10, 13, 20, 0.95); /* 稍微加深了不透明度防透 */ border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; /* 【核心修复】：当我是大图形态时，我有 50 的天王老子特权，绝对压死旁边的小组件！ */ z-index: 50 !important; pointer-events: auto; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform-origin: top left; transition: all 0.3s var(--td-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } /* 状态 1：缩微为按键 */ #seam-chart-hud.hud-mini { width: 165px; height: 100px; background: rgba(40, 40, 40, 0.7); border-radius: 8px; cursor: pointer; /* 当收缩成平时的小胶囊时，乖乖回到普通的层级 20 */ z-index: 20 !important; } #seam-chart-hud.hud-mini:hover { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.35); } /* 顶部标题栏 */ .radar-expanded-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 16px 14px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: background 0.2s; } #seam-chart-hud.hud-mini .radar-expanded-header { display: none; } .radar-expanded-header:hover { background: rgba(255,255,255,0.04); } #seam-chart-hud.hud-mini .radar-expanded-header { display: none; } /* 内容区 (让画布自适应填满剩余空间) */ .radar-body { flex: 1; display: flex; min-height: 0; overflow: hidden; align-items: stretch; /* 强制拉伸填满 */ } #seam-chart-hud:not(.hud-mini) .radar-body { padding-top: 10px; } /* 缩微字样 */ .radar-mini-text { display: none; font-size: 12px; font-weight: 500; color: #D3D3D3; white-space: nowrap; padding-left: 10px; padding-right: 6px; pointer-events: none; } #seam-chart-hud.hud-mini .radar-mini-text { display: block; } #seamChartCanvas { display: block; width: 100%; height: 100%; margin: 0 !important; /* 强制归零，拒绝一切偏移 */ } /* 状态隐藏：当微观时，直接隐藏掉顶部的标题 */ #seam-chart-hud.hud-mini .panel-title { display: none; } .hud-title { font-size: 12px; color: rgba(255, 255, 255, 0.6); padding: 6px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } /* 约束画布，强制在标题下方留白，绝不越位重叠 */ #seamChartCanvas { display: block; } /* ================= 工业级内嵌倒角方块倒勾 ================= */ /* 1. 隐藏原生并绘制冷灰色外壳 */ input[type="checkbox"].seam-chk, input[type="checkbox"]#chk-all-seams { appearance: none; -webkit-appearance: none; width: 14px; height: 14px; margin: 0; padding: 0; background: rgba(255, 255, 255, 0.05); /* 极其深沉的基底 */ border: 1px solid rgba(255, 255, 255, 0.25); /* 默认未选中的灰边 */ border-radius: 3px; /* 外框圆角 3px */ cursor: pointer; position: relative; outline: none; transition: border-color 0.2s ease; display: inline-flex; justify-content: center; align-items: center; } /* 2. 鼠标划过的边框提亮反应 */ input[type="checkbox"].seam-chk:hover, input[type="checkbox"]#chk-all-seams:hover { border-color: rgba(255, 255, 255, 0.5); /* 滑过时边框变白一些 */ } /* 3. 在中间准备一个橙色的倒角正方形核芯 (默认按压缩小隐身) */ input[type="checkbox"].seam-chk::after, input[type="checkbox"]#chk-all-seams::after { content: ""; width: 8px; /* 内芯尺寸 */ height: 8px; background-color: var(--td-primary, #ff9933); /* 橙色内核 */ border-radius: 1.5px; /* 等比例缩小的倒角 (外壳3px，内芯1.5px) */ transition: transform 0.2s var(--td-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); transform: scale(0); /* 默认隐藏：缩放为0 */ } /* 4. 选中状态：外框不变色，仅仅让内核方块呈现出来 */ input[type="checkbox"].seam-chk:checked::after, input[type="checkbox"]#chk-all-seams:checked::after { transform: scale(1); /* 以 1:1 姿态呈现 */ } /* ----- 头部【全选框】略微放大，以示父级层级区别 ----- */ input[type="checkbox"]#chk-all-seams { width: 16px; height: 16px; border-radius: 4px; } input[type="checkbox"]#chk-all-seams::after { width: 10px; height: 10px; border-radius: 2px; } /* ================= 2D 物理放样图 (只留微缩图的强定位) ================= */ #uv-map-hud { position: absolute; top: 20px; left: 195px; /* 紧贴雷达图右侧 */ width: 165px; height: 100px; background: rgba(40, 40, 40, 0.7); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; z-index: 20; cursor: pointer; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.5); transition: all 0.2s; } #uv-map-hud:hover { border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.15); } #uv-map-hud .radar-mini-text { display: none; } .btn-modal-large { padding: 6px 20px !important; /* 放大按钮：上下8px，左右24px的内边距 */ font-size: 14px !important; /* 字体放大到 12px */ background-color: rgba(120, 120, 120, 0.35) !important; /* 你要的偏灰的高级底色 */ border-radius: 6px; } /* 保证鼠标放上去和激活时，依然能优先触发外部统一的亮起特效 */ .btn-modal-large.active, .btn-modal-large:hover { background-color: var(--td-primary-soft, rgba(255, 153, 51, 0.25)) !important; border-color: var(--td-primary, #ff9933) !important; color: var(--td-primary-text, #ff9933) !important; } /* 二维码占位框 */ .qr-placeholder { width: 110px; height: 110px; background: #fff; border-radius: 8px; } /* 二维码文本 */ .qr-text { flex: 1; font-size: 15px; color: #aaa; line-height: 1.8; letter-spacing: 1px; } /* 用户下拉菜单标题 */ .user-dropdown-title { font-size: 20px !important; font-weight: 800; color: #fff; } /* 下拉框样式 */ .custom-select { width: 100%; background: transparent; border: none; color: #fff; outline: none; font-size: 14px; padding: 8px; } /* ================= 云档案弹窗：极简滚动条与卡片侵入特效 ================= */ /* 专属纤细滚动条 */ #cloud-archive-overlay .pixel-body { padding-right: 15px !important; /* 给滚动条留点呼吸空间 */ } #cloud-archive-overlay .pixel-body::-webkit-scrollbar { width: 4px; } #cloud-archive-overlay .pixel-body::-webkit-scrollbar-track { background: transparent; } #cloud-archive-overlay .pixel-body::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } #cloud-archive-overlay .pixel-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ================= 微信风卡片侵入特效 (纯点击触发) ================= */ .archive-card { position: relative; width: 100%; /* 极简底部边线，去掉四周包围方框 */ background: rgba(255, 255, 255, 0.02); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 20px; color: #eee; display: flex; flex-direction: column; gap: 8px; overflow: hidden; cursor: pointer; transition: background 0.2s; } .archive-card:hover { background: rgba(255, 255, 255, 0.05); /* 浅浅的交互反馈 */ } .archive-card .archive-name { font-weight: 500; font-size: 16px; letter-spacing: 0.5px; color: #fff; } .archive-card .archive-meta { font-size: 12px; color: rgba(255,255,255,0.4); font-family: monospace; } /* 绝对定位在右侧的控制台：严丝合缝填充满整个右边 */ .archive-actions { position: absolute; right: 0; top: 0; bottom: 0; height: 100%; display: flex; align-items: stretch; /* 让里面的按钮 100% 填满高度 */ transform: translateX(100%); /* 默认 100% 藏在右外侧 */ transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); /* 坚实且果断的滑出阻尼 */ z-index: 10; } /* ⚠️ 当通过 JS 给卡片添加这个类时，按钮组滑入 */ .archive-card.active-swipe .archive-actions { transform: translateX(0); } /* 两个微信式满高色块按钮 */ .btn-swipe-op { border: none; padding: 0 26px; font-size: 15px; font-weight: 600; cursor: pointer; letter-spacing: 2px; display: flex; align-items: center; justify-content: center; transition: filter 0.2s; } .btn-swipe-op:active { filter: brightness(0.85); /* 按下时稍微变暗变真实 */ } .btn-swipe-op.load { background: #0bd318; color: #000; } /* 微信同款绿 */ .btn-swipe-op.del { background: #ff3b30; color: #fff; } /* ios同款红 */ /* ================= 云端总线：上半部操作台样式 ================= */ .cloud-hub-top { flex-shrink: 0; padding: 20px; background: rgba(255, 255, 255, 0.02); /* 发光的阻尼分界线 */ border-bottom: 2px solid; border-image-source: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent); border-image-slice: 1; } .hub-label { font-size: 12px; color: #888; font-weight: bold; letter-spacing: 1px; margin-bottom: 10px; } .hub-input-group { display: flex; gap: 12px; } .hub-input-group input { flex: 1; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 16px; padding: 0 16px; border-radius: 6px; transition: all 0.2s; outline: none; } .hub-input-group input:focus { border-color: var(--td-primary, #ff9933); } .hub-btn { padding: 0 24px; height: 42px; border-radius: 6px; font-weight: 600; font-size: 14px; cursor: pointer; border: 1px solid; transition: all 0.2s; display: flex; align-items: center; justify-content: center; } .hub-btn.save { background: rgba(255, 255, 255, 0.06); color: var(--td-text, #e8e8ea); border-color: rgba(255, 255, 255, 0.2); } .hub-btn.save:hover { background: rgba(255, 255, 255, 0.12); } .hub-btn.save-as { background: var(--td-primary-soft, rgba(255, 153, 51, 0.1)); color: var(--td-primary, #ff9933); border-color: var(--td-primary-border, rgba(255,153,51,0.4)); } .hub-btn.save-as:hover { background: var(--td-primary-soft, rgba(255, 153, 51, 0.25)); } /* 下层滚动条收口（复用） */ .cloud-hub-bottom::-webkit-scrollbar { width: 4px; } .cloud-hub-bottom::-webkit-scrollbar-track { background: transparent; } .cloud-hub-bottom::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); border-radius: 4px; } .cloud-hub-bottom::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); } /* ================= 宽度修正补丁 ================= */ /* 迫使底部的滚动包裹区与列表容器，必须 100% 占满，不受短文字向内收缩的影响 */ .cloud-hub-bottom { width: 100%; box-sizing: border-box; } #archive-list-container { width: 100%; align-items: stretch; /* 让里面的每一行卡片横向强行拉满 */ } /* 确保内部卡片不会越界，并且严丝合缝 */ .archive-card { box-sizing: border-box; width: 100% !important; } /* ================= 顶部下拉菜单里的模块条目样式 ================= */ .action-menu-item { padding: 10px 16px; font-size: 14px; color: #ccc; cursor: pointer; transition: 0.2s; display: flex; align-items: center; border-radius: 6px; margin: 4px 6px; font-weight: 500; } .action-menu-item:hover { background: rgba(255, 255, 255, 0.08); color: #ffffff; } /* ================= 下拉菜单内极细进度条 ================= */ .action-menu-item { position: relative; overflow: hidden; /* 防止进度条超出圆角 */ } /* ================= 智能拦截版菜单进度条 ================= */ .action-menu-item { position: relative; overflow: hidden; } .menu-progress-bar { position: absolute; bottom: 0; left: 0; height: 3px; /* 加粗，质感更好 */ background: #FF9933; /* 主基色 */ width: 0%; opacity: 0; pointer-events: none; /* 核心：去掉强制动画，完全靠 js 修改宽度触发阻尼过渡 */ transition: opacity 0.3s ease; } /* ================= 自定义头像悬浮文字（避开鼠标版） ================= */ .avatar-hover { position: relative; cursor: pointer; } .avatar-hover::after { content: attr(data-name); position: absolute; /* 🚀 核心改动：去掉原先居中的死板逻辑，改到鼠标（头像）的右下角盲区 */ top: 28px; /* 刚好比鼠标箭头低一点 */ left: 32px; /* 往右平移，彻底离开鼠标箭头的遮挡范围 */ transform: none; /* 删掉 -50% 的居中补偿 */ white-space: nowrap; font-size: 11px; font-weight: 500; color: #e0e0e0; background: transparent; border: none; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; z-index: var(--td-z-dropdown, 200); } .avatar-hover:hover::after { opacity: 1; } /* ================= 顶栏中央子系统切换导航 ================= */ .top-nav-matrix { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 40px; /* 层级收口：位于顶栏内部，使用统一下拉层级令牌 */ z-index: var(--td-z-dropdown, 200); pointer-events: auto; } .matrix-item { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.4); text-decoration: none; letter-spacing: 2px; transition: all 0.2s ease-out; /* 🚀 核心修复：强制鼠标悬停时变成小手 */ cursor: pointer !important; pointer-events: auto; } .matrix-item:hover { color: rgba(255, 255, 255, 0.9); } /* 当前激活状态：品牌色纯色，无发光 */ .matrix-item.active { color: var(--td-primary-text, #ff9933); font-weight: 700; /* 核心封锁：禁止一切鼠标交互，防止误触刷新丢失当前参数 */ pointer-events: none !important; cursor: default !important; } /* ================= 顶部纯文字返回按钮 ================= */ .btn-back-home { text-decoration: none; color: rgba(255, 255, 255, 0.4); /* 默认暗灰，极度克制 */ font-size: 13px; font-weight: 600; letter-spacing: 1px; padding: 4px 8px; /* 缩小内边距，让文字更紧凑 */ border-radius: 4px; transition: all 0.2s ease; } /* 交互反馈：悬浮变白，伴随向左退出暗示 */ .btn-back-home:hover { color: #ffffff; background: rgba(255, 255, 255, 0.08); transform: translateX(-3px); /* 隐晦的向左返回物理暗示 */ } /* ================ 新增：多屏幕实例管理 Tabs ================ */ .screen-tabs-container { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; margin-bottom: 20px; } .screen-tab { padding: 6px 12px; font-size: 12px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: 6px; cursor: pointer; color: #ccc; transition: all 0.2s; display: flex; align-items: center; gap: 6px; } .screen-tab.active { background: var(--td-primary-soft, rgba(255, 153, 51, 0.12)); border-color: var(--td-primary-border, rgba(255, 153, 51, 0.5)); color: var(--td-primary-text, #ff9933); } .screen-tab:hover:not(.active) { background: rgba(255,255,255,0.1); } .btn-add-screen { padding: 6px 10px; border: 1px dashed var(--td-primary-border, rgba(255,153,51,0.5)); border-radius: 6px; background: transparent; color: var(--td-primary, #ff9933); cursor: pointer; transition: 0.2s; } .btn-add-screen:hover { background: var(--td-primary-soft, rgba(255,153,51,0.1)); } .btn-del-screen { font-size: 14px; color: #ff4466; margin-left: 5px; cursor: pointer; } .btn-del-screen:hover { color: #ff0000; } /* 右上角用户控制面板已抽取至 styles/user-panel.css（首页与工作台共用） */ /* ============================================================ [S1 迁入自 app.html] 原