diff --git a/templates/logs.html b/templates/logs.html index 2042215..978fad4 100644 --- a/templates/logs.html +++ b/templates/logs.html @@ -49,16 +49,16 @@
主要操作
- - - -
diff --git a/web/static/css/page-logs.css b/web/static/css/page-logs.css index 3827d5a..9b4f8b8 100644 --- a/web/static/css/page-logs.css +++ b/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)); + } }