feat: refine ecommerce standalone typography, layout grid, gradient title, and unified theme typography system

- ecommerce-standalone.css: Title max-width expanded to 520px with gradient text effect (background-clip:text + linear-gradient), adjusted clamp font-size and line-height, added text-shadow glow; command option row switched from flex-wrap to CSS grid (6×44px) with centered layout for consistent icon button alignment; refined button sizing/spacing across composer toolbar - ecommerce.css: Added high-specificity overrides for image workbench entry page — title min-height and heavy font-weight (860), rounded option buttons (15px border-radius), inline reference text with ellipsis overflow; responsive breakpoints at 760px and 540px with gradient title, compact row layout, adapted font scaling for narrow viewports (+631 lines) - dark-green.css: Introduced comprehensive typography normalization using html body #root specificity — font-family/letter-spacing reset across all elements; semantic mapping for body text (p/em/li/td), strong/b, code blocks (font-mono), icon sets (anticon/shell-icon), interactive controls (button/label/tab/chip/badge/tag/pill), headings (h1-h6 with size variants), decorative text (subtitle/desc/hint/meta/caption/empty), and numeric values (score/number/count/value/amount/price); mobile responsive headline scaling at ≤767px; all rules preserve SVG/path/use elements from font override (+177 lines)
2026-06-11 15:16:46 +08:00
parent bbea5d1e58
commit a09513029c
3 changed files with 1708 additions and 16 deletions
@@ -10676,6 +10676,177 @@
  color: var(--accent);
 }

+/* Final typography normalization. Loaded with the runtime theme so it wins over legacy page CSS. */
+html body #root,
+html body #root *:not(svg):not(path):not(use) {
+  font-family: var(--font-sans) !important;
+  font-synthesis-weight: none;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(
+  p,
+  em,
+  li,
+  td,
+  dd,
+  small,
+  figcaption,
+  input,
+  textarea,
+  select
+) {
+  font-size: var(--text-base) !important;
+  font-weight: var(--weight-regular) !important;
+  line-height: var(--leading-body) !important;
+}
+
+html body #root :is(strong, b) {
+  font-size: inherit !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: inherit !important;
+}
+
+html body #root span:not(.anticon):not(.shell-icon) {
+  font-weight: var(--weight-regular) !important;
+  line-height: inherit !important;
+}
+
+html body #root :is(
+  code,
+  pre,
+  kbd,
+  samp,
+  [class*="mono"],
+  [class*="code-block"],
+  [class*="log-line"],
+  [class*="uid"]
+) {
+  font-family: var(--font-mono) !important;
+}
+
+html body #root :is(.anticon, .shell-icon, [class*="icon"]) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: 1 !important;
+}
+
+html body #root :is(
+  button,
+  label,
+  th,
+  [class*="button"],
+  [class*="btn"],
+  [class*="tab"],
+  [class*="chip"],
+  [class*="badge"],
+  [class*="tag"],
+  [class*="pill"],
+  [class*="label"]
+) {
+  font-size: var(--text-md) !important;
+  font-weight: var(--weight-semibold) !important;
+  line-height: var(--leading-control) !important;
+}
+
+html body #root :is(button, [class*="button"], [class*="btn"]) {
+  font-weight: var(--weight-bold) !important;
+}
+
+html body #root :is(
+  button,
+  label,
+  [class*="button"],
+  [class*="btn"],
+  [class*="tab"],
+  [class*="chip"],
+  [class*="badge"],
+  [class*="tag"],
+  [class*="pill"],
+  [class*="label"]
+) :is(span, strong, b) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+}
+
+html body #root :is(
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  [class*="title"],
+  [class*="heading"],
+  [class*="headline"],
+  [class*="hero-title"],
+  [class*="section-title"],
+  [class*="card-title"]
+) {
+  font-family: var(--font-sans) !important;
+  font-weight: var(--weight-bold) !important;
+  line-height: var(--leading-heading) !important;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(h1, [class*="hero-title"], [class*="page-title"], [class*="headline"]) {
+  font-size: var(--text-title) !important;
+  font-weight: var(--weight-heavy) !important;
+}
+
+html body #root :is(h2, [class*="section-title"]) {
+  font-size: var(--text-3xl) !important;
+}
+
+html body #root :is(h3, [class*="card-title"]) {
+  font-size: var(--text-xl) !important;
+}
+
+html body #root :is(
+  [class*="subtitle"],
+  [class*="desc"],
+  [class*="description"],
+  [class*="hint"],
+  [class*="note"],
+  [class*="meta"],
+  [class*="caption"],
+  [class*="empty"]
+) {
+  font-size: var(--text-md) !important;
+  font-weight: var(--weight-regular) !important;
+  line-height: var(--leading-body) !important;
+}
+
+html body #root :is(
+  [class*="score"],
+  [class*="number"],
+  [class*="count"],
+  [class*="value"],
+  [class*="amount"],
+  [class*="price"]
+) {
+  font-size: inherit !important;
+  font-weight: var(--weight-bold) !important;
+  letter-spacing: 0 !important;
+}
+
+html body #root :is(h1, h2, h3, h4, h5, h6) :is(span, strong, em, b) {
+  font-size: inherit !important;
+  font-weight: inherit !important;
+  line-height: inherit !important;
+}
+
+@media (max-width: 767px) {
+  html body #root :is(h1, [class*="hero-title"], [class*="page-title"], [class*="headline"]) {
+    font-size: clamp(22px, 7vw, 30px) !important;
+  }
+
+  html body #root :is(h2, [class*="section-title"]) {
+    font-size: var(--text-2xl) !important;
+  }
+}
+
@media (max-width: 900px) {
  .web-shell[data-ui-theme="dark-green"][data-view="canvas"] .studio-canvas-project-bar {
    top: 70px;