/** * heroActionBar.css — shared styling for the hero/action-bar buttons used by * all entity detail pages AND their popup modals. * * One file = one source of truth. Tweak here once and every page + modal updates. * * Action-bar wrappers it targets (added to a single :where() list below): * .desktop-hero-actions (titleDetail / video game / places desktop hero) * .mobile-hero-actions (titleDetail / video game / places mobile hero) * #bdActionBar (book DETAIL PAGE action bar) * #bgActionBar (board game DETAIL PAGE action bar) * #bkDetailActionBar (book MODAL popup action bar) * #vgDetailActionBar (video game MODAL popup action bar) * #bgDetailActionBar (board game MODAL popup action bar) * #tdActionBar (sports team MODAL popup action bar) * #pkdActionBar (pick detail MODAL popup action bar) * * Why :where() — :where() has zero specificity. By wrapping the parent * contexts in :where(), the BASE rule's specificity is just from the button * class (10), so the active-state rules (specificity 30) reliably override * border/color in BOTH dark and light mode without needing !important or * per-state parent-context duplication. * * ACTION-CLASS NAMING (shared across all pages/modals — no per-page prefix): * action-want — toggle: "I want this" * action-own — toggle: "I own / have visited" * action-favorite — toggle: heart / favorite * action-log — action: opens log session modal (always lit, blue) * action-share — action: opens share-with-friends modal (always gray) */ /* All action bars share a single name for selector reuse. */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .score-badge.personal-score { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); line-height: 1; } /* ================================================================== 1. ICON-ONLY GLASS BUTTONS (back, admin, dropdown trigger, etc.) Desktop: 36px circle. Mobile: 34px circle. ================================================================== */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass { width: 36px; height: 36px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; padding: 0; color: #fff; } :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass:hover, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass:focus { background: rgba(0, 0, 0, 0.7); border-color: rgba(255, 255, 255, 0.22); } /* ================================================================== 2. LABELED GLASS BUTTONS (Want / Own / Log / Share / etc.) Desktop: pill, auto width, 36px height, 14px horizontal padding. Mobile: collapses to a 34px circle (icon only, label hidden). ================================================================== */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass.btn-glass-labeled { width: auto; height: 36px; padding: 0 14px; gap: 6px; font-size: 0.85rem; font-weight: 500; border-radius: 6px; } :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass.btn-glass-labeled span { line-height: 1; } /* ================================================================== 3. RATING BADGE (.score-badge.personal-score from GameRatingPopup) Same size/shape as labeled glass buttons. Keeps the purple background that signals "your rating." ================================================================== */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .score-badge.personal-score { height: 36px; padding: 0 14px; border-radius: 6px; font-size: 0.85rem; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* ================================================================== 4. REVIEW BADGE (.entity-review-badge from EntityReviewModal) Same size/shape as labeled glass buttons. Yellow border + yellow icon when the user has written a review. ================================================================== */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge { width: auto; height: 36px; padding: 0 14px; gap: 6px; font-size: 0.85rem; font-weight: 500; border-radius: 6px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); color: #fff; display: inline-flex; align-items: center; } :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge:hover, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge:focus { background: rgba(0, 0, 0, 0.7); color: #fff; border-color: rgba(255, 255, 255, 0.3); } :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge.btn-warning { border-color: #ffc107; color: #ffc107; } /* ================================================================== 5. QUICKVISIT "VISITED" BUTTON (.quick-visit-btn — places only today) Same size/shape as labeled glass buttons. Green border when visited. ================================================================== */ :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn { width: auto; height: 36px; padding: 0 14px; gap: 6px; font-size: 0.85rem; font-weight: 500; border-radius: 6px; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.14); color: #0d6efd; display: inline-flex; align-items: center; } :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn:hover, :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn:focus { background: rgba(0, 0, 0, 0.7); color: #0d6efd; border-color: rgba(255, 255, 255, 0.3); } .quick-visit-btn.btn-success { color: #198754; border-color: #198754; } /* ================================================================== 6. SHARED ACTION-CLASS COLOR MODIFIERS Same naming on every page + modal — change the color in one place, every action bar updates. Toggle states: GRAY default, accent when .active. Actions (log / share): fixed color, never toggle. ================================================================== */ /* Default GRAY for all toggle action buttons (no data behind them) */ .btn-glass.action-want, .btn-glass.action-own, .btn-glass.action-favorite { color: #adb5bd; } /* Lit-up state: icon, text, AND outline change to the accent color (data exists). */ .btn-glass.action-want.active, .btn-glass.action-want.active:hover, .btn-glass.action-want.active:focus { color: #0dcaf0; border-color: #0dcaf0; } /* cyan — wanted */ .btn-glass.action-own.active, .btn-glass.action-own.active:hover, .btn-glass.action-own.active:focus { color: #ffc107; border-color: #ffc107; } /* yellow — owned/visited */ .btn-glass.action-favorite.active, .btn-glass.action-favorite.active:hover, .btn-glass.action-favorite.active:focus { color: #dc3545; border-color: #dc3545; } /* red heart — favorite */ /* Action buttons (one-shot launchers, not toggles — always neutral gray. They don't reflect any state, so they don't get an accent color.) */ .btn-glass.action-log { color: #adb5bd; } .btn-glass.action-list { color: #adb5bd; } /* gray when not on any list */ .btn-glass.action-share { color: #adb5bd; } /* Movie/TV-specific action classes (used by titleDetail hero, tqvm popup, etc.) Cyan = watchlist (planned), Blue = watched, Green = collection (owned), Yellow = review, Cyan = attributes. Pulled out of titleDetail.css so every action bar — detail page AND modal popups — gets identical colors. */ .btn-glass.action-watchlist, .btn-glass.action-watchlist.active, .btn-glass.action-watchlist:hover, .btn-glass.action-watchlist:focus { color: #0dcaf0; border-color: #0dcaf0; } /* cyan */ .btn-glass.action-watched, .btn-glass.action-watched.active, .btn-glass.action-watched:hover, .btn-glass.action-watched:focus { color: #0d6efd; border-color: #0d6efd; } /* blue */ .btn-glass.action-collection { color: #adb5bd; } .btn-glass.action-collection.active, .btn-glass.action-collection.active:hover, .btn-glass.action-collection.active:focus { color: #198754; border-color: #198754; } /* green */ .btn-glass.action-like { color: #adb5bd; } .btn-glass.action-like.active, .btn-glass.action-like.active:hover, .btn-glass.action-like.active:focus { color: #198754; border-color: #198754; } /* green */ .btn-glass.action-review-btn { color: #adb5bd; } .btn-glass.action-review-btn.active, .btn-glass.action-review-btn.active:hover, .btn-glass.action-review-btn.active:focus { color: #ffc107; border-color: #ffc107; } /* yellow */ .btn-glass.action-attributes-btn { color: #adb5bd; } .btn-glass.action-attributes-btn.active, .btn-glass.action-attributes-btn.active:hover, .btn-glass.action-attributes-btn.active:focus { color: #0dcaf0; border-color: #0dcaf0; } /* Lit-up state: entity is on at least one list — cyan to match the existing .btn-info "On a List" treatment used by the card-style add-to-list button. */ .btn-glass.action-list.active, .btn-glass.action-list.active:hover, .btn-glass.action-list.active:focus { color: #0dcaf0; border-color: #0dcaf0; } /* ================================================================== 7. MOBILE OVERRIDES — collapse all action-bar buttons to 34px circles. Labels hidden, content reduced to icon only. ================================================================== */ @media (max-width: 767px) { :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass.btn-glass-labeled, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .score-badge.personal-score, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; gap: 2px; font-size: 0.7rem; justify-content: center; } :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass.btn-glass-labeled span, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge span, :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn span { display: none; } /* Hide the rating star icon on mobile rating circles — keep only the number visible. */ :where( #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .score-badge.personal-score i { display: none; } } /* The .mobile-hero-actions wrapper renders only on mobile, so its rules apply unconditionally (no media query needed). */ .mobile-hero-actions .btn-glass, .mobile-hero-actions .btn-glass.btn-glass-labeled, .mobile-hero-actions .entity-review-badge, .mobile-hero-actions .quick-visit-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; gap: 0; font-size: 0.9rem; justify-content: center; } .mobile-hero-actions .btn-glass.btn-glass-labeled span, .mobile-hero-actions .entity-review-badge span, .mobile-hero-actions .quick-visit-btn span { display: none; } .mobile-hero-actions .score-badge.personal-score i { display: none; } /* ================================================================== 8. LIGHT MODE OVERRIDES Dark mode keeps the dark-glass look (rules above). Light mode flips the glass to a light surface with a visible gray border so buttons stay readable on white backgrounds (modal popups, pages without a hero backdrop, etc.). :where() keeps the specificity low so the per-action active rules (specificity 30) reliably override the border/color in both themes. ================================================================== */ html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass, html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge, html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn { background: rgba(255, 255, 255, 0.92); border-color: #dee2e6; color: #495057; } html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass:hover, html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .btn-glass:focus, html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .entity-review-badge:hover, html:not([data-bs-theme="dark"]) :where( .desktop-hero-actions, .mobile-hero-actions, #bdActionBar, #bgActionBar, #bkDetailActionBar, #vgDetailActionBar, #bgDetailActionBar, #tdActionBar, #pkdActionBar, #alActionBar, #arActionBar, #snActionBar, #alDetailActionBar, #arDetailActionBar, #snDetailActionBar, #placeQvActionBar, #tqvmActionBar, #adActionBar ) .quick-visit-btn:hover { background: #f8f9fa; border-color: #adb5bd; color: #212529; } /* Light-mode toggle defaults — slightly darker gray than dark mode for readability on white. */ html:not([data-bs-theme="dark"]) .btn-glass.action-want, html:not([data-bs-theme="dark"]) .btn-glass.action-own, html:not([data-bs-theme="dark"]) .btn-glass.action-favorite, html:not([data-bs-theme="dark"]) .btn-glass.action-list, html:not([data-bs-theme="dark"]) .btn-glass.action-share, html:not([data-bs-theme="dark"]) .btn-glass.back-btn, html:not([data-bs-theme="dark"]) .btn-glass.edit-title-btn { color: #6c757d; } /* Light-mode active-state tints — give the lit buttons a faint colored fill so they stand out on white backgrounds. The ACCENT BORDER + ICON colors come from rule #6 above, which has specificity 30 vs this file's :where() base of 10 — so border-color reliably wins. */ html:not([data-bs-theme="dark"]) .btn-glass.action-want.active { background: rgba(13, 202, 240, 0.10); } html:not([data-bs-theme="dark"]) .btn-glass.action-own.active { background: rgba(255, 193, 7, 0.12); } html:not([data-bs-theme="dark"]) .btn-glass.action-favorite.active { background: rgba(220, 53, 69, 0.10); } html:not([data-bs-theme="dark"]) .btn-glass.action-list.active { background: rgba(13, 202, 240, 0.10); } html:not([data-bs-theme="dark"]) .entity-review-badge.btn-warning { background: rgba(255, 193, 7, 0.12); } html:not([data-bs-theme="dark"]) .quick-visit-btn.btn-success { background: rgba(25, 135, 84, 0.10); }