From 8dd212f0af090053ce67faffeffa06e02aa74b62 Mon Sep 17 00:00:00 2001
From: "2569718930@qq.com" <2569718930@qq.com>
Date: Wed, 13 May 2026 20:05:16 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=A1=E7=89=87=E6=94=BE=E5=A4=A7=EF=BC=9A3?=
 =?UTF-8?q?=E5=88=97=E7=BD=91=E6=A0=BC=E3=80=8152px=E6=B8=A9=E5=BA=A6?=
 =?UTF-8?q?=E5=A4=A7=E5=AD=97=E3=80=81=E5=8A=A0=E5=AE=BD=E9=97=B4=E8=B7=9D?=
 =?UTF-8?q?=E3=80=81=E6=95=B4=E4=BD=93=E6=94=BE=E5=A4=A7=20~30%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 monitoring-web/static/style.css | 82 ++++++++++++++++-----------------
 1 file changed, 39 insertions(+), 43 deletions(-)

diff --git a/monitoring-web/static/style.css b/monitoring-web/static/style.css
index 8c7eda38..b2f61d91 100644
--- a/monitoring-web/static/style.css
+++ b/monitoring-web/static/style.css
@@ -8,49 +8,43 @@ body {
 }
 
 .page {
-  max-width: 1400px;
+  max-width: 1500px;
   margin: 0 auto;
-  padding: 20px 24px;
+  padding: 24px 28px;
 }
 
 .header {
   display: flex;
   justify-content: space-between;
   align-items: baseline;
-  margin-bottom: 24px;
-  padding-bottom: 12px;
+  margin-bottom: 28px;
+  padding-bottom: 14px;
   border-bottom: 1px solid #1e2130;
 }
 
 .header h1 {
-  font-size: 22px;
+  font-size: 24px;
   font-weight: 600;
   color: #e8eaed;
   letter-spacing: 0.02em;
 }
 
-.updated {
-  font-size: 13px;
-  color: #5a6170;
-}
-
 /* ── grid ── */
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  gap: 14px;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
 }
 
-@media (max-width: 1280px) { .card-grid { grid-template-columns: repeat(3, 1fr); } }
-@media (max-width: 900px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
-@media (max-width: 560px)  { .card-grid { grid-template-columns: 1fr; } }
+@media (max-width: 1100px) { .card-grid { grid-template-columns: repeat(2, 1fr); } }
+@media (max-width: 600px)  { .card-grid { grid-template-columns: 1fr; } }
 
 /* ── card ── */
 .card {
   background: #161822;
   border: 1px solid #1e2130;
-  border-radius: 10px;
-  padding: 16px 18px;
+  border-radius: 12px;
+  padding: 22px 26px;
   transition: border-color 0.3s, box-shadow 0.3s;
   position: relative;
 }
@@ -63,30 +57,32 @@ body {
 .card-top {
   display: flex;
   align-items: center;
-  gap: 6px;
-  margin-bottom: 10px;
-  font-size: 13px;
+  gap: 8px;
+  margin-bottom: 14px;
+  font-size: 15px;
   flex-wrap: wrap;
 }
 
 .city-name {
   color: #e0e3e8;
-  font-weight: 600;
+  font-weight: 700;
 }
 
 .airport {
   color: #6a7180;
+  font-weight: 400;
 }
 
 .local-time {
   margin-left: auto;
   color: #4a5160;
   font-variant-numeric: tabular-nums;
+  font-size: 14px;
 }
 
 .badge {
-  font-size: 11px;
-  padding: 1px 6px;
+  font-size: 12px;
+  padding: 2px 7px;
   border-radius: 4px;
   font-weight: 600;
 }
@@ -96,25 +92,25 @@ body {
   color: #a78bfa;
 }
 .new-high-card {
-  border-color: rgba(124, 58, 237, 0.25);
+  border-color: rgba(124, 58, 237, 0.30);
 }
 
 /* ── temp ── */
 .card-temp {
-  margin: 4px 0 6px;
+  margin: 8px 0 10px;
   font-weight: 700;
-  line-height: 1.1;
+  line-height: 1.15;
 }
 
 .temp-value {
-  font-size: 40px;
+  font-size: 52px;
   color: #e8eaed;
-  letter-spacing: -0.02em;
+  letter-spacing: -0.03em;
 }
 
 .temp-value.na {
   color: #3a4050;
-  font-size: 28px;
+  font-size: 32px;
 }
 .temp-value.warm {
   color: #f59e0b;
@@ -124,24 +120,24 @@ body {
 }
 
 .temp-unit {
-  font-size: 18px;
+  font-size: 22px;
   color: #5a6170;
-  margin-left: 2px;
+  margin-left: 3px;
 }
 
 /* ── meta ── */
 .card-meta {
   display: flex;
   flex-direction: column;
-  gap: 3px;
-  margin-bottom: 4px;
+  gap: 5px;
+  margin-bottom: 2px;
 }
 
 .meta-row {
   display: flex;
   align-items: baseline;
-  gap: 6px;
-  font-size: 13px;
+  gap: 8px;
+  font-size: 14px;
 }
 
 .meta-row .label {
@@ -161,38 +157,38 @@ body {
 }
 
 /* ── trend ── */
-.trend { font-size: 15px; font-weight: 600; }
+.trend { font-size: 18px; font-weight: 700; }
 .trend.rising { color: #34d399; }
 .trend.falling { color: #60a5fa; }
 .trend.flat { color: #5a6170; }
 
 /* ── runway ── */
-.card-runway { margin-top: 8px; }
+.card-runway { margin-top: 12px; }
 
 .runway-divider {
   height: 1px;
   background: #1e2130;
-  margin-bottom: 6px;
+  margin-bottom: 8px;
 }
 
 .runway-row {
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
-  margin-bottom: 1px;
+  font-size: 13px;
+  margin-bottom: 2px;
 }
 
 .runway-label { color: #4a5160; }
 .runway-temp { color: #7a8290; font-variant-numeric: tabular-nums; }
 
 /* ── obs age ── */
-.obs-age { font-size: 12px; color: #5a6170; }
+.obs-age { font-size: 13px; color: #5a6170; }
 
 /* ── HTMX indicator ── */
 .htmx-indicator {
   text-align: center;
-  padding: 12px;
-  font-size: 13px;
+  padding: 14px;
+  font-size: 14px;
   color: #3a4050;
   display: none;
 }