@import url('https://rsms.me/inter/inter.css'); @import 'tailwindcss'; @plugin "@tailwindcss/typography"; @import 'flowbite/src/themes/default'; @tailwind base; @tailwind components; @tailwind utilities; :root { --tblr-font-sans-serif: 'Inter Var', -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif; /* Default theme: blue-700 */ --color-primary-700: #1d4ed8; --color-primary-600: #2563eb; --color-primary-50: #eff6ff; } /* ===== COLOR SWATCH: force background regardless of dark mode ===== */ /* Uses [data-color] attribute which is set via Vue binding */ .dark .color-swatch[data-color], .color-swatch[data-color] { background-color: attr(data-color) !important; } /* Fallback: use the CSS variable set as --swatch-bg on the element */ .dark .color-swatch { background-color: var(--swatch-bg) !important; } /* ===================================================== ADMIN THEME COLOR OVERRIDES When Admin ThemeSettings sets [data-theme-color] on ===================================================== */ [data-theme-color] .bg-blue-50 { background-color: var(--color-primary-50) !important; } [data-theme-color] .text-blue-600 { color: var(--color-primary-600) !important; } [data-theme-color] .bg-blue-600 { background-color: var(--color-primary-600) !important; } [data-theme-color] .hover\:bg-blue-700:hover { background-color: var(--color-primary-700) !important; } /* ===================================================== PORTAL (LANDING) COLOR OVERRIDES Strictly scoped to [data-portal-theme] wrapper ===================================================== */ [data-portal-theme] .bg-blue-50 { background-color: var(--portal-primary-50) !important; } [data-portal-theme] .text-blue-600 { color: var(--portal-primary-600) !important; } [data-portal-theme] .hover\:text-blue-600:hover { color: var(--portal-primary-600) !important; } [data-portal-theme] .bg-blue-600 { background-color: var(--portal-primary-600) !important; } [data-portal-theme] .bg-blue-700, [data-portal-theme] .hover\:bg-blue-700:hover { background-color: var(--portal-primary-700) !important; } [data-portal-theme] .border-blue-600 { border-color: var(--portal-primary-600) !important; } [data-portal-theme] .focus\:ring-blue-500:focus, [data-portal-theme] .focus\:border-blue-500:focus { --tw-ring-color: var(--portal-primary-600); border-color: var(--portal-primary-600) !important; } /* Portal NProgress bar */ [data-portal-theme] #nprogress .bar { background: var(--portal-primary-600) !important; } [data-portal-theme] #nprogress .peg { box-shadow: 0 0 10px var(--portal-primary-600), 0 0 5px var(--portal-primary-600) !important; } [data-portal-theme] #nprogress .spinner-icon { border-top-color: var(--portal-primary-600) !important; border-left-color: var(--portal-primary-600) !important; } html { font-size: 15px; } body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #f2f4f7; } /* Dark mode overrides */ .dark body { /* Facebook-like dark background */ background-color: #18191a; /* page background */ color: #e4e6eb; /* general text color */ } /* Ensure the main app wrapper and layout also get a dark background when html has .dark. Some build pipelines may strip global "body" overrides, or components use their own background utilities — add these as a safety-net to make the background visibly dark. */ .dark #app, .dark .sidebar-layout { background-color: #18191a !important; } .dark .main-content { /* let main content area be transparent so the page background shows through */ background-color: transparent !important; } .dark .topbar, .dark .topbar-layout, .dark .topbar-dropdown { background-color: #242526; /* header/topbar background */ color: #e4e6eb; } .dark .sidebar { background-color: #1f2326; /* sidebar background */ color: #e4e6eb; } .dark .content-card, .dark .menu-item, .dark .menu-item.active { background-color: #242526; /* cards and items */ color: #e4e6eb; } .dark .menu-item:hover, .dark .topbar-dropdown-item:hover, .dark .submenu-item:hover { background-color: #323334; color: #dbeafe; } .dark .menu-item .menu-icon svg, .dark .topbar-item svg { color: #b5c7db; } /* Broad utility overrides to make dark mode visible even if components still use tailwind utility classes */ .dark .bg-white { /* force components using bg-white to become dark */ background-color: #242526 !important; } .dark .bg-blue-50 { background-color: rgba(59, 130, 246, 0.06) !important; } .dark .text-gray-800, .dark .text-gray-700, .dark .text-gray-600, .dark .text-gray-500, .dark .text-gray-400, .dark .text-gray-300 { color: #e4e6eb !important; } .dark .border-gray-200, .dark .border-gray-100, .dark .border-gray-300 { border-color: #3a3b3c !important; } .dark .rounded-xl { background-clip: padding-box; } button { cursor: pointer; } .scrollbar-hide { -ms-overflow-style: none; /* IE 10+ */ scrollbar-width: none; /* Firefox */ } .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari, Edge */ } .sidebar-layout { display: flex; width: 100%; } .sidebar { width: 260px; background: white; box-shadow: 0 0 15px rgba(0, 0, 0, 0.08); height: 100vh; position: sticky; top: 0; overflow-y: auto; transition: transform 0.3s ease, width 0.3s ease; z-index: 40; } /* Responsive: stack sidebar above content on small screens so layout fits mobile */ @media (max-width: 768px) { .sidebar-layout { flex-direction: column; align-items: stretch; } .sidebar { width: 100%; height: auto; position: relative; top: auto; box-shadow: none; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .sidebar-content { padding: 0.75rem 0.75rem; } .main-content { padding: 1rem; } } .sidebar-content { padding: 1.5rem 1rem; } .main-content { flex: 1; padding: 1.5rem; overflow-x: auto; } /* Topbar layout styles */ .topbar-layout { display: flex; flex-direction: column; width: 100%; } .topbar { background: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); padding: 1rem 1.5rem; position: sticky; top: 0; z-index: 40; } /* Toggle switch styling */ .layout-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 50; display: flex; align-items: center; gap: 0.5rem; background: white; padding: 0.75rem 1rem; border-radius: 50px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .toggle-label { font-size: 0.875rem; font-weight: 500; color: #4b5563; } .switch { position: relative; display: inline-block; width: 50px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #e5e7eb; transition: 0.4s; border-radius: 24px; } .slider:before { position: absolute; content: ''; height: 16px; width: 16px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #3b82f6; } input:checked + .slider:before { transform: translateX(26px); } /* Menu styling */ .logo { margin-bottom: 2rem; padding: 0 0.5rem; } .logo img { max-width: 140px; height: auto; } .menu-item { display: flex; align-items: center; padding: 0.75rem 1rem; border-radius: 8px; margin-bottom: 0.25rem; color: #4b5563; text-decoration: none; transition: all 0.2s ease; cursor: pointer; } .menu-item:hover { background-color: #f3f4f6; color: #3b82f6; } .menu-item.active { background-color: #eff6ff; color: #3b82f6; font-weight: 500; } .menu-icon { margin-right: 0.75rem; width: 20px; height: 20px; } .menu-title { flex: 1; } .menu-arrow { transition: transform 0.3s ease; } .menu-arrow.rotated { transform: rotate(180deg); } .submenu { padding-left: 2.25rem; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .submenu.open { max-height: 500px; } .submenu-item { display: block; padding: 0.6rem 0; color: #6b7280; text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .submenu-item:hover, .submenu-item.active { color: #3b82f6; } /* Topbar menu styling */ .topbar-menu { display: flex; align-items: center; gap: 1.5rem; } .topbar-item { position: relative; padding: 0.5rem 0; color: #4b5563; text-decoration: none; font-weight: 500; font-size: 0.95rem; cursor: pointer; } .topbar-item:hover, .topbar-item.active { color: #3b82f6; } .topbar-dropdown { position: absolute; top: 100%; left: 0; background: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border-radius: 8px; padding: 0.5rem 0; min-width: 180px; z-index: 50; display: none; } .topbar-item:hover .topbar-dropdown { display: block; } .topbar-dropdown-item { display: block; padding: 0.6rem 1rem; color: #4b5563; text-decoration: none; font-size: 0.875rem; transition: all 0.2s ease; } .topbar-dropdown-item:hover { background-color: #f3f4f6; color: #3b82f6; } /* Content card styling */ .content-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); padding: 1.5rem; margin-bottom: 1.5rem; } .card-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; color: #111827; } /* Responsive adjustments */ @media (max-width: 768px) { .sidebar-layout { flex-direction: column; } .sidebar { width: 100%; height: auto; position: relative; } .topbar-menu { flex-wrap: wrap; gap: 1rem; } .layout-toggle { bottom: 1rem; right: 1rem; } } /* NProgress Custom Styling */ #nprogress .bar { background: #006aff !important; height: 3px !important; } #nprogress .peg { box-shadow: 0 0 10px #006aff, 0 0 5px #006aff !important; } #nprogress .spinner-icon { border-top-color: #006aff !important; border-left-color: #006aff !important; } /* Prevent iOS zoom on focus */ @media screen and (max-width: 768px) { input, select, textarea { font-size: 14px !important; } } /* Responsive adjustments for WYSIWYG content (TinyMCE) */ .prose img { max-width: 100% !important; height: auto !important; border-radius: 0.5rem; } .prose iframe, .prose video { width: 100% !important; max-width: 100% !important; aspect-ratio: 16 / 9 !important; height: auto !important; border-radius: 0.5rem; }