Hugging Face's logo

Spaces:
MikaFil
/
Sog_Viewer
Running

App Files Community
MikaFil commited on
Commit
0af1ebf
·
verified ·
1 Parent(s): 1303672

Create style/default/style.css

Browse files
Files changed (1) hide show
  1. style/default/style.css +452 -0
style/default/style.css ADDED
@@ -0,0 +1,452 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Widget container styling */
2
+ .ply-widget-container {
3
+ position: relative;
4
+ width: 100%;
5
+ height: 0;
6
+ background-color: white;
7
+ transition: all 0.3s ease;
8
+ box-sizing: border-box;
9
+ overflow: hidden;
10
+ }
11
+ .ply-widget-container.fake-fullscreen {
12
+ position: fixed !important;
13
+ top: 0 !important;
14
+ left: 0 !important;
15
+ width: 100vw !important;
16
+ height: 100vh !important;
17
+ padding-bottom: 0 !important;
18
+ z-index: 9999 !important;
19
+ background-color: black;
20
+ border-radius: 0 !important;
21
+ margin: 0 !important;
22
+ max-width: 100vw !important;
23
+ max-height: 100vh !important;
24
+ box-sizing: border-box;
25
+ overflow: hidden;
26
+ }
27
+ .ply-widget-container:fullscreen,
28
+ .ply-widget-container:-webkit-full-screen,
29
+ .ply-widget-container:-moz-full-screen,
30
+ .ply-widget-container:-ms-fullscreen {
31
+ width: 100vw !important;
32
+ height: 100vh !important;
33
+ padding-bottom: 0 !important;
34
+ border-radius: 0 !important;
35
+ background-color: black;
36
+ }
37
+ .viewer-container {
38
+ display: none;
39
+ position: absolute;
40
+ top: 0; left: 0; right: 0; bottom: 0;
41
+ width: 100%; height: 100%;
42
+ background: black;
43
+ border: 1px solid #474558;
44
+ border-radius: 10px;
45
+ overflow: hidden;
46
+ box-sizing: border-box;
47
+ transition: all 0.3s ease;
48
+ min-height: 100%;
49
+ object-fit: contain;
50
+ }
51
+ .fake-fullscreen .viewer-container,
52
+ :fullscreen .viewer-container,
53
+ :-webkit-full-screen .viewer-container,
54
+ :-moz-full-screen .viewer-container,
55
+ :-ms-fullscreen .viewer-container {
56
+ border-radius: 0;
57
+ border: none;
58
+ width: 100%;
59
+ height: 100%;
60
+ }
61
+ .ply-canvas {
62
+ width: 100%;
63
+ height: 100%;
64
+ display: block;
65
+ background-color: transparent;
66
+ z-index: 1;
67
+ position: absolute;
68
+ top: 0; left: 0; right: 0; bottom: 0;
69
+ }
70
+ .fake-fullscreen .ply-canvas,
71
+ :fullscreen .ply-canvas,
72
+ :-webkit-full-screen .ply-canvas,
73
+ :-moz-full-screen .ply-canvas,
74
+ :-ms-fullscreen .ply-canvas {
75
+ width: 100vw;
76
+ height: 100vh;
77
+ }
78
+ .progress-dialog {
79
+ position: absolute;
80
+ top: 50%; left: 50%;
81
+ transform: translate(-50%, -50%);
82
+ border: none;
83
+ background: rgba(0,0,0,0.7);
84
+ padding: 20px;
85
+ border-radius: 5px;
86
+ z-index: 1000;
87
+ display: none;
88
+ color: white;
89
+ }
90
+ progress {
91
+ width: 250px;
92
+ height: 15px;
93
+ appearance: none;
94
+ border: none;
95
+ border-radius: 10px;
96
+ overflow: hidden;
97
+ }
98
+ progress::-webkit-progress-bar {
99
+ background-color: #333;
100
+ border-radius: 10px;
101
+ }
102
+ progress::-webkit-progress-value {
103
+ background-color: #4682B4;
104
+ border-radius: 10px;
105
+ }
106
+ progress::-moz-progress-bar {
107
+ background-color: #4682B4;
108
+ border-radius: 10px;
109
+ }
110
+ /* Menu (instructions) content styling */
111
+ .menu-content {
112
+ display: none;
113
+ position: absolute;
114
+ top: 50%; left: 50%;
115
+ transform: translate(-50%, -50%);
116
+ background: rgba(242,240,239,0.7);
117
+ color: #545454;
118
+ border: 1px solid #ddd;
119
+ border-radius: 10px;
120
+ padding: 28px 24px;
121
+ font-size: 15px;
122
+ line-height: 1.4;
123
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
124
+ z-index: 1010;
125
+ max-width: 90vw;
126
+ max-height: 90%;
127
+ overflow: scroll !important; /* Always show scrollbar */
128
+ scrollbar-gutter: stable both-edges;
129
+ box-sizing: border-box;
130
+ }
131
+ .menu-content::-webkit-scrollbar {
132
+ width: 12px;
133
+ }
134
+ .menu-content::-webkit-scrollbar-thumb {
135
+ background: #bbbbbb;
136
+ border-radius: 8px;
137
+ }
138
+ .menu-content::-webkit-scrollbar-track {
139
+ background: #e7e7e7;
140
+ border-radius: 8px;
141
+ }
142
+
143
+ /* CLOSE BUTTON for menu-content - match tooltip-close style */
144
+ .menu-content .help-close {
145
+ position: absolute;
146
+ top: 5px;
147
+ right: 5px;
148
+ width: 32px;
149
+ height: 32px;
150
+ background: #F2F0EF;
151
+ color: #333;
152
+ border: 1px solid #ccc;
153
+ border-radius: 8px;
154
+ font-size: 17px;
155
+ font-weight: bold;
156
+ display: flex;
157
+ align-items: center;
158
+ justify-content: center;
159
+ line-height: 1;
160
+ cursor: pointer;
161
+ z-index: 2;
162
+ transition: background 0.18s;
163
+ box-sizing: border-box;
164
+ padding: 0;
165
+ }
166
+ .menu-content .help-close:hover,
167
+ .menu-content .help-close:focus {
168
+ background: #e0e0e0;
169
+ outline: none;
170
+ }
171
+
172
+ /* --------- TOOLTIP PANEL ----------- */
173
+ .tooltip-panel {
174
+ position: absolute;
175
+ top: 50%;
176
+ right: 5%;
177
+ transform: translate(0, -50%);
178
+ background: rgba(242,240,239,0.97);
179
+ color: #545454;
180
+ border: 1px solid #ddd;
181
+ border-radius: 6px;
182
+ padding: 20px 20px 16px 16px;
183
+ max-width: 340px;
184
+ width: 92vw;
185
+ min-width: 180px;
186
+ min-height: 60px;
187
+ max-height: 90%;
188
+ z-index: 20000;
189
+ display: none;
190
+ flex-direction: column;
191
+ align-items: flex-start;
192
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
193
+ overflow: scroll !important; /* Always show scrollbar */
194
+ scrollbar-gutter: stable both-edges;
195
+ box-sizing: border-box;
196
+ }
197
+ .tooltip-panel::-webkit-scrollbar {
198
+ width: 12px;
199
+ }
200
+ .tooltip-panel::-webkit-scrollbar-thumb {
201
+ background: #bbbbbb;
202
+ border-radius: 8px;
203
+ }
204
+ .tooltip-panel::-webkit-scrollbar-track {
205
+ background: #e7e7e7;
206
+ border-radius: 8px;
207
+ }
208
+
209
+ /* Ensure content does not go under close button */
210
+ .tooltip-content {
211
+ width: 100%;
212
+ max-width: 100%;
213
+ box-sizing: border-box;
214
+ display: flex;
215
+ flex-direction: column;
216
+ align-items: flex-start;
217
+ margin-top: 0;
218
+ }
219
+ .tooltip-close {
220
+ position: absolute;
221
+ top: 12px;
222
+ right: 12px;
223
+ width: 32px;
224
+ height: 32px;
225
+ background: #F2F0EF;
226
+ color: #333;
227
+ border: 1px solid #ccc;
228
+ border-radius: 8px;
229
+ font-size: 17px;
230
+ font-weight: bold;
231
+ display: flex;
232
+ align-items: center;
233
+ justify-content: center;
234
+ line-height: 1;
235
+ cursor: pointer;
236
+ z-index: 2;
237
+ transition: background 0.18s;
238
+ box-sizing: border-box;
239
+ padding: 0;
240
+ }
241
+ .tooltip-close:hover,
242
+ .tooltip-close:focus {
243
+ background: #e0e0e0;
244
+ outline: none;
245
+ }
246
+ .tooltip-text {
247
+ margin-bottom: 10px;
248
+ font-size: 14px;
249
+ line-height: 1.4;
250
+ overflow-wrap: break-word;
251
+ word-break: break-word;
252
+ max-width: 100%;
253
+ }
254
+ .tooltip-image {
255
+ max-width: 100%;
256
+ max-height: 35vh;
257
+ border-radius: 4px;
258
+ margin-top: 5px;
259
+ display: block;
260
+ object-fit: contain;
261
+ box-sizing: border-box;
262
+ }
263
+
264
+ /* --- MOBILE adjustments --- */
265
+ @media (max-width: 600px) {
266
+ .menu-content {
267
+ width: 85vw;
268
+ max-height: 90%;
269
+ overflow: scroll !important;
270
+ scrollbar-gutter: stable both-edges;
271
+ padding: 40px 18px 14px;
272
+ font-size: 14px;
273
+ }
274
+ .menu-content .help-close {
275
+ top: 8px;
276
+ right: 8px;
277
+ width: 26px;
278
+ height: 26px;
279
+ font-size: 15px;
280
+ }
281
+ .tooltip-panel {
282
+ top: auto;
283
+ bottom: 8px;
284
+ left: 3vw;
285
+ right: 3vw;
286
+ transform: none;
287
+ width: auto;
288
+ max-width: 94vw;
289
+ min-width: 0;
290
+ max-height: 55%;
291
+ padding: 20px 10px 12px 10px;
292
+ font-size: 13.5px;
293
+ overflow: scroll !important;
294
+ scrollbar-gutter: stable both-edges;
295
+ }
296
+ .tooltip-close {
297
+ top: 8px;
298
+ right: 8px;
299
+ width: 26px;
300
+ height: 26px;
301
+ font-size: 15px;
302
+ }
303
+ .tooltip-image {
304
+ max-height: 22vh;
305
+ }
306
+ }
307
+
308
+ /* --- MOBILE adjustments --- */
309
+ @media (max-width: 600px) {
310
+ .menu-content {
311
+ width: 85vw;
312
+ max-height: 90%;
313
+ overflow: scroll !important;
314
+ scrollbar-gutter: stable both-edges;
315
+ padding: 40px 18px 14px;
316
+ font-size: 14px;
317
+ }
318
+ .menu-content .help-close {
319
+ top: 6px;
320
+ right: 6px;
321
+ }
322
+ .tooltip-panel {
323
+ top: auto;
324
+ bottom: 8px;
325
+ left: 3vw;
326
+ right: 3vw;
327
+ transform: none;
328
+ width: auto;
329
+ max-width: 94vw;
330
+ min-width: 0;
331
+ max-height: 55%;
332
+ padding: 20px 10px 12px 10px;
333
+ font-size: 13.5px;
334
+ overflow: scroll !important;
335
+ scrollbar-gutter: stable both-edges;
336
+ }
337
+ .tooltip-close {
338
+ top: 8px;
339
+ right: 8px;
340
+ width: 26px;
341
+ height: 26px;
342
+ font-size: 15px;
343
+ }
344
+ .tooltip-image {
345
+ max-height: 22vh;
346
+ }
347
+ }
348
+
349
+ .help-close {
350
+ position: absolute;
351
+ top: 8px;
352
+ right: 8px;
353
+ background-color: #B0B0B0;
354
+ color: #333;
355
+ border: none;
356
+ border-radius: 4px;
357
+ width: 24px;
358
+ height: 24px;
359
+ line-height: 24px;
360
+ text-align: center;
361
+ cursor: pointer;
362
+ font-size: 16px;
363
+ display: flex;
364
+ align-items: center;
365
+ justify-content: center;
366
+ padding: 0;
367
+ }
368
+ .widget-button {
369
+ position: absolute;
370
+ width: 32px;
371
+ height: 32px;
372
+ background-color: #F2F0EF;
373
+ border: 1px solid #ccc;
374
+ border-radius: 8px;
375
+ cursor: pointer;
376
+ font-size: 16px;
377
+ color: #545454;
378
+ display: flex !important;
379
+ align-items: center;
380
+ justify-content: center;
381
+ transition: background-color 0.2s ease;
382
+ z-index: 1000;
383
+ opacity: 1 !important;
384
+ visibility: visible !important;
385
+ margin-right: 8px;
386
+ }
387
+ .widget-button:hover { background-color: rgba(242,240,239,0.7); }
388
+ .fullscreen-toggle { top: 12px; right: 12px; }
389
+ .help-toggle { top: 12px; right: 52px; font-size: 18px; }
390
+ .reset-camera-btn { top: 12px; right: 92px; font-size: 18px; line-height: normal; padding: 0; }
391
+ .tooltips-toggle { top: 12px; right: 132px; font-size: 18px; }
392
+ .fake-fullscreen .widget-button,
393
+ :fullscreen .widget-button,
394
+ :-webkit-full-screen .widget-button,
395
+ :-moz-full-screen .widget-button,
396
+ :-ms-fullscreen .widget-button { z-index: 10000; }
397
+
398
+ /* --- MOBILE adjustments --- */
399
+ @media (max-width: 600px) {
400
+ .menu-content {
401
+ width: 85vw;
402
+ max-height: 90%;
403
+ overflow: scroll !important;
404
+ scrollbar-gutter: stable both-edges;
405
+ padding: 40px 18px 14px;
406
+ font-size: 14px;
407
+ }
408
+ .menu-content .help-close {
409
+ top: 6px;
410
+ right: 6px;
411
+ }
412
+ .tooltip-panel {
413
+ top: auto;
414
+ bottom: 8px;
415
+ left: 3vw;
416
+ right: 3vw;
417
+ transform: none;
418
+ width: auto;
419
+ max-width: 94vw;
420
+ min-width: 0;
421
+ max-height: 85%;
422
+ padding: 20px 10px 12px 10px;
423
+ font-size: 13.5px;
424
+ overflow: scroll !important;
425
+ scrollbar-gutter: stable both-edges;
426
+ }
427
+ .tooltip-close {
428
+ top: 8px;
429
+ right: 8px;
430
+ width: 26px;
431
+ height: 26px;
432
+ font-size: 15px;
433
+ }
434
+ .tooltip-image {
435
+ max-height: 22vh;
436
+ }
437
+ }
438
+
439
+ .ply-widget-container.mobile .widget-button {
440
+ width: 24px;
441
+ height: 24px;
442
+ font-size: 12px;
443
+ }
444
+ .ply-widget-container.mobile .help-toggle { font-size: 14px; }
445
+ .ply-widget-container.mobile .fullscreen-toggle { top: 8px; right: 8px; }
446
+ .ply-widget-container.mobile .help-toggle { top: 8px; right: 40px; }
447
+ .ply-widget-container.mobile .reset-camera-btn { top: 8px; right: 72px; }
448
+ .ply-widget-container.mobile .tooltips-toggle { top: 8px; right: 104px; }
449
+
450
+ #application-canvas { width: 100%; height: 100%; display: block; }
451
+ html, body { margin: 0; padding: 0; height: 100%; }
452
+ .progress-dialog p { margin: 0; padding: 5px; }