' + cardImageContainerOpen;
+ cardImageContainerOpen = '
' + cardImageContainerOpen;
cardBoxClose = '
';
cardScalableClose = '
';
diff --git a/src/components/images/style.css b/src/components/images/style.css
index a20d242efa..2b09da2da4 100644
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@@ -1,11 +1,11 @@
.lazy-image-fadein {
opacity: 1;
- transition: opacity 0.7s;
+ transition: opacity 0.5s;
}
.lazy-image-fadein-fast {
opacity: 1;
- transition: opacity 0.2s;
+ transition: opacity 0.1s;
}
.lazy-hidden {
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 089915a834..b1d7471331 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -196,7 +196,7 @@ define(['browser', 'datetime', 'backdrop', 'libraryBrowser', 'listView', 'imageL
context.querySelector('.nowPlayingPageImage').classList.remove('nowPlayingPageImageAudio');
}
} else {
- imgContainer.innerHTML = '
';
+ imgContainer.innerHTML = '
';
}
}
diff --git a/src/themes/appletv/theme.css b/src/themes/appletv/theme.css
index b3ce2c7e92..bf6f6c2a51 100644
--- a/src/themes/appletv/theme.css
+++ b/src/themes/appletv/theme.css
@@ -122,8 +122,8 @@ html {
}
.paperList,
-.visualCardBox {
- background-color: #fff;
+.visualCardBox,
+.cardBox:not(.visualCardBox) .cardPadder {
background-color: rgba(0, 0, 0, 0.1);
}
@@ -455,7 +455,6 @@ html {
border-color: #00a4dc !important;
}
-.cardContent-button,
.itemDetailImage,
.cardOverlayContainer {
border-radius: 0.5rem;
diff --git a/src/themes/blueradiance/theme.css b/src/themes/blueradiance/theme.css
index 74a60c91c0..08ab576aa3 100644
--- a/src/themes/blueradiance/theme.css
+++ b/src/themes/blueradiance/theme.css
@@ -450,6 +450,10 @@ html {
color: #4285f4;
}
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: rgba(0, 0, 0, 0.5);
+}
+
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;
diff --git a/src/themes/light/theme.css b/src/themes/light/theme.css
index 114ef7c3b1..acea3f1d68 100644
--- a/src/themes/light/theme.css
+++ b/src/themes/light/theme.css
@@ -432,6 +432,10 @@ html {
color: #4285f4;
}
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: #fff;
+}
+
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #00a4dc !important;
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index de69a5542a..a311fd3104 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -548,15 +548,25 @@ a[data-role=button] {
}
.personCard .cardScalable {
- border-radius: 50%;
+ border-radius: 50% !important;
border: 1px solid rgb(255, 255, 255);
}
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: rgba(0, 0, 0, 0.5);
+ border-radius: 1em;
+}
+
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #ff77f1 !important;
}
+.card.show-focus:not(.show-animation) .cardBox.visualCardBox,
+.card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
+ border-radius: 1.5em;
+}
+
.layout-desktop,
.scrollY {
scrollbar-width: thin;
@@ -602,12 +612,6 @@ a[data-role=button] {
width: 40vw;
}
-.personCard .cardPadder-overflowPortrait,
-.personCard .cardPadder-portrait {
- padding-bottom: 100%;
- contain: strict;
-}
-
.personCard .coveredImage {
clip-path: circle(50% at 50% 50%);
}
@@ -619,3 +623,10 @@ a[data-role=button] {
.personCard .cardOverlayButton-br {
right: 20%;
}
+
+.personCard .cardPadder-overflowPortrait,
+.personCard .cardPadder-portrait {
+ padding-bottom: 100%;
+ contain: strict;
+ border-radius: 50% !important;
+}
diff --git a/src/themes/wmc/theme.css b/src/themes/wmc/theme.css
index e7d4c0371b..97c08caf80 100644
--- a/src/themes/wmc/theme.css
+++ b/src/themes/wmc/theme.css
@@ -430,6 +430,10 @@ html {
color: #4285f4;
}
+.cardBox:not(.visualCardBox) .cardPadder {
+ background-color: #0f3562;
+}
+
.card:focus .cardBox.visualCardBox,
.card:focus .cardBox:not(.visualCardBox) .cardScalable {
border-color: #fff !important;