135 lines
3.3 KiB
Sass
135 lines
3.3 KiB
Sass
@use '../../styles/settings'
|
|
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-video
|
|
display: flex
|
|
flex-direction: column
|
|
align-items: center
|
|
position: relative
|
|
--v-video-aspect-ratio: #{$video-aspect-ratio}
|
|
--v-video-controls-height: #{$video-controls-height}
|
|
--v-video-controls-pill-border-radius: #{$video-controls-pill-border-radius}
|
|
|
|
@at-root
|
|
@include tools.density('v-video', $video-density) using ($modifier)
|
|
--v-video-controls-height: #{$video-controls-height + $modifier * 2}
|
|
|
|
&__video
|
|
position: absolute
|
|
width: 100%
|
|
height: 100%
|
|
object-fit: cover
|
|
z-index: 0
|
|
|
|
&::-webkit-media-controls
|
|
display: none !important
|
|
|
|
& ~ *
|
|
z-index: 1
|
|
|
|
&__header
|
|
position: relative
|
|
opacity: 0
|
|
transition: opacity .6s ease-in-out
|
|
pointer-events: none
|
|
> *
|
|
pointer-events: auto
|
|
|
|
&__content
|
|
position: relative
|
|
border-radius: inherit
|
|
z-index: 0
|
|
@include tools.elevation($video-elevation)
|
|
|
|
&:not(.v-video--idle):not(.v-video--error)
|
|
.v-video__content .v-video__overlay-fill
|
|
&, > *
|
|
pointer-events: none
|
|
|
|
&:not(.v-video--error)
|
|
.v-video__content
|
|
cursor: pointer
|
|
|
|
&__overlay-fill
|
|
position: absolute
|
|
inset: 0
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
border-radius: inherit
|
|
|
|
> .v-img
|
|
position: absolute
|
|
border-radius: inherit
|
|
inset: 0
|
|
|
|
&:has(.v-video-controls:not(.v-video-controls--detached))
|
|
.v-video__content .v-video__overlay-fill
|
|
padding-bottom: var(--v-video-controls-height) // controls size
|
|
|
|
&__center-icon.v-icon-btn
|
|
border: $video-center-icon-border
|
|
transition-property: transform, opacity
|
|
transition-duration: 0.28s
|
|
transition-timing-function: settings.$standard-easing
|
|
|
|
&.v-video__center-icon--play
|
|
opacity: $video-center-icon-opacity
|
|
|
|
&__content:hover &__center-icon--play
|
|
transform: $video-center-icon-hover-transform
|
|
opacity: 1
|
|
|
|
&--variant-player
|
|
width: $video-player-width
|
|
|
|
> .v-video__content
|
|
width: 100%
|
|
aspect-ratio: var(--v-video-aspect-ratio)
|
|
|
|
&--variant-background
|
|
outline: none
|
|
position: absolute
|
|
inset: 0
|
|
pointer-events: none
|
|
|
|
> .v-video__content
|
|
width: 100%
|
|
height: 100%
|
|
|
|
// Integration with VVideoControls: pull controls up to overlap the video,
|
|
// and hide them by default until hover / pause.
|
|
.v-video-controls
|
|
opacity: 0
|
|
|
|
&:not(.v-video-controls--detached)
|
|
margin-top: calc(-1 * var(--v-video-controls-height))
|
|
|
|
&--detached
|
|
opacity: 1
|
|
|
|
&--floating:not(.v-video-controls--detached)
|
|
margin-top: calc(-1 * var(--v-video-controls-height) - #{$video-controls-floating-margin})
|
|
margin-bottom: $video-controls-floating-margin
|
|
|
|
&:not(.v-video--playing),
|
|
&:hover
|
|
.v-video__header,
|
|
.v-video-controls
|
|
opacity: 1
|
|
|
|
&--rounded
|
|
border-radius: $video-rounded-border-radius
|
|
|
|
&:fullscreen .v-video__content
|
|
min-height: 100% !important
|
|
min-width: 100% !important
|
|
|
|
.poster-fade-out
|
|
&-leave-active
|
|
transition: opacity 1s linear 0.3s
|
|
&-leave-to
|
|
opacity: 0
|