9a7925444f
* Fix embedded status bar being cut off This should resolve https://github.com/owncast/owncast/issues/3210. As recommended in the discussion, flexbox was the way to solve this issue. The main thing that needed to be addressed though was not applying too many constraints on the OwncastPlayer component just because it was embedded. By removing the embedded constraints, styling appears to be working as expected. I'll attach screenshots to the pull request. * Fix eslint error
33 lines
627 B
SCSS
33 lines
627 B
SCSS
@import '../../../styles/mixins';
|
|
|
|
.container {
|
|
display: grid;
|
|
width: 100%;
|
|
justify-items: center;
|
|
height: var(--player-container-height);
|
|
aspect-ratio: 16 / 9;
|
|
|
|
@media (width <= 1200px) {
|
|
height: 100%;
|
|
max-height: var(--player-container-height);
|
|
}
|
|
|
|
@include screen(desktop) {
|
|
// prevent sidebar from overlapping stream
|
|
// padding-right: 320px;
|
|
}
|
|
|
|
// set height of player for tablet
|
|
@include screen(tablet) {
|
|
height: var(--player-container-height);
|
|
max-height: var(--player-container-height);
|
|
}
|
|
|
|
.player,
|
|
.poster {
|
|
width: 100%;
|
|
grid-column: 1;
|
|
grid-row: 1;
|
|
}
|
|
}
|