From b500579236adcd4fc23366cdcf58bff24c12e603 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sun, 21 Jun 2020 13:21:31 +0200
Subject: [PATCH] Add hover text on item details buttons

---
 src/assets/css/librarybrowser.css             |  6 ++++
 src/controllers/itemDetails/itemDetails.html  | 32 +++++++++----------
 .../emby-scrollbuttons/emby-scrollbuttons.css |  2 +-
 3 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index c299ed8d0d..c0a92e05f9 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -437,6 +437,7 @@
     background-attachment: fixed;
     height: 40vh;
     position: relative;
+    animation: backdrop-fadein 800ms ease-in normal both;
 }
 
 .layout-mobile .itemBackdrop {
@@ -952,6 +953,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
     }
 }
 
+.detailVerticalSection .emby-scrollbuttons {
+    padding-top: 0.4em;
+}
+
 .layout-tv .detailVerticalSection {
     margin-bottom: 3.4em !important;
 }
@@ -1070,6 +1075,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
 div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin: 0;
     padding-top: 0.5em;
+    padding-bottom: 0.2em;
 }
 
 .layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {
diff --git a/src/controllers/itemDetails/itemDetails.html b/src/controllers/itemDetails/itemDetails.html
index 777439258a..1a97daf1a8 100644
--- a/src/controllers/itemDetails/itemDetails.html
+++ b/src/controllers/itemDetails/itemDetails.html
@@ -12,73 +12,73 @@
             </div>
 
             <div class="mainDetailButtons">
-                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" data-mode="resume">
+                <button is="emby-button" type="button" class="button-flat btnResume hide detailButton" title="${ButtonResume}" data-mode="resume">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon play_arrow"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" data-mode="play">
+                <button is="emby-button" type="button" class="button-flat btnPlay hide detailButton" title="${ButtonPlay}" data-mode="play">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon play_arrow"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnDownload hide detailButton" title="${ButtonDownload}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon get_app"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnPlayTrailer hide detailButton" title="${ButtonTrailer}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon theaters"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnInstantMix hide detailButton" title="${HeaderInstantMix}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon explore"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnShuffle hide detailButton" title="${ButtonShuffle}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon shuffle"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnCancelSeriesTimer hide detailButton" title="${CancelSeries}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon delete"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnCancelTimer hide detailButton" title="${StopRecording}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon stop"></span>
                     </div>
                 </button>
 
-                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton">
+                <button is="emby-playstatebutton" type="button" class="button-flat btnPlaystate hide detailButton" title="">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon check"></span>
                     </div>
                 </button>
 
-                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton">
+                <button is="emby-ratingbutton" type="button" class="button-flat btnUserRating hide detailButton" title="${Rate}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon favorite"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnSplitVersions hide detailButton" title="${ButtonSplit}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon call_split"></span>
                     </div>
                 </button>
 
-                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton">
+                <button is="emby-button" type="button" class="button-flat btnMoreCommands hide detailButton" title="${ButtonMore}">
                     <div class="detailButton-content">
                         <span class="material-icons detailButton-icon more_vert"></span>
                     </div>
@@ -176,14 +176,14 @@
                     <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
                 </div>
 
-                <div class="verticalSection itemVerticalSection moreFromSeasonSection hide">
+                <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
-                <div class="verticalSection itemVerticalSection moreFromArtistSection hide">
+                <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-right"></h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
@@ -212,14 +212,14 @@
                     <div id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
                 </div>
 
-                <div id="scenesCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
+                <div id="scenesCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
                     </div>
                 </div>
 
-                <div id="similarCollapsible" class="verticalSection itemVerticalSection verticalSection-extrabottompadding hide">
+                <div id="similarCollapsible" class="verticalSection detailVerticalSection verticalSection-extrabottompadding hide">
                     <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderMoreLikeThis}</h2>
                     <div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
                         <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>
diff --git a/src/elements/emby-scrollbuttons/emby-scrollbuttons.css b/src/elements/emby-scrollbuttons/emby-scrollbuttons.css
index b2e0d3bc23..5af739bac1 100644
--- a/src/elements/emby-scrollbuttons/emby-scrollbuttons.css
+++ b/src/elements/emby-scrollbuttons/emby-scrollbuttons.css
@@ -6,7 +6,7 @@
     justify-content: center;
     min-width: 104px;
     min-height: 24px;
-    padding-top: 1.25em;
+    padding-top: 0.85em;
     z-index: 1;
     color: #fff;
     display: flex;