diff --git a/web/style.css b/web/style.css index 78f6d67..e594f8b 100644 --- a/web/style.css +++ b/web/style.css @@ -22,13 +22,12 @@ html, body { - height: 100%; + min-height: 100%; background-color: var(--bg); color: var(--fg); font-family: 'Inter', system-ui, -apple-system, sans-serif; line-height: 1.5; -webkit-font-smoothing: antialiased; - overflow: hidden; } body { @@ -36,23 +35,25 @@ body { justify-content: center; } +body.overflow-hidden { + overflow: hidden; +} + .container { max-width: 1200px; width: 100%; - padding: 2rem; + padding: 2.5rem 2rem; display: flex; flex-direction: column; - height: 100vh; } header { - margin-bottom: 2.5rem; + margin-bottom: 2rem; text-align: center; - flex-shrink: 0; } h1 { - font-size: 1.75rem; + font-size: 1.5rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.15em; @@ -62,20 +63,8 @@ h1 { -webkit-text-fill-color: transparent; } -.subtitle { - color: var(--muted); - font-size: 0.75rem; - margin-top: 0.5rem; - text-transform: uppercase; - letter-spacing: 0.25em; - font-weight: 600; -} - main { - flex: 1; - overflow-y: auto; - min-height: 0; - padding: 1rem 0; + width: 100%; } .grid { @@ -116,12 +105,12 @@ main { .rank-badge { font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; + font-size: 0.85rem; color: var(--accent); background: var(--accent-dim); - padding: 4px 10px; - border-radius: 6px; - font-weight: 700; + padding: 6px 12px; + border-radius: 8px; + font-weight: 800; letter-spacing: 0.05em; } @@ -290,19 +279,23 @@ main { background: rgba(255, 255, 255, 0.1); } -main::-webkit-scrollbar { - width: 4px; +::-webkit-scrollbar { + width: 8px; } -main::-webkit-scrollbar-track { +::-webkit-scrollbar-track { background: var(--bg); } -main::-webkit-scrollbar-thumb { +::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; } +::-webkit-scrollbar-thumb:hover { + background: var(--muted); +} + .apexcharts-canvas, .apexcharts-canvas *, .apexcharts-canvas *:focus { @@ -316,11 +309,13 @@ main::-webkit-scrollbar-thumb { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5) !important; } -@media (max-width: 700px) {} - @media (max-width: 700px) { .container { - padding: 1.5rem; + padding: 2rem 1rem; + } + + h1 { + font-size: 1.75rem; } .grid { @@ -328,7 +323,9 @@ main::-webkit-scrollbar-thumb { } .modal-panel { - width: 95vw; - height: 90vh; + width: 100vw; + height: 100vh; + border-radius: 0; + border: none; } }