/* TCG Headlines bands layout */ .band-dark { background-color: #131830; } .star-divider { height: 50px; background-color: #131830; background-image: url("/images/tcgheadlines/image_7.png"); background-repeat: repeat-x; background-position: center center; background-size: auto 200%; position: relative; z-index: 10; margin-top: -25px; margin-bottom: -25px; pointer-events: none; } .hero-image-lg { background-size: cover; background-position: center; min-height: 260px; } /* Dark mode for bands layout light sections (tcgheadlines) */ .dark .bands-layout .bg-gray-50 { background-color: #131830 !important; } .dark .bands-layout .bg-white { background-color: #1c2240 !important; } .dark .bands-layout .bg-amber-50 { background-color: rgba(217,119,6,0.1) !important; } /* Text colors */ .dark .bands-layout .text-gray-900 { color: #f3f4f6 !important; } .dark .bands-layout .text-gray-800 { color: #e5e7eb !important; } .dark .bands-layout .text-gray-700 { color: #d1d5db !important; } .dark .bands-layout .text-gray-600 { color: #9ca3af !important; } .dark .bands-layout .text-gray-500 { color: #9ca3af !important; } .dark .bands-layout .text-amber-800 { color: #fbbf24 !important; } .dark .bands-layout .text-amber-700 { color: #fbbf24 !important; } /* Borders */ .dark .bands-layout .border-gray-200 { border-color: rgba(255,255,255,0.1) !important; } .dark .bands-layout .border-gray-100 { border-color: rgba(255,255,255,0.08) !important; } .dark .bands-layout .border-gray-300 { border-color: rgba(255,255,255,0.15) !important; } .dark .bands-layout .border-amber-200 { border-color: rgba(217,119,6,0.3) !important; } /* Cards and interactive elements */ .dark .bands-layout .shadow-sm { box-shadow: none !important; } .dark .bands-layout .hover\:shadow-md:hover { box-shadow: 0 0 15px rgba(234,179,8,0.1) !important; } /* Form inputs */ .dark .bands-layout input.border-gray-300 { background-color: #1c2240 !important; color: #f3f4f6 !important; } /* Hero card gradient */ .dark .bands-layout article.border-amber-200 { background: linear-gradient(135deg, rgba(217,119,6,0.12) 0%, rgba(19,24,48,0.9) 100%) !important; } /* Sort pills on search page */ .dark .bands-layout .bg-white.text-amber-700 { background-color: #1c2240 !important; border-color: rgba(217,119,6,0.3) !important; color: #fbbf24 !important; } .dark .bands-layout .hover\:bg-amber-50:hover { background-color: rgba(217,119,6,0.15) !important; } /* Reset global font-size overrides inside bands layout */ .bands-layout { font-size: 1rem; /* 16px — Tailwind default */ } /* Custom styles for Feed Monitor */ /* Override Tailwind defaults for smaller text */ body { font-size: 0.875rem; /* 14px instead of 16px */ } /* Smaller heading sizes — :where() gives zero specificity so Tailwind utilities (text-3xl, text-lg, etc.) always win. */ :where(h1) { font-size: 1.75rem; } :where(h2) { font-size: 1.5rem; } :where(h3) { font-size: 1.25rem; } :where(h4) { font-size: 1.125rem; } :where(h5) { font-size: 1rem; } :where(h6) { font-size: 0.875rem; } /* Ensure tables have consistent styling */ table { font-size: 0.875rem; } /* Article content specific styles */ .article-content { font-size: 0.875rem; line-height: 1.6; } /* Raw content container */ .raw-content { max-height: 600px; overflow-y: auto; } /* Status indicators */ .status-indicator { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.5rem; } .status-indicator.active { background-color: #10b981; /* green-500 */ } .status-indicator.inactive { background-color: #f59e0b; /* amber-500 */ } .status-indicator.error { background-color: #ef4444; /* red-500 */ } /* Dark mode support (class-based, toggled via .dark on ) */ .dark .status-indicator.active { background-color: #34d399; /* green-400 */ } .dark .status-indicator.inactive { background-color: #fbbf24; /* amber-400 */ } .dark .status-indicator.error { background-color: #f87171; /* red-400 */ } /* Most Popular section dark mode */ .dark .most-popular-section { border-left-color: #ef4444 !important; /* red-500 */ } /* Contextual Deal section dark mode */ .dark .contextual-deal-section { border-left-color: var(--color-accent) !important; } /* Bootstrap dark mode overrides for admin pages */ .dark .card { background-color: #111827; /* gray-900 */ border-color: #374151; /* gray-700 */ color: #e5e7eb; /* gray-200 */ } .dark .card-header { background-color: #1f2937; /* gray-800 */ border-color: #374151; /* gray-700 */ color: #f3f4f6; /* gray-100 */ } .dark .card-body { color: #e5e7eb; /* gray-200 */ } .dark .table { color: #e5e7eb; /* gray-200 */ --bs-table-bg: transparent; } .dark .table > :not(caption) > * > * { border-bottom-color: #374151; /* gray-700 */ } .dark .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); --bs-table-striped-bg: rgba(255, 255, 255, 0.03); } .dark .table-warning { --bs-table-bg: rgba(234, 179, 8, 0.1); --bs-table-striped-bg: rgba(234, 179, 8, 0.1); color: #fbbf24; /* amber-400 */ } .dark .text-muted { color: #9ca3af !important; /* gray-400 */ } .dark .text-decoration-none { color: #93c5fd; /* blue-300 */ } .dark .form-control { background-color: #1f2937; /* gray-800 */ border-color: #4b5563; /* gray-600 */ color: #f3f4f6; /* gray-100 */ } .dark .form-control:focus { background-color: #1f2937; border-color: #3b82f6; /* blue-500 */ color: #f3f4f6; } .dark .form-label, .dark label { color: #d1d5db; /* gray-300 */ } .dark .form-text { color: #9ca3af !important; /* gray-400 */ } .dark .form-select { background-color: #1f2937; border-color: #4b5563; color: #f3f4f6; } .dark .alert-danger { background-color: rgba(127, 29, 29, 0.3); border-color: #991b1b; color: #fca5a5; /* red-300 */ } .dark .breadcrumb { color: #9ca3af; } .dark .breadcrumb-item a { color: #93c5fd; /* blue-300 */ } .dark .breadcrumb-item.active { color: #d1d5db; /* gray-300 */ } .dark .page-header, .dark :is(h1, h2, h3, h4, h5, h6):not(.bands-layout *) { color: #f3f4f6; /* gray-100 */ } .dark .btn-outline-primary { color: #93c5fd; border-color: #3b82f6; } .dark .btn-outline-primary:hover { background-color: #3b82f6; color: #fff; } .dark .btn-outline-danger { color: #fca5a5; border-color: #ef4444; } .dark .btn-outline-danger:hover { background-color: #ef4444; color: #fff; } .dark .btn-secondary { background-color: #4b5563; border-color: #4b5563; } .dark .container-fluid { color: #e5e7eb; } /* Dark mode: lighten link hover colors that are too dark on dark backgrounds. These override Tailwind hover:text-*-800/900 classes which are unreadable on dark bg. */ .dark .hover\:text-blue-900:hover { color: #93c5fd !important; } .dark .hover\:text-blue-800:hover { color: #93c5fd !important; } .dark .hover\:text-indigo-900:hover { color: #a5b4fc !important; } .dark .hover\:text-indigo-800:hover { color: #a5b4fc !important; } .dark .hover\:text-red-900:hover { color: #fca5a5 !important; } .dark .hover\:text-red-800:hover { color: #fca5a5 !important; } .dark .hover\:text-yellow-900:hover { color: #fde68a !important; } .dark .hover\:text-yellow-800:hover { color: #fde68a !important; } .dark .hover\:text-green-900:hover { color: #86efac !important; } .dark .hover\:text-green-800:hover { color: #86efac !important; } .dark .hover\:text-purple-900:hover { color: #c4b5fd !important; } .dark .hover\:text-purple-800:hover { color: #c4b5fd !important; } /* Dark mode: lighten light hover backgrounds on outline action buttons */ .dark .hover\:bg-yellow-50:hover { background-color: rgba(234, 179, 8, 0.15) !important; } .dark .hover\:bg-red-50:hover { background-color: rgba(239, 68, 68, 0.15) !important; } .dark .hover\:bg-green-50:hover { background-color: rgba(34, 197, 94, 0.15) !important; } .dark .hover\:bg-blue-50:hover { background-color: rgba(59, 130, 246, 0.15) !important; } .dark .hover\:bg-cyan-50:hover { background-color: rgba(6, 182, 212, 0.15) !important; } .dark .hover\:bg-gray-50:hover { background-color: rgba(107, 114, 128, 0.15) !important; } /* Dark mode: form-check elements */ .dark .form-check-label { color: #d1d5db; /* gray-300 */ } /* Dark mode: code elements without explicit color */ .dark code:not([class*="text-"]) { color: #e5e7eb; /* gray-200 */ } /* Dark mode: btn-primary */ .dark .btn-primary { background-color: #2563eb; /* blue-600 */ border-color: #2563eb; color: #fff; } .dark .btn-primary:hover { background-color: #1d4ed8; /* blue-700 */ border-color: #1d4ed8; }