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 a response on icon hover and other style fixes

Browse source
This commit is contained in:
dkanada 2019-05-13 12:56:44 -07:00
parent d4ea091ab5
commit e21f7f10ed
11 changed files with 66 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/components/cardbuilder/card.css
View file

@ -410,7 +410,7 @@ button {
} }
.cardOverlayButton { .cardOverlayButton {
color: rgba(255, 255, 255, .76) !important; color: rgba(255, 255, 255, .76);
margin: 0; margin: 0;
z-index: 1; z-index: 1;
padding: .75em; padding: .75em;
@ -453,10 +453,6 @@ button {
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
} }
.cardOverlayButton-centered:hover {
transform: scale(1.2, 1.2);
}
.bannerCard { .bannerCard {
width: 100%; width: 100%;
} }
@ -490,14 +486,12 @@ button {
} }
@media (min-width: 25em) { @media (min-width: 25em) {
.backdropCard { .backdropCard {
width: 50%; width: 50%;
} }
} }
@media (min-width: 31.25em) { @media (min-width: 31.25em) {
.smallBackdropCard { .smallBackdropCard {
width: 33.333333333333333333333333333333%; width: 33.333333333333333333333333333333%;
} }
@ -520,7 +514,6 @@ button {
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.bannerCard { .bannerCard {
width: 50%; width: 50%;
} }
@ -535,15 +528,12 @@ button {
} }
@media (min-width: 62.5em) { @media (min-width: 62.5em) {
.smallBackdropCard { .smallBackdropCard {
width: 20%; width: 20%;
} }
} }
@media (min-width: 75em) { @media (min-width: 75em) {
.backdropCard { .backdropCard {
width: 25%; width: 25%;
} }
@ -563,7 +553,6 @@ button {
@media (min-width: 87.5em) { @media (min-width: 87.5em) {
.squareCard, .portraitCard { .squareCard, .portraitCard {
width: 14.285714285714285714285714285714%; width: 14.285714285714285714285714285714%;
} }
@ -574,7 +563,6 @@ button {
} }
@media (min-width: 100em) { @media (min-width: 100em) {
.smallBackdropCard { .smallBackdropCard {
width: 12.5%; width: 12.5%;
} }
@ -589,14 +577,12 @@ button {
} }
@media (min-width: 120em) { @media (min-width: 120em) {
.squareCard, .portraitCard { .squareCard, .portraitCard {
width: 11.111111111111111111111111111111%; width: 11.111111111111111111111111111111%;
} }
} }
@media (min-width: 131.25em) { @media (min-width: 131.25em) {
.bannerCard { .bannerCard {
width: 25%; width: 25%;
} }
@ -607,7 +593,6 @@ button {
} }
@media (min-width: 156.25em) { @media (min-width: 156.25em) {
.backdropCard { .backdropCard {
width: 16.666666666666666666666666666667%; width: 16.666666666666666666666666666667%;
} }
@ -692,14 +677,12 @@ button {
} }
@media (min-width: 50em) { @media (min-width: 50em) {
.overflowSquareCard, .overflowPortraitCard { .overflowSquareCard, .overflowPortraitCard {
width: 18.4vw; width: 18.4vw;
} }
} }
@media (min-width: 75em) { @media (min-width: 75em) {
.overflowBackdropCard, .overflowSmallBackdropCard { .overflowBackdropCard, .overflowSmallBackdropCard {
width: 23.3vw; width: 23.3vw;
} }
@ -710,7 +693,6 @@ button {
} }
@media (min-width: 87.5em) { @media (min-width: 87.5em) {
.overflowSquareCard, .overflowPortraitCard { .overflowSquareCard, .overflowPortraitCard {
width: 13.3vw; width: 13.3vw;
} }
@ -780,16 +762,15 @@ button {
user-select: none; user-select: none;
} }
.card-hoverable :hover .cardOverlayContainer { .card-hoverable:hover .cardOverlayContainer {
opacity: 1; opacity: 1;
} }
.cardOverlayButton-hover { .cardOverlayButton-hover {
opacity: 0; opacity: 0;
transition: opacity .2s; transition: 0.2s;
background: transparent; background: transparent;
color: #fff !important; padding: 0.5em;
padding: .5em;
} }
.cardOverlayButtonIcon-hover { .cardOverlayButtonIcon-hover {
@ -801,6 +782,7 @@ button {
} }
.cardOverlayFab-primary { .cardOverlayFab-primary {
background-color: rgba(0,0,0,0.7);
font-size: 130%; font-size: 130%;
padding: 0; padding: 0;
width: 3em; width: 3em;
@ -812,7 +794,7 @@ button {
left: 50%; left: 50%;
} }
.cardOverlayFab-primary i { .cardOverlayFab-primary:hover {
border: .07em solid rgba(255,255,255,.9); transform: scale(1.4, 1.4);
color: #fff; transition: 0.2s;
} }

22
src/components/cardbuilder/cardBuilder.js
View file

@ -6,22 +6,16 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var enableFocusTransfrom = !browser.slow && !browser.edge; var enableFocusTransfrom = !browser.slow && !browser.edge;
function getCardsHtml(items, options) { function getCardsHtml(items, options) {
if (arguments.length === 1) { if (arguments.length === 1) {
options = arguments[0]; options = arguments[0];
items = options.items; items = options.items;
} }
var html = buildCardsHtmlInternal(items, options); return buildCardsHtmlInternal(items, options);
return html;
} }
function getPostersPerRow(shape, screenWidth, isOrientationLandscape) { function getPostersPerRow(shape, screenWidth, isOrientationLandscape) {
switch (shape) { switch (shape) {
case 'portrait': case 'portrait':
if (layoutManager.tv) { if (layoutManager.tv) {
return 100 / 16.66666667; return 100 / 16.66666667;
@ -229,7 +223,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
} }
function isResizable(windowWidth) { function isResizable(windowWidth) {
var screen = window.screen; var screen = window.screen;
if (screen) { if (screen) {
var screenWidth = screen.availWidth; var screenWidth = screen.availWidth;
@ -243,11 +236,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
} }
function getImageWidth(shape, screenWidth, isOrientationLandscape) { function getImageWidth(shape, screenWidth, isOrientationLandscape) {
//console.log(screenWidth);
var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape); var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
//console.log(shape + '--' + imagesPerRow);
var shapeWidth = screenWidth / imagesPerRow; var shapeWidth = screenWidth / imagesPerRow;
return Math.round(shapeWidth); return Math.round(shapeWidth);
@ -1362,13 +1351,12 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, true); outerCardFooter = getCardFooterText(item, apiClient, options, showTitle, forceName, overlayText, imgUrl, footerCssClass, progressHtml, logoUrl, true);
} }
if (outerCardFooter && !options.cardLayout /*&& options.allowBottomPadding !== false*/) { if (outerCardFooter && !options.cardLayout) {
cardBoxClass += ' cardBox-bottompadded'; cardBoxClass += ' cardBox-bottompadded';
} }
var overlayButtons = ''; var overlayButtons = '';
if (layoutManager.mobile) { if (layoutManager.mobile) {
var overlayPlayButton = options.overlayPlayButton; var overlayPlayButton = options.overlayPlayButton;
if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) { if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
@ -1386,7 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
} }
if (options.overlayMoreButton) { if (options.overlayMoreButton) {
overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>'; overlayButtons += '<button is="paper-icon-button-light" class="' + btnCssClass + '" data-action="menu"><i class="md-icon cardOverlayButtonIcon">&#xE5D3;</i></button>';
} }
} }
@ -1527,10 +1514,10 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">'; html += '<div class="cardOverlayContainer itemAction" data-action="' + action + '">';
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction'; var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
if (playbackManager.canPlay(item)) { if (playbackManager.canPlay(item)) {
html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon">&#xE037;</i></button>'; html += '<button is="paper-icon-button-light" class="' + btnCssClass + ' cardOverlayFab-primary" data-action="resume"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE037;</i></button>';
} }
html += '<div class="cardOverlayButton-br">'; html += '<div class="cardOverlayButton-br">';
@ -1538,7 +1525,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var userData = item.UserData || {}; var userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item)) { if (itemHelper.canMarkPlayed(item)) {
require(['emby-playstatebutton']); require(['emby-playstatebutton']);
html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>'; html += '<button is="emby-playstatebutton" type="button" data-action="none" class="' + btnCssClass + '" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-played="' + (userData.Played) + '"><i class="md-icon cardOverlayButtonIcon cardOverlayButtonIcon-hover">&#xE5CA;</i></button>';
} }

23
src/components/emby-button/emby-button.css
View file

@ -27,7 +27,6 @@
/* Disable webkit tap highlighting */ /* Disable webkit tap highlighting */
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0,0,0,0);
text-decoration: none; text-decoration: none;
/* Not crazy about this but it normalizes heights between anchors and buttons */ /* Not crazy about this but it normalizes heights between anchors and buttons */
line-height: 1.35; line-height: 1.35;
} }
@ -40,9 +39,9 @@
background: transparent; background: transparent;
} }
.button-flat:hover { .button-flat:hover {
opacity: .5; opacity: .5;
} }
.button-link { .button-link {
background: transparent; background: transparent;
@ -65,10 +64,10 @@
transform-origin: center center; transform-origin: center center;
} }
.emby-button-focusscale:focus { .emby-button-focusscale:focus {
transform: scale(1.16); transform: scale(1.16);
z-index: 1; z-index: 1;
} }
.emby-button > i { .emby-button > i {
/* For non-fab buttons that have icons */ /* For non-fab buttons that have icons */
@ -170,10 +169,10 @@
transform-origin: center center; transform-origin: center center;
} }
.icon-button-focusscale:focus { .icon-button-focusscale:focus {
transform: scale(1.3); transform: scale(1.3);
z-index: 1; z-index: 1;
} }
.btnFilterWithBubble { .btnFilterWithBubble {
position: relative; position: relative;

2
src/components/nowplayingbar/nowplayingbar.js
View file

@ -572,7 +572,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
var userData = item.UserData || {}; var userData = item.UserData || {};
var likes = userData.Likes == null ? '' : userData.Likes; var likes = userData.Likes == null ? '' : userData.Likes;
nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>'; nowPlayingUserData.innerHTML = '<button is="emby-ratingbutton" type="button" class="listItemButton mediaButton paper-icon-button-light" data-id="' + item.Id + '" data-serverid="' + item.ServerId + '" data-itemtype="' + item.Type + '" data-likes="' + likes + '" data-isfavorite="' + (userData.IsFavorite) + '"><i class="md-icon">&#xE87D;</i></button>';
}); });
} }

7
src/components/themes/appletv/theme.css
View file

@ -71,9 +71,14 @@ html {
background: #f0f0f0 background: #f0f0f0
} }
.paper-icon-button-light:hover {
color: #00a4dc;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2)
} }
.fab, .fab,

7
src/components/themes/blueradiance/theme.css
View file

@ -58,9 +58,14 @@ html {
} }
} }
.paper-icon-button-light:hover {
color: #00a4dc;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2)
} }
.fab, .fab,

