update material icon style

This commit is contained in:
dkanada 2021-02-17 12:07:42 +09:00
parent 5f7b002b6e
commit c1e3b881ae
5 changed files with 12 additions and 13 deletions

View File

@ -365,15 +365,10 @@ button::-moz-focus-inner {
}
.cardImageIcon {
font-size: 5em !important;
font-size: 5em;
color: inherit;
}
.cardImageIcon-small {
font-size: 3em !important;
margin-bottom: 0.1em;
}
.cardIndicators {
right: 0.225em;
top: 0.225em;

View File

@ -282,7 +282,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
hasCardImageContainer = true;
} else if (!virtualFolder.showNameWithIcon) {
html += `<div class="cardImageContainer editLibrary ${cardBuilder.getDefaultBackgroundClass()}" style="cursor:pointer;">`;
html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
hasCardImageContainer = true;
}
@ -295,7 +295,7 @@ import cardBuilder from '../../components/cardbuilder/cardBuilder';
if (!imgUrl && virtualFolder.showNameWithIcon) {
html += '<h3 class="cardImageContainer addLibrary" style="position:absolute;top:0;left:0;right:0;bottom:0;cursor:pointer;flex-direction:column;">';
html += '<span class="cardImageIcon-small material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
html += '<span class="cardImageIcon material-icons ' + (virtualFolder.icon || imageHelper.getLibraryIcon(virtualFolder.CollectionType)) + '"></span>';
if (virtualFolder.showNameWithIcon) {
html += '<div style="margin:1em 0;position:width:100%;">';

View File

@ -103,13 +103,15 @@ function getPluginHtml(plugin, options, installedPlugins) {
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable visualCardBox-cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardContent">`;
html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${href}" ${target}>`;
if (plugin.imageUrl) {
html += `<img src="${plugin.imageUrl}" style="width:100%" />`;
} else {
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension"></span>';
html += '</div>';
}
html += '</a>';

View File

@ -62,9 +62,9 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
html += '<div class="cardBox visualCardBox">';
html += '<div class="cardScalable">';
html += '<div class="cardPadder cardPadder-backdrop"></div>';
html += `<div class="cardContent ${cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardContent">`;
if (configPageUrl) {
html += `<a class="cardImageContainer" is="emby-linkbutton" href="${configPageUrl}">`;
html += `<a class="cardImageContainer" is="emby-linkbutton" style="margin:0;padding:0" href="${configPageUrl}">`;
} else {
html += '<div class="cardImageContainer noConfigPluginCard noHoverEffect emby-button">';
}
@ -72,7 +72,9 @@ function getPluginCardHtml(plugin, pluginConfigurationPages) {
if (plugin.HasImage) {
html += `<img src="/Plugins/${plugin.Id}/${plugin.Version}/Image" style="width:100%" />`;
} else {
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="cardImageIcon material-icons extension"></span>';
html += '</div>';
}
html += configPageUrl ? '</a>' : '</div>';
html += '</div>';

View File

@ -166,9 +166,9 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
html += '<div class="cardImageContainer coveredImage" style="background-image:url(\'' + imgUrl + "');\"></div>";
} else {
html += `<div class="cardImage flex align-items-center justify-content-center ${imgUrl ? '' : cardBuilder.getDefaultBackgroundClass()}">`;
html += `<div class="cardImage flex align-items-center justify-content-center ${cardBuilder.getDefaultBackgroundClass()}">`;
html += '<span class="material-icons cardImageIcon person"></span>';
html += `</div>`;
html += '</div>';
}
html += '</div>';