/* PowerBankPrices — utilitarian data-table styling in the diskprices.com mold. Supports light and dark mode via [data-theme] on . */ /* ── Light mode (default) ─────────────────────────────────────────────────── */ :root, [data-theme="light"] { --bg: #ffffff; --bg-header: #fafafa; --bg-alt: #f6f6f6; --bg-hover: #eef3f8; --text: #1a1a1a; --muted: #6b6b6b; --line: #d9d9d9; --link: #0645ad; --stated: #1a7f37; --stated-bg: #e6f4ea; --est: #6b6b6b; --est-bg: #efefef; --buy: #0645ad; --code-bg: #f2f2f2; /* $/Wh quartile tints */ --ppw-1: #d8f0dc; --ppw-2: #eef7e6; --ppw-3: #fdf3dc; --ppw-4: #fbe3de; } /* ── Dark mode ────────────────────────────────────────────────────────────── */ [data-theme="dark"] { --bg: #111318; --bg-header: #1c1f26; --bg-alt: #161a21; --bg-hover: #1f2430; --text: #e2e4e9; --muted: #8b8f9a; --line: #2e323c; --link: #6ea8fe; --stated: #3fb950; --stated-bg: #0d2618; --est: #8b8f9a; --est-bg: #1e2028; --buy: #6ea8fe; --code-bg: #1e2028; --ppw-1: #0d2e14; --ppw-2: #162714; --ppw-3: #2b2310; --ppw-4: #2e150f; } /* ── Reset ────────────────────────────────────────────────────────────────── */ * { box-sizing: border-box; } body { margin: 0 auto; max-width: 1100px; padding: 0 12px 40px; font: 14px/1.45 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); transition: background 0.2s, color 0.2s; } a { color: var(--link); } /* ── Header ───────────────────────────────────────────────────────────────── */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 0 6px; border-bottom: 1px solid var(--line); gap: 12px; } .site-header h1 { margin: 0; font-size: 20px; font-weight: 700; } .site-header h1 a { color: var(--text); text-decoration: none; } .site-header h1 span { color: var(--muted); font-weight: 400; } .site-header h1 .tagline { font-size: 13px; margin-left: 10px; } .site-header nav { display: flex; align-items: center; gap: 14px; flex-shrink: 0; } .site-header nav a { font-size: 13px; } /* Theme toggle button */ #theme-toggle { background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); cursor: pointer; font-size: 12px; font-family: inherit; padding: 3px 9px; white-space: nowrap; transition: border-color 0.15s, color 0.15s; } #theme-toggle:hover { border-color: var(--text); color: var(--text); } /* ── Filters ──────────────────────────────────────────────────────────────── */ .filters { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 8px 0 10px; font-size: 13px; } .filters label { display: flex; align-items: center; gap: 6px; } .filters select { font-size: 13px; padding: 2px 4px; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 3px; } .filters .checkbox input { margin: 0; } .filters .count { margin-left: auto; color: var(--muted); } /* ── Table ────────────────────────────────────────────────────────────────── */ .table-wrap { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; } td.col-title { white-space: normal; min-width: 260px; } td.col-wh-source { width: 60px; text-align: right; } td.col-checked { color: var(--muted); font-size: 11px; white-space: nowrap; } td.col-port { text-align: center; width: 40px; font-size: 14px; } .brand { font-weight: 600; } th { cursor: pointer; user-select: none; background: var(--bg-header); border-bottom: 2px solid var(--line); position: sticky; top: 0; } th:not([data-key]) { cursor: default; } th:hover { filter: brightness(0.95); } th.sorted-asc::after { content: " ▲"; font-size: 10px; } th.sorted-desc::after { content: " ▼"; font-size: 10px; } .num { text-align: right; } tbody tr:nth-child(even) { background: var(--bg-alt); } tbody tr:hover { background: var(--bg-hover); } td.ppw { font-weight: 700; } td.ppw-1 { background: var(--ppw-1); } td.ppw-2 { background: var(--ppw-2); } td.ppw-3 { background: var(--ppw-3); } td.ppw-4 { background: var(--ppw-4); } .loading { text-align: center; color: var(--muted); padding: 24px; } /* ── Wh source badge ──────────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0 5px; border-radius: 3px; font-size: 10px; font-weight: 600; vertical-align: 1px; } .badge.stated { color: var(--stated); background: var(--stated-bg); } .badge.est { color: var(--est); background: var(--est-bg); } /* ── Buy buttons ──────────────────────────────────────────────────────────── */ .buy { display: inline-block; padding: 2px 10px; border: 1px solid currentColor; border-radius: 3px; text-decoration: none; font-size: 12px; font-weight: 600; white-space: nowrap; } .retailer-amazon { color: #e47911; } .retailer-walmart { color: #0071ce; } .retailer-bestbuy { color: #003b8e; } .retailer-target { color: #cc0000; } .retailer-costco { color: #005daa; } .retailer-amazon:hover { background: #e47911; color: #fff; } .retailer-walmart:hover { background: #0071ce; color: #fff; } .retailer-bestbuy:hover { background: #003b8e; color: #fff; } .retailer-target:hover { background: #cc0000; color: #fff; } .retailer-costco:hover { background: #005daa; color: #fff; } .buy:not([class*="retailer-"]) { color: var(--buy); } .buy:not([class*="retailer-"]):hover { background: var(--buy); color: #fff; } /* ── Footer ───────────────────────────────────────────────────────────────── */ .site-footer { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } .site-footer .disclosure { padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; margin-bottom: 8px; } /* ── Content pages (methodology / about) ─────────────────────────────────── */ .content { max-width: 720px; } .content h2 { margin-top: 28px; font-size: 18px; } .content code { background: var(--code-bg); padding: 1px 4px; border-radius: 3px; } /* ── Mobile ───────────────────────────────────────────────────────────────── */ @media (max-width: 640px) { body { font-size: 13px; } .site-header { flex-direction: column; align-items: flex-start; gap: 8px; } .site-header nav { width: 100%; justify-content: space-between; } .filters .count { margin-left: 0; width: 100%; } th, td { padding: 5px 6px; } td.col-title { min-width: 200px; } .col-wireless, th.col-wireless { display: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }