Polish logs mobile layout

templates/logs.html

@@ -49,16 +49,16 @@
     <div class="control-section">
       <div class="control-section-title">主要操作</div>
       <div class="control-buttons">
-        <button class="btn-control btn-control--refresh" onclick="refreshLogs()">
+        <button class="btn-control btn-control--refresh" onclick="refreshLogs()" aria-label="立即刷新">
           <i class="fas fa-sync-alt"></i><span>立即刷新</span>
         </button>
-        <button class="btn-control btn-control--pause" id="pause-btn" onclick="toggleAutoRefresh()">
+        <button class="btn-control btn-control--pause" id="pause-btn" onclick="toggleAutoRefresh()" aria-label="暫停自動刷新">
           <i class="fas fa-pause"></i><span>暫停自動刷新</span>
         </button>
-        <button class="btn-control btn-control--clear" onclick="clearLogs()">
+        <button class="btn-control btn-control--clear" onclick="clearLogs()" aria-label="清除日誌">
           <i class="fas fa-eraser"></i><span>清除日誌</span>
         </button>
-        <button class="btn-control btn-control--download" onclick="downloadLogs()">
+        <button class="btn-control btn-control--download" onclick="downloadLogs()" aria-label="下載日誌">
           <i class="fas fa-download"></i><span>下載日誌</span>
         </button>
       </div>

web/static/css/page-logs.css

@@ -16,7 +16,7 @@
 .page-logs .page-header {
   background: var(--logs-control-bg);
   padding: 25px 30px;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--momo-shadow-card);
   margin-bottom: 30px;
   display: flex;
@@ -63,7 +63,7 @@
 .page-logs .stat-card {
   background: var(--logs-control-bg);
   padding: 20px;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--momo-shadow-card);
   display: flex;
   align-items: center;
@@ -72,7 +72,7 @@
 .page-logs .stat-icon {
   width: 50px;
   height: 50px;
-  border-radius: 10px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -114,7 +114,7 @@
 .page-logs .control-panel {
   background: var(--logs-control-bg);
   padding: 25px;
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--momo-shadow-card);
   margin-bottom: 25px;
 }
@@ -291,7 +291,7 @@
   inset: 0;
   background: var(--momo-rule);
   transition: 0.3s;
-  border-radius: 26px;
+  border-radius: 999px;
 }
 .page-logs .slider::before {
   position: absolute;
@@ -320,7 +320,7 @@
 /* ---------- Log Terminal ---------- */
 .page-logs .log-container-wrapper {
   background: var(--logs-control-bg);
-  border-radius: 12px;
+  border-radius: 8px;
   box-shadow: var(--momo-shadow-card);
   overflow: hidden;
 }
@@ -369,9 +369,168 @@
 
 /* ---------- Responsive ---------- */
 @media (max-width: 768px) {
-  .page-logs .page-header   { flex-direction: column; gap: 15px; }
-  .page-logs .control-buttons { flex-direction: column; }
-  .page-logs .btn-control   { width: 100%; }
-  .page-logs .stats-grid    { grid-template-columns: 1fr; }
-  .page-logs #log-container { height: 50vh; }
+  .page-logs {
+    padding: 0;
+  }
+
+  .page-logs .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    padding: 16px;
+    margin-bottom: 12px;
+  }
+
+  .page-logs .page-header h4 {
+    font-size: 18px;
+    line-height: 1.25;
+  }
+
+  .page-logs .status-indicators {
+    width: 100%;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+  }
+
+  .page-logs .status-item {
+    font-size: 12px;
+  }
+
+  .page-logs .stats-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .page-logs .stat-card {
+    min-height: 72px;
+    padding: 12px;
+    gap: 10px;
+  }
+
+  .page-logs .stat-icon {
+    width: 34px;
+    height: 34px;
+    border-radius: 7px;
+    font-size: 16px;
+    flex: 0 0 auto;
+  }
+
+  .page-logs .stat-value {
+    font-size: 20px;
+  }
+
+  .page-logs .stat-label {
+    margin-top: 3px;
+    font-size: 10px;
+    letter-spacing: 0.04em;
+  }
+
+  .page-logs .control-panel {
+    padding: 14px;
+    margin-bottom: 12px;
+  }
+
+  .page-logs .control-section {
+    margin-bottom: 14px;
+  }
+
+  .page-logs .control-section-title {
+    margin-bottom: 8px;
+    font-size: 12px;
+  }
+
+  .page-logs .control-buttons,
+  .page-logs .filter-buttons {
+    display: grid;
+    gap: 8px;
+  }
+
+  .page-logs .control-buttons {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .page-logs .filter-buttons {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+
+  .page-logs .btn-control,
+  .page-logs .btn-filter,
+  .page-logs .btn-font-size {
+    justify-content: center;
+    padding: 9px 10px;
+    border-radius: 7px;
+    font-size: 12px;
+  }
+
+  .page-logs .btn-control {
+    width: 100%;
+    gap: 6px;
+    min-height: 38px;
+  }
+
+  .page-logs .btn-control span {
+    display: none;
+  }
+
+  .page-logs .filter-row {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 10px;
+  }
+
+  .page-logs .display-row {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .page-logs .search-box {
+    width: 100%;
+    min-width: 0;
+  }
+
+  .page-logs .search-box input {
+    padding: 9px 36px;
+    font-size: 13px;
+  }
+
+  .page-logs .font-size-group {
+    display: grid;
+    grid-template-columns: auto minmax(0, 1fr);
+    align-items: center;
+    gap: 8px;
+  }
+
+  .page-logs .font-size-controls {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(38px, 1fr));
+    gap: 6px;
+  }
+
+  .page-logs .toggle-item {
+    justify-content: space-between;
+    gap: 8px;
+  }
+
+  .page-logs #log-container {
+    height: 52vh;
+    padding: 12px;
+    font-size: 12px;
+    line-height: 1.55;
+  }
+
+  .page-logs .log-empty i {
+    font-size: 42px;
+    margin-bottom: 12px;
+  }
+}
+
+@media (max-width: 360px) {
+  .page-logs .control-buttons,
+  .page-logs .filter-buttons {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
 }