Update styles to use plain CSS instead of @apply directives

Converts CSS from Tailwind's @apply directive to plain CSS for improved compatibility with Tailwind 4 and better maintainability.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: c537be14-ffc2-48de-88ef-2bdd9e6ae15a
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/d6d61dac-164d-45dd-929f-7dcdfd771b64/c537be14-ffc2-48de-88ef-2bdd9e6ae15a/C5U8Nxc
This commit is contained in:
pac7
2025-09-22 02:09:35 +00:00
parent 8c85963817
commit b265d793a3
4 changed files with 126 additions and 80 deletions

View File

@@ -0,0 +1,92 @@
Expected declaration but found @apply. Skipped to next declaration. alerts.css:3:11
Expected declaration but found @apply. Skipped to next declaration. alerts.css:8:11
Expected declaration but found @apply. Skipped to next declaration. alerts.css:12:11
Expected declaration but found @apply. Skipped to next declaration. alerts.css:16:11
Expected declaration but found @apply. Skipped to next declaration. alerts.css:20:11
Expected declaration but found @apply. Skipped to next declaration. components.css:137:9
Expected declaration but found @apply. Skipped to next declaration. components.css:141:9
Expected declaration but found @apply. Skipped to next declaration. components.css:145:9
Expected declaration but found @apply. Skipped to next declaration. components.css:149:9
Expected declaration but found @apply. Skipped to next declaration. components.css:153:9
Expected declaration but found @apply. Skipped to next declaration. components.css:157:9
Expected declaration but found @apply. Skipped to next declaration. components.css:161:9
Expected declaration but found @apply. Skipped to next declaration. components.css:165:9
Expected declaration but found @apply. Skipped to next declaration. components.css:169:9
Expected declaration but found @apply. Skipped to next declaration. components.css:173:9
Expected declaration but found @apply. Skipped to next declaration. components.css:178:9
Expected declaration but found @apply. Skipped to next declaration. components.css:182:9
Expected declaration but found @apply. Skipped to next declaration. components.css:186:9
Expected declaration but found @apply. Skipped to next declaration. components.css:190:9
Expected declaration but found @apply. Skipped to next declaration. components.css:194:9
Expected declaration but found @apply. Skipped to next declaration. components.css:198:9
Expected declaration but found @apply. Skipped to next declaration. components.css:203:9
Expected declaration but found @apply. Skipped to next declaration. components.css:208:9
Expected declaration but found @apply. Skipped to next declaration. components.css:212:9
Expected declaration but found @apply. Skipped to next declaration. components.css:216:9
Expected declaration but found @apply. Skipped to next declaration. components.css:220:9
Expected declaration but found @apply. Skipped to next declaration. components.css:225:9
Expected declaration but found @apply. Skipped to next declaration. components.css:229:9
Expected declaration but found @apply. Skipped to next declaration. components.css:234:9
Expected declaration but found @apply. Skipped to next declaration. components.css:238:9
Expected declaration but found @apply. Skipped to next declaration. components.css:244:9
Expected declaration but found @apply. Skipped to next declaration. components.css:249:9
Expected declaration but found @apply. Skipped to next declaration. components.css:253:9
Expected declaration but found @apply. Skipped to next declaration. components.css:257:9
Expected declaration but found @apply. Skipped to next declaration. components.css:261:9
Expected declaration but found @apply. Skipped to next declaration. components.css:265:9
Expected declaration but found @apply. Skipped to next declaration. components.css:269:9
Expected declaration but found @apply. Skipped to next declaration. components.css:274:9
Expected declaration but found @apply. Skipped to next declaration. components.css:278:9
Expected declaration but found @apply. Skipped to next declaration. components.css:282:9
Expected declaration but found @apply. Skipped to next declaration. components.css:286:9
Expected declaration but found @apply. Skipped to next declaration. components.css:290:9
Expected declaration but found @apply. Skipped to next declaration. components.css:295:9
Expected declaration but found @apply. Skipped to next declaration. components.css:299:9
Expected declaration but found @apply. Skipped to next declaration. components.css:303:9
Expected declaration but found @apply. Skipped to next declaration. components.css:307:9
Expected declaration but found @apply. Skipped to next declaration. components.css:311:9
Expected declaration but found @apply. Skipped to next declaration. components.css:316:9
Expected declaration but found @apply. Skipped to next declaration. components.css:320:9
Expected declaration but found @apply. Skipped to next declaration. components.css:324:9
Expected declaration but found @apply. Skipped to next declaration. components.css:328:9
Expected declaration but found @apply. Skipped to next declaration. components.css:332:9
Expected declaration but found @apply. Skipped to next declaration. components.css:336:9
Expected declaration but found @apply. Skipped to next declaration. components.css:341:9
Expected declaration but found @apply. Skipped to next declaration. components.css:346:9
Expected declaration but found @apply. Skipped to next declaration. components.css:350:9
Expected declaration but found @apply. Skipped to next declaration. components.css:354:9
Expected declaration but found @apply. Skipped to next declaration. components.css:359:9
Expected declaration but found @apply. Skipped to next declaration. components.css:363:9
Expected declaration but found @apply. Skipped to next declaration. components.css:367:9
Expected declaration but found @apply. Skipped to next declaration. components.css:372:9
Expected declaration but found @apply. Skipped to next declaration. components.css:376:9
Expected declaration but found @apply. Skipped to next declaration. components.css:381:9
Expected declaration but found @apply. Skipped to next declaration. components.css:385:9
Expected declaration but found @apply. Skipped to next declaration. components.css:389:9
Expected declaration but found @apply. Skipped to next declaration. components.css:393:9
Expected declaration but found @apply. Skipped to next declaration. components.css:398:9
Expected declaration but found @apply. Skipped to next declaration. components.css:402:9
Expected declaration but found @apply. Skipped to next declaration. components.css:406:9
Expected declaration but found @apply. Skipped to next declaration. components.css:411:9
Expected declaration but found @apply. Skipped to next declaration. components.css:416:9
Expected declaration but found @apply. Skipped to next declaration. components.css:420:9
Expected declaration but found @apply. Skipped to next declaration. components.css:425:9
Expected declaration but found @apply. Skipped to next declaration. components.css:430:9
Expected declaration but found @apply. Skipped to next declaration. components.css:435:9
Expected declaration but found @apply. Skipped to next declaration. components.css:439:9
Expected declaration but found @apply. Skipped to next declaration. components.css:443:9
Expected declaration but found @apply. Skipped to next declaration. components.css:517:11
Expected declaration but found @apply. Skipped to next declaration. components.css:521:11
Found invalid value for media feature. components.css:546:26
getEmbedInfo content.js:388:11
NO OEMBED content.js:456:11
Error in parsing value for -webkit-text-size-adjust. Declaration dropped. tailwind.css:162:31
Layout was forced before the page was fully loaded. If stylesheets are not yet loaded this may cause a flash of unstyled content. node.js:409:1
Alpine components script is loading... alpine-components.js:10:9
Registering Alpine.js components... alpine-components.js:24:11
Alpine.js components registered successfully alpine-components.js:734:11
GET
https://d6d61dac-164d-45dd-929f-7dcdfd771b64-00-1bpe9dzxxnshv.worf.replit.dev/favicon.ico
[HTTP/1.1 404 Not Found 56ms]
downloadable font: Glyph bbox was incorrect (glyph ids 2 3 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 49 51 52 54 56 57 58 60 61 62 63 64 65 67 68 69 71 74 75 76 77 79 86 89 91 96 98 99 100 102 103 109 110 111 113 116 117 118 124 127 128 129 130 132 133 134 137 138 140 142 143 145 146 147 155 156 159 160 171 172 173 177 192 201 202 203 204 207 208 209 210 225 231 233 234 235 238 239 243 244 246 252 253 254 256 259 261 262 268 269 278 279 280 281 285 287 288 295 296 302 303 304 305 307 308 309 313 315 322 324 353 355 356 357 360 362 367 370 371 376 390 396 397 398 400 403 404 407 408 415 416 417 418 423 424 425 427 428 432 433 434 435 436 439 451 452 455 461 467 470 471 482 483 485 489 491 496 499 500 505 514 529 532 541 542 543 547 549 551 553 554 555 556 557 559 579 580 581 582 584 591 592 593 594 595 596 597 600 601 608 609 614 615 622 624 649 658 659 662 664 673 679 680 681 682 684 687 688 689 692 693 694 695 696 698 699 700 702 708 710 711 712 714 716 719 723 724 727 728 729 731 732 733 739 750 751 754 755 756 758 759 761 762 763 766 770 776 778 781 792 795 798 800 802 803 807 808 810 813 818 822 823 826 834 837 854 860 861 862 863 866 867 871 872 874 875 881 882 883 886 892 894 895 897 898 900 901 902 907 910 913 915 917 920 927 936 937 943 945 946 947 949 950 951 954 955 956 958 961 962 964 965 966 968 969 970 974 976 978 980 981 982 985 986 991 992 998 1000 1001 1007 1008 1009 1010 1014 1016 1018 1020 1022 1023 1024 1027 1028 1033 1034 1035 1036 1037 1040 1041 1044 1045 1047 1048 1049 1053 1054 1055 1056 1057 1059 1061 1063 1064 1065 1072 1074 1075 1078 1079 1080 1081 1085 1086 1087 1088 1093 1095 1099 1100 1111 1112 1115 1116 1117 1120 1121 1122 1123 1124 1125) (font-family: "Font Awesome 6 Free" style:normal weight:900 stretch:100 src index:0) source: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2

