update at 2026-03-16 09:00:35

calendar/src/style.css

@@ -4,11 +4,14 @@
     'PingFang SC',
     'Noto Sans SC',
     sans-serif;
-  color: #111111;
-  background:
-    radial-gradient(circle at 12% 10%, rgba(255, 255, 255, 0.9), transparent 26%),
-    radial-gradient(circle at 88% 18%, rgba(255, 255, 255, 0.74), transparent 22%),
-    linear-gradient(150deg, #fbe9e8 0%, #f2d7d7 48%, #eed6d5 100%);
+  color: #000000;
+  background: #ffffff;
+  --dashboard-width: 1072px;
+  --dashboard-height: 1448px;
+  --ink: #000000;
+  --paper: #ffffff;
+  --frame-stroke: #8b6b47;
+  --frame-stroke-strong: #6f5235;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
@@ -23,7 +26,9 @@ html,
 body,
 #app {
   margin: 0;
+  width: 100%;
   min-height: 100%;
+  background: #ffffff;
 }
 
 body {
@@ -39,45 +44,37 @@ img {
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0.75rem;
+  padding: 0;
+  background: #ffffff;
 }
 
 .page-shell--clock-face {
-  background: #f5f2ef;
+  background: #ffffff;
 }
 
 .dashboard-frame {
-  width: 100%;
-  aspect-ratio: 1024 / 600;
-  padding: 1rem;
-  border-radius: 1.9rem;
-  background:
-    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.18)),
-    rgba(255, 255, 255, 0.16);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.62),
-    0 24px 46px rgba(99, 64, 66, 0.18);
-  backdrop-filter: blur(14px);
+  width: min(100vw, var(--dashboard-width));
+  aspect-ratio: 1072 / 1448;
+  background: var(--paper);
 }
 
 .dashboard-grid {
   display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
-  grid-template-rows: minmax(0, 1fr) 72px;
-  gap: 1rem;
+  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
+  grid-template-rows: minmax(0, 1fr) 168px;
+  gap: 1.25rem;
   height: 100%;
+  padding: 1.4rem;
   align-content: start;
   align-items: stretch;
 }
 
 .card {
   min-height: 0;
-  border-radius: 1.75rem;
-  background: rgba(255, 255, 255, 0.94);
-  box-shadow:
-    0 16px 34px rgba(92, 67, 60, 0.18),
-    inset 0 1px 0 rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(117, 80, 76, 0.08);
+  border-radius: 2rem;
+  background: var(--paper);
+  border: 2px solid var(--frame-stroke);
+  box-shadow: none;
 }
 
 .clock-face-stage {
@@ -87,6 +84,12 @@ img {
   aspect-ratio: 1;
 }
 
+@media (max-width: 1100px) {
+  .page-shell {
+    padding: 0.75rem;
+  }
+}
+
 @media (max-width: 860px) {
   .dashboard-frame {
     aspect-ratio: auto;
@@ -95,6 +98,7 @@ img {
   .dashboard-grid {
     grid-template-columns: 1fr;
     grid-template-rows: none;
+    padding: 0.9rem;
   }
 
   .page-shell {