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 card padder icon for items with an image

Browse source
This commit is contained in:
Dmitry Lyzo 2022-02-12 23:44:50 +03:00
parent 270501e4f8
commit 034a86119f
7 changed files with 39 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

12
src/components/cardbuilder/card.scss
View file

@ -227,6 +227,10 @@ button::-moz-focus-inner {
background-color: transparent;
}
.cardPadder {
position: relative; // For centering the cardImageIcon
}
.cardBox:not(.visualCardBox) .cardPadder {
border-radius: 0.2em;
background-color: #242424;
@ -377,6 +381,14 @@ button::-moz-focus-inner {
color: inherit;
}
.cardPadder .cardImageIcon {
color: #111;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.cardIndicators {
right: 0.225em;
top: 0.225em;

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

@ -1344,7 +1344,13 @@ import ServerConnections from '../ServerConnections';
const cardScalableClass = 'cardScalable';
cardImageContainerOpen = '<div class="' + cardBoxClass + '"><div class="' + cardScalableClass + '"><div class="cardPadder cardPadder-' + shape + '"></div>' + cardImageContainerOpen;
let cardPadderIcon = '';
if (imgUrl) {
cardPadderIcon = getDefaultText(item, options);
}
cardImageContainerOpen = `<div class="${cardBoxClass}"><div class="${cardScalableClass}"><div class="cardPadder cardPadder-${shape}">${cardPadderIcon}</div>${cardImageContainerOpen}`;
cardBoxClose = '</div>';
cardScalableClose = '</div>';

4
src/themes/appletv/theme.css
View file

@ -481,6 +481,10 @@ a[data-role=button] {
color: #00a4dc !important;
}
.cardPadder .cardImageIcon {
color: rgba(0, 0, 0, 0.1);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-radius: 0.5rem;

4
src/themes/blueradiance/theme.css
View file

@ -475,6 +475,10 @@ a[data-role=button] {
background-color: rgba(0, 0, 0, 0.5);
}
.cardPadder .cardImageIcon {
color: rgba(0, 0, 0, 0.5);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;

4
src/themes/light/theme.css
View file

@ -466,6 +466,10 @@ a[data-role=button] {
background-color: #fff;
}
.cardPadder .cardImageIcon {
color: #ddd;
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;

4
src/themes/purplehaze/theme.css
View file

@ -577,6 +577,10 @@ a[data-role=button] {
border-radius: 0.8em;
}
.cardPadder .cardImageIcon {
color: rgba(0, 0, 0, 0.5);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #ff77f1 !important;

4
src/themes/wmc/theme.css
View file

@ -456,6 +456,10 @@ a[data-role=button] {
background-color: #0f3562;
}
.cardPadder .cardImageIcon {
color: rgba(0, 0, 0, 0.4);
}
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #fff !important;