|
|
@@ -238,7 +238,10 @@ body {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 6px;
|
|
|
- padding: 24px 14px;
|
|
|
+ padding: 22px 12px;
|
|
|
+ /* 兜底: 窗口高度不足时侧栏自身滚动, 不会把底部"重启/退出"裁掉 */
|
|
|
+ overflow-y: auto;
|
|
|
+ overscroll-behavior: contain;
|
|
|
}
|
|
|
|
|
|
.sidebar-actions {
|
|
|
@@ -254,7 +257,7 @@ body {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
- padding: 13px 14px;
|
|
|
+ padding: 13px 12px;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
color: #94a3b8;
|
|
|
@@ -277,7 +280,7 @@ body {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
gap: 10px;
|
|
|
- padding: 13px 14px;
|
|
|
+ padding: 13px 12px;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
color: #94a3b8;
|
|
|
@@ -449,39 +452,6 @@ p {
|
|
|
color: #38bdf8;
|
|
|
}
|
|
|
|
|
|
-/* ================= IE11 兼容兜底 ================= */
|
|
|
-/* 说明: \9 后缀声明仅 IE9-11 生效, 现代浏览器忽略; flex gap IE 不支持, 用相邻 margin 兜底 */
|
|
|
-
|
|
|
-.clock {
|
|
|
- background: none\9;
|
|
|
- color: #00e5ff\9;
|
|
|
-}
|
|
|
-
|
|
|
-.loading-box > * + * {
|
|
|
- margin-top: 12px\9;
|
|
|
-}
|
|
|
-.device > * + * {
|
|
|
- margin-left: 10px\9;
|
|
|
-}
|
|
|
-.actions > * + * {
|
|
|
- margin-left: 10px\9;
|
|
|
-}
|
|
|
-.sidebar-actions > * + * {
|
|
|
- margin-top: 10px\9;
|
|
|
-}
|
|
|
-.menu-item + .menu-item {
|
|
|
- margin-top: 6px\9;
|
|
|
-}
|
|
|
-.action-item > * + * {
|
|
|
- margin-left: 10px\9;
|
|
|
-}
|
|
|
-.menu-item > * + * {
|
|
|
- margin-left: 10px\9;
|
|
|
-}
|
|
|
-.log-actions > * + * {
|
|
|
- margin-left: 4px\9;
|
|
|
-}
|
|
|
-
|
|
|
/* ================= 界面美化增强 ================= */
|
|
|
|
|
|
/* 页面背景与卡片形成层次: 视图区更深, 卡片浮起 */
|
|
|
@@ -627,18 +597,26 @@ textarea:focus {
|
|
|
text-overflow: ellipsis;
|
|
|
}
|
|
|
|
|
|
-/* ================= 移动端适配 (≤768px) ================= */
|
|
|
-@media (max-width: 768px) {
|
|
|
+/* ================= 紧凑布局(手机竖屏 / 手机横屏 / 矮窗口)=================
|
|
|
+ 触发条件只做"或"判断, 不叠加 orientation、不设宽度上限, 杜绝"两边都不命中"的盲区:
|
|
|
+ 1. 宽度 ≤768px —— 手机竖屏、平板竖屏、窄窗口
|
|
|
+ 2. 高度 ≤600px —— 手机横屏(典型 360~430px)、矮窗口
|
|
|
+ 依据: 竖向侧栏(8 项菜单 + 底部 2 项操作)实测约需 541px, 加上 64px 顶栏约 605px,
|
|
|
+ 视口高度低于 600px 时竖排侧栏必然放不下
|
|
|
+ 横屏不再单独成一套规则 —— 横竖屏走完全相同的代码路径, 只重算宽度, 行为可预期 */
|
|
|
+@media (max-width: 768px), (max-height: 600px) {
|
|
|
/* 顶栏: 单行紧凑布局。
|
|
|
flex-shrink:0 防止内容超高时标题栏被 flex 压缩裁切(窄屏遮挡问题的根因);
|
|
|
标题/IMEI 单行省略, 不再换行撑高标题栏;
|
|
|
env(safe-area-inset-top) 兼容刘海屏/全面屏安全区 */
|
|
|
.topbar {
|
|
|
height: auto;
|
|
|
- min-height: 48px;
|
|
|
+ min-height: 50px;
|
|
|
flex-shrink: 0;
|
|
|
- padding: 8px 10px;
|
|
|
- padding-top: max(8px, env(safe-area-inset-top));
|
|
|
+ /* 内容实测 39px(标题+IMEI 两行), 上下各 5px => 恰好 50px;
|
|
|
+ 换成固定 height 会在系统大字号时裁切文字, 所以用 min-height 定下限 */
|
|
|
+ padding: 5px 10px;
|
|
|
+ padding-top: max(5px, env(safe-area-inset-top));
|
|
|
position: relative;
|
|
|
z-index: 20;
|
|
|
}
|
|
|
@@ -688,10 +666,13 @@ textarea:focus {
|
|
|
font-size: 12px;
|
|
|
}
|
|
|
|
|
|
- /* 侧栏: 变为顶部横向滚动导航, 固定高度不参与压缩 */
|
|
|
+ /* 侧栏: 变为顶部横向滚动导航, 固定高度不参与压缩。
|
|
|
+ .layout 必须保持 overflow:hidden —— 外壳始终等于视口高度,
|
|
|
+ 页面绝不出现"文档级滚动"(移动端地址栏收放时最容易错位的那种滚动),
|
|
|
+ 滚动只发生在下面的 #view 里, 这是整个紧凑布局稳定性的关键 */
|
|
|
.layout {
|
|
|
flex-direction: column;
|
|
|
- overflow: visible;
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
|
|
|
.sidebar {
|
|
|
@@ -737,13 +718,77 @@ textarea:focus {
|
|
|
box-shadow: none;
|
|
|
}
|
|
|
|
|
|
- /* 内容区: 放开固定高度, 交给整页滚动 */
|
|
|
+ /* 内容区: 全站唯一的滚动容器。
|
|
|
+ flex:1 撑满顶栏与导航之外的剩余高度; min-height:0 让它在内容超高时真的能滚动
|
|
|
+ (缺了它, flex 子项的自动最小高度会把外壳顶高, 又退回文档级滚动) */
|
|
|
.view {
|
|
|
padding: 4px;
|
|
|
}
|
|
|
|
|
|
+ #view {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ -webkit-overflow-scrolling: touch;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 页面片段根容器: 高度随内容自然撑开, 不再各自套一层滚动, 避免嵌套滚动的各种怪象 */
|
|
|
#view .app {
|
|
|
height: auto;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* page1 根容器不叫 .app 且固定 100% 高, 同样放开, 让卡片随内容撑开 */
|
|
|
+ #view > .page1 {
|
|
|
+ height: auto;
|
|
|
min-height: 100%;
|
|
|
}
|
|
|
+
|
|
|
+ /* 终端页例外: xterm 依赖明确的容器高度计算行列, 必须占满可视区域 */
|
|
|
+ #view > .app-terminal {
|
|
|
+ height: 100%;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* iOS 聚焦输入类控件时若字号 <16px 会自动放大页面, 统一提到 16px 规避 */
|
|
|
+ .log-level-select {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/* ================= 矮屏微调(手机横屏等, 高度 ≤600px)=================
|
|
|
+ 横屏可用高度只有 360~430px, 这里只做"省空间"一件事: 压缩顶栏与导航占用的高度,
|
|
|
+ 把空间让给内容。**滚动方式完全不变**——依旧由 #view 内部滚动,
|
|
|
+ 与竖屏是同一套逻辑, 所以横竖屏切换不会出现"能显示但不能滚"的割裂状态 */
|
|
|
+@media (max-height: 600px) {
|
|
|
+ .topbar {
|
|
|
+ min-height: 44px;
|
|
|
+ padding-top: max(5px, env(safe-area-inset-top));
|
|
|
+ padding-bottom: 5px;
|
|
|
+ /* 横屏时刘海位于左右两侧 */
|
|
|
+ padding-left: max(10px, env(safe-area-inset-left));
|
|
|
+ padding-right: max(10px, env(safe-area-inset-right));
|
|
|
+ }
|
|
|
+
|
|
|
+ .device .icon-box {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .device .icon {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sidebar {
|
|
|
+ padding: 4px 8px;
|
|
|
+ padding-left: max(8px, env(safe-area-inset-left));
|
|
|
+ padding-right: max(8px, env(safe-area-inset-right));
|
|
|
+ }
|
|
|
+
|
|
|
+ .menu-item,
|
|
|
+ .action-item {
|
|
|
+ padding: 6px 10px;
|
|
|
+ }
|
|
|
}
|