View File

@@ -0,0 +1,12 @@
Found invalid value for media feature. components.css:476:26
Error in parsing value for -webkit-text-size-adjust. Declaration dropped. tailwind.css:162:31
Alpine components script is loading... alpine-components.js:10:9
Registering Alpine.js components... alpine-components.js:24:11
Alpine.js components registered successfully alpine-components.js:734:11
getEmbedInfo content.js:388:11
NO OEMBED content.js:456:11
downloadable font: Glyph bbox was incorrect (glyph ids 2 3 5 8 9 10 11 12 14 17 19 21 22 32 34 35 39 40 43 44 45 46 47 49 51 52 54 56 57 58 60 61 62 63 64 65 67 68 69 71 74 75 76 77 79 86 89 91 96 98 99 100 102 103 109 110 111 113 116 117 118 124 127 128 129 130 132 133 134 137 138 140 142 143 145 146 147 155 156 159 160 171 172 173 177 192 201 202 203 204 207 208 209 210 225 231 233 234 235 238 239 243 244 246 252 253 254 256 259 261 262 268 269 278 279 280 281 285 287 288 295 296 302 303 304 305 307 308 309 313 315 322 324 353 355 356 357 360 362 367 370 371 376 390 396 397 398 400 403 404 407 408 415 416 417 418 423 424 425 427 428 432 433 434 435 436 439 451 452 455 461 467 470 471 482 483 485 489 491 496 499 500 505 514 529 532 541 542 543 547 549 551 553 554 555 556 557 559 579 580 581 582 584 591 592 593 594 595 596 597 600 601 608 609 614 615 622 624 649 658 659 662 664 673 679 680 681 682 684 687 688 689 692 693 694 695 696 698 699 700 702 708 710 711 712 714 716 719 723 724 727 728 729 731 732 733 739 750 751 754 755 756 758 759 761 762 763 766 770 776 778 781 792 795 798 800 802 803 807 808 810 813 818 822 823 826 834 837 854 860 861 862 863 866 867 871 872 874 875 881 882 883 886 892 894 895 897 898 900 901 902 907 910 913 915 917 920 927 936 937 943 945 946 947 949 950 951 954 955 956 958 961 962 964 965 966 968 969 970 974 976 978 980 981 982 985 986 991 992 998 1000 1001 1007 1008 1009 1010 1014 1016 1018 1020 1022 1023 1024 1027 1028 1033 1034 1035 1036 1037 1040 1041 1044 1045 1047 1048 1049 1053 1054 1055 1056 1057 1059 1061 1063 1064 1065 1072 1074 1075 1078 1079 1080 1081 1085 1086 1087 1088 1093 1095 1099 1100 1111 1112 1115 1116 1117 1120 1121 1122 1123 1124 1125) (font-family: "Font Awesome 6 Free" style:normal weight:900 stretch:100 src index:0) source: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/webfonts/fa-solid-900.woff2
GET
https://d6d61dac-164d-45dd-929f-7dcdfd771b64-00-1bpe9dzxxnshv.worf.replit.dev/favicon.ico
[HTTP/1.1 404 Not Found 58ms]

