openvibers/openvibe.network Commits
Nothing spins: the home's orbit holds still and breathes; sign-in and email checks pulse (#467)
Changes
@@@ -135,14 +135,13 @@ a{color:inherit}/* The orbit (server/home/render.js orbit()): rings turning in opposite directions, every icon upright. */.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}.orb-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);filter:blur(6px);animation:orb-breathe 6s ease-in-out infinite}--.orb-ring{position:absolute;inset:0;border-radius:50%;animation:orb-spin 90s linear infinite}--.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent)}++.orb-ring{position:absolute;inset:0;border-radius:50%}++.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent);animation:orb-dash 7s ease-in-out infinite alternate}.orb-ring.r1{--R:31cqw}.orb-ring.r1::before{inset:19%}--.orb-ring.r2{--R:45cqw;animation-duration:140s;animation-direction:reverse}.orb-ring.r2::before{inset:5%;opacity:.55}++.orb-ring.r2{--R:45cqw}.orb-ring.r2::before{inset:5%;opacity:.55;animation-delay:-3.5s}.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary)}.orb-node.is-big{width:58px;height:58px;margin:-29px}--.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%;animation:orb-spin 90s linear infinite reverse}--.r2 .orb-face{animation-duration:140s;animation-direction:normal}++.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%}.orb-face .ov-icon{display:grid;place-items:center;width:100%;height:100%;flex:none;border-radius:50%;background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-light) 30%,transparent),0 8px 22px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,1.4,.3,1),box-shadow .3s}.orb-name{font-size:11.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--bg-primary) 78%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.orb-ring.r1{z-index:2}.orb-core{z-index:3}@@@ -150,7 +149,7 @@ a{color:inherit}.orb-node:hover .orb-name,.orb-node:focus-visible .orb-name{color:var(--text-primary)}.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-primary);text-align:center}.orb-core b{font-size:15px;font-weight:800;margin-top:6px}.orb-core small{font-size:12px;color:var(--text-muted)}--@keyframes orb-spin{to{transform:rotate(360deg)}}++@keyframes orb-dash{to{opacity:.3}}@keyframes orb-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}@media (prefers-reduced-motion:reduce){.orb-ring,.orb-face,.orb-glow{animation:none}}html[data-ov-motion=reduced] .orb-ring,html[data-ov-motion=reduced] .orb-face,html[data-ov-motion=reduced] .orb-glow{animation:none}@@@ -51,8 +51,8 @@ li.done .dot{background:var(--success);border-color:var(--success);color:#fff;anli.skip .dot{color:var(--text-muted)}li.now{background:rgba(var(--accent-rgb),.08);color:var(--text-primary)}li.now .dot{border-color:var(--accent);color:var(--accent-light)}--li.now .dot i{animation:spin 1s linear infinite}--@keyframes spin{to{transform:rotate(360deg)}}++li.now .dot i{animation:breathe 1.2s ease-in-out infinite}++@keyframes breathe{50%{opacity:.35;transform:scale(.8)}}@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}.foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--text-muted);position:relative}.foot a{color:var(--accent-light);text-decoration:none;font-weight:600}@@@ -43,8 +43,8 @@ body{background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}.glyph{position:relative;width:96px;height:96px;margin:0 auto 22px}.ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.18)}--.ring.spin{border-top-color:var(--accent);animation:spin 1s linear infinite}--@keyframes spin{to{transform:rotate(360deg)}}++.ring.spin{border-color:var(--accent);animation:ring-pulse 1.4s ease-out infinite}++@keyframes ring-pulse{from{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}to{box-shadow:0 0 0 14px transparent}}.glyph .ico{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:var(--accent-light);transition:transform .35s cubic-bezier(.2,1.4,.3,1),color .3s}.card[data-state="ok"] .ico{color:var(--success-text, var(--success));transform:scale(1.12)}.card[data-state="bad"] .ico{color:var(--danger-text, var(--danger))}
@@ -135,14 +135,13 @@ a{color:inherit}
@@ -135,14 +135,13 @@ a{color:inherit}
/* The orbit (server/home/render.js orbit()): rings turning in opposite directions, every icon upright. */
/* The orbit (server/home/render.js orbit()): rings turning in opposite directions, every icon upright. */
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.orbit{position:relative;width:min(100%,460px);aspect-ratio:1;margin:0 auto;container-type:inline-size}
.orb-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);filter:blur(6px);animation:orb-breathe 6s ease-in-out infinite}
.orb-glow{position:absolute;inset:22%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 34%,transparent),transparent);filter:blur(6px);animation:orb-breathe 6s ease-in-out infinite}
-.orb-ring{position:absolute;inset:0;border-radius:50%;animation:orb-spin 90s linear infinite}
-.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent)}
+.orb-ring{position:absolute;inset:0;border-radius:50%}
+.orb-ring::before{content:"";position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--accent-light) 30%,transparent);animation:orb-dash 7s ease-in-out infinite alternate}
.orb-ring.r1{--R:31cqw}.orb-ring.r1::before{inset:19%}
.orb-ring.r1{--R:31cqw}.orb-ring.r1::before{inset:19%}
-.orb-ring.r2{--R:45cqw;animation-duration:140s;animation-direction:reverse}.orb-ring.r2::before{inset:5%;opacity:.55}
+.orb-ring.r2{--R:45cqw}.orb-ring.r2::before{inset:5%;opacity:.55;animation-delay:-3.5s}
.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary)}
.orb-node{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;transform:rotate(calc(360deg / var(--n) * var(--i))) translateY(calc(-1 * var(--R))) rotate(calc(-360deg / var(--n) * var(--i)));text-decoration:none;color:var(--text-primary)}
.orb-node.is-big{width:58px;height:58px;margin:-29px}
.orb-node.is-big{width:58px;height:58px;margin:-29px}
-.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%;animation:orb-spin 90s linear infinite reverse}
-.r2 .orb-face{animation-duration:140s;animation-direction:normal}
+.orb-face{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;height:100%}
.orb-face .ov-icon{display:grid;place-items:center;width:100%;height:100%;flex:none;border-radius:50%;background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-light) 30%,transparent),0 8px 22px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,1.4,.3,1),box-shadow .3s}
.orb-face .ov-icon{display:grid;place-items:center;width:100%;height:100%;flex:none;border-radius:50%;background:color-mix(in srgb,var(--bg-secondary) 88%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent-light) 30%,transparent),0 8px 22px rgba(0,0,0,.35);transition:transform .3s cubic-bezier(.2,1.4,.3,1),box-shadow .3s}
.orb-name{font-size:11.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--bg-primary) 78%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.orb-name{font-size:11.5px;font-weight:700;color:var(--text-secondary);white-space:nowrap;padding:1px 7px;border-radius:999px;background:color-mix(in srgb,var(--bg-primary) 78%,transparent);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.orb-ring.r1{z-index:2}.orb-core{z-index:3}
.orb-ring.r1{z-index:2}.orb-core{z-index:3}
@@ -150,7 +149,7 @@ a{color:inherit}
@@ -150,7 +149,7 @@ a{color:inherit}
.orb-node:hover .orb-name,.orb-node:focus-visible .orb-name{color:var(--text-primary)}
.orb-node:hover .orb-name,.orb-node:focus-visible .orb-name{color:var(--text-primary)}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-primary);text-align:center}
.orb-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:2px;text-decoration:none;color:var(--text-primary);text-align:center}
.orb-core b{font-size:15px;font-weight:800;margin-top:6px}.orb-core small{font-size:12px;color:var(--text-muted)}
.orb-core b{font-size:15px;font-weight:800;margin-top:6px}.orb-core small{font-size:12px;color:var(--text-muted)}
-@keyframes orb-spin{to{transform:rotate(360deg)}}
+@keyframes orb-dash{to{opacity:.3}}
@keyframes orb-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@keyframes orb-breathe{0%,100%{opacity:.7;transform:scale(.95)}50%{opacity:1;transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.orb-ring,.orb-face,.orb-glow{animation:none}}
@media (prefers-reduced-motion:reduce){.orb-ring,.orb-face,.orb-glow{animation:none}}
html[data-ov-motion=reduced] .orb-ring,html[data-ov-motion=reduced] .orb-face,html[data-ov-motion=reduced] .orb-glow{animation:none}
html[data-ov-motion=reduced] .orb-ring,html[data-ov-motion=reduced] .orb-face,html[data-ov-motion=reduced] .orb-glow{animation:none}
@@ -51,8 +51,8 @@ li.done .dot{background:var(--success);border-color:var(--success);color:#fff;an
@@ -51,8 +51,8 @@ li.done .dot{background:var(--success);border-color:var(--success);color:#fff;an
li.skip .dot{color:var(--text-muted)}
li.skip .dot{color:var(--text-muted)}
li.now{background:rgba(var(--accent-rgb),.08);color:var(--text-primary)}
li.now{background:rgba(var(--accent-rgb),.08);color:var(--text-primary)}
li.now .dot{border-color:var(--accent);color:var(--accent-light)}
li.now .dot{border-color:var(--accent);color:var(--accent-light)}
-li.now .dot i{animation:spin 1s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
+li.now .dot i{animation:breathe 1.2s ease-in-out infinite}
+@keyframes breathe{50%{opacity:.35;transform:scale(.8)}}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes pop{0%{transform:scale(.5)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--text-muted);position:relative}
.foot{display:flex;justify-content:space-between;align-items:center;margin-top:16px;font-size:12px;color:var(--text-muted);position:relative}
.foot a{color:var(--accent-light);text-decoration:none;font-weight:600}
.foot a{color:var(--accent-light);text-decoration:none;font-weight:600}
@@ -43,8 +43,8 @@ body{background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',
@@ -43,8 +43,8 @@ body{background:var(--bg-primary);color:var(--text-primary);font-family:'Inter',
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.glyph{position:relative;width:96px;height:96px;margin:0 auto 22px}
.glyph{position:relative;width:96px;height:96px;margin:0 auto 22px}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.18)}
.ring{position:absolute;inset:0;border-radius:50%;border:3px solid rgba(var(--accent-rgb),.18)}
-.ring.spin{border-top-color:var(--accent);animation:spin 1s linear infinite}
-@keyframes spin{to{transform:rotate(360deg)}}
+.ring.spin{border-color:var(--accent);animation:ring-pulse 1.4s ease-out infinite}
+@keyframes ring-pulse{from{box-shadow:0 0 0 0 rgba(var(--accent-rgb),.45)}to{box-shadow:0 0 0 14px transparent}}
.glyph .ico{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:var(--accent-light);transition:transform .35s cubic-bezier(.2,1.4,.3,1),color .3s}
.glyph .ico{position:absolute;inset:0;display:grid;place-items:center;font-size:38px;color:var(--accent-light);transition:transform .35s cubic-bezier(.2,1.4,.3,1),color .3s}
.card[data-state="ok"] .ico{color:var(--success-text, var(--success));transform:scale(1.12)}
.card[data-state="ok"] .ico{color:var(--success-text, var(--success));transform:scale(1.12)}
.card[data-state="bad"] .ico{color:var(--danger-text, var(--danger))}
.card[data-state="bad"] .ico{color:var(--danger-text, var(--danger))}