2 lines
5.6 KiB
CSS
2 lines
5.6 KiB
CSS
|
.mobile-sync-world{min-height:100%;padding:28px 34px 34px;color:var(--text-primary);background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--shine-cool) 34%,transparent),transparent 36%),linear-gradient(180deg,transparent,color-mix(in srgb,var(--bg-d) 70%,transparent));overflow:auto}.mobile-sync-worldbar{display:flex;align-items:center;justify-content:space-between;gap:24px}.mobile-sync-worldbar>button,.mobile-sync-footer button,.mobile-sync-world button{border:1px solid var(--glass-edge);background:var(--glass);color:var(--text-primary);border-radius:999px;padding:10px 16px;font:inherit;font-weight:650;cursor:pointer}.mobile-sync-world button:hover{border-color:var(--glass-edge-hover);background:var(--glass-hover)}.mobile-sync-world button:disabled{opacity:.55;cursor:wait}.mobile-sync-worldbar div{display:grid;gap:3px;text-align:center}.mobile-sync-worldbar span,.mobile-sync-projection header span,.mobile-sync-devices header span,.mobile-sync-captures header span,.mobile-sync-pairing header span{font-size:11px;letter-spacing:.16em;color:var(--text-aux);font-weight:700}.mobile-sync-worldbar b{font-size:18px}.mobile-sync-worldbar em{font-style:normal;color:var(--text-aux);font-size:13px}.mobile-sync-focus{min-height:260px;display:grid;place-items:center;position:relative;text-align:center}.mobile-sync-focus>div:last-child{position:relative;z-index:2;max-width:680px}.mobile-sync-focus h1{margin:10px 0 8px;font-size:clamp(30px,4vw,52px);line-height:1.08;font-weight:650;letter-spacing:-.035em}.mobile-sync-focus p{margin:0 auto;max-width:590px;color:var(--text-body);line-height:1.7}.mobile-sync-focus>div>span{color:var(--star-bright);font-size:12px;letter-spacing:.22em;font-weight:700}.mobile-sync-orbit{position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--pool-cool-core) 45%,transparent),transparent 64%);filter:blur(.2px);opacity:.54}.mobile-sync-orbit:before,.mobile-sync-orbit:after{content:"";position:absolute;inset:18%;border-radius:50%;border:1px solid color-mix(in srgb,var(--star-dim) 34%,transparent)}.mobile-sync-orbit:after{inset:2%;border-color:color-mix(in srgb,var(--star-faint) 18%,transparent)}.mobile-sync-orbit i{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--star-bright);box-shadow:0 0 18px var(--star-bright)}.mobile-sync-orbit i:nth-child(1){left:18%;top:18%}.mobile-sync-orbit i:nth-child(2){right:8%;top:48%}.mobile-sync-orbit i:nth-child(3){left:40%;bottom:2%}.mobile-sync-orbit.is-online{animation:mobile-sync-breathe 5s ease-in-out infinite}.mobile-sync-start{max-width:720px;margin:0 auto;padding:28px;border:1px solid var(--glass-edge);background:var(--glass);border-radius:28px;text-align:center;box-shadow:0 24px 70px color-mix(in srgb,var(--bg-d) 44%,transparent)}.mobile-sync-start b{font-size:18px}.mobile-sync-start p{color:var(--text-body);line-height:1.7;margin:10px auto 20px;max-width:600px}.mobile-sync-start button{background:color-mix(in srgb,var(--pool-warm-core) 30%,var(--glass));padding:12px 22px}.mobile-sync-grid{display:grid;grid-template-columns:minmax(310px,.85fr) minmax(420px,1.15fr);gap:18px;max-width:1180px;margin:0 auto}.mobile-sync-grid>section{border:1px solid var(--glass-edge);background:var(--glass);border-radius:24px;padding:22px;box-shadow:0 18px 48px color-mix(in srgb,var(--bg-d) 30%,transparent)}.mobile-sync-grid section>header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:16px}.mobile-sync-grid h2{font-size:20px;margin:3px 0 0}.mobile-sync-pairing{grid-row:span 2;text-align:center}.mobile-sync-pairing header{text-align:left}.mobile-sync-pairing img{display:block;width:min(260px,88%);margin:8px auto 14px;border-radius:18px;background:#f5f7fc;padding:12px}.mobile-sync-pairing p,.mobile-sync-projection>p,.mobile-sync-devices>p,.mobile-sync-captures>p{color:var(--text-body);line-height:1.65}.mobile-sync-pairing small{display:block;margin-top:12px;color:var(--text-aux)}.mobile-sync-pairing-used{padding:42px 20px}.mobile-sync-metrics{display:grid;g
|
||
|
|
@media (max-width:900px){.mobile-sync-world{padding:20px}.mobile-sync-worldbar{align-items:flex-start}.mobile-sync-worldbar em{display:none}.mobile-sync-grid{grid-template-columns:1fr}.mobile-sync-pairing{grid-row:auto}.mobile-sync-captures{grid-column:auto}.mobile-sync-metrics{grid-template-columns:repeat(2,1fr)}.mobile-sync-footer{align-items:flex-start;flex-direction:column}}
|