openvibers/openvibe.shared ov-wallet.css
ov-wallet.css
| 1 | .ov-wallet{--wallet-bg:var(--bg-primary,#171b20);--wallet-card:var(--bg-secondary,#20262c);--wallet-text:var(--text-primary,#f4f5f6);--wallet-muted:var(--text-secondary,#a9b3bc);--wallet-line:var(--border-color,#38414b);box-sizing:border-box;width:min(860px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:0;border:1px solid var(--wallet-line);border-radius:24px;background:var(--wallet-bg);color:var(--wallet-text);font:400 15px/1.5 var(--font-family,system-ui,sans-serif);box-shadow:0 30px 100px #0006;overflow:hidden} |
| 2 | .ov-wallet::backdrop{background:#070b14a6;backdrop-filter:blur(5px)} |
| 3 | .ov-wallet *{box-sizing:border-box}.ov-wallet h2,.ov-wallet h3,.ov-wallet h4,.ov-wallet p{margin:0}.ov-wallet h2{font-size:28px;letter-spacing:-.7px;line-height:1.2}.ov-wallet h3{font-size:19px;line-height:1.4}.ov-wallet h4{font-size:15px;overflow-wrap:anywhere}.ov-wallet-head{display:flex;align-items:center;justify-content:space-between;padding:24px 28px;border-bottom:1px solid var(--wallet-line);gap:16px}.ov-wallet-eyebrow{font-size:11px;letter-spacing:1.5px;font-weight:700;color:var(--wallet-muted);margin-bottom:5px}.ov-wallet-close{width:44px;height:44px;flex-shrink:0;border:1px solid var(--wallet-line);border-radius:50%;background:transparent;color:inherit;font:28px/1 system-ui;cursor:pointer} |
| 4 | .ov-wallet-body{max-height:calc(100dvh - 168px);overflow:auto;overscroll-behavior:contain;padding:24px 28px 32px;scrollbar-gutter:stable}.ov-wallet-status:empty{display:none}.ov-wallet-status{padding:12px;margin-bottom:16px;border:1px solid var(--wallet-line);border-radius:10px;font-size:14px}.ov-wallet-status.is-error{color:var(--wallet-text);border-color:#c77e51}.ov-wallet-balances{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ov-wallet-balance{border:1px solid var(--wallet-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;background:var(--wallet-card)}.ov-wallet-balance-title{display:flex;align-items:center;gap:8px}.ov-wallet-balance-title h3{font-size:14px}.ov-wallet-symbol{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font-weight:800;color:#171b20;background:#dcb85d}.is-vibes .ov-wallet-symbol{background:#8ddac5}.is-balance .ov-wallet-symbol{background:#a3bafa}.ov-wallet-value{font-size:29px;font-weight:750;letter-spacing:-1px;line-height:1.1;overflow-wrap:anywhere}.ov-wallet-purpose{font-size:13px;color:var(--wallet-muted);flex:1}.ov-wallet-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:9px 12px;border:1px solid var(--wallet-line);border-radius:10px;background:transparent;color:var(--wallet-text);font-family:inherit;font-size:13px;font-weight:600;line-height:1.35;text-align:center;text-decoration:none;cursor:pointer;white-space:normal;gap:6px}.ov-wallet-button:hover{background:var(--wallet-card);border-color:var(--wallet-muted)}.ov-wallet-button.is-primary{background:#8ddac5;color:#112c24;border-color:#8ddac5}.ov-wallet button:disabled{opacity:.5;cursor:default}.ov-wallet :focus-visible{outline:3px solid #8ddac5;outline-offset:3px}.ov-wallet-section{margin-top:30px}.ov-wallet-muted{color:var(--wallet-muted);font-size:13px}.ov-wallet-section>p{margin-top:4px;margin-bottom:14px}.ov-wallet-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.ov-wallet-item{border:1px solid var(--wallet-line);border-radius:14px;padding:10px;display:flex;flex-direction:column;gap:8px;min-width:0}.ov-wallet-preview{height:100px;display:flex;align-items:center;justify-content:center;border-radius:9px;background:var(--wallet-card);font-size:38px;overflow:hidden;text-align:center;padding:8px}.ov-wallet-preview img{width:100%;height:100%;object-fit:contain}.ov-wallet-sample{font-size:21px;font-weight:800;letter-spacing:-.4px;line-height:1.2;overflow-wrap:anywhere}.ov-wallet-preview.is-rainbow .ov-wallet-sample{background:linear-gradient(110deg,#f393b5,#b0adff,#8ddac5);background-clip:text;color:transparent}.ov-wallet-owned{padding:12px 0;font-size:13px;color:var(--wallet-muted)}.ov-wallet-owned-row{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--wallet-line)}.ov-wallet-owned-row .ov-wallet-preview{height:48px;width:48px;flex-shrink:0;font-size:24px}.ov-wallet-owned-row .ov-wallet-sample{font-size:12px}.ov-wallet-owned-row>div:nth-child(2){flex:1;min-width:0}.ov-wallet-owned-row .ov-wallet-button{flex-shrink:0}.ov-wallet-event{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 0;border-bottom:1px solid var(--wallet-line);font-size:13px}.ov-wallet-event small{display:block;color:var(--wallet-muted);font-size:12px}.ov-wallet-event a{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:none;border-bottom:1px solid currentColor}.ov-wallet-event>span{flex-shrink:0}.ov-wallet-checkout{padding:18px;border:1px solid #8ddac5;border-radius:14px;margin-bottom:20px;display:flex;flex-wrap:wrap;gap:12px}.ov-wallet-checkout h3,.ov-wallet-checkout p{width:100%}.ov-wallet-checkout label{flex:1;min-width:130px;font-size:13px}.ov-wallet-checkout input,.ov-wallet-checkout select{display:block;margin-top:5px;min-height:44px;width:100%;padding:10px;color:inherit;background:var(--wallet-bg);border:1px solid var(--wallet-line);border-radius:8px;font:inherit} |
| 5 | @media(prefers-color-scheme:light){.ov-wallet{--wallet-bg:var(--bg-primary,#fafbfc);--wallet-card:var(--bg-secondary,#f0f3f5);--wallet-text:var(--text-primary,#20262c);--wallet-muted:var(--text-secondary,#5b6774);--wallet-line:var(--border-color,#d7dee4)}} |
| 6 | @media(max-width:600px){.ov-wallet{width:100%;max-width:100%;max-height:94dvh;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0}.ov-wallet-head{padding:18px 18px 14px}.ov-wallet-body{padding:16px 18px 28px;max-height:calc(94dvh - 94px);scrollbar-gutter:auto}.ov-wallet-eyebrow{font-size:12px;letter-spacing:1px}.ov-wallet-balances{grid-template-columns:1fr;gap:9px}.ov-wallet-balance{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:12px 14px}.ov-wallet-value{grid-column:1;grid-row:2;font-size:26px}.ov-wallet-purpose{grid-column:1/-1;grid-row:3;font-size:12px}.ov-wallet-balance>.ov-wallet-button{grid-column:2;grid-row:1/3;align-self:center;max-width:132px}.ov-wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-wallet-preview{height:92px}.ov-wallet-item .ov-wallet-button{padding:9px 6px;font-size:12px}.ov-wallet-section{margin-top:24px}.ov-wallet-event{gap:8px}.ov-wallet-event>span{max-width:44%;text-align:right;overflow-wrap:anywhere}} |
| 7 | /* The close ring only for the keyboard (a tap that opens the sheet shows no ring), in the accent like every focus. */ |
| 8 | .ov-wallet-close:focus{outline:none}.ov-wallet-close:focus-visible{outline:2px solid var(--accent,#3b82f6);outline-offset:2px} |
| 9 | /* Each balance in its currency's colour (4.190.0; --pc comes from purse.js through data-purse): a tinted card, the icon |
| 10 | in a tile, a light that crosses the card once as the sheet opens, and the action in the same colour. */ |
| 11 | .ov-wallet-balance[data-purse]{position:relative;overflow:hidden;border-color:color-mix(in srgb,var(--pc) 30%,var(--wallet-line));background:radial-gradient(130% 150% at 0% 0%,color-mix(in srgb,var(--pc) 17%,transparent),transparent 60%),var(--wallet-card);transition:border-color .3s,box-shadow .3s;animation:ov-wallet-in .45s cubic-bezier(.2,.9,.3,1.1) backwards} |
| 12 | .ov-wallet-balance[data-purse]:nth-child(2){animation-delay:.06s}.ov-wallet-balance[data-purse]:nth-child(3){animation-delay:.12s} |
| 13 | @keyframes ov-wallet-in{from{opacity:0;transform:translateY(calc(12px*var(--ov-move,1)))}} |
| 14 | .ov-wallet-balance[data-purse]::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,color-mix(in srgb,var(--pc) 20%,transparent) 50%,transparent 62%);transform:translateX(-110%);animation:ov-wallet-sheen 1.1s ease-out .3s both} |
| 15 | .ov-wallet-balance[data-purse]:nth-child(2)::after{animation-delay:.42s}.ov-wallet-balance[data-purse]:nth-child(3)::after{animation-delay:.54s} |
| 16 | @keyframes ov-wallet-sheen{to{transform:translateX(110%)}} |
| 17 | .ov-wallet-balance[data-purse]:is(.is-gain,.is-loss){border-color:color-mix(in srgb,var(--pc) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 16%,transparent)} |
| 18 | .ov-wallet-symbol.is-drawn{width:44px;height:44px;border-radius:14px;color:inherit;background:color-mix(in srgb,var(--pc) 16%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pc) 32%,transparent)} |
| 19 | .ov-wallet-symbol.is-drawn svg{width:28px;height:28px;filter:drop-shadow(0 2px 3px color-mix(in srgb,var(--pd,#000) 50%,transparent))} |
| 20 | .ov-wallet-balance[data-purse]:hover .ov-wallet-symbol svg{animation:ov-wallet-nod .5s cubic-bezier(.3,1.5,.4,1)} |
| 21 | @keyframes ov-wallet-nod{40%{transform:translateY(calc(-3px*var(--ov-move,1))) rotate(calc(-8deg*var(--ov-move,1))) scale(1.08)}} |
| 22 | .ov-wallet-balance[data-purse] .ov-wallet-balance-title{gap:12px} |
| 23 | .ov-wallet-balance[data-purse] .ov-wallet-balance-title h3{font-size:14px;color:var(--wallet-muted);font-weight:650} |
| 24 | .ov-wallet-balance[data-purse] .ov-wallet-value{font-variant-numeric:tabular-nums} |
| 25 | .ov-wallet-balance[data-purse] .ov-wallet-button{position:relative;z-index:1;border-radius:999px;border-color:color-mix(in srgb,var(--pc) 48%,transparent);background:color-mix(in srgb,var(--pc) 14%,transparent);transition:background-color .15s,transform .12s} |
| 26 | .ov-wallet-balance[data-purse] .ov-wallet-button:hover:not(:disabled){background:color-mix(in srgb,var(--pc) 26%,transparent)} |
| 27 | .ov-wallet-balance[data-purse] .ov-wallet-button:active:not(:disabled){transform:scale(.96)} |
| 28 | /* On a phone: the tile, then the name over the number, and the action at the right; what it is for under them. */ |
| 29 | @media(max-width:600px){.ov-wallet-balance[data-purse]{grid-template-columns:auto minmax(0,1fr) auto;gap:2px 12px;padding:12px 14px} |
| 30 | .ov-wallet-balance[data-purse] .ov-wallet-balance-title{display:contents} |
| 31 | .ov-wallet-balance[data-purse] .ov-wallet-symbol{grid-column:1;grid-row:1/3;align-self:center} |
| 32 | .ov-wallet-balance[data-purse] .ov-wallet-balance-title h3{grid-column:2;grid-row:1;align-self:end;font-size:13px} |
| 33 | .ov-wallet-balance[data-purse] .ov-wallet-value{grid-column:2;grid-row:2;font-size:25px} |
| 34 | .ov-wallet-balance[data-purse]>.ov-wallet-button{grid-column:3;grid-row:1/3} |
| 35 | .ov-wallet-balance[data-purse] .ov-wallet-purpose{grid-column:1/-1;grid-row:3;margin-top:6px}} |
| 36 | html[data-ov-motion=off] .ov-wallet-balance[data-purse],html[data-ov-motion=off] .ov-wallet-balance[data-purse]::after{animation:none} |
| 37 | |
| 38 | |
| 39 | /* There at once, and nothing jumps (4.193.0). Until a part answers, a placeholder of its size stands in its place; the |
| 40 | parts arrive where they stand, once, as the sheet opens. */ |
| 41 | .ov-wallet-wait-set { display: grid; gap: 12px; } |
| 42 | .ov-wallet-wait { border-radius: 16px; background: color-mix(in srgb, var(--text-primary, #e6edf7) 5%, transparent); animation: ov-wallet-wait 1.3s ease-in-out infinite alternate; } |
| 43 | .ov-wallet-wait.is-card { height: 148px; } |
| 44 | .ov-wallet-wait.is-row { height: 64px; border-radius: 12px; } |
| 45 | .ov-wallet-wait.is-tile { height: 132px; } |
| 46 | .ov-wallet-grid > .ov-wallet-wait-set { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); } |
| 47 | @keyframes ov-wallet-wait { from { opacity: .55; } to { opacity: 1; } } |
| 48 | .ov-wallet-body.is-first > * { animation: ov-wallet-part .32s cubic-bezier(.2, .7, .2, 1) both; } |
| 49 | .ov-wallet-body.is-first > :nth-child(3) { animation-delay: .05s; } |
| 50 | .ov-wallet-body.is-first > :nth-child(4) { animation-delay: .1s; } |
| 51 | .ov-wallet-body.is-first > :nth-child(n + 5) { animation-delay: .15s; } |
| 52 | @keyframes ov-wallet-part { from { opacity: 0; transform: translateY(8px); } } |
| 53 | html[data-ov-motion=reduced] .ov-wallet-body.is-first > * { animation: ov-wallet-fade .2s ease both; animation-delay: 0s; } |
| 54 | html[data-ov-motion=off] .ov-wallet-body.is-first > *, html[data-ov-motion=off] .ov-wallet-wait { animation: none; } |
| 55 | @media (prefers-reduced-motion: reduce) { html:not([data-ov-motion]) .ov-wallet-body.is-first > * { animation: ov-wallet-fade .2s ease both; animation-delay: 0s; } } |
| 56 | @keyframes ov-wallet-fade { from { opacity: 0; } } |
| 57 | .ov-wallet.ov-wallet-in{width:auto;max-height:none;border:0;border-radius:0;box-shadow:none;overflow:visible}.ovw:has(.ov-wallet-in){background:none;border:0}.ov-wallet-in{border-radius:inherit}.ov-wallet-in .ov-wallet-head{padding-right:64px}.ovw.is-sheet .ov-wallet-in .ov-wallet-head{padding-top:26px}.ov-wallet-in .ov-wallet-body{max-height:none;overflow:visible}.ovw-b:has(>.ov-wallet-in){padding:0} |
| 58 | |
| 59 | /* 4.221.0 (the owner, 11-12: "UGLY" on What changed and Store; "major design and stylistic improvements across both |
| 60 | mobile and desktop … nice looking icons"): the head says what this is; balances first; What changed is one row per |
| 61 | currency (its icon, a short summary, the amount in its colour, every move in a fold); each section has its mark; an |
| 62 | empty part is a small card with its mark; on a computer What changed and Recent activity sit side by side. */ |
| 63 | .ov-wallet-head{justify-content:flex-start;gap:14px;padding:18px 24px} |
| 64 | .ov-wallet-mark{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:14px;color:#fff;background:linear-gradient(135deg,color-mix(in srgb,var(--accent,#3b82f6) 88%,#22c55e),color-mix(in srgb,#22c55e 70%,var(--accent,#3b82f6)));box-shadow:0 6px 18px color-mix(in srgb,var(--accent,#3b82f6) 26%,transparent)} |
| 65 | .ov-wallet-mark svg{width:24px;height:24px} |
| 66 | .ov-wallet-name{min-width:0;display:grid;gap:1px}.ov-wallet-name h2{font-size:22px;letter-spacing:-.4px}.ov-wallet-name small{color:var(--wallet-muted);font-size:13px} |
| 67 | .ov-wallet-head .ov-wallet-close{margin-left:auto} |
| 68 | .ov-wallet-glyph{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:11px;color:var(--accent-light,var(--accent,#60a5fa));background:color-mix(in srgb,var(--accent,#3b82f6) 13%,transparent)} |
| 69 | .ov-wallet-glyph svg{width:19px;height:19px} |
| 70 | .ov-wallet-section{margin-top:26px;min-width:0} |
| 71 | .ov-wallet-sh{display:flex;align-items:center;gap:12px;margin-bottom:12px} |
| 72 | .ov-wallet-sh h3{font-size:17px;letter-spacing:-.2px}.ov-wallet-sh .ov-wallet-muted{margin:1px 0 0} |
| 73 | .ov-wallet-section>.ov-wallet-sh+p{margin-top:0} |
| 74 | .ov-wallet-pair{display:grid;grid-template-columns:minmax(0,1fr);gap:0 18px} |
| 75 | @media(min-width:760px){.ov-wallet-pair{grid-template-columns:repeat(2,minmax(0,1fr))}.ov-wallet-pair>.ov-wallet-section:only-child{grid-column:1/-1}} |
| 76 | /* What changed */ |
| 77 | .ov-wallet-change{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:4px 12px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--wallet-line);border-radius:14px;background:var(--wallet-card)} |
| 78 | .ov-wallet-change-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--pc,var(--accent,#3b82f6)) 16%,transparent)} |
| 79 | .ov-wallet-change-ic svg{width:24px;height:24px} |
| 80 | .ov-wallet-change-t{min-width:0;display:grid;gap:1px}.ov-wallet-change-t strong{font-size:14.5px} |
| 81 | .ov-wallet-change-t small{color:var(--wallet-muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| 82 | .ov-wallet-change-n{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.2px} |
| 83 | .ov-wallet-change-n.is-gain{color:var(--success,#22a06b)}.ov-wallet-change-n.is-loss{color:var(--danger,#d14343)} |
| 84 | .ov-wallet-change-more{grid-column:1/-1;margin:2px 0 0} |
| 85 | .ov-wallet-change-more summary{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 4px;color:var(--accent-light,var(--accent,#60a5fa));font-size:13px;font-weight:650;cursor:pointer;list-style:none} |
| 86 | .ov-wallet-change-more summary::-webkit-details-marker{display:none} |
| 87 | .ov-wallet-chev{display:inline-grid;transition:transform .2s}.ov-wallet-chev svg{width:13px;height:13px;transform:rotate(90deg)} |
| 88 | .ov-wallet-change-more[open] .ov-wallet-chev{transform:rotate(180deg)} |
| 89 | .ov-wallet-change-more ul{list-style:none;margin:4px 0 2px;padding:0;display:grid;gap:4px} |
| 90 | .ov-wallet-change-more li{display:flex;align-items:center;gap:10px;min-height:36px;padding:4px 8px;border-radius:10px;background:color-mix(in srgb,var(--wallet-text) 4%,transparent);font-size:13.5px} |
| 91 | .ov-wallet-change-more li>span:not(.ov-wallet-glyph){flex:1;min-width:0}.ov-wallet-change-more li b{font-variant-numeric:tabular-nums;font-size:13px}.ov-wallet-change-more li b.is-gain{color:var(--success,#22a06b)}.ov-wallet-change-more li b.is-loss{color:var(--danger,#d14343)} |
| 92 | .ov-wallet-change-more li .ov-wallet-glyph{width:26px;height:26px;border-radius:8px}.ov-wallet-change-more li .ov-wallet-glyph svg{width:15px;height:15px} |
| 93 | /* Recent activity, as rows in the same hand */ |
| 94 | .ov-wallet-pair .ov-wallet-event{padding:10px 2px} |
| 95 | /* Empty, said with its mark */ |
| 96 | .ov-wallet-empty{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:14px 16px;border:1px dashed color-mix(in srgb,var(--wallet-muted) 45%,transparent);border-radius:14px;background:color-mix(in srgb,var(--wallet-text) 2%,transparent)} |
| 97 | .ov-wallet-empty>div{display:grid;gap:2px;min-width:0}.ov-wallet-empty strong{font-size:14.5px}.ov-wallet-empty span:not(.ov-wallet-glyph){color:var(--wallet-muted);font-size:13px} |
| 98 | @media(max-width:600px){.ov-wallet-head{padding:14px 18px 12px}.ov-wallet-mark{width:40px;height:40px;border-radius:12px}.ov-wallet-name h2{font-size:20px}.ov-wallet-section{margin-top:22px}.ov-wallet-change{padding:9px 10px;gap:2px 10px}.ov-wallet-change-ic{width:36px;height:36px}} |
| 99 | html[data-ov-motion=off] .ov-wallet-chev{transition:none} |
| 100 | /* Recent activity in the same hand as What changed */ |
| 101 | .ov-wallet-act{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:2px 12px;padding:10px 12px;margin-bottom:8px;border:1px solid var(--wallet-line);border-radius:14px;background:var(--wallet-card)} |
| 102 | .ov-wallet-act .ov-wallet-change-ic{width:36px;height:36px}.ov-wallet-act .ov-wallet-change-ic svg{width:20px;height:20px} |
| 103 | .ov-wallet-act-t{min-width:0;display:grid;gap:1px;font-size:14px}.ov-wallet-act-t strong{display:block;font-weight:650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} |
| 104 | .ov-wallet-act-t>a{display:grid;align-content:center;gap:1px;min-height:44px;border:0;min-width:0} |
| 105 | .ov-wallet-act-t strong::first-letter{text-transform:uppercase} |
| 106 | .ov-wallet-act-t>a{color:inherit;text-decoration:none}.ov-wallet-act-t>a:hover strong{color:var(--accent-light,var(--accent,#60a5fa))} |
| 107 | .ov-wallet-act-n{font-weight:750;font-size:13.5px;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;max-width:none;overflow-wrap:normal}.ov-wallet-act-n.is-gain{color:var(--success,#22a06b)}.ov-wallet-act-n.is-loss{color:var(--wallet-text)} |
| 108 | /* Store: a smaller picture, the name and its maker close together, the prices as pills with their currency's mark */ |
| 109 | .ov-wallet-item{gap:4px;padding:8px 8px 10px}.ov-wallet-item .ov-wallet-preview{height:88px;margin-bottom:4px}.ov-wallet-item h4{font-size:14.5px;padding:0 2px}.ov-wallet-item>.ov-wallet-muted{font-size:12.5px;padding:0 2px} |
| 110 | .ov-wallet-prices{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px} |
| 111 | .ov-wallet-price{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px 0 8px;border-radius:999px;border:1px solid var(--wallet-line);background:color-mix(in srgb,var(--wallet-text) 4%,transparent);color:var(--wallet-text);font:inherit;font-size:13.5px;font-weight:750;font-variant-numeric:tabular-nums;cursor:pointer} |
| 112 | .ov-wallet-price:hover:not(:disabled){border-color:var(--accent,#3b82f6);background:color-mix(in srgb,var(--accent,#3b82f6) 12%,transparent)} |
| 113 | .ov-wallet-price-ic{display:grid;place-items:center;width:22px;height:22px}.ov-wallet-price-ic svg{width:18px;height:18px} |
| 114 | .ov-wallet-owned{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px 0 6px;border-radius:999px;font-weight:650;color:var(--success,#22a06b);background:color-mix(in srgb,var(--success,#22a06b) 12%,transparent)} |
| 115 | .ov-wallet-tick{display:grid;place-items:center;width:22px;height:22px}.ov-wallet-tick svg{width:15px;height:15px} |
| 116 | @media(pointer:coarse){.ov-wallet-price{min-height:44px}} |
| 117 |