soiz1 commited on
Commit
d83aed2
·
verified ·
1 Parent(s): fcfbb0b

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
- border: 1px solid #ccc;
 
161
  border-radius: 4px;
162
  cursor: pointer;
 
163
  }
164
 
165
- .copyButton:hover {
166
- background-color: #e0e0e0;
 
 
 
 
 
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
  }