/* 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; /* dark navy */ --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 */ /* 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 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); } .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; } /* 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; } .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); } /* 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; } /* 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; } /* 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: #0d6efd; } .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; }