zink/animated_wallpaper
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make debug panel responsive with vh/vw units and clamp

Browse Source
This commit is contained in:
Richard Zink committed 2026-10-07 12:08:07 +02:00
1 parent bca419d8a0
commit 9180edd0e4
1 file changed
+16 -12
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+16 -12
View File
@@ -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 {