Merge pull request #3456 from dmitrylyzo/refactor-remotecontrol

Few refactors of remotecontrol

src/components/cardbuilder/card.scss

@@ -389,6 +389,10 @@ button::-moz-focus-inner {
     transform: translate(-50%, -50%);
 }
 
+.cardImageContainer .cardImageIcon {
+    margin: auto; /* 'justify-content: center' doesn't work in Safari 10 */
+}
+
 .cardIndicators {
     right: 0.225em;
     top: 0.225em;

src/components/remotecontrol/remotecontrol.scss

@@ -81,8 +81,6 @@
     -webkit-box-align: center;
     -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }
@@ -275,9 +273,7 @@
     .remoteControlContent {
         padding-left: 7.3% !important;
         padding-right: 7.3% !important;
-        display: flex;
         height: 100%;
-        flex-direction: column;
     }
 
     .layout-desktop .nowPlayingPageUserDataButtons {
@@ -321,6 +317,8 @@
         -webkit-justify-content: center;
         justify-content: center;
         font-size: 1.5em;
+        margin-left: -0.5em;
+        margin-right: -0.5em;
     }
 
     .nowPlayingPageImageContainer {
@@ -372,19 +370,15 @@
 
     .nowPlayingInfoButtons .btnRepeat,
     .nowPlayingInfoButtons .btnRewind {
-        position: absolute;
-        left: 0;
         margin-left: 0;
-        padding-left: 7.3%;
+        margin-right: auto;
         font-size: smaller;
     }
 
     .nowPlayingInfoButtons .btnShuffleQueue,
     .nowPlayingInfoButtons .btnFastForward {
-        position: absolute;
-        right: 0;
+        margin-left: auto;
         margin-right: 0;
-        padding-right: 7.3%;
         font-size: smaller;
     }
 
@@ -416,7 +410,6 @@
 
     .nowPlayingButtonsContainer {
         display: flex;
-        height: 100%;
         flex-direction: column;
     }
 }