/* FICS-AS 界面克隆组件样式——语义直译软件 QSS（theme.py）： * 颜色全部走 tokens.css 的 --fs-* 变量；改主题换 [data-theme] 即可。 */ /* TOKENS 导出缺 ink2/soft2（theme.py 有值未进导出）——此处补，双主题 */ :root { --fs-ink2: #6b7280; --fs-accent-soft2: #dbe9fd; } [data-theme='dark'] { --fs-ink2: #a89a88; --fs-accent-soft2: #41321f; } * { box-sizing: border-box; margin: 0; } html, body { height: 100%; background: var(--fs-border); overflow: hidden; } #viewport { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } #stage { width: 1920px; height: 1080px; flex: none; background: var(--fs-bg); font-family: "Microsoft YaHei", "Segoe UI", "PingFang SC", sans-serif; font-size: 14px; color: var(--fs-ink); display: flex; flex-direction: column; transform-origin: center center; } /* ── 标题栏 ── */ #titlebar { height: 34px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 12px; background: var(--fs-panel); border-bottom: 1px solid var(--fs-border); font-size: 13px; color: var(--fs-ink2); } #titlebar .app { color: var(--fs-ink); font-weight: 600; } #titlebar .proj { color: var(--fs-ink2); } #titlebar .winbtns { margin-left: auto; display: flex; gap: 8px; color: var(--fs-ink2); font-size: 12px; } /* ── 功能区（QTabBar + #ribbonBand + navBar 三行）── */ #ribbon { flex: none; background: var(--fs-panel); border-bottom: 1px solid var(--fs-border); } #ribtabs { display: flex; padding: 6px 10px 0; } #ribtabs button { padding: 8px 18px; margin-right: 3px; border: 1px solid var(--fs-border); border-bottom: none; border-radius: 8px 8px 0 0; background: var(--fs-panel2); color: var(--fs-ink2); font-size: 13px; font-family: inherit; cursor: pointer; } #ribtabs button:hover:not(.on) { background: var(--fs-accent-soft); } #ribtabs button.on { background: var(--fs-panel); color: var(--fs-accent); font-weight: 700; border-color: var(--fs-accent); border-bottom: 1px solid var(--fs-panel); margin-bottom: -1px; } #ribband { display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; gap: 3px 4px; padding: 5px; min-height: 78px; } #ribband .tile { min-width: 86px; height: 62px; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: none; border-radius: 7px; background: transparent; color: var(--fs-ink); font-size: 11.5px; line-height: 1.25; font-family: inherit; cursor: pointer; text-align: center; } #ribband .tile:hover { background: var(--fs-accent-soft); } #ribband .tile:active { background: var(--fs-accent-soft2); } #ribband .tile:disabled { color: var(--fs-disabled); cursor: default; } #ribband .tile:disabled:hover { background: transparent; } #ribband .tile .icon { width: 24px; height: 24px; color: var(--fs-ink); } #ribband .tile .icon svg { width: 100%; height: 100%; display: block; } #ribband .tile .icon img { width: 100%; height: 100%; object-fit: contain; display: block; } /* 运行态抠的 64px 位图约束进 24px 格 */ #ribband .sep { width: 1px; height: 56px; background: var(--fs-border); margin: 4px 3px; } #ribband .section { color: var(--fs-ink2); font-size: 11.5px; font-weight: 700; padding: 0 4px; height: 62px; display: flex; align-items: center; } #navbar { display: flex; align-items: center; gap: 2px; padding: 3px 8px; border-top: 1px solid var(--fs-border); } #navbar button { display: flex; align-items: center; gap: 5px; padding: 2px 8px; border: none; border-radius: 6px; background: transparent; color: var(--fs-ink); font-size: 12px; font-family: inherit; cursor: pointer; } #navbar button:hover { background: var(--fs-accent-soft); } #navbar button.on { background: var(--fs-accent-soft2); } #navbar .sep { width: 1px; height: 16px; background: var(--fs-border); margin: 0 4px; } /* ── 主区：工作台 | 画布 | AI ── */ #main { flex: 1; display: flex; min-height: 0; } #dock_layers { width: 256px; flex: none; display: flex; flex-direction: column; background: var(--fs-panel); border-right: 1px solid var(--fs-border); } .dock-title { padding: 7px 10px; font-weight: 600; font-size: 12.5px; color: var(--fs-ink2); background: var(--fs-panel2); border-bottom: 1px solid var(--fs-border); } .dock-tabs { display: flex; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--fs-border); } .dock-tabs button { padding: 3px 12px; border-radius: 6px; border: none; background: transparent; color: var(--fs-ink2); font-size: 12px; font-family: inherit; cursor: pointer; } .dock-tabs button.on { background: var(--fs-accent-soft); color: var(--fs-accent); font-weight: 600; } #toc { flex: 1; overflow: auto; padding: 4px 2px; font-size: 12.5px; } #toc .row { display: flex; align-items: center; gap: 5px; padding: 3px 6px 3px 4px; border-radius: 5px; cursor: pointer; user-select: none; white-space: nowrap; } #toc .row:hover { background: var(--fs-accent-soft); } #toc .row .tw { width: 14px; flex: none; color: var(--fs-ink2); font-size: 9px; text-align: center; transition: transform .15s; } #toc .row.closed .tw { transform: rotate(-90deg); } #toc .group { font-weight: 600; } #toc .kids { overflow: hidden; } #toc .row input[type=checkbox] { accent-color: var(--fs-accent); width: 13px; height: 13px; flex: none; } #toc .lyr-ic { width: 14px; height: 14px; flex: none; opacity: .8; } #toc .lyr-ic img { width: 14px; height: 14px; display: block; } #canvas { flex: 1; position: relative; overflow: hidden; background: var(--fs-canvas); min-width: 0; cursor: grab; } #canvas .stack { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); aspect-ratio: 2424 / 1746; } /* 层 PNG 原比例：高撑满左右居中（QGIS 同行为） */ #canvas .stack img { position: absolute; inset: 0; width: 100%; height: 100%; } #dock_ai { width: 400px; flex: none; display: flex; flex-direction: column; background: var(--fs-panel); border-left: 1px solid var(--fs-border); } /* ── AI 助手面板（ai_panel.py 语义直译：标题行/监视行/气泡/输入/底行）── */ .ai-left { flex: 1; display: flex; flex-direction: column; gap: 6px; padding: 6px; min-height: 0; } .ai-top { display: flex; align-items: center; gap: 4px; } .ai-top b { font-size: 13px; } .ai-top .sp { flex: 1; } .ai-tbtn { border: none; background: transparent; color: var(--fs-ink); font-size: 12px; font-family: inherit; padding: 3px 8px; border-radius: 6px; cursor: pointer; } .ai-tbtn:hover { background: var(--fs-accent-soft); } .ai-monitor { border: none; text-align: left; background: var(--fs-panel2); border-radius: 6px; padding: 5px 8px; color: var(--fs-ink2); font-size: 11px; font-family: inherit; cursor: pointer; } .ai-monitor:hover { background: var(--fs-accent-soft); } .ai-chat { flex: 1; overflow: auto; display: flex; flex-direction: column; gap: 6px; padding: 4px 2px; min-height: 0; } .ai-tag { color: var(--fs-accent); font-weight: 600; font-size: 11px; margin-top: 2px; } .ai-bubble-ai { background: transparent; color: var(--fs-ink); font-size: 12.5px; line-height: 1.55; } .ai-bubble-user { background: var(--fs-accent-soft2); color: var(--fs-ink); border-radius: 9px; padding: 7px 10px; font-size: 12.5px; line-height: 1.5; align-self: flex-end; max-width: 85%; } .ai-tool { align-self: flex-start; color: var(--fs-ink2); font-size: 12px; background: var(--fs-accent-soft); border-radius: 5px; padding: 4px 9px; } .ai-input { flex: none; min-height: 64px; max-height: 64px; border: 1px solid var(--fs-border); border-radius: 8px; background: var(--fs-bg); padding: 7px 9px; font-size: 12.5px; color: var(--fs-ink2); } .ai-input::before { content: attr(data-ph); color: var(--fs-disabled); } .ai-bottom { display: flex; align-items: center; gap: 6px; } .ai-model { border: 1px solid var(--fs-border); border-radius: 6px; background: var(--fs-bg); color: var(--fs-ink); font-size: 11.5px; padding: 3px 8px; white-space: nowrap; } .ai-state { flex: 1; color: var(--fs-ink2); font-size: 12px; } .ai-send { border: none; border-radius: 7px; background: var(--fs-accent); color: var(--fs-sel-text); font-size: 12.5px; font-family: inherit; padding: 5px 16px; cursor: pointer; } .ai-send:hover { background: var(--fs-accent-hover); } .ai-send:active { background: var(--fs-accent-press); } /* ── 书签栏（custom_panel.BookmarkStrip 语义：画布右缘竖条 46px，竖排书签 * ≤6 字；点书签 toggle 滑出面板 PANEL_W=210/高 80%/左圆角 10，覆盖画布）── */ #bstrip { position: absolute; top: 0; bottom: 0; right: 0; width: 46px; background: var(--fs-panel); border-left: 1px solid var(--fs-border); display: flex; flex-direction: column; align-items: stretch; padding: 6px 0; gap: 6px; z-index: 60; } #bstrip .bm { flex: none; width: 40px; margin: 0 3px; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 0; border-radius: 9px 0 0 9px; /* 左圆角标签形（软件 paintPath 同款）*/ background: var(--fs-panel2); border: 1px solid var(--fs-border); color: var(--fs-ink); cursor: pointer; user-select: none; font-size: 11.5px; line-height: 17px; font-family: inherit; } #bstrip .bm:hover { background: var(--fs-accent-soft); } #bstrip .bm.on { background: var(--fs-accent-soft); border-color: var(--fs-accent); color: var(--fs-accent); } #bstrip .seg { flex: none; width: 40px; margin: 0 3px; height: 18px; display: flex; align-items: center; gap: 4px; color: var(--fs-ink2); font-size: 10px; font-weight: 700; user-select: none; } #bstrip .seg::before, #bstrip .seg::after { content: ""; flex: 1; height: 1px; background: var(--fs-border); } #bstrip .bm.add { padding: 8px 0; background: var(--fs-panel2); color: var(--fs-ink2); font-size: 15px; margin-top: auto; } #bpanel { position: absolute; right: 46px; top: 8px; bottom: 20%; width: 210px; background: var(--fs-panel); border: 1px solid var(--fs-border); border-right: none; border-radius: 10px 0 0 10px; padding: 10px 9px; display: none; flex-direction: column; gap: 6px; z-index: 59; box-shadow: -2px 2px 8px rgba(0,0,0,.08); } #bpanel.open { display: flex; } #bpanel h4 { font-size: 12px; color: var(--fs-ink); } #bpanel .tool { border: 1px solid var(--fs-border); border-radius: 8px; background: var(--fs-bg); padding: 7px 8px; cursor: pointer; } #bpanel .tool:hover { border-color: var(--fs-accent); background: var(--fs-accent-soft); } #bpanel .tool b { display: block; font-size: 11.5px; color: var(--fs-ink); } #bpanel .tool i { font-style: normal; font-size: 10.5px; color: var(--fs-ink2); } #bpanel .tip { font-size: 10.5px; color: var(--fs-disabled); line-height: 1.5; } /* ── 状态栏 ── */ #statusbar { height: 24px; flex: none; display: flex; align-items: center; gap: 14px; padding: 0 12px; background: var(--fs-panel); border-top: 1px solid var(--fs-border); font-size: 11.5px; color: var(--fs-ink2); } #statusbar .badge { background: var(--fs-accent-soft); color: var(--fs-accent); font-weight: 600; padding: 1px 8px; border-radius: 4px; } #statusbar .coord { margin-left: auto; font-family: Consolas, monospace; }