CSS fixes when resizing the window

src/components/nowPlayingBar/nowPlayingBar.css

@@ -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) {
+@media all and (max-width: 66em) {
-    .nowPlayingBarCenter .nowPlayingBarCurrentTime {
+    .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;
     }

src/components/remotecontrol/remotecontrol.css

@@ -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%;
     }

src/components/remotecontrol/remotecontrol.js

@@ -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);