Merge pull request #2472 from jellyfin/dkanada-patch-1

add border radius to several card elements

src/assets/css/dashboard.scss

@@ -214,6 +214,7 @@ div[data-role=controlgroup] a.ui-btn-active {
     background-repeat: no-repeat;
     background-position: center center;
     position: absolute;
+    border-radius: 0.2em;
     top: 0;
     left: 0;
     right: 0;
@@ -345,11 +346,15 @@ div[data-role=controlgroup] a.ui-btn-active {
     right: 0;
     bottom: 0;
     font-weight: 400;
-    background: rgba(0, 0, 0, 0.7);
     display: flex;
     flex-direction: column;
 }
 
+.darkenContent {
+    background: rgba(0, 0, 0, 0.7);
+    color: #ddd;
+}
+
 .sessionAppName {
     vertical-align: top;
     max-width: 200px;

src/components/cardbuilder/card.scss

@@ -110,6 +110,7 @@ button::-moz-focus-inner {
 .card.show-focus:not(.show-animation) .cardBox.visualCardBox,
 .card.show-focus:not(.show-animation) .cardBox:not(.visualCardBox) .cardScalable {
     border: 0.5em solid transparent;
+    border-radius: 0.7em; /* card border + card border-radius */
 }
 
 .card.show-animation:focus > .cardBox {
@@ -160,6 +161,7 @@ button::-moz-focus-inner {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    border-radius: 0.2em;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -194,6 +196,7 @@ button::-moz-focus-inner {
     left: 0;
     right: 0;
     bottom: 0;
+    border-radius: 0.2em;
 
     /* Needed in case this is a button */
     display: block;
@@ -222,12 +225,12 @@ button::-moz-focus-inner {
 }
 
 .cardBox:not(.visualCardBox) .cardPadder {
+    border-radius: 0.2em;
     background-color: #242424;
 }
 
-.visualCardBox .cardContent {
+.blurhash-canvas {
-    border-top-left-radius: 0.2em;
+    border-radius: 0.2em;
-    border-top-right-radius: 0.2em;
 }
 
 .cardContent-shadow,
@@ -263,7 +266,7 @@ button::-moz-focus-inner {
 
 .visualCardBox {
     box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
-    border-radius: 0.145em;
+    border-radius: 0.2em;
 }
 
 .innerCardFooter {
@@ -769,6 +772,14 @@ button::-moz-focus-inner {
     bottom: 0;
     right: 0;
     user-select: none;
+    border-radius: 0.2em;
+}
+
+.visualCardBox .blurhash-canvas,
+.visualCardBox .cardContent,
+.visualCardBox .cardOverlayContainer {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 }
 
 .card-hoverable:hover .cardOverlayContainer {

src/controllers/dashboard/dashboard.js

@@ -270,7 +270,7 @@ import confirm from '../../components/confirm/confirm';
                     html += '<div class="sessionNowPlayingContent"></div>';
                 }
 
-                html += '<div class="sessionNowPlayingInnerContent">';
+                html += `<div class="sessionNowPlayingInnerContent ${imgUrl ? 'darkenContent' : ''}">`;
                 html += '<div class="sessionAppInfo">';
                 const clientImage = DashboardPage.getClientImage(session);
 
@@ -608,8 +608,10 @@ import confirm from '../../components/confirm/confirm';
 
                 if (imgUrl) {
                     imgElem.classList.add('sessionNowPlayingContent-withbackground');
+                    row.querySelector('.sessionNowPlayingInnerContent').classList.add('darkenContent');
                 } else {
                     imgElem.classList.remove('sessionNowPlayingContent-withbackground');
+                    row.querySelector('.sessionNowPlayingInnerContent').classList.remove('darkenContent');
                 }
             }
         },

src/controllers/session/login/index.js

@@ -154,7 +154,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
             html += '<div class="' + cardBoxCssClass + '">';
             html += '<div class="cardScalable">';
             html += '<div class="cardPadder cardPadder-square"></div>';
-            html += `<div class="cardContent" style="border-radius:0.2em" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
+            html += `<div class="cardContent" data-haspw="${user.HasPassword}" data-username="${user.Name}" data-userid="${user.Id}">`;
             let imgUrl;
 
             if (user.PrimaryImageTag) {

src/controllers/session/selectServer/index.js

@@ -65,7 +65,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder';
             cardContainer += '<div class="cardPadder cardPadder-square">';
             cardContainer += '</div>';
             cardContainer += '<div class="cardContent">';
-            cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}" style="border-radius:0.2em">`;
+            cardContainer += `<div class="cardImageContainer coveredImage ${cardBuilder.getDefaultBackgroundClass()}">`;
             cardContainer += cardImageContainer;
             cardContainer += '</div>';
             cardContainer += '</div>';

src/themes/purplehaze/theme.css

@@ -229,11 +229,6 @@ a[data-role=button] {
     border-radius: 0.8em;
 }
 
-.visualCardBox .cardOverlayContainer {
-    border-bottom-right-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
 .defaultCardBackground1 {
     background-color: #9c20ab;
 }