openvibers/openvibe.shared ov-locker.css

ov-locker.css

main 11.9 KB · 128 lines · css

Raw HistoryBlame Repository
1/* openvibe-shared/ov-locker.css — the look of ov-locker.js: a locked item's card, and the sheets that make and unlock
2 * your locker. The same tokens and fallbacks as ov-share.css, so the two read as one family. Nothing spins. */
3
4.ovl-sheet, .ovl-card {
5 --ovl-accent: var(--accent, #3b82f6);
6 --ovl-on-accent: var(--on-accent, #fff);
7 --ovl-surface: var(--bg-card, var(--bg-secondary, Canvas));
8 --ovl-text: var(--text-primary, CanvasText);
9 --ovl-muted: var(--text-muted, var(--text-secondary, color-mix(in srgb, CanvasText 60%, Canvas)));
10 --ovl-line: var(--border, color-mix(in srgb, CanvasText 14%, transparent));
11 --ovl-hover: var(--bg-hover, color-mix(in srgb, CanvasText 7%, transparent));
12 --ovl-field: var(--bg-input, var(--bg-tertiary, Field));
13 --ovl-bad: var(--danger, #ef4444);
14 --ovl-ok: var(--success, #16a34a);
15 --ovl-lockhue: color-mix(in srgb, var(--ovl-accent) 55%, #8b5cf6);
16 color: var(--ovl-text); font-family: inherit; font-size: 14px; line-height: 1.5; text-align: start;
17}
18.ovl-sheet *, .ovl-card * { box-sizing: border-box; }
19
20/* ── The sheet ──────────────────────────────────────────────────────────────────────────────────────────── */
21.ovl-sheet {
22 box-sizing: border-box; width: min(460px, calc(100vw - 24px)); max-width: none; max-height: min(90dvh, 760px); max-height: min(90vh, 760px);
23 margin: auto; padding: 0; overflow: hidden; background: var(--ovl-surface); border: 1px solid var(--ovl-line); border-radius: var(--ov-radius-3, 20px);
24 box-shadow: 0 28px 70px -18px rgb(0 0 0 / .5), 0 4px 14px rgb(0 0 0 / .14);
25 opacity: 0; transform: translateY(10px) scale(.985); transition: opacity .16s ease, transform .2s cubic-bezier(.2, .8, .2, 1);
26}
27.ovl-sheet.is-open { opacity: 1; transform: none; }
28.ovl-sheet::backdrop { background: rgb(6 10 16 / .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
29html.ovl-locked, html.ovl-locked body { overflow: hidden; }
30.ovl-box { display: flex; flex-direction: column; max-height: inherit; min-height: 0; }
31.ovl-head { display: flex; align-items: center; gap: 10px; padding: 16px 10px 8px 20px; }
32.ovl-title { flex: 1; min-width: 0; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.3; }
33.ovl-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 20px 20px; display: grid; align-content: start; gap: 14px; }
34@media (max-width: 640px), (pointer: coarse) and (max-width: 900px) {
35 .ovl-sheet { width: 100%; max-width: 100%; margin: auto 0 0; border: 0; border-radius: var(--ov-radius-3, 20px) var(--ov-radius-3, 20px) 0 0;
36 opacity: 1; transform: translateY(100%); transition: transform .26s cubic-bezier(.2, .85, .25, 1); }
37 .ovl-sheet.is-open { transform: none; }
38 .ovl-head { position: relative; padding-top: 20px; }
39 .ovl-head::before { content: ""; position: absolute; top: 7px; left: 50%; width: 38px; height: 5px; margin-left: -19px; border-radius: 99px; background: color-mix(in srgb, var(--ovl-text) 22%, transparent); }
40 .ovl-body { padding: 4px max(16px, env(safe-area-inset-right, 0px)) max(20px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); font-size: 15px; }
41}
42
43/* ── Words, fields, buttons ─────────────────────────────────────────────────────────────────────────────── */
44.ovl-lead { margin: 0; color: var(--ovl-muted); font-size: 14px; }
45.ovl-muted { margin: 0; color: var(--ovl-muted); font-size: 14px; max-width: 42ch; }
46.ovl-label { display: block; margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ovl-muted); }
47.ovl-hint { display: block; font-size: 12.5px; color: var(--ovl-muted); }
48.ovl-msg { margin: 0; min-height: 1em; font-size: 13px; color: var(--ovl-muted); }
49.ovl-msg:empty { display: none; }
50.ovl-msg.is-bad { color: var(--danger-text, var(--ovl-bad)); }
51.ovl-form { display: grid; gap: 12px; margin: 0; }
52.ovl-field { display: grid; gap: 6px; min-width: 0; }
53.ovl-inputrow { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 46px; padding: 0 4px 0 12px; background: var(--ovl-field); border: 1px solid var(--ovl-line); border-radius: 12px; transition: border-color .14s ease, box-shadow .14s ease; }
54.ovl-inputrow:focus-within, .ovl-wordsin:focus { border-color: var(--ovl-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovl-accent) 26%, transparent); outline: none; }
55.ovl-input { flex: 1; min-width: 0; width: 100%; height: 44px; padding: 0; border: 0; outline: 0; background: none; color: var(--ovl-text); font: inherit; font-size: 15px; letter-spacing: .01em; }
56.ovl-wordsin { width: 100%; height: auto; min-height: 110px; padding: 10px 12px; resize: vertical; background: var(--ovl-field); border: 1px solid var(--ovl-line); border-radius: 12px; font: 15px/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
57@media (pointer: coarse) { .ovl-input, .ovl-wordsin { font-size: 16px; } }
58.ovl-btn {
59 -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 18px; margin: 0;
60 border: 1px solid var(--ovl-line); border-radius: 12px; background: transparent; color: var(--ovl-text); font: inherit; font-size: 15px; font-weight: 650; cursor: pointer;
61 transition: background-color .14s ease, transform .1s ease;
62}
63.ovl-btn:hover:not(:disabled) { background: var(--ovl-hover); }
64.ovl-btn:active:not(:disabled) { transform: scale(.98); }
65.ovl-btn:disabled { opacity: .55; cursor: default; }
66.ovl-btn.is-primary { background: var(--ovl-accent); border-color: var(--ovl-accent); color: var(--ovl-on-accent); }
67.ovl-btn.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--ovl-accent) 88%, #000); }
68.ovl-btn.is-quiet { border-color: var(--ovl-line); min-height: 40px; font-size: 14px; }
69.ovl-btn:focus-visible, .ovl-iconbtn:focus-visible, .ovl-link:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ovl-accent) 40%, transparent); }
70.ovl-iconbtn { -webkit-appearance: none; appearance: none; flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 10px; background: none; color: var(--ovl-muted); cursor: pointer; }
71.ovl-iconbtn:hover { background: var(--ovl-hover); color: var(--ovl-text); }
72.ovl-iconbtn.is-small { width: 38px; height: 38px; }
73.ovl-iconbtn[aria-pressed="true"] { color: var(--ovl-accent); }
74.ovl-link { -webkit-appearance: none; appearance: none; justify-self: center; margin: 0; padding: 8px 4px; border: 0; background: none; color: var(--ovl-accent); font: inherit; font-weight: 600; cursor: pointer; border-radius: 6px; }
75.ovl-link:hover { text-decoration: underline; }
76.ovl-link.is-quiet { color: var(--ovl-muted); font-weight: 500; }
77.ovl-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; cursor: pointer; }
78.ovl-check input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--ovl-accent); }
79.ovl-acts { display: flex; flex-wrap: wrap; gap: 8px; }
80.ovl-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
81.ovl-ico { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; }
82.ovl-ico svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
83.ovl-ico.is-badge { width: 34px; height: 34px; padding: 7px; border-radius: 10px; color: #fff; background: linear-gradient(140deg, var(--ovl-lockhue), var(--ovl-accent)); }
84.ovl-ico.is-big { width: 52px; height: 52px; padding: 12px; border-radius: 16px; color: #fff; background: linear-gradient(140deg, var(--ovl-lockhue), var(--ovl-accent)); box-shadow: 0 10px 28px -10px color-mix(in srgb, var(--ovl-accent) 70%, transparent); }
85
86/* The strength meter: four segments that fill and colour as the passphrase grows. */
87.ovl-meter { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
88.ovl-meterbar { position: relative; height: 6px; border-radius: 99px; background: var(--ovl-hover); overflow: hidden; }
89.ovl-meterbar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--ovl-bad); transition: width .25s ease, background-color .25s ease; }
90.ovl-meter[data-score="1"] .ovl-meterbar::after { width: 25%; }
91.ovl-meter[data-score="2"] .ovl-meterbar::after { width: 50%; background: var(--warning, #f59e0b); }
92.ovl-meter[data-score="3"] .ovl-meterbar::after { width: 75%; background: color-mix(in srgb, var(--ovl-ok) 70%, var(--warning, #f59e0b)); }
93.ovl-meter[data-score="4"] .ovl-meterbar::after { width: 100%; background: var(--ovl-ok); }
94.ovl-meterwords { font-size: 12.5px; font-weight: 600; color: var(--ovl-muted); min-width: 0; }
95
96/* The recovery kit: numbered words in a printable grid. */
97.ovl-words { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 12px; list-style: none; counter-reset: ovlw;
98 border: 1px dashed color-mix(in srgb, var(--ovl-accent) 45%, var(--ovl-line)); border-radius: 14px; background: color-mix(in srgb, var(--ovl-accent) 5%, transparent); }
99.ovl-words li { counter-increment: ovlw; display: flex; align-items: baseline; gap: 6px; min-width: 0; padding: 5px 8px; border-radius: 8px; background: var(--ovl-surface);
100 font: 600 14px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; user-select: all; }
101.ovl-words li::before { content: counter(ovlw); flex: none; min-width: 1.6em; color: var(--ovl-muted); font-size: 12px; font-weight: 500; text-align: right; }
102@media (max-width: 400px) { .ovl-words { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
103.ovl-done { display: grid; justify-items: center; gap: 12px; text-align: center; }
104.ovl-done .ovl-ico.is-big { background: linear-gradient(140deg, var(--ovl-ok), color-mix(in srgb, var(--ovl-ok) 60%, var(--ovl-accent))); animation: ovl-pop .5s cubic-bezier(.3, 1.6, .5, 1); }
105.ovl-fp { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--ovl-hover); font: 650 15px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; word-spacing: .2em; }
106@keyframes ovl-pop { 0% { transform: scale(.5); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: none; } }
107
108/* ── A locked item's card ───────────────────────────────────────────────────────────────────────────────── */
109.ovl-card {
110 display: grid; justify-items: center; gap: 12px; max-width: 460px; margin: 40px auto; padding: 32px 24px; text-align: center;
111 background: var(--ovl-surface); border: 1px solid var(--ovl-line); border-radius: var(--ov-radius-3, 20px);
112 background-image: radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--ovl-lockhue) 9%, transparent), transparent 70%);
113}
114.ovl-card.is-opened { display: none; }
115.ovl-cardtitle { margin: 4px 0 0; font-size: 19px; font-weight: 700; line-height: 1.3; text-wrap: balance; }
116.ovl-card .ovl-form { width: 100%; max-width: 340px; text-align: start; }
117.ovl-card .ovl-btn.is-primary { width: 100%; }
118
119@media (forced-colors: active) { .ovl-sheet, .ovl-card { border: 1px solid CanvasText; } }
120
121/* The one-time recovery kit is the only printed content. */
122@media print {
123 body:has(.ovl-words) > :not(dialog) { display: none !important; }
124 dialog:has(.ovl-words) { position: static; max-height: none; border: 0; box-shadow: none; }
125 dialog:has(.ovl-words) .ovl-acts, dialog:has(.ovl-words) form, dialog:has(.ovl-words) button { display: none !important; }
126 .ovl-words { color: #111; background: #fff; }
127}
128