owncast/web/components/ui/Content/Content.module.scss
gingervitis 4703a64878
address doublescroll #3028 (#3035)
* quick fix for mobile menu button overlap

* - use new dynamic vh css prop to handle ios safari double scrolling
- only force tabs height when online

* cleanup

* add comment
2023-05-21 14:11:53 -07:00

111 lines
2 KiB
SCSS

@import '../../../styles/mixins.scss';
.lowerSection {
padding: var(--content-padding);
}
.lowerSectionMobileTabbed {
display: flex;
flex-direction: column;
flex-grow: 1;
flex-shrink: 0;
position: relative;
bottom: 0;
width: 100%;
@include screen(tablet) {
top: 0;
position: relative;
&.online {
position: absolute;
top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));
// As we want content in the tabs to scroll within itself, force the tabs to display max height at all times.
// (We don't have to do this when not-online because we're having the entire layout scroll.
:global(.ant-tabs-content) {
height: 100% !important;
}
}
}
:global(.ant-tabs-nav) {
margin-bottom: 0px;
padding-top: 0.5vh;
padding-left: 1vw;
}
}
.lowerSectionMobileNoTabs {
padding-top: 20px;
}
.topSectionElement {
background-color: var(--theme-color-components-video-background);
@include screen(tablet) {
// "sticks" the stream to the top of the page
position: sticky;
z-index: 100;
}
}
.offlineBanner {
color: var(--theme-color-background-main);
}
.mobileActionButtonMenu {
display: none;
@include screen(tablet) {
display: block;
position: absolute;
top: 4px;
right: 10px;
z-index: 199;
}
}
.desktopActionButtons {
display: block;
@include screen(tablet) {
display: none;
}
}
//not sure if this is needed
.statusBar {
flex-shrink: 0;
}
// not sure if this is needed
.loadingSpinner {
display: grid;
}
.defaultTabBar {
width: 85%;
}
.bottomPageContentContainer {
background-color: var(--theme-color-components-content-background);
padding: calc(2 * var(--content-padding));
border-radius: var(--theme-rounded-corners);
width: 100%;
margin-bottom: 20px;
h1,
h2,
h3 {
line-height: 2rem;
}
h1:first-child,
h2:first-child,
h3:first-child {
margin-top: unset;
}
}
.offlineBanner {
color: var(--theme-color-background-main);
}