/* Custom styling for the student election system */ /* * Define CSS custom properties for the primary colour and related values. Administrators can * adjust these variables via the theme settings page. The default value corresponds to the * original purple palette used throughout the site. The hover colour is derived using the * brightness filter in the hover state rather than a separate variable. */ :root { --primary-color: #6751f0; --secondary-bg-color: #e8e8f7; --secondary-text-color: #6751f0; } @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); body { font-family: 'Inter', sans-serif; background-color: #f5f6fa; color: #2a2e33; } /* Navigation gradient used for top bars */ .nav-gradient { background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%); color: #fff; } /* Generic card styling */ .card { background-color: #ffffff; border-radius: 0.75rem; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05); padding: 1.5rem; } .card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; } .btn-primary { background-color: var(--primary-color); color: #ffffff; padding: 0.5rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s; } .btn-primary:hover { /* Slightly darken the primary colour on hover via brightness filter */ background-color: var(--primary-color); filter: brightness(90%); } .btn-secondary { background-color: var(--secondary-bg-color); color: var(--primary-color); padding: 0.5rem 1rem; border-radius: 0.375rem; transition: background-color 0.2s; } .btn-secondary:hover { /* Lighten the secondary button background on hover */ background-color: var(--secondary-bg-color); filter: brightness(105%); } /* Dark mode styles. When the element has the class "dark" * applied (toggled via JavaScript), these colours override the * defaults to provide a high‑contrast, eye‑friendly theme. Feel free * to tweak the palette to suit your brand identity. */ /* Dark mode overrides. * * These rules reuse the same CSS variables defined on :root for the * primary and secondary colours so that when an administrator * changes the theme colour via the settings page, the dark theme * adapts automatically. Backgrounds remain darker to maintain * appropriate contrast but all coloured accents derive from the * variables rather than hard‑coded values. */ body.dark { background-color: #1a202c; color: #e2e8f0; } body.dark .nav-gradient { /* Use the primary colour for the gradient in dark mode as well */ background: linear-gradient(90deg, var(--primary-color) 0%, var(--primary-color) 100%); color: #f7fafc; } body.dark .card { background-color: #2d3748; color: #e2e8f0; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4); } body.dark .btn-primary { background-color: var(--primary-color); color: #ffffff; } body.dark .btn-primary:hover { /* Slightly darken the button on hover using brightness filter */ background-color: var(--primary-color); filter: brightness(90%); } body.dark .btn-secondary { background-color: var(--secondary-bg-color); color: var(--primary-color); } body.dark .btn-secondary:hover { background-color: var(--secondary-bg-color); filter: brightness(105%); } /* Dark mode form inputs and backgrounds */ body.dark input, body.dark select, body.dark textarea { background-color: #4a5568; border-color: #718096; color: #e2e8f0; } body.dark input:focus, body.dark select:focus, body.dark textarea:focus { outline: none; border-color: #a0aec0; } body.dark .bg-white { background-color: #2d3748 !important; color: #e2e8f0; } body.dark .text-gray-600 { color: #a0aec0 !important; } /* * Override specific Tailwind indigo utility classes to use the primary * theme variables instead of hard‑coded purple values. This makes * navigation links, sidebar items and other components automatically * adopt the administrator‑configured colour across both light and dark * themes. We override the hover variants using the escaped colon * syntax (e.g. `.hover\:text-indigo-700:hover`) because Tailwind * escapes pseudo‑classes with backslashes when compiled to CSS. */ .text-indigo-600, .text-indigo-700, .text-indigo-800 { color: var(--primary-color) !important; } .bg-indigo-50, .bg-indigo-100 { background-color: var(--secondary-bg-color) !important; } /* Hover background override for indigo */ .hover\:bg-indigo-100:hover { background-color: var(--secondary-bg-color) !important; /* brighten slightly on hover */ filter: brightness(105%); } /* Hover text colour overrides for indigo */ .hover\:text-indigo-700:hover, .hover\:text-indigo-600:hover { color: var(--primary-color) !important; }