mirror of
https://github.com/jellyfin/jellyfin-web.git
synced 2024-11-20 04:18:19 -07:00
CSS fixes when resizing the window
This commit is contained in:
ferferga
parent
3b938e9b00
commit
a62d69f813
@ -57,7 +57,7 @@
|
||||
flex-grow: 1;
|
||||
font-size: 92%;
|
||||
margin-right: 1em;
|
||||
margin-left: 0.2em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
|
||||
.nowPlayingBarCenter {
|
||||
@ -135,12 +135,23 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 62em) {
|
||||
.nowPlayingBarCenter .nowPlayingBarCurrentTime {
|
||||
@media all and (max-width: 66em) {
|
||||
.btnShuffle {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 80em) {
|
||||
.nowPlayingBarCenter .nowPlayingBarCurrentTime,
|
||||
.nowPlayingBarCenter .stopButton {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.nowPlayingBarInfoContainer {
|
||||
width: 45%;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 56em) {
|
||||
.nowPlayingBarCenter {
|
||||
display: none !important;
|
||||
@ -153,7 +164,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 36em) {
|
||||
@media all and (max-width: 60em) {
|
||||
.nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
@ -171,6 +171,72 @@
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSectionButtonTransparent {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSection .playlist,
|
||||
.mobilePlayer.playlistSection .contextMenu {
|
||||
position: absolute;
|
||||
top: 12.2em;
|
||||
bottom: 4.2em;
|
||||
overflow: scroll;
|
||||
padding: 0 1em;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSectionButton {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 4.2em;
|
||||
right: 0;
|
||||
padding-left: 7.3%;
|
||||
padding-right: 7.3%;
|
||||
}
|
||||
|
||||
.playlistSectionButton:not(.mobilePlayer) {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.nowPlayingPlaylist:not(.mobilePlayer) {
|
||||
background: unset !important;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSectionButton .btnTogglePlaylist {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSectionButton .btnSavePlaylist {
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.mobilePlayer.playlistSectionButton .btnToggleContextMenu {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media all and (min-width: 63em) {
|
||||
.nowPlayingPage {
|
||||
padding: 8em 0 0 0 !important;
|
||||
@ -188,12 +254,6 @@
|
||||
.nowPlayingPageUserDataButtonsTitle {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.playlistSectionButton,
|
||||
.nowPlayingPlaylist,
|
||||
.nowPlayingContextMenu {
|
||||
background: unset !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (min-width: 80em) {
|
||||
@ -202,7 +262,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (orientation: portrait) and (max-width: 47em) {
|
||||
@media all and (orientation: portrait) and (max-width: 43em) {
|
||||
.remoteControlContent {
|
||||
padding-left: 7.3% !important;
|
||||
padding-right: 7.3% !important;
|
||||
@ -342,254 +402,6 @@
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#nowPlayingPage .playlistSection .playlist,
|
||||
#nowPlayingPage .playlistSection .contextMenu {
|
||||
position: absolute;
|
||||
top: 12.2em;
|
||||
bottom: 4.2em;
|
||||
overflow: scroll;
|
||||
padding: 0 1em;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.playlistSectionButton {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 4.2em;
|
||||
right: 0;
|
||||
padding-left: 7.3%;
|
||||
padding-right: 7.3%;
|
||||
}
|
||||
|
||||
.playlistSectionButtonTransparent {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnTogglePlaylist {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnSavePlaylist {
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnToggleContextMenu {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .volumecontrol {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.remoteControlSection {
|
||||
margin: 0;
|
||||
padding: 0 0 4.2em 0;
|
||||
}
|
||||
|
||||
.nowPlayingButtonsContainer {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (orientation: landscape) and (max-width: 63em) {
|
||||
.remoteControlContent {
|
||||
padding-left: 4.3% !important;
|
||||
padding-right: 4.3% !important;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.nowPlayingInfoContainer {
|
||||
-webkit-box-orient: horizontal !important;
|
||||
-webkit-box-direction: normal !important;
|
||||
-webkit-flex-direction: row !important;
|
||||
flex-direction: row !important;
|
||||
-webkit-box-align: center;
|
||||
-webkit-align-items: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: calc(100% - 4.2em);
|
||||
}
|
||||
|
||||
.nowPlayingPageTitle {
|
||||
/* text-align: center; */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.nowPlayingInfoContainerMedia {
|
||||
text-align: left !important;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.nowPlayingPositionSliderContainer {
|
||||
margin: 0.2em 1em 0.2em 1em;
|
||||
}
|
||||
|
||||
.nowPlayingInfoButtons {
|
||||
/* margin: 1.5em 0 0 0; */
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
font-size: x-large;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainer {
|
||||
width: 30%;
|
||||
margin: auto 1em auto auto;
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon {
|
||||
font-size: 12em;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls {
|
||||
margin: 0.5em 0 1em 0;
|
||||
width: 100%;
|
||||
-webkit-box-pack: start !important;
|
||||
-webkit-justify-content: start !important;
|
||||
justify-content: start !important;
|
||||
}
|
||||
|
||||
.nowPlayingSecondaryButtons {
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: center;
|
||||
-webkit-justify-content: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle {
|
||||
width: 20%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button {
|
||||
padding-top: 0;
|
||||
padding-right: 0;
|
||||
margin-right: 0;
|
||||
float: right;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:hover {
|
||||
color: #fff !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.btnPlayPause {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
.btnPlayPause:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage {
|
||||
/* width: inherit; */
|
||||
overflow-y: hidden;
|
||||
overflow: hidden;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nowPlayingPageImage.nowPlayingPageImageAudio {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainer.nowPlayingPageImagePoster {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.nowPlayingPageImageContainer.nowPlayingPageImagePoster img {
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
#nowPlayingPage .playlistSection .playlist,
|
||||
#nowPlayingPage .playlistSection .contextMenu {
|
||||
position: absolute;
|
||||
top: 7.2em;
|
||||
bottom: 4.2em;
|
||||
overflow: scroll;
|
||||
padding: 0 1em;
|
||||
display: inline-block;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.playlistSectionButton {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 4.2em;
|
||||
right: 0;
|
||||
padding-left: 4.3%;
|
||||
padding-right: 4.3%;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnTogglePlaylist {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnSavePlaylist {
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .btnToggleContextMenu {
|
||||
font-size: larger;
|
||||
margin: 0;
|
||||
padding-right: 0;
|
||||
-webkit-box-flex: 1;
|
||||
-webkit-flex-grow: 1;
|
||||
flex-grow: 1;
|
||||
-webkit-box-pack: end;
|
||||
-webkit-justify-content: flex-end;
|
||||
justify-content: flex-end;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.playlistSectionButton .volumecontrol {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -852,6 +852,10 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
|
||||
context.querySelector('.btnTogglePlaylist').classList.remove('hide');
|
||||
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('afterbegin', repeatButtonHtml);
|
||||
context.querySelector('.nowPlayingInfoButtons').insertAdjacentHTML('beforeend', shuffleButtonHtml);
|
||||
let childs = context.querySelectorAll('*');
|
||||
for (let child of childs) {
|
||||
child.classList.add('mobilePlayer');
|
||||
}
|
||||
}
|
||||
|
||||
bindEvents(context);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user