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 {
color: rgba(255, 255, 255, .76) !important;
color: rgba(255, 255, 255, .76);
margin: 0;
z-index: 1;
padding: .75em;
@ -453,10 +453,6 @@ button {
transition: transform 200ms ease-out;
}
.cardOverlayButton-centered:hover {
transform: scale(1.2, 1.2);
}
.bannerCard {
width: 100%;
}
@ -490,14 +486,12 @@ button {
}
@media (min-width: 25em) {
.backdropCard {
width: 50%;
}
}
@media (min-width: 31.25em) {
.smallBackdropCard {
width: 33.333333333333333333333333333333%;
}
@ -520,7 +514,6 @@ button {
}
@media (min-width: 50em) {
.bannerCard {
width: 50%;
}
@ -535,15 +528,12 @@ button {
}
@media (min-width: 62.5em) {
.smallBackdropCard {
width: 20%;
}
}
@media (min-width: 75em) {
.backdropCard {
width: 25%;
}
@ -563,7 +553,6 @@ button {
@media (min-width: 87.5em) {
.squareCard, .portraitCard {
width: 14.285714285714285714285714285714%;
}
@ -574,7 +563,6 @@ button {
}
@media (min-width: 100em) {
.smallBackdropCard {
width: 12.5%;
}
@ -589,14 +577,12 @@ button {
}
@media (min-width: 120em) {
.squareCard, .portraitCard {
width: 11.111111111111111111111111111111%;
}
}
@media (min-width: 131.25em) {
.bannerCard {
width: 25%;
}
@ -607,7 +593,6 @@ button {
}
@media (min-width: 156.25em) {
.backdropCard {
width: 16.666666666666666666666666666667%;
}
@ -692,14 +677,12 @@ button {
}
@media (min-width: 50em) {
.overflowSquareCard, .overflowPortraitCard {
width: 18.4vw;
}
}
@media (min-width: 75em) {
.overflowBackdropCard, .overflowSmallBackdropCard {
width: 23.3vw;
}
@ -710,7 +693,6 @@ button {
}
@media (min-width: 87.5em) {
.overflowSquareCard, .overflowPortraitCard {
width: 13.3vw;
}
@ -780,16 +762,15 @@ button {
user-select: none;
}
.card-hoverable :hover .cardOverlayContainer {
.card-hoverable:hover .cardOverlayContainer {
opacity: 1;
}
.cardOverlayButton-hover {
opacity: 0;
transition: opacity .2s;
transition: 0.2s;
background: transparent;
color: #fff !important;
padding: .5em;
padding: 0.5em;
}
.cardOverlayButtonIcon-hover {
@ -801,6 +782,7 @@ button {
}
.cardOverlayFab-primary {
background-color: rgba(0,0,0,0.7);
font-size: 130%;
padding: 0;
width: 3em;
@ -812,7 +794,7 @@ button {
left: 50%;
}
.cardOverlayFab-primary i {
border: .07em solid rgba(255,255,255,.9);
color: #fff;
.cardOverlayFab-primary:hover {
transform: scale(1.4, 1.4);
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;
function getCardsHtml(items, options) {
if (arguments.length === 1) {
options = arguments[0];
items = options.items;
}
var html = buildCardsHtmlInternal(items, options);
return html;
return buildCardsHtmlInternal(items, options);
}
function getPostersPerRow(shape, screenWidth, isOrientationLandscape) {
switch (shape) {
case 'portrait':
if (layoutManager.tv) {
return 100 / 16.66666667;
@ -229,7 +223,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
}
function isResizable(windowWidth) {
var screen = window.screen;
if (screen) {
var screenWidth = screen.availWidth;
@ -243,11 +236,7 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
}
function getImageWidth(shape, screenWidth, isOrientationLandscape) {
//console.log(screenWidth);
var imagesPerRow = getPostersPerRow(shape, screenWidth, isOrientationLandscape);
//console.log(shape + '--' + imagesPerRow);
var shapeWidth = screenWidth / imagesPerRow;
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);
}
if (outerCardFooter && !options.cardLayout /*&& options.allowBottomPadding !== false*/) {
if (outerCardFooter && !options.cardLayout) {
cardBoxClass += ' cardBox-bottompadded';
}
var overlayButtons = '';
if (layoutManager.mobile) {
var overlayPlayButton = options.overlayPlayButton;
if (overlayPlayButton == null && !options.overlayMoreButton && !options.overlayInfoButton && !options.cardLayout) {
@ -1386,7 +1374,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
}
if (options.overlayMoreButton) {
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 + '">';
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction';
var btnCssClass = 'cardOverlayButton cardOverlayButton-hover itemAction paper-icon-button-light';
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">';
@ -1538,7 +1525,6 @@ define(['datetime', 'imageLoader', 'connectionManager', 'itemHelper', 'focusMana
var userData = item.UserData || {};
if (itemHelper.canMarkPlayed(item)) {
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>';
}

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

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

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

@ -43,9 +43,14 @@ html {
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 {
color: #00a4dc;
background-color: rgba(0,164,220, .2)
}
.fab,

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

@ -43,9 +43,14 @@ html {
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 {
color: #52b54b;
background-color: rgba(82, 181, 75, .2)
}
.fab,

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

@ -59,9 +59,14 @@ html {
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 {
color: #00a4dc;
background-color: rgba(0,164,220, .2)
}
.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 {
color: #48C3C8;
background-color: rgba(0,164,220, .2)
}
progress {

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

@ -64,9 +64,14 @@ html {
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 {
color: #00a4dc;
background-color: rgba(0,164,220, .2)
}
.fab,