thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-10-28 16:32:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #151 from PR0M3TH3AN/codex/fix-video-player-styling-issues

Browse Source 
Restore video modal layout and theming
This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-09-29 11:31:20 -04:00
2 parents b438564b64 fe39e65aa5
commit 0bf3ce8e8a
2 files changed
+54 -9
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/video-modal.html
+3 -3
View File
@@ -5,7 +5,7 @@
<!-- Navigation bar - sliding at top -->
<div
id="modalNav"
class="sticky top-0 z-60 bg-gradient-to-b from-black/80 to-transparent transition-transform duration-150"
class="modal-nav sticky top-0 z-60 transition-transform duration-150"
>
<div class="flex items-center px-6 py-4">
<button
@@ -119,11 +119,11 @@
</div>
</div>
<div class="player-modal__video">
<div class="player-modal__video modal-video-shell">
<video id="modalVideo" class="w-full aspect-video" controls></video>
</div>
<div class="player-modal__info">
<div class="player-modal__info modal-info-panel">
<!-- Title and icons row -->
<div class="flex items-center justify-between mb-2">
<h2 id="videoTitle" class="text-2xl font-bold text-white"></h2>
css/style.css
+51 -6
View File
@@ -301,23 +301,36 @@ header img {
#playerModal .player-modal__video {
width: 100%;
background-color: #000;
position: sticky;
top: 0;
z-index: 51;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(0.75rem, 3.5vw, 2.5rem);
background-color: var(--color-bg);
border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.18);
}
#playerModal .player-modal__video video {
width: 100%;
aspect-ratio: 16 / 9;
background-color: #000;
border-radius: 0.75rem;
display: block;
box-shadow: 0 1.125rem 2.75rem rgba(8, 11, 30, 0.55);
max-height: min(80vh, calc(100vw * 9 / 16));
object-fit: contain;
}
#playerModal .player-modal__info {
flex: 0 0 auto;
padding: 1.5rem;
padding-bottom: 3rem;
padding: clamp(1.5rem, 3vw, 2.5rem);
padding-bottom: clamp(2.5rem, 6vw, 4rem);
background-color: var(--color-bg);
border-top: 0.0625rem solid rgba(148, 163, 184, 0.16);
box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.35);
}
html.modal-open {
@@ -386,6 +399,35 @@ body.modal-open #app {
}
}
#modalNav.modal-nav,
.modal-nav {
background-color: var(--color-bg);
border-bottom: 0.0625rem solid rgba(148, 163, 184, 0.25);
box-shadow: 0 0.75rem 2rem rgba(8, 11, 30, 0.45);
}
.modal-nav .flex {
position: relative;
gap: 0.75rem;
}
.modal-nav .icon-button {
background-color: rgba(30, 41, 59, 0.85);
border: 0.0625rem solid rgba(148, 163, 184, 0.4);
color: #f8fafc;
box-shadow: none;
}
.modal-nav .icon-button:hover {
background-color: rgba(51, 65, 85, 0.95);
border-color: rgba(148, 163, 184, 0.55);
}
.modal-nav .icon-button:focus-visible {
outline: none;
box-shadow: 0 0 0 0.1875rem rgba(148, 163, 184, 0.45);
}
#modalNav {
position: sticky;
top: 0;
@@ -619,15 +661,18 @@ footer a:hover {
/* Override default button styles for back button */
.back-button {
background: rgba(0, 0, 0, 0.5) !important;
background: rgba(15, 23, 42, 0.75) !important;
padding: 0 !important;
color: rgb(209 213 219) !important;
color: rgb(226 232 240) !important;
transform: none !important;
border: 0.0625rem solid rgba(148, 163, 184, 0.4) !important;
box-shadow: none;
}
.back-button:hover {
background: rgba(0, 0, 0, 0.7) !important;
background: rgba(51, 65, 85, 0.95) !important;
color: white !important;
border-color: rgba(148, 163, 184, 0.55) !important;
}
/* Modal Container */