openvibers/openvibe.shared quest.css
quest.css
| 1 | /* quest.css — openvibe-shared/quest's card. Scoped to .ovq-, built on the kit's tokens (with the site's own theme |
| 2 | * tokens and the network's defaults as fallbacks), so it wears every site's theme. Link it beside quest.js. */ |
| 3 | .ovq-quest { |
| 4 | --ovq-a: var(--ovk-accent, var(--accent, #3b82f6)); |
| 5 | --ovq-p: var(--ovk-panel, var(--bg-card, #121826)); |
| 6 | --ovq-t: var(--ovk-text, var(--text-primary, #e8ecf3)); |
| 7 | --ovq-m: var(--ovk-muted, var(--text-secondary, #93a0b4)); |
| 8 | --ovq-ok: var(--ovk-ok, var(--success, #22c55e)); |
| 9 | max-width: 520px; |
| 10 | margin: 0 auto 22px; |
| 11 | border-radius: var(--ov-radius-2, 14px); |
| 12 | background: color-mix(in srgb, var(--ovq-a) 7%, var(--ovq-p)); |
| 13 | box-shadow: var(--ov-elev-3); |
| 14 | color: var(--ovq-t); |
| 15 | text-align: left; |
| 16 | overflow: hidden; |
| 17 | } |
| 18 | .ovq-quest[hidden], .ovq-body[hidden], .ovq-chip[hidden] { display: none; } |
| 19 | .ovq-head { |
| 20 | display: flex; |
| 21 | align-items: center; |
| 22 | gap: 12px; |
| 23 | width: 100%; |
| 24 | min-height: 64px; |
| 25 | padding: 12px 14px; |
| 26 | background: none; |
| 27 | border: 0; |
| 28 | color: inherit; |
| 29 | font: inherit; |
| 30 | text-align: left; |
| 31 | cursor: pointer; |
| 32 | } |
| 33 | .ovq-head:focus-visible, .ovq-steps a:focus-visible, .ovq-more:focus-visible { outline: 2px solid var(--ovq-a); outline-offset: 2px; } |
| 34 | .ovq-icon, .ovq-site-icon { display: grid; place-items: center; flex: none; width: 32px; height: 32px; color: var(--ovq-a); } |
| 35 | .ovq-titles { display: flex; flex: 1; flex-direction: column; min-width: 0; } |
| 36 | .ovq-kicker { color: color-mix(in srgb, var(--ovq-a) 78%, var(--ovq-t)); font-size: .66rem; font-weight: 800; letter-spacing: .09em; } |
| 37 | .ovq-title { font-size: 1rem; font-weight: 800; line-height: 1.3; text-wrap: balance; } |
| 38 | .ovq-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; max-width: 160px; margin-top: 7px; } |
| 39 | .ovq-bar i { height: 4px; border-radius: 999px; background: color-mix(in srgb, var(--ovq-t) 12%, transparent); } |
| 40 | .ovq-quest[data-progress="1"] .ovq-bar i:first-child, |
| 41 | .ovq-quest[data-progress="2"] .ovq-bar i:nth-child(-n+2), |
| 42 | .ovq-quest[data-progress="3"] .ovq-bar i { background: var(--ovq-a); } |
| 43 | .ovq-quest[data-progress="3"] .ovq-bar i { background: var(--ovq-ok); } |
| 44 | .ovq-chip { display: inline-flex; flex: none; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, #f97316 16%, transparent); color: color-mix(in srgb, #f97316 78%, var(--ovq-t)); font-size: .78rem; font-weight: 800; } |
| 45 | .ovq-chev { color: var(--ovq-m); transition: transform .2s; } |
| 46 | .ovq-quest.open .ovq-chev { transform: rotate(180deg); } |
| 47 | .ovq-body { padding: 0 10px 10px; } |
| 48 | .ovq-story { margin: -2px 4px 8px; color: var(--ovq-m); font-size: .82rem; line-height: 1.45; } |
| 49 | .ovq-steps { display: grid; gap: 2px; list-style: none; padding: 0; margin: 0 0 8px; } |
| 50 | .ovq-steps a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px; border-radius: 12px; color: inherit; text-decoration: none; } |
| 51 | .ovq-steps a:hover { background: color-mix(in srgb, var(--ovq-t) 6%, transparent); } |
| 52 | .ovq-steps .is-next a { background: color-mix(in srgb, var(--ovq-a) 13%, transparent); } |
| 53 | .ovq-step { display: flex; flex: 1; flex-direction: column; min-width: 0; font-size: .88rem; font-weight: 650; line-height: 1.3; } |
| 54 | .ovq-step small { color: var(--ovq-m); font-size: .72rem; font-weight: 600; } |
| 55 | .ovq-steps .is-next small, .ovq-more > i { color: color-mix(in srgb, var(--ovq-a) 78%, var(--ovq-t)); } |
| 56 | .ovq-steps .is-done .ovq-step > span { color: var(--ovq-m); } |
| 57 | .ovq-go { color: var(--ovq-m); font-size: .72rem; } |
| 58 | .ovq-check { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--ovq-ok); color: #fff; font-size: .75rem; font-weight: 900; } |
| 59 | .ovq-more { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--ovq-a) 15%, var(--ovq-p)); color: inherit; text-decoration: none; } |
| 60 | .ovq-more:hover { background: color-mix(in srgb, var(--ovq-a) 22%, var(--ovq-p)); } |
| 61 | .ovq-more-text { display: flex; flex: 1; flex-direction: column; min-width: 0; color: var(--ovq-m); font-size: .78rem; line-height: 1.35; } |
| 62 | .ovq-more-text b { color: var(--ovq-t); font-size: .88rem; } |
| 63 | |
| 64 | /* The card's own marks (no Font Awesome needed). */ |
| 65 | .ovq-g{display:inline-grid;place-items:center;flex:none;width:1em;height:1em} |
| 66 | .ovq-g svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} |
| 67 | .ovq-g.is-fill svg{fill:currentColor;stroke:none} |
| 68 | .ovq-arrow{color:var(--ovk-accent,var(--accent,#60a5fa))} |
| 69 |