136 lines
2.5 KiB
SCSS
136 lines
2.5 KiB
SCSS
@import '../../../styles/mixins.scss';
|
|
|
|
.root {
|
|
display: grid;
|
|
grid-template-columns: 1fr auto;
|
|
grid-template-rows: 100%;
|
|
width: 100%;
|
|
background-color: var(--theme-color-background-main);
|
|
height: 100%;
|
|
min-height: 0;
|
|
|
|
@include screen(desktop) {
|
|
height: var(--content-height);
|
|
}
|
|
|
|
.mainSection {
|
|
display: grid;
|
|
grid-template-rows: min-content // Skeleton when app is loading
|
|
minmax(30px, min-content) // player
|
|
min-content // status bar when live
|
|
min-content // mid section
|
|
minmax(250px, 1fr) // mobile content
|
|
;
|
|
grid-template-columns: 100%;
|
|
|
|
&.offline {
|
|
grid-template-rows: min-content // Skeleton when app is loading
|
|
min-content // offline banner
|
|
min-content // status bar when live
|
|
min-content // mid section
|
|
minmax(250px, 1fr) // mobile content
|
|
;
|
|
}
|
|
|
|
@include screen(tablet) {
|
|
grid-template-columns: 100vw;
|
|
}
|
|
|
|
@include screen(desktop) {
|
|
overflow-y: scroll;
|
|
grid-template-rows: unset;
|
|
|
|
&.offline {
|
|
grid-template-rows: unset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.mainSection::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mainSection::-webkit-scrollbar-thumb {
|
|
display: none;
|
|
}
|
|
|
|
.lowerSection {
|
|
padding: 0em 2%;
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.lowerSectionMobile {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 1;
|
|
flex-shrink: 0;
|
|
padding: 0.3em;
|
|
}
|
|
}
|
|
|
|
.topSectionElement {
|
|
background-color: var(--theme-color-components-video-background);
|
|
}
|
|
|
|
.statusBar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.leftCol {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.loadingSpinner {
|
|
display: grid;
|
|
}
|
|
|
|
.replacementBar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: flex-start;
|
|
|
|
@include screen(tablet) {
|
|
height: var(--replacement-bar-height);
|
|
}
|
|
}
|
|
|
|
.defaultTabBar {
|
|
width: 85%;
|
|
}
|
|
|
|
.defaultTabBar,
|
|
.actionButtonMenu {
|
|
@include screen(tablet) {
|
|
margin-bottom: 0 !important;
|
|
padding-bottom: 0 !important;
|
|
}
|
|
}
|
|
|
|
.tabs {
|
|
width: 100%;
|
|
|
|
@include screen(tablet) {
|
|
position: relative;
|
|
> :global(.ant-tabs-content-holder) {
|
|
position: absolute;
|
|
height: calc(100% - var(--replacement-bar-height));
|
|
top: var(--replacement-bar-height);
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
> :global(.ant-tabs-content-holder .ant-tabs-content) {
|
|
padding-top: 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottomPageContentContainer {
|
|
background-color: var(--theme-color-components-content-background);
|
|
padding: calc(2 * var(--content-padding));
|
|
border-radius: var(--theme-rounded-corners);
|
|
width: 100%;
|
|
}
|