VolariGlobal/MachineLearning
0
1/* ==========================================
2 DESIGN SYSTEM - CSS CUSTOM PROPERTIES
3 ========================================== */
4
5:root {
6 /* Dark Mode Colors (Default) */
7 --color-bg-primary: #0a0e1a;
8 --color-bg-secondary: #111827;
9 --color-bg-tertiary: #1a2332;
10
11 --color-accent-primary: #3b82f6;
12 --color-accent-secondary: #2563eb;
13 --color-accent-tertiary: #1d4ed8;
14
15 --color-text-primary: #f9fafb;
16 --color-text-secondary: #d1d5db;
17 --color-text-muted: #9ca3af;
18
19 --color-border: rgba(255, 255, 255, 0.1);
20 --color-border-hover: rgba(255, 255, 255, 0.2);
21
22 /* Glassmorphism */
23 --glass-bg: rgba(17, 24, 39, 0.7);
24 --glass-border: rgba(255, 255, 255, 0.1);
25 --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
26
27 /* Spacing */
28 --spacing-xs: 0.25rem;
29 --spacing-sm: 0.5rem;
30 --spacing-md: 1rem;
31 --spacing-lg: 1.5rem;
32 --spacing-xl: 2rem;
33 --spacing-2xl: 3rem;
34
35 /* Typography */
36 --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
37 --font-mono: 'Fira Code', 'Courier New', monospace;
38
39 /* Transitions */
40 --transition-fast: 0.15s ease;
41 --transition-normal: 0.3s ease;
42 --transition-slow: 0.5s ease;
43
44 /* Border Radius */
45 --radius-sm: 0.375rem;
46 --radius-md: 0.5rem;
47 --radius-lg: 1rem;
48 --radius-xl: 1.5rem;
49
50 /* Shadows */
51 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
52 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
53 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
54 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
55}
56
57/* Light Mode Colors */
58[data-theme="light"] {
59 --color-bg-primary: #ffffff;
60 --color-bg-secondary: #f9fafb;
61 --color-bg-tertiary: #f3f4f6;
62
63 --color-accent-primary: #3b82f6;
64 --color-accent-secondary: #2563eb;
65 --color-accent-tertiary: #1d4ed8;
66
67 --color-text-primary: #111827;
68 --color-text-secondary: #4b5563;
69 --color-text-muted: #6b7280;
70
71 --color-border: rgba(0, 0, 0, 0.1);
72 --color-border-hover: rgba(0, 0, 0, 0.2);
73
74 --glass-bg: rgba(255, 255, 255, 0.7);
75 --glass-border: rgba(0, 0, 0, 0.1);
76 --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
77
78 --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
79 --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
80 --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
81 --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
82}
83
84/* ==========================================
85 RESET & BASE STYLES
86 ========================================== */
87
88* {
89 margin: 0;
90 padding: 0;
91 box-sizing: border-box;
92}
93
94html {
95 font-size: 16px;
96 scroll-behavior: smooth;
97}
98
99body {
100 font-family: var(--font-primary);
101 background-color: var(--color-bg-primary);
102 color: var(--color-text-primary);
103 line-height: 1.6;
104 overflow-x: hidden;
105 min-height: 100vh;
106}
107
108/* ==========================================
109 BACKGROUND EFFECTS
110 ========================================== */
111
112/* Background effects removed for clean theme switching */
113
114/* ==========================================
115 HEADER
116 ========================================== */
117
118.header {
119 background: var(--glass-bg);
120 backdrop-filter: blur(20px) saturate(180%);
121 border-bottom: 1px solid var(--glass-border);
122 box-shadow: var(--glass-shadow);
123 position: sticky;
124 top: 0;
125 z-index: 100;
126 animation: slideDown 0.5s ease;
127}
128
129@keyframes slideDown {
130 from {
131 transform: translateY(-100%);
132 opacity: 0;
133 }
134
135 to {
136 transform: translateY(0);
137 opacity: 1;
138 }
139}
140
141.header-content {
142 max-width: 1800px;
143 margin: 0 auto;
144 padding: var(--spacing-lg) var(--spacing-xl);
145 display: flex;
146 justify-content: space-between;
147 align-items: center;
148 gap: var(--spacing-lg);
149}
150
151.logo-section {
152 display: flex;
153 align-items: center;
154 gap: var(--spacing-md);
155}
156
157.logo-icon {
158 width: 48px;
159 height: 48px;
160 background: var(--color-accent-primary);
161 border-radius: var(--radius-md);
162 display: flex;
163 align-items: center;
164 justify-content: center;
165 color: white;
166 box-shadow: var(--shadow-lg);
167 transition: all var(--transition-normal);
168}
169
170.logo-icon svg {
171 width: 28px;
172 height: 28px;
173}
174
175.logo-icon:hover {
176 transform: scale(1.05);
177}
178
179@keyframes pulse {
180
181 0%,
182 100% {
183 transform: scale(1);
184 box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.7);
185 }
186
187 50% {
188 transform: scale(1.05);
189 box-shadow: 0 0 0 10px rgba(168, 85, 247, 0);
190 }
191}
192
193.logo-text h1 {
194 font-size: 1.5rem;
195 font-weight: 800;
196 color: var(--color-accent-primary);
197 line-height: 1.2;
198}
199
200.subtitle {
201 font-size: 0.875rem;
202 color: var(--color-text-muted);
203 font-weight: 400;
204}
205
206.header-actions {
207 display: flex;
208 align-items: center;
209 gap: var(--spacing-md);
210}
211
212/* ==========================================
213 BUTTONS
214 ========================================== */
215
216.btn-primary {
217 background: var(--color-accent-primary);
218 color: white;
219 border: none;
220 padding: 0.75rem 1.5rem;
221 border-radius: var(--radius-md);
222 font-weight: 600;
223 font-size: 0.875rem;
224 cursor: pointer;
225 transition: all var(--transition-normal);
226 box-shadow: var(--shadow-md);
227 display: flex;
228 align-items: center;
229 gap: var(--spacing-sm);
230 text-decoration: none;
231 font-family: var(--font-primary);
232}
233
234.btn-primary:hover {
235 background: var(--color-accent-secondary);
236 transform: translateY(-2px);
237 box-shadow: var(--shadow-xl);
238}
239
240.btn-primary:active {
241 transform: translateY(0);
242}
243
244.btn-primary svg {
245 width: 18px;
246 height: 18px;
247}
248
249.btn-secondary {
250 background: var(--color-bg-tertiary);
251 color: var(--color-text-primary);
252 border: 1px solid var(--color-border);
253 padding: 0.5rem 1rem;
254 border-radius: var(--radius-md);
255 font-weight: 500;
256 font-size: 0.875rem;
257 cursor: pointer;
258 transition: all var(--transition-fast);
259 font-family: var(--font-primary);
260}
261
262.btn-secondary:hover {
263 background: var(--color-bg-secondary);
264 border-color: var(--color-border-hover);
265}
266
267.btn-icon {
268 background: transparent;
269 color: var(--color-text-secondary);
270 border: 1px solid var(--color-border);
271 width: 40px;
272 height: 40px;
273 border-radius: var(--radius-md);
274 cursor: pointer;
275 transition: all var(--transition-fast);
276 display: flex;
277 align-items: center;
278 justify-content: center;
279}
280
281.btn-icon:hover {
282 background: var(--color-bg-tertiary);
283 border-color: var(--color-border-hover);
284 color: var(--color-text-primary);
285 transform: scale(1.05);
286}
287
288.btn-icon svg {
289 width: 20px;
290 height: 20px;
291}
292
293/* ==========================================
294 MAIN CONTAINER
295 ========================================== */
296
297.main-container {
298 display: flex;
299 height: calc(100vh - 88px);
300 max-width: 1800px;
301 margin: 0 auto;
302 gap: var(--spacing-lg);
303 padding: var(--spacing-lg);
304}
305
306/* ==========================================
307 SIDEBAR
308 ========================================== */
309
310.sidebar {
311 width: 320px;
312 background: var(--glass-bg);
313 backdrop-filter: blur(20px) saturate(180%);
314 border: 1px solid var(--glass-border);
315 border-radius: var(--radius-lg);
316 padding: var(--spacing-lg);
317 overflow-y: auto;
318 box-shadow: var(--glass-shadow);
319 animation: slideInLeft 0.5s ease;
320 transition: transform var(--transition-normal);
321}
322
323@keyframes slideInLeft {
324 from {
325 transform: translateX(-100%);
326 opacity: 0;
327 }
328
329 to {
330 transform: translateX(0);
331 opacity: 1;
332 }
333}
334
335.sidebar.hidden {
336 transform: translateX(-100%);
337 position: absolute;
338 left: 0;
339 height: calc(100vh - 120px);
340}
341
342.sidebar-header {
343 display: flex;
344 justify-content: space-between;
345 align-items: center;
346 margin-bottom: var(--spacing-lg);
347}
348
349.sidebar-header h2 {
350 font-size: 1.25rem;
351 font-weight: 700;
352}
353
354.page-info {
355 display: grid;
356 grid-template-columns: 1fr 1fr;
357 gap: var(--spacing-md);
358 margin-bottom: var(--spacing-lg);
359}
360
361.info-item {
362 background: var(--color-bg-tertiary);
363 border: 1px solid var(--color-border);
364 border-radius: var(--radius-md);
365 padding: var(--spacing-md);
366 text-align: center;
367}
368
369.info-label {
370 display: block;
371 font-size: 0.75rem;
372 color: var(--color-text-muted);
373 margin-bottom: var(--spacing-xs);
374 text-transform: uppercase;
375 letter-spacing: 0.05em;
376}
377
378.info-value {
379 display: block;
380 font-size: 1.5rem;
381 font-weight: 700;
382 color: var(--color-accent-primary);
383}
384
385.page-navigation {
386 margin-bottom: var(--spacing-lg);
387}
388
389.page-navigation label {
390 display: block;
391 font-size: 0.875rem;
392 font-weight: 600;
393 margin-bottom: var(--spacing-sm);
394 color: var(--color-text-secondary);
395}
396
397.page-input-group {
398 display: flex;
399 gap: var(--spacing-sm);
400}
401
402.page-input-group input {
403 flex: 1;
404 background: var(--color-bg-tertiary);
405 border: 1px solid var(--color-border);
406 border-radius: var(--radius-md);
407 padding: 0.5rem;
408 color: var(--color-text-primary);
409 font-size: 0.875rem;
410 font-family: var(--font-primary);
411}
412
413.page-input-group input:focus {
414 outline: none;
415 border-color: var(--color-accent-primary);
416}
417
418.thumbnails {
419 display: flex;
420 flex-direction: column;
421 gap: var(--spacing-sm);
422}
423
424.thumbnail-item {
425 cursor: pointer;
426 padding: var(--spacing-sm);
427 border: 2px solid var(--color-border);
428 border-radius: var(--radius-md);
429 background: var(--color-bg-tertiary);
430 transition: all var(--transition-fast);
431 text-align: center;
432}
433
434.thumbnail-item:hover {
435 border-color: var(--color-accent-primary);
436 transform: scale(1.02);
437 box-shadow: var(--shadow-md);
438}
439
440.thumbnail-item.active {
441 border-color: var(--color-accent-primary);
442 background: var(--color-accent-primary);
443 background: linear-gradient(to bottom, var(--color-accent-primary) 0%, var(--color-accent-primary) 4px, var(--color-bg-tertiary) 4px);
444}
445
446.thumbnail-canvas-wrapper {
447 margin-bottom: var(--spacing-xs);
448 border-radius: var(--radius-sm);
449 overflow: hidden;
450 background: white;
451}
452
453.thumbnail-canvas-wrapper canvas {
454 width: 100%;
455 height: auto;
456 display: block;
457}
458
459.thumbnail-label {
460 font-size: 0.75rem;
461 color: var(--color-text-muted);
462 font-weight: 500;
463}
464
465.thumbnail-item.active .thumbnail-label {
466 color: var(--color-accent-primary);
467 font-weight: 600;
468}
469
470.show-more-btn {
471 text-align: center;
472 padding: var(--spacing-md) 0;
473}
474
475.show-more-btn button {
476 background: var(--color-bg-tertiary);
477 border: 1px solid var(--color-border);
478 color: var(--color-text-secondary);
479 padding: var(--spacing-sm) var(--spacing-md);
480 border-radius: var(--radius-md);
481 font-size: 0.875rem;
482 font-weight: 500;
483 cursor: pointer;
484 transition: all var(--transition-fast);
485 display: flex;
486 align-items: center;
487 gap: var(--spacing-sm);
488 margin: 0 auto;
489 font-family: var(--font-primary);
490}
491
492.show-more-btn button:hover {
493 background: var(--color-accent-primary);
494 color: white;
495 border-color: var(--color-accent-primary);
496 transform: translateY(-2px);
497 box-shadow: var(--shadow-md);
498}
499
500.show-more-btn button svg {
501 width: 16px;
502 height: 16px;
503}
504
505.loading-text {
506 color: var(--color-text-muted);
507 font-size: 0.875rem;
508 text-align: center;
509 padding: var(--spacing-lg);
510}
511
512/* ==========================================
513 VIEWER CONTAINER
514 ========================================== */
515
516.viewer-container {
517 flex: 1;
518 display: flex;
519 flex-direction: column;
520 background: var(--glass-bg);
521 backdrop-filter: blur(20px) saturate(180%);
522 border: 1px solid var(--glass-border);
523 border-radius: var(--radius-lg);
524 overflow: hidden;
525 box-shadow: var(--glass-shadow);
526 position: relative;
527 animation: fadeIn 0.5s ease;
528}
529
530@keyframes fadeIn {
531 from {
532 opacity: 0;
533 transform: scale(0.95);
534 }
535
536 to {
537 opacity: 1;
538 transform: scale(1);
539 }
540}
541
542.sidebar-toggle {
543 position: absolute;
544 top: var(--spacing-md);
545 left: var(--spacing-md);
546 z-index: 10;
547 background: var(--glass-bg);
548 backdrop-filter: blur(20px);
549 color: var(--color-text-primary);
550 border: 1px solid var(--glass-border);
551 width: 44px;
552 height: 44px;
553 border-radius: var(--radius-md);
554 cursor: pointer;
555 transition: all var(--transition-fast);
556 display: flex;
557 align-items: center;
558 justify-content: center;
559 box-shadow: var(--shadow-md);
560}
561
562.sidebar-toggle:hover {
563 background: var(--color-bg-tertiary);
564 transform: scale(1.05);
565}
566
567.sidebar-toggle svg {
568 width: 22px;
569 height: 22px;
570}
571
572/* ==========================================
573 SEARCH PANEL
574 ========================================== */
575
576.search-panel {
577 background: var(--color-bg-secondary);
578 border-bottom: 1px solid var(--color-border);
579 padding: var(--spacing-md);
580 display: none;
581 animation: slideDown 0.3s ease;
582}
583
584.search-panel.active {
585 display: block;
586}
587
588.search-input-group {
589 display: flex;
590 gap: var(--spacing-sm);
591 align-items: center;
592 margin-bottom: var(--spacing-sm);
593}
594
595.search-input-group input {
596 flex: 1;
597 background: var(--color-bg-tertiary);
598 border: 1px solid var(--color-border);
599 border-radius: var(--radius-md);
600 padding: 0.5rem 1rem;
601 color: var(--color-text-primary);
602 font-size: 0.875rem;
603 font-family: var(--font-primary);
604}
605
606.search-input-group input:focus {
607 outline: none;
608 border-color: var(--color-accent-primary);
609 box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
610}
611
612.search-results {
613 font-size: 0.75rem;
614 color: var(--color-text-muted);
615 text-align: center;
616}
617
618/* ==========================================
619 CONTROLS
620 ========================================== */
621
622.controls {
623 background: var(--color-bg-secondary);
624 border-bottom: 1px solid var(--color-border);
625 padding: var(--spacing-md);
626 display: flex;
627 justify-content: center;
628 align-items: center;
629 gap: var(--spacing-xl);
630}
631
632.control-group {
633 display: flex;
634 align-items: center;
635 gap: var(--spacing-md);
636}
637
638.page-indicator,
639.zoom-level {
640 font-size: 0.875rem;
641 font-weight: 600;
642 color: var(--color-text-secondary);
643 min-width: 80px;
644 text-align: center;
645 font-family: var(--font-mono);
646}
647
648/* ==========================================
649 CANVAS CONTAINER
650 ========================================== */
651
652.canvas-container {
653 flex: 1;
654 overflow: auto;
655 display: flex;
656 align-items: center;
657 justify-content: center;
658 padding: var(--spacing-lg);
659 position: relative;
660 background: var(--color-bg-primary);
661}
662
663.canvas-container::-webkit-scrollbar {
664 width: 12px;
665 height: 12px;
666}
667
668.canvas-container::-webkit-scrollbar-track {
669 background: var(--color-bg-secondary);
670}
671
672.canvas-container::-webkit-scrollbar-thumb {
673 background: var(--color-bg-tertiary);
674 border-radius: var(--radius-sm);
675 border: 2px solid var(--color-bg-secondary);
676}
677
678.canvas-container::-webkit-scrollbar-thumb:hover {
679 background: var(--color-accent-primary);
680}
681
682#pdfCanvas {
683 box-shadow: var(--shadow-xl);
684 max-width: 100%;
685 height: auto;
686 border-radius: var(--radius-sm);
687}
688
689/* ==========================================
690 LOADING OVERLAY
691 ========================================== */
692
693.loading-overlay {
694 position: absolute;
695 top: 0;
696 left: 0;
697 right: 0;
698 bottom: 0;
699 background: var(--color-bg-primary);
700 display: flex;
701 flex-direction: column;
702 align-items: center;
703 justify-content: center;
704 gap: var(--spacing-lg);
705 z-index: 50;
706}
707
708.loading-overlay.hidden {
709 display: none;
710}
711
712.spinner {
713 width: 60px;
714 height: 60px;
715 border: 4px solid var(--color-border);
716 border-top-color: var(--color-accent-primary);
717 border-radius: 50%;
718 animation: spin 1s linear infinite;
719}
720
721@keyframes spin {
722 to {
723 transform: rotate(360deg);
724 }
725}
726
727.loading-overlay p {
728 color: var(--color-text-secondary);
729 font-size: 1rem;
730 font-weight: 500;
731}
732
733/* ==========================================
734 RESPONSIVE DESIGN
735 ========================================== */
736
737@media (max-width: 1024px) {
738 .header-content {
739 padding: var(--spacing-md);
740 }
741
742 .logo-text h1 {
743 font-size: 1.25rem;
744 }
745
746 .main-container {
747 padding: var(--spacing-md);
748 gap: var(--spacing-md);
749 }
750
751 .sidebar {
752 width: 280px;
753 }
754}
755
756@media (max-width: 768px) {
757 .header-content {
758 flex-direction: column;
759 gap: var(--spacing-md);
760 }
761
762 .header-actions {
763 width: 100%;
764 justify-content: space-between;
765 }
766
767 .btn-primary span {
768 display: none;
769 }
770
771 .main-container {
772 flex-direction: column;
773 height: auto;
774 }
775
776 .sidebar {
777 width: 100%;
778 max-height: 300px;
779 }
780
781 .sidebar.hidden {
782 display: none;
783 }
784
785 .controls {
786 flex-direction: column;
787 gap: var(--spacing-md);
788 }
789
790 .canvas-container {
791 min-height: 500px;
792 }
793}
794
795@media (max-width: 480px) {
796 .logo-text h1 {
797 font-size: 1rem;
798 }
799
800 .subtitle {
801 font-size: 0.75rem;
802 }
803
804 .btn-icon {
805 width: 36px;
806 height: 36px;
807 }
808
809 .control-group {
810 gap: var(--spacing-sm);
811 }
812}