Hugging Face's logo

Spaces:
bilca
/
module_de_visualisation
Running

App Files Community
bilca commited on
Commit
fee7c60
·
verified ·
1 Parent(s): f4d28d5

Create style/style_template.css

Browse files
Files changed (1) hide show
  1. style/style_template.css +135 -0
style/style_template.css ADDED
@@ -0,0 +1,135 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Widget container styling */
2
+ .ply-widget-container {
3
+ position: relative;
4
+ width: 100%;
5
+ height: 0;
6
+ padding-bottom: var(--aspect-percent);
7
+ }
8
+
9
+ /* When in fake fullscreen mode (iOS fallback) */
10
+ .ply-widget-container.fake-fullscreen {
11
+ position: fixed !important;
12
+ top: 0 !important;
13
+ left: 0 !important;
14
+ width: 100vw !important;
15
+ height: 100vh !important;
16
+ padding-bottom: 0 !important;
17
+ z-index: 9999 !important;
18
+ }
19
+
20
+ /* GIF Preview styling */
21
+ .gif-preview-container {
22
+ position: absolute;
23
+ top: 0;
24
+ left: 0;
25
+ width: 100%;
26
+ height: 100%;
27
+ border: 1px solid #474558;
28
+ border-radius: 10px;
29
+ overflow: hidden;
30
+ cursor: pointer;
31
+ }
32
+ .gif-preview-container img {
33
+ width: 100%;
34
+ height: 100%;
35
+ object-fit: cover;
36
+ }
37
+
38
+ /* Viewer Container styling */
39
+ .viewer-container {
40
+ display: none;
41
+ position: absolute;
42
+ top: 0;
43
+ left: 0;
44
+ width: 100%;
45
+ height: 100%;
46
+ background: #FEFEFD;
47
+ border: 1px solid #474558;
48
+ border-radius: 10px;
49
+ overflow: hidden;
50
+ box-sizing: border-box;
51
+ }
52
+
53
+ /* Canvas fills the viewer container. Background is now set by JS using JSON. */
54
+ .ply-canvas {
55
+ width: 100%;
56
+ height: 100%;
57
+ display: block;
58
+ }
59
+
60
+ /* Progress dialog styling (as a centered div) */
61
+ .progress-dialog {
62
+ position: absolute;
63
+ top: 50%;
64
+ left: 50%;
65
+ transform: translate(-50%, -50%);
66
+ border: none;
67
+ background: rgba(255,255,255,0.9);
68
+ padding: 20px;
69
+ border-radius: 5px;
70
+ z-index: 1000;
71
+ display: none;
72
+ }
73
+
74
+ /* Menu (instructions) content styling */
75
+ .menu-content {
76
+ display: none;
77
+ position: absolute;
78
+ top: 70px;
79
+ right: 15px;
80
+ background: #FFFEF4;
81
+ border: 1px solid #474558;
82
+ border-radius: 5px;
83
+ padding: 10px;
84
+ font-size: 15px;
85
+ line-height: 1.4;
86
+ color: #474558;
87
+ }
88
+
89
+ /* Button styling */
90
+ .widget-button {
91
+ position: absolute;
92
+ width: 45px;
93
+ height: 45px;
94
+ background-color: #FFFEF4;
95
+ border: 1px solid #474558;
96
+ border-radius: 50%;
97
+ cursor: pointer;
98
+ font-size: 14px;
99
+ color: #474558;
100
+ display: flex;
101
+ align-items: center;
102
+ justify-content: center;
103
+ }
104
+
105
+ /* Positions: Close at top-left, fullscreen at top-right, help and reset buttons */
106
+ .close-btn {
107
+ top: 17px;
108
+ left: 15px;
109
+ font-family: sans-serif;
110
+ }
111
+
112
+ .fullscreen-toggle {
113
+ top: 17px;
114
+ right: 15px;
115
+ }
116
+
117
+ .help-toggle {
118
+ top: 17px;
119
+ right: 70px;
120
+ font-size: 22px;
121
+ }
122
+
123
+ .reset-camera-btn {
124
+ top: 17px;
125
+ right: 123px;
126
+ font-size: 22px;
127
+ line-height: normal;
128
+ padding: 0;
129
+ }
130
+
131
+ /* Adjust the reset icon position: move it slightly upward */
132
+ .reset-icon {
133
+ display: inline-block;
134
+ transform: translateY(-3px);
135
+ }