Skip to content

Commit 8d3e9e3

Browse files
fix: Fix z-index of minimized state visualizer
1 parent 7fc2ba8 commit 8d3e9e3

File tree

1 file changed

+99
-101
lines changed

1 file changed

+99
-101
lines changed

src/statevis/statevis.css

Lines changed: 99 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -4,190 +4,188 @@
44
*/
55

66
#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;
1717
}
1818
#uirStateVisualizer svg {
19-
box-sizing: content-box;
19+
box-sizing: content-box;
2020
}
2121

2222
.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;
3636
}
3737

3838
.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;
4242
}
4343

4444
.uirStateVisContainer:hover {
45-
outline: 2px solid rgba(0,0,0,0.35)
45+
outline: 2px solid rgba(0, 0, 0, 0.35);
4646
}
4747

4848
.uirStateVisContainer:hover .uirStateVisControls {
49-
visibility: visible;
49+
visibility: visible;
5050
}
5151

5252
.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;
6060
}
6161

6262
.uirStateVisContainer .uirStateVisControls .uirStateVisIcons span svg {
63-
padding: 3px;
64-
fill: #777777;
63+
padding: 3px;
64+
fill: #777777;
6565
}
6666

6767
.uirStateVisContainer .uirStateVisControls .uirStateVisIcons span:hover svg {
68-
fill: black;
68+
fill: black;
6969
}
7070

7171
.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;
7676

77-
position: absolute;
78-
top: 0;
79-
right: 0;
80-
overflow: hidden;
77+
position: absolute;
78+
top: 0;
79+
right: 0;
80+
overflow: hidden;
8181

82-
margin-top: 26px;
83-
font-size: 14px;
82+
margin-top: 26px;
83+
font-size: 14px;
8484
}
8585

8686
.uirStateVisHover > div.hoverBlock {
87-
left: 0;
88-
border-bottom: none;
89-
background: white;
87+
left: 0;
88+
border-bottom: none;
89+
background: white;
9090
}
9191

9292
.uirStateVisHover:hover > div.hoverBlock {
93-
border-bottom: 2px solid lightgrey;
93+
border-bottom: 2px solid lightgrey;
9494
}
9595

96-
9796
.uirStateVisHover:hover > div {
98-
opacity: 1;
99-
height: auto;
97+
opacity: 1;
98+
height: auto;
10099
}
101100

102101
.uirStateVisHover .uirStateVisLayoutPrefs {
103-
padding: 12px 24px;
102+
padding: 12px 24px;
104103
}
105104

106105
.uirStateVisContainer .statevis {
107-
flex: 1 1 auto;
108-
transition: all 1s ease;
106+
flex: 1 1 auto;
107+
transition: all 1s ease;
109108
}
110109

111110
.uirStateVisWindowOverlay {
112-
display: none;
111+
display: none;
113112
}
114113

115114
.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+
125124
.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;*/
130129

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;
134133

135-
cursor: pointer;
134+
cursor: pointer;
136135
}
137136

138137
.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;
142141
}
143142

144143
.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;*/
149148
}
150149

151150
.statevis circle.entered {
152-
/*r: 10;*/
153-
stroke: black;
154-
fill: lightgreen;
151+
/*r: 10;*/
152+
stroke: black;
153+
fill: lightgreen;
155154
}
156155

157156
.statevis circle.entered:after {
158-
content: "<text>Entered</text>"
157+
content: '<text>Entered</text>';
159158
}
160159

161160
.statevis circle.active {
162-
/*r: 15;*/
163-
fill: green;
164-
stroke: black;
161+
/*r: 15;*/
162+
fill: green;
163+
stroke: black;
165164
}
166165

167166
.statevis circle.collapsed {
168-
stroke-dasharray: 2, 2
167+
stroke-dasharray: 2, 2;
169168
}
170169

171170
.statevis text {
172-
font-family: sans-serif;
171+
font-family: sans-serif;
173172
}
174173

175174
.statevis .link {
176-
fill: none;
177-
stroke: #ccc;
178-
/*stroke-width: 2px;*/
175+
fill: none;
176+
stroke: #ccc;
177+
/*stroke-width: 2px;*/
179178
}
180179

181180
.statevis text.label {
182-
fill: grey;
183-
alignment-baseline: middle;
181+
fill: grey;
182+
alignment-baseline: middle;
184183
}
185184

186-
187185
.draggable {
188-
cursor: move;
186+
cursor: move;
189187
}
190188

191189
/*.draggable:hover {*/
192-
/*outline: 3px solid rgba(0,0,0,0.15)*/
190+
/*outline: 3px solid rgba(0,0,0,0.15)*/
193191
/*}*/

0 commit comments

Comments
 (0)