diff --git a/src/scss/card.scss b/src/scss/card.scss index 58f130a1..b0a53200 100644 --- a/src/scss/card.scss +++ b/src/scss/card.scss @@ -97,19 +97,24 @@ frigate-card-live.hidden { // Hide corners on Safari fullscreen. border-radius: 0px; + + // Theme styles may set these which is not helpful in fullscreen mode, reset + // them. + box-shadow: none; margin: 0; } -:host(:fullscreen) ha-card { + +// Need to use an id selector here to overcome theme styling that may +// incorrectly apply to ha-card style. +:host(:fullscreen) #ha-card { @include fullscreen-ha-card; } -// Need to use an id selector here to overcome card styling that is incorrectly -// shown in Safari that causes the wrong margin to apply in fullscreen mode. :host(:-webkit-full-screen) #ha-card { @include fullscreen-ha-card; } -:host(:-moz-full-screen) ha-card { +:host(:-moz-full-screen) #ha-card { @include fullscreen-ha-card; } -:host(:-ms-fullscreen) ha-card { +:host(:-ms-fullscreen) #ha-card { @include fullscreen-ha-card; } diff --git a/src/scss/gallery.scss b/src/scss/gallery.scss index 8ab042b1..e580c7b0 100644 --- a/src/scss/gallery.scss +++ b/src/scss/gallery.scss @@ -23,7 +23,7 @@ display: none; } -ha-card { +:host ha-card { display: flex; justify-content: center; align-items: center; @@ -38,13 +38,23 @@ ha-card { line-height: 1; overflow: hidden; + // Some themes override these values (with high CSS specificity) which is + // intended for full cards rather than internal ones. Since we use multiple of + // these for folders, we cannot use an ID and need to resort to !important. + margin: 0px !important; + box-shadow: none !important; + transition: transform 0.2s linear; } ha-card:hover { - transform: scale(1.04) + transform: scale(1.04); } -ha-card, frigate-card-thumbnail { +ha-card, +frigate-card-thumbnail { height: 100%; max-height: var(--frigate-card-thumbnail-size); -} \ No newline at end of file +} +frigate-card-thumbnail:not([details]) { + width: 100%; +} diff --git a/src/scss/live-webrtc.scss b/src/scss/live-webrtc.scss index 86ccf1af..dd4fe0ef 100644 --- a/src/scss/live-webrtc.scss +++ b/src/scss/live-webrtc.scss @@ -6,10 +6,10 @@ /* Don't drop shadow or have radius for nested webrtc card */ #webrtc ha-card { - box-shadow: none; border-radius: 0px; background-color: black; - // To get the WebRTC player to line up correctly in Safari. + // To get the WebRTC player to line up correctly with some themes. margin: 0px; + box-shadow: none; } \ No newline at end of file