diff --git a/extension/style.css b/extension/style.css index 3508e84..a958b06 100644 --- a/extension/style.css +++ b/extension/style.css @@ -1,9 +1,23 @@ -:root { color-scheme: light dark; font-family: system-ui, sans-serif; } -body { width: 360px; margin: 0; padding: 20px; box-sizing: border-box; } -h1 { margin-top: 0; } -nav { display: flex; gap: 6px; } -button { padding: 8px; cursor: pointer; border: 1px solid GrayText; border-radius: 4px; } -button[aria-pressed="true"] { border-color: Highlight; outline: 2px solid Highlight; } -button:focus-visible { outline: 2px dashed Highlight; outline-offset: 3px; } -main { min-height: 105px; } -.status { font-size: 0.85rem; color: GrayText; } +:root { color-scheme: light dark; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } +* { box-sizing: border-box; } +body { width: 360px; margin: 0; padding: 20px; } +h1 { margin: 2px 0 6px; font-size: 26px; } +h2 { font-size: 17px; } +.eyebrow { margin:0; font-size:11px; letter-spacing:.14em; font-weight:800; } +.lede,.status,.wallet-card p { color: GrayText; } +.wallet-card { border:1px solid GrayText; border-radius:14px; padding:14px; margin:16px 0; display:grid; gap:8px; } +.wallet-card code { overflow-wrap:anywhere; font-size:11px; } +.pill { width:max-content; border:1px solid #f7931a; border-radius:999px; padding:3px 7px; font-size:10px; font-weight:800; } +nav { display:flex; gap:5px; flex-wrap:wrap; } +button { padding:8px 10px; cursor:pointer; border:1px solid GrayText; border-radius:8px; background:transparent; } +button[aria-pressed="true"],button.primary { border-color:#f7931a; outline:1px solid #f7931a; } +button:focus-visible { outline:2px dashed Highlight; outline-offset:3px; } +main { min-height:86px; } +.status { font-size:.78rem; } +.warning { border:1px solid #f7931a; border-radius:10px; padding:10px; } +.approval { width:auto; min-width:360px; } +.approval main { min-height:0; } +dl { display:grid; grid-template-columns:110px 1fr; gap:8px 12px; margin:18px 0; } +dt { color:GrayText; } dd { margin:0; overflow-wrap:anywhere; } +.actions { display:flex; justify-content:flex-end; gap:8px; margin-top:20px; } +.error { color:#d33; }