diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css index 55ed615072..f64cc162ef 100644 --- a/src/components/remotecontrol/remotecontrol.css +++ b/src/components/remotecontrol/remotecontrol.css @@ -96,7 +96,7 @@ background-color: #5ccea9; } -.nowPlayingPageImageContainerNoAlbum:after { +.nowPlayingPageImageContainerNoAlbum::after { content: ""; display: block; padding-bottom: 100%; @@ -112,11 +112,11 @@ .nowPlayingPageImageContainer { width: 16%; } - + .nowPlayingPageUserDataButtonsTitle { display: none !important; } - + .nowPlayingPageImage { margin: 0 auto; width: 100%; @@ -142,7 +142,6 @@ bottom: 0; left: 0; right: 0; - /* width: 100%; */ -webkit-box-shadow: 0 0 1.9vh #000; box-shadow: 0 0 1.9vh #000; border: 0.1em solid #222; @@ -163,7 +162,7 @@ } @media all and (orientation: portrait) and (max-width: 47em) { - + .remoteControlContent { padding-left: 7.3% !important; padding-right: 7.3% !important; @@ -171,7 +170,7 @@ height: 100%; flex-direction: column; } - + .nowPlayingInfoContainer { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; @@ -181,7 +180,6 @@ -webkit-align-items: center; align-items: center; width: 100%; - flex-flow: column; height: calc(100% - 4.2em); } @@ -189,7 +187,7 @@ /* text-align: center; */ margin: 0; } - + .nowPlayingInfoContainerMedia { text-align: left !important; width: 80%; @@ -212,12 +210,12 @@ width: 100%; margin: auto auto; } - + .nowPlayingPageImageContainerNoAlbum .cardImageContainer .cardImageIcon { font-size: 15em; color: inherit; } - + .nowPlayingInfoControls { margin: 1em 0 1em 0; width: 100%; @@ -225,16 +223,16 @@ -webkit-justify-content: start !important; justify-content: start !important; } - + .nowPlayingSecondaryButtons { /* margin: 1em 0 1em 0; */ } - + .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle { width: 20%; font-size: large; } - + .nowPlayingInfoControls .nowPlayingPageUserDataButtonsTitle button { padding-top: 0; padding-right: 0; @@ -242,28 +240,33 @@ float: right; border-radius: 0; } - + .nowPlayingInfoButtons .btnRewind { position: absolute; left: 0; margin-left: 0; padding-left: 7.3%; - font-size: smaller + font-size: smaller; } - + .nowPlayingInfoButtons .btnFastForward { position: absolute; right: 0; margin-right: 0; padding-right: 7.3%; - font-size: smaller + font-size: smaller; } - + .paper-icon-button-light:hover { color: #fff !important; background-color: transparent !important; } - + + .btnPlayPause { + padding: 0; + margin: 0; + } + .btnPlayPause:hover { background-color: transparent !important; } @@ -274,25 +277,21 @@ overflow: hidden; margin: 0 auto; } - + .nowPlayingPageImage.nowPlayingPageImageAudio { width: 100%; } - + .nowPlayingPageImageContainer.nowPlayingPageImagePoster { height: 50%; } - - .nowPlayingPageImageContainer.nowPlayingPageImagePoster img{ + + .nowPlayingPageImageContainer.nowPlayingPageImagePoster img { height: 100%; } - - #nowPlayingPage .playlistSection { - - } - + #nowPlayingPage .playlistSection .playlist, - #nowPlayingPage .playlistSection .contextMenu { + #nowPlayingPage .playlistSection .contextMenu { position: absolute; top: 12.2em; bottom: 4.2em; @@ -304,7 +303,7 @@ background: #202020; z-index: 1000; } - + .playlistSectionButton { position: fixed; bottom: 0; @@ -315,18 +314,13 @@ padding-right: 7.3%; background-color: #101010; } - - .btnPlayPause { - padding: 0; - margin: 0; - } - + .playlistSectionButton .btnTooglePlaylist { font-size: larger; margin: 0; padding-left: 0; } - + .playlistSectionButton .btnSavePlaylist { margin: 0; padding-right: 0; @@ -338,7 +332,7 @@ justify-content: flex-end; border-radius: 0; } - + .playlistSectionButton .btnToogleContextMenu { font-size: larger; margin: 0; @@ -351,11 +345,11 @@ justify-content: flex-end; border-radius: 0; } - + .remoteControlSection { margin: 4.2em 0 0 0; } - + } .nowPlayingTime { @@ -381,7 +375,7 @@ } @media all and (min-width: 47em) { - .nowPlayingSecondaryButtons { + .nowPlayingSecondaryButtons { -webkit-box-flex: 1; -webkit-flex-grow: 1; flex-grow: 1; @@ -389,7 +383,6 @@ -webkit-justify-content: flex-end; justify-content: flex-end; } - } @media all and (min-width: 80em) { @@ -434,10 +427,9 @@ .navigationSection .collapseContent i { font-size: 4em; } - + .nowPlayingButtonsContainer { display: block; height: 100%; } - }