thePR0M3TH3AN/bitvid
1
0 Fork 0
mirror of https://github.com/PR0M3TH3AN/bitvid.git synced 2026-11-06 04:42:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #508 from PR0M3TH3AN/codex/update-player-modal-styles-and-markup

Browse Source 
Refine player modal styles
This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-10-13 20:33:38 -04:00
2 parents b18e87a20d 22995594a5
commit 8131c20df4
2 files changed
+97 -27
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/video-modal.html
+17 -27
View File
@@ -72,14 +72,12 @@
</div>
<div class="watch-container">
<div class="video-modal__details flex flex-col gap-6">
<div class="modal-info-panel">
<div class="video-modal__details flex flex-col gap-6">
<div
class="video-modal__headline flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between"
>
<h2
id="videoTitle"
class="video-modal__title text-2xl font-semibold leading-tight text-text sm:text-3xl"
></h2>
<h2 id="videoTitle" class="video-modal__title"></h2>
<div
id="modalStatus"
class="video-modal__status text-sm text-muted lg:text-right"
@@ -91,10 +89,10 @@
<div
class="video-modal__meta flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between"
>
<div class="video-modal__meta-info flex flex-wrap items-center gap-3 text-sm text-muted">
<span id="videoTimestamp">Posted just now</span>
<span id="videoEditedTimestamp" class="hidden">Last edited just now</span>
<span id="videoViewCount" class="video-modal__view-count">– views</span>
<div class="video-modal__meta-info flex flex-wrap items-center gap-3">
<span id="videoTimestamp" class="modal-meta">Posted just now</span>
<span id="videoEditedTimestamp" class="modal-meta hidden">Last edited just now</span>
<span id="videoViewCount" class="modal-meta modal-view-count">– views</span>
</div>
</div>
@@ -358,37 +356,29 @@
</div>
</div>
</div>
</div>
<div class="video-modal__channel flex flex-wrap items-center justify-between gap-4 rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm">
<div class="flex items-center gap-4">
<div class="video-modal__avatar h-14 w-14 overflow-hidden rounded-full bg-border-subtle">
<div class="channel-card">
<div class="channel-card__avatar">
<img
id="creatorAvatar"
src=""
alt="Creator"
class="h-full w-full cursor-pointer object-cover"
class="cursor-pointer"
/>
</div>
<div class="flex flex-col gap-1">
<h3
id="creatorName"
class="cursor-pointer text-lg font-semibold text-text"
>
<h3 id="creatorName" class="channel-card__name cursor-pointer">
Creator Name
</h3>
<p id="creatorNpub" class="text-sm text-muted">npub...</p>
<p id="creatorNpub" class="channel-card__npub">npub...</p>
</div>
</div>
</div>
<div class="video-modal__description rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5">
<p
id="videoDescription"
class="whitespace-pre-wrap text-sm leading-relaxed text-text"
>
No description available.
</p>
<div class="description-panel">
<p id="videoDescription" class="whitespace-pre-wrap">
No description available.
</p>
</div>
</div>
</div>
</div>
css/tailwind.source.css
+80
View File
@@ -877,6 +877,86 @@
padding-inline: clamp(1rem, 3vw, 2rem);
}
#playerModal .modal-info-panel {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
#playerModal h2#videoTitle {
margin: 0;
font-size: clamp(1.5rem, 1.25rem + 0.5vw, 1.875rem);
font-weight: 600;
line-height: 1.3;
color: var(--color-text);
}
#playerModal .modal-meta {
font-size: 0.875rem;
line-height: 1.4;
color: var(--color-text-muted);
}
#playerModal .modal-view-count {
font-weight: 600;
color: var(--color-text);
}
#playerModal .channel-card {
display: flex;
align-items: center;
gap: 1rem;
padding: 1.25rem 1.5rem;
border-radius: 1rem;
border: 1px solid var(--color-border-translucent);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
#playerModal .channel-card__avatar {
flex-shrink: 0;
width: 3.5rem;
height: 3.5rem;
border-radius: 9999px;
overflow: hidden;
background-color: var(--color-border-subtle);
}
#playerModal .channel-card__avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
#playerModal .channel-card__name {
margin: 0;
font-size: 1.125rem;
font-weight: 600;
color: var(--color-text);
}
#playerModal .channel-card__npub {
margin: 0;
font-size: 0.875rem;
color: var(--color-text-muted);
}
#playerModal .description-panel {
padding: 1.25rem 1.5rem;
border-radius: 1rem;
border: 1px solid var(--color-border-translucent);
background-color: var(--color-surface);
box-shadow: var(--shadow-sm);
}
#playerModal .description-panel p {
margin: 0;
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-text);
}
.player-modal__content {
@apply video-modal__panel;
}