/* Basic dashboard styles for Marcon */ :root { /* layout */ --sidebar-width: 260px; --sidebar-collapsed: 72px; /* Marcon color scheme (imported from public/resource/css/style.css) Primary brand color used across the app */ --marcon-primary: #1a3e77; /* sc-primary */ --marcon-teal: #3fbbbc; /* inline-teal */ --marcon-accent: #0d6efd; /* accent used for logo fallback */ /* neutrals */ --page-bg: #f5f7fb; --muted-bg: #f1f3f5; --card-border: #e3e6ed; --avatar-bg: #e9ecef; --text-primary: #333333; --text-muted: #6c757d; --card-bg: #ffffff; /* theme toggle colors (action-oriented) - toggle shows moon icon when current theme is light (it will switch to dark) - toggle shows sun icon when current theme is dark (it will switch to light) */ --toggle-light-bg: rgba(13, 110, 253, 0.12); /* bluish for 'switch to dark' */ --toggle-light-fore: #ffffff; --toggle-dark-bg: rgba(245, 158, 11, 0.16); /* amber for 'switch to light' */ --toggle-dark-fore: #081126; --toggle-border: rgba(0, 0, 0, 0.06); } /* Dark theme overrides (applied when .theme-dark is present on or ) */ .theme-dark { /* page background: slightly lighter than pure black so cards stand out */ --page-bg: #071428; box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); --muted-bg: #0b2536; --card-border: #173244; --avatar-bg: #172b3a; --text-primary: #e6eef8; --text-muted: #9aa6b2; --marcon-primary: #3f8ad6; /* slightly lighter brand for dark */ --card-bg: #0f2130; /* card background slightly lighter than page */ box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55); /* Bootstrap variable mappings for dark mode Map Bootstrap --bs-* tokens to our theme tokens so components (form controls, selects, dropdowns, etc.) use the correct backgrounds and text colors in dark mode. This avoids unreadable color: var(--text-primary); inputs without needing to override every component rule. */ --bs-body-bg: var(--card-bg); --bs-body-bg-rgb: 15, 33, 48; --bs-body-color: var(--text-primary); --bs-body-color-rgb: 230, 238, 248; --bs-border-color: var(--card-border); --bs-border-color-translucent: rgba(23, 50, 68, 0.15); --bs-secondary-bg: rgba(255, 255, 255, 0.02); --bs-secondary-color: var(--text-muted); --bs-tertiary-bg: rgba(255, 255, 255, 0.03); --bs-tertiary-color: rgba(var(--bs-body-color-rgb), 0.5); /* slightly stronger toggle backgrounds for dark mode for better contrast */ --toggle-light-bg: rgba(63, 138, 214, 0.14); --toggle-light-fore: #071126; --toggle-dark-bg: rgba(245, 158, 11, 0.22); --toggle-dark-fore: #071126; --toggle-border: rgba(255, 255, 255, 0.06); } /* Theme toggle button styles */ .btn-theme { width: 37px; height: 37px; display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--toggle-border); background: transparent; color: var(--text-primary); transition: transform 120ms ease, box-shadow 150ms ease; padding: 0; position: relative; /* allow absolute-positioned icons to center */ } .theme-dark .btn-theme { border-color: var(--toggle-border); } /* Primary visible states based on aria-pressed (set by theme.js) aria-pressed="false" -> current theme is light, button shows moon (action: switch to dark) aria-pressed="true" -> current theme is dark, button shows sun (action: switch to light) */ .btn-theme[aria-pressed="false"] { /* light mode current — icon indicates action (moon icon) uses bluish color */ background: transparent; border-color: var(--toggle-border); } .btn-theme[aria-pressed="true"] { /* dark mode current — icon indicates action (sun icon) uses amber color */ background: transparent; border-color: var(--toggle-border); } /* Icon-only styling: the icons inside the button will change color and animate */ .btn-theme .theme-icon { display: inline-block; font-size: 16px; line-height: 1; color: var(--text-primary); transition: transform 180ms ease, opacity 180ms ease, color 180ms ease; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1); } /* Center icons and animate with scale + opacity (no lateral movement) */ .btn-theme[aria-pressed="false"] .theme-icon.moon { color: #2563eb; opacity: 1; transform: translate(-50%, -50%) scale(1); } /* color: var(--marcon-primary);*/ .btn-theme[aria-pressed="false"] .theme-icon.sun { color: var(--text-primary); opacity: 0; transform: translate(-50%, -50%) scale(.92); } .btn-theme[aria-pressed="true"] .theme-icon.sun { color: #f59e0b; opacity: 1; transform: translate(-50%, -50%) scale(1); } .btn-theme[aria-pressed="true"] .theme-icon.moon { color: var(--text-primary); opacity: 0; transform: translate(-50%, -50%) scale(.92); } /* ensure focus is visible */ .btn-theme:focus { outline: 3px solid rgba(99, 102, 241, 0.12); outline-offset: 2px; } .theme-dark .btn-theme { background: var(--toggle-dark-bg); color: var(--toggle-dark-fore); } .theme-dark .btn-theme[aria-pressed="false"] { /* rare: dark theme but aria says false */ background: var(--toggle-light-bg); } .theme-dark .btn-theme[aria-pressed="true"] { background: var(--toggle-dark-bg); } .theme-dark .btn-theme:focus, .btn-theme:focus { outline: 3px solid rgba(99, 102, 241, 0.12); outline-offset: 2px; } /* hover/focus micro-interactions */ .btn-theme:hover { transform: translateY(-1px); } .btn-theme:active { transform: translateY(0); } /* Smooth theme transitions */ html, body, #marcon-app, .card, .navbar, #marcon-sidebar, .dropdown-menu { transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease; } /* Apply darker backgrounds and text colors broadly when theme is active */ .theme-dark body, .theme-dark #marcon-app { background: var(--page-bg) !important; color: var(--text-primary) !important; } .theme-dark .navbar, .theme-dark .navbar-light, .theme-dark .navbar-expand { background: var(--muted-bg) !important; border-bottom-color: var(--card-border) !important; color: var(--text-primary) !important; } .theme-dark #marcon-sidebar { background: var(--muted-bg) !important; color: var(--text-primary) !important; } .theme-dark #marcon-sidebar .nav-link { color: var(--text-primary) !important; } .theme-dark #marcon-sidebar .nav-link .link-text { color: var(--text-primary) } .theme-dark #marcon-sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.02) !important } .theme-dark .card { background: var(--card-bg); color: var(--text-primary); border-color: var(--card-border); } .theme-dark .card .card-body { background: transparent } .theme-dark .dropdown-menu { background: var(--card-bg); color: var(--text-primary); border-color: var(--card-border); } .theme-dark .badge.bg-light { background: rgba(255, 255, 255, 0.03) !important; color: var(--text-primary) !important; border: 1px solid rgba(255, 255, 255, 0.04); } .theme-dark .btn-light { background: transparent !important; color: var(--text-primary) !important; border-color: rgba(255, 255, 255, 0.06) !important; } .theme-dark a, .theme-dark a:hover { color: var(--marcon-primary) } /* Ensure navbar dropdown items look correct */ .theme-dark .dropdown-item { color: var(--text-primary); } .theme-dark .dropdown-item:hover { background: rgba(255, 255, 255, 0.02); } /* Force card text to follow theme colors (override Bootstrap utility classes) */ .theme-dark .card, .theme-dark .card .card-body, .theme-dark .card .card-title, .theme-dark .card h1, .theme-dark .card h2, .theme-dark .card h3, .theme-dark .card h4, .theme-dark .card h5, .theme-dark .card h6, .theme-dark .card p, .theme-dark .card small, .theme-dark .card .display-6, .theme-dark .card .h5, .theme-dark .card .h6 { color: var(--text-primary) !important; } /* Override common bootstrap text utilities so they don't force wrong colors in cards */ .theme-dark .text-muted { color: var(--text-muted) !important; } .theme-dark .text-primary { color: var(--marcon-primary) !important; } .theme-dark .text-success { color: #6ee7b7 !important; } .theme-dark .text-danger { color: #f97373 !important; } html, body, #marcon-app { min-height: 100vh; } #marcon-app { min-height: 100vh; background: var(--page-bg) } /* Sidebar */ #marcon-sidebar { width: var(--sidebar-width); min-width: var(--sidebar-width); transition: width .25s ease; } #marcon-sidebar.collapsed { width: var(--sidebar-collapsed); min-width: var(--sidebar-collapsed); } #marcon-sidebar .sidebar-header { height: 64px } #marcon-sidebar .sidebar-title { font-size: 1.05rem; font-weight: 600 } #marcon-sidebar .nav-link { color: var(--text-primary); padding: 10px 12px; border-radius: 6px; /* layout: align icon + text to the left */ display: flex; align-items: center; justify-content: flex-start; gap: 10px; } #marcon-sidebar .nav-link:hover { background: var(--muted-bg) } /* Keep link text on a single line, left-aligned and flexible */ #marcon-sidebar .nav-link .link-text { white-space: nowrap; text-align: left; margin-left: 4px; flex: 1 1 auto; } /* Icon sizing and alignment inside the nav-link */ #marcon-sidebar .nav-link .nav-icon, #marcon-sidebar .nav-link svg, #marcon-sidebar .nav-link i { flex: 0 0 20px; width: 20px; height: 20px; display: inline-block; text-align: center; } /* When sidebar is collapsed, center icons as before */ #marcon-sidebar.collapsed .nav-link { justify-content: center; padding: 10px 8px; } /* page content should account for sidebar width on larger screens */ @media(min-width:768px) { #page-content { margin-left: 0 } } /* compact sidebar: hide text labels */ #marcon-sidebar.collapsed .link-text { display: none } #marcon-sidebar.collapsed .sidebar-title { display: none } /* mobile behavior */ @media(max-width:767.98px) { #marcon-sidebar { position: fixed; left: -300px; top: 0; bottom: 0; z-index: 1050; height: 100vh; overflow: auto; box-shadow: 0 4px 12px rgba(15, 15, 15, 0.12); } #marcon-sidebar.show { left: 0; } #page-content { margin-left: 0 } } /* small visual tweaks */ .sidebar-header svg { flex-shrink: 0 } .card .display-6 { font-size: 1.6rem } /* avatar placeholder if missing */ img[alt="avatar"] { object-fit: cover; background: var(--avatar-bg) } /* Use brand color for sidebar title */ #marcon-sidebar .sidebar-title { color: var(--marcon-primary) } /* card border using project card color */ .card { border: 1px solid var(--card-border) } /* Header background for pages using bg-light: make it theme-aware */ .theme-dark header.bg-light { background: var(--muted-bg) !important; border-bottom-color: var(--card-border) !important; color: var(--text-primary) !important; } .theme-dark header.bg-light .navbar, .theme-dark header.bg-light .navbar-brand, .theme-dark header.bg-light a, .theme-dark header.bg-light .nav-link { color: var(--text-primary) !important; } /* Modal & backdrop dark-mode support ------------------------------------------------- */ /* When JS adds .theme-dark to individual .modal/.modal-backdrop elements, these rules ensure the popup uses the same color tokens as the rest of the site. */ .modal.theme-dark .modal-content { /* Modal surface should receive the card background so the popup looks like a card. Avoid applying the background to .modal-dialog because Bootstrap's .modal-dialog-centered gives the dialog a large min-height and that produces a stretched full-height background. */ background: var(--card-bg); color: var(--text-primary); } .modal.theme-dark .modal-dialog { /* Keep dialog-level text color, but do NOT give it a background. The visual surface is the .modal-content element. */ color: var(--text-primary); background: transparent; } .modal.theme-dark .modal-content { border-color: var(--card-border); } .modal.theme-dark .modal-header, .modal.theme-dark .modal-body, .modal.theme-dark .modal-footer { background: transparent; color: var(--text-primary); } .modal.theme-dark .btn-light { background: transparent !important; color: var(--text-primary) !important; border-color: rgba(255, 255, 255, 0.06) !important; } /* Backdrop should be darker when in dark mode to increase contrast */ .modal-backdrop.theme-dark { background-color: rgba(0, 0, 0, 0.62) !important; } /* Smooth transitions for modals/backdrops when theme changes or modal opens */ .modal, .modal-backdrop { transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; } /* End modal dark-mode support ------------------------------------------------------ */ /* --------------------------------------------------------------------------- Third-party login button styles (imported/adapted from public/resource/css/style.css) These target the small circular provider buttons used alongside the sign-in popup - Keep class names consistent with existing templates: `.btn-icon` and `.btnSpecialLogin` - Provide provider color helpers `.bg-google`, `.bg-facebook`, etc. --------------------------------------------------------------------------- */ .btn-icon { width: 35px; height: 35px; border-radius: 50px; padding: 2px; border: none; text-align: center; display: inline-flex; align-items: center; justify-content: center; } .btn-icon i { vertical-align: middle; text-align: center; font-size: 22px; line-height: 1; } /* Small helper for the popup provider buttons (adds space + pointer) */ .btnSpecialLogin { cursor: pointer; margin: 0 6px 6px 0; display: inline-flex; align-items: center; justify-content: center; } /* Provider background colors (kept simple for contrast) */ .bg-microsoft { background: #0078d4; color: white; } .bg-google { /*background: #4285f4;*/ color: white; } .bg-apple { background: #000; color: white; } .bg-facebook { background: #3b5998; color: white; } .bg-twitter { background: #1da1f2; color: white; } .bg-linkedin { background: #0077b5; color: white; } /* Hover/focus micro-interactions to match the app feel */ .btn-icon:hover, .btnSpecialLogin:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11, 23, 40, 0.08); opacity: 0.98; } /* Ensure icons remain visible in dark theme; prefer the provider color or white text */ .theme-dark .btn-icon, .theme-dark .btnSpecialLogin { color: white !important; } /* --------------------------------------------------------------------------- Secure page styles (migrated from public/resource/css/style.css) These styles target the standalone sign-in / sign-up pages and modal sizing so the V2 minimal layout matches the legacy secure page appearance. --------------------------------------------------------------------------- */ @media (min-width: 767px) { .secure-body { background-image: url(/assets/img/building-6011756_640.jpg); } .secure-background { /* keep the background image but remove the opaque overlay so the page background / image remains visible; color is controlled by theme tokens instead of a hard overlay */ background-color: transparent; background-repeat: no-repeat; background-size: cover; background-blend-mode: normal; } .signinPage { width: 100%; min-width: 280px; max-width: 500px; padding: 7px 2px; margin: auto; position: relative; height: auto; overflow: visible; border-radius: 5px; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.28); background: white; } .signupPage { width: 100%; min-width: 280px; max-width: 600px; padding: 7px 15px; margin: auto; position: relative; height: auto; overflow: visible; border-radius: 5px; box-shadow: 0 0 4rem rgba(0, 0, 0, 0.28); background: white; } .secure-body>.page-content { padding-top: 3%; } } @media (max-height: 600px) { .secure-body>.page-content { padding-top: 0 !important; } } @media (max-width: 767px) { .secure-background { /* on small screens keep transparent so background image can show through */ background: transparent; } .signinPage { width: 100%; padding: 7px 2px; margin: auto; height: auto; overflow: visible; border-radius: 5px; background: white; } .signupPage { width: 100%; padding: 7px 5px; margin: auto; height: auto; overflow: visible; border-radius: 5px; background: white; } } /* small helpers used by secure pages */ .btn-mid { width: 100%; max-width: 300px; } .input-signup-mid { width: 100%; max-width: 300px; margin: auto; text-align: center; } /* divider used between social providers and forms */ .divider { align-items: center; justify-content: center; margin: auto; max-width: 320px; padding: 15px 0px; } .signin-divider { display: flex; align-items: center; text-align: center; font-weight: bold; } .signin-divider::before, .signin-divider::after { content: ''; flex: 1; border-bottom: 1px solid #0c63bb; } .signin-divider:not(:empty)::before { margin-right: .75em; } .signin-divider:not(:empty)::after { margin-left: .75em; } /* Labels and form-labels should follow theme text colors for readability */ .form-label, label { color: var(--text-primary); } .sc-text-gray { color: var(--text-muted) !important; } /* keep the provider button hover micro-interactions consistent */ .btn-icon:hover, .btnSpecialLogin:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(11, 23, 40, 0.08); opacity: 0.98; } /* ensure secure pages look correct in dark theme */ .theme-dark .signinPage, .theme-dark .signupPage { background: var(--card-bg); color: var(--text-primary); border-color: var(--card-border); } /* ensure labels in dark mode are visible */ .theme-dark .form-label, .theme-dark label { color: var(--text-muted) !important; } /* Make Add/Edit Address card inputs white and readable regardless of theme Scope narrowly to #addressAddCard so we don't change global form appearance. */ #addressAddCard .form-control, #addressAddCard .form-select, #addressAddCard input.form-control, #addressAddCard select.form-select { background-color: #ffffff !important; color: #071428 !important; /* dark text for readability on white */ border-color: var(--card-border) !important; } #addressAddCard .form-control::placeholder { color: #6c757d !important; opacity: 1; } /* smaller file input inside add card */ #addressAddCard input[type="file"], #addressAddCard .form-control-sm { background-color: #ffffff !important; color: #071428 !important; } /* Make Add/Edit Bank card inputs white and readable regardless of theme Scope narrowly to #bankAddCard so we don't change global form appearance. */ #bankAddCard .form-control, #bankAddCard .form-select, #bankAddCard input.form-control, #bankAddCard select.form-select { background-color: #ffffff !important; color: #071428 !important; /* dark text for readability on white */ border-color: var(--card-border) !important; } #bankAddCard .form-control::placeholder { color: #6c757d !important; opacity: 1; } #bankAddCard input[type="file"], #bankAddCard .form-control-sm { background-color: #ffffff !important; color: #071428 !important; } /* --------------------------------------------------------------------------- Legacy helper classes and button styles migrated from public/resource/css/style.css - w3-* helpers used by several legacy templates (centering, padding, image helpers) - sc-primary / sc-secondary button styles used across secure pages - center the secure page content on wider screens similar to the legacy layout --------------------------------------------------------------------------- */ /* w3 helpers (small subset used by templates) */ .w3-center { text-align: center; } .w3-padding { padding: 1rem !important; } .w3-padding-small { padding: .5rem !important; } .w3-text-red { color: #e53935 !important; } .w3-bolder { font-weight: bolder !important; } .w3-bold { font-weight: 700 !important; } .w3-image { max-width: 100%; height: auto; display: block; margin: 0 auto; } .nolink { text-decoration: none; } /* small message / error class used on signup/sign-in pages */ .msgErr { padding: .5rem 0; } /* Brand button styles used throughout legacy secure pages */ .sc-primary { background: var(--marcon-primary) !important; color: white !important; } .sc-primary:hover { opacity: .95; } .sc-secondary { background: #1a3e77; /* fallback */ color: white !important; border: 0; padding: .5rem .75rem; border-radius: .375rem; } .sc-text-primary { color: var(--marcon-primary) !important; } .sc-text-gray { color: #444 !important; } /* Small utility used on the old sign in page to center the card vertically on wide screens */ @media (min-width: 767px) { .secure-body>.page-content { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding-top: 0; } } /* small button size used in legacy forms */ .btn-mid { width: 100%; max-width: 300px; } /* make inputs used in legacy sign-in centered in small layouts */ .input-signup-mid { width: 100%; max-width: 300px; margin: 0 auto; text-align: center; } /* keep large logo spacing similar to legacy */ .signupPage .w3-center img, .signinPage .w3-center img { max-width: 200px; margin: 0 auto 12px auto; display: block; } .pager-limit-selected { background: var(--marcon-primary); color: white; border-radius: 4px; padding: 4px 8px; font-weight: 600; } /* --------------------------------------------------------------------------- Imported legacy rbm / rmb styles from public/resource/css/style.css These classes are referenced by older JS/templates (rbm-blue, rbm-text-blue, rbm-blue-header, rmb-header, rbm-gray, rbm-hover-blue, rbm-dark-blue, etc.). Keeping them here allows legacy templates and scripts that rely on these utility classes to work without referencing the old resource stylesheet. --------------------------------------------------------------------------- */ .rbm-blue-header>td { background: #1a3e77 !important; color: white !important; } .rmb-header>td { padding: 10px; } .rbm-blue-header { background: #1a3e77 !important; color: white !important; } .rbm-blue-header>tr>th { background: #1a3e77 !important; color: white !important; border: 0px none !important; } .rmb-header>tr>th { padding: 10px; } .rbm-gray { background: #1a3e77 !important; color: white !important; } .rbm-text-gray { color: #1a3e77 !important; } .rbm-blue { background: #1a3e77 !important; color: white !important; } .rbm-text-blue { color: #1a3e77 !important; } .rbm-hover-blue:hover { background: #1a3e77 !important; color: white !important; } .rbm-dark-blue { background: #1a3e77 !important; color: white !important; } .rbm-text-dark-blue { color: #1a3e77 !important; } .form-switch.form-switch-sm { margin-bottom: 0.5rem; /* JUST FOR STYLING PURPOSE */ } .form-switch.form-switch-sm .form-check-input { height: 1rem; width: calc(1rem + 0.75rem); border-radius: 2rem; margin-right: 5px; } .form-switch.form-switch-md .form-check-input { height: 1.5rem; width: calc(2rem + 0.75rem); border-radius: 3rem; margin-right: 5px; } .form-switch.form-switch-lg .form-check-input { height: 2rem; width: calc(3rem + 0.75rem); border-radius: 4rem; margin-right: 5px; } .form-switch.form-switch-xl .form-check-input { height: 2.5rem; width: calc(4rem + 0.75rem); border-radius: 5rem; margin-right: 5px; } .site-tabs .nav-link { background-color: #ffffff14 !important; color: var(--sc-on-primary, #0d6efd) !important; font-weight: 600; margin-right: 2px; border-radius: .5rem 0.5rem 0 0; } /* Theme-aware styles for system setting tabs. Uses CSS variable --sc-primary when available. */ .site-tabs .nav-link.active { background-color: var(--sc-primary, #0d6efd) !important; color: var(--sc-on-primary, #ffffff) !important; font-weight: 600; } /* Ensure focused tabs remain accessible */ .site-tabs .nav-link:focus { outline: 3px solid color-mix(in srgb, var(--sc-primary, #0d6efd) 20%, transparent); outline-offset: 1px; } /* Theme-aware table cell styles -------------------------------------------------- */ /* Ensure table cells use card surface and readable text in both light and dark themes. Applies to most data tables across the app; keep specificity moderate so legacy table styles still apply unless explicitly overridden. */ table tbody td, table thead th { background: transparent; /* keep header background controlled elsewhere */ color: var(--text-primary); border-color: var(--card-border); vertical-align: middle; padding: 0.65rem 0.75rem; /* comfortable row spacing */ } /* Use the card surface for zebra rows to improve contrast when needed. Consumers can opt-in by adding .table-card to the table element. */ table.table-card tbody tr:nth-child(odd) td { background: var(--card-bg); } /* Subtle divider for table rows to match card border tokens */ table tbody td { border-bottom: 1px solid var(--card-border); } /* Dark mode tweaks: ensure headers and cells remain readable when .theme-dark is set */ .theme-dark table tbody td, .theme-dark table thead th { color: var(--text-primary); border-color: var(--card-border); } /* Compact small tables variant */ table.table-sm tbody td, table.table-sm thead th { padding: 0.35rem 0.5rem; } /* Notification dropdown styles */ #notificationsDropdown { max-height: 500px; overflow-y: auto; min-width: 320px; border: 1px solid var(--card-border); border-radius: 0.375rem; background-color: var(--card-bg); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); display: none; position: absolute; right: 0; top: 100%; z-index: 1050; margin-top: 0.5rem; } #notificationsDropdown.show { display: block; } .theme-dark #notificationsDropdown { box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55); } /* Notification item styling */ .notification-item { border-bottom: 1px solid var(--card-border); padding: 0.75rem; transition: background-color 0.2s ease; font-size: 0.875rem; color: var(--text-primary); } .notification-item:hover { background-color: var(--muted-bg); } .notification-item.unread { background-color: rgba(13, 110, 253, 0.08); } .theme-dark .notification-item.unread { background-color: rgba(63, 138, 214, 0.12); } .theme-dark #notificationsDropdown .notification-item { border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .theme-dark #notificationsDropdown .notification-item:hover { background-color: rgba(63, 138, 214, 0.18); } .theme-dark #notificationsDropdown .notification-item .fw-bold { color: var(--text-primary); } .theme-dark #notificationsDropdown .notification-item .small { color: rgba(230, 238, 248, 0.72); } /* Notification item button group */ .notification-item .btn-sm { padding: 0.15rem 0.3rem; font-size: 0.75rem; opacity: 0.6; transition: opacity 0.2s ease; } .notification-item:hover .btn-sm { opacity: 1; } .notification-item .btn-sm:hover { opacity: 1; } #notificationsDropdown .notification-item .notification-action-btn { background-color: var(--card-bg); border-color: var(--card-border); color: var(--text-muted); } #notificationsDropdown .notification-item .notification-action-btn:hover { color: var(--text-primary); } .theme-dark #notificationsDropdown .notification-item .notification-action-btn { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.18); color: var(--text-primary); } .theme-dark #notificationsDropdown .notification-item .notification-action-btn:hover { background-color: rgba(255, 255, 255, 0.18); } /* Dropdown header styling */ #notificationsDropdown .dropdown-header { background-color: var(--muted-bg); border-bottom: 1px solid var(--card-border); color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.5px; } .theme-dark #notificationsDropdown .dropdown-header { background-color: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.08); color: var(--text-muted); } /* Scrollbar styling for dropdown */ #notificationsDropdown::-webkit-scrollbar { width: 6px; } #notificationsDropdown::-webkit-scrollbar-track { background: var(--muted-bg); } #notificationsDropdown::-webkit-scrollbar-thumb { background: #bbb; border-radius: 3px; } #notificationsDropdown::-webkit-scrollbar-thumb:hover { background: #888; } .theme-dark #notificationsDropdown::-webkit-scrollbar-thumb { background: #555; } .theme-dark #notificationsDropdown::-webkit-scrollbar-thumb:hover { background: #777; } /* Ensure notification badge positioning */ /* .position-relative>.badge.position-absolute { right: -2px; top: -2px; } */ /* Ensure badge counter is properly formatted */ .badge.rounded-pill { font-size: 0.65rem; padding: 0.25em 0.5em; } /* Dropdown layout / alignment fixes for notification items */ #notificationsDropdown .notification-item .d-flex { gap: 0.5rem; align-items: flex-start; } #notificationsDropdown .notification-item .flex-grow-1 { min-width: 0; /* allow flex children to shrink correctly */ padding-right: 0.5rem; } #notificationsDropdown .notification-item .fw-bold { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #notificationsDropdown .notification-item .small { display: block; word-break: break-word; } #notificationsDropdown .notification-item .btn { flex-shrink: 0; } /* Make dropdown behave better on medium / small screens */ @media (max-width: 991px) { #notificationsDropdown { min-width: 260px; right: 8px; } } @media (max-width: 575px) { /* On very small screens the dropdown should not overflow the viewport */ #notificationsDropdown { left: 8px; right: 8px; min-width: auto; width: calc(100% - 16px); } #notificationsDropdown .notification-item { padding: 0.5rem; } #notificationsDropdown .notification-item .d-flex { flex-direction: column; gap: 0.35rem; } #notificationsDropdown .notification-item .d-flex .btn { align-self: flex-end; } #notificationsDropdown .dropdown-header { padding-left: 0.75rem; padding-right: 0.75rem; } } /* Notifications spinner styling (small inline SVG) */ #notificationsBtn, #notificationsBtnMobile { position: relative; } .notifications-spinner { position: absolute; top: 50%; right: 8px; width: 18px; height: 18px; transform: translateY(-50%) scale(.9); opacity: 0; transition: opacity .18s ease, transform .18s ease; pointer-events: none; color: var(--marcon-primary); } .notifications-spinner.show { opacity: 1; transform: translateY(-50%) scale(1); } .notifications-spinner svg { width: 100%; height: 100%; display: block; } @keyframes nv-spin { 100% { transform: rotate(360deg); } } .notifications-spinner svg { animation: nv-spin 1s linear infinite; transform-origin: center; } .pager-selected { background: #1c6ca1; color: white; border: 1px solid #999; } .pager-item { cursor: pointer; border: 1px solid #d5cdcd; color: #333; background: white; padding: 8px 16px; margin: 2px; } .pager-item:hover { background: #777; color: #fff; } .pager-selected { background: #1c6ca1; color: white; border: 1px solid #999; } .pager-limit { cursor: pointer; border: 1px solid #d5cdcd; color: #333; background: white; padding: 8px 16px; } .pager-limit:hover { background: #777; color: #fff; } .pager-limit-selected { background: #1c6ca1; color: white; border: 1px solid #999; }