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

Restyle player modal navigation bar

Browse Source
This commit is contained in:
thePR0M3TH3AN committed 2025-10-13 20:10:08 -04:00
1 parent e71eedf4d3
commit bda1c2ef2d
2 files changed
+77 -35
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/video-modal.html
+43 -27
View File
@@ -11,33 +11,49 @@
<div class="bv-modal__panel" tabindex="-1">
<div class="player-modal__container video-modal__container">
<div class="player-modal__content video-modal__panel flex flex-col gap-6">
<div
id="modalNav"
class="modal-nav modal-nav--visible video-modal__nav sticky top-0 z-60"
>
<div class="video-modal__nav-bar">
<button
id="closeModal"
type="button"
class="video-modal__close focus-ring"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-5 w-5"
aria-hidden="true"
>
<path d="M15 18l-6-6 6-6" />
</svg>
<span class="sr-only">Close player</span>
</button>
<div id="modalNav" class="modal-nav modal-nav--visible">
<div class="watch-container modal-nav__bar">
<div class="modal-nav__context">Now watching</div>
<div class="modal-actions">
<a href="/" class="icon-button focus-ring" aria-label="Return to home">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-5 w-5"
aria-hidden="true"
>
<path d="M3 11L12 3l9 8" />
<path d="M5 13v8h14v-8" />
<path d="M9 21v-6h6v6" />
</svg>
<span class="sr-only">Return to home</span>
</a>
<button id="closeModal" type="button" class="icon-button focus-ring">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="h-5 w-5"
aria-hidden="true"
>
<path d="M15 18l-6-6 6-6" />
</svg>
<span class="sr-only">Close player</span>
</button>
</div>
</div>
</div>
css/tailwind.source.css
+34 -8
View File
@@ -881,20 +881,46 @@
@apply video-modal__panel;
}
.video-modal__nav {
@apply sticky top-0 z-[60] border-b border-border border-opacity-20 bg-surface bg-opacity-95 backdrop-blur-md;
#playerModal .modal-nav {
@apply sticky top-0 z-[60] transition-transform duration-150 translate-y-0;
background-color: var(--color-overlay-darker);
background-image: linear-gradient(
180deg,
var(--color-overlay-panel-gradient-start) 0%,
var(--color-overlay-panel-gradient-end) 100%
);
border-bottom: 1px solid var(--color-border-translucent);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.video-modal__nav-bar {
@apply flex w-full items-center justify-between gap-3 px-2 py-2 sm:px-4;
#playerModal .modal-nav__bar {
@apply flex w-full items-center 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;
#playerModal .modal-nav__context {
@apply text-xs font-semibold uppercase tracking-wide text-muted;
}
.modal-nav {
@apply video-modal__nav transition-transform duration-150 translate-y-0;
#playerModal .modal-nav .modal-actions {
@apply flex items-center gap-2;
margin-left: auto;
}
#playerModal .modal-nav .icon-button {
@apply inline-flex items-center justify-center rounded-full text-muted transition duration-150 ease-out;
width: 2.5rem;
height: 2.5rem;
background: var(--color-surface-tint-subtle);
border: 1px solid var(--color-border-translucent-medium);
color: var(--color-text-muted);
}
#playerModal .modal-nav .icon-button:hover,
#playerModal .modal-nav .icon-button:focus-visible {
background: var(--color-border-translucent-bright);
border-color: var(--color-border-translucent-strong);
color: var(--color-text);
}
.modal-nav--hidden {