feat: improve Banban UI and binding diagnostics

2026-09-23 20:19:14 +08:00
parent da3f71a2e3
commit 3fd750989f
34 changed files with 4247 additions and 61 deletions
@@ -0,0 +1,145 @@
+@import url("./overview.css");
+
+html,
+body.atlas-original-resolution,
+.atlas-original-resolution .atlas {
+  width: 430px;
+}
+
+.atlas-original-resolution .atlas-header {
+  display: block;
+  min-height: 0;
+  padding: 34px 24px 30px;
+}
+
+.atlas-original-resolution .eyebrow {
+  margin-bottom: 8px;
+  font-size: 10px;
+}
+
+.atlas-original-resolution h1 {
+  font-size: 31px;
+  line-height: 1.2;
+}
+
+.atlas-original-resolution .header-copy > p {
+  margin-top: 14px;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.atlas-original-resolution .resolution-badge {
+  display: inline-flex;
+  margin-top: 14px;
+  padding: 7px 10px;
+  border: 1px solid #f1c79f;
+  border-radius: 6px;
+  background: #fff4e8;
+  color: #a85d25;
+  font-size: 12px;
+  font-weight: 750;
+}
+
+.atlas-original-resolution .legend {
+  gap: 8px 14px;
+  margin-top: 18px;
+  font-size: 11px;
+}
+
+.atlas-original-resolution .metrics {
+  margin-top: 24px;
+  gap: 8px;
+}
+
+.atlas-original-resolution .metric {
+  min-height: 82px;
+  padding: 14px;
+}
+
+.atlas-original-resolution .metric strong {
+  margin-bottom: 5px;
+  font-size: 28px;
+}
+
+.atlas-original-resolution .metric span {
+  font-size: 11px;
+}
+
+.atlas-original-resolution .flow {
+  padding: 38px 19px 48px;
+}
+
+.atlas-original-resolution .flow-heading {
+  display: block;
+  min-height: 0;
+  margin: 0 2px 24px;
+}
+
+.atlas-original-resolution .flow-number {
+  top: -16px;
+  font-size: 54px;
+}
+
+.atlas-original-resolution .flow-eyebrow {
+  margin-bottom: 7px;
+  font-size: 10px;
+}
+
+.atlas-original-resolution h2 {
+  font-size: 26px;
+  line-height: 1.25;
+}
+
+.atlas-original-resolution .flow-heading > p {
+  max-width: none;
+  margin-top: 12px;
+  font-size: 12px;
+  line-height: 1.65;
+  text-align: left;
+}
+
+.atlas-original-resolution .state-grid {
+  grid-template-columns: minmax(0, 1fr);
+  gap: 24px;
+}
+
+.atlas-original-resolution .state-card {
+  box-shadow: 0 7px 18px rgba(70, 52, 37, 0.09);
+}
+
+.atlas-original-resolution .state-card img {
+  image-rendering: auto;
+}
+
+.atlas-original-resolution .state-copy {
+  grid-template-columns: 38px minmax(0, 1fr);
+  gap: 12px;
+  min-height: 104px;
+  padding: 17px;
+}
+
+.atlas-original-resolution .state-copy > b {
+  width: 34px;
+  height: 34px;
+  font-size: 12px;
+}
+
+.atlas-original-resolution .state-copy h3 {
+  margin-bottom: 6px;
+  font-size: 19px;
+}
+
+.atlas-original-resolution .state-copy p {
+  font-size: 14px;
+  line-height: 1.55;
+}
+
+.atlas-original-resolution footer {
+  min-height: 130px;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
+  padding: 24px;
+  font-size: 10px;
+}