domstack/docs/implementation/style.css at master · bcomnes/domstack · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
@layer domstack.page {
  .mermaid {
    max-inline-size: 100%;
    overflow-x: auto;
    padding: 1rem;
    border: 1px solid var(--site-border);
    border-radius: 0.4rem;
    background: var(--background);
    box-shadow: none;
  }

  .mermaid > svg {
    display: block;
    /* Preserve Mermaid's intrinsic dimensions so text stays readable. */
    max-inline-size: none;
    max-width: none;
    margin-inline: auto;
  }

  /* Mermaid embeds ID-scoped theme rules in each SVG. Override only its
     surfaces, labels, and edges so diagrams follow the site's live light/dark
     theme without passing CSS color keywords to Mermaid's color parser. */
  .mermaid .node :is(rect, polygon, circle, path),
  .mermaid .edgeLabel rect {
    fill: var(--background) !important;
    stroke: var(--site-muted) !important;
  }

  .mermaid .cluster rect {
    fill: color-mix(in srgb, var(--text) 3%, var(--background)) !important;
    stroke: var(--site-muted) !important;
  }

  .mermaid .flowchart-link {
    stroke: var(--text) !important;
  }

  .mermaid .marker {
    fill: var(--text) !important;
    stroke: var(--text) !important;
  }

  .mermaid text {
    fill: var(--text) !important;
  }
}