390 lines
9.2 KiB
CSS
390 lines
9.2 KiB
CSS
/* public/css/style.css */
|
|
|
|
/* Import Montserrat font from Google Fonts */
|
|
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
|
|
|
|
/* CSS Variables for theme colors */
|
|
:root {
|
|
--primary-btn-color: #fc9729;
|
|
--primary-btn-hover-color: #df8925;
|
|
--primary-text-color: #fc9729;
|
|
}
|
|
|
|
/* Apply Montserrat to the body and ensure Tailwind's base is applied */
|
|
body {
|
|
font-family: 'Montserrat', sans-serif;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
/* Custom styles for the range slider thumb (cannot be purely inline Tailwind) */
|
|
/* Shared across browsers for consistency */
|
|
input[type="range"] {
|
|
-webkit-appearance: none; /* Safari, Chrome */
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 8px; /* Track height */
|
|
background: #E5E7EB; /* Track color */
|
|
border-radius: 9999px; /* Rounded track */
|
|
outline: none; /* Remove default focus outline */
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Thumb for Webkit (Chrome, Safari) */
|
|
input[type="range"]::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 9999px; /* Fully rounded thumb */
|
|
background: var(--primary-btn-color); /* Thumb color (orange-600) */
|
|
border: 2px solid white; /* White border */
|
|
cursor: grab;
|
|
margin-top: -4px; /* Center thumb vertically on track */
|
|
box-shadow: 0 0 0 2px rgba(252, 151, 41, 0.3); /* Subtle focus ring */
|
|
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
/* Thumb for Firefox */
|
|
input[type="range"]::-moz-range-thumb {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 9999px;
|
|
background: var(--primary-btn-color);
|
|
border: 2px solid white;
|
|
cursor: grab;
|
|
box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.3);
|
|
transition: background 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
/* Hover state for thumb */
|
|
input[type="range"]::-webkit-slider-thumb:hover {
|
|
background: var(--primary-btn-hover-color); /* indigo-700 */
|
|
}
|
|
input[type="range"]::-moz-range-thumb:hover {
|
|
background: var(--primary-btn-hover-color);
|
|
}
|
|
|
|
/* Focus state for thumb */
|
|
input[type="range"]::-webkit-slider-thumb:focus {
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
|
|
}
|
|
input[type="range"]::-moz-range-thumb:focus {
|
|
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.5);
|
|
}
|
|
|
|
/* Track for Webkit */
|
|
input[type="range"]::-webkit-slider-runnable-track {
|
|
background: #E5E7EB;
|
|
border-radius: 9999px;
|
|
height: 8px;
|
|
}
|
|
|
|
/* Track for Firefox */
|
|
input[type="range"]::-moz-range-track {
|
|
background: #E5E7EB;
|
|
border-radius: 9999px;
|
|
height: 8px;
|
|
}
|
|
|
|
/* Hide default checkbox */
|
|
.peer {
|
|
display: none;
|
|
}
|
|
/* Style for the custom toggle switch div */
|
|
.peer + div {
|
|
position: relative;
|
|
width: 44px; /* w-11 */
|
|
height: 24px; /* h-6 */
|
|
background-color: #E5E7EB; /* gray-200 */
|
|
border-radius: 9999px; /* rounded-full */
|
|
transition: background-color 0.2s ease-in-out;
|
|
}
|
|
/* Style for the toggle switch circle (after pseudo-element) */
|
|
.peer + div::after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 2px;
|
|
left: 2px;
|
|
width: 20px; /* h-5, w-5 */
|
|
height: 20px;
|
|
background-color: white;
|
|
border-radius: 9999px;
|
|
border: 1px solid #D1D5DB; /* gray-300 */
|
|
transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
|
|
}
|
|
/* Styles when checkbox is checked */
|
|
.peer:checked + div {
|
|
background-color: var(--primary-btn-color); /* indigo-600 */
|
|
}
|
|
.peer:checked + div::after {
|
|
transform: translateX(20px); /* Move 20px to the right */
|
|
border-color: white;
|
|
}
|
|
/* Focus ring for accessibility */
|
|
.peer:focus + div {
|
|
outline: none;
|
|
box-shadow: 0 0 0 3px rgba(251, 146, 60, 0.4); /* orange-300 with transparency */
|
|
}
|
|
|
|
/* Dark Mode Toggle Button Styling */
|
|
.dark-mode-toggle {
|
|
position: fixed;
|
|
top: 20px;
|
|
right: 20px;
|
|
z-index: 1000;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: var(--primary-btn-color);
|
|
border: none;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
|
|
color: #000;
|
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
}
|
|
|
|
.dark-mode .dark-mode-toggle {
|
|
color: #fff;
|
|
background-color: var(--primary-btn-color);
|
|
}
|
|
|
|
/* Dark Mode Styles */
|
|
.dark-mode {
|
|
background-color: #1e1e1e !important;
|
|
color: #f5f5f5;
|
|
}
|
|
|
|
.dark-mode body,
|
|
body.dark-mode {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
|
|
/* Force override any remaining gray backgrounds */
|
|
body.dark-mode.bg-gray-100 {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
|
|
.dark-mode header {
|
|
background-color: #2a2a2a;
|
|
border-color: #444;
|
|
}
|
|
|
|
.dark-mode main {
|
|
background-color: #1e1e1e;
|
|
}
|
|
|
|
.dark-mode .bg-gray-50 {
|
|
background-color: #2a2a2a !important;
|
|
border-color: #444 !important;
|
|
}
|
|
|
|
.dark-mode .bg-gray-100,
|
|
.dark-mode.bg-gray-100 {
|
|
background-color: #1e1e1e !important;
|
|
}
|
|
|
|
.dark-mode .text-gray-700 {
|
|
color: #d1d5db !important;
|
|
}
|
|
|
|
.dark-mode .text-gray-900 {
|
|
color: #f5f5f5 !important;
|
|
}
|
|
|
|
.dark-mode .border-gray-300 {
|
|
border-color: #444 !important;
|
|
}
|
|
|
|
.dark-mode .border-gray-400 {
|
|
border-color: #555 !important;
|
|
}
|
|
|
|
.dark-mode .bg-white {
|
|
background-color: #2a2a2a !important;
|
|
color: #f5f5f5 !important;
|
|
}
|
|
|
|
.dark-mode .bg-gray-200 {
|
|
background-color: #404040 !important;
|
|
}
|
|
|
|
.dark-mode input[type="text"],
|
|
.dark-mode textarea,
|
|
.dark-mode select {
|
|
background-color: #2a2a2a !important;
|
|
color: #f5f5f5 !important;
|
|
border-color: #444 !important;
|
|
}
|
|
|
|
.dark-mode input[type="text"]:focus,
|
|
.dark-mode textarea:focus,
|
|
.dark-mode select:focus {
|
|
border-color: var(--primary-btn-color) !important;
|
|
box-shadow: 0 0 0 3px rgba(252, 151, 41, 0.3) !important;
|
|
}
|
|
|
|
.dark-mode .text-orange-600,
|
|
.dark-mode .text-orange-700 {
|
|
color: var(--primary-text-color) !important;
|
|
}
|
|
|
|
.dark-mode input[type="range"] {
|
|
background: #404040;
|
|
}
|
|
|
|
.dark-mode input[type="range"]::-webkit-slider-runnable-track {
|
|
background: #404040;
|
|
}
|
|
|
|
.dark-mode input[type="range"]::-moz-range-track {
|
|
background: #404040;
|
|
}
|
|
|
|
.dark-mode .border-gray-200 {
|
|
border-color: #444 !important;
|
|
}
|
|
|
|
/* Fix button colors in dark mode */
|
|
.dark-mode .bg-orange-600 {
|
|
background-color: var(--primary-btn-color) !important;
|
|
}
|
|
|
|
.dark-mode .hover\:bg-orange-700:hover {
|
|
background-color: var(--primary-btn-hover-color) !important;
|
|
}
|
|
|
|
/* Override Tailwind orange colors with our custom colors */
|
|
.text-orange-600,
|
|
.text-orange-700,
|
|
.text-orange-800 {
|
|
color: var(--primary-text-color) !important;
|
|
}
|
|
|
|
.bg-orange-600 {
|
|
background-color: var(--primary-btn-color) !important;
|
|
}
|
|
|
|
.hover\:bg-orange-700:hover {
|
|
background-color: var(--primary-btn-hover-color) !important;
|
|
}
|
|
|
|
.border-orange-500 {
|
|
border-color: var(--primary-btn-color) !important;
|
|
}
|
|
|
|
.bg-orange-50 {
|
|
background-color: rgba(252, 151, 41, 0.1) !important;
|
|
}
|
|
|
|
.focus\:ring-orange-500:focus {
|
|
--tw-ring-color: rgba(252, 151, 41, 0.3) !important;
|
|
}
|
|
|
|
.focus\:border-orange-500:focus {
|
|
border-color: var(--primary-btn-color) !important;
|
|
}
|
|
|
|
/* Fix text colors that should stay orange in dark mode */
|
|
.dark-mode .text-orange-600,
|
|
.dark-mode .text-orange-700,
|
|
.dark-mode .text-orange-800 {
|
|
color: var(--primary-text-color) !important;
|
|
}
|
|
|
|
/* More comprehensive dark mode overrides */
|
|
.dark-mode .bg-white,
|
|
.dark-mode details {
|
|
background-color: #2a2a2a !important;
|
|
color: #f5f5f5 !important;
|
|
}
|
|
|
|
.dark-mode .border-gray-200,
|
|
.dark-mode .border-gray-300 {
|
|
border-color: #444 !important;
|
|
}
|
|
|
|
.dark-mode .text-gray-500,
|
|
.dark-mode .text-gray-600 {
|
|
color: #d1d5db !important;
|
|
}
|
|
|
|
.dark-mode summary {
|
|
color: var(--primary-text-color) !important;
|
|
}
|
|
|
|
.dark-mode .shadow-sm,
|
|
.dark-mode .shadow-md {
|
|
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3) !important;
|
|
}
|
|
|
|
/* Fix image upload zone in dark mode */
|
|
.dark-mode #image-upload-zone {
|
|
background-color: #2a2a2a !important;
|
|
border-color: #555 !important;
|
|
}
|
|
|
|
.dark-mode #image-upload-zone .text-gray-500 {
|
|
color: #d1d5db !important;
|
|
}
|
|
|
|
/* Force button styling with maximum specificity */
|
|
button#logout-btn {
|
|
background-color: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
button#logout-btn:hover {
|
|
background-color: #b91c1c !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
button#login-btn {
|
|
background-color: #2563eb !important;
|
|
color: #ffffff !important;
|
|
border: none !important;
|
|
background-image: none !important;
|
|
}
|
|
|
|
button#login-btn:hover {
|
|
background-color: #1d4ed8 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Dark mode variants */
|
|
.dark-mode button#logout-btn.bg-red-600 {
|
|
background-color: #dc2626 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark-mode button#logout-btn.bg-red-600:hover {
|
|
background-color: #b91c1c !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark-mode button#login-btn.bg-blue-600 {
|
|
background-color: #2563eb !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
.dark-mode button#login-btn.bg-blue-600:hover {
|
|
background-color: #1d4ed8 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
/* Add missing Tailwind utility classes for other elements */
|
|
.bg-red-500 {
|
|
background-color: #ef4444 !important;
|
|
}
|
|
|
|
.hover\:bg-red-600:hover {
|
|
background-color: #dc2626 !important;
|
|
}
|
|
|
|
.text-white {
|
|
color: #ffffff !important;
|
|
}
|