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