WebEditor/src/features/dfdElements/elementStyles.css at f402a01dfcb1bb3ca6a8a3944bdd8d3fb24f6edb · DataFlowAnalysis/WebEditor · 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
/* This file contains styling for the node views defined in nodes.tsx, edge.tsx and ports.tsx */

/* sprotty-* classes are automatically added by sprotty and the other ones
   are added in the definition inside nodes.tsx, edge.tsx and ports.tsx */

/* Nodes */

.sprotty-node rect,
.sprotty-node line,
.sprotty-node circle {
    /* stroke color defaults to be the foreground color of the theme.
       Alternatively it can be overwritten by setting the --color variable
       As a inline style attribute for the specific node.
       Used as a highlighter to mark nodes with errors.
       This is essentially a "optional parameter" to this css rule.
       See https://stackoverflow.com/questions/17893823/how-to-pass-parameters-to-css-classes */
    stroke: var(--color-foreground);
    stroke-width: 1;
    /* Background fill of the node.
       When --color is unset this is just --color-primary.
       If this node is annotated and --color is set, it will be included in the color mix. */
    fill: color-mix(in srgb, var(--color-primary), var(--color, transparent) 40%);
}

.sprotty-node .node-label text {
    font-size: 5pt;
}

.sprotty-node .node-label rect,
.sprotty-node .node-label .label-delete circle {
    fill: var(--color-primary);
    stroke: var(--color-foreground);
    stroke-width: 0.5;
}

.sprotty-node .node-label .label-delete text {
    fill: var(--color-foreground);
    font-size: 5px;
}

/* Edges */

.sprotty-edge {
    stroke: var(--color-foreground);
    fill: none;
    stroke-width: 1;
}

/* On top of the actual edge path we draw a transparent path with a larger stroke width.
   This makes it easier to select the edge with the mouse. */
.sprotty-edge path.select-path {
    stroke: transparent;
    /* make the "invisible hitbox" 8 pixels wide. This is the same width as the arrow head */
    stroke-width: 8;
}

.sprotty-edge .arrow {
    fill: var(--color-foreground);
    stroke: none;
}

.sprotty-edge > .sprotty-routing-handle {
    fill: var(--color-foreground);
    stroke: none;
}

.sprotty-edge .label-background rect {
    fill: var(--color-background);
    stroke-width: 0;
}

/* Ports */

.sprotty-port rect {
    stroke: var(--port-border, var(--color-foreground));
    fill: color-mix(in srgb, var(--port-color, var(--color-primary)), var(--color-background) 25%);
    stroke-width: 0.5;
}

.sprotty-port .port-text {
    font-size: 4pt;
}

/* All nodes/misc */

.sprotty-node.selected circle,
.sprotty-node.selected rect,
.sprotty-node.selected line,
.sprotty-edge.selected {
    stroke-width: 2;
}

.sprotty-port.selected rect {
    stroke-width: 1;
}

text {
    stroke-width: 0;
    fill: var(--color-foreground);
    font-family: "Arial", sans-serif;
    font-size: 11pt;
    text-anchor: middle;
    dominant-baseline: central;

    -webkit-user-select: none;
    user-select: none;
}

/* elements with the sprotty-missing class use a node type that has not been registered.
   Because of this sprotty does not know what to do with them and renders their content and specifies them as missing.
   To make these errors very visible we make them red here.
   Ideally a user should never see this. */
.sprotty-missing {
    stroke-width: 1;
    stroke: var(--color-error);
    fill: var(--color-error);
}