diff --git a/data/interfaces/default/css/tautulli.css b/data/interfaces/default/css/tautulli.css index fbfc9bff..881b23a7 100644 --- a/data/interfaces/default/css/tautulli.css +++ b/data/interfaces/default/css/tautulli.css @@ -1776,8 +1776,7 @@ a:hover .dashboard-recent-media-cover { } .summary-poster-face-overlay span { display: block; - width: 100%; - height: 100%; + height: 70px; background-image: url(../images/plex-logo-light.svg); background-size: 100px; background-repeat: no-repeat; diff --git a/data/interfaces/newsletters/recently_added.html b/data/interfaces/newsletters/recently_added.html index e681427a..befab83f 100644 --- a/data/interfaces/newsletters/recently_added.html +++ b/data/interfaces/newsletters/recently_added.html @@ -260,13 +260,19 @@ font-size: 20px !important; } table[class=body] h2 .count-units { - font-size: 16px !important; + font-size: 14px !important; } table[class=body] h2 .sub-header, table[class=body] h2 .sub-header-count { float: left !important; width: 100% !important; } + table[class=body] h2 .sub-header { + margin-left: -14px !important; + } + table[class=body] h2 img.section_type { + height: 20px !important; + } table[class=body] p, table[class=body] ul, @@ -309,6 +315,10 @@ max-width: 100% !important; width: auto !important; } + + .header { + background-position: center !important; + } } /* ------------------------------------- @@ -351,9 +361,9 @@ HEADER ------------------------------------- */ .header { - background: url(images/logo-tautulli-newsletter.png) center; + background: url(images/logo-tautulli-newsletter.png) no-repeat; + background-position: calc(50% - 20px) 50%; background-size: contain; - background-repeat: no-repeat; width: 100%; height: 100px; } @@ -524,6 +534,7 @@ height: 225px; width: 150px; z-index: 2; + position: relative; } .card-cover-container { background-color: #282828; @@ -543,6 +554,39 @@ height: 150px; width: 150px; z-index: 2; + position: relative; + } + .card-poster-overlay { + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.75); + opacity: 0; + transition: opacity .2s; + } + .card-poster-overlay span { + display: block; + height: 55px; + background: url(images/plex-logo-light-small.png) center no-repeat; + background-size: 75px; + opacity: 0; + transition: opacity .3s; + } + .card-poster-overlay span:before { + display: block; + content: "VIEW ON"; + color: #ffffff; + font-size: 11px; + font-weight: 300; + text-align: center; + } + .card-poster .card-poster-overlay span { + margin-top: 85px; + } + .card-cover .card-poster-overlay span { + margin-top: 47.5px; } .card-info-container { height: 225px; @@ -575,7 +619,7 @@ .card-info-title { padding: 5px; line-height: 20px; - border-bottom: 1px solid rgba(255,255,255,.1); + border-bottom: 1px solid rgba(255, 255, 255, .1); } .card-info-title h4 { margin: 0; @@ -649,12 +693,15 @@ color: #E9A049; overflow: hidden; } - a:hover .card-poster, - a:hover .card-cover { + a:hover .card-poster-overlay { -webkit-box-shadow: inset 0 0 0 2px #e9a049; -moz-box-shadow: inset 0 0 0 2px #e9a049; box-shadow: inset 0 0 0 2px #e9a049; } + a:hover .card-poster-overlay, + a:hover .card-poster-overlay span { + opacity: 1; + } .badge { display: inline-block; min-width: 10px; @@ -666,7 +713,7 @@ text-align: center; white-space: nowrap; vertical-align: middle; - background-color: rgba(0, 0, 0, .15); + background-color: rgba(0, 0, 0, .25); border-radius: 2px; } @@ -720,14 +767,16 @@