|
1 | 1 | @import 'tailwindcss';
|
2 | 2 |
|
3 |
| -/* Tell Tailwind CSS v4 where to look for utility classes */ |
4 |
| -@source "../js/**/*.{js,ts,vue}"; |
5 |
| - |
6 | 3 | @import 'tw-animate-css';
|
7 | 4 |
|
8 | 5 | /* Realtime agent styles removed - using unified design system */
|
9 | 6 |
|
10 |
| -/* Tailwind v4 with Vite automatically detects source files */ |
| 7 | +@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php'; |
| 8 | +@source '../../storage/framework/views/*.php'; |
11 | 9 |
|
12 | 10 | @custom-variant dark (&:is(.dark *));
|
13 | 11 |
|
|
60 | 58 | --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
61 | 59 | --color-sidebar-border: var(--sidebar-border);
|
62 | 60 | --color-sidebar-ring: var(--sidebar-ring);
|
63 |
| - |
64 |
| - /* Transcript card colors */ |
65 |
| - --color-blue-50: var(--blue-50); |
66 |
| - --color-blue-900: var(--blue-900); |
67 |
| - --color-gray-50: var(--gray-50); |
68 |
| - --color-gray-800: var(--gray-800); |
69 |
| - --color-yellow-50: var(--yellow-50); |
70 |
| - --color-yellow-900: var(--yellow-900); |
71 | 61 | }
|
72 | 62 |
|
73 | 63 | /*
|
|
131 | 121 | --sidebar-border: hsl(0 0% 91%);
|
132 | 122 | --sidebar-ring: hsl(217.2 91.2% 59.8%);
|
133 | 123 | --sidebar: hsl(0 0% 98%);
|
134 |
| - |
135 |
| - /* Transcript card colors */ |
136 |
| - --blue-50: hsl(214 100% 97%); |
137 |
| - --blue-900: hsl(215 80% 20%); |
138 |
| - --gray-50: hsl(210 20% 98%); |
139 |
| - --gray-800: hsl(209 20% 25%); |
140 |
| - --yellow-50: hsl(50 100% 96%); |
141 |
| - --yellow-900: hsl(45 80% 20%); |
142 | 124 | }
|
143 | 125 |
|
144 | 126 | .dark {
|
|
175 | 157 | --sidebar-border: hsl(0 0% 15.9%);
|
176 | 158 | --sidebar-ring: hsl(217.2 91.2% 59.8%);
|
177 | 159 | --sidebar: hsl(240 5.9% 10%);
|
178 |
| - |
179 |
| - /* Transcript card colors - dark mode */ |
180 |
| - --blue-50: hsl(214 100% 97%); |
181 |
| - --blue-900: hsl(215 80% 20%); |
182 |
| - --gray-50: hsl(210 20% 98%); |
183 |
| - --gray-800: hsl(209 20% 25%); |
184 |
| - --yellow-50: hsl(50 100% 96%); |
185 |
| - --yellow-900: hsl(45 80% 20%); |
186 | 160 | }
|
187 | 161 |
|
188 | 162 | @layer base {
|
|
204 | 178 | position: relative;
|
205 | 179 | }
|
206 | 180 |
|
207 |
| -/* Enhanced screen recording protection - content overlay */ |
208 |
| -.screen-protection-content-overlay { |
209 |
| - position: absolute; |
210 |
| - inset: 0; |
| 181 | +/* Enhanced screen recording protection */ |
| 182 | +.screen-protection-overlay { |
| 183 | + position: fixed; |
| 184 | + top: 0; |
| 185 | + left: 0; |
| 186 | + width: 100%; |
| 187 | + height: 100%; |
211 | 188 | pointer-events: none;
|
212 |
| - z-index: 10; |
213 |
| - border-radius: 0.5rem; |
| 189 | + z-index: 999999; |
| 190 | + background: transparent; |
| 191 | + /* This creates a compositing layer that can interfere with screen recording */ |
| 192 | + will-change: transform; |
| 193 | + transform: translateZ(0); |
| 194 | + -webkit-transform: translateZ(0); |
| 195 | + /* Force GPU acceleration */ |
| 196 | + -webkit-backface-visibility: hidden; |
| 197 | + backface-visibility: hidden; |
214 | 198 | }
|
215 | 199 |
|
216 | 200 | /* Alternative protection using filters */
|
@@ -533,111 +517,6 @@ body {
|
533 | 517 | overflow-x: hidden;
|
534 | 518 | }
|
535 | 519 |
|
536 |
| - |
537 |
| -/* Custom scrollbar styles for glass-morphism */ |
538 |
| -.custom-scrollbar { |
539 |
| - scrollbar-width: thin; |
540 |
| - scrollbar-color: rgba(139, 92, 246, 0.3) transparent; |
541 |
| -} |
542 |
| - |
543 |
| -.custom-scrollbar::-webkit-scrollbar { |
544 |
| - width: 6px; |
545 |
| - height: 6px; |
546 |
| -} |
547 |
| - |
548 |
| -.custom-scrollbar::-webkit-scrollbar-track { |
549 |
| - background: rgba(0, 0, 0, 0.1); |
550 |
| - border-radius: 3px; |
551 |
| -} |
552 |
| - |
553 |
| -.custom-scrollbar::-webkit-scrollbar-thumb { |
554 |
| - background: rgba(139, 92, 246, 0.3); |
555 |
| - border-radius: 3px; |
556 |
| -} |
557 |
| - |
558 |
| -.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
559 |
| - background: rgba(139, 92, 246, 0.5); |
560 |
| -} |
561 |
| - |
562 |
| -/* Dark mode custom scrollbar */ |
563 |
| -.dark .custom-scrollbar::-webkit-scrollbar-track { |
564 |
| - background: rgba(255, 255, 255, 0.1); |
565 |
| -} |
566 |
| - |
567 |
| -.dark .custom-scrollbar::-webkit-scrollbar-thumb { |
568 |
| - background: rgba(139, 92, 246, 0.5); |
569 |
| -} |
570 |
| - |
571 |
| -.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover { |
572 |
| - background: rgba(139, 92, 246, 0.7); |
573 |
| -} |
574 |
| - |
575 |
| -/* Minimal transcript scrollbar */ |
576 |
| -.transcript-scrollbar { |
577 |
| - scrollbar-width: thin; |
578 |
| - scrollbar-color: rgba(156, 163, 175, 0.5) transparent; |
579 |
| -} |
580 |
| - |
581 |
| -.transcript-scrollbar::-webkit-scrollbar { |
582 |
| - width: 4px; |
583 |
| -} |
584 |
| - |
585 |
| -.transcript-scrollbar::-webkit-scrollbar-track { |
586 |
| - background: transparent; |
587 |
| -} |
588 |
| - |
589 |
| -.transcript-scrollbar::-webkit-scrollbar-thumb { |
590 |
| - background: rgba(156, 163, 175, 0.5); |
591 |
| - border-radius: 2px; |
592 |
| -} |
593 |
| - |
594 |
| -.transcript-scrollbar::-webkit-scrollbar-thumb:hover { |
595 |
| - background: rgba(156, 163, 175, 0.7); |
596 |
| -} |
597 |
| - |
598 |
| -/* Dark mode transcript scrollbar */ |
599 |
| -.dark .transcript-scrollbar::-webkit-scrollbar-thumb { |
600 |
| - background: rgba(107, 114, 128, 0.5); |
601 |
| -} |
602 |
| - |
603 |
| -.dark .transcript-scrollbar::-webkit-scrollbar-thumb:hover { |
604 |
| - background: rgba(107, 114, 128, 0.7); |
605 |
| -} |
606 |
| - |
607 |
| -/* Enhanced text clarity for glass-morphism */ |
608 |
| -.glass-card { |
609 |
| - -webkit-font-smoothing: antialiased; |
610 |
| - -moz-osx-font-smoothing: grayscale; |
611 |
| -} |
612 |
| - |
613 |
| -.glass-card h3 { |
614 |
| - font-weight: 600; |
615 |
| - letter-spacing: -0.01em; |
616 |
| -} |
617 |
| - |
618 |
| -.glass-card p { |
619 |
| - font-weight: 400; |
620 |
| -} |
621 |
| - |
622 |
| -/* Ensure text remains readable on glass backgrounds */ |
623 |
| -.glass-card .text-gray-900 { |
624 |
| - color: rgb(17, 24, 39); |
625 |
| - font-weight: 500; |
626 |
| -} |
627 |
| - |
628 |
| -.glass-card .text-gray-600 { |
629 |
| - color: rgb(75, 85, 99); |
630 |
| -} |
631 |
| - |
632 |
| -.dark .glass-card .text-gray-100 { |
633 |
| - color: rgb(243, 244, 246); |
634 |
| - font-weight: 500; |
635 |
| -} |
636 |
| - |
637 |
| -.dark .glass-card .text-gray-400 { |
638 |
| - color: rgb(209, 213, 219); |
639 |
| -} |
640 |
| - |
641 | 520 | /* Responsive styles for narrow widths */
|
642 | 521 | @media (max-width: 768px) {
|
643 | 522 | /* Mobile menu dropdown styles */
|
@@ -729,12 +608,12 @@ body {
|
729 | 608 |
|
730 | 609 | /* Dot pattern background for main container */
|
731 | 610 | .bg-dot-pattern {
|
732 |
| - background-image: radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px); |
| 611 | + background-image: radial-gradient(circle, rgba(0, 0, 0, 0.05) 1px, transparent 1px); |
733 | 612 | background-size: 20px 20px;
|
734 | 613 | }
|
735 | 614 |
|
736 | 615 | .dark .bg-dot-pattern {
|
737 |
| - background-image: radial-gradient(circle, rgba(255, 255, 255, 0.03) 1px, transparent 1px); |
| 616 | + background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px); |
738 | 617 | }
|
739 | 618 |
|
740 | 619 | /* Fade in animation */
|
@@ -787,77 +666,6 @@ body {
|
787 | 666 | background-color: rgb(252, 165, 165); /* red-300 */
|
788 | 667 | }
|
789 | 668 |
|
790 |
| -/* Transcript card background colors - Ensure these work with Tailwind v4 */ |
791 |
| -.bg-blue-50 { |
792 |
| - background-color: rgb(239, 246, 255) !important; |
793 |
| -} |
794 |
| - |
795 |
| -.bg-gray-50 { |
796 |
| - background-color: rgb(249, 250, 251) !important; |
797 |
| -} |
798 |
| - |
799 |
| -.bg-gray-100 { |
800 |
| - background-color: rgb(243, 244, 246) !important; |
801 |
| -} |
802 |
| - |
803 |
| -.bg-yellow-50 { |
804 |
| - background-color: rgb(254, 252, 232) !important; |
805 |
| -} |
806 |
| - |
807 |
| -.bg-green-50 { |
808 |
| - background-color: rgb(240, 253, 244) !important; |
809 |
| -} |
810 |
| - |
811 |
| -/* Ensure transcript cards are never transparent */ |
812 |
| -.animate-fadeIn .bg-blue-50 { |
813 |
| - background-color: rgb(239, 246, 255) !important; |
814 |
| -} |
815 |
| - |
816 |
| -.animate-fadeIn.bg-gray-50 { |
817 |
| - background-color: rgb(249, 250, 251) !important; |
818 |
| -} |
819 |
| - |
820 |
| -.animate-fadeIn.bg-yellow-50 { |
821 |
| - background-color: rgb(254, 252, 232) !important; |
822 |
| -} |
823 |
| - |
824 |
| -.dark .bg-blue-50 { |
825 |
| - background-color: rgba(30, 58, 138, 0.2) !important; /* blue-900 with 20% opacity */ |
826 |
| -} |
827 |
| - |
828 |
| -.dark .bg-gray-50 { |
829 |
| - background-color: rgb(31, 41, 55) !important; /* gray-800 */ |
830 |
| -} |
831 |
| - |
832 |
| -.dark .bg-gray-100 { |
833 |
| - background-color: rgb(55, 65, 81) !important; /* gray-700 */ |
834 |
| -} |
835 |
| - |
836 |
| -.dark .bg-yellow-50 { |
837 |
| - background-color: rgba(120, 53, 15, 0.2) !important; /* yellow-900 with 20% opacity */ |
838 |
| -} |
839 |
| - |
840 |
| -/* Border colors for transcript cards */ |
841 |
| -.border-blue-100 { |
842 |
| - border-color: rgb(219, 234, 254) !important; |
843 |
| -} |
844 |
| - |
845 |
| -.border-yellow-200 { |
846 |
| - border-color: rgb(254, 240, 138) !important; |
847 |
| -} |
848 |
| - |
849 |
| -.dark .border-blue-900\/30 { |
850 |
| - border-color: rgba(30, 58, 138, 0.3) !important; |
851 |
| -} |
852 |
| - |
853 |
| -.dark .border-yellow-900\/30 { |
854 |
| - border-color: rgba(120, 53, 15, 0.3) !important; |
855 |
| -} |
856 |
| - |
857 |
| -.dark .bg-green-50 { |
858 |
| - background-color: rgba(20, 83, 45, 0.2) !important; /* green-900 with 20% opacity */ |
859 |
| -} |
860 |
| - |
861 | 669 | /* Fix template dropdown hover colors in dark mode */
|
862 | 670 | .dark .hover\:bg-gray-50\/50:hover {
|
863 | 671 | background-color: rgba(0, 0, 0, 0.5) !important;
|
|
0 commit comments