7
src/components/themes/dark/theme.css
View file

@ -43,9 +43,14 @@ html {
background-color: rgba(0, 0, 0, .86) background-color: rgba(0, 0, 0, .86)
} }
.paper-icon-button-light:hover {
color: #00a4dc;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2)
} }
.fab, .fab,

7
src/components/themes/emby/theme.css
View file

@ -43,9 +43,14 @@ html {
background-color: rgba(0, 0, 0, .86) background-color: rgba(0, 0, 0, .86)
} }
.paper-icon-button-light:hover {
color: #52b54b;
background-color: rgba(82, 181, 75, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #52b54b; color: #52b54b;
background-color: rgba(82, 181, 75, .2)
} }
.fab, .fab,

7
src/components/themes/light/theme.css
View file

@ -59,9 +59,14 @@ html {
background-color: #f0f0f0 background-color: #f0f0f0
} }
.paper-icon-button-light:hover {
color: #00a4dc;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2)
} }
.fab, .fab,

7
src/components/themes/purple-haze/theme.css
View file

@ -58,9 +58,14 @@ html {
} }
} }
.paper-icon-button-light:hover {
color: #48C3C8;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #48C3C8; color: #48C3C8;
background-color: rgba(0,164,220, .2)
} }
progress { progress {

7
src/components/themes/wmc/theme.css
View file

@ -64,9 +64,14 @@ html {
background: rgba(17, 98, 164, .9) background: rgba(17, 98, 164, .9)
} }
.paper-icon-button-light:hover {
color: #00a4dc;
background-color: rgba(0,164,220, .2);
transition: 0.2s;
}
.paper-icon-button-light:focus { .paper-icon-button-light:focus {
color: #00a4dc; color: #00a4dc;
background-color: rgba(0,164,220, .2)
} }
.fab, .fab,