feat: redesign superadmin agencies list, implement flat design, add date filters, and fix UI bugs
This commit is contained in:
Erik Silva
@@ -17,6 +17,11 @@ html.dark {
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
html.dark body {
|
||||
background-color: #0f172a;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-brand-500);
|
||||
color: var(--color-text-inverse);
|
||||
@@ -68,4 +73,275 @@ html.dark {
|
||||
.shadow-brand-20 {
|
||||
box-shadow: 0 10px 15px -3px var(--color-brand-shadow-20), 0 4px 6px -4px var(--color-brand-shadow-20);
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== Animations ========== */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeInUp {
|
||||
animation: fadeInUp 0.4s ease-out forwards;
|
||||
}
|
||||
|
||||
/* ========== Dark Mode Override ========== */
|
||||
/* Force dark mode styles outside Tailwind layers to ensure they work */
|
||||
|
||||
/* Base colors */
|
||||
html.dark body {
|
||||
background-color: #09090b !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark main {
|
||||
background-color: #09090b !important;
|
||||
}
|
||||
|
||||
/* Sections */
|
||||
html.dark section {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark section.bg-white,
|
||||
html.dark section[class*="bg-white"] {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark section.bg-zinc-50,
|
||||
html.dark section[class*="bg-zinc-50"] {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
/* Preserve gradient text by not applying color to elements with bg-clip-text */
|
||||
html.dark h1:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h2:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h3:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h4:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h5:not([class*="bg-clip-text"]):not([class*="text-transparent"]),
|
||||
html.dark h6:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark p:not([class*="bg-clip-text"]):not([class*="text-transparent"]) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Gradient text should remain transparent */
|
||||
html.dark .text-transparent {
|
||||
color: transparent !important;
|
||||
-webkit-text-fill-color: transparent !important;
|
||||
}
|
||||
|
||||
/* Ensure gradients work in dark mode */
|
||||
html.dark .bg-clip-text {
|
||||
-webkit-background-clip: text !important;
|
||||
background-clip: text !important;
|
||||
}
|
||||
|
||||
/* Force gradient backgrounds to be visible */
|
||||
html.dark [class*="from-emerald"],
|
||||
html.dark [class*="from-blue"],
|
||||
html.dark [class*="from-purple"],
|
||||
html.dark [class*="from-orange"],
|
||||
html.dark [class*="from-indigo"],
|
||||
html.dark [class*="from-pink"],
|
||||
html.dark [class*="to-teal"],
|
||||
html.dark [class*="to-cyan"],
|
||||
html.dark [class*="to-rose"] {
|
||||
/* Preserve gradient colors */
|
||||
}
|
||||
|
||||
html.dark .text-zinc-900:not(.text-transparent) {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-600:not(.text-transparent),
|
||||
html.dark .text-zinc-700:not(.text-transparent) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-500:not(.text-transparent) {
|
||||
color: #a1a1aa !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-400:not(.text-transparent) {
|
||||
color: #a1a1aa !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-300:not(.text-transparent) {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark .text-zinc-200:not(.text-transparent) {
|
||||
color: #e4e4e7 !important;
|
||||
}
|
||||
|
||||
/* Cards & containers */
|
||||
html.dark .bg-white {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-50 {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white\/80 {
|
||||
background-color: rgba(24, 24, 27, 0.8) !important;
|
||||
}
|
||||
|
||||
html.dark .bg-white\/60 {
|
||||
background-color: rgba(24, 24, 27, 0.6) !important;
|
||||
}
|
||||
|
||||
/* Borders */
|
||||
html.dark .border-zinc-100 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-300 {
|
||||
border-color: #52525b !important;
|
||||
}
|
||||
|
||||
html.dark .border-zinc-800 {
|
||||
border-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
html.dark button.border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
background-color: #18181b !important;
|
||||
color: #f8fafc !important;
|
||||
}
|
||||
|
||||
html.dark a.border-zinc-200,
|
||||
html.dark a.border-2.border-zinc-200 {
|
||||
border-color: #52525b !important;
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
html.dark a.border-zinc-300 {
|
||||
border-color: #52525b !important;
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
html.dark header {
|
||||
background-color: rgba(9, 9, 11, 0.8) !important;
|
||||
border-color: rgba(63, 63, 70, 0.7) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-white\/90 {
|
||||
background-color: rgba(9, 9, 11, 0.9) !important;
|
||||
}
|
||||
|
||||
html.dark header button.border-zinc-200 {
|
||||
border-color: #3f3f46 !important;
|
||||
}
|
||||
|
||||
html.dark header .text-zinc-600,
|
||||
html.dark header .text-zinc-700 {
|
||||
color: #d4d4d8 !important;
|
||||
}
|
||||
|
||||
/* Mega menu - full width dropdown */
|
||||
html.dark header .group:hover .fixed {
|
||||
background-color: rgba(9, 9, 11, 0.95) !important;
|
||||
}
|
||||
|
||||
/* Mobile menu */
|
||||
html.dark header .bg-white\/95 {
|
||||
background-color: rgba(9, 9, 11, 0.95) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-zinc-100\/70 {
|
||||
background-color: rgba(39, 39, 42, 0.7) !important;
|
||||
}
|
||||
|
||||
html.dark header .bg-zinc-900\/95 {
|
||||
background-color: rgba(24, 24, 27, 0.95) !important;
|
||||
}
|
||||
|
||||
/* Footer - sempre escuro mas ajusta no dark */
|
||||
html.dark footer.bg-zinc-900 {
|
||||
background-color: #000000 !important;
|
||||
}
|
||||
|
||||
html.dark footer .bg-zinc-800 {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark footer .border-zinc-800 {
|
||||
border-color: #27272a !important;
|
||||
}
|
||||
|
||||
/* Solution pages specific fixes */
|
||||
html.dark .bg-zinc-800 {
|
||||
background-color: #27272a !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-900 {
|
||||
background-color: #18181b !important;
|
||||
}
|
||||
|
||||
html.dark .bg-zinc-950 {
|
||||
background-color: #09090b !important;
|
||||
}
|
||||
|
||||
/* Ensure colored backgrounds remain visible in dark mode */
|
||||
html.dark .bg-emerald-50,
|
||||
html.dark .bg-blue-50,
|
||||
html.dark .bg-purple-50,
|
||||
html.dark .bg-orange-50,
|
||||
html.dark .bg-indigo-50,
|
||||
html.dark .bg-pink-50,
|
||||
html.dark .bg-red-50 {
|
||||
background-color: rgba(var(--tw-bg-opacity, 1)) !important;
|
||||
}
|
||||
|
||||
/* Keep gradient backgrounds intact */
|
||||
html.dark [class*="bg-gradient-to"] {
|
||||
background-image: var(--tw-gradient-stops) !important;
|
||||
}
|
||||
|
||||
/* Preserve brand colors */
|
||||
html.dark .bg-brand,
|
||||
html.dark .bg-emerald-600,
|
||||
html.dark .bg-blue-600,
|
||||
html.dark .bg-purple-600,
|
||||
html.dark .bg-orange-600,
|
||||
html.dark .bg-indigo-600,
|
||||
html.dark .bg-pink-600,
|
||||
html.dark .bg-emerald-500,
|
||||
html.dark .bg-blue-500,
|
||||
html.dark .bg-purple-500,
|
||||
html.dark .bg-orange-500,
|
||||
html.dark .bg-indigo-500,
|
||||
html.dark .bg-pink-500,
|
||||
html.dark .bg-red-500,
|
||||
html.dark .bg-red-600,
|
||||
html.dark .bg-yellow-500,
|
||||
html.dark .bg-zinc-900 {
|
||||
/* Don't override brand colors */
|
||||
}
|
||||
|
||||
/* Text on colored backgrounds should remain white */
|
||||
html.dark .bg-emerald-600 *,
|
||||
html.dark .bg-blue-600 *,
|
||||
html.dark .bg-purple-600 *,
|
||||
html.dark .bg-orange-600 *,
|
||||
html.dark .bg-indigo-600 *,
|
||||
html.dark .bg-pink-600 * {
|
||||
/* Preserve text colors on colored backgrounds */
|
||||
}
|
||||
Reference in New Issue
Block a user