/* ======================================== BookProgress - one reading-progress element per book, per view. Shown only while a book is in the Reading status. ======================================== */ .bkp { display: inline-flex; align-items: center; gap: 6px; max-width: 140px; vertical-align: middle; } .bkp-editable { cursor: pointer; } /* Bar */ .bkp-bar-track { flex: 1 1 auto; height: 6px; min-width: 50px; border-radius: 3px; background: var(--mv-bg-surface, #e9ecef); overflow: hidden; } .bkp-bar-fill { display: block; height: 100%; background: #0d6efd; border-radius: 3px; } .bkp-bar-label { flex: 0 0 auto; font-size: 0.7rem; font-weight: 600; color: var(--mv-text-secondary, #495057); min-width: 2.4em; text-align: right; } /* "Set %" empty-state chip */ .bkp-set { display: inline-flex; align-items: center; gap: 3px; font-size: 0.66rem; font-weight: 600; line-height: 1; padding: 3px 7px; border-radius: 4px; white-space: nowrap; color: var(--mv-text-secondary, #495057); border: 1px dashed var(--mv-border-color, #dee2e6); } .bkp-set i { font-size: 0.85em; } .bkp-editable:hover .bkp-set { color: var(--mv-text-primary, #212529); border-color: var(--mv-border-hover, #adb5bd); } /* ----- Editor popup (appended to ) ----- */ .bkp-pop { position: absolute; z-index: 3000; width: 200px; 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: 10px; } .bkp-range { width: 100%; margin: 0 0 8px; accent-color: #0d6efd; } .bkp-pop-row { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .bkp-num { width: 70px; } .bkp-pct-sign { font-size: 0.85rem; color: var(--mv-text-secondary, #495057); } .bkp-pop-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .bkp-clear { padding: 0; color: var(--mv-text-muted, #6c757d); text-decoration: none; } .bkp-clear:hover { color: #dc3545; } /* Book-detail placement: let the bar stretch wider */ .bkp-detail-progress:empty { display: none; } .bkp-detail-progress .bkp { max-width: 260px; } /* ======================================== DARK MODE ======================================== */ [data-bs-theme="dark"] .bkp-bar-track { background: var(--mv-bg-surface); } [data-bs-theme="dark"] .bkp-set { color: var(--mv-text-secondary); border-color: var(--mv-border-color); } [data-bs-theme="dark"] .bkp-pop { background: var(--mv-bg-card); border-color: var(--mv-border-color); }