/* ======================================== BookStatusBadge - reading-status pill Used on book cards (cover overlay) and the books list view. ======================================== */ .bksb-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 600; line-height: 1; padding: 3px 6px; border-radius: 4px; cursor: pointer; white-space: nowrap; user-select: none; } .bksb-badge i { font-size: 0.85em; } /* Status colors — Bootstrap palette */ .bksb-toread { background: #0dcaf0; color: #000; } .bksb-reading { background: #0d6efd; color: #fff; } .bksb-finished { background: #198754; color: #fff; } .bksb-abandoned { background: #6c757d; color: #fff; } /* Unset: subtle until hovered */ .bksb-none { background: rgba(0, 0, 0, 0.6); color: #fff; opacity: 0.7; } .bksb-none:hover { opacity: 1; } /* Larger variant — used in the book detail modal & page action bars */ .bksb-badge-lg { font-size: 0.8rem; padding: 6px 11px; gap: 5px; } /* In an action bar the unset pill needs to read clearly, so it uses a visible outline instead of the faint cover-overlay treatment. */ .bksb-badge-lg.bksb-none { background: transparent; color: var(--mv-text-secondary, #495057); border: 1px solid var(--mv-border-color, #dee2e6); opacity: 1; } .bksb-badge-lg.bksb-none:hover { color: var(--mv-text-primary, #212529); border-color: var(--mv-border-hover, #adb5bd); } /* Cover overlay placement (top-right of a book card cover) */ .bksb-overlay { position: absolute; top: 6px; right: 6px; z-index: 2; } /* ----- Pop-up menu (appended to ) ----- */ .bksb-menu { position: absolute; z-index: 3000; min-width: 158px; background: var(--mv-bg-card, #fff); border: 1px solid var(--mv-border-color, #dee2e6); border-radius: 6px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18); padding: 4px; } .bksb-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: transparent; padding: 6px 9px; border-radius: 4px; font-size: 0.82rem; text-align: left; cursor: pointer; color: var(--mv-text-primary, #212529); } .bksb-menu-item:hover { background: var(--mv-bg-surface, #f1f3f5); } .bksb-menu-item i:first-child { width: 1em; text-align: center; } .bksb-menu-active { font-weight: 600; } .bksb-menu-check { margin-left: auto; color: #198754; } .bksb-menu-sep { height: 1px; background: var(--mv-border-color, #dee2e6); margin: 4px 2px; } .bksb-menu-clear { color: var(--mv-text-muted, #6c757d); } /* ======================================== DARK MODE ======================================== */ [data-bs-theme="dark"] .bksb-none { background: rgba(0, 0, 0, 0.75); } [data-bs-theme="dark"] .bksb-menu { background: var(--mv-bg-card); border-color: var(--mv-border-color); } [data-bs-theme="dark"] .bksb-menu-item { color: var(--mv-text-primary); } [data-bs-theme="dark"] .bksb-menu-item:hover { background: var(--mv-bg-surface); }