mirror of https://github.com/FreeTubeApp/FreeTube
60 lines
1.3 KiB
Sass
60 lines
1.3 KiB
Sass
=dual-column-template
|
|
grid-template: "video video sidebar" 0fr "info info sidebar" auto "info info sidebar" auto / 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
|
|
|
|
.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
|
|
+single-column-template
|
|
|
|
.videoArea
|
|
grid-area: video
|
|
|
|
.videoAreaMargin
|
|
margin: 0px 8px 16px
|
|
|
|
.videoPlayer
|
|
grid-column: 1
|
|
max-width: calc(80vh * 1.78)
|
|
margin: 0 auto
|
|
|
|
.watchVideo
|
|
margin: 0px 8px 16px
|
|
grid-column: 1
|
|
|
|
.infoArea
|
|
grid-area: info
|
|
|
|
.sidebarArea
|
|
grid-area: sidebar
|
|
|
|
@media only screen and (min-width: 901px)
|
|
min-width: 380px
|
|
|
|
.watchVideoPlaylist, .watchVideoSidebar, .theatrePlaylist
|
|
margin: 0 8px 16px
|
|
|
|
.watchVideoSidebar, .theatrePlaylist
|
|
height: 500px
|
|
|
|
.watchVideoRecommendations, .theatreRecommendations
|
|
margin: 0 8px 16px
|