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: 大门v5封存翻转舱——编号模块默认一枚封存徽舱悬在湖面，轻点翻转900ms翻开才见输入格，翻开后半程自动聚焦（冰朔20260816谕：人主动点击模块转一下再输入编号）

Browse source
This commit is contained in:
冰朔 2026-08-16 01:54:57 +08:00
commit d016182c14
2 changed files with 30 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -455,6 +455,19 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.gate-pod { position: relative; z-index: 3; width: min(400px, 88vw); padding: 26px 30px 28px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); animation: pod-float 6.5s ease-in-out infinite; transition: opacity .7s ease, transform .7s ease; }
.gate-pod.fade-out { opacity: 0; transform: translateY(18px) scale(.985); }
@keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
/* 封存翻转舱：湖面上一枚封存徽舱，轻点一下翻转翻开表单面 */
.gate-flip { display: grid; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.32, .72, .3, 1); cursor: pointer; }
.gate-flip.open { transform: rotateY(180deg); cursor: default; }
.pod-face { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.pod-form { transform: rotateY(180deg); }
.pod-sealed { display: grid; justify-items: center; align-content: center; gap: 11px; padding: 20px 6px 14px; }
.sealed-emblem { width: 86px; height: 86px; margin-bottom: 4px; }
.sealed-emblem::before { box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent); }
.sealed-title { color: var(--content-primary); font-size: 16px; font-weight: 600; letter-spacing: .44em; text-indent: .44em; }
.sealed-sub { color: var(--content-faint); font-size: 11px; letter-spacing: .32em; text-indent: .32em; }
.gate-flip:not(.open):hover .sealed-emblem::before { border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); box-shadow: 0 0 40px color-mix(in srgb, var(--primitive-warm-glow) 32%, transparent); }
.gate-flip:not(.open):hover .sealed-sub { color: var(--content-muted); }
.gate-hero { position: relative; z-index: 2; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 0 24px; transition: opacity 1.1s ease, transform 1.1s ease, filter 1.1s ease; }
.gate-hero.veil { opacity: 0; transform: translateY(-14px) scale(1.03); filter: blur(4px); pointer-events: none; }
.gate-hero > * { animation: hero-in 1.1s ease both; }