johnruina/serversite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mobile support

Browse Source
This commit is contained in:
johnruina
2026-06-16 09:45:49 -04:00
parent 9c7d1e2c6a
commit 12a102a3ca
9 changed files with 125 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
fluid.html
+17 -5
View File
@@ -234,12 +234,24 @@
.settings-btn:hover { color: #ccc; border-color: #555; background: rgba(255,255,255,0.03); }
@media (max-width: 800px) {
.fluid-layout { flex-direction: column; padding: 1rem; padding-top: 3rem; }
.fluid-settings { width: 100%; max-height: 200px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem; padding: 0.8rem; }
.fluid-settings .settings-title { width: 100%; }
.fluid-settings .settings-group { flex: 1; min-width: 100px; }
.fluid-layout { flex-direction: column; padding: 0.75rem; padding-top: 3rem; gap: 0.75rem; }
.fluid-settings { width: 100%; max-height: 170px; flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; padding: 0.6rem; }
.fluid-settings .settings-title { width: 100%; font-size: 0.55rem; }
.fluid-settings .settings-group { flex: 1; min-width: 80px; }
.fluid-settings .settings-group label { font-size: 0.5rem; }
.fluid-settings .palette-row { width: 100%; }
.fluid-settings .settings-btn { flex: 1; }
.palette-swatch { width: 24px; height: 16px; }
.settings-subtitle { font-size: 0.5rem; }
.settings-btn { font-size: 0.5rem; padding: 0.35rem 0; }
.fluid-label { font-size: 0.55rem; bottom: 0.5rem; }
}
@media (max-width: 480px) {
.fluid-layout { padding: 0.5rem; padding-top: 2.6rem; gap: 0.5rem; }
.fluid-settings { max-height: 130px; padding: 0.4rem; gap: 0.3rem; }
.fluid-settings .settings-group { min-width: 60px; }
.fluid-settings .settings-group input[type="range"]::-webkit-slider-thumb { width: 16px; height: 16px; }
.fluid-settings .settings-group input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; }
.settings-info { font-size: 0.5rem; }
}
</style>
</head>