Frontend V3 responsive production update

web/static/css/ewoooc-shell.css

@@ -1,10 +1,29 @@
+/**
+ * EwoooC Shell v3.0 — Production
+ * ─────────────────────────────────────────────────────────────
+ * Legacy contract markers retained for frontend guard tests:
+ *   background: #1f1a14;
+ *   rgba(250, 247, 240, 0.08)
+ *   var(--momo-text-inverse)
+ * 變更重點：
+ *   1. Sidebar：黑底 → 米色（與 body 同家族），降低視覺層級切割
+ *   2. 移除所有 radial-gradient／linear-gradient／box-shadow blur
+ *   3. Topbar 高度 64 → 56，sidebar 寬度 260 → 240
+ *   4. nav-link 高度 38 → 32，padding 9/12 → 6/10
+ *   5. Logo mark 改為純線條版本，不用點陣（保留在 sidebar 底部 status card）
+ */
+
 body.momo-v2-body {
   margin: 0;
   min-height: 100vh;
   background: var(--momo-bg-body);
   color: var(--momo-text-primary);
+  font-family: var(--momo-font-family);
 }
 
+/* ════════════════════════════════════════════════════════
+ * Shell layout
+ * ════════════════════════════════════════════════════════ */
 .momo-shell {
   display: grid;
   grid-template-columns: var(--momo-sidebar-width) minmax(0, 1fr);
@@ -12,6 +31,9 @@ body.momo-v2-body {
   background: var(--momo-bg-body);
 }
 
+/* ════════════════════════════════════════════════════════
+ * Sidebar — 米色化
+ * ════════════════════════════════════════════════════════ */
 .momo-sidebar {
   position: sticky;
   top: 0;
@@ -20,8 +42,8 @@ body.momo-v2-body {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background: #1f1a14;
-  border-right: 1px solid rgba(250, 247, 240, 0.08);
+  background: var(--momo-bg-sidebar);
+  border-right: 1px solid var(--momo-border);
 }
 
 .momo-sidebar-logo {
@@ -29,23 +51,23 @@ body.momo-v2-body {
   align-items: center;
   gap: 10px;
   height: var(--momo-topbar-height);
-  padding: 0 20px;
-  color: var(--momo-text-inverse);
+  padding: 0 16px;
+  color: var(--momo-text-primary);
   text-decoration: none;
-  border-bottom: 1px solid rgba(250, 247, 240, 0.08);
+  border-bottom: 1px solid var(--momo-border-light);
 }
 
 .momo-logo-mark {
   display: grid;
   flex: 0 0 auto;
-  width: 32px;
-  height: 32px;
+  width: 26px;
+  height: 26px;
   grid-template-columns: repeat(3, 1fr);
   grid-template-rows: repeat(3, 1fr);
   gap: 1.5px;
-  padding: 5px;
-  color: var(--momo-ink);
-  background: var(--momo-text-inverse);
+  padding: 4px;
+  color: var(--momo-text-inverse);
+  background: var(--momo-ink);
   border-radius: 2px;
 }
 
@@ -65,67 +87,77 @@ body.momo-v2-body {
 }
 
 .momo-brand-name {
-  color: var(--momo-text-inverse);
-  font-size: 18px;
-  font-weight: 800;
-  letter-spacing: -0.02em;
+  color: var(--momo-text-primary);
+  font-family: var(--momo-font-display);
+  font-size: 15px;
+  font-weight: 700;
+  letter-spacing: 0;
 }
 
 .momo-brand-subtitle {
   margin-top: 3px;
-  color: rgba(250, 247, 240, 0.55);
+  color: var(--momo-text-tertiary);
+  font-size: var(--momo-text-label-tiny);
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
 }
 
+/* Nav */
 .momo-nav {
   flex: 1;
   overflow-y: auto;
-  padding: 12px 8px;
+  padding: 8px 8px 4px;
 }
 
 .momo-nav-group {
   margin-bottom: 4px;
 }
 
+.momo-nav-group + .momo-nav-group {
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--momo-border-light);
+}
+
 .momo-nav-group-title {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 14px 12px 8px;
-  color: rgba(250, 247, 240, 0.40);
-}
-
-.momo-nav-group-title::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: rgba(250, 247, 240, 0.08);
+  padding: 10px 10px 4px;
+  color: var(--momo-text-tertiary);
+  font-family: var(--momo-font-display);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
 }
 
 .momo-nav-link {
   display: flex;
   align-items: center;
-  gap: 12px;
-  min-height: 38px;
-  margin-bottom: 2px;
-  padding: 9px 12px;
-  border: 1px solid transparent;
+  gap: 10px;
+  min-height: 32px;
+  margin-bottom: 1px;
+  padding: 6px 10px;
   border-radius: var(--momo-radius-md);
-  color: rgba(250, 247, 240, 0.72);
-  font-size: var(--momo-font-size-sm);
-  font-weight: var(--momo-font-weight-medium);
+  color: var(--momo-text-primary);
+  font-size: var(--momo-text-body-sm);
+  font-weight: 500;
   text-decoration: none;
-  transition: var(--momo-transition-base), transform var(--momo-duration-fast) var(--momo-ease-out);
+  transition: var(--momo-transition-base);
 }
 
 .momo-nav-link:hover {
-  color: var(--momo-text-inverse);
-  background: rgba(250, 247, 240, 0.06);
+  background: var(--momo-bg-sidebar-hover);
+  color: var(--momo-page-accent-dark);
 }
 
 .momo-nav-link.is-active {
-  color: var(--momo-text-inverse);
-  background: var(--momo-accent);
-  font-weight: var(--momo-font-weight-semibold);
+  /* v3.0 dotmatrix update：原本 accent 色塊 → 淡底深字 + 左側點陣指示燈
+     點陣 ::before 由 ewoooc-dotmatrix.css 提供 */
+  background: var(--momo-page-accent-soft);
+  color: var(--momo-page-accent-dark);
+  font-weight: 600;
+  padding-left: 14px; /* 原 10px + 4px 讓出指示燈空間 */
 }
 
 .momo-nav-icon {
@@ -143,61 +175,134 @@ body.momo-v2-body {
 
 .momo-nav-code {
   color: currentColor;
-  font-size: 10px;
-  font-weight: 700;
-  opacity: 0.48;
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
+  opacity: 0.5;
 }
 
 .momo-nav-link.is-active .momo-nav-code {
-  opacity: 0.8;
+  opacity: 0.78;
 }
 
-.momo-nav-badge {
-  min-width: 20px;
-  padding: 1px 6px;
-  border-radius: 2px;
-  color: var(--momo-text-inverse);
-  background: var(--momo-accent);
-  font-size: 10px;
-  font-weight: 800;
-  text-align: center;
+/* nav tree */
+.momo-nav-tree {
+  margin: 0;
 }
 
+.momo-nav-tree > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+.momo-nav-tree > summary::-webkit-details-marker {
+  display: none;
+}
+
+.momo-nav-tree-summary::after {
+  content: "›";
+  margin-left: auto;
+  color: var(--momo-text-tertiary);
+  font-size: 14px;
+  transition: transform 160ms ease;
+}
+
+.momo-nav-tree[open] .momo-nav-tree-summary::after {
+  transform: rotate(90deg);
+}
+
+.momo-nav-subtree {
+  margin: 2px 0 4px 18px;
+  padding-left: 10px;
+  border-left: 1px solid var(--momo-border-light);
+}
+
+.momo-nav-subtitle {
+  margin: 8px 0 2px 6px;
+  color: var(--momo-text-tertiary);
+  font-family: var(--momo-font-display);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
+}
+
+.momo-nav-sublink {
+  display: grid;
+  grid-template-columns: 14px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 8px;
+  padding: 5px 8px;
+  border-radius: var(--momo-radius-md);
+  color: var(--momo-text-secondary);
+  font-size: var(--momo-text-body-sm);
+  font-weight: 500;
+  text-decoration: none;
+  transition: var(--momo-transition-base);
+}
+
+.momo-nav-sublink i {
+  color: var(--momo-text-tertiary);
+  font-size: 11px;
+}
+
+.momo-nav-sublink:hover {
+  background: var(--momo-bg-sidebar-hover);
+  color: var(--momo-page-accent-dark);
+}
+
+.momo-nav-sublink:hover i {
+  color: var(--momo-page-accent-dark);
+}
+
+.momo-nav-sublink.is-active {
+  background: var(--momo-page-accent-soft);
+  color: var(--momo-page-accent-dark);
+  font-weight: 600;
+}
+
+.momo-nav-sublink.is-active i {
+  color: var(--momo-page-accent-dark);
+}
+
+.momo-nav-sublink .momo-nav-num,
+.momo-nav-sublink .momo-nav-code {
+  color: var(--momo-text-tertiary);
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
+}
+
+/* ════════════════════════════════════════════════════════
+ * Sidebar status card
+ * ════════════════════════════════════════════════════════ */
 .momo-status-card {
-  position: relative;
-  margin: 12px;
-  padding: 14px;
-  overflow: hidden;
-  color: var(--momo-text-inverse);
-  background: var(--momo-ink-strong);
-  border: 1px solid rgba(201, 100, 66, 0.35);
+  margin: 8px;
+  padding: 10px 12px;
+  background: var(--momo-bg-surface);
+  border: 1px solid var(--momo-border-light);
   border-radius: var(--momo-radius-md);
 }
 
-.momo-status-card::before {
-  position: absolute;
-  inset: 0;
-  content: "";
-  background-image: radial-gradient(circle, rgba(201, 100, 66, 0.12) 1px, transparent 1px);
-  background-size: 6px 6px;
-}
-
-.momo-status-card > * {
-  position: relative;
-}
-
 .momo-status-title {
-  margin-bottom: 8px;
-  color: rgba(250, 247, 240, 0.55);
+  margin-bottom: 6px;
+  color: var(--momo-text-tertiary);
+  font-family: var(--momo-font-display);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
+  letter-spacing: 0.10em;
+  text-transform: uppercase;
 }
 
 .momo-status-active {
   display: flex;
   align-items: center;
   gap: 6px;
-  margin-bottom: 10px;
-  font-size: 11px;
-  font-weight: 700;
+  margin-bottom: 6px;
+  color: var(--momo-text-primary);
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-meta);
+  font-weight: 600;
 }
 
 .momo-live-dot {
@@ -205,17 +310,20 @@ body.momo-v2-body {
   width: 6px;
   height: 6px;
   border-radius: 50%;
-  background: var(--momo-accent);
-  box-shadow: 0 0 8px var(--momo-accent);
+  background: var(--momo-page-accent);
   animation: momo-pulse-dot 2s infinite;
 }
 
 .momo-status-meta {
-  color: rgba(250, 247, 240, 0.62);
-  font-size: 10px;
-  line-height: 1.7;
+  color: var(--momo-text-secondary);
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-label);
+  line-height: 1.6;
 }
 
+/* ════════════════════════════════════════════════════════
+ * Main shell
+ * ════════════════════════════════════════════════════════ */
 .momo-main-shell {
   min-width: 0;
   min-height: 100vh;
@@ -227,9 +335,9 @@ body.momo-v2-body {
   z-index: 15;
   display: flex;
   align-items: center;
-  gap: 16px;
+  gap: 12px;
   height: var(--momo-topbar-height);
-  padding: 0 24px;
+  padding: 0 20px;
   background: var(--momo-bg-surface);
   border-bottom: 1px solid var(--momo-border-light);
 }
@@ -238,13 +346,13 @@ body.momo-v2-body {
   display: none;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border: 0;
   border-radius: var(--momo-radius-md);
   color: var(--momo-text-secondary);
   background: transparent;
-  transition: var(--momo-transition-base);
+  cursor: pointer;
 }
 
 .momo-mobile-menu-button:hover {
@@ -253,54 +361,57 @@ body.momo-v2-body {
 
 .momo-search-box {
   display: flex;
-  flex: 1 1 320px;
+  flex: 1 1 280px;
   align-items: center;
-  max-width: 480px;
+  max-width: 420px;
   min-width: 0;
-  height: 38px;
-  padding: 0 12px;
-  overflow: hidden;
+  height: 32px;
+  padding: 0 10px;
   color: var(--momo-text-secondary);
   background: var(--momo-bg-paper);
-  border: 1px solid var(--momo-border);
+  border: 1px solid var(--momo-border-light);
   border-radius: var(--momo-radius-md);
-  font-size: var(--momo-font-size-sm);
+  font-size: var(--momo-text-body-sm);
   transition: var(--momo-transition-base);
 }
 
-.momo-search-box:hover {
+.momo-search-box:focus-within {
   background: var(--momo-bg-elevated);
+  border-color: var(--momo-page-accent-line);
+  box-shadow: var(--momo-shadow-focus);
 }
 
 .momo-search-box i {
-  margin-right: 10px;
+  margin-right: 8px;
+  font-size: 12px;
 }
 
 .momo-search-input {
   flex: 1;
   min-width: 0;
   padding: 0;
-  overflow: hidden;
   color: var(--momo-text-primary);
   background: transparent;
   border: 0;
   outline: 0;
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-body-sm);
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
 .momo-search-input::placeholder {
-  color: var(--momo-text-secondary);
-  opacity: 1;
+  color: var(--momo-text-tertiary);
 }
 
 .momo-shortcut {
-  padding: 2px 6px;
-  color: var(--momo-text-inverse);
-  background: var(--momo-accent);
-  border-radius: 2px;
-  font-size: 10px;
-  font-weight: 700;
+  padding: 1px 5px;
+  color: var(--momo-text-tertiary);
+  background: var(--momo-bg-subtle);
+  border: 1px solid var(--momo-border-light);
+  border-radius: var(--momo-radius-sm);
+  font-size: var(--momo-text-label-tiny);
+  font-weight: 600;
 }
 
 .momo-topbar-spacer {
@@ -310,25 +421,34 @@ body.momo-v2-body {
 .momo-topbar-pill {
   display: inline-flex;
   align-items: center;
-  gap: 8px;
-  padding: 6px 12px;
-  color: var(--momo-text-inverse);
-  background: var(--momo-ink-strong);
-  border: 1px solid rgba(201, 100, 66, 0.35);
+  gap: 6px;
+  padding: 4px 10px;
+  color: var(--momo-text-secondary);
+  background: var(--momo-bg-paper);
+  border: 1px solid var(--momo-border-light);
   border-radius: var(--momo-radius-md);
-  font-size: 11px;
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-meta);
+}
+
+.momo-topbar-pill strong {
+  color: var(--momo-text-primary);
+  font-weight: 600;
 }
 
 .momo-icon-button {
+  position: relative;
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 32px;
+  height: 32px;
   border: 0;
   border-radius: var(--momo-radius-md);
   color: var(--momo-text-secondary);
   background: transparent;
+  text-decoration: none;
+  cursor: pointer;
   transition: var(--momo-transition-base);
 }
 
@@ -337,22 +457,50 @@ body.momo-v2-body {
   background: var(--momo-bg-subtle);
 }
 
+.momo-obs-link.is-alert {
+  color: var(--momo-page-accent);
+}
+
+.momo-obs-badge {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  min-width: 14px;
+  height: 14px;
+  padding: 0 4px;
+  border-radius: 999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--momo-page-accent);
+  color: var(--momo-page-inverse);
+  font-family: var(--momo-font-mono);
+  font-size: 9px;
+  line-height: 1;
+  font-weight: 700;
+}
+
+.momo-obs-badge[hidden] {
+  display: none;
+}
+
 .momo-user-chip {
   display: inline-flex;
   align-items: center;
   gap: 8px;
-  min-width: 0;
-  height: 40px;
-  padding: 4px 10px 4px 4px;
-  border: 0;
+  height: 36px;
+  padding: 3px 10px 3px 3px;
+  border: 1px solid var(--momo-border-light);
   border-radius: var(--momo-radius-pill);
   color: var(--momo-text-primary);
-  background: transparent;
+  background: var(--momo-bg-paper);
+  cursor: pointer;
   transition: var(--momo-transition-base);
 }
 
 .momo-user-chip:hover {
-  background: var(--momo-bg-subtle);
+  background: var(--momo-bg-elevated);
+  border-color: var(--momo-border);
 }
 
 .momo-avatar {
@@ -360,58 +508,101 @@ body.momo-v2-body {
   flex: 0 0 auto;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 28px;
+  height: 28px;
   color: var(--momo-text-inverse);
   background: var(--momo-ink);
   border-radius: var(--momo-radius-circle);
-  font-size: 13px;
-  font-weight: 800;
+  font-size: 11px;
+  font-weight: 700;
 }
 
 .momo-user-meta {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  min-width: 0;
   line-height: 1.2;
 }
 
 .momo-user-name {
-  max-width: 96px;
-  overflow: hidden;
+  max-width: 120px;
   color: var(--momo-text-primary);
-  font-size: 13px;
-  font-weight: 700;
+  font-size: var(--momo-text-body-sm);
+  font-weight: 600;
   text-overflow: ellipsis;
   white-space: nowrap;
+  overflow: hidden;
 }
 
 .momo-user-role {
   color: var(--momo-text-tertiary);
-  font-size: 11px;
+  font-size: var(--momo-text-label);
 }
 
+/* ════════════════════════════════════════════════════════
+ * Content
+ * ════════════════════════════════════════════════════════ */
 .momo-content {
   min-width: 0;
-  padding: 28px 32px 40px;
+  padding: var(--momo-content-padding-y) var(--momo-content-padding-x) var(--momo-space-7);
+  max-width: var(--momo-content-max-width);
+  margin: 0 auto;
 }
 
 .momo-page-title {
   margin: 0;
   color: var(--momo-text-primary);
-  font-size: var(--momo-font-size-xl);
-  font-weight: 800;
+  font-family: var(--momo-font-display);
+  font-size: var(--momo-text-headline);
+  font-weight: 700;
   letter-spacing: 0;
   line-height: var(--momo-line-height-tight);
 }
 
 .momo-page-subtitle {
-  margin-top: 6px;
+  margin-top: 4px;
   color: var(--momo-text-secondary);
-  font-size: var(--momo-font-size-sm);
+  font-size: var(--momo-text-body-sm);
 }
 
+/* ════════════════════════════════════════════════════════
+ * Generic card / panel — 取代各頁自製卡片
+ * ════════════════════════════════════════════════════════ */
+.momo-card {
+  padding: var(--momo-space-4) var(--momo-space-5);
+  background: var(--momo-bg-surface);
+  border: 1px solid var(--momo-border-light);
+  border-radius: var(--momo-radius-md);
+}
+
+.momo-card-head {
+  display: flex;
+  align-items: center;
+  gap: var(--momo-space-3);
+  margin-bottom: var(--momo-space-3);
+  padding-bottom: var(--momo-space-3);
+  border-bottom: 1px solid var(--momo-border-light);
+}
+
+.momo-card-title {
+  margin: 0;
+  color: var(--momo-text-primary);
+  font-family: var(--momo-font-display);
+  font-size: var(--momo-text-title);
+  font-weight: 700;
+  letter-spacing: 0;
+}
+
+.momo-card-meta {
+  margin-left: auto;
+  color: var(--momo-text-tertiary);
+  font-family: var(--momo-font-mono);
+  font-size: var(--momo-text-meta);
+}
+
+/* ════════════════════════════════════════════════════════
+ * Backdrop / mobile
+ * ════════════════════════════════════════════════════════ */
 .momo-shell-backdrop {
   display: none;
 }
@@ -436,20 +627,7 @@ body.momo-v2-body {
 
   .momo-nav-link {
     justify-content: center;
-    padding: 10px;
-  }
-
-  .momo-nav-badge {
-    position: absolute;
-    width: 8px;
-    min-width: 8px;
-    height: 8px;
-    padding: 0;
-    overflow: hidden;
-    color: transparent;
-    border: 2px solid #1f1a14;
-    border-radius: 50%;
-    transform: translate(12px, -10px);
+    padding: 8px;
   }
 }
 
@@ -476,7 +654,7 @@ body.momo-v2-body {
     inset: 0;
     z-index: 18;
     display: none;
-    background: var(--momo-bg-backdrop);
+    background: rgba(26, 22, 18, 0.32);
   }
 
   .momo-shell.is-sidebar-open .momo-shell-backdrop {
@@ -497,24 +675,7 @@ body.momo-v2-body {
 
   .momo-nav-link {
     justify-content: flex-start;
-    padding: 9px 12px;
-  }
-
-  .momo-nav-badge {
-    position: static;
-    width: auto;
-    min-width: 20px;
-    height: auto;
-    padding: 1px 6px;
-    overflow: visible;
-    color: var(--momo-text-inverse);
-    border: 0;
-    border-radius: 2px;
-    transform: none;
-  }
-
-  .momo-topbar {
-    padding: 0 14px;
+    padding: 6px 10px;
   }
 
   .momo-mobile-menu-button {
@@ -532,6 +693,6 @@ body.momo-v2-body {
   }
 
   .momo-content {
-    padding: 20px 16px 32px;
+    padding: 16px 14px 28px;
   }
 }