Hugging Face's logo

Spaces:
bilca
/
module_de_visualisation
Running

App Files Community
bilca commited on
Commit
23059c0
·
verified ·
1 Parent(s): f49fb48

Create template_modern_style.css

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