newznab-tmux/resources/css/app.css

/* Import FontAwesome */
@import '@fortawesome/fontawesome-free/css/all.min.css';

/* Import other necessary libraries */
@import 'animate.css/animate.min.css';
@import 'datatables/media/css/jquery.dataTables.min.css';

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark Mode Text Readability Fixes */
@layer base {
    /* Ensure dark backgrounds have light text */
    .dark {
        color-scheme: dark;
    }

    /* Fix text-gray-700, text-gray-800, text-gray-900 in dark mode */
    .dark .text-gray-700:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    .dark .text-gray-800:not([class*="dark:text-"]) {
        color: rgb(229 231 235) !important; /* gray-200 */
    }

    .dark .text-gray-900:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }

    /* Ensure labels are readable in dark mode */
    .dark label:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    /* Fix table headers in dark mode */
    .dark th:not([class*="dark:text-"]) {
        color: rgb(209 213 219) !important; /* gray-300 */
    }

    /* Fix table cells in dark mode */
    .dark td:not([class*="dark:text-"]) {
        color: rgb(229 231 235) !important; /* gray-200 */
    }

    /* Ensure headings are visible in dark mode */
    .dark h1:not([class*="dark:text-"]),
    .dark h2:not([class*="dark:text-"]),
    .dark h3:not([class*="dark:text-"]),
    .dark h4:not([class*="dark:text-"]),
    .dark h5:not([class*="dark:text-"]),
    .dark h6:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }

    /* Fix select elements in dark mode */
    .dark select:not([class*="dark:text-"]),
    .dark input:not([class*="dark:text-"]),
    .dark textarea:not([class*="dark:text-"]) {
        color: rgb(243 244 246) !important; /* gray-100 */
    }
}

/* Custom styles for proper spacing and button alignment */
.btn {
    @apply inline-flex items-center justify-center px-4 py-2 border rounded-md font-semibold text-sm transition-colors duration-150;
}

.btn i {
    @apply mr-2;
}

.btn-primary {
    @apply bg-blue-600 dark:bg-blue-700 text-white border-blue-600 dark:border-blue-700 hover:bg-blue-700 dark:hover:bg-blue-800;
}

.btn-secondary {
    @apply bg-gray-600 dark:bg-gray-700 text-white border-gray-600 dark:border-gray-700 hover:bg-gray-700 dark:hover:bg-gray-800;
}

.btn-success {
    @apply bg-green-600 dark:bg-green-700 text-white border-green-600 dark:border-green-700 hover:bg-green-700 dark:hover:bg-green-800;
}

.btn-danger {
    @apply bg-red-600 dark:bg-red-700 text-white border-red-600 dark:border-red-700 hover:bg-red-700 dark:hover:bg-red-800;
}

.btn-warning {
    @apply bg-yellow-500 dark:bg-yellow-600 text-white border-yellow-500 dark:border-yellow-600 hover:bg-yellow-600 dark:hover:bg-yellow-700;
}

.btn-info {
    @apply bg-cyan-600 dark:bg-cyan-700 text-white border-cyan-600 dark:border-cyan-700 hover:bg-cyan-700 dark:hover:bg-cyan-800;
}

.btn-sm {
    @apply px-3 py-1 text-xs;
}

.btn-lg {
    @apply px-6 py-3 text-base;
}

/* Button group spacing */
.btn-group {
    @apply inline-flex space-x-2;
}

/* Icon spacing */
.fas, .far, .fab, .fa {
    @apply inline-block;
    min-width: 1em;
    text-align: center;
}

/* Table action buttons */
.table-actions {
    @apply flex items-center gap-2;
}

.table-actions .btn {
    @apply flex-shrink-0;
}