/* ============================================================
* xistudio-codex.css · v1.0 (P-4 W1 Day1)
* --------------------------------------------------------------
* 共用样式法典,从 v3-unified-macos.html v0.3+ 抽取
* 14 个完整 demo (v3-full-*.html) 共用,禁止漂移
* 作者: P-4 W1 启动批次
* 日期: 2026-05-15
*
* 包含分段:
* §1 Brand Color Tokens (色板法典 · brand-color-system v1.2)
* §2 Theme Variants A-F (6 主题级联,默认 A 玫瑰金)
* §3 Typography & Base (字号/字体/滚动条/焦点环)
* §4 Shell Layout (3 行 4 列 grid 总骨架)
* §5 Top Bar (红绿灯 + ☰ + 文件图标 + 4 主 tab + 主题切换)
* §6 Activity Bars (左 5 / 右 4 常驻 dock-icon)
* §7 View Pane & Sub Tabs (主画布壳层 + 子 tab Pill)
* §8 Drawer (悬浮 / 锁定双模式)
* §9 Bottom Bar (6 tab) + Status Bar
* §10 Common Widgets (section-title / tile / list-row / device-row / scope-card / prop-row)
* §11 Tuning Dialog (浮窗 + Tuning Dialog 通用骨架)
* §12 Float Manager Pop (浮窗管理器弹窗)
* §13 Theme Popover & Menu Dropdown
* §14 Toast / Intro Tip / Misc
* §15 Lock Mode (悬浮↔挤压 grid 切换)
*
* 不包含 (各 demo 自行内联):
* - 流图节点 .node / .canvas-edges (graph demo 专属)
* - Tuning Stack 卡片 (tuning-view demo 专属)
* - 4 联屏频谱/波形 (simulation demo 专属)
* - 4 步部署流程 (deploy demo 专属)
* - XiForge UI 设计画布 .uixx-canvas (xiforge demo 专属)
* ============================================================ */
/* ============================================================
* §1 Brand Color Tokens · brand-color-system v1.2
* ============================================================ */
:root {
/* 三主色 */
--yin: #D4A574; --yin-light: #E8C9A0; --yin-deep: #A87E4C; /* 玫瑰金 */
--xi: #9D4EDD; --xi-light: #C77DFF; --xi-deep: #6A1FA3; /* 曦紫 */
--sheng: #5DDECF; --sheng-light: #8FEDE0; --sheng-deep: #2E8D7E; /* 极光青 */
/* 夜蓝四阶 */
--night-abyss: #050812;
--night-deep: #0B1C2E;
--night-mid: #14283F;
--night-soft: #1E3A52;
/* 米珠 / 米纸 */
--pearl: #F0F4F8; --pearl-dim: #B8C5D1; --pearl-mute: #7A8A9B;
--paper: #FBFAF6; --paper-warm: #F5F2EA; --line-paper: #E8E4DA;
/* 状态 */
--status-error: #B87A6F;
/* 圆角 */
--radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px;
/* macOS 投影 */
--mac-shadow-sm: 0 1px 2px rgba(0,0,0,.08), 0 1px 1px rgba(0,0,0,.04);
--mac-shadow-md: 0 4px 16px rgba(0,0,0,.12), 0 1px 4px rgba(0,0,0,.08);
--mac-shadow-lg: 0 12px 48px rgba(0,0,0,.24), 0 4px 16px rgba(0,0,0,.16);
/* macOS 红绿灯 */
--mac-traffic-red: #FF5F57;
--mac-traffic-yellow: #FEBC2E;
--mac-traffic-green: #28C840;
/* L0-L5 6 色 (产品/IP 层级) */
--L0: #2E8D7E; --L1: #5DDECF; --L2: #E8C9A0;
--L3: #D4A574; --L4: #C77DFF; --L5: #9D4EDD;
/* 字号/密度全局缩放 */
--font-scale: 1; --density: 1;
}
/* ============================================================
* §2 Theme Variants A-F · 6 主题级联
* 默认 A · 玫瑰金 (与 :root 等价)
* ============================================================ */
/* —— A · 玫瑰金 (默认 · Hero 主题) —— */
:root, [data-theme="A"] {
--bg-0: var(--night-abyss); --bg-1: var(--night-deep); --bg-2: var(--night-mid); --bg-3: var(--night-soft);
--line: rgba(212,165,116,.18); --line-soft: rgba(212,165,116,.08);
--fg-0: var(--pearl); --fg-1: var(--pearl-dim); --fg-2: var(--pearl-mute);
--accent: var(--yin); --accent-2: var(--yin-deep); --accent-fg: #1a1611;
--info: var(--xi-light); --ok: var(--sheng); --warn: var(--yin); --err: var(--status-error);
--canvas-grid-color: rgba(212,165,116,.06); --canvas-bg: var(--night-abyss);
--node-bg: linear-gradient(180deg, var(--night-deep), var(--night-mid));
--node-border: rgba(212,165,116,.3);
--primary-btn-bg: var(--yin); --primary-btn-fg: #1a1611;
--connector-color: var(--xi);
--hero-grad: linear-gradient(180deg, #050812, #0B1C2E 50%, #14283F);
--panel-bg: rgba(11,28,46,.94); --bottom-bg: rgba(11,28,46,.94);
--activity-bg: rgba(11,28,46,.85);
--statusbar-bg: var(--night-deep); --topbar-bg: rgba(11,28,46,.85);
--frosted: blur(20px) saturate(180%);
--focus-ring: 0 0 0 3px rgba(212,165,116,.4);
}
/* —— B · 极光青 —— */
[data-theme="B"] {
--bg-0: var(--night-abyss); --bg-1: var(--night-deep); --bg-2: var(--night-mid); --bg-3: var(--night-soft);
--line: rgba(93,222,207,.16); --line-soft: rgba(93,222,207,.06);
--fg-0: var(--pearl); --fg-1: var(--pearl-dim); --fg-2: var(--pearl-mute);
--accent: var(--sheng); --accent-2: var(--sheng-deep); --accent-fg: #07241f;
--info: var(--xi-light); --ok: var(--sheng); --warn: var(--yin); --err: var(--status-error);
--canvas-grid-color: rgba(93,222,207,.08); --canvas-bg: var(--night-abyss);
--node-bg: linear-gradient(180deg, var(--night-deep), #0e2638);
--node-border: rgba(93,222,207,.35);
--primary-btn-bg: var(--sheng); --primary-btn-fg: #07241f; --connector-color: var(--xi);
--hero-grad: linear-gradient(180deg, #050812, #0B1C2E 50%, #14283F);
--panel-bg: rgba(11,28,46,.94); --bottom-bg: rgba(11,28,46,.94);
--activity-bg: rgba(11,28,46,.85);
--statusbar-bg: var(--night-deep); --topbar-bg: rgba(11,28,46,.85);
--frosted: blur(20px) saturate(180%); --focus-ring: 0 0 0 3px rgba(93,222,207,.4);
}
/* —— C · 米纸 —— */
[data-theme="C"] {
--bg-0: var(--paper); --bg-1: #ffffff; --bg-2: var(--paper-warm); --bg-3: #ECE7DA;
--line: var(--line-paper); --line-soft: #F1ECE0;
--fg-0: #2A2A2A; --fg-1: #5C5C5C; --fg-2: #8C8C8C;
--accent: var(--yin); --accent-2: var(--yin-deep); --accent-fg: #ffffff;
--info: var(--xi); --ok: var(--sheng-deep); --warn: var(--yin-deep); --err: var(--status-error);
--canvas-grid-color: #EFEAE0; --canvas-bg: #FBFAF6;
--node-bg: #ffffff; --node-border: var(--line-paper);
--primary-btn-bg: var(--yin); --primary-btn-fg: #ffffff; --connector-color: var(--xi);
--hero-grad: linear-gradient(180deg, var(--paper), var(--paper-warm));
--panel-bg: rgba(255,255,255,.96); --bottom-bg: rgba(255,255,255,.92);
--activity-bg: rgba(255,255,255,.85);
--statusbar-bg: var(--yin); --topbar-bg: rgba(255,255,255,.8);
--frosted: blur(20px) saturate(180%); --focus-ring: 0 0 0 3px rgba(212,165,116,.35);
}
/* —— D · 极简白 (Apple 系) —— */
[data-theme="D"] {
--bg-0: #ffffff; --bg-1: #ffffff; --bg-2: #f7f7f8; --bg-3: #efeff1;
--line: #e5e5e7; --line-soft: #f0f0f2;
--fg-0: #1d1d1f; --fg-1: #6e6e73; --fg-2: #a1a1a6;
--accent: #ff5d3a; --accent-2: #d94422; --accent-fg: #ffffff;
--info: #007aff; --ok: #30b86b; --warn: #ff9f0a; --err: #ff3b30;
--canvas-grid-color: #f0f0f2; --canvas-bg: #ffffff;
--node-bg: #ffffff; --node-border: #e5e5e7;
--primary-btn-bg: #1d1d1f; --primary-btn-fg: #ffffff; --connector-color: #6e6e73;
--hero-grad: linear-gradient(180deg, #ffffff, #f7f7f8);
--panel-bg: rgba(255,255,255,.96); --bottom-bg: #f7f7f8;
--activity-bg: rgba(247,247,248,.9);
--statusbar-bg: #ffffff; --topbar-bg: rgba(255,255,255,.85);
--frosted: blur(20px) saturate(180%); --focus-ring: 0 0 0 3px rgba(0,122,255,.35);
}
/* —— E · 赛博紫黑 —— */
[data-theme="E"] {
--bg-0: #060010; --bg-1: #0d0218; --bg-2: #18062a; --bg-3: #261040;
--line: rgba(199,125,255,.22); --line-soft: rgba(199,125,255,.08);
--fg-0: #e6d5ff; --fg-1: #a98dd1; --fg-2: #6f5599;
--accent: #c77dff; --accent-2: #9D4EDD; --accent-fg: #1a0033;
--info: #00f5ff; --ok: #00ff9c; --warn: #ffea00; --err: #ff2e7e;
--canvas-grid-color: rgba(157,78,221,.1); --canvas-bg: #060010;
--node-bg: linear-gradient(180deg, #18062a, #0d0218);
--node-border: rgba(199,125,255,.4);
--primary-btn-bg: linear-gradient(135deg, #c77dff, #ff2e7e); --primary-btn-fg: #1a0033;
--connector-color: #00f5ff;
--hero-grad: linear-gradient(180deg, #060010, #0d0218 50%, #18062a);
--panel-bg: rgba(13,2,24,.94); --bottom-bg: rgba(13,2,24,.94);
--activity-bg: rgba(13,2,24,.88);
--statusbar-bg: #060010; --topbar-bg: rgba(13,2,24,.85);
--frosted: blur(20px) saturate(180%); --focus-ring: 0 0 0 3px rgba(199,125,255,.5);
}
/* —— F · 毛玻璃 (Vision OS) —— */
[data-theme="F"] {
--bg-0: #0a0e1a; --bg-1: rgba(255,255,255,.06); --bg-2: rgba(255,255,255,.10); --bg-3: rgba(255,255,255,.16);
--line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.06);
--fg-0: #f5f5f7; --fg-1: #d2d2d7; --fg-2: #98989d;
--accent: #ffd089; --accent-2: #ffac4e; --accent-fg: #2d1f08;
--info: #6cb4ff; --ok: #80f0c0; --warn: #ffd089; --err: #ff8a8a;
--canvas-grid-color: rgba(255,255,255,.04); --canvas-bg: transparent;
--node-bg: rgba(255,255,255,.10); --node-border: rgba(255,255,255,.22);
--primary-btn-bg: rgba(255,208,137,.85); --primary-btn-fg: #2d1f08;
--connector-color: rgba(108,180,255,.7);
--hero-grad:
radial-gradient(1200px 800px at 10% 0%, rgba(157,78,221,.45), transparent 60%),
radial-gradient(900px 700px at 90% 30%, rgba(108,180,255,.35), transparent 60%),
radial-gradient(700px 600px at 60% 100%, rgba(255,208,137,.28), transparent 60%),
linear-gradient(180deg, #0a0e1a, #1a1335);
--panel-bg: rgba(255,255,255,.12); --bottom-bg: rgba(255,255,255,.10);
--activity-bg: rgba(255,255,255,.08);
--statusbar-bg: rgba(255,255,255,.08); --topbar-bg: rgba(255,255,255,.08);
--frosted: blur(28px) saturate(180%); --focus-ring: 0 0 0 3px rgba(255,208,137,.45);
}
/* ============================================================
* §3 Typography & Base
* ============================================================ */
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; padding: 0; }
body {
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
"Segoe UI", "PingFang SC", Roboto, sans-serif;
font-size: calc(13px * var(--font-scale));
color: var(--fg-0);
background: var(--hero-grad), var(--bg-0);
background-attachment: fixed;
overflow: hidden;
-webkit-font-smoothing: antialiased;
letter-spacing: .01em;
transition: background .3s, color .3s;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 4px; transition: background .15s; }
*:hover::-webkit-scrollbar-thumb { background: rgba(127,127,127,.35); }
*:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
/* ============================================================
* §4 Shell Layout · 3 行 4 列 grid 总骨架
* 行: 顶 var(--topbar-h, 44px) / 主体 1fr / 底 32 / 状态 24
* 列: 左 Activity 48 / 中间 1fr / 右 Activity 48
*
* v1.1 升级 (2026-05-15): 顶栏高度可由 .ide 上的 --topbar-h 变量定制
* - 默认 44px (与 v1.0 兼容,9 个旧 demo 不受影响)
* - 70px 时支持挂 sub-tabs-bar 浮带 (用于调音类 demo · β 方案)
* ============================================================ */
.ide {
display: grid;
grid-template-rows: var(--topbar-h, 44px) 1fr 32px 24px;
grid-template-columns: 48px 1fr 48px;
grid-template-areas:
"topbar topbar topbar"
"actL body actR"
"bottom bottom bottom"
"status status status";
height: 100vh;
}
/* opt-in: 调音类 demo 给 .ide 加 .with-subtabs-bar 即可启用 70px 顶栏 */
.ide.with-subtabs-bar { --topbar-h: 70px; }
/* ============================================================
* §5 Top Bar · 顶栏 (44px / 70px with sub-tabs-bar)
*
* v1.1 (2026-05-15) 新增 .ide.with-subtabs-bar 启用双行顶栏:
* 行 1 (44px): 红绿灯+logo+☰+工具栏+主tab+...
* 行 2 (26px): sub-tabs-bar 浮带 (挂在 active 主 tab 下方,β 方案)
* 9 个旧 demo 不带 .with-subtabs-bar,保持 v1.0 单行 44px 视觉
* ============================================================ */
.topbar {
grid-area: topbar;
display: flex; align-items: center; gap: 8px;
background: var(--topbar-bg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
border-bottom: 1px solid var(--line);
padding: 0 12px;
user-select: none;
-webkit-app-region: drag;
/* v1.1: 当 .ide.with-subtabs-bar 启用时,topbar 变两行 */
flex-wrap: nowrap;
position: relative;
}
.topbar > * { -webkit-app-region: no-drag; }
/* —— v1.1 sub-tabs-bar (浮带,挂在主 tab 下方) ——
* 用法: ...
...
* sub-tabs-bar 也是 grid-area: topbar 的一部分,通过绝对定位贴在 topbar 下方 */
.ide.with-subtabs-bar .topbar { height: 44px; }
.sub-tabs-bar {
grid-area: topbar;
align-self: end;
display: flex; align-items: center; gap: 8px;
height: 26px;
padding: 0 16px 0 76px; /* 左侧留出空间对齐主 tab 起始位置 */
background: var(--bg-1);
border-bottom: 1px solid var(--line);
font-size: 11px;
position: relative;
z-index: 5;
-webkit-app-region: no-drag;
}
/* 浮带左侧的"主 tab 锚点"标记 (玫瑰金小三角指示当前主 tab) */
.sub-tabs-bar::before {
content: '';
position: absolute;
left: 60px; /* 大致对齐到 main-tabs 起始 */
top: -4px;
width: 0; height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid var(--accent);
pointer-events: none;
}
.sub-tabs-bar .stb-context {
font-size: 10px; color: var(--fg-2);
text-transform: uppercase; letter-spacing: .8px;
font-weight: 600;
margin-right: 4px;
}
.sub-tabs-bar .stb-context strong { color: var(--accent); font-weight: 700; }
.sub-tabs-bar-tabs {
display: flex; gap: 2px;
background: var(--bg-2); border: 1px solid var(--line-soft);
border-radius: 999px; padding: 2px;
flex-shrink: 0;
box-shadow: var(--mac-shadow-sm);
}
.sub-tabs-bar-tab {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 12px; height: 20px;
font-size: 11px; font-weight: 500; color: var(--fg-1);
border: none; background: transparent;
border-radius: 999px;
cursor: pointer; user-select: none; line-height: 1;
transition: transform .08s, background .15s, color .15s;
}
.sub-tabs-bar-tab:active { transform: scale(0.96); }
.sub-tabs-bar-tab:hover { background: var(--bg-3); color: var(--fg-0); }
.sub-tabs-bar-tab.active {
background: var(--accent); color: var(--accent-fg);
font-weight: 600;
box-shadow: var(--mac-shadow-sm);
}
.sub-tabs-bar .right { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.sub-tabs-bar .stb-action {
background: transparent; border: none;
color: var(--fg-2); cursor: pointer;
font-size: 10.5px; padding: 2px 8px;
border-radius: 5px;
transition: all .12s;
}
.sub-tabs-bar .stb-action:hover { background: var(--bg-3); color: var(--accent); }
/* —— macOS 红绿灯 —— */
.traffic-lights { display: flex; gap: 8px; flex-shrink: 0; }
.traffic { width: 12px; height: 12px; border-radius: 50%; cursor: pointer;
box-shadow: inset 0 0 0 .5px rgba(0,0,0,.2); transition: filter .12s; }
.traffic.red { background: var(--mac-traffic-red); }
.traffic.yellow { background: var(--mac-traffic-yellow); }
.traffic.green { background: var(--mac-traffic-green); }
.traffic:hover { filter: brightness(.85); }
.traffic[data-tip] { position: relative; }
.traffic[data-tip]:hover::after {
content: attr(data-tip);
position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
background: rgba(0,0,0,.85); color: #fff;
font-size: 10px; font-weight: 500;
padding: 3px 8px; border-radius: 5px;
white-space: nowrap; pointer-events: none;
box-shadow: var(--mac-shadow-md);
z-index: 1000;
}
/* —— Logo —— */
.logo { font-weight: 600; color: var(--accent); font-size: 13px; flex-shrink: 0; }
.logo::before { content: "◆ "; }
/* —— ☰ 汉堡菜单触发 —— */
.menu-toggle {
width: 32px; height: 28px;
display: inline-flex; align-items: center; justify-content: center;
background: var(--bg-2); border: 1px solid var(--line-soft);
color: var(--fg-1); cursor: pointer; border-radius: 7px;
font-size: 14px; flex-shrink: 0;
transition: transform .08s, background .15s, color .15s, border-color .15s;
}
.menu-toggle:hover { background: var(--bg-3); color: var(--accent); border-color: var(--accent); }
.menu-toggle:active { transform: scale(.94); }
.menu-toggle.open { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
/* —— 4 主 tab 胶囊 (Pill Tab) —— */
.main-tabs {
display: flex; gap: 2px;
background: var(--bg-2); border: 1px solid var(--line-soft);
border-radius: 999px; padding: 2px;
flex-shrink: 0;
box-shadow: var(--mac-shadow-sm);
}
.main-tab {
display: inline-flex; align-items: center; gap: 5px;
padding: 4px 12px; height: 26px;
font-size: 12px; font-weight: 500; color: var(--fg-1);
border: none; background: transparent;
border-radius: 999px;
cursor: pointer; user-select: none; line-height: 1;
transition: transform .08s, background .15s, color .15s;
}
.main-tab:active { transform: scale(0.96); }
.main-tab .icon { font-size: 14px; }
.main-tab .lvl {
font-size: 9px; padding: 1px 5px; border-radius: 999px;
background: var(--bg-3); color: var(--fg-2); font-weight: 600;
}
.main-tab:hover { background: var(--bg-3); color: var(--fg-0); }
.main-tab.active {
background: var(--accent); color: var(--accent-fg);
box-shadow: var(--mac-shadow-sm);
}
.main-tab.active .lvl { background: rgba(0,0,0,.2); color: var(--accent-fg); }
.main-tab.disabled { opacity: .42; cursor: not-allowed; }
.main-tab.disabled::after { content: '🔒'; font-size: 10px; margin-left: 3px; }
/* —— 工具栏分组 —— */
.toolbar-group {
display: flex; align-items: center;
background: var(--bg-2); border: 1px solid var(--line-soft);
border-radius: var(--radius-md); padding: 2px;
flex-shrink: 0;
box-shadow: var(--mac-shadow-sm);
}
.toolbar-btn {
padding: 4px 10px; font-size: 11.5px; color: var(--fg-1);
border: none; background: transparent; cursor: pointer;
border-radius: 6px;
display: inline-flex; align-items: center; gap: 4px;
white-space: nowrap; line-height: 1;
transition: transform .08s, background .15s, color .15s;
}
.toolbar-btn:active { transform: scale(0.96); }
.toolbar-btn:hover { background: var(--bg-3); color: var(--fg-0); }
.toolbar-btn.primary { background: var(--primary-btn-bg); color: var(--primary-btn-fg); font-weight: 600; }
.toolbar-btn.primary:hover { filter: brightness(1.1); background: var(--primary-btn-bg); }
.toolbar-btn.danger { color: var(--err); }
/* —— 浮窗管理器入口按钮 —— */
.float-mgr {
display: inline-flex; align-items: center; gap: 4px;
background: rgba(157,78,221,.15); color: var(--xi-light);
border: 1px solid var(--xi-light);
padding: 4px 10px; border-radius: 999px;
cursor: pointer; font-size: 11px; font-weight: 600;
flex-shrink: 0;
transition: transform .08s, background .15s, color .15s;
}
.float-mgr:active { transform: scale(0.96); }
.float-mgr:hover { background: var(--xi-light); color: #1a0033; }
.float-mgr .count {
background: var(--xi-light); color: #1a0033;
padding: 0 5px; border-radius: 999px;
font-size: 9.5px; font-weight: 700; margin-left: 2px;
}
.float-mgr:hover .count { background: rgba(0,0,0,.2); color: var(--xi-light); }
/* —— 锁定模式切换按钮 —— */
.lock-toggle {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: 999px;
background: var(--bg-2); border: 1px solid var(--line);
color: var(--fg-1); cursor: pointer;
font-size: 11px; flex-shrink: 0;
transition: all .15s;
}
.lock-toggle:hover { border-color: var(--accent); color: var(--accent); }
.lock-toggle.active {
background: var(--accent); color: var(--accent-fg);
border-color: var(--accent); font-weight: 600;
}
/* —— 顶栏右侧 tag 区 —— */
.topbar .right {
margin-left: auto; display: flex; gap: 6px; align-items: center;
flex-shrink: 0;
}
.tag {
font-size: 10.5px; padding: 2px 8px; border-radius: 999px;
background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--line);
white-space: nowrap;
}
.tag.ok { color: var(--ok); border-color: var(--ok); }
.tag.theme {
cursor: pointer; padding: 2px 10px;
display: inline-flex; align-items: center; gap: 4px;
transition: all .15s;
}
.tag.theme:hover { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
/* ============================================================
* §6 Activity Bars · 左 5 / 右 4 常驻图标条 (48px)
* ============================================================ */
.activity-bar {
background: var(--activity-bg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: flex; flex-direction: column; align-items: center;
padding: 8px 0; gap: 2px;
user-select: none;
overflow: visible;
z-index: 12;
}
.activity-bar.left { grid-area: actL; border-right: 1px solid var(--line); }
.activity-bar.right { grid-area: actR; border-left: 1px solid var(--line); }
.dock-icon {
width: 38px; height: 38px;
display: flex; align-items: center; justify-content: center;
border-radius: 9px;
background: transparent;
color: var(--fg-1); cursor: pointer;
font-size: 18px;
border: none;
position: relative;
margin: 2px 0;
transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s, color .15s;
-webkit-app-region: no-drag;
}
.dock-icon:hover {
transform: scale(1.18);
background: var(--bg-3);
color: var(--accent);
z-index: 5;
}
.activity-bar.left .dock-icon:hover { transform: scale(1.18) translateX(2px); }
.activity-bar.right .dock-icon:hover { transform: scale(1.18) translateX(-2px); }
.dock-icon.active {
background: var(--accent); color: var(--accent-fg);
box-shadow: var(--mac-shadow-sm);
}
.dock-icon.active::before {
content: ""; position: absolute;
width: 3px; height: 20px;
border-radius: 0 2px 2px 0;
background: var(--accent);
left: -8px; top: 50%; transform: translateY(-50%);
box-shadow: 0 0 8px var(--accent);
}
.activity-bar.right .dock-icon.active::before {
left: auto; right: -8px;
border-radius: 2px 0 0 2px;
}
.dock-icon .tip {
position: absolute;
background: rgba(0,0,0,.85);
color: #fff; font-size: 11px; font-weight: 500;
padding: 4px 10px; border-radius: 6px;
white-space: nowrap;
opacity: 0; pointer-events: none;
transition: opacity .15s;
box-shadow: var(--mac-shadow-md);
z-index: 100;
}
.activity-bar.left .dock-icon .tip { left: 52px; top: 50%; transform: translateY(-50%); }
.activity-bar.right .dock-icon .tip { right: 52px; top: 50%; transform: translateY(-50%); }
.dock-icon:hover .tip { opacity: 1; }
.dock-spacer { flex: 1; }
.dock-icon.fmgr-link { color: var(--xi-light); }
.dock-icon.fmgr-link:hover { color: var(--xi); background: rgba(157,78,221,.18); }
/* ============================================================
* §7 View Pane / Sub Tabs / Canvas Tools
* ============================================================ */
.body-wrap {
grid-area: body;
position: relative; overflow: hidden; background: var(--bg-0);
}
.view-pane { position: absolute; inset: 0; display: none; }
.view-pane.active { display: block; }
.canvas-area {
position: absolute; inset: 0;
background-image:
linear-gradient(var(--canvas-grid-color) 1px, transparent 1px),
linear-gradient(90deg, var(--canvas-grid-color) 1px, transparent 1px);
background-size: 24px 24px;
overflow: auto;
}
/* —— 子 tab Pill (顶部居中浮动) —— */
.sub-tabs {
position: absolute; top: 10px; left: 50%;
transform: translateX(-50%);
display: flex; gap: 4px;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: 999px; padding: 3px;
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
box-shadow: var(--mac-shadow-md);
z-index: 6; user-select: none;
}
.sub-tab {
padding: 4px 14px; font-size: 11.5px;
cursor: pointer; color: var(--fg-1);
border-radius: 999px; user-select: none;
font-weight: 500; line-height: 1;
transition: all .12s;
}
.sub-tab:hover { background: var(--bg-3); color: var(--fg-0); }
.sub-tab.active { background: var(--accent); color: var(--accent-fg); font-weight: 600; }
/* —— 画布右上工具组 —— */
.canvas-tools {
position: absolute; top: 14px; right: 14px;
display: flex; gap: 4px;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 4px;
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
box-shadow: var(--mac-shadow-md);
z-index: 6;
}
.icon-btn {
background: transparent; border: none; color: var(--fg-1);
padding: 4px 8px; border-radius: 6px; cursor: pointer; font-size: 12px;
transition: all .12s;
}
.icon-btn:hover { background: var(--bg-3); color: var(--fg-0); }
/* —— 画布左下信息条 —— */
.canvas-info {
position: absolute; bottom: 14px; left: 14px;
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 6px 12px;
font-size: 10.5px; color: var(--fg-2);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
z-index: 6;
}
/* ============================================================
* §8 Drawer · 悬浮抽屉 (Activity Bar 触发,默认悬浮)
* 锁定模式 (.ide.locked) 在 §15 改写为挤压布局
* ============================================================ */
.drawer {
position: absolute;
background: var(--panel-bg);
border: 1px solid var(--line);
box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: flex; flex-direction: column;
z-index: 30; overflow: hidden;
border-radius: var(--radius-lg);
transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
opacity: 0; pointer-events: none;
}
.drawer.left { left: 8px; top: 8px; bottom: 8px; width: 280px; transform: translateX(-12px); }
.drawer.right { right: 8px; top: 8px; bottom: 8px; width: 320px; transform: translateX(12px); }
.drawer.open { opacity: 1; pointer-events: auto; transform: translateX(0); }
.drawer-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line-soft);
flex-shrink: 0; cursor: move;
}
.drawer-head .traffic-lights { margin-right: 0; }
.drawer-head .traffic { width: 11px; height: 11px; }
.drawer-head .title { flex: 1; font-size: 12px; font-weight: 600; color: var(--fg-0); }
.drawer-head .pin {
background: transparent; border: 1px solid var(--line);
color: var(--fg-2); cursor: pointer;
padding: 2px 8px; border-radius: 5px; font-size: 10px;
transition: all .12s;
}
.drawer-head .pin:hover { color: var(--accent); border-color: var(--accent); }
.drawer-head .pin.pinned { color: var(--accent); border-color: var(--accent); background: rgba(212,165,116,.1); }
.drawer-body { flex: 1; overflow: auto; padding: 10px; }
/* ============================================================
* §9 Bottom Bar (32px, 6 tab) + Bottom Expand + Status Bar
* ============================================================ */
.bottom-bar {
grid-area: bottom;
display: flex; align-items: stretch;
background: var(--bottom-bg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
border-top: 1px solid var(--line);
padding: 0 8px; gap: 2px;
user-select: none;
overflow: hidden;
z-index: 11;
}
.bottom-icon {
display: inline-flex; align-items: center; gap: 5px;
padding: 0 12px; height: 100%;
font-size: 11.5px; color: var(--fg-1);
background: transparent; border: none; cursor: pointer;
border-bottom: 2px solid transparent;
transition: all .12s;
white-space: nowrap;
}
.bottom-icon:hover { background: var(--bg-3); color: var(--fg-0); }
.bottom-icon.active {
color: var(--accent);
border-bottom-color: var(--accent);
background: rgba(212,165,116,.08);
}
.bottom-icon .ico { font-size: 13px; }
.bottom-icon .badge {
background: var(--err); color: #fff;
padding: 0 5px; border-radius: 999px;
font-size: 9px; font-weight: 700;
}
.bottom-bar .right {
margin-left: auto; display: flex; align-items: center; gap: 8px;
padding: 0 8px; font-size: 10.5px; color: var(--fg-2);
}
/* —— 底部展开区 (悬浮模式默认浮在画布上) —— */
.bottom-expand {
position: absolute;
left: 56px; right: 56px; bottom: 56px; height: 220px;
background: var(--panel-bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
z-index: 25; overflow: hidden;
display: flex; flex-direction: column;
transition: transform .22s cubic-bezier(.4,0,.2,1), opacity .22s;
opacity: 0; pointer-events: none;
transform: translateY(12px);
}
.bottom-expand.open { opacity: 1; pointer-events: auto; transform: translateY(0); }
.bottom-expand .head {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line-soft);
flex-shrink: 0;
}
.bottom-expand .head .title { flex: 1; font-size: 12px; font-weight: 600; color: var(--fg-0); }
.bottom-expand .body { flex: 1; overflow: auto; padding: 12px; font-size: 11.5px; }
/* —— Module 属性 4 列网格 —— */
.prop-pane-grid {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 14px;
}
.prop-pane-grid .col h4 {
margin: 0 0 8px;
font-size: 10px; font-weight: 700;
color: var(--fg-2); letter-spacing: .8px;
text-transform: uppercase;
}
/* —— 等宽日志样式 —— */
.log-mono {
font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
font-size: 11px; line-height: 1.6;
}
.log-mono .info { color: var(--info); }
.log-mono .ok { color: var(--ok); }
.log-mono .warn { color: var(--warn); }
.log-mono .err { color: var(--err); }
.log-mono kbd {
background: var(--bg-2); padding: 1px 5px; border-radius: 3px;
font-size: 10px; color: var(--accent); border: 1px solid var(--line-soft);
}
/* —— 状态栏 (24px) —— */
.statusbar {
grid-area: status;
display: flex; align-items: center; gap: 14px;
background: var(--statusbar-bg);
border-top: 1px solid var(--line);
padding: 0 14px;
font-size: 10.5px; color: var(--fg-1); user-select: none;
}
.statusbar .badge {
padding: 1px 7px; border-radius: 999px;
background: var(--ok); color: var(--accent-fg); font-weight: 600; font-size: 9.5px;
}
.statusbar .right { margin-left: auto; display: flex; gap: 14px; }
/* ============================================================
* §10 Common Widgets · 通用控件 (drawer 内常用)
* ============================================================ */
.section-title {
font-size: 10px; color: var(--fg-2); text-transform: uppercase;
letter-spacing: .8px; font-weight: 600;
margin: 8px 4px 6px; padding-bottom: 4px;
}
/* —— 控件库方块 —— */
.tile-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 6px; padding: 4px 0;
}
.tile {
background: var(--bg-2); border: 1px solid var(--line-soft);
border-radius: var(--radius-md);
padding: 12px 6px 10px;
cursor: grab; text-align: center;
transition: all .15s ease;
display: flex; flex-direction: column; align-items: center; gap: 4px;
user-select: none; position: relative;
}
.tile:hover {
border-color: var(--accent);
background: var(--bg-3);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(212,165,116,.25);
}
.tile:active { cursor: grabbing; transform: translateY(0); }
.tile .tile-icon { font-size: 22px; line-height: 1; margin-bottom: 2px; filter: grayscale(.2); }
.tile:hover .tile-icon { filter: grayscale(0); }
.tile .tile-name { font-size: 10.5px; color: var(--fg-1); font-weight: 500; line-height: 1.3; }
.tile:hover .tile-name { color: var(--fg-0); }
.tile .tile-tag {
position: absolute; top: 4px; right: 4px;
font-size: 8.5px; padding: 1px 5px;
border-radius: 999px; font-weight: 700;
background: var(--bg-3); color: var(--fg-2);
}
.tile.l0 .tile-tag { background: rgba(46,141,126,.2); color: var(--L0); }
.tile.l1 .tile-tag { background: rgba(93,222,207,.2); color: var(--L1); }
.tile.l2 .tile-tag { background: rgba(232,201,160,.2); color: var(--L2); }
.tile.l3 .tile-tag { background: rgba(212,165,116,.2); color: var(--L3); }
.tile.l4 .tile-tag { background: rgba(199,125,255,.2); color: var(--L4); }
.tile.l5 .tile-tag { background: rgba(157,78,221,.2); color: var(--L5); }
/* —— 列表行 —— */
.list-row {
display: flex; align-items: center; gap: 6px;
padding: 6px 8px; border-radius: 6px; font-size: 11.5px;
cursor: pointer; color: var(--fg-1); user-select: none;
}
.list-row:hover { background: var(--bg-3); color: var(--fg-0); }
.list-row.selected { background: var(--accent); color: var(--accent-fg); }
.list-row .ico { font-size: 13px; width: 16px; text-align: center; }
.list-row .meta { margin-left: auto; font-size: 10px; color: var(--fg-2); }
.list-row.selected .meta { color: rgba(0,0,0,.6); }
/* —— 设备行 (连接管理) —— */
.device-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 10px; border-radius: var(--radius-md);
background: var(--bg-2); border: 1px solid var(--line-soft);
margin-bottom: 6px; cursor: pointer; transition: all .12s;
}
.device-row:hover { border-color: var(--accent); background: var(--bg-3); }
.device-row .led {
width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
background: var(--ok); box-shadow: 0 0 6px var(--ok);
}
.device-row .led.off { background: var(--fg-2); box-shadow: none; }
.device-row .name { font-size: 11.5px; font-weight: 600; line-height: 1.2; }
.device-row .meta { font-size: 9.5px; color: var(--fg-2); margin-top: 2px; }
/* —— Scope 卡片 (波形/频谱小图) —— */
.scope-card {
background: var(--bg-2); border: 1px solid var(--line);
border-radius: var(--radius-md); padding: 10px;
margin-bottom: 10px;
box-shadow: var(--mac-shadow-sm);
}
.scope-card .cap {
display: flex; align-items: center; justify-content: space-between;
font-size: 10.5px; color: var(--fg-2); margin-bottom: 6px;
font-weight: 600;
}
.scope-card .badge {
padding: 1px 8px; border-radius: 999px;
background: var(--accent); color: var(--accent-fg);
font-size: 9.5px; font-weight: 600;
}
.scope-svg {
width: 100%; height: 80px;
background: var(--bg-0); border-radius: 6px;
border: 1px solid var(--line-soft);
}
.scope-svg path { fill: none; stroke: var(--accent); stroke-width: 1.4; }
.scope-svg .grid { stroke: var(--canvas-grid-color); stroke-width: .5; }
/* —— 属性行 —— */
.prop-row {
display: flex; align-items: center; gap: 8px; padding: 3px 0;
}
.prop-row label { font-size: 10.5px; color: var(--fg-2); width: 78px; flex-shrink: 0; }
.prop-row input, .prop-row select {
flex: 1; background: var(--bg-2); border: 1px solid var(--line-soft);
border-radius: 6px; color: var(--fg-0);
padding: 3px 8px; font-size: 11.5px; outline: none;
font-family: inherit;
}
.prop-row input:focus, .prop-row select:focus { border-color: var(--accent); }
/* ============================================================
* §11 Tuning Dialog · 通用浮窗骨架 (双击节点弹出)
* ============================================================ */
.tuning-dialog {
position: fixed;
width: 320px;
background: var(--panel-bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: flex; flex-direction: column;
overflow: hidden; font-size: 11.5px;
z-index: 50;
}
.tuning-dialog.minimized { display: none; }
.td-head {
display: flex; align-items: center; gap: 8px;
padding: 10px 12px;
background: var(--bg-2);
border-bottom: 1px solid var(--line-soft);
cursor: move; user-select: none;
}
.td-head .td-title { flex: 1; font-size: 11.5px; font-weight: 600; color: var(--fg-0); }
.td-head button {
background: transparent; border: none; color: var(--fg-2);
cursor: pointer; font-size: 12px; padding: 0;
width: 20px; height: 20px; border-radius: 4px;
transition: all .12s;
}
.td-head button:hover { color: var(--fg-0); background: var(--bg-3); }
.td-body { padding: 12px; }
.td-row {
display: grid; grid-template-columns: 70px 1fr 50px; gap: 8px;
align-items: center; padding: 4px 0;
}
.td-row label { font-size: 10.5px; color: var(--fg-2); }
.td-row input[type=range] { width: 100%; accent-color: var(--accent); }
.td-row select {
background: var(--bg-2); border: 1px solid var(--line-soft);
color: var(--fg-0); padding: 3px 6px; border-radius: 5px;
font-size: 11px; outline: none;
}
.td-row .val { font-size: 10.5px; color: var(--accent); font-weight: 600; text-align: right; }
.td-foot {
display: flex; gap: 8px; padding: 10px 12px;
border-top: 1px solid var(--line-soft);
background: var(--bg-1); justify-content: flex-end;
}
.td-foot button {
padding: 5px 14px; border-radius: 7px;
border: 1px solid var(--line); background: var(--bg-2);
color: var(--fg-0); cursor: pointer; font-size: 11px; font-weight: 500;
transition: all .12s;
}
.td-foot button:hover { border-color: var(--accent); }
.td-foot button.primary {
background: var(--primary-btn-bg); color: var(--primary-btn-fg);
border-color: var(--primary-btn-bg); font-weight: 600;
}
/* ============================================================
* §12 Float Manager Pop · 浮窗管理器弹窗
* ============================================================ */
.fmgr-pop {
position: fixed; top: 56px; left: 50%;
transform: translateX(-50%);
width: 420px;
background: var(--panel-bg);
border: 1px solid var(--xi-light);
border-radius: var(--radius-lg);
box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: none; z-index: 200; overflow: hidden;
}
.fmgr-pop.open { display: block; }
.fmgr-pop .head {
padding: 12px 14px;
background: linear-gradient(90deg, rgba(157,78,221,.15), transparent);
border-bottom: 1px solid var(--line);
font-weight: 600; color: var(--xi-light); font-size: 12px;
display: flex; align-items: center; gap: 8px;
}
.fmgr-pop .head .close-all {
margin-left: auto;
background: transparent; border: 1px solid var(--line);
color: var(--fg-1); padding: 3px 10px; border-radius: 5px;
cursor: pointer; font-size: 10px;
transition: all .12s;
}
.fmgr-pop .head .close-all:hover { border-color: var(--err); color: var(--err); }
.fmgr-body { max-height: 380px; overflow: auto; padding: 4px 0; }
.fmgr-section {
padding: 6px 14px;
font-size: 9.5px; font-weight: 700; color: var(--fg-2);
letter-spacing: .8px; text-transform: uppercase;
background: var(--bg-2);
border-bottom: 1px solid var(--line-soft);
display: flex; align-items: center; gap: 6px;
}
.fmgr-section .count {
margin-left: auto;
background: var(--xi-light); color: #1a0033;
padding: 0 6px; border-radius: 999px; font-weight: 700; font-size: 9.5px;
}
.fmgr-row {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px;
border-bottom: 1px solid var(--line-soft);
font-size: 11px;
}
.fmgr-row:hover { background: var(--bg-3); }
.fmgr-row .ico {
width: 22px; height: 22px;
border-radius: 5px;
display: flex; align-items: center; justify-content: center;
font-size: 12px; flex-shrink: 0;
}
.fmgr-row.tuning .ico { background: rgba(212,165,116,.2); color: var(--accent); }
.fmgr-row.drawer .ico { background: rgba(93,222,207,.2); color: var(--ok); }
.fmgr-row.bottom .ico { background: rgba(199,125,255,.2); color: var(--xi-light); }
.fmgr-row .name { flex: 1; color: var(--fg-0); font-weight: 600; line-height: 1.2; }
.fmgr-row .name .sub { color: var(--fg-2); font-weight: 400; font-size: 10px; margin-left: 6px; }
.fmgr-row .status-dot {
width: 6px; height: 6px; border-radius: 50%;
background: var(--ok); flex-shrink: 0;
}
.fmgr-row.minimized .status-dot { background: var(--fg-2); }
.fmgr-row button {
background: transparent; border: 1px solid var(--line);
color: var(--fg-1); cursor: pointer;
padding: 2px 8px; border-radius: 4px; font-size: 10px;
transition: all .12s;
}
.fmgr-row button:hover { border-color: var(--accent); color: var(--accent); }
/* ============================================================
* §13 Theme Popover & Menu Dropdown
* ============================================================ */
.theme-popover {
position: fixed; top: 56px; right: 14px;
width: 320px;
background: var(--panel-bg);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: none; z-index: 200; overflow: hidden;
}
.theme-popover.open { display: block; }
.theme-popover .head {
padding: 12px 14px;
border-bottom: 1px solid var(--line-soft);
font-size: 12px; font-weight: 600;
display: flex; justify-content: space-between; align-items: center;
}
.theme-list { max-height: 360px; overflow-y: auto; padding: 6px; }
.theme-card {
display: flex; align-items: center; gap: 10px;
padding: 8px 10px; border-radius: var(--radius-md);
cursor: pointer; margin-bottom: 4px;
transition: background .15s;
}
.theme-card:hover { background: var(--bg-2); }
.theme-card.active { background: var(--accent); color: var(--accent-fg); }
.theme-card .preview {
width: 36px; height: 36px; border-radius: 8px;
border: 1px solid var(--line-soft); flex-shrink: 0;
display: flex; flex-direction: column; overflow: hidden;
}
.theme-card .preview .h { height: 8px; background: var(--accent); }
.theme-card .preview .b { flex: 1; background: var(--bg-1); display: flex; }
.theme-card .preview .b > div { flex: 1; border-right: 1px solid var(--line-soft); }
.theme-card .preview .b > div:last-child { border-right: none; }
.theme-card .info { flex: 1; min-width: 0; }
.theme-card .info .name { font-size: 11.5px; font-weight: 600; }
.theme-card .info .meta { font-size: 10px; color: var(--fg-2); }
.theme-card.active .info .meta { color: rgba(0,0,0,.55); }
/* —— ☰ 主菜单下拉 —— */
.menu-dropdown {
position: fixed; top: 48px; left: 76px;
width: 220px;
background: var(--panel-bg); border: 1px solid var(--line);
border-radius: var(--radius-md); box-shadow: var(--mac-shadow-lg);
backdrop-filter: var(--frosted); -webkit-backdrop-filter: var(--frosted);
display: none; z-index: 250; padding: 4px; overflow: hidden;
}
.menu-dropdown.open { display: block; }
.menu-dropdown .menu-item {
display: flex; align-items: center; gap: 10px;
padding: 7px 12px; font-size: 12px; color: var(--fg-1);
cursor: pointer; border-radius: 6px; user-select: none;
transition: all .12s;
}
.menu-dropdown .menu-item:hover { background: var(--bg-3); color: var(--fg-0); }
.menu-dropdown .menu-item .kbd {
margin-left: auto; font-size: 10px; color: var(--fg-2);
font-family: ui-monospace, "SF Mono", monospace;
}
.menu-dropdown hr { border: none; border-top: 1px solid var(--line-soft); margin: 4px 0; }
/* ============================================================
* §14 Toast / Intro Tip / Empty State / Loading State
* ============================================================ */
.toast {
position: fixed; bottom: 70px; left: 50%;
transform: translateX(-50%) translateY(20px);
background: rgba(0,0,0,.78); color: #fff;
padding: 10px 18px; border-radius: 999px;
font-size: 12px; font-weight: 500;
box-shadow: var(--mac-shadow-lg);
backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
opacity: 0; pointer-events: none;
transition: opacity .25s, transform .25s;
z-index: 9999;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.intro-tip {
position: fixed; top: 60px; right: 14px;
width: 320px;
background: var(--accent); color: var(--accent-fg);
padding: 12px 14px; border-radius: var(--radius-md);
font-size: 11.5px; line-height: 1.65;
box-shadow: var(--mac-shadow-lg);
z-index: 300;
transition: opacity .3s, transform .3s;
}
.intro-tip.hidden { opacity: 0; transform: translateY(-6px); pointer-events: none; }
.intro-tip kbd {
background: rgba(0,0,0,.18); padding: 1px 6px; border-radius: 3px;
font-family: ui-monospace, "SF Mono", monospace; font-size: 10px;
}
/* —— 空状态 (Empty State) —— */
.empty-state {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 10px; color: var(--fg-2);
user-select: none; pointer-events: none;
}
.empty-state .empty-icon { font-size: 56px; opacity: .35; line-height: 1; }
.empty-state .empty-title { font-size: 14px; font-weight: 600; color: var(--fg-1); }
.empty-state .empty-hint { font-size: 11.5px; color: var(--fg-2); max-width: 320px; text-align: center; line-height: 1.6; }
.empty-state .empty-cta {
pointer-events: auto;
margin-top: 6px; padding: 6px 16px;
background: var(--accent); color: var(--accent-fg);
border: none; border-radius: 999px;
font-size: 11.5px; font-weight: 600; cursor: pointer;
transition: filter .15s, transform .08s;
}
.empty-state .empty-cta:hover { filter: brightness(1.08); }
.empty-state .empty-cta:active { transform: scale(.96); }
/* —— 加载态 (Loading State) —— */
.loading-state {
position: absolute; inset: 0;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 14px; color: var(--fg-1);
user-select: none;
background: rgba(0,0,0,.04);
}
.loading-state .spinner {
width: 36px; height: 36px;
border: 3px solid var(--line);
border-top-color: var(--accent);
border-radius: 50%;
animation: codex-spin 0.9s linear infinite;
}
.loading-state .loading-text { font-size: 12px; color: var(--fg-1); font-weight: 500; }
.loading-state .loading-sub { font-size: 10.5px; color: var(--fg-2); }
@keyframes codex-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ============================================================
* §15 Lock Mode · 悬浮 ↔ 挤压切换 (Ctrl+\)
* .ide.locked 时,左/右 drawer + bottom-expand 占据 grid cell,
* 主画布被挤压,体验如 VSCode
* ============================================================ */
.ide.locked .body-wrap {
display: grid;
grid-template-columns: var(--col-l, 0px) 1fr var(--col-r, 0px);
grid-template-rows: 1fr var(--row-b, 0px);
grid-template-areas:
"dl center dr"
"dl bottom dr";
}
.ide.locked .drawer.left {
grid-area: dl; position: relative;
left: 0; top: 0; bottom: 0; width: auto;
transform: none !important; opacity: 1 !important;
border-radius: 0; border-left: none; border-top: none; border-bottom: none;
pointer-events: auto;
}
.ide.locked .drawer.right {
grid-area: dr; position: relative;
right: 0; top: 0; bottom: 0; width: auto;
transform: none !important; opacity: 1 !important;
border-radius: 0; border-right: none; border-top: none; border-bottom: none;
pointer-events: auto;
}
.ide.locked .bottom-expand {
grid-area: bottom; position: relative;
left: 0; right: 0; bottom: 0; height: auto;
transform: none !important; opacity: 1 !important;
border-radius: 0; border-left: none; border-right: none; border-bottom: none;
pointer-events: auto;
}
.ide.locked .drawer:not(.open),
.ide.locked .bottom-expand:not(.open) { display: none; }
.ide.locked .view-pane { grid-area: center; position: relative; inset: auto; height: 100%; }
.ide.locked .canvas-area { position: absolute; inset: 0; }
/* ============================================================
* EOF · xistudio-codex.css v1.0
* ============================================================ */