@arcblock/did-connect-service 4.0.6 → 4.0.7

package/dist/assets/login.7b12c6dc.css

@@ -0,0 +1,662 @@
+
+
+  :root {
+    /* Backgrounds — layered depth */
+    --bg-root:      #0a0a0b;
+    --bg-surface:   #141416;
+    --bg-card:      #1c1c20;
+    --bg-elevated:  #232328;
+    --bg-hover:     #2b2b34;
+    --bg-active:    #33333e;
+    --bg-input:     rgba(255,255,255,0.06);
+
+    /* Borders — semi-transparent for adaptability */
+    --border:       rgba(255,255,255,0.10);
+    --border-subtle:rgba(255,255,255,0.06);
+    --border-strong:rgba(255,255,255,0.15);
+    --border-focus: rgba(255,255,255,0.25);
+
+    /* Text hierarchy */
+    --text:         #f5f5f7;
+    --text-secondary:#9394a1;
+    --text-tertiary:#767684;
+    --text-placeholder:#5e5f6e;
+    --text-white:   #ffffff;
+
+    /* Accents */
+    --blue:         #6c47ff;
+    --blue-hover:   #5f15fe;
+    --blue-light:   rgba(108,71,255,0.15);
+    --blue-muted:   #9280ff;
+    --red:          #e02e2e;
+    --red-light:    rgba(224,46,46,0.15);
+    --red-text:     #f98a8a;
+    --green:        #15892b;
+    --green-light:  rgba(21,137,43,0.15);
+    --green-text:   #49dc6e;
+    --yellow:       #fd7224;
+    --yellow-light: rgba(253,114,36,0.15);
+    --yellow-text:  #fd9357;
+    --info:         #236dd7;
+    --info-light:   rgba(35,109,215,0.15);
+    --info-text:    #73acfa;
+
+    /* Radii */
+    --radius-xs:    4px;
+    --radius-sm:    6px;
+    --radius:       8px;
+    --radius-lg:    12px;
+    --radius-full:  9999px;
+
+    /* Shadows */
+    --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.2);
+    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
+    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.4);
+    --shadow-focus: 0 0 0 1px rgba(255,255,255,0.12), 0 0 0 3px rgba(108,71,255,0.3);
+  }
+
+
+  [data-theme="light"] {
+    --bg-root:      #f8f9fa;
+    --bg-surface:   #ffffff;
+    --bg-card:      #ffffff;
+    --bg-elevated:  #f0f1f3;
+    --bg-hover:     #e9eaec;
+    --bg-active:    #dddee1;
+    --bg-input:     rgba(0,0,0,0.04);
+
+    --border:       rgba(0,0,0,0.10);
+    --border-subtle:rgba(0,0,0,0.06);
+    --border-strong:rgba(0,0,0,0.15);
+    --border-focus: rgba(0,0,0,0.25);
+
+    --text:         #1a1a1a;
+    --text-secondary:#6b7280;
+    --text-tertiary:#9ca3af;
+    --text-placeholder:#c0c5ce;
+    --text-white:   #1a1a1a;
+
+    --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px -1px rgba(0,0,0,0.06);
+    --shadow-md:  0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
+    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.12), 0 4px 6px -4px rgba(0,0,0,0.08);
+    --shadow-focus: 0 0 0 1px rgba(0,0,0,0.08), 0 0 0 3px rgba(108,71,255,0.2);
+  }
+
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+  html { color-scheme: dark; }
+  html[data-theme="light"] { color-scheme: light; }
+  body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    background: var(--bg-root);
+    color: var(--text);
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    font-size: 14px;
+    line-height: 1.43;
+  }
+  a { color: var(--blue-muted); text-decoration: none; }
+  a:hover { text-decoration: underline; }
+  .hidden { display: none; }
+
+
+/* Layout */
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-image: radial-gradient(ellipse at 50% 0%, rgba(108,71,255,0.08) 0%, transparent 60%);
+}
+
+/* Card — fixed width prevents shrinking when views switch */
+.card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 48px 40px;
+  width: min(400px, calc(100vw - 32px));
+  text-align: center;
+  box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(108,71,255,0.15);
+}
+
+/* Brand header */
+.brand-header { margin-bottom: 24px; }
+.app-logo {
+  width: 48px;
+  height: 48px;
+  border-radius: var(--radius-sm);
+  object-fit: contain;
+  margin-bottom: 16px;
+}
+h1 {
+  font-size: 24px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: var(--text-white);
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  /* Never let a long "Sign in to {appName}" blow past two lines — clamp with
+     an ellipsis so the card height stays stable. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.subtitle {
+  font-size: 14px;
+  color: var(--text-secondary);
+  margin-bottom: 0;
+  line-height: 1.5;
+}
+.federated-hint {
+  font-size: 12px;
+  color: var(--text-secondary);
+  margin-top: 6px;
+  margin-bottom: 0;
+  opacity: 0.7;
+}
+
+/* Input */
+.input {
+  width: 100%;
+  height: 36px;
+  padding: 0 12px;
+  font-size: 14px;
+  color: var(--text);
+  background: var(--bg-input);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  outline: none;
+  margin-bottom: 16px;
+  transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+.input:focus { border-color: var(--blue); box-shadow: var(--shadow-focus); }
+.input::placeholder { color: var(--text-placeholder); }
+
+/* Button */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  width: 100%;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--blue);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
+  line-height: 1;
+}
+.btn:hover { background: var(--blue-hover); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(108,71,255,0.3); }
+.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; }
+.btn:focus-visible { box-shadow: var(--shadow-focus); }
+.btn svg { width: 18px; height: 18px; flex-shrink: 0; }
+.btn-secondary {
+  background: transparent;
+  border: 1px solid var(--border-strong);
+  color: var(--text);
+}
+.btn-secondary:hover { background: var(--bg-hover); border-color: rgba(255,255,255,0.20); }
+
+/* Status */
+.status {
+  margin-top: 16px;
+  font-size: 13px;
+  min-height: 20px;
+  color: var(--text-secondary);
+}
+.status.error { color: var(--red-text); }
+
+/* Name row (passkey registration) */
+.name-row { display: none; }
+.name-row.visible { display: block; }
+
+/* Passkey section + secondary text action ("First time? Create a passkey") */
+.passkey-section > .btn + .passkey-alt,
+.passkey-section > .name-row + .btn { margin-top: 10px; }
+.passkey-alt {
+  display: block;
+  width: 100%;
+  margin-top: 10px;
+  padding: 4px;
+  background: none;
+  border: none;
+  font-size: 13px;
+  color: var(--text-secondary);
+  cursor: pointer;
+  text-align: center;
+  transition: color 0.15s ease;
+}
+.passkey-alt:hover { color: var(--text); text-decoration: underline; }
+.passkey-alt:focus-visible { box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); outline: none; }
+
+/* Divider */
+.divider {
+  display: flex;
+  align-items: center;
+  margin: 20px 0;
+  color: var(--text-secondary);
+  font-size: 13px;
+}
+.divider::before, .divider::after {
+  content: '';
+  flex: 1;
+  border-bottom: 1px solid var(--border);
+}
+.divider::before { margin-right: 12px; }
+.divider::after { margin-left: 12px; }
+
+/* DID Wallet section (methods view) */
+.did-wallet-section { margin-top: 8px; }
+
+/* QR view */
+.qr-view {
+  position: relative;
+  margin: 20px auto;
+  display: flex;
+  justify-content: center;
+  min-height: 220px;
+  align-items: center;
+}
+.qr-placeholder {
+  width: 220px;
+  height: 220px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius);
+  background: var(--bg-elevated);
+}
+.qr-spinner {
+  display: inline-block;
+  width: 32px; height: 32px;
+  border: 3px solid var(--border-strong);
+  border-top-color: var(--blue-muted);
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+#did-connect-status {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+/* Connect result state */
+.connect-result {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 120px;
+  margin: 32px 0;
+  animation: fadeIn 200ms ease-out;
+}
+.result-icon {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  font-weight: bold;
+}
+.result-error {
+  background: rgba(239, 68, 68, 0.15);
+  color: var(--red-text);
+  border: 2px solid rgba(239, 68, 68, 0.3);
+}
+.result-loading {
+  background: transparent;
+}
+.result-loading .qr-spinner {
+  width: 36px;
+  height: 36px;
+}
+.result-back-btn {
+  margin-top: 16px;
+}
+@keyframes fadeIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
+
+/* QR timeout overlay */
+.qr-timeout-overlay {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 12px;
+  background: rgba(0, 0, 0, 0.65);
+  border-radius: var(--radius);
+  backdrop-filter: blur(2px);
+}
+.qr-timeout-overlay .timeout-text {
+  font-size: 13px;
+  color: #fff;
+}
+.qr-timeout-overlay .refresh-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: 6px 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #fff;
+  background: var(--blue);
+  border: none;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.qr-timeout-overlay .refresh-btn:hover {
+  background: var(--blue-hover);
+}
+/* Connect status views (scanned / success) */
+.connect-status-icon {
+  position: relative;
+  width: 72px;
+  height: 72px;
+  margin: 16px auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+@keyframes connectSpin { to { transform: rotate(360deg); } }
+.connect-spinner-ring {
+  position: absolute;
+  inset: 0;
+  width: 72px;
+  height: 72px;
+  border-radius: 50%;
+  border: 3px solid rgba(255,255,255,0.1);
+  border-top-color: var(--blue, #6c47ff);
+  animation: connectSpin 0.8s linear infinite;
+}
+.connect-status-badge {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 44px;
+  height: 44px;
+}
+.connect-status-badge svg { width: 36px; height: 36px; }
+.connect-status-icon.connect-success svg { animation: fadeIn 0.3s ease; }
+.connect-subtitle {
+  font-size: 13px;
+  color: var(--text-secondary, #9394a1);
+  text-align: center;
+  margin: 4px 0 0;
+}
+.status.success { color: #49dc6e; font-weight: 500; }
+.deep-link-btn {
+  margin-top: 12px;
+  text-decoration: none;
+}
+
+/* Email section (methods view) */
+.email-section { margin-top: 8px; }
+
+/* Back button */
+.back-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 14px;
+  cursor: pointer;
+  padding: 0;
+  margin-bottom: 16px;
+  float: left;
+}
+.back-btn:hover { color: var(--text); }
+.back-btn svg { width: 18px; height: 18px; }
+/* Escape hatch — a quiet "Cancel" link, top-left of the card, mirroring the
+   locale switcher (top-right). Conventional spot for a standalone auth card.
+   Low in the hierarchy (tertiary color, small) so it never competes with the
+   auth methods; it's an exit, not an action. */
+.home-link {
+  position: absolute;
+  top: 16px;
+  /* Align the arrow's left edge to the content column (card's 40px padding), so
+     Cancel sits on the same left line as the title and buttons — no left padding
+     of its own, which would push it off that line. */
+  left: 40px;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  background: none;
+  border: none;
+  color: var(--text-tertiary);
+  font-size: 13px;
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  padding: 2px 4px 2px 0;
+  transition: color 0.15s ease;
+}
+.home-link:hover { color: var(--text-secondary); }
+.home-link svg { width: 16px; height: 16px; }
+
+/* View title */
+.view-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--text-white);
+  margin-bottom: 8px;
+  clear: both;
+  padding-top: 8px;
+}
+
+/* OAuth section — single provider (legacy) */
+.oauth-section { margin-top: 0; }
+
+/* OAuth grid — 2+ providers in 2-column layout (legacy) */
+.oauth-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+.oauth-grid .oauth-btn:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+/* Unified secondary methods grid — 2-column layout */
+.methods-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+/* Odd last child (e.g. DID Wallet when total is odd) spans full width */
+.methods-grid .method-btn:last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+.method-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  min-height: 36px;
+  padding: 6px 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease, border-color 0.15s ease, opacity 0.2s ease;
+  white-space: normal;
+}
+.method-btn:hover { background: var(--bg-hover); border-color: var(--blue-muted); }
+.method-btn:disabled { cursor: default; pointer-events: none; }
+.method-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
+
+.oauth-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--text);
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition: background-color 0.15s ease, opacity 0.2s ease, border-color 0.2s ease;
+  margin-bottom: 0;
+}
+.oauth-section .oauth-btn { margin-bottom: 8px; }
+.oauth-btn:hover { background: var(--bg-hover); }
+.oauth-btn:disabled { cursor: default; pointer-events: none; }
+.oauth-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
+.oauth-btn-loading {
+  opacity: 0.8;
+  border-color: var(--blue);
+  color: var(--text-secondary);
+}
+@keyframes oauth-spin { to { transform: rotate(360deg); } }
+.oauth-spinner {
+  display: inline-block;
+  width: 14px; height: 14px;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--blue-muted);
+  border-radius: 50%;
+  animation: oauth-spin 0.6s linear infinite;
+}
+.oauth-check { color: var(--green-text); font-size: 16px; }
+
+/* Browser compatibility warning */
+.compat-warning {
+  font-size: 13px;
+  color: var(--text-tertiary);
+  padding: 12px;
+  background: var(--bg-elevated);
+  border-radius: var(--radius-sm);
+  margin-bottom: 16px;
+}
+
+/* Trust footer */
+.login-footer {
+  margin-top: 24px;
+  padding-top: 20px;
+  border-top: 1px solid var(--border);
+}
+.secured-badge {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+.secured-badge svg { width: 14px; height: 14px; flex-shrink: 0; }
+.footer-links {
+  margin-top: 8px;
+  font-size: 12px;
+  color: var(--text-tertiary);
+}
+.footer-links a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+.footer-links a:hover { text-decoration: underline; }
+
+/* ─── Animations ─────────────────────────────────────────────── */
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+.card[data-view] { animation: fadeIn 200ms ease-out; }
+
+/* QR code scale-in */
+.qr-view { animation: qrScaleIn 300ms ease-out; }
+@keyframes qrScaleIn {
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+}
+
+/* Button loading spinner */
+@keyframes spin { to { transform: rotate(360deg); } }
+.btn-spinner {
+  display: inline-block;
+  width: 16px; height: 16px;
+  border: 2px solid rgba(255,255,255,0.3);
+  border-top-color: #fff;
+  border-radius: 50%;
+  animation: spin 0.6s linear infinite;
+}
+
+/* Success checkmark */
+@keyframes checkDraw {
+  from { stroke-dashoffset: 24; }
+  to { stroke-dashoffset: 0; }
+}
+.success-check {
+  display: inline-block;
+  width: 20px; height: 20px;
+  vertical-align: middle;
+}
+.success-check path {
+  stroke-dasharray: 24;
+  stroke-dashoffset: 24;
+  animation: checkDraw 400ms ease-out forwards;
+}
+
+/* Light theme background gradient adjustment */
+[data-theme="light"] body {
+  background-image: radial-gradient(ellipse at 50% 0%, rgba(108,71,255,0.05) 0%, transparent 60%);
+}
+[data-theme="light"] .card {
+  box-shadow: var(--shadow-lg), 0 0 80px -20px rgba(108,71,255,0.08);
+}
+[data-theme="light"] .btn:hover {
+  box-shadow: 0 2px 8px rgba(108,71,255,0.15);
+}
+
+/* Language switcher */
+.locale-switcher {
+  position: absolute;
+  top: 16px;
+  right: 16px;
+}
+.locale-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 4px 10px;
+  font-size: 12px;
+  color: var(--text-secondary);
+  background: var(--bg-elevated);
+  border: 1px solid var(--border-subtle);
+  border-radius: var(--radius-full);
+  cursor: pointer;
+  transition: color 0.15s, border-color 0.15s;
+}
+.locale-btn:hover {
+  color: var(--text);
+  border-color: var(--border-strong);
+}
+.locale-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
+.card { position: relative; }