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

Merge pull request #850 from PR0M3TH3AN/codex/update-video-modal-markup-and-styles

Browse Source 
Refine video modal header spacing
This commit is contained in:
thePR0M3TH3AN authored and GitHub committed 2025-10-24 13:38:55 -04:00
2 parents 2157b7c23b 50b83c4dfe
commit 34dd506f05
2 files changed
+56 -29
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

components/video-modal.html
+35 -25
View File
@@ -12,29 +12,39 @@
<div class="player-modal__container video-modal__container">
<div id="modalNav" class="modal-nav modal-nav--visible">
<div class="watch-container modal-nav__bar">
<div class="modal-actions">
<button
id="closeModal"
type="button"
class="icon-button focus-ring accent-action-button"
<div class="modal-nav__rail">
<div class="modal-nav__slot modal-nav__slot--primary">
<div class="modal-actions">
<button
id="closeModal"
type="button"
class="icon-button focus-ring accent-action-button"
>
<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
class="modal-nav__slot modal-nav__slot--context"
data-modal-nav-context
>
<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="modalNavContext" class="modal-nav__context" hidden></div>
</div>
</div>
</div>
</div>
@@ -86,8 +96,8 @@
</div>
</div>
<div class="video-modal__actions-row flex flex-wrap items-center justify-between gap-3">
<div class="video-modal__reactions flex flex-wrap items-center gap-3 sm:gap-4">
<div class="video-modal__actions-row">
<div class="video-modal__reactions">
<div class="video-modal__reaction-buttons inline-flex flex-wrap items-center gap-2">
<button
id="modalLikeBtn"
@@ -178,7 +188,7 @@
<span class="sr-only" data-reaction-meter-sr>No reactions yet</span>
</div>
</div>
<div class="video-modal__actions-group flex flex-wrap items-center gap-3">
<div class="video-modal__actions-group">
<button
id="copyMagnetBtn"
type="button"
css/tailwind.source.css
+21 -4
View File
@@ -1650,13 +1650,27 @@
}
#playerModal .modal-nav__bar {
@apply flex w-full items-center justify-between gap-3 px-2 py-2 sm:px-4;
@apply flex w-full items-center justify-start gap-3 py-2;
padding-inline: var(
--player-modal-inline-padding,
clamp(var(--space-sm), 3vw, var(--space-xl))
);
}
#playerModal .modal-nav__rail {
@apply flex w-full items-center justify-between gap-3;
}
#playerModal .modal-nav__slot {
@apply flex items-center gap-2;
}
#playerModal .modal-nav__slot--context {
@apply justify-end;
margin-inline-start: auto;
min-inline-size: 0;
}
#playerModal .modal-nav__context {
@apply text-xs font-semibold uppercase tracking-wide text-muted;
}
@@ -2108,11 +2122,13 @@
}
.video-modal__actions-row {
@apply flex flex-col gap-4 md:flex-row md:items-start md:justify-between;
@apply flex w-full flex-wrap items-start gap-y-3 gap-x-4;
}
.video-modal__reactions {
@apply flex flex-wrap items-start gap-3 md:flex-nowrap md:items-center md:gap-4;
@apply flex flex-wrap items-start gap-3 sm:gap-4;
flex: 1 1 var(--menu-min-width);
min-inline-size: 0;
}
.video-modal__reaction-buttons {
@@ -2187,7 +2203,8 @@
}
.video-modal__actions-group {
@apply flex flex-wrap items-center justify-start gap-3 md:justify-end;
@apply flex flex-wrap items-start justify-end gap-3;
margin-inline-start: auto;
}
.video-modal__action-button {