mirror of https://github.com/FreeTubeApp/FreeTube
169 lines
3.2 KiB
SCSS
169 lines
3.2 KiB
SCSS
@mixin dual-column-template {
|
|
grid-template: 'video video sidebar' 0fr 'info info sidebar' auto 'info info sidebar' 1fr / 1fr 1fr 1fr;
|
|
}
|
|
|
|
@mixin theatre-mode-template {
|
|
grid-template: 'video video video' auto 'info info sidebar' auto 'info info sidebar' auto / 1fr 1fr 1fr;
|
|
}
|
|
|
|
@mixin single-column-template {
|
|
grid-template: 'video' auto 'info' auto 'sidebar' auto / auto;
|
|
}
|
|
|
|
.ageRestricted {
|
|
@include single-column-template;
|
|
|
|
display: inline-block;
|
|
max-inline-size: calc(80vh * 1.78);
|
|
|
|
@media only screen and (min-width: 901px) {
|
|
inline-size: 300%;
|
|
}
|
|
}
|
|
|
|
.videoLayout {
|
|
@include dual-column-template;
|
|
|
|
align-items: start;
|
|
display: grid;
|
|
|
|
&.isLoading,
|
|
&.noSidebar {
|
|
@include single-column-template;
|
|
}
|
|
|
|
.videoArea {
|
|
grid-area: video;
|
|
|
|
.videoAreaMargin {
|
|
margin-block: 0 16px;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.videoPlayer {
|
|
grid-column: 1;
|
|
margin-block: 0;
|
|
margin-inline: auto;
|
|
max-inline-size: calc(80vh * 1.78);
|
|
position: relative;
|
|
|
|
.upcomingThumbnail {
|
|
inline-size: 100%;
|
|
}
|
|
|
|
.premiereDate {
|
|
align-items: center;
|
|
background-color: rgb(0 0 0 / 80%);
|
|
border-radius: 5px;
|
|
inset-block-end: 12px;
|
|
color: #fff;
|
|
display: flex;
|
|
block-size: 60px;
|
|
inset-inline-start: 12px;
|
|
padding-block: 0;
|
|
padding-inline: 12px;
|
|
position: absolute;
|
|
|
|
.premiereIcon {
|
|
float: var(--float-left-ltr-rtl-value);
|
|
font-size: 25px;
|
|
margin-block: 0;
|
|
margin-inline: 12px;
|
|
}
|
|
|
|
.premiereText {
|
|
margin-block: 0;
|
|
margin-inline: 12px;
|
|
min-inline-size: 200px;
|
|
|
|
.premiereTextTimestamp {
|
|
font-size: 0.85em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.watchVideo {
|
|
grid-column: 1;
|
|
margin-block: 0 16px;
|
|
margin-inline: 0;
|
|
}
|
|
|
|
.infoArea {
|
|
grid-area: info;
|
|
position: relative;
|
|
}
|
|
|
|
.sidebarArea {
|
|
grid-area: sidebar;
|
|
|
|
@media only screen and (min-width: 901px) {
|
|
min-inline-size: 380px;
|
|
}
|
|
|
|
@at-root .noSidebar#{&} {
|
|
grid-area: auto;
|
|
}
|
|
}
|
|
|
|
.watchVideoPlaylist,
|
|
.watchVideoSidebar,
|
|
.theatrePlaylist {
|
|
margin-block: 0 16px;
|
|
margin-inline: 8px;
|
|
}
|
|
|
|
.watchVideoSidebar,
|
|
.watchVideoPlaylist {
|
|
block-size: 500px;
|
|
}
|
|
|
|
.watchVideoPlaylist {
|
|
:deep(.videoThumbnail) {
|
|
margin-block-start: auto;
|
|
margin-block-end: auto;
|
|
}
|
|
@media (max-width: 768px) {
|
|
block-size: auto;
|
|
}
|
|
}
|
|
|
|
.watchVideoRecommendations,
|
|
.theatreRecommendations {
|
|
margin-block: 0 16px;
|
|
margin-inline: 0;
|
|
|
|
@media only screen and (min-width: 901px) {
|
|
margin-block: 0 16px;
|
|
margin-inline: 8px;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 1350px) {
|
|
@include theatre-mode-template;
|
|
}
|
|
|
|
@media only screen and (min-width: 901px) {
|
|
&.useTheatreMode {
|
|
@include theatre-mode-template;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 900px) {
|
|
@include single-column-template;
|
|
}
|
|
|
|
@media only screen and (min-width: 901px) {
|
|
.infoArea {
|
|
scroll-margin-block-start: 76px;
|
|
}
|
|
|
|
.infoAreaSticky {
|
|
position: sticky;
|
|
inset-block-start: 76px;
|
|
}
|
|
}
|
|
}
|