@tailwind base; @tailwind components; @tailwind utilities; .pagy { @apply flex space-x-1 font-semibold text-sm text-gray-500; a:not(.gap) { @apply block rounded-lg px-3 py-1 bg-gray-200; &:hover { @apply bg-gray-300; } &:not([href]) { /* disabled links */ @apply text-gray-300 bg-gray-100 cursor-default; } &.current { @apply text-white bg-gray-400; } } label { @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5; input { @apply bg-gray-100 border-none rounded-md; } } } .form-control{ @apply block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6; } /* Theme preference picker (light mode) */ .theme-option:has(:checked) { border-color: #6366f1 !important; /* indigo-500 */ background-color: #eef2ff !important; /* indigo-50 */ box-shadow: 0 0 0 2px #6366f1; } .theme-option:has(:checked) .theme-option__title { color: #3730a3; /* indigo-800 */ } .theme-option:has(:checked) .theme-option__description { color: #4f46e5; /* indigo-600 */ } @keyframes flash-highlight { 0% { background-color: #fde047; } 100% { background-color: transparent; } } .flash-highlight > td { animation: flash-highlight 2.5s ease-out; } /* ========================================================= Dark mode Applied when is set. The attribute is managed by an inline script in the application layout that resolves the user's profile preference (system | light | dark). We override common Tailwind utility classes here so existing templates get a reasonable dark appearance without having to add dark: variants to every file. ========================================================= */ html[data-theme="dark"] { color-scheme: dark; background-color: #1f2937; /* gray-800 */ color: #e5e7eb; /* gray-200 */ } html[data-theme="dark"] body { background-color: #1f2937; color: #e5e7eb; } /* Backgrounds */ html[data-theme="dark"] .bg-white { background-color: #1f2937 !important; } /* gray-800 */ html[data-theme="dark"] .bg-gray-50 { background-color: #111827 !important; } /* gray-900 */ html[data-theme="dark"] .bg-gray-100 { background-color: #1f2937 !important; } /* gray-800 */ /* bg-gray-100 buttons/links would otherwise disappear against the page background (also #1f2937). Lift them one shade lighter so they're visible as interactive elements. */ html[data-theme="dark"] button.bg-gray-100, html[data-theme="dark"] a.bg-gray-100, html[data-theme="dark"] input[type="button"].bg-gray-100, html[data-theme="dark"] input[type="submit"].bg-gray-100, html[data-theme="dark"] input[type="reset"].bg-gray-100, html[data-theme="dark"] .bg-gray-100[role="button"] { background-color: #374151 !important; /* gray-700 */ } html[data-theme="dark"] button.bg-gray-100:hover, html[data-theme="dark"] a.bg-gray-100:hover, html[data-theme="dark"] input[type="button"].bg-gray-100:hover, html[data-theme="dark"] input[type="submit"].bg-gray-100:hover, html[data-theme="dark"] input[type="reset"].bg-gray-100:hover, html[data-theme="dark"] .bg-gray-100[role="button"]:hover { background-color: #4b5563 !important; /* gray-600 */ } html[data-theme="dark"] .bg-gray-200 { background-color: #374151 !important; } /* gray-700 */ html[data-theme="dark"] .bg-gray-300 { background-color: #4b5563 !important; } /* gray-600 */ html[data-theme="dark"] .bg-gray-400 { background-color: #6b7280 !important; } /* gray-500 */ /* Soft tinted backgrounds -> dark translucent variants */ html[data-theme="dark"] .bg-green-50 { background-color: rgba(16, 185, 129, 0.15) !important; } html[data-theme="dark"] .bg-green-100 { background-color: rgba(16, 185, 129, 0.22) !important; } html[data-theme="dark"] .bg-red-50 { background-color: rgba(239, 68, 68, 0.15) !important; } html[data-theme="dark"] .bg-red-100 { background-color: rgba(239, 68, 68, 0.22) !important; } html[data-theme="dark"] .bg-yellow-50 { background-color: rgba(234, 179, 8, 0.15) !important; } html[data-theme="dark"] .bg-yellow-100 { background-color: rgba(234, 179, 8, 0.22) !important; } html[data-theme="dark"] .bg-blue-50 { background-color: rgba(59, 130, 246, 0.15) !important; } html[data-theme="dark"] .bg-blue-100 { background-color: rgba(59, 130, 246, 0.22) !important; } html[data-theme="dark"] .bg-indigo-50 { background-color: rgba(99, 102, 241, 0.15) !important; } html[data-theme="dark"] .bg-indigo-100 { background-color: rgba(99, 102, 241, 0.22) !important; } html[data-theme="dark"] .bg-purple-50 { background-color: rgba(168, 85, 247, 0.15) !important; } html[data-theme="dark"] .bg-purple-100 { background-color: rgba(168, 85, 247, 0.22) !important; } /* Text colors */ html[data-theme="dark"] .text-black { color: #f3f4f6 !important; } /* gray-100 */ html[data-theme="dark"] .text-gray-900 { color: #f3f4f6 !important; } /* gray-100 */ html[data-theme="dark"] .text-gray-800 { color: #e5e7eb !important; } /* gray-200 */ html[data-theme="dark"] .text-gray-700 { color: #d1d5db !important; } /* gray-300 */ html[data-theme="dark"] .text-gray-600 { color: #9ca3af !important; } /* gray-400 */ html[data-theme="dark"] .text-gray-500 { color: #9ca3af !important; } /* gray-400 */ html[data-theme="dark"] .text-gray-400 { color: #6b7280 !important; } /* gray-500 */ /* Brighten tinted text slightly for contrast on dark backgrounds */ html[data-theme="dark"] .text-blue-600 { color: #60a5fa !important; } html[data-theme="dark"] .text-blue-700 { color: #93c5fd !important; } html[data-theme="dark"] .text-blue-800 { color: #bfdbfe !important; } html[data-theme="dark"] .text-red-500 { color: #f87171 !important; } html[data-theme="dark"] .text-red-600 { color: #f87171 !important; } html[data-theme="dark"] .text-red-800 { color: #fca5a5 !important; } html[data-theme="dark"] .text-green-500 { color: #4ade80 !important; } html[data-theme="dark"] .text-green-600 { color: #4ade80 !important; } html[data-theme="dark"] .text-green-800 { color: #86efac !important; } html[data-theme="dark"] .text-indigo-600 { color: #818cf8 !important; } /* Borders */ html[data-theme="dark"] .border-gray-100 { border-color: #374151 !important; } /* gray-700 */ html[data-theme="dark"] .border-gray-200 { border-color: #374151 !important; } /* gray-700 */ html[data-theme="dark"] .border-gray-300 { border-color: #4b5563 !important; } /* gray-600 */ html[data-theme="dark"] .border-gray-400 { border-color: #6b7280 !important; } /* gray-500 */ html[data-theme="dark"] .divide-gray-100 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; } html[data-theme="dark"] .divide-gray-200 > :not([hidden]) ~ :not([hidden]) { border-color: #374151 !important; } /* Rings (used by focus + form-control) */ html[data-theme="dark"] .ring-gray-200 { --tw-ring-color: #374151 !important; } html[data-theme="dark"] .ring-gray-300 { --tw-ring-color: #4b5563 !important; } /* Shadows: boost contrast against dark backgrounds */ html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .shadow, html[data-theme="dark"] .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4) !important; } html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.55), 0 4px 6px -4px rgba(0, 0, 0, 0.45) !important; } html[data-theme="dark"] .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5) !important; } /* Custom components declared above */ html[data-theme="dark"] .form-control { background-color: #1f2937; color: #f3f4f6; --tw-ring-color: #4b5563; } html[data-theme="dark"] .form-control::placeholder { color: #6b7280; } html[data-theme="dark"] .pagy { @apply text-gray-400; } html[data-theme="dark"] .pagy a:not(.gap) { background-color: #374151; /* gray-700 */ color: #e5e7eb; } html[data-theme="dark"] .pagy a:not(.gap):hover { background-color: #4b5563; /* gray-600 */ } html[data-theme="dark"] .pagy a:not(.gap):not([href]) { color: #6b7280; background-color: #1f2937; } html[data-theme="dark"] .pagy a:not(.gap).current { color: #f9fafb; background-color: #6b7280; } html[data-theme="dark"] .pagy label { background-color: #374151; color: #e5e7eb; } html[data-theme="dark"] .pagy label input { background-color: #1f2937; color: #f3f4f6; } /* Form elements rendered by @tailwindcss/forms get light backgrounds; make them adapt to the dark theme by default. */ html[data-theme="dark"] [type='text'], html[data-theme="dark"] [type='email'], html[data-theme="dark"] [type='url'], html[data-theme="dark"] [type='password'], html[data-theme="dark"] [type='number'], html[data-theme="dark"] [type='date'], html[data-theme="dark"] [type='datetime-local'], html[data-theme="dark"] [type='month'], html[data-theme="dark"] [type='search'], html[data-theme="dark"] [type='tel'], html[data-theme="dark"] [type='time'], html[data-theme="dark"] [type='week'], html[data-theme="dark"] [multiple], html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: #1f2937; color: #f3f4f6; border-color: #4b5563; } html[data-theme="dark"] [type='text']::placeholder, html[data-theme="dark"] [type='email']::placeholder, html[data-theme="dark"] [type='url']::placeholder, html[data-theme="dark"] [type='password']::placeholder, html[data-theme="dark"] [type='number']::placeholder, html[data-theme="dark"] [type='search']::placeholder, html[data-theme="dark"] [type='tel']::placeholder, html[data-theme="dark"] textarea::placeholder { color: #6b7280; } /* Flash highlight color adapted for dark backgrounds */ html[data-theme="dark"] .flash-highlight > td { animation: flash-highlight-dark 2.5s ease-out; } @keyframes flash-highlight-dark { 0% { background-color: rgba(253, 224, 71, 0.35); } 100% { background-color: transparent; } } /* Top navigation: keep the sticky nav opaque in dark mode so page content doesn't scroll through it. The generic .bg-white override above already paints the nav gray-800; this block just ensures the desktop menu list (ul.md:bg-white) matches instead of being transparent. */ @media (min-width: 768px) { html[data-theme="dark"] nav[data-layout-nav] ul.md\:bg-white { background-color: #1f2937 !important; /* gray-800 */ } } /* Zebra-striped tables using the arbitrary variant [&>tr:nth-child(even)]:bg-gray-100 (and similar) generate a compound selector that doesn't match our plain .bg-gray-100 override. Re-tint those rows directly so text stays legible. */ html[data-theme="dark"] tbody[class*="nth-child(even)"] > tr:nth-child(even), html[data-theme="dark"] tbody[class*="nth-child(odd)"] > tr:nth-child(odd) { background-color: #374151 !important; /* gray-700 */ color: #f3f4f6; } /* Theme preference picker (dark mode) */ html[data-theme="dark"] .theme-option:has(:checked) { border-color: #818cf8 !important; /* indigo-400 */ background-color: rgba(99, 102, 241, 0.25) !important; box-shadow: 0 0 0 2px #818cf8; } html[data-theme="dark"] .theme-option:has(:checked) .theme-option__title { color: #eef2ff !important; /* indigo-50 */ } html[data-theme="dark"] .theme-option:has(:checked) .theme-option__description { color: #c7d2fe !important; /* indigo-200 */ } /* Print styles for the question set show page */ @media print { @page { margin: 0.5in; } body:has(.question-set-show) main { padding: 0 !important; margin: 0 !important; } } /* @layer components { .btn-primary { @apply py-2 px-4 bg-blue-200; } } */ .pagy { @apply flex space-x-1 font-semibold text-sm text-gray-500; a:not(.gap) { @apply block rounded-lg px-3 py-1 bg-gray-200; &:hover { @apply bg-gray-300; } &:not([href]) { /* disabled links */ @apply text-gray-300 bg-gray-100 cursor-default; } &.current { @apply text-white bg-gray-400; } } label { @apply inline-block whitespace-nowrap bg-gray-200 rounded-lg px-3 py-0.5; input { @apply bg-gray-100 border-none rounded-md; } } } /* * This is a manifest file that'll be compiled into application.css, which will include all the files * listed below. * * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's * vendor/assets/stylesheets directory can be referenced here using a relative path. * * You're free to add application-wide styles to this file and they'll appear at the bottom of the * compiled file so the styles you add here take precedence over styles defined in any other CSS * files in this directory. Styles in this file should be added after the last require_* statement. * It is generally better to create a new file per style scope. * */