diff options
Diffstat (limited to 'web/css/player.css')
| -rw-r--r-- | web/css/player.css | 302 |
1 files changed, 0 insertions, 302 deletions
diff --git a/web/css/player.css b/web/css/player.css deleted file mode 100644 index 45d80bc..0000000 --- a/web/css/player.css +++ /dev/null @@ -1,302 +0,0 @@ -/* Player */ -.player { - position: fixed; - inset: auto auto 1rem 1rem; - width: var(--floating-w, 320px); - height: var(--floating-h, 240px); - background: var(--player-bg); - color: var(--text-primary); - border: 1px solid var(--border); - border-radius: 0.5rem; - box-shadow: 0 8px 32px rgba(0,0,0,0.4); - overflow: hidden; - z-index: 60; - display: none; /* hidden by default until something plays */ - transition: inset var(--transition-base), width var(--transition-base), height var(--transition-base), box-shadow var(--transition-base); -} -.player.open { - display: flex; - flex-direction: column; -} -.player .stage { - flex: 1 1 auto; - position: relative; - height: auto; - background: var(--player-stage-bg); - overflow: hidden; -} -.player .big-play .play-icon { - width: 2rem; - height: 2rem; - font-size: 0.8rem; -} -.player.minimized { - inset: auto auto 1rem 1rem; - width: min(20rem, calc(100vw - 2rem)); - border: 1px solid var(--border); - border-radius: var(--radius-sm); - box-shadow: 0 8px 32px rgba(0,0,0,0.4); - overflow: hidden; -} -.player.minimized .stage, -.player.minimized .controls { - display: none; -} -.player .player-restore { - display: none; -} -.player.minimized .player-restore { - display: flex; - align-items: center; - width: 100%; - min-height: 2.25rem; - padding: 0.45rem 0.65rem; - border: 0; - background: var(--player-bg); - color: var(--text-secondary); - cursor: pointer; - font: inherit; - font-size: 0.8rem; - text-align: left; -} -.player.minimized .player-restore:hover { - color: var(--text-primary); - background: var(--bg-surface-hover); -} -.player.minimized .player-restore span { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} -.player.is-fullscreen { - inset: 0; - width: auto; - height: auto; - border: 0; - border-radius: 0; - box-shadow: none; - background: var(--player-stage-bg); - display: flex; - flex-direction: column; - justify-content: center; -} - -.detach-page { - margin: 0; - width: 100vw; - height: 100vh; - overflow: hidden; - background: var(--bg-body); -} - -/* Detached popup: fill the whole popup window */ -.player.detached { - position: relative; - inset: 0; - width: 100%; - height: 100%; - border-radius: 0; - border: none; - box-shadow: none; - display: flex; - flex-direction: column; -} -.player.detached .stage { - flex: 1 1 auto; - height: auto !important; - overflow: hidden; -} -.player.detached .controls { - flex: 0 0 auto; -} - -.player.is-fullscreen .stage { - flex: 1 1 auto; - height: auto; - display: flex; - align-items: center; - justify-content: center; -} - -.player video, .player audio { - width: 100%; - height: 100%; - display: block; - object-fit: contain; -} -.player.is-fullscreen video, .player.is-fullscreen audio { - max-height: 100%; -} - -.player.crop-mode video { - object-fit: cover; - object-position: var(--crop-x, 50%) var(--crop-y, 50%); -} - -.crop-indicator { - font-size: 0.75rem; - color: var(--text-secondary); - padding: 0 0.25rem; - user-select: none; -} - -/* Cover art for audio playback */ -.player .cover-art { - width: 100%; - height: 100%; - object-fit: contain; - display: block; - background: var(--player-stage-bg); -} - -/* Image viewer inside player */ -.player .media-image { - width: 100%; - height: 100%; - object-fit: contain; - display: block; - transition: transform 0.15s ease; - user-select: none; -} -.player .media-image.hidden { - display: none; -} - -/* Show/hide controls per media type */ -.player.has-image .video-only { - display: none !important; -} -.player:not(.has-image) .image-only { - display: none !important; -} - -/* Overlay controls */ -.player .controls { - flex: 0 0 auto; - display: flex; - align-items: center; - gap: 0.35rem; - padding: 0.35rem 0.5rem; - border-top: 1px solid var(--border); -} -.player .controls .spacer { flex: 1 1 auto; } - -.player .time { - font-family: var(--font-mono); - font-size: 0.78rem; - color: var(--text-secondary); - white-space: nowrap; -} - -/* Progress bar */ -.progress-track { - position: relative; - flex: 1 1 auto; - height: 0.35rem; - background: var(--player-progress-bg); - border-radius: 999px; - cursor: pointer; - overflow: hidden; -} -.progress-track:hover { height: 0.5rem; } -.progress-buffered { - position: absolute; - inset: 0; - width: 100%; - border-radius: 999px; - background: transparent; - pointer-events: none; - z-index: 1; -} -.progress-fill { - position: absolute; - inset: 0 auto 0 0; - width: 0%; - background: var(--player-progress-fill); - border-radius: 999px; - transition: width 120ms linear; - z-index: 2; -} -.progress-thumb { - position: absolute; - top: 50%; - width: 0.9rem; - height: 0.9rem; - background: var(--player-thumb); - border-radius: 50%; - transform: translate(-50%, -50%) scale(0); - transition: transform var(--transition-fast); - pointer-events: none; - z-index: 3; -} -.progress-track:hover .progress-thumb, -.progress-track:focus-within .progress-thumb { - transform: translate(-50%, -50%) scale(1); -} - -/* Touch-friendly progress bar */ -.progress-track { - touch-action: none; -} - -@media (max-width: 520px) { - .player .controls { - gap: 0.35rem; - padding: 0.4rem 0.5rem; - } - .volume-slider { - width: 3.5rem; - } - .big-play .play-icon { - width: 2.8rem; - height: 2.8rem; - font-size: 1rem; - } -} -.volume-control { - display: flex; - align-items: center; - gap: 0.25rem; -} -.volume-slider { - width: 5rem; - height: 0.25rem; - cursor: pointer; - accent-color: var(--accent); -} - -.detached-bar { - position: fixed; - inset: auto 0 0 0; - background: var(--player-bg); - color: var(--text-primary); - border-top: 1px solid var(--border); - z-index: 59; - padding: 0.5rem 0.75rem; - text-align: center; - font-size: 0.85rem; -} -.detached-bar.hidden { - display: none; -} - -/* Big play button */ -.big-play { - position: absolute; - inset: 0; - display: grid; - place-items: center; - background: var(--overlay-dim); - cursor: pointer; - z-index: 5; -} -.big-play .play-icon { - width: 3.5rem; - height: 3.5rem; - border-radius: 50%; - background: var(--overlay-button-bg); - color: var(--overlay-button-color); - display: grid; - place-items: center; - font-size: 1.25rem; -} |
