diff --git a/src/assets/css/dashboard.scss b/src/assets/css/dashboard.scss index efa0c09206..a5209d2604 100644 --- a/src/assets/css/dashboard.scss +++ b/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; diff --git a/src/components/cardbuilder/card.scss b/src/components/cardbuilder/card.scss index 69a0e4e909..610645816a 100644 --- a/src/components/cardbuilder/card.scss +++ b/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 { - border-top-left-radius: 0.2em; - border-top-right-radius: 0.2em; +.blurhash-canvas { + border-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 { diff --git a/src/controllers/dashboard/dashboard.js b/src/controllers/dashboard/dashboard.js index 0a04cab682..3f32f0a284 100644 --- a/src/controllers/dashboard/dashboard.js +++ b/src/controllers/dashboard/dashboard.js @@ -270,7 +270,7 @@ import confirm from '../../components/confirm/confirm'; html += '
'; } - html += '
'; + html += `
`; html += '
'; 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'); } } }, diff --git a/src/controllers/session/login/index.js b/src/controllers/session/login/index.js index 38135dde53..4e531001f9 100644 --- a/src/controllers/session/login/index.js +++ b/src/controllers/session/login/index.js @@ -154,7 +154,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder'; html += '
'; html += '
'; html += '
'; - html += `
`; + html += `
`; let imgUrl; if (user.PrimaryImageTag) { diff --git a/src/controllers/session/selectServer/index.js b/src/controllers/session/selectServer/index.js index e248fe154f..9ee0000b84 100644 --- a/src/controllers/session/selectServer/index.js +++ b/src/controllers/session/selectServer/index.js @@ -65,7 +65,7 @@ import cardBuilder from '../../../components/cardbuilder/cardBuilder'; cardContainer += '
'; cardContainer += '
'; cardContainer += '
'; - cardContainer += `
`; + cardContainer += `
`; cardContainer += cardImageContainer; cardContainer += '
'; cardContainer += '
'; diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css index dc9cb9de48..f3de5f8036 100644 --- a/src/themes/purplehaze/theme.css +++ b/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; }