|
4 | 4 | */
|
5 | 5 |
|
6 | 6 | #uirStateVisualizer {
|
7 |
| - margin: 0; |
8 |
| - padding: 0; |
9 |
| - border: 0; |
10 |
| - font-size: 16px; |
11 |
| - font-family: sans-serif; |
12 |
| - font-weight: normal; |
13 |
| - vertical-align: baseline; |
14 |
| - line-height: 1; |
15 |
| - display: block; |
16 |
| - box-sizing: content-box; |
| 7 | + margin: 0; |
| 8 | + padding: 0; |
| 9 | + border: 0; |
| 10 | + font-size: 16px; |
| 11 | + font-family: sans-serif; |
| 12 | + font-weight: normal; |
| 13 | + vertical-align: baseline; |
| 14 | + line-height: 1; |
| 15 | + display: block; |
| 16 | + box-sizing: content-box; |
17 | 17 | }
|
18 | 18 | #uirStateVisualizer svg {
|
19 |
| - box-sizing: content-box; |
| 19 | + box-sizing: content-box; |
20 | 20 | }
|
21 | 21 |
|
22 | 22 | .uirStateVisContainer {
|
23 |
| - z-index: 999; |
24 |
| - position: fixed; |
25 |
| - right: 32px; |
26 |
| - bottom: 64px; |
27 |
| - display: flex; |
28 |
| - flex-direction: column; |
29 |
| - align-items: center; |
30 |
| - background-color: rgba(255, 255, 255, 0.8); |
31 |
| - transform: scale(1); |
32 |
| - transform-origin: right bottom; |
33 |
| - transition: right 0.5s ease, bottom 0.5s ease, transform 0.5s ease; |
34 |
| - overflow: hidden; |
35 |
| - resize: both; |
| 23 | + z-index: 999; |
| 24 | + position: fixed; |
| 25 | + right: 32px; |
| 26 | + bottom: 64px; |
| 27 | + display: flex; |
| 28 | + flex-direction: column; |
| 29 | + align-items: center; |
| 30 | + background-color: rgba(255, 255, 255, 0.8); |
| 31 | + transform: scale(1); |
| 32 | + transform-origin: right bottom; |
| 33 | + transition: right 0.5s ease, bottom 0.5s ease, transform 0.5s ease; |
| 34 | + overflow: hidden; |
| 35 | + resize: both; |
36 | 36 | }
|
37 | 37 |
|
38 | 38 | .uirStateVisContainer.minimized {
|
39 |
| - cursor: pointer; |
40 |
| - transform: scale(0.25); |
41 |
| - z-index: 60; |
| 39 | + cursor: pointer; |
| 40 | + transform: scale(0.25); |
| 41 | + z-index: 1000; |
42 | 42 | }
|
43 | 43 |
|
44 | 44 | .uirStateVisContainer:hover {
|
45 |
| - outline: 2px solid rgba(0,0,0,0.35) |
| 45 | + outline: 2px solid rgba(0, 0, 0, 0.35); |
46 | 46 | }
|
47 | 47 |
|
48 | 48 | .uirStateVisContainer:hover .uirStateVisControls {
|
49 |
| - visibility: visible; |
| 49 | + visibility: visible; |
50 | 50 | }
|
51 | 51 |
|
52 | 52 | .uirStateVisContainer .uirStateVisControls {
|
53 |
| - visibility: hidden; |
54 |
| - display: flex; |
55 |
| - width: 100%; |
56 |
| - flex-flow: row nowrap; |
57 |
| - justify-content: space-between; |
58 |
| - flex: 1 0 auto; |
59 |
| - z-index: 1; |
| 53 | + visibility: hidden; |
| 54 | + display: flex; |
| 55 | + width: 100%; |
| 56 | + flex-flow: row nowrap; |
| 57 | + justify-content: space-between; |
| 58 | + flex: 1 0 auto; |
| 59 | + z-index: 1; |
60 | 60 | }
|
61 | 61 |
|
62 | 62 | .uirStateVisContainer .uirStateVisControls .uirStateVisIcons span svg {
|
63 |
| - padding: 3px; |
64 |
| - fill: #777777; |
| 63 | + padding: 3px; |
| 64 | + fill: #777777; |
65 | 65 | }
|
66 | 66 |
|
67 | 67 | .uirStateVisContainer .uirStateVisControls .uirStateVisIcons span:hover svg {
|
68 |
| - fill: black; |
| 68 | + fill: black; |
69 | 69 | }
|
70 | 70 |
|
71 | 71 | .uirStateVisHover > div {
|
72 |
| - transition: opacity 500ms ease; |
73 |
| - opacity: 0; |
74 |
| - height: 0; |
75 |
| - padding: 0; |
| 72 | + transition: opacity 500ms ease; |
| 73 | + opacity: 0; |
| 74 | + height: 0; |
| 75 | + padding: 0; |
76 | 76 |
|
77 |
| - position: absolute; |
78 |
| - top: 0; |
79 |
| - right: 0; |
80 |
| - overflow: hidden; |
| 77 | + position: absolute; |
| 78 | + top: 0; |
| 79 | + right: 0; |
| 80 | + overflow: hidden; |
81 | 81 |
|
82 |
| - margin-top: 26px; |
83 |
| - font-size: 14px; |
| 82 | + margin-top: 26px; |
| 83 | + font-size: 14px; |
84 | 84 | }
|
85 | 85 |
|
86 | 86 | .uirStateVisHover > div.hoverBlock {
|
87 |
| - left: 0; |
88 |
| - border-bottom: none; |
89 |
| - background: white; |
| 87 | + left: 0; |
| 88 | + border-bottom: none; |
| 89 | + background: white; |
90 | 90 | }
|
91 | 91 |
|
92 | 92 | .uirStateVisHover:hover > div.hoverBlock {
|
93 |
| - border-bottom: 2px solid lightgrey; |
| 93 | + border-bottom: 2px solid lightgrey; |
94 | 94 | }
|
95 | 95 |
|
96 |
| - |
97 | 96 | .uirStateVisHover:hover > div {
|
98 |
| - opacity: 1; |
99 |
| - height: auto; |
| 97 | + opacity: 1; |
| 98 | + height: auto; |
100 | 99 | }
|
101 | 100 |
|
102 | 101 | .uirStateVisHover .uirStateVisLayoutPrefs {
|
103 |
| - padding: 12px 24px; |
| 102 | + padding: 12px 24px; |
104 | 103 | }
|
105 | 104 |
|
106 | 105 | .uirStateVisContainer .statevis {
|
107 |
| - flex: 1 1 auto; |
108 |
| - transition: all 1s ease; |
| 106 | + flex: 1 1 auto; |
| 107 | + transition: all 1s ease; |
109 | 108 | }
|
110 | 109 |
|
111 | 110 | .uirStateVisWindowOverlay {
|
112 |
| - display: none; |
| 111 | + display: none; |
113 | 112 | }
|
114 | 113 |
|
115 | 114 | .minimized .uirStateVisWindowOverlay {
|
116 |
| - display: block; |
117 |
| - position: absolute; |
118 |
| - left: 0; |
119 |
| - right: 0; |
120 |
| - top: 0; |
121 |
| - bottom: 0; |
122 |
| - z-index: 10; |
123 |
| -} |
124 |
| - |
| 115 | + display: block; |
| 116 | + position: absolute; |
| 117 | + left: 0; |
| 118 | + right: 0; |
| 119 | + top: 0; |
| 120 | + bottom: 0; |
| 121 | + z-index: 1000; |
| 122 | +} |
| 123 | + |
125 | 124 | .statevis circle {
|
126 |
| - /*r: 10;*/ |
127 |
| - fill: #fff; |
128 |
| - stroke: grey; |
129 |
| - /*stroke-width: 3px;*/ |
| 125 | + /*r: 10;*/ |
| 126 | + fill: #fff; |
| 127 | + stroke: grey; |
| 128 | + /*stroke-width: 3px;*/ |
130 | 129 |
|
131 |
| - transition-property: r, fill, stroke, stroke-width; |
132 |
| - transition-duration: 350ms; |
133 |
| - transition-timing-function: ease-in-out; |
| 130 | + transition-property: r, fill, stroke, stroke-width; |
| 131 | + transition-duration: 350ms; |
| 132 | + transition-timing-function: ease-in-out; |
134 | 133 |
|
135 |
| - cursor: pointer; |
| 134 | + cursor: pointer; |
136 | 135 | }
|
137 | 136 |
|
138 | 137 | .statevis text {
|
139 |
| - transition-property: x, y, font-size, stroke, stroke-width; |
140 |
| - transition-duration: 350ms; |
141 |
| - transition-timing-function: ease-in-out; |
| 138 | + transition-property: x, y, font-size, stroke, stroke-width; |
| 139 | + transition-duration: 350ms; |
| 140 | + transition-timing-function: ease-in-out; |
142 | 141 | }
|
143 | 142 |
|
144 | 143 | .statevis circle.future {
|
145 |
| - /*r: 10;*/ |
146 |
| - stroke: grey; |
147 |
| - stroke-dasharray: 7,5; |
148 |
| - /*stroke-width: 1px;*/ |
| 144 | + /*r: 10;*/ |
| 145 | + stroke: grey; |
| 146 | + stroke-dasharray: 7, 5; |
| 147 | + /*stroke-width: 1px;*/ |
149 | 148 | }
|
150 | 149 |
|
151 | 150 | .statevis circle.entered {
|
152 |
| - /*r: 10;*/ |
153 |
| - stroke: black; |
154 |
| - fill: lightgreen; |
| 151 | + /*r: 10;*/ |
| 152 | + stroke: black; |
| 153 | + fill: lightgreen; |
155 | 154 | }
|
156 | 155 |
|
157 | 156 | .statevis circle.entered:after {
|
158 |
| - content: "<text>Entered</text>" |
| 157 | + content: '<text>Entered</text>'; |
159 | 158 | }
|
160 | 159 |
|
161 | 160 | .statevis circle.active {
|
162 |
| - /*r: 15;*/ |
163 |
| - fill: green; |
164 |
| - stroke: black; |
| 161 | + /*r: 15;*/ |
| 162 | + fill: green; |
| 163 | + stroke: black; |
165 | 164 | }
|
166 | 165 |
|
167 | 166 | .statevis circle.collapsed {
|
168 |
| - stroke-dasharray: 2, 2 |
| 167 | + stroke-dasharray: 2, 2; |
169 | 168 | }
|
170 | 169 |
|
171 | 170 | .statevis text {
|
172 |
| - font-family: sans-serif; |
| 171 | + font-family: sans-serif; |
173 | 172 | }
|
174 | 173 |
|
175 | 174 | .statevis .link {
|
176 |
| - fill: none; |
177 |
| - stroke: #ccc; |
178 |
| - /*stroke-width: 2px;*/ |
| 175 | + fill: none; |
| 176 | + stroke: #ccc; |
| 177 | + /*stroke-width: 2px;*/ |
179 | 178 | }
|
180 | 179 |
|
181 | 180 | .statevis text.label {
|
182 |
| - fill: grey; |
183 |
| - alignment-baseline: middle; |
| 181 | + fill: grey; |
| 182 | + alignment-baseline: middle; |
184 | 183 | }
|
185 | 184 |
|
186 |
| - |
187 | 185 | .draggable {
|
188 |
| - cursor: move; |
| 186 | + cursor: move; |
189 | 187 | }
|
190 | 188 |
|
191 | 189 | /*.draggable:hover {*/
|
192 |
| - /*outline: 3px solid rgba(0,0,0,0.15)*/ |
| 190 | +/*outline: 3px solid rgba(0,0,0,0.15)*/ |
193 | 191 | /*}*/
|
0 commit comments