dynaura 0.0.0-stage → 0.1.0

package/dist/styles.css

@@ -0,0 +1,161 @@
+@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..700&display=swap");
+
+.dynaura-root {
+  --dynaura-font: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
+  --dynaura-spring: cubic-bezier(0.34, 1.45, 0.64, 1); /* fallback: overshoot curve */
+  --dynaura-duration: 700ms;
+  --dynaura-bg: #000;
+  --dynaura-fg: #fff;
+  --dynaura-muted: rgba(255, 255, 255, 0.62);
+  --dynaura-ring: rgba(255, 255, 255, 0.08);
+  --dynaura-btn: rgba(255, 255, 255, 0.14);
+  --dynaura-success: #30d158;
+  --dynaura-error: #ff453a;
+  --dynaura-warning: #ffd60a;
+  --dynaura-info: #0a84ff;
+  --dynaura-loading: #8e8e93;
+  --dynaura-live: #ff9f0a;
+  position: fixed;
+  left: 0; right: 0;
+  box-sizing: border-box;
+  padding: 0 var(--dynaura-offset);
+  display: flex;
+  justify-content: center;
+  pointer-events: none;
+  z-index: 2147483647;
+  font: 500 14px/1.3 var(--dynaura-font);
+  -webkit-font-smoothing: antialiased;
+}
+@supports (transition-timing-function: linear(0, 1)) {
+  .dynaura-root {
+    --dynaura-spring: linear(0, 0.0308, 0.1098, 0.2188, 0.3433, 0.4716, 0.5951, 0.708, 0.8066, 0.8891, 0.9552, 1.0055, 1.0416, 1.0651, 1.0784, 1.0833, 1.0821, 1.0763, 1.0677, 1.0576, 1.0468, 1.0364, 1.0267, 1.0181, 1.0109, 1.005, 1.0005, 0.9972, 0.995, 0.9937, 0.9931, 0.9931, 0.9935, 0.9941, 0.995, 0.9959, 0.9967, 0.9976, 0.9983, 0.9989, 0.9995, 0.9999, 1.0002, 1.0004, 1.0005, 1.0006, 1.0006, 1.0006, 1);
+  }
+}
+.dynaura-root [hidden] { display: none !important; }
+.dynaura-root[data-theme="light"] {
+  --dynaura-bg: #fff; --dynaura-fg: #111; --dynaura-muted: rgba(0, 0, 0, 0.55);
+  --dynaura-ring: rgba(0, 0, 0, 0.08); --dynaura-btn: rgba(0, 0, 0, 0.07);
+  --dynaura-success: #1a7f37; --dynaura-error: #cf2a1f; --dynaura-warning: #9a6700;
+  --dynaura-info: #0969da; --dynaura-loading: #5f6368; --dynaura-live: #b25000;
+}
+@media (prefers-color-scheme: light) {
+  .dynaura-root[data-theme="system"] {
+    --dynaura-bg: #fff; --dynaura-fg: #111; --dynaura-muted: rgba(0, 0, 0, 0.55);
+    --dynaura-ring: rgba(0, 0, 0, 0.08); --dynaura-btn: rgba(0, 0, 0, 0.07);
+    --dynaura-success: #1a7f37; --dynaura-error: #cf2a1f; --dynaura-warning: #9a6700;
+    --dynaura-info: #0969da; --dynaura-loading: #5f6368; --dynaura-live: #b25000;
+  }
+}
+.dynaura-root[data-y="top"] { top: calc(var(--dynaura-offset) + env(safe-area-inset-top, 0px)); }
+.dynaura-root[data-y="bottom"] { bottom: calc(var(--dynaura-offset) + env(safe-area-inset-bottom, 0px)); }
+.dynaura-root[data-x="left"] { justify-content: flex-start; --ox: 0%; }
+.dynaura-root[data-x="center"] { justify-content: center; --ox: 50%; }
+.dynaura-root[data-x="right"] { justify-content: flex-end; --ox: 100%; }
+.dynaura-root[data-y="top"] { --oy: 0%; }
+.dynaura-root[data-y="bottom"] { --oy: 100%; }
+
+.dynaura-drag { pointer-events: auto; touch-action: none; transition: transform var(--dynaura-duration) var(--dynaura-spring); }
+
+.dynaura-island {
+  --state: var(--dynaura-loading);
+  position: relative;
+  overflow: hidden;
+  color: var(--dynaura-fg);
+  background: var(--dynaura-bg);
+  box-shadow: 0 0 0 1px var(--dynaura-ring), 0 12px 32px -10px rgba(0, 0, 0, 0.4), 0 16px 28px -18px var(--state);
+  transform-origin: var(--ox, 50%) var(--oy, 0%);
+  animation: dynaura-in var(--dynaura-duration) var(--dynaura-spring) backwards;
+  user-select: none;
+  -webkit-user-select: none;
+}
+.dynaura-island[data-open="false"] { animation: dynaura-out 380ms cubic-bezier(0.4, 0, 1, 1) both; pointer-events: none; }
+.dynaura-island[data-ready="true"] {
+  transition: width var(--dynaura-duration) var(--dynaura-spring),
+    height var(--dynaura-duration) var(--dynaura-spring),
+    border-radius var(--dynaura-duration) var(--dynaura-spring),
+    box-shadow 400ms ease;
+}
+.dynaura-island[data-expanded="true"] { box-shadow: 0 0 0 1px var(--dynaura-ring), 0 20px 48px -12px rgba(0, 0, 0, 0.45), 0 24px 36px -20px var(--state); }
+.dynaura-island[data-type="success"] { --state: var(--dynaura-success); }
+.dynaura-island[data-type="error"] { --state: var(--dynaura-error); }
+.dynaura-island[data-type="warning"] { --state: var(--dynaura-warning); }
+.dynaura-island[data-type="info"] { --state: var(--dynaura-info); }
+.dynaura-island[data-type="live"] { --state: var(--dynaura-live); }
+
+.dynaura-inner { position: absolute; top: 0; left: 0; width: max-content; max-width: min(380px, 92vw); }
+.dynaura-island[data-expanded="true"] .dynaura-inner { min-width: min(320px, 92vw); }
+
+.dynaura-row { display: flex; align-items: center; gap: 12px; width: max-content; padding: 10px 20px 10px 12px; min-height: 44px; box-sizing: border-box; }
+.dynaura-island[data-expanded="true"] .dynaura-row { padding-top: 14px; }
+.dynaura-badge {
+  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; flex: none;
+  color: var(--state); background: var(--dynaura-btn); background: color-mix(in srgb, var(--state) 16%, transparent);
+  animation: dynaura-pop 500ms var(--dynaura-spring) both;
+}
+.dynaura-title { white-space: nowrap; animation: dynaura-text 450ms ease-out both; }
+.dynaura-trailing { display: flex; align-items: center; margin-left: 4px; color: var(--dynaura-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
+
+/* rolling digits */
+.dynaura-digit, .dynaura-char { display: inline-block; height: 1.3em; line-height: 1.3em; }
+.dynaura-digit { overflow: hidden; }
+.dynaura-strip { display: block; transform: translateY(calc(var(--d, 0) * -1.3em)); transition: transform 600ms var(--dynaura-spring); }
+.dynaura-strip i { display: block; font-style: normal; height: 1.3em; }
+
+.dynaura-body { padding: 2px 20px 20px 20px; opacity: 0; filter: blur(6px); transform: translateY(-6px); transition: opacity 200ms ease, filter 200ms ease, transform 200ms ease; pointer-events: none; }
+.dynaura-island[data-expanded="true"] .dynaura-body { opacity: 1; filter: none; transform: none; pointer-events: auto; transition-duration: 450ms; transition-delay: 90ms; }
+.dynaura-desc { color: var(--dynaura-muted); font-weight: 400; line-height: 1.5; padding-left: 38px; }
+.dynaura-button {
+  all: unset; box-sizing: border-box; cursor: pointer; display: inline-block; margin: 16px 0 0 38px; padding: 8px 16px; border-radius: 999px;
+  background: var(--dynaura-btn); color: var(--state); font: 600 13px/1.3 var(--dynaura-font);
+  transition: transform 200ms var(--dynaura-spring), background 150ms;
+}
+.dynaura-button:hover { background: var(--dynaura-btn); background: color-mix(in srgb, var(--state) 22%, transparent); }
+.dynaura-button:active { transform: scale(0.94); }
+.dynaura-button:focus-visible { outline: 2px solid var(--state); outline-offset: 2px; }
+
+/* card variant: header tab + notch body */
+.dynaura-drag[data-variant="card"] { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.2)) drop-shadow(0 2px 5px rgba(0, 0, 0, 0.12)); }
+.dynaura-island[data-variant="card"] { box-shadow: none; }
+.dynaura-island[data-variant="card"] .dynaura-title { color: var(--state); font-weight: 600; }
+.dynaura-island[data-variant="card"][data-expanded="true"] .dynaura-row { padding-top: 10px; }
+.dynaura-island[data-variant="card"][data-expanded="true"] .dynaura-inner { min-width: min(372px, 92vw); }
+.dynaura-island[data-variant="card"] .dynaura-body { padding: 18px 24px 24px; }
+.dynaura-island[data-variant="card"] .dynaura-desc { padding-left: 0; color: var(--dynaura-fg); font-weight: 400; line-height: 1.35; }
+.dynaura-island[data-variant="card"] .dynaura-button {
+  display: block; width: 100%; margin: 22px 0 0; padding: 13px 16px; text-align: center;
+  background: var(--dynaura-btn); background: color-mix(in srgb, var(--state) 16%, transparent);
+}
+
+/* time-remaining / value bar */
+.dynaura-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--state); opacity: 0.55; transform-origin: left; pointer-events: none; }
+.dynaura-bar[data-mode="none"] { display: none; }
+.dynaura-bar[data-mode="time"] { animation: dynaura-timer linear forwards; }
+.dynaura-island[data-paused="true"] .dynaura-bar[data-mode="time"] { animation-play-state: paused; }
+.dynaura-bar[data-mode="value"] { transform: scaleX(var(--p, 0)); transition: transform 600ms var(--dynaura-spring); opacity: 0.8; }
+.dynaura-root[data-timer="false"] .dynaura-bar[data-mode="time"] { display: none; }
+
+/* icons */
+.dynaura-draw { stroke-dasharray: 30; stroke-dashoffset: 30; animation: dynaura-draw 450ms 120ms cubic-bezier(0.65, 0, 0.35, 1) forwards; }
+.dynaura-spin { transform-origin: 12px 12px; animation: dynaura-rotate 800ms linear infinite; }
+.dynaura-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; animation: dynaura-pulse 1.4s ease-in-out infinite; }
+.dynaura-wave { display: flex; align-items: center; gap: 2px; height: 14px; }
+.dynaura-wave i { width: 3px; height: 100%; border-radius: 2px; background: currentColor; animation: dynaura-wave 900ms ease-in-out infinite; }
+.dynaura-wave i:nth-child(2) { animation-delay: -0.25s; }
+.dynaura-wave i:nth-child(3) { animation-delay: -0.5s; }
+.dynaura-wave i:nth-child(4) { animation-delay: -0.75s; }
+
+@keyframes dynaura-in { from { opacity: 0; transform: translateY(-14px) scale(0.4, 0.5); } to { opacity: 1; transform: none; } }
+@keyframes dynaura-out { to { opacity: 0; transform: translateY(-10px) scale(0.6, 0.5); filter: blur(4px); } }
+@keyframes dynaura-pop { from { transform: scale(0.3); opacity: 0; } to { transform: none; opacity: 1; } }
+@keyframes dynaura-text { from { opacity: 0; filter: blur(5px); transform: translateY(4px); } to { opacity: 1; filter: none; transform: none; } }
+@keyframes dynaura-draw { to { stroke-dashoffset: 0; } }
+@keyframes dynaura-rotate { to { transform: rotate(360deg); } }
+@keyframes dynaura-timer { from { transform: scaleX(1); } to { transform: scaleX(0); } }
+@keyframes dynaura-pulse { 50% { transform: scale(0.65); opacity: 0.55; } }
+@keyframes dynaura-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } }
+
+@media (prefers-reduced-motion: reduce) {
+  .dynaura-drag, .dynaura-island, .dynaura-badge, .dynaura-title, .dynaura-body, .dynaura-draw, .dynaura-strip, .dynaura-button, .dynaura-bar {
+    animation-duration: 1ms !important; animation-delay: 0s !important; transition-duration: 1ms !important; transition-delay: 0s !important;
+  }
+}