From 36e604dc91528414ecbfa3f5241ec55c39bdf508 Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Wed, 13 Dec 2017 22:22:27 -0800 Subject: [PATCH] Add blur poster behind cover art --- data/interfaces/default/css/plexpy.css | 72 ++++++++++++++----- .../default/current_activity_instance.html | 51 +++++++------ data/interfaces/default/home_stats.html | 20 ++++-- data/interfaces/default/index.html | 1 + 4 files changed, 99 insertions(+), 45 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 37103f19..dcee13b0 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -675,9 +675,7 @@ a .users-poster-face:hover { backface-visibility: hidden; z-index: -1; } -.dashboard-activity-poster { - background-position: center; - background-size: cover; +.dashboard-activity-poster-container { height: 225px; width: 150px; margin-right: 5px; @@ -686,11 +684,33 @@ a .users-poster-face:hover { box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); -webkit-flex-shrink: 0; flex-shrink: 0; + z-index: 1; +} +.dashboard-activity-poster { + background-position: center; + background-size: cover; + height: 225px; + width: 150px; -webkit-transition: background 1s linear; transition: background 1s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; - z-index: 1; + z-index: 2; +} +.dashboard-activity-poster-blur { + background-position: center; + background-size: cover; + height: 225px; + width: 150px; + -webkit-transition: background .2s ease-in-out; + transition: background .2s ease-in-out; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0.50; + -webkit-filter: blur(3px); + -moz-filter: blur(3px); + filter: blur(3px); + z-index: 2; } .dashboard-activity-cover { background-position: center; @@ -698,17 +718,16 @@ a .users-poster-face:hover { height: 150px; width: 150px; margin-top: 37.5px; - margin-right: 5px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); - -webkit-flex-shrink: 0; - flex-shrink: 0; -webkit-transition: background 1s linear; transition: background 1s linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; - z-index: 1; + position: absolute; + top: 0; + z-index: 3; } .dashboard-activity-info-icon { width: 50px; @@ -1054,9 +1073,7 @@ a .dashboard-activity-metadata-user-thumb:hover { .dashboard-stats-background.flat { opacity: 1; } -.dashboard-stats-poster { - background-position: center; - background-size: cover; +.dashboard-stats-poster-container { height: 150px; width: 100px; margin-right: 5px; @@ -1065,11 +1082,35 @@ a .dashboard-activity-metadata-user-thumb:hover { box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); -webkit-flex-shrink: 0; flex-shrink: 0; + position: relative; + overflow: hidden; + z-index: 1; +} +.dashboard-stats-poster { + background-position: center; + background-size: cover; + height: 150px; + width: 100px; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; - z-index: 1; + z-index: 2; +} +.dashboard-stats-poster-blur { + background-position: center; + background-size: cover; + height: 150px; + width: 100px; + -webkit-transition: background .2s ease-in-out; + transition: background .2s ease-in-out; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + opacity: 0.50; + -webkit-filter: blur(3px); + -moz-filter: blur(3px); + filter: blur(3px); + z-index: 2; } .dashboard-stats-cover { background-position: center; @@ -1077,17 +1118,16 @@ a .dashboard-activity-metadata-user-thumb:hover { height: 100px; width: 100px; margin-top: 25px; - margin-right: 5px; -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); box-shadow: 0 0 4px rgba(0,0,0,.3), inset 0 0 0 1px rgba(255,255,255,.1); - -webkit-flex-shrink: 0; - flex-shrink: 0; -webkit-transition: background .2s ease-in-out; transition: background .2s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; - z-index: 1; + position: absolute; + top: 0; + z-index: 3; } .dashboard-stats-circle { background-position: center; diff --git a/data/interfaces/default/current_activity_instance.html b/data/interfaces/default/current_activity_instance.html index 13016117..aca120cf 100644 --- a/data/interfaces/default/current_activity_instance.html +++ b/data/interfaces/default/current_activity_instance.html @@ -82,31 +82,38 @@ DOCUMENTATION :: END
% endif % endif - % if data['channel_stream'] == '0': - % if data['media_type'] == 'movie': - - % elif data['media_type'] == 'episode': - - % elif data['media_type'] == 'track': - - % elif data['media_type'] in ('photo', 'clip'): - - % else: - +
<% if not _session['user_group'] == 'admin' or not data['session_id']: diff --git a/data/interfaces/default/home_stats.html b/data/interfaces/default/home_stats.html index f81601b9..2d69a317 100644 --- a/data/interfaces/default/home_stats.html +++ b/data/interfaces/default/home_stats.html @@ -84,14 +84,19 @@ DOCUMENTATION :: END
% endif % if stat_id in ('top_movies', 'popular_movies', 'top_tv', 'popular_tv', 'top_music', 'popular_music', 'last_watched'): - % elif stat_id == 'top_users':