/* ========================================== Kano theme: custom property definitions All --kano-* variables MUST match a variable name in dark-mode.css ========================================== */ :root { --kano-text-main: #111827; --kano-text-soft: #4b5563; --kano-bg-main: #ffffff; --kano-bg-soft: #f9fafb; --kano-line: #e5e7eb; --kano-glow: #00d2ff; --kano-glow-strong: #1368cb; } /* Dark mode — override the :root defaults. */ [data-bs-theme="dark"] { --kano-text-main: #e5e7eb; --kano-text-soft: #9ca3af; --kano-bg-main: #0d0d0d; --kano-bg-soft: #1a1a1a; --kano-line: rgba(255, 255, 255, 0.1); --kano-glow: #1bffb4; --kano-glow-strong: #26ff99; } /* ============================================================ Dark mode background — applied via body.theme-dark class (added by setBsTheme JS) so it works even when data-bs-theme is only on .page and not on /. ============================================================ */ body.theme-dark { background: radial-gradient(1200px 650px at 10% -10%, #123824 0%, transparent 55%), radial-gradient(900px 600px at 90% 5%, #0f2c20 0%, transparent 58%), linear-gradient(145deg, #010302 0%, #030906 45%, #020705 100%) !important; background-attachment: fixed !important; color: var(--kano-text-main) !important; } /* Page wrapper: ensure it covers full viewport so gradient shows behind all content */ body.theme-dark .page { min-height: 100vh; background: transparent !important; } /* All major layout containers must be transparent so body gradient shows through */ body.theme-dark main, body.theme-dark .content, body.theme-dark article, body.theme-dark .container, body.theme-dark .container-fluid { background: transparent !important; } /* Cards: override Bootstrap's #fff default */ body.theme-dark .card { background-color: rgba(7, 21, 15, 0.75) !important; border: 1px solid var(--kano-line) !important; color: var(--kano-text-main) !important; } body.theme-dark .card-header { background-color: rgba(255, 255, 255, 0.05) !important; border-bottom: 1px solid var(--kano-line) !important; color: var(--kano-text-main) !important; } body.theme-dark .card-body { background-color: transparent !important; color: var(--kano-text-main) !important; } /* Bootstrap bg-* utilities */ body.theme-dark .bg-white, body.theme-dark .bg-light { background-color: rgba(7, 21, 15, 0.6) !important; color: var(--kano-text-main) !important; } /* list-group items */ body.theme-dark .list-group-item { background-color: transparent !important; border-color: var(--kano-line) !important; color: var(--kano-text-soft) !important; } body.theme-dark .list-group-item:hover, body.theme-dark .list-group-item-action:hover { background-color: rgba(40, 255, 158, 0.05) !important; color: var(--kano-text-main) !important; } body.theme-dark .list-group-item.active { background-color: rgba(40, 255, 158, 0.15) !important; border-color: var(--kano-glow) !important; color: var(--kano-glow) !important; } /* Form controls */ body.theme-dark .form-control, body.theme-dark .form-select { background-color: rgba(255, 255, 255, 0.06) !important; border-color: var(--kano-line) !important; color: var(--kano-text-main) !important; } body.theme-dark .form-control:focus, body.theme-dark .form-select:focus { background-color: rgba(255, 255, 255, 0.09) !important; border-color: rgba(27, 255, 180, 0.4) !important; box-shadow: 0 0 0 0.2rem rgba(27, 255, 180, 0.1) !important; color: var(--kano-text-main) !important; } body.theme-dark .form-label, body.theme-dark label { color: var(--kano-text-soft) !important; } /* Tables */ body.theme-dark .table { color: var(--kano-text-main) !important; border-color: var(--kano-line) !important; } body.theme-dark .table td, body.theme-dark .table th { border-color: var(--kano-line) !important; } /* Primary button — consolidated fix for green-on-green */ body.theme-dark .btn-primary { background: linear-gradient(160deg, #1bffb4 0%, #0db87e 100%) !important; color: #001a08 !important; border: none !important; font-weight: 600 !important; } body.theme-dark .btn-primary:hover { filter: brightness(1.08) !important; box-shadow: 0 4px 18px rgba(27, 255, 180, 0.35) !important; } /* Muted text and borders */ body.theme-dark .text-muted { color: var(--kano-text-soft) !important; } body.theme-dark .border, body.theme-dark .border-bottom, body.theme-dark .border-top { border-color: var(--kano-line) !important; } html, body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; } a, .btn-link { color: #006bb7; } .btn-primary { color: #fff; background-color: #1b6ec2; border-color: #1861ac; } .btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } /* ============================================================ Navigation dropdown overrides — in app.css (global, no rebuild needed) because MainLayout.razor.css is a compiled static asset. These take precedence over Bootstrap's defaults via !important. ============================================================ */ /* Suppress the global blue-link color inside nav dropdowns */ .nav-dropdown .dropdown-menu a, .user-identity .dropdown-menu a { color: inherit; text-decoration: none; } /* Items inside nav dropdowns: reset Bootstrap's link color and padding */ .nav-dropdown .dropdown-menu .dropdown-item, .user-identity .dropdown-menu .dropdown-item { color: #374151 !important; text-decoration: none !important; border-radius: 8px; padding: 0.65rem 0.85rem; font-size: 0.9rem; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .nav-dropdown .dropdown-menu .dropdown-item:hover, .user-identity .dropdown-menu .dropdown-item:hover { background-color: #f3f4f6 !important; color: #111827 !important; transform: translateX(2px); text-decoration: none !important; } /* Override Bootstrap's blue active state for NavLink items */ .nav-dropdown .dropdown-menu .dropdown-item.active, .nav-dropdown .dropdown-menu .dropdown-item:active, .user-identity .dropdown-menu .dropdown-item.active, .user-identity .dropdown-menu .dropdown-item:active { background-color: #e5e7eb !important; color: #111827 !important; text-decoration: none !important; } /* Nav dropdown item layout — duplicated here from MainLayout.razor.css so it takes effect without waiting for a full scoped-CSS rebuild */ .nav-dropdown-item { display: block; width: 100%; padding: 0.65rem 0.85rem !important; border-radius: 8px; text-decoration: none !important; font-size: 0.9rem; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .nav-dropdown-item:hover { transform: translateX(2px); text-decoration: none !important; } /* Theme selector buttons — custom class keeps Bootstrap JS away from them */ .ariadne-theme-btn { display: flex; width: 100%; padding: 0.65rem 0.85rem; border-radius: 8px; border: none; background-color: transparent; color: #374151; font-size: 0.9rem; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .ariadne-theme-btn:hover { background-color: #f3f4f6; color: #111827; transform: translateX(2px); } .ariadne-theme-btn.active { background-color: #e5e7eb; color: #111827; font-weight: 500; } .content { padding-top: 1.1rem; } /* Fallback override in case stale scoped CSS is still cached by browser/service worker. */ .login-page { background: linear-gradient(180deg, #f8fafc 0%, #edf2f7 100%) !important; } @media (max-width: 575.98px) { .content { padding-top: 0.75rem; } } h1:focus { outline: none; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid #e50000; } .validation-message { color: #e50000; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .navbar-brand.app-brand { color: #ffffff !important; } html[data-bs-theme="dark"] .navbar-brand.app-brand { color: #1bffb4 !important; text-shadow: 0 0 10px rgba(40, 255, 158, 0.4); } .darker-border-checkbox.form-check-input { border-color: #929292; }