feat(ui): run Qoder locked lake world template
This commit is contained in:
parent
08f514b9d1
commit
8fb21787b5
5 changed files with 385 additions and 59 deletions
|
|
@ -534,3 +534,158 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
|
|||
.gate-rise h1 { margin: 0; color: var(--content-primary); font-size: clamp(30px, 4.4vw, 42px); font-weight: 650; letter-spacing: .1em; text-shadow: 0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 36%, transparent); animation: gate-text-in 1s ease 1s both; }
|
||||
.gate-rise p { margin: 14px 0 0; color: var(--content-muted); font-size: 14.5px; letter-spacing: .14em; animation: gate-text-in 1s ease 1.5s both; }
|
||||
@keyframes gate-text-in { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }
|
||||
|
||||
/* Qoder 锁版官方世界壳：湖面是结构，不是背景图；功能沿水湾逐层展开。 */
|
||||
.official-world {
|
||||
position: relative; width: 100%; height: 100%; overflow: hidden; isolation: isolate;
|
||||
color: var(--content-secondary);
|
||||
background: linear-gradient(180deg, var(--primitive-bg-a) 0%, var(--primitive-bg-b) 38%, var(--primitive-bg-c) 61%, var(--primitive-bg-d) 100%);
|
||||
transition: opacity .9s ease, background .6s ease;
|
||||
}
|
||||
.official-world.sinking { opacity: 0; }
|
||||
.world-titlebar {
|
||||
position: absolute; z-index: 30; inset: 0 0 auto; height: 44px; display: flex; align-items: center; justify-content: center;
|
||||
padding: 0 16px; border-bottom: 1px solid color-mix(in srgb, var(--panel-edge) 48%, transparent);
|
||||
background: color-mix(in srgb, var(--surface-sky) 36%, transparent); backdrop-filter: blur(16px);
|
||||
}
|
||||
.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; }
|
||||
.world-scene { position: absolute; z-index: 5; inset: 44px 0 45px; min-height: 0; }
|
||||
.world-footer { position: absolute; z-index: 24; inset: auto 0 0; height: 45px; display: flex; align-items: center; justify-content: center; gap: 14px; }
|
||||
.world-footer b { color: var(--content-muted); font-size: 11.5px; font-weight: 600; letter-spacing: .11em; }
|
||||
.world-footer span { color: var(--accent-light); font-size: 11px; font-weight: 700; letter-spacing: .24em; }
|
||||
.world-sky { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
|
||||
.world-nebula { position: absolute; width: 70%; height: 54%; left: 50%; top: -32%; transform: translateX(-50%); filter: blur(10px); background: radial-gradient(closest-side, var(--primitive-nebula-a), var(--primitive-nebula-b) 56%, transparent 76%); }
|
||||
.world-star { position: absolute; border-radius: 50%; background: var(--primitive-star-core); animation: world-star-breathe var(--star-duration) ease-in-out var(--star-delay) infinite; }
|
||||
@keyframes world-star-breathe { 0%, 100% { opacity: .14; transform: scale(.8); } 50% { opacity: .86; transform: scale(1.15); } }
|
||||
.world-mist { position: absolute; z-index: 1; left: 6%; right: 6%; top: 38%; height: 70px; filter: blur(12px); pointer-events: none; background: radial-gradient(60% 100% at 50% 50%, var(--primitive-mist-a), var(--primitive-mist-b) 55%, transparent 78%); }
|
||||
.world-shimmer { position: absolute; z-index: 2; inset: 39% 0 42px; overflow: hidden; pointer-events: none; }
|
||||
.world-shine { position: absolute; width: 38%; height: 130px; border-radius: 50%; filter: blur(34px); animation: world-shine-glide 28s ease-in-out infinite alternate; }
|
||||
.world-shine.cool { left: 6%; top: 12%; background: color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent); }
|
||||
.world-shine.warm { left: 36%; top: 36%; background: color-mix(in srgb, var(--primitive-warm-glow) 19%, transparent); animation-delay: 4s; }
|
||||
@keyframes world-shine-glide { from { transform: translateX(-40px); } to { transform: translateX(48px); } }
|
||||
.world-glint { position: absolute; border-radius: 50%; animation: world-glint var(--glint-duration) ease-in-out var(--glint-delay) infinite; }
|
||||
.world-glint.cool { background: radial-gradient(circle, var(--primitive-star-bright), color-mix(in srgb, var(--primitive-cool-glow) 42%, transparent) 70%, transparent); box-shadow: 0 0 6px var(--primitive-cool-glow); }
|
||||
.world-glint.warm { background: radial-gradient(circle, #fff4d2, color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent) 70%, transparent); box-shadow: 0 0 6px var(--primitive-warm-glow); }
|
||||
@keyframes world-glint { 0%, 100% { opacity: .05; transform: scale(.6); } 50% { opacity: .72; transform: scale(1); } }
|
||||
|
||||
.official-hero { position: absolute; z-index: 10; top: 26px; left: 0; right: 0; text-align: center; }
|
||||
.official-hero h1 { margin: 0; color: var(--content-primary); font-size: clamp(24px, 3vw, 34px); font-weight: 700; letter-spacing: .09em; }
|
||||
.official-hero p { margin: 10px 0 0; color: var(--accent-light); font-size: 12px; font-weight: 600; letter-spacing: .31em; }
|
||||
.world-pool { position: absolute; z-index: 8; width: 190px; height: 100px; padding: 0; border: 0; background: transparent; cursor: pointer; color: inherit; }
|
||||
.pool-bay { position: absolute; left: 50%; top: 0; width: 180px; height: 58px; transform: translateX(-50%); animation: world-pool-float 6.8s ease-in-out infinite; }
|
||||
@keyframes world-pool-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
|
||||
.pool-halo, .pool-heart, .pool-ring { position: absolute; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
|
||||
.pool-halo { width: 100%; height: 100%; filter: blur(2px); background: radial-gradient(closest-side, color-mix(in srgb, var(--primitive-cool-glow) 72%, transparent), color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent) 48%, transparent 74%); animation: world-pool-breathe 5.8s ease-in-out infinite; }
|
||||
.pool-heart { width: 18px; height: 18px; background: radial-gradient(circle at 40% 34%, #eef3ff, color-mix(in srgb, var(--primitive-cool-glow) 62%, transparent) 55%, transparent 80%); box-shadow: 0 0 18px var(--primitive-cool-glow); }
|
||||
.pool-ring { width: 38%; height: 38%; border: 1px solid color-mix(in srgb, var(--primitive-cool-glow) 46%, transparent); animation: world-ripple 5.5s ease-out infinite; }
|
||||
@keyframes world-pool-breathe { 0%, 100% { opacity: .72; scale: .96; } 50% { opacity: 1; scale: 1.06; } }
|
||||
@keyframes world-ripple { 0% { width: 34%; height: 34%; opacity: .5; } 100% { width: 120%; height: 120%; opacity: 0; } }
|
||||
.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); }
|
||||
.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); }
|
||||
.world-pool.open .pool-label b { color: var(--accent-light); }
|
||||
.world-pool.risen { z-index: 15; transform: translateY(-30px) scale(1.16); transition: transform 1.15s cubic-bezier(.22, 1, .36, 1); }
|
||||
.world-scene.resolving .world-pool:not(.risen), .world-scene.resolved .world-pool:not(.risen) { opacity: .32; transition: opacity .6s ease; }
|
||||
.d-main { left: 8%; top: 43%; } .d-sub { left: 26%; top: 38%; } .d-zero { right: 26%; top: 38%; } .d-zs { right: 8%; top: 43%; }
|
||||
.d-fifth { left: 50%; bottom: 9%; transform: translateX(-50%); width: 280px; }
|
||||
.d-fifth .pool-bay { width: 264px; height: 84px; } .d-fifth .pool-label { top: 92px; }
|
||||
.d-fifth.risen { transform: translateX(-50%) translateY(-30px) scale(1.12); }
|
||||
|
||||
.number-nucleus { position: absolute; z-index: 18; left: 50%; top: 52%; width: 440px; height: 230px; transform: translate(-50%, -50%); perspective: 900px; }
|
||||
.nucleus-locus { position: absolute; inset: 0; width: 100%; display: grid; align-content: center; justify-items: center; gap: 18px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: opacity .45s ease, transform .55s ease; }
|
||||
.nucleus-locus i { width: 250px; height: 88px; border-radius: 50%; filter: blur(7px); background: radial-gradient(closest-side, color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent), color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent) 52%, transparent 76%); animation: world-pool-breathe 5.2s ease-in-out infinite; }
|
||||
.nucleus-locus b { color: var(--content-secondary); font-size: 16px; font-weight: 700; letter-spacing: .13em; }
|
||||
.number-nucleus.open .nucleus-locus { opacity: 0; transform: rotateX(58deg) translateY(-12px); pointer-events: none; }
|
||||
.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; }
|
||||
.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; }
|
||||
.nucleus-panel .gate-inf { height: 44px; width: 44px; border-radius: 50%; background: transparent; }
|
||||
.nucleus-panel .gate-submit, .domain-credential .gate-submit { width: 100%; border-radius: 11px; background: var(--accent-light); color: var(--button-primary-text); }
|
||||
.world-welcome, .resolved-heading { position: absolute; z-index: 20; left: 0; right: 0; top: 35%; text-align: center; animation: gate-text-in .8s ease both; }
|
||||
.world-welcome h2, .resolved-heading h2 { margin: 0; color: var(--content-primary); font-size: clamp(22px, 2.7vw, 31px); font-weight: 700; letter-spacing: .09em; }
|
||||
.world-welcome p, .resolved-heading p { margin: 12px 0 0; color: var(--accent-light); font-size: 13px; font-weight: 600; letter-spacing: .24em; }
|
||||
.resolved-heading { top: 25%; }
|
||||
.domain-credential { position: absolute; z-index: 21; left: 50%; top: 43%; width: 440px; padding: 25px 36px 21px; transform: translateX(-50%); text-align: center; animation: credential-rise .65s cubic-bezier(.22, 1, .36, 1) both; }
|
||||
@keyframes credential-rise { from { opacity: 0; transform: translateX(-50%) translateY(30px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }
|
||||
.domain-credential.fade-out { opacity: 0; }
|
||||
.domain-credential form { display: grid; gap: 12px; }
|
||||
.domain-credential h3 { margin: 0 0 3px; color: var(--content-primary); font-size: 18px; font-weight: 700; letter-spacing: .1em; }
|
||||
|
||||
.signed-in-scene { overflow: hidden; }
|
||||
.domain-home, .channel-world { position: absolute; inset: 0; }
|
||||
.world-location { position: absolute; z-index: 10; top: 7%; left: 0; right: 0; text-align: center; }
|
||||
.world-location h1 { margin: 0; color: var(--content-primary); font-size: clamp(28px, 3.5vw, 42px); font-weight: 700; letter-spacing: .08em; }
|
||||
.world-location p { margin: 10px 0 0; color: var(--content-muted); font-size: 13px; font-weight: 600; letter-spacing: .22em; }
|
||||
.broadcast-stream { position: absolute; z-index: 9; left: 9%; top: 31%; display: grid; gap: 15px; }
|
||||
.broadcast-stream p { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--content-secondary); font-size: 14px; font-weight: 600; letter-spacing: .06em; }
|
||||
.broadcast-stream i { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-light); box-shadow: 0 0 15px var(--primitive-warm-glow); }
|
||||
.home-primary { left: 50%; top: 49%; width: 330px; transform: translateX(-50%); }
|
||||
.home-primary .pool-bay { width: 310px; height: 96px; } .home-primary .pool-label { top: 104px; }
|
||||
.home-status { right: 13%; top: 46%; }
|
||||
.world-back { position: absolute; z-index: 18; left: 25px; top: 25px; border: 0; background: transparent; color: var(--content-muted); font-size: 13px; font-weight: 600; cursor: pointer; }
|
||||
.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%; }
|
||||
.world-tool { position: absolute; z-index: 12; inset: 0; display: grid; grid-template-rows: 46px minmax(0, 1fr); background: color-mix(in srgb, var(--surface-depth) 72%, transparent); backdrop-filter: blur(18px); }
|
||||
.tool-worldbar { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; padding: 0 20px; border-bottom: 1px solid var(--panel-edge); background: color-mix(in srgb, var(--panel-bg) 82%, transparent); }
|
||||
.tool-worldbar button { justify-self: start; border: 0; background: transparent; color: var(--content-muted); font-size: 12.5px; cursor: pointer; }
|
||||
.tool-worldbar b { color: var(--content-primary); font-size: 14px; font-weight: 700; letter-spacing: .12em; }
|
||||
.tool-worldbar span { justify-self: end; color: var(--content-muted); font-size: 12px; }
|
||||
.tool-projection { min-width: 0; min-height: 0; overflow: hidden; display: flex; }
|
||||
.tool-projection > * { width: 100%; }
|
||||
.tool-projection .content-page { background: color-mix(in srgb, var(--panel-bg) 54%, transparent); }
|
||||
|
||||
.enterprise-gate { position: absolute; z-index: 80; inset: 44px 0 45px; display: grid; place-items: center; padding: 24px; background: color-mix(in srgb, var(--surface-depth) 70%, transparent); backdrop-filter: blur(22px); }
|
||||
.enterprise-gate > section { width: min(620px, 92vw); padding: 30px 34px; border: 1px solid var(--panel-edge); border-radius: 20px; background: color-mix(in srgb, var(--panel-bg) 90%, transparent); box-shadow: 0 34px 100px rgba(0, 0, 0, .48); }
|
||||
.receipt-step { color: var(--accent-light); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
|
||||
.enterprise-receipt-panel h2 { margin: 12px 0 0; color: var(--content-primary); font-size: 27px; font-weight: 700; }
|
||||
.enterprise-receipt-panel > p { color: var(--content-muted); line-height: 1.75; }
|
||||
.enterprise-receipt-panel dl { margin: 22px 0; }
|
||||
.enterprise-receipt-panel dl div { display: flex; justify-content: space-between; gap: 24px; padding: 11px 0; border-bottom: 1px solid var(--panel-edge); }
|
||||
.enterprise-receipt-panel dt { color: var(--content-muted); } .enterprise-receipt-panel dd { margin: 0; color: var(--content-primary); font-weight: 650; text-align: right; }
|
||||
.enterprise-receipt-panel textarea { width: 100%; min-height: 88px; resize: vertical; padding: 12px 14px; border: 1px solid var(--panel-edge); border-radius: 11px; outline: 0; color: var(--content-secondary); background: var(--primitive-glass); }
|
||||
.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); }
|
||||
.receipt-message { color: var(--accent-light) !important; font-weight: 650; text-align: right; }
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.d-main { left: 2%; } .d-sub { left: 22%; } .d-zero { right: 22%; } .d-zs { right: 2%; }
|
||||
.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%; }
|
||||
}
|
||||
@media (max-height: 720px) {
|
||||
.official-hero { top: 14px; } .official-hero h1 { font-size: 24px; }
|
||||
.d-main, .d-zs { top: 42%; } .d-sub, .d-zero { top: 36%; }
|
||||
.number-nucleus { top: 52%; transform: translate(-50%, -50%) scale(.9); }
|
||||
.resolved-heading { top: 18%; } .domain-credential { top: 34%; transform: translateX(-50%) scale(.9); transform-origin: top center; }
|
||||
.world-location { top: 4%; } .home-primary { top: 45%; }
|
||||
}
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.world-star, .world-glint, .world-shine, .pool-bay, .pool-halo, .pool-ring, .nucleus-locus i { animation: none !important; }
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue