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

Rework video modal layout and gating

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-12 17:32:43 -04:00
1 parent 92794d47dc
commit 5ad74a26bf
4 files changed
+397 -343
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

css/tailwind.source.css
+51 -17
View File
@@ -625,7 +625,15 @@
}
.video-modal__nav {
@apply sticky top-0 z-[60] border-b border-border border-opacity-40 bg-surface;
@apply sticky top-0 z-[60] border-b border-border border-opacity-20 bg-surface bg-opacity-95 backdrop-blur-md;
}
.video-modal__nav-bar {
@apply flex w-full items-center justify-between gap-3 px-2 py-2 sm:px-4;
}
.video-modal__close {
@apply inline-flex h-10 w-10 items-center justify-center rounded-full bg-panel text-text transition duration-base ease-out hover:bg-panel-hover;
}
.modal-nav {
@@ -640,36 +648,62 @@
@apply translate-y-0;
}
.video-modal__actions {
@apply ml-auto flex flex-nowrap items-center justify-end gap-2;
.video-modal__layout {
@apply grid gap-6 lg:gap-8;
}
.modal-actions {
@apply video-modal__actions;
.video-modal__primary {
@apply flex flex-col gap-6;
}
.video-modal__secondary {
@apply flex flex-col gap-4;
}
.video-modal__video {
@apply z-[51] flex w-full flex-shrink-0 items-center justify-center border-b border-border border-opacity-20 bg-surface lg:sticky lg:top-0;
}
.player-modal__video {
@apply video-modal__video;
@apply relative overflow-hidden rounded-3xl bg-black shadow-2xl lg:sticky lg:top-20;
}
.video-modal__media {
@apply block aspect-video w-full rounded-xl bg-black object-contain shadow-2xl;
@apply block aspect-video w-full object-contain;
}
.player-modal__video video {
@apply video-modal__media;
.video-modal__details {
@apply flex flex-col gap-6;
}
.video-modal__info {
@apply flex-none border-t border-border border-opacity-20 bg-surface;
.video-modal__meta {
@apply border-b border-border border-opacity-20 pb-4;
}
.player-modal__info {
@apply video-modal__info;
.video-modal__actions-row {
@apply flex flex-wrap items-center gap-3;
}
.video-modal__action-button {
@apply inline-flex h-11 min-w-[2.75rem] items-center justify-center gap-2 rounded-full border border-border border-opacity-30 bg-panel px-3 text-sm font-semibold text-text transition duration-base ease-out hover:bg-panel-hover;
}
.video-modal__action-label {
@apply hidden sm:inline;
}
.video-modal__action-icon {
@apply h-5 w-5;
}
.video-modal__channel,
.video-modal__description,
.video-modal__stats {
@apply rounded-2xl border border-border border-opacity-20 bg-surface px-6 py-5 shadow-sm;
}
.video-modal__progress {
@apply h-2 w-full overflow-hidden rounded-full bg-border-subtle;
}
.video-modal__stat-metrics {
@apply flex flex-wrap items-center justify-between gap-3 text-sm text-muted;
}
.profile-pane {