BIMviewer

1

2
html, body {
3
    height: 100%;
4
    background: #f2f2f2;
5
    touch-action: none;
6
}
7

8
body {
9
    font-family: 'Roboto', sans-serif;
10
    font-size: 14px;
11
    line-height: 1.50;
12
    -webkit-font-smoothing: antialiased;
13
    margin: 0;
14
    overflow: hidden;
15
}
16

17
#myViewer {
18
    display: flex;
19
    width: 100%;
20
    height: 100%;
21
    align-items: stretch;
22
    z-index: 10000;
23
    /*overflow: hidden;*/
24
    position: absolute;
25
    left: 0;
26
    right: 0;
27
    --left: 0;
28
    --right: 0;
29
    transition: all 300ms ease-in-out;
30
}
31

32
#myToolbar {
33
    min-width: 400px;
34
    top: 0;
35
    align-items: center;
36
    justify-content: center;
37
    padding: 0;
38
    z-index: 100000;
39
    pointer-events: none;
40
    position: fixed;
41
    left: 95px;
42
    transition: all 300ms ease-in-out;
43
}
44

45
#myCanvas {
46
    width: 100%;
47
    height: 100%;
48
    background: #f2f2f2;
49
    cursor: default;
50
    pointer-events: all;
51
    margin: 0;
52
    position: relative;
53
}
54

55
#myNavCubeCanvas {
56
    position: absolute;
57
    width: 200px;
58
    height: 200px;
59
    bottom: 0;
60
    right: 0;
61
    z-index: 200000;
62
}
63

64
#myExplorer {
65
    position: fixed;
66
    height: 100%;
67
    color: #fff;
68
    background: #03103F;
69
    overflow: auto;
70
    border-right: 2px solid #212529;
71
    padding: 0px;
72
    padding-bottom: 100px;
73
    padding-left: 15px;
74
    user-select: none;
75
    top: 0;
76
    left: -460px;
77
    z-index: 10;
78
    width: 460px;
79
    transition: all 300ms ease-in-out;
80
}
81

82
#explorer_toggle {
83
    display: none;
84
}
85

86
.explorer_toggle_label {
87
    position: absolute;
88
    top: 10px;
89
    left: 20px;
90
    -webkit-user-select: none;
91
    -ms-user-select: none;
92
    user-select: none;
93
    flex: 1 1 auto;
94
    color: #03103F;
95
    background-color: white;
96
    text-align: center;
97
    vertical-align: middle;
98
    border: 2px solid #1d2453;
99
    padding: .375rem .75rem;
100
    border-radius: .25rem;
101
    -webkit-appearance: button;
102
    overflow: visible;
103
    margin: 0 2px 0 0;
104
    box-sizing: border-box;
105
    align-items: flex-start;
106
    pointer-events: all;
107
    z-index: 100000;
108
    transition: all 300ms ease-in-out;
109
}
110

111
.explorer_toggle_label:hover {
112
    cursor: pointer;
113
}
114

115
#explorer_toggle:checked + .explorer_toggle_label {
116
    left: 480px;
117
    color: #fff;
118
    background-color: #03103F;
119
    border-color: #03103F;
120
}
121

122
#explorer_toggle:checked ~ #myExplorer {
123
    left: 0;
124
}
125

126
#explorer_toggle:checked ~ #myViewer {
127
    left: 460px;
128
    --left: 460;
129
    width: calc(100% - (var(--left) + var(--right)));
130
}
131

132
#explorer_toggle:checked ~ #myToolbar {
133
    left: 555px;
134
}
135

136
#explorer_toggle:not(:checked) + .explorer_toggle_label {
137
    left: 20px;
138
    color: #fff;
139
    background-color: #03103F;
140
    border-color: #03103F;
141
}
142

143
#explorer_toggle:not(:checked) ~ #myExplorer {
144
    left: -460px;
145
}
146

147
#explorer_toggle:not(:checked) ~ #myViewer {
148
    left: 0;
149
    --left: 0;
150
    width: calc(100% - var(--right));
151
}
152

153
#explorer_toggle:not(:checked) ~ #myToolbar {
154
    left: 95px;
155
}
156

157
#myInspector {
158
    position: absolute;
159
    height: 100%;
160
    color: #fff;
161
    background: #03103F;
162
    overflow: auto;
163
    border-left: 2px solid #212529;
164
    padding: 0;
165
    top: 0;
166
    right: -360px;
167
    z-index: 40;
168
    width: 358px;
169
    transition: all 300ms ease-in-out;
170
}
171

172
#inspector_toggle {
173
    display: none;
174
}
175

176
.inspector_toggle_label {
177
    position: absolute;
178
    top: 10px;
179
    right: 20px;
180
    -webkit-user-select: none;
181
    -ms-user-select: none;
182
    user-select: none;
183
    flex: 1 1 auto;
184
    color: #03103F;
185
    background-color: white;
186
    text-align: center;
187
    vertical-align: middle;
188
    border: 2px solid #1d2453;
189
    padding: .375rem .75rem; /* FIXME */
190
    border-radius: .25rem;
191
    -webkit-appearance: button;
192
    overflow: visible;
193
    margin: 0 2px 0 0; /* FIXME */
194
    box-sizing: border-box;
195
    align-items: flex-start;
196
    pointer-events: all;
197
    z-index: 100000;
198
    transition: all 300ms ease-in-out;
199
}
200

201
.inspector_toggle_label:hover {
202
    cursor: pointer;
203
}
204

205
#inspector_toggle:checked + .inspector_toggle_label {
206
    right: 380px;
207
    color: #fff;
208
    background-color: #03103F;
209
    border-color: #03103F;
210
}
211

212
#inspector_toggle:checked ~ #myViewer {
213
    --right: 360;
214
    right:360px;
215
    width: calc(100% - (var(--left) + var(--right)));
216
}
217

218
#inspector_toggle:checked ~ #myInspector {
219
    right: 0;
220
    --right: 0;
221
}
222

223
#inspector_toggle:not(:checked) ~ #myInspector {
224
    right: -380px;
225
    --right: -380px;
226
}
227

228
#inspector_toggle:not(:checked) ~ #myViewer {
229
    --right: 0;
230
    right: 0;
231
    width: calc(100% - var(--left));
232
}
233

234