/* ============================================================ Sleek Theme — Modern, Rounded, Colourful Activates when is set. Overrides the flat O365 defaults with a premium feel. ============================================================ */ /* --- Sleek CSS Variables --- */ [data-theme="sleek"] { /* Primary brand — professional royal blue */ --sleek-primary: #1a6bc7; --sleek-primary-dark: #155ea8; --sleek-primary-light: #2b7dd4; --sleek-primary-bg: #e8f1fb; /* Sidebar */ --sleek-sidebar-bg: #0f172a; --sleek-sidebar-width: 200px; /* Surface colours */ --sleek-surface: #ffffff; --sleek-surface-alt: #f8fafc; --sleek-body-bg: #f1f5f9; /* Borders */ --sleek-border: #e2e8f0; /* Shadows */ --sleek-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .06); --sleek-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06); --sleek-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05); --sleek-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04); } /* ── Body & Background ── */ [data-theme="sleek"] body { background-color: var(--sleek-body-bg) !important; font-family: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* ── Typography ── */ [data-theme="sleek"] h1 { font-size: 24px !important; } [data-theme="sleek"] h2 { font-size: 20px !important; } [data-theme="sleek"] h3 { font-size: 16px !important; } [data-theme="sleek"] h4 { font-size: 14px !important; } /* Restore Tailwind text sizes */ [data-theme="sleek"] .text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; } [data-theme="sleek"] .text-3xl { font-size: 1.875rem !important; line-height: 2.25rem !important; } [data-theme="sleek"] .text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; } [data-theme="sleek"] .text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; } [data-theme="sleek"] .text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; } [data-theme="sleek"] .text-base { font-size: 1rem !important; line-height: 1.5rem !important; } [data-theme="sleek"] .text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; } [data-theme="sleek"] .text-xs { font-size: 0.75rem !important; line-height: 1rem !important; } /* ── Spacing — restore Tailwind defaults ── */ [data-theme="sleek"] .p-4 { padding: 1rem !important; } [data-theme="sleek"] .p-5 { padding: 1.25rem !important; } [data-theme="sleek"] .p-6 { padding: 1.5rem !important; } [data-theme="sleek"] .p-8 { padding: 2rem !important; } [data-theme="sleek"] .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } [data-theme="sleek"] .px-8 { padding-left: 2rem !important; padding-right: 2rem !important; } [data-theme="sleek"] .py-2\.5 { padding-top: 0.625rem !important; padding-bottom: 0.625rem !important; } [data-theme="sleek"] .py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; } [data-theme="sleek"] .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } [data-theme="sleek"] .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } [data-theme="sleek"] .py-8 { padding-top: 2rem !important; padding-bottom: 2rem !important; } [data-theme="sleek"] .gap-3 { gap: 0.75rem !important; } [data-theme="sleek"] .gap-4 { gap: 1rem !important; } [data-theme="sleek"] .gap-6 { gap: 1.5rem !important; } [data-theme="sleek"] .gap-8 { gap: 2rem !important; } [data-theme="sleek"] .space-y-2>*+* { margin-top: 0.5rem !important; } [data-theme="sleek"] .space-y-3>*+* { margin-top: 0.75rem !important; } [data-theme="sleek"] .space-y-4>*+* { margin-top: 1rem !important; } [data-theme="sleek"] .space-y-6>*+* { margin-top: 1.5rem !important; } [data-theme="sleek"] .space-y-8>*+* { margin-top: 2rem !important; } /* ── Border Radius — restore modern rounded corners ── */ [data-theme="sleek"] .rounded-md { border-radius: 0.375rem !important; } [data-theme="sleek"] .rounded-lg { border-radius: 0.5rem !important; } [data-theme="sleek"] .rounded-xl { border-radius: 0.75rem !important; } [data-theme="sleek"] .rounded-2xl { border-radius: 1rem !important; } [data-theme="sleek"] .rounded-3xl { border-radius: 1.5rem !important; } [data-theme="sleek"] .rounded-full { border-radius: 9999px !important; } /* bg-white cards */ [data-theme="sleek"] .bg-white { border-radius: 0.75rem !important; } /* ── Shadows — restore full Tailwind shadows ── */ [data-theme="sleek"] .shadow-sm { box-shadow: var(--sleek-shadow-sm) !important; } [data-theme="sleek"] .shadow { box-shadow: var(--sleek-shadow-sm) !important; } [data-theme="sleek"] .shadow-md { box-shadow: var(--sleek-shadow-md) !important; } [data-theme="sleek"] .shadow-lg { box-shadow: var(--sleek-shadow-lg) !important; } [data-theme="sleek"] .shadow-xl { box-shadow: var(--sleek-shadow-xl) !important; } [data-theme="sleek"] .shadow-2xl { box-shadow: var(--sleek-shadow-xl) !important; } [data-theme="sleek"] .shadow-sm:hover, [data-theme="sleek"] .shadow:hover { box-shadow: var(--sleek-shadow-md) !important; } [data-theme="sleek"] .hover\:shadow-md:hover { box-shadow: var(--sleek-shadow-md) !important; } /* ── Gradients — re-enable in Sleek mode ── */ /* Note: office365.css already skips gradient removal for [data-theme="sleek"], so we just need to ensure the gradient-image is explicitly set. */ /* Gradient stop variables */ [data-theme="sleek"] .from-blue-600 { --tw-gradient-from: #2563eb !important; } [data-theme="sleek"] .from-blue-700 { --tw-gradient-from: #1d4ed8 !important; } [data-theme="sleek"] .via-blue-700 { --tw-gradient-via: #1d4ed8 !important; } [data-theme="sleek"] .to-indigo-700 { --tw-gradient-to: #4338ca !important; } [data-theme="sleek"] .from-indigo-600 { --tw-gradient-from: #1a6bc7 !important; } [data-theme="sleek"] .to-purple-600 { --tw-gradient-to: #155ea8 !important; } [data-theme="sleek"] .to-blue-700 { --tw-gradient-to: #1d4ed8 !important; } [data-theme="sleek"] .to-blue-800 { --tw-gradient-to: #1e40af !important; } /* Gradient directions — must have same or higher specificity than any unset rules */ [data-theme="sleek"] div.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="sleek"] div.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="sleek"] div.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="sleek"] div.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="sleek"] div.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } /* ── Primary Colour — use sleek indigo ── */ [data-theme="sleek"] .bg-blue-600, [data-theme="sleek"] .bg-blue-500 { background-color: var(--sleek-primary) !important; } [data-theme="sleek"] .bg-blue-600:hover, [data-theme="sleek"] .bg-blue-500:hover { background-color: var(--sleek-primary-dark) !important; } [data-theme="sleek"] .text-blue-600, [data-theme="sleek"] .text-blue-700, [data-theme="sleek"] .text-blue-800 { color: var(--sleek-primary) !important; } [data-theme="sleek"] .border-blue-600, [data-theme="sleek"] .border-blue-500 { border-color: var(--sleek-primary) !important; } [data-theme="sleek"] .bg-blue-50, [data-theme="sleek"] .bg-blue-100 { background-color: var(--sleek-primary-bg) !important; } [data-theme="sleek"] .ring-blue-500, [data-theme="sleek"] .focus\:ring-blue-500:focus { --tw-ring-color: var(--sleek-primary) !important; } /* ── Buttons — restore rounded, bigger feel ── */ [data-theme="sleek"] button, [data-theme="sleek"] .btn, [data-theme="sleek"] [role="button"] { border-radius: 0.5rem !important; font-size: 14px !important; } /* ── Inputs / Forms — restore style ── */ [data-theme="sleek"] input[type="text"], [data-theme="sleek"] input[type="email"], [data-theme="sleek"] input[type="password"], [data-theme="sleek"] input[type="number"], [data-theme="sleek"] input[type="date"], [data-theme="sleek"] input[type="search"], [data-theme="sleek"] input[type="url"], [data-theme="sleek"] input[type="tel"], [data-theme="sleek"] textarea, [data-theme="sleek"] select { border-radius: 0.5rem !important; font-size: 14px !important; padding: 8px 12px !important; min-height: 38px !important; border: 1px solid var(--sleek-border) !important; } [data-theme="sleek"] input:focus, [data-theme="sleek"] textarea:focus, [data-theme="sleek"] select:focus { border-color: var(--sleek-primary) !important; box-shadow: 0 0 0 3px rgba(26, 107, 199, .15) !important; } /* Preserve icon-padding for search/icon inputs */ [data-theme="sleek"] input.pl-8, [data-theme="sleek"] .pl-8 input { padding-left: 2rem !important; } [data-theme="sleek"] input.pl-9, [data-theme="sleek"] .pl-9 input { padding-left: 2.25rem !important; } [data-theme="sleek"] input.pl-10, [data-theme="sleek"] .pl-10 input { padding-left: 2.5rem !important; } [data-theme="sleek"] input.pl-11, [data-theme="sleek"] .pl-11 input { padding-left: 2.75rem !important; } [data-theme="sleek"] input.pl-12, [data-theme="sleek"] .pl-12 input { padding-left: 3rem !important; } [data-theme="sleek"] input.pr-8, [data-theme="sleek"] .pr-8 input { padding-right: 2rem !important; } [data-theme="sleek"] input.pr-10, [data-theme="sleek"] .pr-10 input { padding-right: 2.5rem !important; } [data-theme="sleek"] input.pr-12, [data-theme="sleek"] .pr-12 input { padding-right: 3rem !important; } /* ── Labels ── */ [data-theme="sleek"] label { font-size: 14px !important; font-weight: 500 !important; color: #374151 !important; margin-bottom: 4px !important; } /* ── Sidebar — sleek dark navy ── */ [data-theme="sleek"] .o365-sidebar { background-color: var(--sleek-sidebar-bg) !important; width: 210px !important; border-right: none !important; box-shadow: 4px 0 12px rgba(0, 0, 0, .15) !important; } [data-theme="sleek"] .o365-main { margin-left: 210px !important; width: calc(100% - 210px) !important; background-color: var(--sleek-body-bg) !important; } [data-theme="sleek"] .o365-content { padding: 20px 24px !important; } [data-theme="sleek"] .o365-logo-area { padding: 16px 14px 12px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } [data-theme="sleek"] .o365-nav-item { border-radius: 8px !important; padding: 6px 10px !important; font-size: 13px !important; min-height: 32px !important; margin-bottom: 1px !important; } [data-theme="sleek"] .o365-nav-item.active { background: linear-gradient(135deg, var(--sleek-primary), var(--sleek-primary-dark)) !important; box-shadow: 0 4px 8px rgba(26, 107, 199, .3) !important; } [data-theme="sleek"] .o365-nav-item:hover:not(.active) { background-color: rgba(255, 255, 255, 0.07) !important; } [data-theme="sleek"] .o365-nav-section-title { padding: 12px 10px 4px !important; font-size: 10px !important; letter-spacing: 0.1em !important; color: rgba(255, 255, 255, 0.35) !important; } [data-theme="sleek"] .o365-user-profile { padding: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } [data-theme="sleek"] .o365-user-avatar { border-color: var(--sleek-primary-light) !important; } /* ── Header — sleek white with subtle border ── */ [data-theme="sleek"] .o365-header { height: 52px !important; background: #ffffff !important; border-bottom: 1px solid var(--sleek-border) !important; box-shadow: var(--sleek-shadow-sm) !important; } [data-theme="sleek"] .o365-header h2 { font-size: 16px !important; font-weight: 600 !important; color: #1e293b !important; } [data-theme="sleek"] .o365-search { border-radius: 8px !important; height: 34px !important; border-color: var(--sleek-border) !important; background: #f8fafc !important; width: 240px !important; } [data-theme="sleek"] .o365-search:focus-within { border-color: var(--sleek-primary) !important; box-shadow: 0 0 0 3px rgba(26, 107, 199, .1) !important; background: #fff !important; } [data-theme="sleek"] .o365-bell { border-radius: 8px !important; width: 34px !important; height: 34px !important; } [data-theme="sleek"] .o365-bell:hover { background-color: #f1f5f9 !important; } [data-theme="sleek"] .o365-week-badge { background: var(--sleek-primary-bg) !important; color: var(--sleek-primary) !important; border-color: #a8c9ed !important; border-radius: 6px !important; } [data-theme="sleek"] .o365-logout { border-radius: 6px !important; } /* ── Tables ── */ [data-theme="sleek"] th { font-size: 13px !important; background-color: #f8fafc !important; border-bottom: 2px solid var(--sleek-border) !important; color: #64748b !important; padding: 10px 14px !important; } [data-theme="sleek"] td { padding: 10px 14px !important; border-bottom: 1px solid #f1f5f9 !important; } [data-theme="sleek"] tr:hover td { background-color: #f8fafc !important; } /* ── Modals ── */ [data-theme="sleek"] .fixed.inset-0>div, [data-theme="sleek"] .fixed.inset-0 .bg-white { border-radius: 1rem !important; box-shadow: var(--sleek-shadow-xl) !important; } [data-theme="sleek"] .fixed.inset-0 { backdrop-filter: blur(6px) !important; } /* ── Compact card override — allow more padding ── */ [data-theme="sleek"] .bg-white.p-5, [data-theme="sleek"] .bg-white.p-6 { padding: 1.25rem !important; } /* ── Animations — restore pulse, ping, scale ── */ [data-theme="sleek"] .animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important; } [data-theme="sleek"] .animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important; } [data-theme="sleek"] .animate-bounce { animation: bounce 1s infinite !important; } /* ── Transition speed — slightly slower for smoother feel ── */ [data-theme="sleek"] .transition-all { transition-duration: 200ms !important; } /* ── Scrollbar — match sleek style ── */ [data-theme="sleek"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 4px !important; } [data-theme="sleek"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } /* ── Sidebar section collapse ── */ [data-theme="sleek"] .o365-section-content.expanded { max-height: 2500px !important; } /* ── App Switcher ── */ [data-theme="sleek"] .app-switcher-button { border-radius: 8px !important; } [data-theme="sleek"] .app-switcher-button:hover { background-color: #f1f5f9 !important; } [data-theme="sleek"] .app-switcher-panel { border-radius: 12px !important; box-shadow: var(--sleek-shadow-xl) !important; }