diff --git a/config.py b/config.py index c50f0a7..a61292b 100644 --- a/config.py +++ b/config.py @@ -320,7 +320,7 @@ YOUTUBE_API_KEY = os.getenv('YOUTUBE_API_KEY', '') # ========================================== # 系統版本與路徑 # ========================================== -SYSTEM_VERSION = "V10.157" +SYSTEM_VERSION = "V10.158" LOG_FILE_PATH = os.path.join(BASE_DIR, 'logs/system.log') public_url = PUBLIC_URL # 用於模板顯示 diff --git a/static/css/observability-system.css b/static/css/observability-system.css index 58addfe..0f3dc1d 100644 --- a/static/css/observability-system.css +++ b/static/css/observability-system.css @@ -37,7 +37,7 @@ linear-gradient(180deg, rgba(255, 248, 239, 0.65), rgba(255, 253, 248, 0.96)); background-size: 18px 18px, auto, auto, auto; color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); } .momo-observability-mode .momo-content::before { @@ -76,16 +76,16 @@ linear-gradient(135deg, rgba(255, 248, 239, 0.96), rgba(255, 255, 255, 0.76)); box-shadow: 0 18px 42px rgba(70, 46, 28, 0.08); color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size: var(--obs-title-size); - letter-spacing: -0.045em; + letter-spacing: 0; } .momo-observability-mode .container-fluid > h2:first-child small { display: block; margin-top: 0.3rem; color: var(--obs-muted) !important; - font-family: 'Noto Sans TC', sans-serif; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size: 0.88rem; font-weight: 500; letter-spacing: 0; @@ -122,7 +122,7 @@ .momo-observability-mode h3, .momo-observability-mode h4, .momo-observability-mode h5 { - letter-spacing: -0.035em; + letter-spacing: 0; } .momo-observability-mode h1, @@ -132,7 +132,7 @@ .momo-observability-mode h5, .momo-observability-mode h6 { color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; font-weight: 850; } @@ -147,10 +147,10 @@ .momo-observability-mode .quality-title, .momo-observability-mode .ppt-title { max-width: 780px; - font-family: 'Noto Sans TC', 'Inter', sans-serif !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important; line-height: 1.12 !important; - letter-spacing: -0.045em !important; + letter-spacing: 0!important; font-weight: 860 !important; } @@ -283,7 +283,7 @@ .momo-observability-mode .ppt-value { font-size: clamp(1.55rem, 3vw, 2.25rem) !important; line-height: 1.05 !important; - letter-spacing: -0.055em !important; + letter-spacing: 0!important; font-weight: 900 !important; } @@ -300,7 +300,7 @@ .momo-observability-mode [class$="-table-title"] h3 { font-size: clamp(1.05rem, 2vw, 1.45rem) !important; line-height: 1.25 !important; - letter-spacing: -0.035em !important; + letter-spacing: 0!important; } .momo-observability-mode code, @@ -370,7 +370,7 @@ .momo-observability-mode .btn { border-radius: 999px; font-weight: 760; - letter-spacing: -0.01em; + letter-spacing: 0; min-height: 2.25rem; padding-inline: 0.9rem; box-shadow: none; @@ -565,7 +565,7 @@ .momo-observability-mode .badge { border-radius: 999px; font-weight: 850; - letter-spacing: -0.01em; + letter-spacing: 0; padding: 0.36em 0.62em; } @@ -935,10 +935,10 @@ .momo-observability-mode .display-4, .momo-observability-mode .display-5, .momo-observability-mode .h1 { - font-family: 'JetBrains Mono', 'Noto Sans TC', monospace !important; + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; font-size: var(--obs-value-size) !important; font-weight: 850 !important; - letter-spacing: -0.055em !important; + letter-spacing: 0!important; } .momo-observability-mode .table, diff --git a/templates/admin/agent_orchestration.html b/templates/admin/agent_orchestration.html index 127a2da..6151828 100644 --- a/templates/admin/agent_orchestration.html +++ b/templates/admin/agent_orchestration.html @@ -5,7 +5,7 @@ {% block ewooo_content %}
diff --git a/templates/admin/ai_calls_dashboard.html b/templates/admin/ai_calls_dashboard.html index b07bb6b..383d699 100644 --- a/templates/admin/ai_calls_dashboard.html +++ b/templates/admin/ai_calls_dashboard.html @@ -18,24 +18,24 @@ linear-gradient(135deg, rgba(255,248,239,.98), rgba(255,255,255,.72)); } .calls-kicker { color: var(--obs-accent); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:800; } - .calls-title { margin:.45rem 0 .25rem; font-family:'Noto Sans TC','Inter',sans-serif; font-size:var(--obs-title-size); letter-spacing:-.055em; line-height:.98; } + .calls-title { margin:.45rem 0 .25rem; font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size:var(--obs-title-size); letter-spacing: 0; line-height:.98; } .calls-subtitle { color:var(--obs-muted); max-width:830px; line-height:1.7; } .calls-actions { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; align-items:center; } .calls-filter { display:flex; flex-wrap:wrap; gap:.5rem; padding:.8rem; border:1px solid var(--obs-line); border-radius:20px; background:rgba(255,255,255,.58); } .calls-command { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.75rem; margin-top:1rem; } .calls-signal { padding:.9rem; border:1px solid var(--obs-line); border-radius:20px; background:rgba(255,255,255,.62); min-height:116px; } .calls-label { color:var(--obs-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; } - .calls-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing:-.045em; } + .calls-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing: 0; } .calls-note { color:var(--obs-muted); font-size:.8rem; margin-top:.25rem; } .calls-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr); gap:1rem; margin-top:1rem; } .calls-stack { display:grid; gap:1rem; } .calls-panel-head, .calls-table-title { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.05rem 1.1rem .25rem; } - .calls-panel-title, .calls-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing:-.025em; } + .calls-panel-title, .calls-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing: 0; } .calls-panel-body { padding:1rem 1.1rem 1.1rem; } .calls-chart { height:280px; } .calls-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .calls-mini { padding:.85rem; border:1px solid var(--obs-line); border-radius:18px; background:rgba(255,255,255,.58); } - .calls-mini strong { display:block; margin-top:.24rem; font-size:1.4rem; letter-spacing:-.04em; } + .calls-mini strong { display:block; margin-top:.24rem; font-size:1.4rem; letter-spacing: 0; } .calls-table-shell { overflow:hidden; margin-top:1rem; } .status-good { color:var(--obs-green); } .status-warn { color:var(--obs-amber); } .status-bad { color:var(--obs-red); } .status-blue { color:var(--obs-blue); } @media (max-width: 1180px) { .calls-command { grid-template-columns:repeat(3,minmax(0,1fr)); } .calls-grid { grid-template-columns:1fr; } } diff --git a/templates/admin/budget.html b/templates/admin/budget.html index bb53b68..b9f2f10 100644 --- a/templates/admin/budget.html +++ b/templates/admin/budget.html @@ -7,22 +7,22 @@ .gov-hero, .gov-panel, .gov-table-shell { border:1px solid var(--obs-line); border-radius:26px; background:var(--obs-card); box-shadow:0 16px 38px rgba(70,46,28,.08); } .gov-hero { padding:clamp(1.2rem,2.4vw,2rem); background:radial-gradient(circle at 12% 14%, rgba(201,100,66,.18), transparent 24rem), radial-gradient(circle at 90% 8%, rgba(184,121,47,.16), transparent 22rem), linear-gradient(135deg,rgba(255,248,239,.98),rgba(255,255,255,.74)); } .gov-kicker { color:var(--obs-accent); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:850; } - .gov-title { margin:.45rem 0 .25rem; font-family:'Noto Sans TC','Inter',sans-serif; font-size:var(--obs-title-size); letter-spacing:-.055em; line-height:.98; } + .gov-title { margin:.45rem 0 .25rem; font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size:var(--obs-title-size); letter-spacing: 0; line-height:.98; } .gov-subtitle { color:var(--obs-muted); max-width:850px; line-height:1.7; } .gov-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin-top:1rem; } .gov-command { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:1rem; } .gov-signal { padding:.95rem; border:1px solid var(--obs-line); border-radius:20px; background:rgba(255,255,255,.62); } .gov-label { color:var(--obs-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; } - .gov-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing:-.045em; } + .gov-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing: 0; } .gov-note { color:var(--obs-muted); font-size:.8rem; margin-top:.25rem; } .gov-grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(330px,.82fr); gap:1rem; margin-top:1rem; } .gov-stack { display:grid; gap:1rem; } .gov-panel-head, .gov-table-title { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.05rem 1.1rem .25rem; } - .gov-panel-title, .gov-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing:-.025em; } + .gov-panel-title, .gov-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing: 0; } .gov-panel-body { padding:1rem 1.1rem 1.1rem; } .gov-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .gov-mini { padding:.85rem; border:1px solid var(--obs-line); border-radius:18px; background:rgba(255,255,255,.58); } - .gov-mini strong { display:block; margin-top:.24rem; font-size:1.35rem; letter-spacing:-.04em; } + .gov-mini strong { display:block; margin-top:.24rem; font-size:1.35rem; letter-spacing: 0; } .gov-table-shell { overflow:hidden; margin-top:1rem; } .gov-chart { height:280px; } .strategy-card { padding:.8rem; border:1px solid var(--obs-line); border-radius:18px; background:rgba(255,255,255,.6); margin-bottom:.65rem; } diff --git a/templates/admin/business_intel.html b/templates/admin/business_intel.html index 178c5c8..756d1ca 100644 --- a/templates/admin/business_intel.html +++ b/templates/admin/business_intel.html @@ -63,7 +63,7 @@ .biz-command h1 { font-size: clamp(2.05rem, 4vw, 3.25rem); line-height: 1.05; - letter-spacing: -.06em; + letter-spacing: 0; margin: 1rem 0 .85rem; font-weight: 900; } @@ -154,7 +154,7 @@ color: var(--biz-ink); font-size: clamp(1.7rem, 3vw, 2.45rem); font-weight: 950; - letter-spacing: -.05em; + letter-spacing: 0; margin: .3rem 0 .05rem; } @@ -206,7 +206,7 @@ margin: 0; color: var(--biz-ink); font-weight: 950; - letter-spacing: -.035em; + letter-spacing: 0; } .biz-panel-head p { diff --git a/templates/admin/host_health.html b/templates/admin/host_health.html index b8a001c..00a1223 100644 --- a/templates/admin/host_health.html +++ b/templates/admin/host_health.html @@ -18,16 +18,16 @@ linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(255, 255, 255, 0.72)); } .runtime-kicker { color: var(--obs-accent); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; font-weight: 800; } - .runtime-title { margin: .45rem 0 .25rem; font-family:'Noto Sans TC','Inter',sans-serif; font-size:var(--obs-title-size); letter-spacing: -.055em; line-height: .98; } + .runtime-title { margin: .45rem 0 .25rem; font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size:var(--obs-title-size); letter-spacing: 0; line-height: .98; } .runtime-subtitle { color: var(--obs-muted); max-width: 820px; line-height: 1.7; } .runtime-command { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin-top: 1.2rem; } .runtime-signal { padding: .95rem; border: 1px solid var(--obs-line); border-radius: 20px; background: rgba(255,255,255,.62); } .runtime-label { color: var(--obs-muted); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; } - .runtime-value { display: block; margin-top: .28rem; font-size:var(--obs-value-size); font-weight: 880; letter-spacing: -.045em; } + .runtime-value { display: block; margin-top: .28rem; font-size:var(--obs-value-size); font-weight: 880; letter-spacing: 0; } .runtime-main { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(330px, .78fr); gap: 1rem; margin-top: 1rem; } .runtime-stack { display: grid; gap: 1rem; } .runtime-panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.05rem 1.1rem .2rem; } - .runtime-panel-title { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 850; letter-spacing: -.025em; } + .runtime-panel-title { margin: .15rem 0 0; font-size: 1.1rem; font-weight: 850; letter-spacing: 0; } .runtime-panel-body { padding: 1rem 1.1rem 1.1rem; } .host-grid { display:grid; gap:.75rem; } .host-lane { display:grid; grid-template-columns: minmax(0, 1fr) auto; gap:.85rem; align-items:center; padding:.95rem; border:1px solid var(--obs-line); border-radius:20px; background:rgba(255,255,255,.62); } @@ -40,7 +40,7 @@ .model-chip { padding:.24rem .48rem; border-radius:999px; background:rgba(79,111,143,.12); color:var(--obs-blue); font-size:.72rem; } .runtime-mini-grid { display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.7rem; } .runtime-mini { padding:.85rem; border:1px solid var(--obs-line); border-radius:18px; background:rgba(255,255,255,.58); } - .runtime-mini strong { display:block; margin-top:.24rem; font-size:1.45rem; letter-spacing:-.04em; } + .runtime-mini strong { display:block; margin-top:.24rem; font-size:1.45rem; letter-spacing: 0; } .runtime-table-shell { overflow:hidden; margin-top:1rem; } .runtime-table-title { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.1rem .4rem; } .runtime-table-title h3 { margin:0; font-size:1.05rem; font-weight:850; } diff --git a/templates/admin/ppt_audit_history.html b/templates/admin/ppt_audit_history.html index 8779246..a271603 100644 --- a/templates/admin/ppt_audit_history.html +++ b/templates/admin/ppt_audit_history.html @@ -25,9 +25,9 @@ } .ppt-title { margin: .45rem 0 .25rem; - font-family: 'Noto Sans TC', 'Inter', sans-serif; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size: var(--obs-title-size); - letter-spacing: -0.055em; + letter-spacing: 0; line-height: .98; } .ppt-subtitle { @@ -58,7 +58,7 @@ margin-top: .28rem; font-size: var(--obs-value-size); font-weight: 880; - letter-spacing: -.045em; + letter-spacing: 0; } .ppt-toolbar { margin-top: 1rem; @@ -96,7 +96,7 @@ margin: .15rem 0 0; font-size: 1.1rem; font-weight: 850; - letter-spacing: -.025em; + letter-spacing: 0; } .ppt-panel-body { padding: 1rem 1.1rem 1.1rem; @@ -123,7 +123,7 @@ display: block; margin-top: .24rem; font-size: 1.35rem; - letter-spacing: -.04em; + letter-spacing: 0; } .fix-card { padding: .85rem; diff --git a/templates/admin/promotion_review.html b/templates/admin/promotion_review.html index ebb0467..3666863 100644 --- a/templates/admin/promotion_review.html +++ b/templates/admin/promotion_review.html @@ -7,20 +7,20 @@ .gate-hero, .gate-panel, .gate-table-shell, .episode-card { border:1px solid var(--obs-line); border-radius:26px; background:var(--obs-card); box-shadow:0 16px 38px rgba(70,46,28,.08); } .gate-hero { padding:clamp(1.2rem,2.4vw,2rem); background:radial-gradient(circle at 12% 14%, rgba(201,100,66,.18), transparent 24rem), radial-gradient(circle at 88% 8%, rgba(79,111,143,.14), transparent 22rem), linear-gradient(135deg,rgba(255,248,239,.98),rgba(255,255,255,.74)); } .gate-kicker { color:var(--obs-accent); font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; font-weight:850; } - .gate-title { margin:.45rem 0 .25rem; font-family:'Noto Sans TC','Inter',sans-serif; font-size:var(--obs-title-size); letter-spacing:-.055em; line-height:.98; } + .gate-title { margin:.45rem 0 .25rem; font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size:var(--obs-title-size); letter-spacing: 0; line-height:.98; } .gate-subtitle { color:var(--obs-muted); max-width:880px; line-height:1.7; } .gate-command { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-top:1rem; } .gate-signal { padding:.95rem; border:1px solid var(--obs-line); border-radius:20px; background:rgba(255,255,255,.62); } .gate-label { color:var(--obs-muted); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; } - .gate-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing:-.045em; } + .gate-value { display:block; margin-top:.28rem; font-size:var(--obs-value-size); font-weight:880; letter-spacing: 0; } .gate-grid { display:grid; grid-template-columns:minmax(0,1.16fr) minmax(330px,.84fr); gap:1rem; margin-top:1rem; } .gate-stack { display:grid; gap:1rem; } .gate-panel-head, .gate-table-title { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; padding:1.05rem 1.1rem .25rem; } - .gate-panel-title, .gate-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing:-.025em; } + .gate-panel-title, .gate-table-title h3 { margin:.15rem 0 0; font-size:1.1rem; font-weight:850; letter-spacing: 0; } .gate-panel-body { padding:1rem 1.1rem 1.1rem; } .gate-mini-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .gate-mini { padding:.85rem; border:1px solid var(--obs-line); border-radius:18px; background:rgba(255,255,255,.58); } - .gate-mini strong { display:block; margin-top:.24rem; font-size:1.35rem; letter-spacing:-.04em; } + .gate-mini strong { display:block; margin-top:.24rem; font-size:1.35rem; letter-spacing: 0; } .episode-card { overflow:hidden; margin-bottom:1rem; } .episode-head { display:flex; justify-content:space-between; gap:1rem; padding:1rem 1.1rem .65rem; border-bottom:1px solid var(--obs-line); background:linear-gradient(90deg,rgba(255,248,239,.92),rgba(255,255,255,.72)); } .episode-body { padding:1rem 1.1rem; } diff --git a/templates/admin/quality_trend.html b/templates/admin/quality_trend.html index 9a7a790..e55dad9 100644 --- a/templates/admin/quality_trend.html +++ b/templates/admin/quality_trend.html @@ -6,9 +6,9 @@ diff --git a/templates/admin/rag_queries.html b/templates/admin/rag_queries.html index 63c1ca9..95184ff 100644 --- a/templates/admin/rag_queries.html +++ b/templates/admin/rag_queries.html @@ -6,10 +6,10 @@ diff --git a/web/static/css/ewoooc-v3-page-guard.css b/web/static/css/ewoooc-v3-page-guard.css index 0da5fec..4d80e65 100644 --- a/web/static/css/ewoooc-v3-page-guard.css +++ b/web/static/css/ewoooc-v3-page-guard.css @@ -461,3 +461,496 @@ align-items: flex-start; } } + +/* AI observability pages load page-level CSS before this guard. Keep the 10 + cockpit pages on the same V3 tokens even when older inline styles remain. */ +body.momo-observability-mode { + --obs-title-size: var(--momo-text-display, 30px); + --obs-value-size: var(--momo-text-display, 30px); + --obs-section-title-size: var(--momo-text-title, 17px); + --obs-body-size: var(--momo-text-body, 14px); + --obs-label-size: var(--momo-text-label, 11px); + --obs-ink: var(--momo-text-primary, #2a2520); + --obs-muted: var(--momo-text-secondary, #6b6155); + --obs-accent: var(--momo-page-accent, var(--momo-warm-saffron, #b8792f)); + --obs-line: var(--momo-border, rgba(42, 37, 32, 0.16)); + --obs-card: var(--momo-bg-surface, #faf6ec); + --obs-dot: radial-gradient(color-mix(in srgb, var(--momo-text-tertiary, #9b9081) 28%, transparent) 0.8px, transparent 0.8px); +} + +body.momo-observability-mode .momo-content { + background-color: var(--momo-bg-body) !important; + background-image: var(--obs-dot) !important; + background-size: 16px 16px !important; + color: var(--obs-ink) !important; + font-family: var(--momo-font-family) !important; + overflow-x: hidden; +} + +body.momo-observability-mode :is( + .obs-war-room, + .obs-warroom, + .agent-page, + .biz-warroom, + .runtime-page, + .calls-page, + .gov-page, + .gate-page, + .rag-page, + .quality-page, + .ppt-page +) { + color: var(--obs-ink) !important; + font-family: var(--momo-font-family) !important; +} + +body.momo-observability-mode :is( + .obs-hero, + .agent-hero, + .biz-command, + .runtime-hero, + .calls-hero, + .gov-hero, + .gate-hero, + .rag-hero, + .qa-hero, + .quality-hero, + .ppt-hero, + .container-fluid > h2:first-child +) { + border: 1px solid var(--obs-line) !important; + border-radius: var(--momo-radius-md, 8px) !important; + background-color: var(--momo-bg-surface) !important; + background-image: var(--obs-dot) !important; + background-size: 16px 16px !important; + box-shadow: var(--momo-shadow-soft) !important; + color: var(--obs-ink) !important; + padding: var(--momo-space-4, 16px) !important; +} + +body.momo-observability-mode .biz-warroom::before, +body.momo-observability-mode .biz-command::before, +body.momo-observability-mode .biz-command::after { + display: none !important; +} + +body.momo-observability-mode :is( + h1, + h2, + h3, + h4, + h5, + h6, + .obs-title, + .agent-title, + .biz-command h1, + .runtime-title, + .calls-title, + .gov-title, + .gate-title, + .rag-title, + .qa-title, + .quality-title, + .ppt-title +) { + color: var(--obs-ink) !important; + font-family: var(--momo-font-display) !important; + font-weight: 800 !important; + letter-spacing: 0 !important; + line-height: 1.2 !important; +} + +body.momo-observability-mode :is( + .obs-title, + .agent-title, + .biz-command h1, + .runtime-title, + .calls-title, + .gov-title, + .gate-title, + .rag-title, + .qa-title, + .quality-title, + .ppt-title, + .container-fluid > h2:first-child +) { + font-size: var(--obs-title-size) !important; + max-width: 820px; +} + +body.momo-observability-mode :is( + .obs-subtitle, + .agent-subtitle, + .biz-command p, + .runtime-subtitle, + .calls-subtitle, + .gov-subtitle, + .gate-subtitle, + .rag-subtitle, + .qa-subtitle, + .quality-subtitle, + .ppt-subtitle, + .text-muted +) { + color: var(--obs-muted) !important; + font-family: var(--momo-font-family) !important; + font-size: var(--obs-body-size) !important; + letter-spacing: 0 !important; + line-height: 1.7 !important; +} + +body.momo-observability-mode :is( + .obs-kicker, + .agent-kicker, + .biz-kicker, + .runtime-kicker, + .calls-kicker, + .gov-kicker, + .gate-kicker, + .rag-kicker, + .qa-kicker, + .quality-kicker, + .ppt-kicker, + .obs-label, + .agent-label, + .biz-signal .label, + .runtime-label, + .calls-label, + .gov-label, + .gate-label, + .rag-label, + .qa-label, + .quality-label, + .ppt-label, + [class$="-label"] +) { + color: var(--obs-accent) !important; + font-family: var(--momo-font-mono) !important; + font-size: var(--obs-label-size) !important; + font-weight: 700 !important; + letter-spacing: 0 !important; + text-transform: none !important; +} + +body.momo-observability-mode :is( + .obs-value, + .obs-signal-value, + .agent-value, + .biz-value, + .biz-signal .value, + .runtime-value, + .calls-value, + .gov-value, + .gate-value, + .rag-value, + .qa-value, + .quality-value, + .ppt-value, + .display-4, + .display-5, + .h1, + [class$="-mini"] strong +) { + color: var(--obs-ink) !important; + font-family: var(--momo-font-mono) !important; + font-size: var(--obs-value-size) !important; + font-weight: 800 !important; + font-variant-numeric: tabular-nums; + letter-spacing: 0 !important; + line-height: 1.1 !important; +} + +body.momo-observability-mode :is( + .obs-panel-title, + .agent-panel-title, + .biz-panel-head h3, + .runtime-panel-title, + .calls-panel-title, + .gov-panel-title, + .gate-panel-title, + .rag-panel-title, + .qa-panel-title, + .quality-panel-title, + .ppt-panel-title, + [class$="-table-title"] h3, + .card-title +) { + font-size: var(--obs-section-title-size) !important; + letter-spacing: 0 !important; + line-height: 1.35 !important; +} + +body.momo-observability-mode :is( + .card, + .obs-signal, + .agent-signal, + .biz-signal, + .runtime-signal, + .calls-signal, + .gov-signal, + .gate-signal, + .rag-signal, + .qa-signal, + .quality-signal, + .ppt-signal, + .obs-panel, + .agent-panel, + .biz-panel, + .runtime-panel, + .calls-panel, + .gov-panel, + .gate-panel, + .rag-panel, + .qa-panel, + .quality-panel, + .ppt-panel, + .agent-card, + .caller-card, + .rec-card, + .fix-card, + .root-card, + .episode-card, + .biz-decision-card, + .obs-route-card, + [class$="-mini"], + .strategy-card, + .episode-text, + .similar-box, + .host-lane, + .list-group-item, + .dropdown-menu, + .modal-content, + .alert +) { + border-color: var(--obs-line) !important; + border-radius: var(--momo-radius-md, 8px) !important; + background-color: var(--obs-card) !important; + background-image: var(--obs-dot) !important; + background-size: 14px 14px !important; + box-shadow: var(--momo-shadow-soft) !important; + color: var(--obs-ink) !important; +} + +body.momo-observability-mode :is( + .obs-table-shell, + .agent-table-shell, + .biz-table-shell, + .runtime-table-shell, + .calls-table-shell, + .gov-table-shell, + .gate-table-shell, + .rag-table-shell, + .qa-table-shell, + .quality-table-shell, + .ppt-table-shell, + .table-responsive, + .obs-chart-frame, + .chart-frame, + .chart-container, + .obs-modal-preview +) { + max-width: 100%; + overflow-x: auto; + border-color: var(--obs-line) !important; + border-radius: var(--momo-radius-md, 8px) !important; + background-color: var(--momo-bg-surface) !important; + background-image: var(--obs-dot) !important; + background-size: 14px 14px !important; + box-shadow: var(--momo-shadow-soft) !important; +} + +body.momo-observability-mode :is(.btn, .form-control, .form-select, .input-group-text, .badge) { + border-radius: var(--momo-radius-md, 8px) !important; + font-family: var(--momo-font-family) !important; + letter-spacing: 0 !important; +} + +body.momo-observability-mode .badge { + border: 1px solid var(--momo-border-light) !important; + background: var(--momo-tag-muted-bg) !important; + color: var(--momo-tag-muted-text) !important; + font-family: var(--momo-font-mono) !important; + font-size: var(--momo-text-label) !important; + font-weight: 700 !important; +} + +body.momo-observability-mode :is(.badge.bg-success, .status-good) { + color: var(--momo-success-text) !important; +} + +body.momo-observability-mode .badge.bg-success { + background: var(--momo-success-bg) !important; + border-color: var(--momo-success-border) !important; +} + +body.momo-observability-mode :is(.badge.bg-warning, .status-warn) { + color: var(--momo-warning-text) !important; +} + +body.momo-observability-mode .badge.bg-warning { + background: var(--momo-warning-bg) !important; + border-color: var(--momo-warning-border) !important; +} + +body.momo-observability-mode :is(.badge.bg-danger, .status-bad) { + color: var(--momo-danger-text) !important; +} + +body.momo-observability-mode .badge.bg-danger { + background: var(--momo-danger-bg) !important; + border-color: var(--momo-danger-border) !important; +} + +body.momo-observability-mode :is(.badge.bg-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-light, .status-blue) { + color: var(--momo-info-text) !important; +} + +body.momo-observability-mode :is(.badge.bg-info, .badge.bg-primary, .badge.bg-secondary, .badge.bg-light) { + background: var(--momo-info-bg) !important; + border-color: var(--momo-info-border) !important; +} + +body.momo-observability-mode .table { + --bs-table-bg: transparent; + --bs-table-color: var(--obs-ink); + color: var(--obs-ink) !important; + font-size: var(--momo-text-body-sm) !important; +} + +body.momo-observability-mode :is(.table thead th, table thead th, .table-light th) { + background: var(--momo-bg-paper) !important; + color: var(--momo-text-secondary) !important; + font-family: var(--momo-font-mono) !important; + font-size: var(--momo-text-label) !important; + font-weight: 700 !important; + letter-spacing: 0 !important; + white-space: nowrap; +} + +body.momo-observability-mode :is( + .obs-command-strip, + .agent-command, + .biz-signal-grid, + .runtime-command, + .calls-command, + .gov-command, + .gate-command, + .rag-command, + .qa-command, + .quality-command, + .ppt-command +) { + display: grid !important; + grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important; + gap: var(--momo-space-3, 12px) !important; +} + +body.momo-observability-mode :is( + .obs-grid, + .agent-grid, + .biz-hero, + .biz-layout, + .runtime-grid, + .calls-grid, + .gov-grid, + .gate-grid, + .rag-grid, + .qa-grid, + .quality-grid, + .ppt-grid +) { + display: grid !important; + grid-template-columns: minmax(0, 1fr) minmax(min(100%, 320px), 0.42fr) !important; + gap: var(--momo-space-4, 16px) !important; + max-width: 100%; +} + +@media (max-width: 900px) { + body.momo-observability-mode { + --obs-title-size: 24px; + --obs-value-size: 24px; + } + + body.momo-observability-mode :is( + .obs-grid, + .agent-grid, + .biz-hero, + .biz-layout, + .runtime-grid, + .calls-grid, + .gov-grid, + .gate-grid, + .rag-grid, + .qa-grid, + .quality-grid, + .ppt-grid + ) { + grid-template-columns: 1fr !important; + } +} + +@media (max-width: 560px) { + body.momo-observability-mode { + --obs-title-size: 20px; + --obs-value-size: 20px; + } + + body.momo-observability-mode :is(.obs-hero, .agent-hero, .biz-command, .runtime-hero, .calls-hero, .gov-hero, .gate-hero, .rag-hero, .qa-hero, .quality-hero, .ppt-hero) { + padding: 0.72rem !important; + } + + body.momo-observability-mode :is( + .obs-command-strip, + .agent-command, + .biz-signal-grid, + .runtime-command, + .calls-command, + .gov-command, + .gate-command, + .rag-command, + .qa-command, + .quality-command, + .ppt-command + ) { + gap: 8px !important; + grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)) !important; + } + + body.momo-observability-mode :is( + .obs-signal, + .agent-signal, + .biz-signal, + .runtime-signal, + .calls-signal, + .gov-signal, + .gate-signal, + .rag-signal, + .qa-signal, + .quality-signal, + .ppt-signal + ) { + min-height: auto !important; + padding: 0.62rem !important; + } + + body.momo-observability-mode :is( + .obs-subtitle, + .agent-subtitle, + .biz-command p, + .runtime-subtitle, + .calls-subtitle, + .gov-subtitle, + .gate-subtitle, + .rag-subtitle, + .qa-subtitle, + .quality-subtitle, + .ppt-subtitle + ) { + line-height: 1.55 !important; + } + + body.momo-observability-mode :is(.table-responsive, .obs-table-shell, [class$="-table-shell"]) { + margin-left: 0 !important; + margin-right: 0 !important; + } +} diff --git a/web/static/css/observability-system.css b/web/static/css/observability-system.css index 58addfe..0f3dc1d 100644 --- a/web/static/css/observability-system.css +++ b/web/static/css/observability-system.css @@ -37,7 +37,7 @@ linear-gradient(180deg, rgba(255, 248, 239, 0.65), rgba(255, 253, 248, 0.96)); background-size: 18px 18px, auto, auto, auto; color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); } .momo-observability-mode .momo-content::before { @@ -76,16 +76,16 @@ linear-gradient(135deg, rgba(255, 248, 239, 0.96), rgba(255, 255, 255, 0.76)); box-shadow: 0 18px 42px rgba(70, 46, 28, 0.08); color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size: var(--obs-title-size); - letter-spacing: -0.045em; + letter-spacing: 0; } .momo-observability-mode .container-fluid > h2:first-child small { display: block; margin-top: 0.3rem; color: var(--obs-muted) !important; - font-family: 'Noto Sans TC', sans-serif; + font-family: var(--momo-font-family, "Inter", "Noto Sans TC", system-ui, sans-serif); font-size: 0.88rem; font-weight: 500; letter-spacing: 0; @@ -122,7 +122,7 @@ .momo-observability-mode h3, .momo-observability-mode h4, .momo-observability-mode h5 { - letter-spacing: -0.035em; + letter-spacing: 0; } .momo-observability-mode h1, @@ -132,7 +132,7 @@ .momo-observability-mode h5, .momo-observability-mode h6 { color: var(--obs-ink); - font-family: 'Noto Sans TC', 'Inter', sans-serif !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; font-weight: 850; } @@ -147,10 +147,10 @@ .momo-observability-mode .quality-title, .momo-observability-mode .ppt-title { max-width: 780px; - font-family: 'Noto Sans TC', 'Inter', sans-serif !important; + font-family: var(--momo-font-display, "Inter", "Noto Sans TC", system-ui, sans-serif) !important; font-size: clamp(1.9rem, 3.2vw, 2.75rem) !important; line-height: 1.12 !important; - letter-spacing: -0.045em !important; + letter-spacing: 0!important; font-weight: 860 !important; } @@ -283,7 +283,7 @@ .momo-observability-mode .ppt-value { font-size: clamp(1.55rem, 3vw, 2.25rem) !important; line-height: 1.05 !important; - letter-spacing: -0.055em !important; + letter-spacing: 0!important; font-weight: 900 !important; } @@ -300,7 +300,7 @@ .momo-observability-mode [class$="-table-title"] h3 { font-size: clamp(1.05rem, 2vw, 1.45rem) !important; line-height: 1.25 !important; - letter-spacing: -0.035em !important; + letter-spacing: 0!important; } .momo-observability-mode code, @@ -370,7 +370,7 @@ .momo-observability-mode .btn { border-radius: 999px; font-weight: 760; - letter-spacing: -0.01em; + letter-spacing: 0; min-height: 2.25rem; padding-inline: 0.9rem; box-shadow: none; @@ -565,7 +565,7 @@ .momo-observability-mode .badge { border-radius: 999px; font-weight: 850; - letter-spacing: -0.01em; + letter-spacing: 0; padding: 0.36em 0.62em; } @@ -935,10 +935,10 @@ .momo-observability-mode .display-4, .momo-observability-mode .display-5, .momo-observability-mode .h1 { - font-family: 'JetBrains Mono', 'Noto Sans TC', monospace !important; + font-family: var(--momo-font-mono, "JetBrains Mono", ui-monospace, monospace) !important; font-size: var(--obs-value-size) !important; font-weight: 850 !important; - letter-spacing: -0.055em !important; + letter-spacing: 0!important; } .momo-observability-mode .table,