Spaces:
Build error
Build error
Update src/components/menu-bar/google-drive-save.css
Browse files
src/components/menu-bar/google-drive-save.css
CHANGED
@@ -1,5 +1,3 @@
|
|
1 |
-
/* google-drive-save.css */
|
2 |
-
|
3 |
.modalOverlay {
|
4 |
position: fixed;
|
5 |
top: 0;
|
@@ -11,6 +9,12 @@
|
|
11 |
justify-content: center;
|
12 |
align-items: center;
|
13 |
z-index: 1000;
|
|
|
|
|
|
|
|
|
|
|
|
|
14 |
}
|
15 |
|
16 |
.modalContent {
|
@@ -21,6 +25,14 @@
|
|
21 |
max-height: 80vh;
|
22 |
overflow: hidden;
|
23 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
24 |
}
|
25 |
|
26 |
.modalHeader {
|
@@ -29,6 +41,7 @@
|
|
29 |
display: flex;
|
30 |
justify-content: space-between;
|
31 |
align-items: center;
|
|
|
32 |
}
|
33 |
|
34 |
.closeButton {
|
@@ -37,6 +50,17 @@
|
|
37 |
color: #962d21;
|
38 |
font-size: 1.5rem;
|
39 |
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
40 |
}
|
41 |
|
42 |
.modalBody {
|
@@ -47,10 +71,15 @@
|
|
47 |
|
48 |
.authSection {
|
49 |
margin-bottom: 1rem;
|
|
|
|
|
|
|
|
|
50 |
}
|
51 |
|
52 |
.accountInfo {
|
53 |
margin-bottom: 0.5rem;
|
|
|
54 |
}
|
55 |
|
56 |
.loginButton, .changeAccountButton, .newFileButton {
|
@@ -60,12 +89,32 @@
|
|
60 |
border: none;
|
61 |
border-radius: 4px;
|
62 |
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
63 |
}
|
64 |
|
65 |
.changeAccountButton {
|
66 |
background-color: #f0ad4e;
|
67 |
}
|
68 |
|
|
|
|
|
|
|
|
|
69 |
.loading, .noFiles {
|
70 |
text-align: center;
|
71 |
padding: 2rem;
|
@@ -74,6 +123,7 @@
|
|
74 |
|
75 |
.fileListContainer {
|
76 |
margin-top: 1rem;
|
|
|
77 |
}
|
78 |
|
79 |
.fileListHeader {
|
@@ -81,6 +131,8 @@
|
|
81 |
justify-content: space-between;
|
82 |
align-items: center;
|
83 |
margin-bottom: 1rem;
|
|
|
|
|
84 |
}
|
85 |
|
86 |
.projectTitle {
|
@@ -104,6 +156,12 @@
|
|
104 |
gap: 0.75rem;
|
105 |
background: #fff;
|
106 |
height: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
|
107 |
}
|
108 |
|
109 |
.thumbnailContainer {
|
@@ -111,6 +169,9 @@
|
|
111 |
aspect-ratio: 4/3;
|
112 |
max-height: 150px;
|
113 |
overflow: hidden;
|
|
|
|
|
|
|
114 |
}
|
115 |
|
116 |
.thumbnail {
|
@@ -119,6 +180,11 @@
|
|
119 |
border-radius: 4px;
|
120 |
object-fit: contain;
|
121 |
background-color: #f0f0f0;
|
|
|
|
|
|
|
|
|
|
|
122 |
}
|
123 |
|
124 |
.thumbnailPlaceholder {
|
@@ -151,19 +217,27 @@
|
|
151 |
gap: 8px;
|
152 |
align-items: center;
|
153 |
margin-bottom: 8px;
|
|
|
154 |
}
|
155 |
|
156 |
.copyButton {
|
157 |
padding: 4px 8px;
|
158 |
font-size: 12px;
|
159 |
background-color: #50545e;
|
160 |
-
|
|
|
161 |
border-radius: 4px;
|
162 |
cursor: pointer;
|
|
|
163 |
}
|
164 |
|
165 |
-
.copyButton:hover {
|
166 |
-
background-color: #
|
|
|
|
|
|
|
|
|
|
|
167 |
}
|
168 |
|
169 |
.linkUrl {
|
@@ -172,6 +246,11 @@
|
|
172 |
color: #1155cc;
|
173 |
text-decoration: none;
|
174 |
border-bottom: 1px solid #1155cc;
|
|
|
|
|
|
|
|
|
|
|
175 |
}
|
176 |
|
177 |
.buttonGroup {
|
@@ -186,6 +265,19 @@
|
|
186 |
border: none;
|
187 |
border-radius: 4px;
|
188 |
cursor: pointer;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
189 |
}
|
190 |
|
191 |
.shareButton {
|
@@ -193,7 +285,146 @@
|
|
193 |
color: white;
|
194 |
}
|
195 |
|
|
|
|
|
|
|
|
|
196 |
.deleteButton {
|
197 |
background-color: #ff4444;
|
198 |
color: white;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
199 |
}
|
|
|
|
|
|
|
1 |
.modalOverlay {
|
2 |
position: fixed;
|
3 |
top: 0;
|
|
|
9 |
justify-content: center;
|
10 |
align-items: center;
|
11 |
z-index: 1000;
|
12 |
+
animation: fadeIn 0.3s ease-out;
|
13 |
+
}
|
14 |
+
|
15 |
+
@keyframes fadeIn {
|
16 |
+
from { opacity: 0; }
|
17 |
+
to { opacity: 1; }
|
18 |
}
|
19 |
|
20 |
.modalContent {
|
|
|
25 |
max-height: 80vh;
|
26 |
overflow: hidden;
|
27 |
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
28 |
+
transform: translateY(-20px);
|
29 |
+
animation: slideUp 0.3s ease-out forwards;
|
30 |
+
position: relative;
|
31 |
+
}
|
32 |
+
|
33 |
+
@keyframes slideUp {
|
34 |
+
from { transform: translateY(20px); opacity: 0; }
|
35 |
+
to { transform: translateY(0); opacity: 1; }
|
36 |
}
|
37 |
|
38 |
.modalHeader {
|
|
|
41 |
display: flex;
|
42 |
justify-content: space-between;
|
43 |
align-items: center;
|
44 |
+
background-color: #f8f9fa;
|
45 |
}
|
46 |
|
47 |
.closeButton {
|
|
|
50 |
color: #962d21;
|
51 |
font-size: 1.5rem;
|
52 |
cursor: pointer;
|
53 |
+
transition: transform 0.2s, color 0.2s;
|
54 |
+
}
|
55 |
+
|
56 |
+
.closeButton:hover:not(:disabled) {
|
57 |
+
transform: scale(1.1);
|
58 |
+
color: #c0392b;
|
59 |
+
}
|
60 |
+
|
61 |
+
.closeButton:disabled {
|
62 |
+
opacity: 0.5;
|
63 |
+
cursor: not-allowed;
|
64 |
}
|
65 |
|
66 |
.modalBody {
|
|
|
71 |
|
72 |
.authSection {
|
73 |
margin-bottom: 1rem;
|
74 |
+
padding: 1rem;
|
75 |
+
background-color: #f8f9fa;
|
76 |
+
border-radius: 6px;
|
77 |
+
animation: fadeIn 0.5s ease-out;
|
78 |
}
|
79 |
|
80 |
.accountInfo {
|
81 |
margin-bottom: 0.5rem;
|
82 |
+
font-weight: 500;
|
83 |
}
|
84 |
|
85 |
.loginButton, .changeAccountButton, .newFileButton {
|
|
|
89 |
border: none;
|
90 |
border-radius: 4px;
|
91 |
cursor: pointer;
|
92 |
+
transition: background-color 0.2s, transform 0.2s;
|
93 |
+
}
|
94 |
+
|
95 |
+
.loginButton:hover:not(:disabled),
|
96 |
+
.changeAccountButton:hover:not(:disabled),
|
97 |
+
.newFileButton:hover:not(:disabled) {
|
98 |
+
background-color: #3e8e41;
|
99 |
+
transform: translateY(-1px);
|
100 |
+
}
|
101 |
+
|
102 |
+
.loginButton:disabled,
|
103 |
+
.changeAccountButton:disabled,
|
104 |
+
.newFileButton:disabled {
|
105 |
+
opacity: 0.6;
|
106 |
+
cursor: not-allowed;
|
107 |
+
transform: none;
|
108 |
}
|
109 |
|
110 |
.changeAccountButton {
|
111 |
background-color: #f0ad4e;
|
112 |
}
|
113 |
|
114 |
+
.changeAccountButton:hover:not(:disabled) {
|
115 |
+
background-color: #ec971f;
|
116 |
+
}
|
117 |
+
|
118 |
.loading, .noFiles {
|
119 |
text-align: center;
|
120 |
padding: 2rem;
|
|
|
123 |
|
124 |
.fileListContainer {
|
125 |
margin-top: 1rem;
|
126 |
+
animation: fadeIn 0.5s ease-out;
|
127 |
}
|
128 |
|
129 |
.fileListHeader {
|
|
|
131 |
justify-content: space-between;
|
132 |
align-items: center;
|
133 |
margin-bottom: 1rem;
|
134 |
+
padding-bottom: 0.5rem;
|
135 |
+
border-bottom: 1px solid #eee;
|
136 |
}
|
137 |
|
138 |
.projectTitle {
|
|
|
156 |
gap: 0.75rem;
|
157 |
background: #fff;
|
158 |
height: 100%;
|
159 |
+
transition: transform 0.2s, box-shadow 0.2s;
|
160 |
+
}
|
161 |
+
|
162 |
+
.fileItem:hover {
|
163 |
+
transform: translateY(-3px);
|
164 |
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
165 |
}
|
166 |
|
167 |
.thumbnailContainer {
|
|
|
169 |
aspect-ratio: 4/3;
|
170 |
max-height: 150px;
|
171 |
overflow: hidden;
|
172 |
+
border-radius: 4px;
|
173 |
+
background-color: #f0f0f0;
|
174 |
+
transition: all 0.3s ease;
|
175 |
}
|
176 |
|
177 |
.thumbnail {
|
|
|
180 |
border-radius: 4px;
|
181 |
object-fit: contain;
|
182 |
background-color: #f0f0f0;
|
183 |
+
transition: transform 0.3s ease;
|
184 |
+
}
|
185 |
+
|
186 |
+
.thumbnail:hover {
|
187 |
+
transform: scale(1.05);
|
188 |
}
|
189 |
|
190 |
.thumbnailPlaceholder {
|
|
|
217 |
gap: 8px;
|
218 |
align-items: center;
|
219 |
margin-bottom: 8px;
|
220 |
+
flex-wrap: wrap;
|
221 |
}
|
222 |
|
223 |
.copyButton {
|
224 |
padding: 4px 8px;
|
225 |
font-size: 12px;
|
226 |
background-color: #50545e;
|
227 |
+
color: white;
|
228 |
+
border: none;
|
229 |
border-radius: 4px;
|
230 |
cursor: pointer;
|
231 |
+
transition: background-color 0.2s;
|
232 |
}
|
233 |
|
234 |
+
.copyButton:hover:not(:disabled) {
|
235 |
+
background-color: #3d4048;
|
236 |
+
}
|
237 |
+
|
238 |
+
.copyButton:disabled {
|
239 |
+
opacity: 0.6;
|
240 |
+
cursor: not-allowed;
|
241 |
}
|
242 |
|
243 |
.linkUrl {
|
|
|
246 |
color: #1155cc;
|
247 |
text-decoration: none;
|
248 |
border-bottom: 1px solid #1155cc;
|
249 |
+
transition: color 0.2s;
|
250 |
+
}
|
251 |
+
|
252 |
+
.linkUrl:hover {
|
253 |
+
color: #0d3d8b;
|
254 |
}
|
255 |
|
256 |
.buttonGroup {
|
|
|
265 |
border: none;
|
266 |
border-radius: 4px;
|
267 |
cursor: pointer;
|
268 |
+
transition: all 0.2s;
|
269 |
+
}
|
270 |
+
|
271 |
+
.actionButton:hover:not(:disabled) {
|
272 |
+
transform: translateY(-1px);
|
273 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
274 |
+
}
|
275 |
+
|
276 |
+
.actionButton:disabled {
|
277 |
+
opacity: 0.6;
|
278 |
+
cursor: not-allowed;
|
279 |
+
transform: none;
|
280 |
+
box-shadow: none;
|
281 |
}
|
282 |
|
283 |
.shareButton {
|
|
|
285 |
color: white;
|
286 |
}
|
287 |
|
288 |
+
.shareButton:hover:not(:disabled) {
|
289 |
+
background-color: #3e8e41;
|
290 |
+
}
|
291 |
+
|
292 |
.deleteButton {
|
293 |
background-color: #ff4444;
|
294 |
color: white;
|
295 |
+
}
|
296 |
+
|
297 |
+
.deleteButton:hover:not(:disabled) {
|
298 |
+
background-color: #cc0000;
|
299 |
+
}
|
300 |
+
|
301 |
+
.newFileSection {
|
302 |
+
margin-bottom: 1rem;
|
303 |
+
padding: 1rem;
|
304 |
+
background-color: #f8f9fa;
|
305 |
+
border-radius: 6px;
|
306 |
+
}
|
307 |
+
|
308 |
+
.newFileInputGroup {
|
309 |
+
display: flex;
|
310 |
+
flex-wrap: wrap;
|
311 |
+
gap: 0.5rem;
|
312 |
+
align-items: center;
|
313 |
+
}
|
314 |
+
|
315 |
+
.newFileNameInput {
|
316 |
+
flex: 1;
|
317 |
+
min-width: 200px;
|
318 |
+
padding: 0.5rem;
|
319 |
+
border: 1px solid #ddd;
|
320 |
+
border-radius: 4px;
|
321 |
+
transition: border-color 0.2s;
|
322 |
+
}
|
323 |
+
|
324 |
+
.newFileNameInput:focus {
|
325 |
+
border-color: #4CAF50;
|
326 |
+
outline: none;
|
327 |
+
}
|
328 |
+
|
329 |
+
.newFileNameInput:disabled {
|
330 |
+
background-color: #f0f0f0;
|
331 |
+
}
|
332 |
+
|
333 |
+
.permissionDropdown {
|
334 |
+
display: flex;
|
335 |
+
align-items: center;
|
336 |
+
gap: 0.5rem;
|
337 |
+
}
|
338 |
+
|
339 |
+
.permissionDropdown select {
|
340 |
+
padding: 0.5rem;
|
341 |
+
border: 1px solid #ddd;
|
342 |
+
border-radius: 4px;
|
343 |
+
background-color: white;
|
344 |
+
transition: border-color 0.2s;
|
345 |
+
}
|
346 |
+
|
347 |
+
.permissionDropdown select:focus {
|
348 |
+
border-color: #4CAF50;
|
349 |
+
outline: none;
|
350 |
+
}
|
351 |
+
|
352 |
+
.permissionDropdown select:disabled {
|
353 |
+
background-color: #f0f0f0;
|
354 |
+
}
|
355 |
+
|
356 |
+
.newFileSaveButton, .newFileCancelButton {
|
357 |
+
padding: 0.5rem 1rem;
|
358 |
+
border: none;
|
359 |
+
border-radius: 4px;
|
360 |
+
cursor: pointer;
|
361 |
+
transition: all 0.2s;
|
362 |
+
}
|
363 |
+
|
364 |
+
.newFileSaveButton {
|
365 |
+
background-color: #4CAF50;
|
366 |
+
color: white;
|
367 |
+
}
|
368 |
+
|
369 |
+
.newFileSaveButton:hover:not(:disabled) {
|
370 |
+
background-color: #3e8e41;
|
371 |
+
transform: translateY(-1px);
|
372 |
+
}
|
373 |
+
|
374 |
+
.newFileSaveButton:disabled {
|
375 |
+
opacity: 0.6;
|
376 |
+
cursor: not-allowed;
|
377 |
+
}
|
378 |
+
|
379 |
+
.newFileCancelButton {
|
380 |
+
background-color: #f0f0f0;
|
381 |
+
color: #333;
|
382 |
+
}
|
383 |
+
|
384 |
+
.newFileCancelButton:hover:not(:disabled) {
|
385 |
+
background-color: #e0e0e0;
|
386 |
+
transform: translateY(-1px);
|
387 |
+
}
|
388 |
+
|
389 |
+
.newFileCancelButton:disabled {
|
390 |
+
opacity: 0.6;
|
391 |
+
cursor: not-allowed;
|
392 |
+
}
|
393 |
+
|
394 |
+
.processingOverlay {
|
395 |
+
position: absolute;
|
396 |
+
top: 0;
|
397 |
+
left: 0;
|
398 |
+
right: 0;
|
399 |
+
bottom: 0;
|
400 |
+
background-color: rgba(255, 255, 255, 0.8);
|
401 |
+
display: flex;
|
402 |
+
flex-direction: column;
|
403 |
+
justify-content: center;
|
404 |
+
align-items: center;
|
405 |
+
z-index: 10;
|
406 |
+
animation: fadeIn 0.3s ease-out;
|
407 |
+
}
|
408 |
+
|
409 |
+
.spinner {
|
410 |
+
width: 40px;
|
411 |
+
height: 40px;
|
412 |
+
border: 4px solid rgba(0, 0, 0, 0.1);
|
413 |
+
border-radius: 50%;
|
414 |
+
border-top-color: #4CAF50;
|
415 |
+
animation: spin 1s ease-in-out infinite;
|
416 |
+
margin-bottom: 1rem;
|
417 |
+
}
|
418 |
+
|
419 |
+
@keyframes spin {
|
420 |
+
to { transform: rotate(360deg); }
|
421 |
+
}
|
422 |
+
|
423 |
+
.saveButton {
|
424 |
+
transition: all 0.2s;
|
425 |
+
}
|
426 |
+
|
427 |
+
.saveButton:hover {
|
428 |
+
transform: translateY(-1px);
|
429 |
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
430 |
}
|