anchor/svg.css at master · Roenbaeck/anchor · 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
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
/*
  SVG specific styling extracted from inline <style> block in index.html and from application.css.
  This centralizes all graph/minigraph visual definitions so new themes or style variants
  can be created simply by swapping or overriding this file.
  Light theme rules first, dark theme overrides follow using body.dark prefix.
*/

/* ===== Base graph text and node label styles ===== */
#graph .label {
    font-size:          8pt;
    font-family:        "Open Sans", "Verdana", "Helvetica Neue", sans-serif;
    font-weight:        normal;
    text-anchor:        left;
    dominant-baseline:  middle;
    fill:               #000;
    pointer-events:     none;
}
#graph .edge { pointer-events:none; }
#graph .anchor,
#graph .nexus {
    font-style:italic;
    font-weight:bold;
    stroke:none;
    fill:#c80514; /* brand red for names */
    pointer-events:none;
}
#graph .role {
    font-style:italic;
    stroke:none;
    fill:#000;
    pointer-events:none;
}

/* Key route paths */
#graph .route {
    fill:none;
    stroke:rgba(42, 0, 0, 0.07);
    stroke-width:32;
    stroke-linecap:round;
    stroke-linejoin:round;
    cursor:pointer;
}
#graph .routeSelected {
    fill:none;
    stroke:rgba(242, 101, 101, 0.2);
    stroke-width:42;
    stroke-linecap:round;
    stroke-linejoin:round;
    cursor:text;
}
#graph .routeText, text.routeText { /* compatibility with earlier selector */
    font-family: "Impact", "Haettenschweiler", "Franklin Gothic Bold", "Charcoal", "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;
    font-size:20pt;
    font-weight:normal;
    fill:white;
    dominant-baseline:middle;
    pointer-events:none;
}
#graph .bad { fill:#e00; }
#graph .end { text-anchor:end; }

/* ===== Symbol definitions (referenced via <use>) ===== */
/* Base edge styling (lines connecting nodes) */
g#edges { stroke:#000; stroke-width:1px; fill:none; }
/* Knot */
g#knot rect { fill:#fff; stroke:#f88; stroke-width:2px; }
/* Nexus */
g#nexus rect:first-child { fill:#b55; }
g#nexus rect:last-child  { fill:#fff; }
/* Imploded nexus */
g#nexus_imploded path { fill:#633; }
/* Anchor */
g#anchor rect { fill:#b55; }
/* Imploded anchor */
g#anchor_imploded path { fill:#633; }
/* Tie */
g#tie rect { fill:#a8a8a8; }
/* Historized tie */
g#tie_historized rect:first-child { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#tie_historized rect:last-child  { fill:#a8a8a8; }
/* Attribute */
g#attribute circle { fill:#fff; stroke:#f88; stroke-width:2px; }
/* Historized attribute */
g#attribute_historized circle { fill:#fff; stroke:#f88; stroke-width:2px; }
/* Identifier */
g#identifier > circle { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#identifier g { fill:#a8a8a8; stroke-width:0; }
g#identifier g polygon { stroke-width:1px; stroke-linejoin:round; stroke-linecap:round; }
/* Historized identifier */
g#identifier_historized > circle { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#identifier_historized g { fill:#a8a8a8; stroke-width:0; }
g#identifier_historized g polygon { stroke-width:1px; stroke-linejoin:round; stroke-linecap:round; }
/* Highlight circle */
g#highlight circle { stroke:#ede5e5; stroke-width:10px; fill:#fff; }
/* Selection */
g#selection circle:first-child { fill:#ede5e5; }
g#selection circle:last-child  { fill:#ede5e5; stroke:#000; stroke-width:1px; }
/* Fixation dot */
g#fixation circle { fill:#000; }
/* Small bubble */
g#bubble circle { fill:#f9f8f7; stroke:none; }
/* Small outlined bubble (chronicle marker) */
g#bubbleOutline circle { fill:#f9f8f7; stroke:#544; stroke-width:1px; }
/* Cardinality markers */
g#one line, g#many line { stroke:#544; stroke-width:1px; }

/* ===== Partitions & debug visuals ===== */
svg#graph .partitions { fill:#fff8f8; stroke:#f4ebeb; }
svg#graph .forceVector { stroke:#fcc; stroke-width:6; }
svg#graph marker#arrowhead path { fill:#fcc; }
/* Also style generic marker (defs) without svg#graph qualifier for export clones */
marker#arrowhead path { fill:#fcc; }

/* ===== Miniature graph adjustments ===== */
#minigraph g#edges { stroke:#000; stroke-width:1px; fill:none; }
#minigraph text { fill:#000; }
g#nav_knot rect { fill:#fff; stroke:#f88; stroke-width:2px; }
g#nav_anchor rect { fill:#b55; }
g#nav_tie rect { fill:#a8a8a8; }
g#nav_tie_historized rect:first-child { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#nav_tie_historized rect:last-child { fill:#a8a8a8; }
g#nav_nexus rect:first-child { fill:#b55; }
g#nav_nexus rect:last-child { fill:#fff; }
g#nav_attribute circle { fill:#fff; stroke:#f88; stroke-width:2px; }
g#nav_attribute_historized circle { fill:#fff; stroke:#f88; stroke-width:2px; }
g#nav_identifier > circle { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#nav_identifier g { fill:#a8a8a8; stroke-width:0; }
g#nav_identifier_historized > circle { fill:#fff; stroke:#a8a8a8; stroke-width:2px; }
g#nav_identifier_historized g { fill:#a8a8a8; stroke-width:0; }

