Compare commits
2
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
ab98f63692 | ||
|
|
475ed4a872 |
+556
-524
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,5 @@
|
||||
/* xiaobai-datahub 数据中枢后台 —— 第八版「星港中枢」
|
||||
整页星空 + 中央星体 + 四颗数据源卫星的连续舞台，六幕滚动换场。
|
||||
整页星空舞台 + 中央自转星体 + 4 颗来源卫星，六幕连续滚动换场（详见 app.js Stage 引擎）。
|
||||
统一动效 Token：进入/退出用强 ease-out，屏内移动用强 ease-in-out，持续流动用 linear。
|
||||
禁止 ease-in、禁止 transition:all —— 全文件遵守。 */
|
||||
:root {
|
||||
@@ -17,6 +17,7 @@
|
||||
--bg0: #EDF0F7;
|
||||
--bg1: #F8FAFF;
|
||||
--surface: #ffffff;
|
||||
--stage-edge: rgba(47, 99, 214, .16);
|
||||
--text: #1B2547;
|
||||
--muted: #5B6785;
|
||||
--faint: #93A0BD;
|
||||
@@ -29,16 +30,21 @@
|
||||
--warn: #B97A0E;
|
||||
--glass: rgba(255, 255, 255, .82);
|
||||
--chip: rgba(47, 99, 214, .08);
|
||||
/* 星港中枢 · 画布调色（与 app.js PAL.day 保持一致，仅作文档留存） */
|
||||
--star-hi: #FFFFFF; --star-a: #EAF6FF; --star-b: #A9CCF0; --star-c: #5488C4; --star-d: #2E5A94;
|
||||
--orbit-line: rgba(90, 120, 180, .40);
|
||||
--sat1: #3997B4; --sat2: #BF873F; --sat3: #537EBF; --sat4: #BF525F;
|
||||
--face: rgba(120, 160, 235,);
|
||||
--edge: rgba(47, 99, 214,);
|
||||
--slab: rgba(10, 156, 147,);
|
||||
--ring: rgba(47, 99, 214,);
|
||||
--chan1: rgba(47, 99, 214,);
|
||||
--chan2: rgba(10, 124, 146,);
|
||||
--chan3: rgba(109, 93, 214,);
|
||||
--chan4: rgba(190, 120, 10,);
|
||||
}
|
||||
:root[data-theme="night"] {
|
||||
color-scheme: dark;
|
||||
--bg0: #05080F;
|
||||
--bg1: #0A1020;
|
||||
--surface: #12172A;
|
||||
--stage-edge: rgba(90, 140, 255, .14);
|
||||
--text: #E8EEFC;
|
||||
--muted: #8B97B8;
|
||||
--faint: #59637F;
|
||||
@@ -51,10 +57,14 @@
|
||||
--warn: #FFB84D;
|
||||
--glass: rgba(13, 20, 38, .72);
|
||||
--chip: rgba(74, 134, 255, .10);
|
||||
/* 星港中枢 · 画布调色（与 app.js PAL.night 保持一致，仅作文档留存） */
|
||||
--star-hi: #F2FAFF; --star-a: #C9E7FF; --star-b: #7FB2EA; --star-c: #3E6FAE; --star-d: #16305E;
|
||||
--orbit-line: rgba(140, 180, 255, .22);
|
||||
--sat1: #4CC9F0; --sat2: #FFB454; --sat3: #6FA8FF; --sat4: #FF6E7F;
|
||||
--face: rgba(58, 96, 180,);
|
||||
--edge: rgba(140, 190, 255,);
|
||||
--slab: rgba(47, 216, 206,);
|
||||
--ring: rgba(120, 170, 255,);
|
||||
--chan1: rgba(150, 205, 255,);
|
||||
--chan2: rgba(120, 180, 255,);
|
||||
--chan3: rgba(185, 175, 255,);
|
||||
--chan4: rgba(255, 214, 160,);
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
@@ -128,23 +138,22 @@ h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
|
||||
#topbar .spacer { flex: 1; }
|
||||
#topbar .who { font-size: 12px; }
|
||||
|
||||
/* ---------- 全幅星空舞台（100vw × (100vh-52px)，六幕连续场景） ----------
|
||||
第八版取消卡片式舞台：星空即整页背景，无圆角、无边框、无外边距。
|
||||
/* ---------- 全幅星空舞台（第八版「星港中枢」，calc(100vh - 52px) 高，六幕连续场景） ----------
|
||||
#track 的六段高幕（每段 130vh）在它身后正常参与文档流把页面撑高，
|
||||
#stageWrap 用 sticky 钉在视口里，滚动时只有 #track 的高度被“划过”，
|
||||
舞台本体在这段距离内始终可见、位置不变，直到 #track 撑出的空间耗尽才随之离场。
|
||||
星系几何（星体/轨道/卫星/去向端/双灯）的安全盒与缩放公式见 app.js Stage.resize()。 */
|
||||
整个舞台是同构的日/夜全幅星空：无卡片边框、无圆角大框、无 overflow 裁切——
|
||||
星系（轨道/卫星/线路/去向端）改由 app.js 的响应式安全盒公式钳制，构造性不出屏。 */
|
||||
#stageWrap {
|
||||
flex: none; width: 100vw; height: calc(100vh - var(--bar-h)); min-height: 480px;
|
||||
margin: 0; border-radius: 0; overflow: hidden; border: 0;
|
||||
box-shadow: inset 0 0 160px rgba(0, 0, 0, .10);
|
||||
flex: none; height: calc(100vh - var(--bar-h)); min-height: 480px; margin: 0; border-radius: 0;
|
||||
border: 0; box-shadow: none;
|
||||
position: sticky; top: var(--bar-h); z-index: 2;
|
||||
}
|
||||
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
|
||||
|
||||
/* ---------- 控制舱：当前场景的关键数据与操作 ---------- */
|
||||
#cabin {
|
||||
position: absolute; left: 24px; top: 24px; width: 300px; z-index: 5; max-height: calc(100% - 48px);
|
||||
position: absolute; left: 22px; top: 22px; width: 300px; z-index: 5; max-height: calc(100% - 44px);
|
||||
overflow: auto; background: var(--glass); border: 1px solid var(--line); border-radius: 14px;
|
||||
backdrop-filter: blur(14px); padding: 16px 18px;
|
||||
transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
|
||||
@@ -185,7 +194,7 @@ h3 { font-size: 13px; margin: 14px 0 6px; color: var(--muted); }
|
||||
background: var(--glass); border: 1px solid var(--line); border-radius: 12px; padding: 10px 13px;
|
||||
backdrop-filter: blur(14px); line-height: 1.9;
|
||||
}
|
||||
#legend .lampico { display: inline-block; width: 14px; height: 5px; border-radius: 99px; vertical-align: middle; margin-right: 6px; }
|
||||
#legend .lampico { display: inline-block; width: 16px; height: 6px; border-radius: 99px; vertical-align: middle; margin-right: 6px; }
|
||||
#legend .li-link { background: rgba(47, 216, 206, .5); box-shadow: 0 0 6px rgba(47, 216, 206, .6); }
|
||||
#legend .li-act { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
|
||||
|
||||
@@ -260,12 +269,12 @@ html.reduced #staticShell { display: block; }
|
||||
/* ---------- 主内容区（main/reduced 内容容器统一样式，供动效版 detail 与静态版共用） ---------- */
|
||||
main#page { padding: var(--pad); min-height: calc(100vh - 96px); background: var(--surface); }
|
||||
|
||||
/* ---------- 响应式：1440 / 1280 / 1024 三档桌面宽（须与 app.js cabinW 三档同步） ---------- */
|
||||
/* ---------- 响应式：1440 / 1280 / 1024 常见桌面宽 ---------- */
|
||||
@media (max-width: 1280px) {
|
||||
#cabin { width: 260px; }
|
||||
#detail { width: 320px; }
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
@media (max-width: 1100px) {
|
||||
#cabin { width: 230px; padding: 13px 14px; }
|
||||
#legend { display: none; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user