105 lines
2.2 KiB
Sass
105 lines
2.2 KiB
Sass
=dual-column-template
|
|
grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" 1fr / 1fr 1fr 1fr
|
|
|
|
=theatre-mode-template
|
|
grid-template: "video video video" auto "info info sidebar" auto "info info sidebar" auto / 1fr 1fr 1fr
|
|
|
|
=single-column-template
|
|
grid-template: "video" auto "info" auto "sidebar" auto / auto
|
|
.ageRestricted
|
|
max-width: calc(80vh * 1.78)
|
|
display: inline-block
|
|
+single-column-template
|
|
@media only screen and (min-width: 901px)
|
|
width: 300%
|
|
|
|
.videoLayout
|
|
display: grid
|
|
align-items: start
|
|
+dual-column-template
|
|
|
|
@media only screen and (max-width: 1350px)
|
|
+theatre-mode-template
|
|
|
|
@media only screen and (min-width: 901px)
|
|
&.useTheatreMode
|
|
+theatre-mode-template
|
|
|
|
@media only screen and (max-width: 900px)
|
|
+single-column-template
|
|
|
|
&.isLoading, &.noSidebar
|
|
+single-column-template
|
|
|
|
.videoArea
|
|
grid-area: video
|
|
|
|
.videoAreaMargin
|
|
margin: 0 0 16px
|
|
|
|
.videoPlayer
|
|
grid-column: 1
|
|
max-width: calc(80vh * 1.78)
|
|
margin: 0 auto
|
|
position: relative
|
|
|
|
.upcomingThumbnail
|
|
width: 100%
|
|
|
|
.premiereDate
|
|
color: #FFFFFF
|
|
background-color: rgba(0, 0, 0, 0.7)
|
|
width: 400px
|
|
height: 60px
|
|
border-radius: 5%
|
|
position: absolute
|
|
bottom: 5px
|
|
|
|
.premiereIcon
|
|
float: left
|
|
font-size: 25px
|
|
margin-top: 12px
|
|
margin-left: 8px
|
|
padding: 5px
|
|
|
|
.premiereText
|
|
margin-left: 50px
|
|
margin-top: 10px
|
|
|
|
.watchVideo
|
|
margin: 0 0 16px
|
|
grid-column: 1
|
|
|
|
.infoArea
|
|
grid-area: info
|
|
position: relative
|
|
|
|
@media only screen and (min-width: 901px)
|
|
.infoArea
|
|
scroll-margin-top: 76px
|
|
|
|
.infoAreaSticky
|
|
position: sticky
|
|
top: 76px
|
|
|
|
.sidebarArea
|
|
grid-area: sidebar
|
|
|
|
@media only screen and (min-width: 901px)
|
|
min-width: 380px
|
|
|
|
@at-root .noSidebar#{&}
|
|
grid-area: auto
|
|
|
|
.watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
|
|
margin: 0 8px 16px
|
|
|
|
.watchVideoSidebar, .watchVideoPlaylist
|
|
height: 500px
|
|
|
|
.watchVideoRecommendations, .theatreRecommendations
|
|
margin: 0 0 16px
|
|
|
|
@media only screen and (min-width: 901px)
|
|
margin: 0 8px 16px
|