/* ===== Dark theme overrides ===== */
body.dark #graph .label { fill:#f2f2f3; }
body.dark #graph text { fill:#e0e0e0; }
body.dark #graph .node { stroke:#ccc; }
body.dark #graph .anchor,
body.dark #graph .nexus { fill:#b55 !important; }
body.dark #graph g#edges * { stroke:#b4b4b6 !important; }
/* Replace pure white fills with a dark neutral */
body.dark #graph [fill="#fff"],
body.dark #graph [style*="fill:#fff"],
body.dark #graph [fill="#ffffff"],
body.dark #graph [style*="fill:#ffffff"] { fill:#222 !important; }
body.dark #graph circle[fill="#fff"],
body.dark #graph circle[style*="fill:#fff"] { fill:#262626 !important; }
/* Miniature */
body.dark #minigraph [fill="#fff"],
body.dark #minigraph [style*="fill:#fff"],
body.dark #minigraph [fill="#ffffff"],
body.dark #minigraph [style*="fill:#ffffff"] { fill:#222 !important; }
body.dark #minigraph g#edges * { stroke:#b4b4b6 !important; }
/* Dark miniature overrides for nav_* symbols */
body.dark g#nav_knot rect { fill:#222; stroke:#f88; stroke-width:2px; }
body.dark g#nav_anchor rect { fill:#b55; }
body.dark g#nav_tie rect { fill:#666; }
body.dark g#nav_tie_historized rect:first-child { fill:#222; stroke:#a8a8a8; stroke-width:2px; }
body.dark g#nav_tie_historized rect:last-child { fill:#666; }
body.dark g#nav_nexus rect:first-child { fill:#b55; }
body.dark g#nav_nexus rect:last-child { fill:#222; }
body.dark g#nav_attribute circle { fill:#222; stroke:#f88; stroke-width:2px; }
body.dark g#nav_attribute_historized circle { fill:#262626; stroke:#f88; stroke-width:2px; }
body.dark g#nav_identifier > circle { fill:#262626; stroke:#a8a8a8; stroke-width:2px; }
body.dark g#nav_identifier g { fill:#a8a8a8; }
body.dark g#nav_identifier_historized > circle { fill:#262626; stroke:#a8a8a8; stroke-width:2px; }
body.dark g#nav_identifier_historized g { fill:#a8a8a8; }
/* Fixation indicator contrast */
body.dark #graph #fixation circle { fill:#ffffff !important; }
/* Bubble color tweak */
body.dark #graph #bubble circle { fill:#303134 !important; }
/* Routes */
body.dark #graph .route { stroke:rgba(255,255,255,0.08) !important; cursor:pointer; }
body.dark #graph .routeSelected { stroke:rgba(255,160,160,0.30) !important; stroke-width:42; cursor:text; }
/* Partitions */
body.dark svg#graph .partitions { fill:#170103; stroke:#280205; }
/* Force vectors / markers */
body.dark svg#graph .forceVector { stroke:#622; }
body.dark svg#graph marker#arrowhead path { fill:#622; }
body.dark marker#arrowhead path { fill:#622; }
/* Outlined chronicle bubble */
body.dark #bubbleOutline circle { fill:#2a2b2f; stroke:#aaa; }
/* Cardinality markers (one/many) lighten in dark mode */
body.dark g#one line,
body.dark g#many line { stroke:#e0e0e2 !important; }

/* === Explicit dark overrides for shapes that previously relied on inline fill="#fff" (now moved to CSS) === */
/* Rectangular white shapes go to #222 */
body.dark g#knot rect { fill:#222; }
body.dark g#nexus rect:last-child { fill:#222; }
body.dark g#tie_historized rect:first-child { fill:#222; }
body.dark g#highlight circle { fill:#262626; }
/* Circular white shapes go to #262626 for a subtle two-tone difference from #222 rectangles */
body.dark g#attribute circle { fill:#262626; }
body.dark g#attribute_historized circle { fill:#262626; }
body.dark g#identifier > circle { fill:#262626; }
body.dark g#identifier_historized > circle { fill:#262626; }
/* Selection outer circle was not pure white, leave inner logic alone */

/* Miniature (nav_*) equivalents */
body.dark g#nav_knot rect { fill:#222; }
body.dark g#nav_nexus rect:last-child { fill:#222; }
body.dark g#nav_tie_historized rect:first-child { fill:#222; }
body.dark g#nav_attribute circle { fill:#262626; }
body.dark g#nav_attribute_historized circle { fill:#262626; }
body.dark g#nav_identifier > circle { fill:#262626; }
body.dark g#nav_identifier_historized > circle { fill:#262626; }