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

fix(ui): formalize domain information projection

Browse source
This commit is contained in:
冰朔 2026-08-16 21:37:50 +08:00
commit 3bdb690100
3 changed files with 79 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -551,9 +551,6 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.world-titlebar > b { color: var(--accent-light); font-size: 13px; font-weight: 700; letter-spacing: .22em; }
.world-titlebar > button, .world-title-actions button { border: 0; background: transparent; color: var(--content-muted); font-weight: 650; cursor: pointer; }
.world-titlebar > button { position: absolute; right: 17px; font-size: 20px; }
.traffic-lights { position: absolute; left: 16px; display: flex; gap: 8px; }
.traffic-lights i { width: 12px; height: 12px; border-radius: 50%; }
.traffic-lights i:nth-child(1) { background: #ff5f57; } .traffic-lights i:nth-child(2) { background: #febc2e; } .traffic-lights i:nth-child(3) { background: #28c840; }
.world-title-actions { position: absolute; right: 16px; display: flex; align-items: center; gap: 15px; }
.world-title-actions span { color: var(--content-muted); font-size: 12px; font-weight: 600; }
.world-title-actions button { font-size: 12.5px; }
@ -591,16 +588,23 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.pool-label { position: absolute; left: 50%; top: 70px; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; white-space: nowrap; }
.pool-label b { color: var(--content-secondary); font-size: 18px; font-weight: 700; letter-spacing: .05em; }
.pool-label small { color: var(--content-muted); font-size: 12px; font-weight: 600; letter-spacing: .1em; }
.pool-tip { position: absolute; z-index: 40; left: 50%; bottom: calc(100% + 14px); width: 270px; padding: 15px 17px; border: 1px solid var(--panel-edge); border-radius: 13px; opacity: 0; transform: translate(-50%, 7px); pointer-events: none; background: color-mix(in srgb, var(--panel-bg) 92%, transparent); backdrop-filter: blur(18px); box-shadow: 0 18px 54px rgba(0, 0, 0, .46); text-align: left; transition: opacity .24s ease, transform .24s ease; }
.pool-tip b, .pool-tip small, .pool-tip em { display: block; }
.pool-tip b { color: var(--content-primary); font-size: 15px; font-weight: 700; }
.pool-tip small { margin-top: 5px; color: var(--accent-light); font-size: 11.5px; font-weight: 650; letter-spacing: .08em; }
.pool-tip em { margin-top: 9px; color: var(--content-secondary); font-size: 12.5px; font-style: normal; font-weight: 600; line-height: 1.65; }
.world-pool:hover .pool-tip, .world-pool:focus-visible .pool-tip { opacity: 1; transform: translate(-50%, 0); }
.d-main .pool-tip, .d-sub .pool-tip { left: 0; transform: translate(0, 7px); }
.d-main:hover .pool-tip, .d-main:focus-visible .pool-tip, .d-sub:hover .pool-tip, .d-sub:focus-visible .pool-tip { transform: translate(0, 0); }
.d-zero .pool-tip, .d-zs .pool-tip { left: auto; right: 0; transform: translate(0, 7px); }
.d-zero:hover .pool-tip, .d-zero:focus-visible .pool-tip, .d-zs:hover .pool-tip, .d-zs:focus-visible .pool-tip { transform: translate(0, 0); }
.domain-info-scrim { position: absolute; z-index: 31; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: rgba(2, 7, 18, .72); backdrop-filter: blur(2px); cursor: default; animation: domain-scrim-in .2s ease both; }
@keyframes domain-scrim-in { from { opacity: 0; } to { opacity: 1; } }
.domain-info-card { position: absolute; z-index: 32; top: 72px; width: min(370px, calc(100% - 48px)); max-height: calc(100% - 96px); overflow: hidden auto; padding: 20px 21px 18px; border: 1px solid var(--panel-edge); border-radius: 15px; background: color-mix(in srgb, var(--panel-bg) 99%, transparent); backdrop-filter: blur(24px); box-shadow: 0 28px 82px rgba(0, 0, 0, .62); text-align: left; animation: domain-card-rise .26s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes domain-card-rise { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
.domain-info-card > b, .domain-info-card > small { display: block; }
.domain-info-card > b { padding-right: 38px; color: var(--content-primary); font-size: 16px; font-weight: 750; letter-spacing: .025em; }
.domain-info-card > small { margin-top: 6px; color: var(--accent-light); font-size: 12px; font-weight: 750; letter-spacing: .08em; }
.domain-info-card.info-main { left: max(24px, calc(8% - 77px)); }
.domain-info-card.info-sub { left: calc(26% - 77px); }
.domain-info-card.info-zero { right: calc(26% - 77px); }
.domain-info-card.info-zs { right: max(24px, calc(8% - 77px)); }
.domain-info-card.info-fifth { left: 50%; top: auto; bottom: 92px; transform: translateX(-50%); }
.pool-facts { display: grid; margin-top: 13px; border-top: 1px solid color-mix(in srgb, var(--panel-edge) 72%, transparent); }
.pool-fact { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: start; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--panel-edge) 46%, transparent); }
.pool-fact:last-child { border-bottom: 0; padding-bottom: 2px; }
.pool-fact em { margin: 0; color: var(--content-secondary); font-size: 11.5px; font-style: normal; font-weight: 750; line-height: 1.55; letter-spacing: .055em; }
.pool-fact strong { min-width: 0; color: var(--content-primary); font-size: 12.5px; font-weight: 750; line-height: 1.55; letter-spacing: .01em; overflow-wrap: anywhere; }
.world-pool.open .pool-halo { background: radial-gradient(closest-side, color-mix(in srgb, var(--primitive-warm-glow) 76%, transparent), color-mix(in srgb, var(--primitive-warm-glow) 25%, transparent) 48%, transparent 74%); }
.world-pool.open .pool-heart { width: 30px; height: 30px; background: radial-gradient(circle at 40% 32%, #fff4d2, color-mix(in srgb, var(--primitive-warm-glow) 68%, transparent) 52%, transparent 80%); box-shadow: 0 0 28px var(--primitive-warm-glow), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 38%, transparent); }
.world-pool.open .pool-ring { border-color: color-mix(in srgb, var(--primitive-warm-glow) 54%, transparent); }
@ -620,6 +624,9 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.nucleus-panel, .domain-credential { border: 1px solid var(--panel-edge); border-radius: 18px; background: color-mix(in srgb, var(--panel-bg) 64%, transparent); backdrop-filter: blur(22px); box-shadow: 0 26px 80px rgba(0, 0, 0, .48); }
.nucleus-panel { position: absolute; left: 50%; top: 16px; width: 440px; padding: 27px 36px 25px; opacity: 0; transform: translateX(-50%) rotateX(-64deg); transform-origin: 50% 100%; pointer-events: none; transition: opacity .5s ease, transform .55s cubic-bezier(.22, 1, .36, 1); }
.number-nucleus.open .nucleus-panel { opacity: 1; transform: translateX(-50%) rotateX(0); pointer-events: auto; }
.gate-dismiss-layer { position: fixed; z-index: -1; inset: 44px 0 45px; width: auto; height: auto; padding: 0; border: 0; background: color-mix(in srgb, var(--primitive-bg-a) 12%, transparent); cursor: default; }
.gate-close { position: absolute; z-index: 3; top: 12px; right: 13px; width: 32px; height: 32px; padding: 0; border: 1px solid color-mix(in srgb, var(--panel-edge) 72%, transparent); border-radius: 50%; color: var(--content-secondary); background: color-mix(in srgb, var(--primitive-glass) 78%, transparent); font-size: 22px; font-weight: 400; line-height: 28px; cursor: pointer; transition: border-color .2s ease, color .2s ease, background .2s ease; }
.gate-close:hover, .gate-close:focus-visible { border-color: var(--accent-light); color: var(--accent-light); background: color-mix(in srgb, var(--primitive-glass) 94%, transparent); outline: 0; }
.nucleus-panel h2 { margin: 0 0 18px; color: var(--accent-light); text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .3em; }
.nucleus-panel input, .domain-credential input { min-width: 0; width: 100%; height: 45px; padding: 7px 2px; border: 0; border-bottom: 2px solid var(--panel-edge); border-radius: 0; outline: 0; color: var(--content-primary); background: transparent; font-size: 18px; font-weight: 700; letter-spacing: .06em; text-align: center; }
.nucleus-panel input:focus, .domain-credential input:focus { border-color: var(--accent-light); box-shadow: none; }
@ -675,6 +682,8 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
@media (max-width: 900px) {
.d-main { left: 2%; } .d-sub { left: 22%; } .d-zero { right: 22%; } .d-zs { right: 2%; }
.domain-info-card.info-main { left: 18px; } .domain-info-card.info-sub { left: calc(22% - 75px); }
.domain-info-card.info-zero { right: calc(22% - 75px); } .domain-info-card.info-zs { right: 18px; }
.world-pool { width: 150px; } .pool-bay { width: 145px; }
.channel-knowledge { left: 4%; } .channel-code { left: 25%; } .channel-light { right: 25%; } .channel-status { right: 4%; }
.broadcast-stream { left: 5%; }