rework up next dialog

dashboard-ui/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css

@@ -1 +1 @@
-.nowPlayingBarInfoContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:100%;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;overflow:hidden}.nowPlayingBar{text-align:center;will-change:transform;contain:layout style;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out}.nowPlayingBar-hidden{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.nowPlayingBarTop{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:4.2em;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.mediaButton,.nowPlayingBarUserDataButtons .btnUserItemRating{vertical-align:middle;margin:0;text-align:center}.mediaButton i{height:1em;width:1em;font-size:200%}.nowPlayingBar .nowPlayingImage{background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;height:70%;width:4.2em;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);-webkit-flex-shrink:0;flex-shrink:0}.nowPlayingBarText{overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;vertical-align:middle;text-align:left;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;font-size:92%;margin-right:2.4em}.nowPlayingBarCenter{vertical-align:middle;text-align:center;z-index:2;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;position:absolute}.nowPlayingBarPositionContainer{position:absolute!important;left:0;top:-8px;right:0;z-index:1}.headroom--unpinned .nowPlayingBarPositionContainer,.noMediaProgress .nowPlayingBarPositionContainer{display:none}.nowPlayingBarRight{position:relative;margin:0 .5em 0 auto;z-index:2;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-shrink:0;flex-shrink:0}.nowPlayingBarCurrentTime{vertical-align:middle;font-weight:400;text-align:center;display:inline-block;padding-left:1.5em}.nowPlayingBarVolumeSliderContainer{margin-right:2em}.nowPlayingBarUserDataButtons{display:inline-block;margin-left:1em;margin-right:1em}.nowPlayingBarPositionSlider::-webkit-slider-thumb{width:1.2em!important;height:1.2em!important}@media all and (max-width:87.5em){.nowPlayingBarUserDataButtons{display:none}}@media all and (max-width:68.75em){.nowPlayingBar .muteButton,.nowPlayingBar .unmuteButton,.nowPlayingBarVolumeSliderContainer{display:none!important}}@media all and (max-width:50em){.nowPlayingBarCenter{display:none!important}.toggleRepeatButton{display:none}}@media all and (min-width:50em){.nowPlayingBarRight .playPauseButton{display:none}.nowPlayingBarInfoContainer{max-width:40%}}
+.nowPlayingBarInfoContainer{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:100%;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;overflow:hidden}.nowPlayingBar{text-align:center;will-change:transform;contain:layout style;-webkit-transition:-webkit-transform .2s ease-out;-o-transition:transform .2s ease-out;transition:transform .2s ease-out}.nowPlayingBar-hidden{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}.nowPlayingBarTop{display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;flex-direction:row;-webkit-box-align:center;-webkit-align-items:center;align-items:center;height:4.2em;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.mediaButton,.nowPlayingBarUserDataButtons .btnUserItemRating{vertical-align:middle;margin:0;text-align:center}.mediaButton i{height:1em;width:1em;font-size:200%}.nowPlayingBar .nowPlayingImage{background-position:center center;background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;height:70%;width:4.2em;-webkit-box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);-webkit-flex-shrink:0;flex-shrink:0}.nowPlayingBarText{overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;vertical-align:middle;text-align:left;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;font-size:92%;margin-right:2.4em;margin-left:1em}.nowPlayingBarCenter{vertical-align:middle;text-align:center;z-index:2;-webkit-box-flex:1;-webkit-flex-grow:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;position:absolute}.nowPlayingBarPositionContainer{position:absolute!important;left:0;top:-8px;right:0;z-index:1}.headroom--unpinned .nowPlayingBarPositionContainer,.noMediaProgress .nowPlayingBarPositionContainer{display:none}.nowPlayingBarRight{position:relative;margin:0 .5em 0 auto;z-index:2;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-flex-shrink:0;flex-shrink:0}.nowPlayingBarCurrentTime{vertical-align:middle;font-weight:400;text-align:center;display:inline-block;padding-left:1.5em}.nowPlayingBarVolumeSliderContainer{margin-right:2em}.nowPlayingBarUserDataButtons{display:inline-block;margin-left:1em;margin-right:1em}.nowPlayingBarPositionSlider::-webkit-slider-thumb{width:1.2em!important;height:1.2em!important}@media all and (max-width:87.5em){.nowPlayingBarUserDataButtons{display:none}}@media all and (max-width:68.75em){.nowPlayingBar .muteButton,.nowPlayingBar .unmuteButton,.nowPlayingBarVolumeSliderContainer{display:none!important}}@media all and (max-width:50em){.nowPlayingBarCenter{display:none!important}.toggleRepeatButton{display:none}}@media all and (min-width:50em){.nowPlayingBarRight .playPauseButton{display:none}.nowPlayingBarInfoContainer{max-width:40%}}

dashboard-ui/itemdetails.html

@@ -12,7 +12,7 @@
     <div id="itemBackdrop" class="itemBackdrop noBackdrop">
         <div class="itemBackdropFader">
         </div>
-        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">play_arrow</i></button>
+        <button is="emby-button" type="button" class="btnPlay detailFloatingButton hide fab autoSize" title="${ButtonPlay}" data-mode="resume"><i class="md-icon">&#xE037;</i></button>
     </div>
 
     <div class="detailLogo"></div>
@@ -41,14 +41,14 @@
 
                         <button is="emby-button" type="button" class="button-flat btnResume btnPlaySimple hide detailButton-mobile" data-mode="resume">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">play_arrow</i>
+                                <i class="md-icon detailButton-mobile-icon">&#xE037;</i>
                                 <div class="detailButton-mobile-text">${ButtonResume}</div>
                             </div>
                         </button>
 
                         <button is="emby-button" type="button" class="button-flat btnPlay btnPlaySimple hide detailButton-mobile" data-mode="play">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">play_arrow</i>
+                                <i class="md-icon detailButton-mobile-icon">&#xE037;</i>
                                 <div class="detailButton-mobile-text">${ButtonPlay}</div>
                             </div>
                         </button>
@@ -76,14 +76,14 @@
 
                         <button is="emby-downloadbutton" type="button" class="button-flat btnSyncDownload hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">file_download</i>
+                                <i class="md-icon detailButton-mobile-icon">&#xE2C4;</i>
                                 <div class="detailButton-mobile-text emby-downloadbutton-downloadtext">${ButtonDownload}</div>
                             </div>
                         </button>
 
                         <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">more_vert</i>
+                                <i class="md-icon detailButton-mobile-icon">&#xE5D4;</i>
                                 <div class="detailButton-mobile-text">${ButtonMore}</div>
                             </div>
                         </button>
@@ -104,7 +104,7 @@
 
                         <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton-mobile">
                             <div class="detailButton-mobile-content">
-                                <i class="md-icon detailButton-mobile-icon">check</i>
+                                <i class="md-icon detailButton-mobile-icon">&#xE5CA;</i>
                                 <div class="detailButton-mobile-text"></div>
                             </div>
                         </button>
@@ -139,15 +139,15 @@
                         </button>
 
                         <div style="margin-left: .5em; display: flex; align-items: center;">
-                            <button is="emby-button" type="button" class="btnMoreCommands fab mini hide" title="${ButtonMore}"><i class="md-icon">more_vert</i></button>
+                            <button is="emby-button" type="button" class="btnMoreCommands fab mini hide" title="${ButtonMore}"><i class="md-icon">&#xE5D4;</i></button>
                             <button is="emby-button" type="button" class="btnDeleteItem fab mini hide" title="${DeleteMedia}"><i class="md-icon">&#xE872;</i></button>
-                            <button is="emby-playstatebutton" type="button" class="btnPlaystate fab mini hide"><i class="md-icon">check</i></button>
+                            <button is="emby-playstatebutton" type="button" class="btnPlaystate fab mini hide"><i class="md-icon">&#xE5CA;</i></button>
                             <button is="emby-ratingbutton" type="button" class="btnUserRating fab mini hide"><i class="md-icon">&#xE87D;</i></button>
                         </div>
                     </div>
 
                     <button is="emby-downloadbutton" type="button" class="button-flat btnSyncDownload hide mainDetailButtons-nonmobile" style="margin: 1em 0 0;">
-                        <i class="md-icon">file_download</i>
+                        <i class="md-icon">&#xE2C4;</i>
                         <span class="emby-downloadbutton-downloadtext">${ButtonDownload}</span>
                     </button>