152 lines
4.4 KiB
Sass
152 lines
4.4 KiB
Sass
@use '../../styles/tools'
|
|
@use './variables' as *
|
|
|
|
@include tools.layer('components')
|
|
.v-video-controls
|
|
--v-video-controls-height: #{$video-controls-height}
|
|
--v-video-controls-pill-border-radius: #{$video-controls-pill-border-radius}
|
|
--v-video-controls-gap: #{$video-controls-gap}
|
|
--v-background-opacity: #{$video-controls-default-background-opacity}
|
|
|
|
// override by density logic
|
|
--v-video-controls-pill-height: 42px
|
|
|
|
flex: 1 0 100%
|
|
align-self: stretch
|
|
padding: $video-controls-padding
|
|
display: flex
|
|
align-items: center
|
|
position: relative
|
|
gap: var(--v-video-controls-gap)
|
|
min-height: var(--v-video-controls-height)
|
|
backdrop-filter: $video-controls-default-backdrop-filter
|
|
background-color: rgba($video-controls-default-background-color, var(--v-background-opacity))
|
|
color: $video-controls-default-color
|
|
width: 100%
|
|
opacity: 1
|
|
|
|
@at-root
|
|
@include tools.density('v-video-controls', $video-density) using ($modifier)
|
|
--v-video-controls-gap: #{$video-controls-gap + $modifier}
|
|
--v-video-controls-height: #{$video-controls-height + $modifier * 2}
|
|
|
|
&, &--pills > .v-video-control__pill
|
|
transition: .6s ease-in-out
|
|
transition-property: opacity, background-color
|
|
|
|
&--pills > .v-video-control__pill
|
|
@include tools.elevation($video-elevation)
|
|
|
|
&:hover
|
|
--v-background-opacity: 1
|
|
|
|
.v-video-control__pill
|
|
display: flex
|
|
align-items: center
|
|
gap: $video-controls-pill-gap
|
|
|
|
&--pills
|
|
--v-background-opacity: 1
|
|
--v-video-controls-height: calc(var(--v-video-controls-pill-height) + 24px)
|
|
backdrop-filter: none
|
|
pointer-events: none
|
|
|
|
> *
|
|
pointer-events: auto
|
|
|
|
&:not(:empty)
|
|
background: transparent
|
|
|
|
> .v-video-control__pill
|
|
backdrop-filter: $video-controls-pill-backdrop-filter
|
|
background: rgba($video-controls-default-background-color, var(--v-background-opacity))
|
|
border-radius: var(--v-video-controls-pill-border-radius)
|
|
min-height: var(--v-video-controls-pill-height)
|
|
min-width: var(--v-video-controls-pill-height)
|
|
padding: $video-controls-pill-padding
|
|
z-index: 1
|
|
|
|
> .v-icon-btn
|
|
border-radius: inherit
|
|
|
|
&:empty
|
|
display: none
|
|
|
|
&:has(> *:only-child)
|
|
padding-inline: 0
|
|
justify-content: center
|
|
border-radius: var(--v-video-controls-pill-border-radius)
|
|
|
|
> .v-video__time
|
|
padding: $video-time-pill-padding
|
|
|
|
&--variant-tube
|
|
.v-slider.v-video__track
|
|
position: absolute
|
|
top: $video-tube-track-top
|
|
left: 0
|
|
right: 0
|
|
|
|
.v-slider-track
|
|
height: calc(var(--v-slider-track-size) + #{$video-tube-track-hover-offset})
|
|
|
|
.v-slider-track__fill
|
|
height: var(--v-slider-track-size)
|
|
|
|
&--split-time
|
|
padding-inline: $video-controls-split-time-padding-inline
|
|
|
|
&:not(.v-video-controls--floating)
|
|
border-bottom-left-radius: inherit
|
|
border-bottom-right-radius: inherit
|
|
|
|
&:not(.v-video-controls--floating):not(.v-video-controls--pills)
|
|
border-top: thin solid tools.theme-color('surface-variant', .2)
|
|
|
|
&--floating
|
|
--v-background-opacity: 1
|
|
border-radius: inherit
|
|
margin-inline: $video-controls-floating-margin
|
|
width: calc(100% - 2 * #{$video-controls-floating-margin})
|
|
|
|
&--detached
|
|
--v-background-opacity: 1
|
|
position: relative
|
|
margin-block-start: $video-controls-detached-offset
|
|
padding-inline: $video-controls-detached-padding-inline
|
|
backdrop-filter: none
|
|
border-top: none
|
|
border-radius: inherit
|
|
opacity: 1
|
|
|
|
&:not(.v-video-controls--pills)
|
|
@include tools.elevation($video-elevation)
|
|
|
|
&--fullscreen
|
|
position: absolute
|
|
bottom: 0
|
|
z-index: 2147483647
|
|
|
|
&.v-video-controls--floating
|
|
bottom: $video-controls-floating-margin
|
|
|
|
.v-video__track
|
|
position: relative
|
|
z-index: 1
|
|
|
|
&.v-slider.v-input--horizontal > .v-input__control
|
|
min-height: 4px
|
|
|
|
.v-slider-thumb:not(:hover)
|
|
.v-slider-thumb__label
|
|
opacity: 0
|
|
transition-delay: .2s
|
|
|
|
.v-slider-thumb__label
|
|
color: rgb(var(--v-theme-on-surface-variant)) !important
|
|
|
|
.v-video__time
|
|
font-size: $video-time-font-size
|
|
line-height: $video-time-line-height
|
|
letter-spacing: $video-time-letter-spacing
|