mirror of
https://github.com/PR0M3TH3AN/bitvid.git
synced 2026-10-27 07:52:24 +00:00
Update player modal similar content styling
This commit is contained in:
thePR0M3TH3AN committed
1 parent
5818300377
commit
cc99f9e9fb
2 files changed
+145
-30
No files matched your search
@@ -5,4 +5,6 @@
|
||||
--player-modal-inline-padding,clamp(var(--space-md),4vw,var(--space-xl-plus))
|
||||
);overflow:visible}#playerModal .watch-container.video-modal__similar{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#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-md-plus)}#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;gap:var(--space-md);padding:var(--space-md) var(--space-lg)}#playerModal .channel-card,#playerModal .player-modal__module{display:flex;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;gap:clamp(var(--space-2xs),1vw,var(--space-sm));width:100%;padding:clamp(var(--space-xs),1vw,var(--space-sm))}#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 .video-modal__similar .player-modal__module{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding:clamp(var(--space-2xs),.6vw,var(--space-xs));border-width:0;box-shadow:none;background-color:transparent}#playerModal .video-modal__similar .player-modal__module-title{padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-3xs),.6vw,var(--space-xs));padding-inline:clamp(var(--space-3xs),.6vw,var(--space-2xs));padding-bottom:clamp(var(--space-3xs),.6vw,var(--space-2xs))}#playerModal .player-modal__module-scroll{max-height:clamp(14rem,calc(100vh - var(--player-modal-vertical-padding)*2 - var(--space-2xl)),28rem);overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;scrollbar-gutter:stable;padding-inline-end:var(--space-xs)}#playerModal .video-modal__similar .player-modal__module-scroll{max-height:none;overflow:visible;padding-inline-end:0;scrollbar-gutter:auto}#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(--surface-overlay-panel);background-image:linear-gradient(180deg,color-mix(in srgb,var(--surface-overlay-panel) 94%,transparent) 0,color-mix(in srgb,var(--surface-overlay-panel) 88%,transparent) 100%);border-bottom:var(--border-width-hairline) solid var(--border-oveLine truncated
|
||||
--player-modal-primary-inline-padding-lg,clamp(var(--space-sm),2.75vw,var(--space-lg))
|
||||
)}}.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;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#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;flex-wrap:nowrap;align-items:stretch;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;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-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 .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}#playerModal .video-modal__similar .player-modal__module-item>.card{--player-modal-similar-thumb:clamp(6.75rem,calc(var(--video-modal-secondary-min, 320px)*0.34),10.5rem);display:grid;grid-template-columns:var(--player-modal-similar-thumb) minmax(0,1fr);grid-auto-rows:minmax(0,1fr);align-items:stretch;gap:clamp(var(--space-4xs),.65vw,var(--space-2xs));padding:clamp(var(--space-4xs),.7vw,var(--space-sm));width:100%}#playerModal .video-modal__similar .player-modal__module-item>.\!card{--player-modal-similar-thumb:clamp(6.75rem,calc(var(--video-modal-secondary-min, 320px)*0.34),10.5rem)!important;display:grid!important;grid-template-columns:var(--player-modal-similar-thumb) minmax(0,1fr)!important;grid-auto-rows:minmax(0,1fr)!important;align-items:stretch!important;gap:clamp(var(--space-4xs),.65vw,var(--space-2xs))!important;padding:clamp(var(--space-4xs),.7vw,var(--space-sm))!important;width:100%!important}#playerModal .video-modal__similar .player-modal__module-item>.card .video-card__media{inline-size:var(--player-modal-similar-thumb);max-inline-size:clamp(calc(var(--space-xl-plus)*1.2Line truncated
|
||||
)}}.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;flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module{height:100%;display:flex;flex:1 1 auto;min-height:0;flex-direction:column}#playerModal .video-modal__similar .player-modal__module-list{flex:1 1 auto;min-height:0}#playerModal .video-modal__similar .player-modal__module-scroll{height:100%;max-height:none;min-height:0}}#playerModal .player-modal__module-item{width:100%}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card){display:flex;width:100%;flex-direction:row;flex-wrap:nowrap;align-items:stretch;gap:var(--space-md)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media{width:clamp(5.75rem,18vw,8rem)!important}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__media,#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__media{flex-shrink:0;overflow:hidden;border-radius:var(--radius-lg)}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-card) .video-card__content{padding:clamp(var(--space-sm),1.25vw,var(--space-md))!important}#playerModal#playerModal .player-modal__module-item>.card:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__content{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.card:not(.player-modal__similar-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:not(.player-modal__similar-card) .video-card__meta{display:block}#playerModal .player-modal__module-item>.\!card:not(.player-modal__similar-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 .video-modal__similar .player-modal__module-list{gap:clamp(var(--space-2xs),.85vw,var(--space-sm))}.player-modal__similar-card{--player-modal-similar-thumb:clamp(6.75rem,calc(var(--video-modal-secondary-min, 320px)*0.34),10.5rem);--player-modal-similar-gap:clamp(var(--space-4xs),0.65vw,var(--space-2xs));--player-modal-similar-padding:clamp(var(--space-4xs),0.7vw,var(--space-sm));position:relative;display:grid;grid-template-columns:var(--player-modal-similar-thumb) minmax(0,1fr);align-items:stretch;gap:var(--player-modal-similar-gap);padding:var(--player-modal-similar-padding);width:100%;min-width:0;transform:translate3d(0,var(--video-card-lift-translate-y,0),0)}.player-modal__similar-card:before{content:"";position:absolute;inset:0;z-index:0;opacity:var(--video-card-backdrop-opacity,0);background-image:var(
|
||||
--similar-card-thumb-url,var(--video-card-thumb-url,none)
|
||||
);background-position:50%;background-repeat:no-repeat;background-size:cover;transform:translate3d(0,var(--video-card-backdrop-translate-y,0),0) scale(var(--video-card-backdrop-scale,1));filter:blur(var(--video-card-backdrop-blur,0));transition:opacity var(--motion-duration-base) var(--motion-ease-in-out),transform var(--motion-duration-base) var(--motion-ease-in-out),filter var(--motion-duration-base) var(--motion-ease-in-out);pointer-events:none;will-change:opacity,transform,filter}.player-modal__similar-card>*{position:relative;z-index:1}.player-modal__similar-card:focus-within,.player-modal__similar-card:hover{--video-card-backdrop-opacity:0.425;--video-card-backdrop-translate-y:0.15rem;--video-card-backdrop-scale:1.12;--video-card-backdrop-blur:24px}.player-modal__similar-card-media{display:block;position:relative;inline-size:var(--player-modal-similar-thumb);max-inline-size:clamp(calc(var(--space-xl-plus)*1.25),24vw,calc(var(--space-2xl-plus)*1.75));border-radius:var(--radius-lg);overflow:hidden;isolation:isolate}.player-modal__similar-card-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;-o-object-fit:cover;object-fit:cover;border-radius:inherit}.player-modal__similar-card-content{display:flex;flex-direction:column;gap:clamp(var(--space-4xs),.6vw,var(--space-2xs));min-width:0}.player-modal__similar-card-title{display:-webkit-box;margin:0;font-size:clamp(var(--font-size-sm),1.05vw,var(--font-size-base));font-weight:600;line-height:1.35;color:var(--color-text);text-decoration:none;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color var(--motion-duration-base) var(--motion-ease-in-out)}.player-modal__similar-card-title:focus-visible,.player-modal__similar-card-title:hover{color:var(--color-accent)}.player-modal__similar-card-author{display:flex;flex-wrap:wrap;align-items:center;-moz-column-gap:clamp(var(--space-5xs),.4vw,var(--space-4xs));column-gap:clamp(var(--space-5xs),.4vw,var(--space-4xs));row-gap:var(--space-6xs);font-size:var(--font-size-xs);color:var(--color-text-muted);min-width:0}.player-modal__similar-card-author-name{font-weight:500;color:var(--color-text);min-width:0}.player-modal__similar-card-author-npub{display:inline-flex;padding-inline:var(--space-6xs);border-radius:var(--radius-full);font-family:var(--font-family-mono);line-height:1.2;background-color:color-mix(in srgb,var(--color-surface-alt) 80%,transparent)}.player-modal__similar-card-author-npub,.player-modal__similar-card-meta{align-items:center;font-size:var(--font-size-2xs,.75rem);color:var(--color-muted-strong)}.player-modal__similar-card-meta{display:flex;flex-wrap:wrap;gap:clamp(var(--space-5xs),.5vw,var(--space-4xs));min-width:0}.player-modal__similar-card-timestamp{white-space:nowrap}.player-modal__similar-card-separator{color:inherit;opacity:.8}.player-modal__similar-card-views{white-space:nowrap}.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:bLine truncated
|
||||
+142
-29
@@ -1893,7 +1893,9 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#playerModal .player-modal__module-item > .card {
|
||||
#playerModal .player-modal__module-item > .card:not(
|
||||
.player-modal__similar-card
|
||||
) {
|
||||
@apply flex w-full flex-row flex-nowrap items-stretch gap-md;
|
||||
}
|
||||
|
||||
@@ -1924,66 +1926,173 @@
|
||||
gap: clamp(var(--space-2xs), 0.85vw, var(--space-sm));
|
||||
}
|
||||
|
||||
#playerModal .video-modal__similar .player-modal__module-item > .card {
|
||||
.player-modal__similar-card {
|
||||
--player-modal-similar-thumb: clamp(
|
||||
6.75rem,
|
||||
calc(var(--video-modal-secondary-min, 320px) * 0.34),
|
||||
10.5rem
|
||||
);
|
||||
--player-modal-similar-gap: clamp(var(--space-4xs), 0.65vw, var(--space-2xs));
|
||||
--player-modal-similar-padding: clamp(
|
||||
var(--space-4xs),
|
||||
0.7vw,
|
||||
var(--space-sm)
|
||||
);
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: var(--player-modal-similar-thumb) minmax(0, 1fr);
|
||||
grid-auto-rows: minmax(0, 1fr);
|
||||
align-items: stretch;
|
||||
gap: clamp(var(--space-4xs), 0.65vw, var(--space-2xs));
|
||||
padding: clamp(var(--space-4xs), 0.7vw, var(--space-sm));
|
||||
gap: var(--player-modal-similar-gap);
|
||||
padding: var(--player-modal-similar-padding);
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
transform: translate3d(0, var(--video-card-lift-translate-y, 0), 0);
|
||||
}
|
||||
|
||||
#playerModal
|
||||
.video-modal__similar
|
||||
.player-modal__module-item
|
||||
> .card
|
||||
.video-card__media {
|
||||
.player-modal__similar-card::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
opacity: var(--video-card-backdrop-opacity, 0);
|
||||
background-image: var(
|
||||
--similar-card-thumb-url,
|
||||
var(--video-card-thumb-url, none)
|
||||
);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
transform: translate3d(
|
||||
0,
|
||||
var(--video-card-backdrop-translate-y, 0),
|
||||
0
|
||||
)
|
||||
scale(var(--video-card-backdrop-scale, 1));
|
||||
filter: blur(var(--video-card-backdrop-blur, 0));
|
||||
transition:
|
||||
opacity var(--motion-duration-base) var(--motion-ease-in-out),
|
||||
transform var(--motion-duration-base) var(--motion-ease-in-out),
|
||||
filter var(--motion-duration-base) var(--motion-ease-in-out);
|
||||
pointer-events: none;
|
||||
will-change: opacity, transform, filter;
|
||||
}
|
||||
|
||||
.player-modal__similar-card > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.player-modal__similar-card:hover,
|
||||
.player-modal__similar-card:focus-within {
|
||||
--video-card-backdrop-opacity: 0.425;
|
||||
--video-card-backdrop-translate-y: 0.15rem;
|
||||
--video-card-backdrop-scale: 1.12;
|
||||
--video-card-backdrop-blur: 24px;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-media {
|
||||
display: block;
|
||||
position: relative;
|
||||
inline-size: var(--player-modal-similar-thumb);
|
||||
max-inline-size: clamp(
|
||||
calc(var(--space-xl-plus) * 1.25),
|
||||
24vw,
|
||||
calc(var(--space-2xl-plus) * 1.75)
|
||||
);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
isolation: isolate;
|
||||
}
|
||||
|
||||
#playerModal
|
||||
.video-modal__similar
|
||||
.player-modal__module-item
|
||||
> .card
|
||||
.video-card__content {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
.player-modal__similar-card-media img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: 16 / 9;
|
||||
object-fit: cover;
|
||||
border-radius: inherit;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: clamp(var(--space-4xs), 0.6vw, var(--space-2xs));
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#playerModal
|
||||
.video-modal__similar
|
||||
.player-modal__module-item
|
||||
> .card
|
||||
.video-card__title {
|
||||
.player-modal__similar-card-title {
|
||||
display: -webkit-box;
|
||||
margin: 0;
|
||||
font-size: clamp(var(--font-size-sm), 1.05vw, var(--font-size-base));
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
color: var(--color-text);
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
transition: color var(--motion-duration-base) var(--motion-ease-in-out);
|
||||
}
|
||||
|
||||
#playerModal
|
||||
.video-modal__similar
|
||||
.player-modal__module-item
|
||||
> .card
|
||||
.video-card__meta {
|
||||
margin-top: 0;
|
||||
.player-modal__similar-card-title:hover,
|
||||
.player-modal__similar-card-title:focus-visible {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
.player-modal__similar-card-author {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
column-gap: clamp(var(--space-5xs), 0.4vw, var(--space-4xs));
|
||||
row-gap: var(--space-6xs);
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-muted);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-author-name {
|
||||
font-weight: 500;
|
||||
color: var(--color-text);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-author-npub {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-inline: var(--space-6xs);
|
||||
border-radius: var(--radius-full);
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: var(--font-size-2xs, 0.75rem);
|
||||
line-height: 1.2;
|
||||
color: var(--color-muted-strong);
|
||||
background-color: color-mix(
|
||||
in srgb,
|
||||
var(--color-surface-alt) 80%,
|
||||
transparent
|
||||
);
|
||||
}
|
||||
|
||||
.player-modal__similar-card-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: clamp(var(--space-5xs), 0.5vw, var(--space-4xs));
|
||||
@apply text-2xs text-muted-strong;
|
||||
font-size: var(--font-size-2xs, 0.75rem);
|
||||
color: var(--color-muted-strong);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-timestamp {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-separator {
|
||||
color: inherit;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.player-modal__similar-card-views {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.video-modal__stage {
|
||||
@@ -4398,6 +4507,10 @@
|
||||
transition-timing-function: linear !important;
|
||||
}
|
||||
|
||||
.player-modal__similar-card::before {
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.btn,
|
||||
.btn-ghost,
|
||||
.card,
|
||||
|
||||
Reference in new issue
Block a user