View File

@@ -1,23 +1,35 @@
/* Alert Styles */
/* Alert Styles - Converted from @apply to plain CSS for Tailwind 4 compatibility */
.alert {
@apply fixed z-50 px-4 py-3 transition-all duration-500 transform rounded-lg shadow-lg right-4 top-4;
position: fixed;
z-index: 50;
padding: 0.75rem 1rem;
transition: all 0.5s;
transform: translateX(0);
border-radius: 0.5rem;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
right: 1rem;
top: 1rem;
animation: slideIn 0.5s ease-out forwards;
}
.alert-success {
@apply text-white bg-green-500;
color: white;
background-color: rgb(34 197 94);
}
.alert-error {
@apply text-white bg-red-500;
color: white;
background-color: rgb(239 68 68);
}
.alert-info {
@apply text-white bg-blue-500;
color: white;
background-color: rgb(59 130 246);
}
.alert-warning {
@apply text-white bg-yellow-500;
color: white;
background-color: rgb(234 179 8);
}
/* Animation keyframes */

View File

@@ -134,313 +134,241 @@ body {
/* Enhanced Button Styles */
.btn {
@apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}
.btn-default {
@apply bg-primary text-primary-foreground hover:bg-primary/90;
}
.btn-destructive {
@apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}
.btn-outline {
@apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
}
.btn-secondary {
@apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}
.btn-ghost {
@apply hover:bg-accent hover:text-accent-foreground;
}
.btn-link {
@apply text-primary underline-offset-4 hover:underline;
}
.btn-sm {
@apply h-9 rounded-md px-3;
}
.btn-lg {
@apply h-11 rounded-md px-8;
}
.btn-icon {
@apply h-10 w-10;
}
/* Enhanced Card Styles */
.card {
@apply rounded-lg border bg-card text-card-foreground shadow-sm;
}
.card-header {
@apply flex flex-col space-y-1.5 p-6;
}
.card-title {
@apply text-2xl font-semibold leading-none tracking-tight;
}
.card-description {
@apply text-sm text-muted-foreground;
}
.card-content {
@apply p-6 pt-0;
}
.card-footer {
@apply flex items-center p-6 pt-0;
}
/* Enhanced Input Styles */
.input {
@apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
/* Enhanced Form Styles */
.form-group {
@apply space-y-2;
}
.form-label {
@apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
}
.form-error {
@apply text-sm font-medium text-destructive;
}
.form-description {
@apply text-sm text-muted-foreground;
}
/* Enhanced Navigation Styles */
.nav-link {
@apply flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors;
}
.nav-link.active {
@apply bg-accent text-accent-foreground;
}
/* Enhanced Dropdown Styles */
.dropdown-content {
@apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
}
.dropdown-item {
@apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
/* Browse Menu Specific Styles - Removed to fix Tailwind 4 compatibility */
.dropdown-separator {
@apply -mx-1 my-1 h-px bg-muted;
}
/* Enhanced Modal Styles */
.modal-overlay {
@apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm;
}
.modal-content {
@apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
}
.modal-header {
@apply flex flex-col space-y-1.5 text-center sm:text-left;
}
.modal-title {
@apply text-lg font-semibold leading-none tracking-tight;
}
.modal-description {
@apply text-sm text-muted-foreground;
}
.modal-footer {
@apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
}
/* Enhanced Alert Styles */
.alert {
@apply relative w-full rounded-lg border p-4;
}
.alert-default {
@apply bg-background text-foreground;
}
.alert-destructive {
@apply border-destructive/50 text-destructive dark:border-destructive;
}
.alert-title {
@apply mb-1 font-medium leading-none tracking-tight;
}
.alert-description {
@apply text-sm opacity-90;
}
/* Enhanced Badge Styles */
.badge {
@apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}
.badge-default {
@apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
}
.badge-secondary {
@apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
}
.badge-destructive {
@apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
}
.badge-outline {
@apply text-foreground;
}
/* Enhanced Table Styles */
.table {
@apply w-full caption-bottom text-sm;
}
.table-header {
@apply border-b;
}
.table-body {
@apply divide-y;
}
.table-row {
@apply border-b transition-colors hover:bg-muted/50;
}
.table-head {
@apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
}
.table-cell {
@apply p-4 align-middle;
}
/* Enhanced Skeleton Styles */
.skeleton {
@apply animate-pulse rounded-md bg-muted;
}
/* Enhanced Separator Styles */
.separator {
@apply shrink-0 bg-border;
}
.separator-horizontal {
@apply h-[1px] w-full;
}
.separator-vertical {
@apply h-full w-[1px];
}
/* Enhanced Avatar Styles */
.avatar {
@apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
}
.avatar-image {
@apply aspect-square h-full w-full object-cover;
}
.avatar-fallback {
@apply flex h-full w-full items-center justify-center rounded-full bg-muted;
}
/* Enhanced Progress Styles */
.progress {
@apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
}
.progress-indicator {
@apply h-full w-full flex-1 bg-primary transition-all;
}
/* Enhanced Scroll Area Styles */
.scroll-area {
@apply relative overflow-hidden;
}
.scroll-viewport {
@apply h-full w-full rounded-[inherit];
}
.scroll-bar {
@apply flex touch-none select-none transition-colors;
}
.scroll-thumb {
@apply relative flex-1 rounded-full bg-border;
}
/* Enhanced Tabs Styles */
.tabs-list {
@apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
}
.tabs-trigger {
@apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm;
}
.tabs-content {
@apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
}
/* Enhanced Tooltip Styles */
.tooltip-content {
@apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95;
}
/* Enhanced Switch Styles */
.switch {
@apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
}
.switch-thumb {
@apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
}
/* Enhanced Checkbox Styles */
.checkbox {
@apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
}
/* Enhanced Radio Styles */
.radio {
@apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
/* Enhanced Select Styles */
.select-trigger {
@apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}
.select-content {
@apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md;
}
.select-item {
@apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}
/* Utility Classes */
@@ -514,11 +442,13 @@ body {
/* Responsive Design Helpers */
@media (max-width: 640px) {
.modal-content {
@apply w-[95vw] max-w-none;
width: 95vw;
max-width: none;
}
.dropdown-content {
@apply w-screen max-w-none;
width: 100vw;
max-width: none;
}
}