/* Floating practice timer (issue #1900) — global stopwatch overlay. Rendered once at level so it floats above every editor and every fullscreen overlay. Draw.io / ACE .viewport-fullscreen use z-index: 9999, so this sits well above that. Theme-aware via --app-* variables. */ .practice-timer { position: fixed; top: 80px; right: 24px; z-index: 2147483000; min-width: 132px; border-radius: 0.5rem; background: var(--app-bg-secondary, #ffffff); color: var(--app-text, #212529); border: 1px solid var(--app-border, #dee2e6); box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.25); user-select: none; font-variant-numeric: tabular-nums; } .practice-timer[hidden] { display: none; } .practice-timer-grip { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.6rem; cursor: grab; touch-action: none; } .practice-timer-grip:active { cursor: grabbing; } .practice-timer-grip > .bi-stopwatch { opacity: 0.75; } .practice-timer-display { flex: 1 1 auto; text-align: center; font-size: 1.15rem; font-weight: 600; letter-spacing: 0.02em; } .practice-timer-close { border: none; background: transparent; color: inherit; opacity: 0.6; line-height: 1; padding: 0.1rem 0.25rem; border-radius: 0.25rem; cursor: pointer; } .practice-timer-close:hover, .practice-timer-close:focus { opacity: 1; background: var(--app-bg, rgba(0, 0, 0, 0.06)); } /* Active state on toolbar toggle buttons while the timer is visible. */ .practice-timer-toggle.active, .practice-timer-toggle[aria-pressed="true"] { background-color: var(--app-primary, #0d6efd); border-color: var(--app-primary, #0d6efd); color: #ffffff; } /* Windows High Contrast Mode support (mirrors sibling editors). */ @media (forced-colors: active) { .practice-timer { forced-color-adjust: none; border: 1px solid ButtonText; } .practice-timer-close { color: ButtonText; } .practice-timer-close:hover, .practice-timer-close:focus { color: SelectedItemText; background: SelectedItem; } .practice-timer-toggle.active, .practice-timer-toggle[aria-pressed="true"] { background-color: Highlight; border-color: Highlight; color: HighlightText; } }