/* * Custom utility classes for Altera Tracker * * These are additional Tailwind-style utilities not included in Unfold's * pre-compiled CSS. We define them manually to avoid conflicts with Unfold's * base layer and dark mode handling. * * Dark mode: Unfold adds a `.dark` class to , so dark mode selectors * use `.dark .dark\:*` pattern to match elements when dark mode is active. */ /* ========================================================================== Violet colors (for primary action buttons) ========================================================================== */ .bg-violet-600 { background-color: oklch(54.1% 0.281 293.009); } .bg-violet-700 { background-color: oklch(49.1% 0.27 292.581); } .hover\:bg-violet-700:hover { background-color: oklch(49.1% 0.27 292.581); } /* ========================================================================== Amber colors (for warnings and read-only indicators) ========================================================================== */ .text-amber-700 { color: oklch(55.5% 0.163 48.998); } .dark .dark\:text-amber-300 { color: oklch(87.9% 0.169 91.605); } .bg-amber-50 { background-color: oklch(98.7% 0.022 95.277); } .dark .dark\:bg-amber-900\/20 { background-color: oklch(41.4% 0.112 45.904 / 20%); } .border-amber-200 { border-color: oklch(92.4% 0.12 95.746); } .dark .dark\:border-amber-700 { border-color: oklch(55.5% 0.163 48.998); } /* ========================================================================== Slate colors (for dark mode table row hover) ========================================================================== */ .dark .dark\:hover\:bg-slate-800:hover { background-color: oklch(27.9% 0.041 260.031); } /* ========================================================================== Additional hover states for dark mode ========================================================================== */ .dark .dark\:hover\:bg-white\/\[\.06\]:hover { background-color: rgb(255 255 255 / 6%); } /* ========================================================================== Shadow utilities ========================================================================== */ .shadow-\[-8px_0_24px_rgba\(0\,0\,0\,0\.15\)\] { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.15); } .dark .dark\:shadow-\[-8px_0_24px_rgba\(0\,0\,0\,0\.5\)\] { box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5); } /* ========================================================================== Gray colors (for dark mode backgrounds, borders, text) ========================================================================== */ .dark .dark\:bg-gray-900 { background-color: oklch(21.0% 0.006 285.885); } .dark .dark\:bg-gray-800 { background-color: oklch(27.4% 0.006 286.033); } .dark .dark\:border-gray-700 { border-color: oklch(37.3% 0.034 259.733); } .dark .dark\:border-gray-600 { border-color: oklch(44.6% 0.030 256.802); } .dark .dark\:text-gray-100 { color: oklch(96.7% 0.003 264.542); } .dark .dark\:text-gray-300 { color: oklch(87.1% 0.006 286.286); } .dark .dark\:text-gray-400 { color: oklch(70.7% 0.022 261.325); } .dark .dark\:text-gray-500 { color: oklch(55.1% 0.027 264.364); } .dark .dark\:text-white { color: white; } .dark .dark\:hover\:text-gray-300:hover { color: oklch(87.1% 0.006 286.286); } /* ========================================================================== Red colors (for error messages) ========================================================================== */ .dark .dark\:bg-red-900\/20 { background-color: oklch(39.6% 0.141 25.723 / 20%); } .dark .dark\:border-red-800 { border-color: oklch(44.4% 0.177 26.899); } .dark .dark\:text-red-400 { color: oklch(70.4% 0.191 22.216); } /* ========================================================================== Violet colors (for links/accents in dark mode) ========================================================================== */ .dark .dark\:text-violet-400 { color: oklch(71.2% 0.165 293.541); } /* ========================================================================== Max height utility ========================================================================== */ .max-h-\[400px\] { max-height: 400px; } /* ========================================================================== Whitespace utility (for multi-line error messages) ========================================================================== */ .whitespace-pre-line { white-space: pre-line; } /* ========================================================================== DjangoQL search bar - make it fill available width ========================================================================== */ #toolbar { flex-grow: 1; margin-right: 1rem; } #toolbar form { width: 100%; } #toolbar form > div { width: 100% !important; } /* ========================================================================== DjangoQL completion popup - ensure syntax help link is visible ========================================================================== */ .djangoql-completion { background: white; border: 1px solid #e5e7eb; border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1); z-index: 1000; overflow: visible !important; } .dark .djangoql-completion { background: oklch(21.0% 0.006 285.885); border-color: oklch(37.3% 0.034 259.733); } .djangoql-completion ul { max-height: 300px; overflow-y: auto; margin: 0; padding: 0; } .djangoql-completion .syntax-help, .djangoql-completion p.syntax-help, .djangoql-completion > p { display: block !important; visibility: visible !important; opacity: 1 !important; padding: 8px 12px !important; margin: 0 !important; border-top: 1px solid #e5e7eb !important; font-size: 0.875rem !important; background: white; } .dark .djangoql-completion .syntax-help { border-top-color: oklch(37.3% 0.034 259.733) !important; background: oklch(21.0% 0.006 285.885); } .djangoql-completion .syntax-help a { color: oklch(54.1% 0.281 293.009) !important; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .djangoql-completion .syntax-help a::before { font-family: 'Material Symbols Outlined'; content: 'help'; font-size: 16px; font-weight: 300; } .djangoql-completion .syntax-help a:hover { text-decoration: underline; } .dark .djangoql-completion .syntax-help a { color: oklch(71.2% 0.165 293.541) !important; }