Hugging Face's logo

Spaces:
bilca
/
module_de_visualisation
Running

App Files Community
bilca commited on
Commit
31d536d
·
verified ·
1 Parent(s): f08f726

Update style/classical_style_template.css

Browse files
Files changed (1) hide show
  1. style/classical_style_template.css +70 -30
style/classical_style_template.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Classical Minimalist CSS */
2
 
3
  /* Widget container styling */
4
  .ply-widget-container {
@@ -6,6 +6,10 @@
6
  width: 100%;
7
  height: 0;
8
  padding-bottom: var(--aspect-percent);
 
 
 
 
9
  }
10
 
11
  /* GIF Preview styling */
@@ -19,6 +23,7 @@
19
  border-radius: 4px;
20
  overflow: hidden;
21
  cursor: pointer;
 
22
  }
23
  .gif-preview-container img {
24
  width: 100%;
@@ -34,7 +39,7 @@
34
  left: 0;
35
  width: 100%;
36
  height: 100%;
37
- background: #FEFEFD;
38
  border: 1px solid #ccc;
39
  border-radius: 4px;
40
  overflow: hidden;
@@ -57,7 +62,7 @@
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;
@@ -67,57 +72,92 @@
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);
 
1
+ /* Classical Chrome-Like CSS */
2
 
3
  /* Widget container styling */
4
  .ply-widget-container {
 
6
  width: 100%;
7
  height: 0;
8
  padding-bottom: var(--aspect-percent);
9
+ background: #fff;
10
+ border: 1px solid #ccc;
11
+ border-radius: 4px;
12
+ font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
13
  }
14
 
15
  /* GIF Preview styling */
 
23
  border-radius: 4px;
24
  overflow: hidden;
25
  cursor: pointer;
26
+ background: #f9f9f9;
27
  }
28
  .gif-preview-container img {
29
  width: 100%;
 
39
  left: 0;
40
  width: 100%;
41
  height: 100%;
42
+ background: #fff;
43
  border: 1px solid #ccc;
44
  border-radius: 4px;
45
  overflow: hidden;
 
62
  transform: translate(-50%, -50%);
63
  border: 1px solid #ccc;
64
  background: #fff;
65
+ padding: 10px;
66
  border-radius: 4px;
67
  z-index: 1000;
68
  display: none;
 
72
  .menu-content {
73
  display: none;
74
  position: absolute;
75
+ top: 35px;
76
+ right: 10px;
77
  background: #fff;
78
  border: 1px solid #ccc;
79
  border-radius: 4px;
80
  padding: 8px;
81
+ font-size: 13px;
 
82
  color: #333;
83
  }
84
 
85
+ /* Common button styling */
86
  .widget-button {
87
+ width: 28px;
88
+ height: 28px;
89
+ background-color: transparent;
90
+ border: none;
 
 
91
  cursor: pointer;
92
+ padding: 0;
 
93
  display: flex;
94
  align-items: center;
95
  justify-content: center;
96
  }
97
 
98
+ /* Position buttons as a group on the top right */
99
  .close-btn {
100
+ position: absolute;
101
+ top: 4px;
102
+ right: 4px;
103
  }
104
  .fullscreen-toggle {
105
+ position: absolute;
106
+ top: 4px;
107
+ right: 38px;
108
  }
109
  .help-toggle {
110
+ position: absolute;
111
+ top: 4px;
112
+ right: 72px;
113
  }
114
  .reset-camera-btn {
115
+ position: absolute;
116
+ top: 4px;
117
+ right: 106px;
118
+ }
119
+
120
+ /* Close button: simple "X" with red hover (Chrome-like) */
121
+ .close-btn::before {
122
+ content: "✕";
123
  font-size: 16px;
124
+ color: #333;
125
+ }
126
+ .close-btn:hover::before {
127
+ color: #d32f2f;
128
+ }
129
+
130
+ /* Fullscreen toggle: square icon */
131
+ .fullscreen-toggle::before {
132
+ content: "🗖";
133
+ font-size: 14px;
134
+ color: #333;
135
+ }
136
+ .fullscreen-toggle:hover::before {
137
+ color: #555;
138
+ }
139
+
140
+ /* Help toggle: question mark for extra info */
141
+ .help-toggle::before {
142
+ content: "?";
143
+ font-size: 16px;
144
+ color: #333;
145
+ }
146
+ .help-toggle:hover::before {
147
+ color: #0078d7;
148
+ }
149
+
150
+ /* Reset camera: refresh icon */
151
+ .reset-camera-btn::before {
152
+ content: "⟲";
153
+ font-size: 16px;
154
+ color: #333;
155
+ }
156
+ .reset-camera-btn:hover::before {
157
+ color: #0078d7;
158
  }
159
 
160
+ /* Optionally adjust icon alignment */
161
  .reset-icon {
162
  display: inline-block;
163
  transform: translateY(-2px);