mirrors/jellyfin-web
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00
Code Activity

Add hover text on item details buttons

Browse source
This commit is contained in:
MrTimscampi 2020-06-21 13:21:31 +02:00
parent 55cc467a95
commit b500579236
3 changed files with 23 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/assets/css/librarybrowser.css
View file

@ -437,6 +437,7 @@
background-attachment: fixed; background-attachment: fixed;
height: 40vh; height: 40vh;
position: relative; position: relative;
animation: backdrop-fadein 800ms ease-in normal both;
} }
.layout-mobile .itemBackdrop { .layout-mobile .itemBackdrop {
@ -952,6 +953,10 @@ div.itemDetailGalleryLink.defaultCardBackground {
} }
} }
.detailVerticalSection .emby-scrollbuttons {
padding-top: 0.4em;
}
.layout-tv .detailVerticalSection { .layout-tv .detailVerticalSection {
margin-bottom: 3.4em !important; margin-bottom: 3.4em !important;
} }
@ -1070,6 +1075,7 @@ div.itemDetailGalleryLink.defaultCardBackground {
div:not(.sectionTitleContainer-cards) > .sectionTitle-cards { div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
margin: 0; margin: 0;
padding-top: 0.5em; padding-top: 0.5em;
padding-bottom: 0.2em;
} }
.layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards { .layout-mobile :not(.sectionTitleContainer-cards) > .sectionTitle-cards {

32
src/controllers/itemDetails/itemDetails.html
View file

@ -12,73 +12,73 @@
</div> </div>
<div class="mainDetailButtons"> <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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span> <span class="material-icons detailButton-icon play_arrow"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon play_arrow"></span> <span class="material-icons detailButton-icon play_arrow"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon get_app"></span> <span class="material-icons detailButton-icon get_app"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon theaters"></span> <span class="material-icons detailButton-icon theaters"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon explore"></span> <span class="material-icons detailButton-icon explore"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon shuffle"></span> <span class="material-icons detailButton-icon shuffle"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon delete"></span> <span class="material-icons detailButton-icon delete"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon stop"></span> <span class="material-icons detailButton-icon stop"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon check"></span> <span class="material-icons detailButton-icon check"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon favorite"></span> <span class="material-icons detailButton-icon favorite"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon call_split"></span> <span class="material-icons detailButton-icon call_split"></span>
</div> </div>
</button> </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"> <div class="detailButton-content">
<span class="material-icons detailButton-icon more_vert"></span> <span class="material-icons detailButton-icon more_vert"></span>
</div> </div>
@ -176,14 +176,14 @@
<div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div> <div id="additionalPartsContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
</div> </div>
<div class="verticalSection itemVerticalSection moreFromSeasonSection hide"> <div class="verticalSection detailVerticalSection moreFromSeasonSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right"></h2> <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-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </div>
</div> </div>
<div class="verticalSection itemVerticalSection moreFromArtistSection hide"> <div class="verticalSection detailVerticalSection moreFromArtistSection hide">
<h2 class="sectionTitle sectionTitle-cards padded-right"></h2> <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-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div> <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 id="musicVideosContent" is="emby-itemscontainer" class="itemsContainer vertical-wrap padded-right"></div>
</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> <h2 class="sectionTitle sectionTitle-cards padded-right">${HeaderScenes}</h2>
<div is="emby-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true"> <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 id="scenesContent" is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer"></div>
</div> </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> <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-scroller" class="padded-top-focusscale padded-bottom-focusscale" data-centerfocus="true">
<div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div> <div is="emby-itemscontainer" class="scrollSlider focuscontainer-x itemsContainer similarContent"></div>

2
src/elements/emby-scrollbuttons/emby-scrollbuttons.css
View file

@ -6,7 +6,7 @@
justify-content: center; justify-content: center;
min-width: 104px; min-width: 104px;
min-height: 24px; min-height: 24px;
padding-top: 1.25em; padding-top: 0.85em;
z-index: 1; z-index: 1;
color: #fff; color: #fff;
display: flex; display: flex;