diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css index c24fcf6ba6..d77fe5660c 100644 --- a/src/components/cardbuilder/card.css +++ b/src/components/cardbuilder/card.css @@ -192,9 +192,14 @@ button::-moz-focus-inner { /* Needed in case this is a button */ display: block; - - /* Needed in case this is a button */ margin: 0 !important; + border: 0 !important; + padding: 0 !important; + cursor: pointer; + color: inherit; + width: 100%; + font-family: inherit; + font-size: inherit; /* Needed in safari */ height: 100%; @@ -203,19 +208,12 @@ button::-moz-focus-inner { contain: strict; } -.cardContent-button { - border: 0 !important; - padding: 0 !important; - cursor: pointer; - color: inherit; - width: 100%; - vertical-align: middle; - font-family: inherit; - font-size: inherit; +.cardContent:not(.defaultCardBackground) { + background-color: transparent; } -.cardContent-button:not(.defaultCardBackground) { - background-color: transparent; +.cardBox:not(.visualCardBox) .cardPadder { + background-color: #242424; } .visualCardBox .cardContent { @@ -223,7 +221,8 @@ button::-moz-focus-inner { border-bottom-right-radius: 0; } -.cardContent-shadow { +.cardContent-shadow, +.cardBox:not(.visualCardBox) .cardPadder { box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37); } diff --git a/src/components/cardbuilder/cardBuilder.js b/src/components/cardbuilder/cardBuilder.js index 638c2335c5..52d5ed202a 100644 --- a/src/components/cardbuilder/cardBuilder.js +++ b/src/components/cardbuilder/cardBuilder.js @@ -1367,9 +1367,6 @@ import 'programStyles'; let cardScalableClose = ''; let cardContentClass = 'cardContent'; - if (!options.cardLayout) { - cardContentClass += ' cardContent-shadow'; - } let blurhashAttrib = ''; if (blurhash && blurhash.length > 0) { @@ -1377,21 +1374,20 @@ import 'programStyles'; } if (layoutManager.tv) { - // Don't use the IMG tag with safari because it puts a white border around it cardImageContainerOpen = imgUrl ? ('
') : ('
'); cardImageContainerClose = '
'; } else { // Don't use the IMG tag with safari because it puts a white border around it - cardImageContainerOpen = imgUrl ? (''; } let cardScalableClass = 'cardScalable'; - cardImageContainerOpen = '
' + 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;