Hugging Face's logo

Spaces:
bilca
/
module_de_visualisation
Running

App Files Community
bilca commited on
Commit
65c73d1
·
verified ·
1 Parent(s): 89e10f2

Create classical_style_template.css

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