diff --git a/index.html b/index.html index 5b81c53..a8c9d91 100644 --- a/index.html +++ b/index.html @@ -13,19 +13,23 @@ position: fixed; bottom: 2vh; left: 2vh; - width: 280px; + width: 20vw; + min-width: 200px; + max-width: 320px; background: rgba(28, 27, 31, 0.85); border: 1px solid rgba(230, 223, 209, 0.3); border-radius: 0.6vh; padding: 1vh 1vw; color: var(--bone); font-family: monospace; - font-size: 12px; + font-size: clamp(9px, 1.2vh, 14px); line-height: 1.4; z-index: 9999; + max-height: 90vh; + overflow-y: auto; } .debug-title { - font-size: 14px; + font-size: 1.2em; font-weight: bold; color: var(--orange); border-bottom: 1px solid rgba(230, 223, 209, 0.3); @@ -33,7 +37,7 @@ margin-bottom: 6px; } .debug-section { - font-size: 12px; + font-size: 1em; color: var(--icon); margin-top: 6px; margin-bottom: 2px; @@ -54,22 +58,22 @@ } .hex { color: var(--bone); - font-size: 10px; + font-size: 0.9em; font-family: monospace; } .swatch { - width: 18px; - height: 18px; + width: 1.4em; + height: 1.4em; border: 1px solid var(--stone); border-radius: 2px; } .theme-table { - font-size: 11px; + font-size: 0.9em; margin-top: 4px; } .theme-table-row { display: grid; - grid-template-columns: 70px 30px 30px 30px 30px 44px; + grid-template-columns: 5em 1.6em 1.6em 1.6em 1.6em 2.5em; gap: 5px; align-items: center; padding: 1px 0; @@ -84,14 +88,14 @@ color: var(--bone); } .theme-table-mini-swatch { - width: 16px; - height: 16px; + width: 1.3em; + height: 1.3em; border: 1px solid var(--border); border-radius: 1px; } .theme-table-speed { color: var(--icon); - font-size: 10px; + font-size: 0.85em; } @media (orientation: portrait) and (max-width: 700px) { #debug-panel {