145 lines
2.2 KiB
CSS
Executable File
145 lines
2.2 KiB
CSS
Executable File
/* Dark mode styles for landing page settings */
|
|
|
|
/* Base styles for dark mode */
|
|
.dark body {
|
|
background-color: #111827;
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
/* Card and container styles */
|
|
.dark .bg-white {
|
|
background-color: #1f2937;
|
|
}
|
|
|
|
.dark .border-gray-200 {
|
|
border-color: #374151;
|
|
}
|
|
|
|
.dark .shadow-sm {
|
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* Text styles */
|
|
.dark .text-gray-900 {
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
.dark .text-gray-700 {
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.dark .text-gray-600 {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.dark .text-gray-500 {
|
|
color: #6b7280;
|
|
}
|
|
|
|
/* Form elements */
|
|
.dark input,
|
|
.dark textarea,
|
|
.dark select {
|
|
background-color: #111827;
|
|
border-color: #4b5563;
|
|
color: #f3f4f6;
|
|
}
|
|
|
|
.dark input::placeholder,
|
|
.dark textarea::placeholder {
|
|
color: #6b7280;
|
|
}
|
|
|
|
.dark input:focus,
|
|
.dark textarea:focus,
|
|
.dark select:focus {
|
|
border-color: var(--theme-color);
|
|
box-shadow: 0 0 0 2px rgba(var(--theme-color-rgb), 0.2);
|
|
}
|
|
|
|
/* Button styles */
|
|
.dark .btn-outline,
|
|
.dark button[variant="outline"] {
|
|
border-color: #4b5563;
|
|
color: #d1d5db;
|
|
}
|
|
|
|
.dark .btn-outline:hover,
|
|
.dark button[variant="outline"]:hover {
|
|
background-color: #374151;
|
|
}
|
|
|
|
/* Icon backgrounds */
|
|
.dark .bg-blue-100 {
|
|
background-color: rgba(59, 130, 246, 0.2);
|
|
}
|
|
|
|
.dark .bg-green-100 {
|
|
background-color: rgba(16, 185, 129, 0.2);
|
|
}
|
|
|
|
.dark .bg-purple-100 {
|
|
background-color: rgba(139, 92, 246, 0.2);
|
|
}
|
|
|
|
.dark .bg-orange-100 {
|
|
background-color: rgba(249, 115, 22, 0.2);
|
|
}
|
|
|
|
.dark .bg-red-100 {
|
|
background-color: rgba(239, 68, 68, 0.2);
|
|
}
|
|
|
|
.dark .bg-gray-50 {
|
|
background-color: #1f2937;
|
|
}
|
|
|
|
/* Icon colors */
|
|
.dark .text-blue-600 {
|
|
color: #60a5fa;
|
|
}
|
|
|
|
.dark .text-green-600 {
|
|
color: #34d399;
|
|
}
|
|
|
|
.dark .text-purple-600 {
|
|
color: #a78bfa;
|
|
}
|
|
|
|
.dark .text-orange-600 {
|
|
color: #fb923c;
|
|
}
|
|
|
|
.dark .text-red-600 {
|
|
color: #f87171;
|
|
}
|
|
|
|
/* Preview sections */
|
|
.dark .preview-section {
|
|
background-color: #1f2937;
|
|
border-color: #374151;
|
|
}
|
|
|
|
.dark .preview-content {
|
|
background-color: #111827;
|
|
}
|
|
|
|
/* Switch component */
|
|
.dark .switch {
|
|
background-color: #4b5563;
|
|
}
|
|
|
|
.dark .switch[aria-checked="true"] {
|
|
background-color: var(--theme-color);
|
|
}
|
|
|
|
/* Progress bar */
|
|
.dark .progress-bg {
|
|
background-color: #374151;
|
|
}
|
|
|
|
/* Separator */
|
|
.dark .separator {
|
|
background-color: #374151;
|
|
} |