bingshuo/hololake-system-architecture
Watch
1
0
Fork
You've already forked hololake-system-architecture
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

feat: surface Guanghu era time authority

Browse source
This commit is contained in:
冰朔 2026-08-17 14:06:45 +08:00
commit 3294447dce
8 changed files with 733 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

51
product-source/hololake-native-desktop/src/styles.css
View file

@ -680,6 +680,7 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.channel-main { left: 50%; top: 43%; width: 280px; transform: translateX(-50%); }
.channel-main .pool-bay { width: 260px; height: 84px; } .channel-main .pool-label { top: 92px; }
.channel-knowledge { left: 14%; top: 48%; } .channel-code { left: 31%; top: 61%; } .channel-light { right: 31%; top: 61%; } .channel-status { right: 14%; top: 48%; }
.channel-time { left: 50%; bottom: 4%; transform: translateX(-50%); }
.private-route-note { position: absolute; z-index: 10; left: 50%; bottom: 11%; width: min(720px, calc(100% - 64px)); margin: 0; transform: translateX(-50%); color: var(--content-muted); text-align: center; font-size: 12.5px; font-weight: 650; letter-spacing: .08em; }
.personal-node-guide { position: absolute; z-index: 12; left: 50%; top: 55%; width: min(760px, calc(100% - 72px)); max-height: calc(100% - 190px); overflow: auto; padding: 26px 30px; transform: translate(-50%, -50%); border: 1px solid var(--panel-edge); border-radius: 20px; color: var(--content-secondary); background: color-mix(in srgb, var(--panel-bg) 88%, transparent); box-shadow: 0 30px 90px rgba(0, 0, 0, .42); backdrop-filter: blur(22px); }
.personal-node-guide header span { color: var(--accent-light); font-size: 11px; font-weight: 750; letter-spacing: .2em; }
@ -718,6 +719,56 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.receipt-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.receipt-actions button { min-height: 42px; padding: 0 17px; border: 1px solid var(--panel-edge); border-radius: 10px; background: var(--primitive-glass); color: var(--content-secondary); font-weight: 650; cursor: pointer; }
.receipt-actions button.primary { border-color: transparent; color: var(--button-primary-text); background: var(--button-primary-bg); }
/* 曜冥纪元从湖面生长出来，不使用后台式硬时间轴。 */
.era-home-entry { position: absolute; z-index: 17; left: 24px; bottom: 15px; width: min(326px, calc(100% - 48px)); padding: 14px 16px 13px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 24%, transparent); border-radius: 17px; color: inherit; background: radial-gradient(120% 160% at 18% 100%, color-mix(in srgb, var(--primitive-cool-glow) 13%, transparent), transparent 54%), color-mix(in srgb, var(--panel-bg) 62%, transparent); box-shadow: 0 20px 58px rgba(0, 0, 0, .24), inset 0 0 34px color-mix(in srgb, var(--primitive-warm-glow) 5%, transparent); backdrop-filter: blur(18px); text-align: left; cursor: pointer; transition: border-color .25s ease, background .25s ease, transform .25s ease; }
.era-home-entry:hover, .era-home-entry:focus-visible { border-color: color-mix(in srgb, var(--primitive-warm-glow) 52%, transparent); background-color: color-mix(in srgb, var(--panel-bg) 78%, transparent); transform: translateY(-2px); outline: 0; }
.era-home-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.era-home-heading b { color: var(--content-primary); font-size: 15px; font-weight: 760; letter-spacing: .12em; }
.era-home-heading small { color: var(--accent-light); font-size: 11px; font-weight: 720; white-space: nowrap; }
.era-home-markers { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin: 12px 0 9px; }
.era-home-markers::before { content: ''; position: absolute; left: 4%; right: 4%; top: 5px; height: 12px; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent), transparent 70%); filter: blur(4px); }
.era-home-markers i { position: relative; display: grid; justify-items: center; gap: 6px; color: var(--content-faint); font-size: 8.5px; font-style: normal; white-space: nowrap; }
.era-home-markers em { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--primitive-cool-glow) 78%, #fff); box-shadow: 0 0 12px color-mix(in srgb, var(--primitive-cool-glow) 58%, transparent); }
.era-home-markers i:last-child em { background: var(--primitive-warm-glow); box-shadow: 0 0 15px color-mix(in srgb, var(--primitive-warm-glow) 68%, transparent); }
.era-home-now { display: block; color: var(--content-muted); font-size: 10.5px; font-weight: 620; letter-spacing: .035em; }
.world-scene.resolving .era-home-entry, .world-scene.resolved .era-home-entry { opacity: 0; pointer-events: none; }
.era-overlay { position: fixed; z-index: 120; inset: 44px 0 45px; display: grid; place-items: center; padding: 22px; }
.era-overlay-scrim { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: color-mix(in srgb, var(--surface-depth) 84%, transparent); backdrop-filter: blur(20px); }
.era-timeline-panel { position: relative; width: min(960px, 96vw); height: min(760px, calc(100vh - 124px)); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 24%, var(--panel-edge)); border-radius: 24px; color: var(--content-secondary); background: radial-gradient(110% 54% at 50% 0, color-mix(in srgb, var(--primitive-cool-glow) 15%, transparent), transparent 58%), color-mix(in srgb, var(--panel-bg) 96%, transparent); box-shadow: 0 34px 120px rgba(0, 0, 0, .58); }
.era-timeline-panel > header { display: flex; justify-content: space-between; gap: 28px; padding: 27px 32px 20px; }
.era-timeline-panel > header span { color: var(--accent-light); font-size: 10px; font-weight: 760; letter-spacing: .22em; }
.era-timeline-panel > header h2 { margin: 8px 0 5px; color: var(--content-primary); font-size: clamp(27px, 3vw, 38px); font-weight: 760; letter-spacing: .12em; }
.era-timeline-panel > header p { margin: 0; color: var(--content-muted); font-size: 13px; font-weight: 650; }
.era-timeline-panel > header button { align-self: start; width: 34px; height: 34px; border: 1px solid var(--panel-edge); border-radius: 50%; color: var(--content-secondary); background: var(--primitive-glass); font-size: 22px; cursor: pointer; }
.era-clock-boundary { margin: 0 32px 10px; padding: 11px 14px; border-radius: 11px; color: var(--content-muted); background: color-mix(in srgb, var(--primitive-glass) 62%, transparent); font-size: 11.5px; line-height: 1.65; }
.era-timeline-panel ol { position: relative; min-height: 0; overflow: auto; margin: 0; padding: 10px 32px 24px; list-style: none; }
.era-timeline-panel ol::before { content: ''; position: absolute; left: 177px; top: 18px; bottom: 24px; width: 26px; border-radius: 50%; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--primitive-cool-glow) 16%, transparent), transparent 72%); filter: blur(7px); pointer-events: none; }
.era-timeline-panel li { position: relative; display: grid; grid-template-columns: 140px 22px minmax(0, 1fr); gap: 14px; align-items: start; padding: 13px 0 18px; }
.era-timeline-panel li time { padding-top: 2px; color: var(--accent-light); font-size: 11.5px; font-weight: 740; text-align: right; letter-spacing: .04em; }
.era-timeline-panel li > i { justify-self: center; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; background: color-mix(in srgb, var(--primitive-cool-glow) 74%, #fff); box-shadow: 0 0 15px color-mix(in srgb, var(--primitive-cool-glow) 62%, transparent); }
.era-timeline-panel li:last-child > i { width: 12px; height: 12px; margin-top: 3px; background: var(--primitive-warm-glow); box-shadow: 0 0 20px color-mix(in srgb, var(--primitive-warm-glow) 72%, transparent); }
.era-timeline-panel li h3 { margin: 0; color: var(--content-primary); font-size: 16px; font-weight: 730; letter-spacing: .035em; }
.era-timeline-panel li p { margin: 7px 0 0; color: var(--content-muted); font-size: 12.5px; font-weight: 560; line-height: 1.72; }
.era-timeline-panel > footer { padding: 15px 32px 18px; border-top: 1px solid color-mix(in srgb, var(--panel-edge) 72%, transparent); color: var(--content-faint); font-size: 10.5px; line-height: 1.65; }
.time-module-strip { width: 100%; min-height: 72px; display: grid; grid-template-columns: minmax(240px, 1fr) auto auto auto; gap: 20px; align-items: center; margin: 18px 0 0; padding: 14px 20px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 22%, var(--panel-edge)); border-radius: 15px; color: inherit; background: radial-gradient(80% 160% at 0 100%, color-mix(in srgb, var(--primitive-cool-glow) 10%, transparent), transparent), var(--primitive-glass); text-align: left; cursor: pointer; }
.time-module-strip > span { display: grid; grid-template-columns: 10px auto; column-gap: 10px; align-items: center; }
.time-module-strip > span i { grid-row: 1 / 3; width: 8px; height: 8px; border-radius: 50%; background: var(--primitive-warm-glow); box-shadow: 0 0 14px color-mix(in srgb, var(--primitive-warm-glow) 62%, transparent); }
.time-module-strip b { color: var(--content-primary); font-size: 14px; font-weight: 740; }
.time-module-strip small { color: var(--content-muted); font-size: 10.5px; }
.time-module-strip strong { color: var(--accent-light); font-size: 14px; white-space: nowrap; }
.time-module-strip time { color: var(--content-secondary); font-size: 12px; font-weight: 650; white-space: nowrap; }
.time-module-strip em { color: var(--content-faint); font-size: 10px; font-style: normal; white-space: nowrap; }
@media (max-width: 820px) {
.era-home-entry { left: 14px; bottom: 10px; width: 282px; }
.era-timeline-panel li { grid-template-columns: 104px 18px minmax(0, 1fr); gap: 10px; }
.era-timeline-panel ol::before { left: 142px; }
.time-module-strip { grid-template-columns: 1fr auto; }
.time-module-strip time, .time-module-strip em { grid-column: span 1; }
}
.receipt-message { color: var(--accent-light) !important; font-weight: 650; text-align: right; }
@media (max-width: 900px) {