You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
135 lines
2.5 KiB
135 lines
2.5 KiB
@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%; |
|
}
|
|
|