mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Fix video modal rail layout
This commit is contained in:
thePR0M3TH3AN committed
1 parent
17115d6e15
commit
96f74056eb
2 files changed
+41
-11
No files matched your search
@@ -5,4 +5,4 @@
|
||||
--player-modal-inline-padding,clamp(var(--space-md-plus),4vw,var(--space-2xl))
|
||||
);overflow:visible}#playerModal .video-modal__primary>.watch-container:first-child{padding-block-start:var(--player-modal-vertical-padding)}#playerModal .video-modal__secondary>.watch-container:last-child{padding-block-end:var(--player-modal-vertical-padding)}#playerModal .modal-nav .watch-container{max-width:none;margin-inline:0}#playerModal .modal-info-panel{display:flex;flex-direction:column;gap:var(--space-lg)}#playerModal h2#videoTitle{margin:0;font-size:clamp(var(--font-size-xl),calc(var(--font-size-modal-title-base) + .5vw),var(--font-size-xl-plus));font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .modal-meta{font-size:var(--font-size-sm);line-height:1.4;color:var(--color-text-muted)}#playerModal .modal-view-count{font-weight:600;color:var(--color-text)}#playerModal .channel-card{align-items:center;padding:var(--space-md-plus) var(--space-lg)}#playerModal .channel-card,#playerModal .player-modal__module{display:flex;gap:var(--space-md);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .player-modal__module{flex-direction:column;width:100%;padding:clamp(var(--space-md-plus),3vw,var(--space-2xl))}#playerModal .player-modal__module-title{margin:0;font-size:var(--font-size-lg);font-weight:600;line-height:1.3;color:var(--color-text)}#playerModal .player-modal__module-list{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;margin:0;padding:0;list-style:none}#playerModal .player-modal__module-scroll{max-height:clamp(14rem,calc(100vh - var(--player-modal-vertical-padding)*2 - var(--space-2xl)),28rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--space-2xs)}#playerModal .player-modal__module-scroll>li{scroll-margin-block:var(--space-xs)}@media (max-width:30rem){#playerModal .modal-nav .icon-button{width:var(--space-xl);height:var(--space-xl);min-width:var(--space-xl);min-height:var(--space-xl)}#playerModal .watch-container{padding-inline:var(--space-sm)}#playerModal .channel-card{gap:var(--space-sm);padding:var(--space-sm) var(--space-md)}}#playerModal .channel-card__avatar{flex-shrink:0;width:var(--avatar-size-lg);height:var(--avatar-size-lg);border-radius:var(--radius-full);overflow:hidden;background-color:var(--color-border-subtle)}#playerModal .channel-card__avatar img{display:block;width:100%;height:100%;-o-object-fit:cover;object-fit:cover}#playerModal .channel-card__name{margin:0;font-size:var(--font-size-lg);font-weight:600;color:var(--color-text)}#playerModal .channel-card__npub{margin:0;font-size:var(--font-size-sm);color:var(--color-text-muted)}#playerModal .description-panel{padding:var(--space-md-plus) var(--space-lg);border-radius:var(--radius-xl);border:var(--border-width-hairline) solid var(--color-border-translucent);background-color:var(--color-surface);box-shadow:var(--shadow-sm)}#playerModal .description-panel p{margin:0;font-size:var(--font-size-sm);line-height:1.6;color:var(--color-text)}.player-modal__content{position:relative;z-index:var(--z-modal-content);display:flex;flex:1 1 auto;width:100%;min-height:100%;flex-direction:column;overflow:visible;padding:0;margin:0;border:none;border-radius:0;background-color:var(--color-surface);box-shadow:none}@media (prefers-reduced-motion:reduce){.player-modal__content{transition-property:none}}#playerModal .modal-nav{position:sticky;top:0;z-index:var(--z-overlay-nav);--tw-translate-y:0px;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;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:var(--border-width-hairline) solid var(--color-border-translucent);backdrop-filter:blur(var(--modal-nav-backdrop-blur));-webkit-backdrop-filter:blur(var(--modal-nav-backdrop-blur))}#playerModal#playerModal .modal-nav__bar{display:block}#playerModal .modal-nav__bar{display:flex;width:100%;align-items:center;gap:.75rem;padding:.5rem}@media (min-width:640px){#playerModal .modal-nav__bar{padding-left:1rem;padding-right:1rem}}#playerModal .modal-nav__bar{padding-inline:var(
|
||||
--player-modal-inline-padding,clamp(var(--space-md-plus),4vw,var(--space-2xl))
|
||||
)}#playerModal#playerModal .modal-nav .modal-actions{display:block}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),38vw,var(--video-modal-secondary-max));display:grid;align-items:flex-start;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem}}.video-modal__layout{grid-template-columns:minmax(0,1fr)}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),32vw,var(--video-modal-secondary-max));grid-template-columns:minmax(0,var(--video-modal-primary-fr,1.65fr)) minmax(var(--video-modal-secondary-min),var(--video-modal-secondary-size))}.video-modal__primary,.video-modal__secondary{min-height:0}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),28vw,var(--video-modal-secondary-max))}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem}.video-modal__secondary{min-width:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch}}.video-modal__stage{position:relative;isolation:isolate;overflow:visible;--video-modal-ambient-bleed:clamp(var(--space-2xl),12vw,var(--space-5xl));--video-modal-ambient-scale:1.38;--video-modal-ambient-blur:clamp(128px,20vw,256px);--video-modal-ambient-opacity:1}.video-modal__video{position:relative;z-index:1;border-radius:var(--radius-xl);padding-block:clamp(var(--space-xs),2.5vw,var(--space-md-plus));background-color:color-mix(in srgb,var(--color-surface) 82%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--color-border-strong) 8%,transparent) inset;overflow:visible}.video-modal__ambient{position:absolute;inset:calc(var(--video-modal-ambient-bleed)*-1);border-radius:calc(var(--radius-3xl) + var(--video-modal-ambient-bleed));pointer-events:none;z-index:0;display:block;overflow:visible}.video-modal__ambient:before{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--color-overlay-strong) 18%,transparent) 0,color-mix(in srgb,var(--color-overlay) 34%,transparent) 62%,transparent 100%);opacity:.9;mix-blend-mode:screen;pointer-events:none}.video-modal__ambient-canvas{position:relative;width:100%;height:100%;display:block;transform:scale(var(--video-modal-ambient-scale));filter:blur(var(--video-modal-ambient-blur)) saturate(2) brightness(1.24);opacity:var(--video-modal-ambient-opacity)}@media (min-width:1024px){.video-modal__video{position:sticky;top:calc(var(--space-2xl) + var(--space-xl))}}#playerModal .video-modal__video video{position:relative;z-index:1;background-color:var(--color-black);border-radius:var(--radius-lg);box-shadow:var(--shadow-video-modal);max-height:min(80vh,56.25vw);-o-object-fit:contain;object-fit:contain}.video-modal__media{display:block;aspect-ratio:16/9;width:100%;-o-object-fit:contain;object-fit:contain}#playerModal.video-modal__details{display:block}.video-modal__details{display:flex;flex-direction:column;gap:1.5rem}.video-modal__meta{border-bottom-width:1px;border-color:var(--border-default);--tw-border-opacity:0.2;padding-bottom:1rem}#playerModal.video-modal__tags{display:block}.video-modal__tags{margin-left:-.25rem;margin-right:-.25rem;display:flLine truncated
|
||||
)}#playerModal#playerModal .modal-nav .modal-actions{display:block}#playerModal .modal-nav .modal-actions{display:flex;align-items:center;gap:.5rem;margin-left:auto}#playerModal .modal-nav .icon-button{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-full);color:var(--text-muted);transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;transition-timing-function:cubic-bezier(0,0,.2,1);width:var(--icon-size-lg);height:var(--icon-size-lg);background:var(--color-surface-tint-subtle);border:var(--border-width-hairline) solid var(--color-border-translucent-medium);color:var(--color-text-muted)}#playerModal .modal-nav .icon-button:focus-visible,#playerModal .modal-nav .icon-button:hover{background:var(--color-border-translucent-bright);border-color:var(--color-border-translucent-strong);color:var(--color-text)}.modal-nav--hidden{--tw-translate-y:-100%}.modal-nav--hidden,.modal-nav--visible{transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.modal-nav--visible{--tw-translate-y:0px}.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),38vw,var(--video-modal-secondary-max))}#playerModal.video-modal__layout{display:block}.video-modal__layout{display:flex;flex-direction:column;gap:1.5rem}@media (min-width:1024px){.video-modal__layout{gap:2rem}}.video-modal__layout{align-items:stretch;width:100%}@media (min-width:1024px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),32vw,var(--video-modal-secondary-max));flex-direction:row;align-items:flex-start}.video-modal__primary{flex:1 1 auto;min-width:0;min-height:0}.video-modal__secondary{flex:0 0 var(--video-modal-secondary-size);max-width:var(--video-modal-secondary-size);min-width:var(--video-modal-secondary-min);min-height:0}}@media (min-width:1280px){.video-modal__layout{--video-modal-secondary-size:clamp(var(--video-modal-secondary-min),28vw,var(--video-modal-secondary-max))}}.revert-modal__layout{display:grid;gap:1.5rem}@media (min-width:1024px){.revert-modal__layout{grid-template-columns:minmax(var(--revert-modal-sidebar-min),var(--revert-modal-sidebar-width)) minmax(0,1fr)}}#playerModal.video-modal__primary{display:block}.video-modal__primary{display:flex;flex-direction:column;gap:1.5rem;min-width:0;min-height:0}#playerModal.video-modal__secondary{display:block}.video-modal__secondary{display:flex;flex-direction:column;gap:1rem;min-width:0;min-height:0;width:100%;align-self:stretch}.video-modal__similar{display:none}@media (min-width:1024px){#playerModal.video-modal__similar{display:block}.video-modal__similar{display:flex;flex-direction:column;gap:1.5rem;align-self:stretch}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card{display:block}#playerModal .player-modal__module-item>.card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card{display:block}#playerModal .player-modal__module-item>.\!card{display:flex;width:100%;flex-direction:row;align-items:flex-start;gap:var(--space-md)}#playerModal .player-modal__module-item>.\!card .video-card__media,#playerModal .player-modal__module-item>.card .video-card__media{flex-shrink:0}#playerModal#playerModal .player-modal__module-item>.card .video-card__content{display:block}#playerModal .player-modal__module-item>.card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.\!card .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card .video-card__content{display:flex;min-width:0;flex:1 1 0%;flex-direction:column;gap:var(--space-sm)}#playerModal#playerModal .player-modal__module-item>.card .video-card__meta{display:block}#playerModal .player-modal__module-item>.card .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}#playerModal#playerModal .player-modal__module-item>.\!card .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card .video-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;font-size:var(--font-size-xs);line-height:var(--line-height-tight);color:var(--text-muted-strong)}.video-modal__stage{position:relative;isolation:isolate;overflow:visible;--video-modal-ambient-bleed:clamp(var(--space-2xl),12vw,var(--space-5xl));--video-modal-ambient-scale:1.38;--video-modal-ambient-blur:clamp(128px,20vw,256px);--video-modal-ambient-opacity:1}.video-modal__video{position:relative;z-indLine truncated
|
||||
+40
-10
@@ -1674,8 +1674,9 @@
|
||||
38vw,
|
||||
var(--video-modal-secondary-max)
|
||||
);
|
||||
@apply grid items-start gap-6 lg:gap-8;
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
@apply flex flex-col gap-6 lg:gap-8;
|
||||
align-items: stretch;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: theme('screens.lg')) {
|
||||
@@ -1685,16 +1686,20 @@
|
||||
32vw,
|
||||
var(--video-modal-secondary-max)
|
||||
);
|
||||
grid-template-columns:
|
||||
minmax(0, var(--video-modal-primary-fr, 1.65fr))
|
||||
minmax(
|
||||
var(--video-modal-secondary-min),
|
||||
var(--video-modal-secondary-size)
|
||||
);
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.video-modal__primary {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.video-modal__primary,
|
||||
.video-modal__secondary {
|
||||
flex: 0 0 var(--video-modal-secondary-size);
|
||||
max-width: var(--video-modal-secondary-size);
|
||||
min-width: var(--video-modal-secondary-min);
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
@@ -1723,11 +1728,16 @@
|
||||
|
||||
.video-modal__primary {
|
||||
@apply flex flex-col gap-6;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.video-modal__secondary {
|
||||
min-width: 0;
|
||||
@apply flex flex-col gap-4;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
width: 100%;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.video-modal__similar {
|
||||
@@ -1741,6 +1751,26 @@
|
||||
}
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item > .card {
|
||||
@apply flex w-full flex-row items-start gap-md;
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item > .card .video-card__media {
|
||||
@apply shrink-0;
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item > .card .video-card__content {
|
||||
@apply flex min-w-0 flex-1 flex-col gap-sm;
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item > .card .video-card__meta {
|
||||
@apply flex flex-wrap items-center gap-2 text-xs text-muted-strong;
|
||||
}
|
||||
|
||||
.video-modal__stage {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
|
||||
Reference in new issue
Block a user