redtea/lpra
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: phone layout for the panel, and Termux-style extra keys in the terminal

Browse Source
This commit is contained in:
redtea committed 2026-10-14 14:43:06 +03:00
1 parent 81a2c96e0b
commit d456ffe757
5 files changed
+193 -23
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

internal/server/web/static/app.css
+27 -3
View File
@@ -96,7 +96,31 @@ pre { padding: 12px; overflow-x: auto; font-size: 13px; white-space: pre-wrap; w
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
#terminal { width: 100%; height: calc(100vh - 150px); }
@media (max-width: 600px) {
header.topbar { padding: 12px 16px; }
header.topbar nav a { margin-left: 12px; }
/* Phones. A table marked .stack turns each row into a block of
"label: value" lines, the labels coming from data-l on the cells; a cell
marked .lead goes first, as the row's title. */
@media (max-width: 640px) {
header.topbar { flex-wrap: wrap; gap: 6px 12px; padding: 10px 12px; }
header.topbar .brand { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
header.topbar nav { display: flex; align-items: center; gap: 16px; max-width: 100%;
overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
header.topbar nav::-webkit-scrollbar { display: none; }
header.topbar nav > * { margin-left: 0 !important; flex: none; }
.wrap { padding: 16px 12px; }
.card { padding: 16px; border-radius: 8px; }
h1 { font-size: 20px; }
code { word-break: break-all; }
/* 16px and up, or iOS zooms the page into a field on focus. */
input[type=text], input[type=password], input[type=number], select, textarea { font-size: 16px; }
table.stack thead { display: none; }
table.stack, table.stack tbody { display: block; }
table.stack tr { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--border); }
table.stack tr:first-child { padding-top: 0; }
table.stack tr:last-child { border-bottom: 0; padding-bottom: 0; }
table.stack td { display: flex; justify-content: flex-start; align-items: center; gap: 0;
width: auto; padding: 2px 0; border: 0; text-align: right !important; overflow-wrap: anywhere; }
table.stack td[data-l]::before { content: attr(data-l); flex: none; margin-right: auto; padding-right: 12px; color: var(--muted); font-size: 13px; text-align: left; }
table.stack td.lead { order: -1; justify-content: flex-start; text-align: left !important; font-size: 16px; font-weight: 600; }
table.stack td.actions { width: auto; padding-top: 8px; justify-content: flex-start; }
table.stack td:empty { display: none; }
}