Hugging Face's logo

Spaces:
bilca
/
module_de_visualisation
Running

App Files Community
bilca commited on
Commit
975fa41
·
verified ·
1 Parent(s): 2fd161b

Create galerie_double_v/style.css

Browse files
Files changed (1) hide show
  1. style/galerie_double_v/style.css +177 -0
style/galerie_double_v/style.css ADDED
@@ -0,0 +1,177 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ /* viewer.css */
2
+
3
+ /* Widget container styling */
4
+ .ply-widget-container {
5
+ position: relative;
6
+ width: 100%;
7
+ height: 0;
8
+ /* padding-bottom is set dynamically inline for aspect ratio */
9
+ }
10
+
11
+ /* When in fake fullscreen mode (iOS fallback) */
12
+ .ply-widget-container.fake-fullscreen {
13
+ position: fixed !important;
14
+ top: 0 !important;
15
+ left: 0 !important;
16
+ width: 100vw !important;
17
+ height: 100vh !important;
18
+ padding-bottom: 0 !important;
19
+ z-index: 9999 !important;
20
+ }
21
+
22
+ /* GIF Preview styling */
23
+ .gif-preview-container {
24
+ position: absolute;
25
+ top: 0;
26
+ left: 0;
27
+ width: 100%;
28
+ height: 100%;
29
+ border: 1px solid #474558;
30
+ border-radius: 10px;
31
+ overflow: hidden;
32
+ cursor: pointer;
33
+ }
34
+
35
+ .gif-preview-container img {
36
+ width: 100%;
37
+ height: 100%;
38
+ object-fit: cover;
39
+ }
40
+
41
+ /* Viewer Container styling */
42
+ .viewer-container {
43
+ display: none;
44
+ position: absolute;
45
+ top: 0;
46
+ left: 0;
47
+ width: 100%;
48
+ height: 100%;
49
+ background: #FEFEFD;
50
+ border: 1px solid #474558;
51
+ border-radius: 10px;
52
+ overflow: hidden;
53
+ box-sizing: border-box;
54
+ }
55
+
56
+ /* Canvas fills the viewer container */
57
+ .ply-canvas {
58
+ width: 100%;
59
+ height: 100%;
60
+ display: block;
61
+ }
62
+
63
+ /* Progress dialog styling (centered) */
64
+ .progress-dialog {
65
+ position: absolute;
66
+ top: 50%;
67
+ left: 50%;
68
+ transform: translate(-50%, -50%);
69
+ border: none;
70
+ background: rgba(255,255,255,0.9);
71
+ padding: 20px;
72
+ border-radius: 5px;
73
+ z-index: 1000;
74
+ display: none;
75
+ }
76
+
77
+ /* Menu (instructions) content styling */
78
+ .menu-content {
79
+ display: none;
80
+ position: absolute;
81
+ top: 70px;
82
+ right: 15px;
83
+ background: #FFFEF4;
84
+ border: 1px solid #474558;
85
+ border-radius: 5px;
86
+ padding: 10px;
87
+ font-size: 15px;
88
+ line-height: 1.4;
89
+ color: #474558;
90
+ }
91
+
92
+ /* Button styling */
93
+ .widget-button {
94
+ position: absolute;
95
+ width: 45px;
96
+ height: 45px;
97
+ background-color: #FFFEF4;
98
+ border: 1px solid #474558;
99
+ border-radius: 50%;
100
+ cursor: pointer;
101
+ font-size: 14px;
102
+ color: #474558;
103
+ display: flex;
104
+ align-items: center;
105
+ justify-content: center;
106
+ }
107
+
108
+ /* Specific button positions for desktop */
109
+ .close-btn {
110
+ top: 17px;
111
+ left: 15px;
112
+ font-family: sans-serif;
113
+ }
114
+
115
+ .fullscreen-toggle {
116
+ top: 17px;
117
+ right: 15px;
118
+ }
119
+
120
+ .help-toggle {
121
+ top: 17px;
122
+ right: 70px;
123
+ font-size: 22px;
124
+ }
125
+
126
+ .toggle-quality-btn {
127
+ top: 17px;
128
+ right: 125px;
129
+ }
130
+
131
+ .reset-camera-btn {
132
+ top: 17px;
133
+ right: 180px;
134
+ }
135
+
136
+ /* Adjust the reset icon position */
137
+ .reset-icon {
138
+ display: inline-block;
139
+ transform: translateY(-3px);
140
+ }
141
+
142
+ /* --- Mobile adjustments: when the widget container has the "mobile" class --- */
143
+ .ply-widget-container.mobile .widget-button {
144
+ width: 30px; /* 45px * approx 0.67 */
145
+ height: 30px; /* 45px * approx 0.67 */
146
+ font-size: 10px; /* 14px * approx 0.67 */
147
+ }
148
+
149
+ .ply-widget-container.mobile .help-toggle {
150
+ font-size: 15px; /* 22px scaled down */
151
+ }
152
+
153
+ /* Adjust button positions for mobile */
154
+ .ply-widget-container.mobile .close-btn {
155
+ top: 11px; /* 17px * approx 0.67 */
156
+ left: 10px; /* 15px * approx 0.67 */
157
+ }
158
+
159
+ .ply-widget-container.mobile .fullscreen-toggle {
160
+ top: 11px;
161
+ right: 10px;
162
+ }
163
+
164
+ .ply-widget-container.mobile .help-toggle {
165
+ top: 11px;
166
+ right: 47px; /* scaled from 70px */
167
+ }
168
+
169
+ .ply-widget-container.mobile .toggle-quality-btn {
170
+ top: 11px;
171
+ right: 84px; /* placed between help and reset buttons */
172
+ }
173
+
174
+ .ply-widget-container.mobile .reset-camera-btn {
175
+ top: 11px;
176
+ right: 121px; /* shifted to allow space for the new button */
177
+ }