oxedyne/daimond/www/css/passkey.css
1.7 KiB, 1 run
created by r2519314175:1119, which is this file's identity for as long as the history lasts, whatever it is later renamed to
download · who wrote it · its history
| 1 | /* passkey.css — the passkey unlock button and its notes. |
| 2 | * |
| 3 | * Theme-aware throughout: every colour is a real variable from variables.css |
| 4 | * (there is no --surface or --bg — those never existed), so the control reads |
| 5 | * correctly in dark, light and lollypop without a single hard-coded literal. |
| 6 | */ |
| 7 | |
| 8 | /* "Use a passkey" on the unlock screen: a full-width secondary button that sits |
| 9 | below the primary Unlock, offered only when a passkey is enrolled. It borrows |
| 10 | the accent as an outline so it reads as an alternative, not the main action. */ |
| 11 | .id-passkey { |
| 12 | width: 100%; |
| 13 | display: flex; |
| 14 | align-items: center; |
| 15 | justify-content: center; |
| 16 | gap: 8px; |
| 17 | background: var(--bg-tertiary); |
| 18 | color: var(--accent-text); |
| 19 | border: 1px solid var(--accent); |
| 20 | border-radius: var(--radius-sm); |
| 21 | padding: 10px 16px; |
| 22 | font-size: var(--fs-base); |
| 23 | margin-top: 10px; |
| 24 | cursor: pointer; |
| 25 | } |
| 26 | .id-passkey:hover { |
| 27 | background: var(--accent-soft); |
| 28 | color: var(--text-primary); |
| 29 | } |
| 30 | .id-passkey:disabled { |
| 31 | opacity: 0.6; |
| 32 | cursor: default; |
| 33 | } |
| 34 | |
| 35 | /* The little key glyph inside the button. */ |
| 36 | .id-passkey .ic { |
| 37 | width: 16px; |
| 38 | height: 16px; |
| 39 | fill: none; |
| 40 | stroke: currentColor; |
| 41 | stroke-width: 2; |
| 42 | stroke-linecap: round; |
| 43 | stroke-linejoin: round; |
| 44 | } |
| 45 | |
| 46 | /* The line under the passkey button. It began as a one-line status for a failed |
| 47 | read, where centring suited it. It now also carries the explanation on the |
| 48 | CREATE screen — that a passkey from another device brings the account across — |
| 49 | which runs to two or three lines, so it is left-aligned with everything else |
| 50 | in the card and given a readable line height. */ |
| 51 | .id-passkey-note { |
| 52 | color: var(--text-muted); |
| 53 | font-size: var(--fs-xs); |
| 54 | line-height: 1.45; |
| 55 | margin-top: 6px; |
| 56 | min-height: 16px; |
| 57 | text-align: left; |
| 58 | } |
| 59 | .id-passkey-note.err { |
| 60 | color: var(--danger); |
| 61 | } |