From 5b2beb2b81059012975e8596297d88837a9e9563 Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Tue, 18 Aug 2015 16:44:17 -0700 Subject: [PATCH 01/10] More stylized homepage statistics Also fixed some formatting on user page and posters on info page. --- data/interfaces/default/css/plexpy.css | 1538 +++++++++-------- data/interfaces/default/home_stats.html | 261 +-- data/interfaces/default/info.html | 4 +- .../default/user_watch_time_stats.html | 2 +- 4 files changed, 932 insertions(+), 873 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 4d9bef17..9ded1363 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -13,29 +13,29 @@ a:focus { outline: none; } select { - margin: 5px 0 5px 0; - border: 2px solid #444; - background: #333; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - color: #999; - outline: none; + margin: 5px 0 5px 0; + border: 2px solid #444; + background: #333; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + color: #999; + outline: none; } select.input-sm { - margin: 5px 0 5px 0; - border: 2px solid #444; - background: #333; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - color: #999; - outline: none; + margin: 5px 0 5px 0; + border: 2px solid #444; + background: #333; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + color: #999; + outline: none; } img { -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } .navbar { background: #000; @@ -72,7 +72,7 @@ img { background-color: #999; } .padded-header { - margin: 25px 0 25px 0; + margin: 25px 0 25px 0; } .padded-header h1,h2,h3,h4,h5,h6 { color: #eee; @@ -81,22 +81,22 @@ img { font-size: 20px; } .activity-progress { - overflow: hidden; - height: 4px; - background-color: #111; - float: left; - width: 100%; - margin: 0 10px 5px 0; + overflow: hidden; + height: 4px; + background-color: #111; + float: left; + width: 100%; + margin: 0 10px 5px 0; } .activity-progress .bar { - background-color: #faa732; - background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); - background-image: -webkit-linear-gradient(top, #fbb450, #f89406); - background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(to bottom, #fbb450, #f89406); - background-repeat: repeat-x; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); + background-color: #faa732; + background-image: -moz-linear-gradient(top, #fbb450, #f89406); + background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); + background-image: -webkit-linear-gradient(top, #fbb450, #f89406); + background-image: -o-linear-gradient(top, #fbb450, #f89406); + background-image: linear-gradient(to bottom, #fbb450, #f89406); + background-repeat: repeat-x; + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); } .btn { outline:0px !important; @@ -238,44 +238,44 @@ fieldset[disabled] .btn-bright.active { background-color: #eb8600; } .modal-header { - padding: 15px 20px; - background-color: #323232; - border-radius: 3px 3px 0 0; - border-bottom: 1px solid #1C1C1C; + padding: 15px 20px; + background-color: #323232; + border-radius: 3px 3px 0 0; + border-bottom: 1px solid #1C1C1C; } .modal-body { - position: relative; - overflow-y: auto; - max-height: 600px; - padding: 15px; - background-color: #222222; + position: relative; + overflow-y: auto; + max-height: 600px; + padding: 15px; + background-color: #222222; } .modal-body table { - color: #999; + color: #999; } .modal-body li { - margin-top: 7px; - margin-left: 4px; - color: #aaa; + margin-top: 7px; + margin-left: 4px; + color: #aaa; } .modal-body li strong { - color: #eee; + color: #eee; } .modal-body i { - color: #F9AA03; + color: #F9AA03; } .modal-body i.fa { - color: #fff; + color: #fff; } .modal-body strong { - color: #F9AA03; + color: #F9AA03; } .modal-footer { - padding: 15px 20px; - margin-top: 0; - background-color: #323232; - border-radius: 0 0 3px 3px; - border-top: 1px solid #1C1C1C; + padding: 15px 20px; + margin-top: 0; + background-color: #323232; + border-radius: 0 0 3px 3px; + border-top: 1px solid #1C1C1C; } textarea, input[type="text"], @@ -293,15 +293,15 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - margin: 5px 0 5px 0; - color: #fff; - border: 0px solid #444; - background: #555; - height: 32px; - padding: 6px 12px; - background-color: #555; - border-radius: 3px; - transition: background-color .3s; + margin: 5px 0 5px 0; + color: #fff; + border: 0px solid #444; + background: #555; + height: 32px; + padding: 6px 12px; + background-color: #555; + border-radius: 3px; + transition: background-color .3s; } .pagination > li > a, .pagination > li > span { @@ -357,7 +357,7 @@ input[type="color"], margin: 0 0 20px 0; } .btn-form { - padding: 4px 12px; + padding: 4px 12px; margin: 5px 0 5px 0; font-size: 14px; font-weight: normal; @@ -382,11 +382,11 @@ input[type="color"], -webkit-appearance:none; } .btn-form:hover { - color: #fff; - background-color: #333; + color: #fff; + background-color: #333; } .btn-form:focus { - color: #fff; + color: #fff; } .form-control-feedback { position: absolute; @@ -403,846 +403,887 @@ input[type="color"], pointer-events: none; } .poster { - float: left; - min-height: 225px; - min-width: 150px; - margin-bottom: 8px; - position: relative; + float: left; + min-height: 225px; + min-width: 150px; + margin-bottom: 8px; + position: relative; } .poster-face { - background-position: center; - background-size: cover; - height: 225px; - width: 150px; - position: relative; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + background-position: center; + background-size: cover; + height: 225px; + width: 150px; + position: relative; + 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); } .cover-face { - background-position: center; - background-size: cover; - height: 150px; - width: 150px; - position: absolute; - bottom: 0; - webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.1); + background-position: center; + background-size: cover; + height: 150px; + width: 150px; + position: absolute; + bottom: 0; + 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); } .users-poster-face img { - bottom: 0; - overflow: hidden; - float: left; - background-color: #323232; - background-position: center; - background-size: cover; - -webkit-border-radius: 1000px; - -moz-border-radius: 1000px; - border-radius: 1000px; - -webkit-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); - width: 40px; - height: 40px; + bottom: 0; + overflow: hidden; + float: left; + background-color: #323232; + background-position: center; + background-size: cover; + -webkit-border-radius: 1000px; + -moz-border-radius: 1000px; + border-radius: 1000px; + -webkit-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); + width: 40px; + height: 40px; } .users-poster-face img:hover{ - -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #F9AA03; - box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #F9AA03; + -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #F9AA03; + box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #F9AA03; } .users-name { - position: relative; + position: relative; } .platform { - padding-bottom: 0px; - margin-bottom: 0px; - margin-left: 5px; - float: left; + padding-bottom: 0px; + margin-bottom: 0px; + margin-left: 5px; + float: left; } .dashboard-activity-metadata-wrapper { - position: relative; - left: 0px; - width: 250px; - font-size: 13px; + position: relative; + left: 0px; + width: 250px; + font-size: 13px; } .dashboard-activity-button-info { - position: absolute; - top: 3px; - left: 5px; - z-index: 1; + position: absolute; + top: 3px; + left: 5px; + z-index: 1; } .dashboard-activity-poster-face { - height: 141px; - width: 250px; - position: relative; - top: 0px; - background-color: rgba(255,255,255,.03); - margin-bottom: 11px; - text-align: center; + height: 141px; + width: 250px; + position: relative; + top: 0px; + background-color: rgba(255,255,255,.03); + margin-bottom: 11px; + text-align: center; } .dashboard-activity-poster-face img { - bottom: 0; - overflow: hidden; - height: 140px; - min-width: 140px; - max-width: 250px; + bottom: 0; + overflow: hidden; + height: 140px; + min-width: 140px; + max-width: 250px; } .dashboard-activity-poster-music-bg { - background-position: center; - position:absolute; + background-position: center; + position:absolute; width:100%; height:100%; opacity: 0.7; z-index: -999; } .dashboard-activity-poster-info-bar { - position:absolute; - color: #F9AA03; - bottom: 0; + position:absolute; + color: #F9AA03; + bottom: 0; width:100%; height: 100px; background: -moz-linear-gradient(top, rgba(0,0,0,0) 30%, rgba(0,0,0,1) 100%); - background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); - background: -webkit-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: -o-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: -ms-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); - background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(30%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); + background: -webkit-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); + background: -o-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); + background: -ms-linear-gradient(top, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); + background: linear-gradient(to bottom, rgba(0,0,0,0) 30%,rgba(0,0,0,1) 100%); } .dashboard-activity-poster-info-text { - position: absolute; + position: absolute; bottom: 0; left: 0; - float: left; - text-align: left; - padding: 2px 2px 6px 2px; - font-size: 12px; - color: #eee; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 150px; + float: left; + text-align: left; + padding: 2px 2px 6px 2px; + font-size: 12px; + color: #eee; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 150px; } .dashboard-activity-poster-info-time { - position: absolute; + position: absolute; bottom: 0; right: 0; - float: right; - text-align: right; - padding: 2px 2px 6px 2px; - font-size: 12px; - color: #eee; + float: right; + text-align: right; + padding: 2px 2px 6px 2px; + font-size: 12px; + color: #eee; } .dashboard-activity-metadata-user { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - width: 80%; - margin-right: 5px; - float: left; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + width: 80%; + margin-right: 5px; + float: left; } .dashboard-activity-metadata-user a { - color: #F9AA03; + color: #F9AA03; } .dashboard-activity-metadata-user a:hover { - color: #FFCD62; + color: #FFCD62; } .dashboard-activity-metadata-title { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: 14px; - width: 80%; - margin-right: 5px; - color: #fff; - float: left; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: 14px; + width: 80%; + margin-right: 5px; + color: #fff; + float: left; } .dashboard-activity-metadata-title a:hover { - color: #F9AA03; + color: #F9AA03; } .dashboard-activity-metadata-platform { - float: right; + float: right; } .dashboard-activity-metadata-platform img { - width: 40px; - height: 40px; + width: 40px; + height: 40px; } .dashboard-activity-metadata-progress-wrapper { - margin-bottom: 20px; - font-size: 12px; - font-weight: bold; - color: #F9AA03; + margin-bottom: 20px; + font-size: 12px; + font-weight: bold; + color: #F9AA03; } .dashboard-activity-metadata-progress-minutes { - width: 100%; + width: 100%; } .dashboard-activity-instance-overlay { - position: relative; - top: -12px; - text-align: left; - height: 53px; - width: 250px; - border-radius: 0 0 3px 3px; + position: relative; + top: -12px; + text-align: left; + height: 53px; + width: 250px; + border-radius: 0 0 3px 3px; } .dashboard-activity-info-details-overlay { - text-align: left; - background-color: rgba(0,0,0,0.5); - width: 250px; - padding: 5px 0px 5px 0px; + text-align: left; + background-color: rgba(0,0,0,0.5); + width: 250px; + padding: 5px 0px 5px 0px; } .dashboard-activity-info-details-content { - margin-left: 5px; - margin-right: 5px; - width: 245px; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - color: #999; + margin-left: 5px; + margin-right: 5px; + width: 245px; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + color: #999; } .dashboard-activity-info-details-content strong { - color: #fff; - font-weight: normal; + color: #fff; + font-weight: normal; } .instance { - padding-bottom: 15px; - float: left; - position: relative; - margin-right: 27px; + padding-bottom: 15px; + float: left; + position: relative; + margin-right: 27px; } .dashboard-recent-media-row { - width: 100%; - margin:0 auto; - text-align: center; + width: 100%; + margin:0 auto; + text-align: center; } .dashboard-recent-media { - width: 100%; - margin: auto; - list-style: none; + width: 100%; + margin: auto; + list-style: none; } .dashboard-recent-media-instance { } .dashboard-recent-media-instance a:hover .poster-face { - 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; + 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; } .dashboard-recent-media li { - margin-right: 27px; - position: relative; - float: left; + margin-right: 27px; + position: relative; + float: left; } .dashboard-recent-media-metacontainer{ - width: 153px; - font-size: 13px; - margin-bottom: 20px; - clear: both; + width: 153px; + font-size: 13px; + margin-bottom: 20px; + clear: both; } .dashboard-recent-media-metacontainer h3 { - padding-top: 5px; - color: #fff; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - font-size: 13px; - margin: 0; - line-height: 15px; - font-weight: normal; - width: 153px; - white-space: nowrap; - text-align: center; - clear: both; + padding-top: 5px; + color: #fff; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + font-size: 13px; + margin: 0; + line-height: 15px; + font-weight: normal; + width: 153px; + white-space: nowrap; + text-align: center; + clear: both; } .dashboard-recent-media-metacontainer .text-muted { - padding-top: 5px; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - white-space: nowrap; - text-align: center; + padding-top: 5px; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + white-space: nowrap; + text-align: center; } .art-face { - background-repeat: no-repeat; - background-position: 50% 0%; - background-size: 100%; - height: 540px; - overflow: hidden; - min-width: 280px; - position: relative; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 0 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0 0 0px rgba(0,0,0,0.75); - box-shadow: 0 0 0px rgba(0,0,0,0.75); - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - -o-perspective: 1000; - perspective: 1000; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; - backface-visibility: hidden; - clear: both; + background-repeat: no-repeat; + background-position: 50% 0%; + background-size: 100%; + height: 540px; + overflow: hidden; + min-width: 280px; + position: relative; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 0 0px rgba(0,0,0,0.75); + -moz-box-shadow: 0 0 0px rgba(0,0,0,0.75); + box-shadow: 0 0 0px rgba(0,0,0,0.75); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + clear: both; } .art-face img { - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - border-color: #1d1d1d; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75); - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.75); - box-shadow: 0 0 10px rgba(0,0,0,0.75); - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - -o-perspective: 1000; - perspective: 1000; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; - backface-visibility: hidden; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border-color: #1d1d1d; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75); + -moz-box-shadow: 0 0 10px rgba(0,0,0,0.75); + box-shadow: 0 0 10px rgba(0,0,0,0.75); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; } .art-music-face { - background-repeat: no-repeat; - background-position: 50% 50%; - background-size: 100%; - width: 250px; - height: 141px; - overflow: hidden; - position: relative; - -webkit-border-radius: 2px; - -moz-border-radius: 2px; - border-radius: 2px; - -webkit-box-shadow: 0 0 0px rgba(0,0,0,0.75); - -moz-box-shadow: 0 0 0px rgba(0,0,0,0.75); - box-shadow: 0 0 0px rgba(0,0,0,0.75); - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - -o-perspective: 1000; - perspective: 1000; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; - backface-visibility: hidden; - clear: both; + background-repeat: no-repeat; + background-position: 50% 50%; + background-size: 100%; + width: 250px; + height: 141px; + overflow: hidden; + position: relative; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + -webkit-box-shadow: 0 0 0px rgba(0,0,0,0.75); + -moz-box-shadow: 0 0 0px rgba(0,0,0,0.75); + box-shadow: 0 0 0px rgba(0,0,0,0.75); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + clear: both; } .summary-wrapper { - height: auto; - width: 100%; - position: absolute; - bottom: 0; + height: auto; + width: 100%; + position: absolute; + bottom: 0; } .summary-overlay { - background-color: rgba(0,0,0,0.85); - color: #fff; - font-size: 14px; - height: auto; - position: relative; - top: 0px; - border-color: #1d1d1d; - border: 2px solid #191919; + background-color: rgba(0,0,0,0.85); + color: #fff; + font-size: 14px; + height: auto; + position: relative; + top: 0px; + border-color: #1d1d1d; + border: 2px solid #191919; } .summary-content-wrapper { - margin-left: auto; - margin-right: auto; - width: 960px; + margin-left: auto; + margin-right: auto; + width: 960px; } .summary-content-poster { - position: relative; - top: -10px; - float: left; - margin-left: 20px; - width: 174px; - height: 260px; + position: relative; + top: -10px; + float: left; + margin-left: 20px; + width: 174px; + height: 260px; } .summary-content-poster img { - bottom: 0; - overflow: hidden; - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; - -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75); - -moz-box-shadow: 0 0 10px rgba(0,0,0,0.75); - box-shadow: 0 0 10px rgba(0,0,0,0.75); - -webkit-transform: translateZ(0); - -moz-transform: translateZ(0); - -ms-transform: translateZ(0); - -o-transform: translateZ(0); - transform: translateZ(0); - -webkit-transform-style: preserve-3d; - -moz-transform-style: preserve-3d; - -ms-transform-style: preserve-3d; - -o-transform-style: preserve-3d; - transform-style: preserve-3d; - -webkit-perspective: 1000; - -moz-perspective: 1000; - -ms-perspective: 1000; - -o-perspective: 1000; - perspective: 1000; - -webkit-backface-visibility: hidden; - -moz-backface-visibility: hidden; - -ms-backface-visibility: hidden; - -o-backface-visibility: hidden; - backface-visibility: hidden; - width: auto; - height: 260px; - border: 1px solid rgba(128, 128, 128, 0.3); + bottom: 0; + overflow: hidden; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.75); + -moz-box-shadow: 0 0 10px rgba(0,0,0,0.75); + box-shadow: 0 0 10px rgba(0,0,0,0.75); + -webkit-transform: translateZ(0); + -moz-transform: translateZ(0); + -ms-transform: translateZ(0); + -o-transform: translateZ(0); + transform: translateZ(0); + -webkit-transform-style: preserve-3d; + -moz-transform-style: preserve-3d; + -ms-transform-style: preserve-3d; + -o-transform-style: preserve-3d; + transform-style: preserve-3d; + -webkit-perspective: 1000; + -moz-perspective: 1000; + -ms-perspective: 1000; + -o-perspective: 1000; + perspective: 1000; + -webkit-backface-visibility: hidden; + -moz-backface-visibility: hidden; + -ms-backface-visibility: hidden; + -o-backface-visibility: hidden; + backface-visibility: hidden; + width: auto; + height: 260px; + border: 1px solid rgba(128, 128, 128, 0.3); } .summary-content { - position: relative; - top: 0px; - left: 20px; - color: #999; - height: auto; - overflow: hidden; - margin-right: 20px; - margin-bottom: 20px; + position: relative; + top: 0px; + left: 20px; + color: #999; + height: auto; + overflow: hidden; + margin-right: 20px; + margin-bottom: 20px; } .summary-content-title h1{ - margin-top: 15px; - margin-bottom: 15px; - color: #F9AA03; - font-size: 24px; - line-height: 32px; - float: left; + margin-top: 15px; + margin-bottom: 15px; + color: #F9AA03; + font-size: 24px; + line-height: 32px; + float: left; } .summary-content-details-wrapper { - width: 100%; - padding-bottom: 15px; - margin-top: -10px; - clear: both; - position: relative; - top: -15px; + width: 100%; + padding-bottom: 15px; + margin-top: -10px; + clear: both; + position: relative; + top: -15px; } .summary-content-director { - float: left; - margin-right: 10px; - line-height: 24px; + float: left; + margin-right: 10px; + line-height: 24px; } .summary-content-director strong { - color: #fff; + color: #fff; } .summary-content-duration { - float: left; - margin-right: 10px; - line-height: 24px; + float: left; + margin-right: 10px; + line-height: 24px; } .summary-content-duration strong { - color: #fff; + color: #fff; } .summary-content-content-rating { - float: left; - line-height: 24px; - margin-right: 10px; + float: left; + line-height: 24px; + margin-right: 10px; } .summary-content-content-rating strong { - color: #fff; + color: #fff; } .summary-content-summary { - overflow: hidden; - color: #fff; - float: left; - position: relative; - clear: both; - padding-right: 10px; - height: auto; - max-height: 160px; - padding-bottom: 0px; + overflow: hidden; + color: #fff; + float: left; + position: relative; + clear: both; + padding-right: 10px; + height: auto; + max-height: 160px; + padding-bottom: 0px; } .summary-content-people-wrapper hidden-phone hidden-tablet { - overflow: hidden; - height: auto; - min-height: 0px; + overflow: hidden; + height: auto; + min-height: 0px; } .summary-content-actors { - margin-top: 0px; - margin-left: 35px; - margin-right: 35px; - font-size: 12px; - line-height: 18px; - color: #999; - overflow: hidden; + margin-top: 0px; + margin-left: 35px; + margin-right: 35px; + font-size: 12px; + line-height: 18px; + color: #999; + overflow: hidden; } .summary-content-actors li { - list-style: none; - list-style-image: none; - display: block; - font-size: 12px; - line-height: 18px; - color: #fff; + list-style: none; + list-style-image: none; + display: block; + font-size: 12px; + line-height: 18px; + color: #fff; } .summary-content-writers { - margin-top: 10px; - margin-left: 35px; - margin-right: 35px; - font-size: 12px; - line-height: 18px; - color: #999; - overflow: hidden; + margin-top: 10px; + margin-left: 35px; + margin-right: 35px; + font-size: 12px; + line-height: 18px; + color: #999; + overflow: hidden; } .summary-content-writers li { - list-style: none; - list-style-image: none; - display: block; - font-size: 12px; - line-height: 18px; - color: #fff; + list-style: none; + list-style-image: none; + display: block; + font-size: 12px; + line-height: 18px; + color: #fff; } .rateit { - display: -moz-inline-box; - display: inline-block; - position: relative; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -o-user-select: none; - -ms-user-select: none; - user-select: none; - -webkit-touch-callout: none; - float: right; - margin-top: 23px; - margin-right: 20px; - overflow: hidden; - white-space: nowrap; + display: -moz-inline-box; + display: inline-block; + position: relative; + -webkit-user-select: none; + -khtml-user-select: none; + -moz-user-select: none; + -o-user-select: none; + -ms-user-select: none; + user-select: none; + -webkit-touch-callout: none; + float: right; + margin-top: 23px; + margin-right: 20px; + overflow: hidden; + white-space: nowrap; } .rateit .rateit-range { - background: url(../images/star-gray-16.png); - height: 16px; + background: url(../images/star-gray-16.png); + height: 16px; } .rateit .rateit-selected { - background: url(../images/star-16.png); + background: url(../images/star-16.png); } .season-episodes-wrapper { } .season-episodes-instance { - list-style: none; - margin: 0 0 0px 0px; + list-style: none; + margin: 0 0 0px 0px; } .season-episodes-instance>li { - float: left; - height: 200px; - width: 250px; - position: relative; - left: 0px; + float: left; + height: 200px; + width: 250px; + position: relative; + left: 0px; } .season-episodes-poster { - float: left; - position: relative; - left: 0px; + float: left; + position: relative; + left: 0px; } .season-episodes-poster-face img { - bottom: 0; - overflow: hidden; - width: 205px; - height: 115px; + bottom: 0; + overflow: hidden; + width: 205px; + height: 115px; } -.season-episodes-poster-face img:hover { - webkit-box-shadow: 0 0 0 2px #F9AA03; - -moz-box-shadow: 0 0 0 2px #F9AA03; - box-shadow: 0 0 0 2px #F9AA03; +.season-episodes-poster-face img:hover { + webkit-box-shadow: 0 0 0 2px #F9AA03; + -moz-box-shadow: 0 0 0 2px #F9AA03; + box-shadow: 0 0 0 2px #F9AA03; } .season-episodes-card-overlay { - position: absolute; - left: 0; - right: 0; - bottom: 0; - padding: 4px 8px; - text-align: left; - background-color: #000; - background-color: rgba(0,0,0,0.7); - border-top: 1px solid #000; + position: absolute; + left: 0; + right: 0; + bottom: 0; + padding: 4px 8px; + text-align: left; + background-color: #000; + background-color: rgba(0,0,0,0.7); + border-top: 1px solid #000; } .season-episodes-card-overlay-index { - color: #fff; - font-size: 11px; - text-shadow: 0 1px 5px rgba(0,0,0,0.2); + color: #fff; + font-size: 11px; + text-shadow: 0 1px 5px rgba(0,0,0,0.2); } .season-episodes-instance-text-wrapper { - clear: both; - width: 205px; + clear: both; + width: 205px; } .season-episodes-title, .season-episodes-title a { - text-decoration: none; - font-size: 14px; - font-weight: normal; - color: #fff; - float: left; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - white-space: nowrap; - width: 205px; - margin-top: 2px; - margin-left: 0px; + text-decoration: none; + font-size: 14px; + font-weight: normal; + color: #fff; + float: left; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + white-space: nowrap; + width: 205px; + margin-top: 2px; + margin-left: 0px; } .season-episodes a:hover { - color: #F9AA03; + color: #F9AA03; } .season-episodes-season { - color: #aaa; - font-size: 12px; - float: left; + color: #aaa; + font-size: 12px; + float: left; } .user-info-wrapper { - height: 113px; + height: 113px; } .user-info-poster-face { - float: left; - margin-top: 15px; + float: left; + margin-top: 15px; } .user-info-poster-face img { - bottom: 0; - margin-right: 15px; - overflow: hidden; - float: left; - background-color: #323232; - background-position: center; - background-size: cover; - -webkit-border-radius: 1000px; - -moz-border-radius: 1000px; - border-radius: 1000px; - -webkit-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); + bottom: 0; + margin-right: 15px; + overflow: hidden; + float: left; + background-color: #323232; + background-position: center; + background-size: cover; + -webkit-border-radius: 1000px; + -moz-border-radius: 1000px; + border-radius: 1000px; + -webkit-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); } .user-info-username { - font-size: 24px; - color: #fff; - position: relative; - top: 27px; + font-size: 24px; + color: #fff; + position: relative; + top: 27px; } .user-info-nav { - position: relative; - top: 15px; - left: -5px; + position: relative; + top: 15px; + left: -5px; } .user-info-nav > .active > a, .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { - color: #F9AA03; + color: #F9AA03; } .user-info-nav a:hover { - text-decoration: none; + text-decoration: none; } .user-info-nav ul { - list-style: none; + list-style: none; } .user-info-nav li { - float: left; - margin-left: 10px; - margin-right: 10px; + float: left; + margin-left: 10px; + margin-right: 10px; } .user-overview-stats-wrapper { } .user-overview-stats-wrapper ul { - list-style: none; - padding: 0; - margin: 0px 0px 0px 0px; + list-style: none; + padding: 0; + margin: 0px 0px 0px 0px; } .user-overview-stats-instance { - line-height: 11px; } .user-overview-stats-instance-device_icon { - float: left; - padding-right: 15px; + float: left; + padding-right: 15px; } .user-overview-stats-instance-device_icon img{ } .user-overview-stats-instance li { - float: left; - list-style: none; - width: 340px; - height: 90px; + float: left; + list-style: none; + width: 340px; + height: 90px; } .user-overview-stats-instance-text { - position: relative; - top: 0px; - left: 0px; + position: relative; + top: 0px; + left: 0px; } .user-overview-stats-instance p { - color: #aaa; - font-size: 12px; - float:left; - position: relative; - top: 30px; - left: 0px; + color: #aaa; + font-size: 12px; + float: left; + position: relative; + top: 14px; + left: 0px; +} +.user-overview-stats-instance h3 strong{ + color: #fff; } .user-overview-stats-instance h3 { - font-size: 30px; - font-weight: bold; - color: #F9AA03; - line-height: 30px; - position: relative; - top: 0px; - margin-left: 5px; - margin-right: 5px; - float: left; + font-size: 30px; + font-weight: bold; + color: #F9AA03; + line-height: 22px; + position: relative; + top: 5px; + margin: 0 5px 0 10px; + float: left; } .user-overview-stats-instance h4 { - color: #fff; - margin-bottom: 10px; + color: #fff; + margin-bottom: 25px; } .user-overview-stats-instance h1 { - font-size: 54px; - font-weight: normal; - float: left; - color: #333; - color: rgba(255,255,255,0.05); - text-shadow: none; - position: relative; - top: 3px; - left: 3px; + font-size: 54px; + font-weight: normal; + float: left; + color: #333; + color: rgba(255,255,255,0.05); + text-shadow: none; + position: relative; + top: 3px; + left: 3px; } .user-platforms ul { - list-style: none; - margin: 0; + list-style: none; + margin: 0; } .user-platforms-instance { - float: left; - width: 240px; - height: 90px; - margin-bottom: 25px; + float: left; + width: 240px; + height: 90px; + margin-bottom: 25px; } .user-platforms-instance li { } .user-platforms-instance-poster { - float: left; - width: 75px; - border-radius: 3px; - -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); - -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); - box-shadow: 0 0 5px rgba(0,0,0,0.5); + float: left; + width: 75px; + border-radius: 3px; + -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); + -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); + box-shadow: 0 0 5px rgba(0,0,0,0.5); } .user-platforms-instance-name { - float: left; - padding-top: 14px; - color: #fff; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - font-size: 13px; - line-height: 15px; - font-weight: normal; - width: 140px; - margin-left: 10px; + float: left; + padding-top: 14px; + color: #fff; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + font-size: 13px; + line-height: 15px; + font-weight: normal; + width: 140px; + margin-left: 10px; } .user-platforms-instance-playcount h3 { - font-size: 30px; - font-weight: bold; - color: #F9AA03; - line-height: 22px; - position: relative; - top: 5px; - margin: 0 5px 0 10px; - float: left; + font-size: 30px; + font-weight: bold; + color: #F9AA03; + line-height: 22px; + position: relative; + top: 5px; + margin: 0 5px 0 10px; + float: left; } .user-platforms-instance-playcount p { - color: #aaa; - font-size: 12px; - float: left; - position: relative; - top: 15px; - left: 0px; + color: #aaa; + font-size: 12px; + float: left; + position: relative; + top: 14px; + left: 0px; } .home-platforms-instance-poster { - float: left; - height: 120px; - max-width: 81px; - padding: 5px 10px 5px 10px; + margin-left: 10px; } .home-platforms-instance-box { - float: left; - height: 80px; + background-size: contain; + position: relative; + top: 25px; + left: 25px; + height: 80px; width: 80px; - padding: 25px 10px 25px 10px; } .home-platforms-instance-oval { - float: left; - height: 80px; + background-size: contain; + position: relative; + margin-top: 25px; + margin-left: 25px; + height: 80px; width: 80px; - padding: 25px 10px 25px 10px; -webkit-border-radius: 50%; - -moz-border-radius: 50%; - border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; } .home-platforms-instance-name { - float: left; - color: #fff; - text-overflow: ellipsis; - overflow: hidden; - position: relative; - font-size: 13px; - line-height: 15px; - font-weight: bold; - width: 180px; - margin-left: 10px; - margin-top: 10px; + float: left; + color: #fff; + text-overflow: ellipsis; + overflow: hidden; + position: relative; + font-size: 13px; + line-height: 15px; + font-weight: bold; + width: 100%; + padding: 10px 0 0 10px; } -.home-platforms-instance { - float: left; - width: 300px; - height: 130px; - padding: 5px; +.home-platforms-instance-playcount { + float: left; + width: 180px; +} +.home-platforms-instance-mediainfo { + float: left; background-color: #282828; - margin-right: 20px; - margin-bottom: 20px; + position: absolute; + bottom: 0; + left: 0; + padding-left: 170px; + width: 100%; + height: 175px; +} +.home-platforms-instance-media { + position: relative; + float: left; + width: 375px; + height: 225px; + padding-bottom: 10px; + margin-right: 25px; + margin-bottom: 25px; webkit-box-sizing: content-box; box-sizing: content-box; } +.home-platforms-instance-info { + float: left; + background-color: #282828; + position: absolute; + bottom: 0; + left: 0; + padding-left: 170px; + width: 100%; + height: 130px; +} +.home-platforms-instance { + position: relative; + float: left; + width: 375px; + height: 120px; + padding-bottom: 10px; + margin-right: 25px; + margin-bottom: 25px; + webkit-box-sizing: content-box; + box-sizing: content-box; +} +.home-platforms-instance-media a:hover .poster-face { + 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; +} .history-table-title { - text-overflow: ellipsis; - overflow: hidden; - max-width: 350px; + text-overflow: ellipsis; + overflow: hidden; + max-width: 350px; } .graphs-instance { - height: 330px; + height: 330px; padding: 20px; background-color: #333; margin-bottom: 20px; border-radius: 8px; } .watch-chart { - margin-top: 10px; - height: 300px; - width: 100%; + margin-top: 10px; + height: 300px; + width: 100%; } .graphs-load { - color: #999999; - text-align: center; - line-height: 300px; + color: #999999; + text-align: center; + line-height: 300px; } .card-back { padding: 16px; @@ -1284,113 +1325,113 @@ input[type="color"], overflow: hidden; } .table-card-back td { - font-size: 12px; + font-size: 12px; } .header-bar { - float: left; + float: left; } .header-bar span { - font-size: 22px; - line-height: 34px; + font-size: 22px; + line-height: 34px; } .button-bar { - float: right; + float: right; } .colvis-button-bar { - float: right; + float: right; } .nav-settings, .nav-settings ul { - margin: 0px 0px 20px 0px; + margin: 0px 0px 20px 0px; } .nav-settings > li { - list-style: none; - background-color: #282828; - width: 100%; - max-width: 340px; - min-width: 200px; - border-top: 1px solid #2d2d2d; + list-style: none; + background-color: #282828; + width: 100%; + max-width: 340px; + min-width: 200px; + border-top: 1px solid #2d2d2d; } .nav-settings > li > a { - display: block; - padding: 15px 15px 15px 15px; - color: #999; - -webkit-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - transition: all 0.3s ease; + display: block; + padding: 15px 15px 15px 15px; + color: #999; + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; } .nav-settings > li > a:hover, .nav-settings > li > a:focus { - color: #eee; - background-color: #2f2f2f; + color: #eee; + background-color: #2f2f2f; } .nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { - color: #eb8600; - background-color: #2f2f2f; + color: #eb8600; + background-color: #2f2f2f; } .stacked-configs, .stacked-configs ul { - margin: 0px 0px 20px 0px; + margin: 0px 0px 20px 0px; } .stacked-configs > li { - list-style: none; - background-color: #282828; - width: 100%; - min-width: 320px; - max-width: 900px; + list-style: none; + background-color: #282828; + width: 100%; + min-width: 320px; + max-width: 900px; } .stacked-configs > li > span { - display: block; - padding: 8px 20px 8px 15px; - color: #eee; - border-left: 2px solid #444; - border-top: 1px solid #2d2d2d; - -webkit-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - transition: all 0.3s ease; + display: block; + padding: 8px 20px 8px 15px; + color: #eee; + border-left: 2px solid #444; + border-top: 1px solid #2d2d2d; + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; } .stacked-configs > li > span:hover, .stacked-configs > li > span:focus { - color: #eee; - background-color: #2f2f2f; + color: #eee; + background-color: #2f2f2f; } .stacked-configs > li > span > a.toggle-right { - float: right; - color: #999; - padding-left: 10px; + float: right; + color: #999; + padding-left: 10px; } .stacked-configs > li > span > a.toggle-left { - color: #444; - padding-right: 8px; + color: #444; + padding-right: 8px; } .stacked-configs > li > span > a:hover { - color: #eee; + color: #eee; } .stacked-configs > li > span > a.active { - color: #eb8600; + color: #eb8600; } .accordion { - width: 100%; - max-width: 900px; - margin: 0px 0px 20px 0px; - background: #282828; - list-style: none; + width: 100%; + max-width: 900px; + margin: 0px 0px 20px 0px; + background: #282828; + list-style: none; } .accordion .link { - cursor: pointer; - display: block; - padding: 8px 20px 8px 30px; - color: #999; - border-bottom: 1px solid #2d2d2d; - position: relative; - -webkit-transition: all 0.3s ease; - -o-transition: all 0.3s ease; - transition: all 0.3s ease; + cursor: pointer; + display: block; + padding: 8px 20px 8px 30px; + color: #999; + border-bottom: 1px solid #2d2d2d; + position: relative; + -webkit-transition: all 0.3s ease; + -o-transition: all 0.3s ease; + transition: all 0.3s ease; } .accordion li:last-child .link { - border-bottom: 0; + border-bottom: 0; } .accordion li i { position: absolute; @@ -1411,39 +1452,39 @@ input[type="color"], background: #2f2f2f; } .accordion li.open .link { - color: #eb8600; + color: #eb8600; } .accordion li.open i { - color: #eb8600; + color: #eb8600; } .accordion li.open i.fa-chevron-down { - -webkit-transform: rotate(180deg); - -ms-transform: rotate(180deg); - -o-transform: rotate(180deg); - transform: rotate(180deg); + -webkit-transform: rotate(180deg); + -ms-transform: rotate(180deg); + -o-transform: rotate(180deg); + transform: rotate(180deg); } .submenu { - display: none; - background: #2d2d2d; - list-style: none; - margin: 0px; - padding: 20px; + display: none; + background: #2d2d2d; + list-style: none; + margin: 0px; + padding: 20px; } .submenu li { - border-bottom: 1px solid #2f2f2f; + border-bottom: 1px solid #2f2f2f; } .submenu a { - display: block; - text-decoration: none; - color: #d9d9d9; - padding: 12px; - -webkit-transition: all 0.25s ease; - -o-transition: all 0.25s ease; - transition: all 0.25s ease; + display: block; + text-decoration: none; + color: #d9d9d9; + padding: 12px; + -webkit-transition: all 0.25s ease; + -o-transition: all 0.25s ease; + transition: all 0.25s ease; } .submenu a:hover { - background: #eb8600; - color: #FFF; + background: #eb8600; + color: #FFF; } .ajaxMsg { background-color: rgba(255,255,255,0.075); @@ -1495,6 +1536,9 @@ input[type="color"], width: 250px; z-index: 9999; } +#home-stats { + max-width: 1600px; +} #updatebar { background-color: #444; color: #999999; diff --git a/data/interfaces/default/home_stats.html b/data/interfaces/default/home_stats.html index 3e65a5ef..046c42d2 100644 --- a/data/interfaces/default/home_stats.html +++ b/data/interfaces/default/home_stats.html @@ -62,175 +62,190 @@ DOCUMENTATION :: END % endfor % else: From c98505038a8c9e68b35a50e87194457639c88e50 Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Wed, 19 Aug 2015 00:50:19 -0700 Subject: [PATCH 05/10] Fallback to show poster if season poster is unavailable. --- plexpy/datafactory.py | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/plexpy/datafactory.py b/plexpy/datafactory.py index 005f6d07..cecee027 100644 --- a/plexpy/datafactory.py +++ b/plexpy/datafactory.py @@ -449,21 +449,21 @@ class DataFactory(object): try: if user_id: query = 'SELECT session_history.id, session_history.media_type, session_history.rating_key, title, ' \ - 'grandparent_title, thumb, parent_thumb, media_index, parent_media_index, year, started, user ' \ + 'grandparent_title, thumb, parent_thumb, grandparent_thumb, media_index, parent_media_index, year, started, user ' \ 'FROM session_history_metadata ' \ 'JOIN session_history ON session_history_metadata.id = session_history.id ' \ 'WHERE user_id = ? AND session_history.media_type != "track" ORDER BY started DESC LIMIT ?' result = monitor_db.select(query, args=[user_id, limit]) elif user: query = 'SELECT session_history.id, session_history.media_type, session_history.rating_key, title, ' \ - 'grandparent_title, thumb, parent_thumb, media_index, parent_media_index, year, started, user ' \ + 'grandparent_title, thumb, parent_thumb, grandparent_thumb, media_index, parent_media_index, year, started, user ' \ 'FROM session_history_metadata ' \ 'JOIN session_history ON session_history_metadata.id = session_history.id ' \ 'WHERE user = ? AND session_history.media_type != "track" ORDER BY started DESC LIMIT ?' result = monitor_db.select(query, args=[user, limit]) else: query = 'SELECT session_history.id, session_history.media_type, session_history.rating_key, title, ' \ - 'grandparent_title, thumb, parent_thumb, media_index, parent_media_index, year, started, user ' \ + 'grandparent_title, thumb, parent_thumb, grandparent_thumb, media_index, parent_media_index, year, started, user ' \ 'FROM session_history_metadata WHERE session_history.media_type != "track"' \ 'JOIN session_history ON session_history_metadata.id = session_history.id ' \ 'ORDER BY started DESC LIMIT ?' @@ -473,8 +473,10 @@ class DataFactory(object): return None for row in result: - if row[1] == 'episode': + if row[1] == 'episode' and row[6]: thumb = row[6] + elif row[1] == 'episode': + thumb = row[7] else: thumb = row[5] @@ -484,11 +486,11 @@ class DataFactory(object): 'title': row[3], 'parent_title': row[4], 'thumb': thumb, - 'index': row[7], - 'parent_index': row[8], - 'year': row[9], - 'time': row[10], - 'user': row[11] + 'index': row[8], + 'parent_index': row[9], + 'year': row[10], + 'time': row[11], + 'user': row[12] } recently_watched.append(recent_output) From 317a9f0b8e3154c4cace6f7c104ed077e24c744d Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Wed, 19 Aug 2015 00:51:27 -0700 Subject: [PATCH 06/10] Dynamically adjust user recently watched items Only show one row of recently watched items which adjusts to the window size, similar to recently added items. --- data/interfaces/default/user.html | 42 +++++++++++++++++++++++-------- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html index e9b9f41f..64c1b4fd 100644 --- a/data/interfaces/default/user.html +++ b/data/interfaces/default/user.html @@ -240,6 +240,33 @@ from plexpy import helpers From 5a1516286cef452d373623418540151fea38a32c Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Wed, 19 Aug 2015 01:13:55 -0700 Subject: [PATCH 07/10] Changes to info pages * Style changes * Added missing metadata * Don't show metadata field if data is unavailable --- data/interfaces/default/css/plexpy.css | 69 ++++++++++++++++++--- data/interfaces/default/info.html | 84 ++++++++++++++------------ data/interfaces/default/user.html | 2 +- 3 files changed, 110 insertions(+), 45 deletions(-) diff --git a/data/interfaces/default/css/plexpy.css b/data/interfaces/default/css/plexpy.css index 3537c5bb..af8b9461 100644 --- a/data/interfaces/default/css/plexpy.css +++ b/data/interfaces/default/css/plexpy.css @@ -628,6 +628,7 @@ input[type="color"], margin-right: 27px; position: relative; float: left; + min-height: 340px; } .dashboard-recent-media-metacontainer{ width: 153px; @@ -857,6 +858,25 @@ input[type="color"], } .summary-content-director strong { color: #fff; + margin-left: 2px; +} +.summary-content-studio { + float: left; + margin-right: 10px; + line-height: 24px; +} +.summary-content-studio strong { + color: #fff; + margin-left: 2px; +} +.summary-content-airdate { + float: left; + margin-right: 10px; + line-height: 24px; +} +.summary-content-airdate strong { + color: #fff; + margin-left: 2px; } .summary-content-duration { float: left; @@ -865,6 +885,7 @@ input[type="color"], } .summary-content-duration strong { color: #fff; + margin-left: 2px; } .summary-content-content-rating { float: left; @@ -873,6 +894,7 @@ input[type="color"], } .summary-content-content-rating strong { color: #fff; + margin-left: 2px; } .summary-content-summary { overflow: hidden; @@ -885,6 +907,9 @@ input[type="color"], max-height: 160px; padding-bottom: 0px; } +.summary-content-people-wrapper { + margin-top: 25px; +} .summary-content-people-wrapper hidden-phone hidden-tablet { overflow: hidden; height: auto; @@ -892,13 +917,16 @@ input[type="color"], } .summary-content-actors { margin-top: 0px; - margin-left: 35px; - margin-right: 35px; + margin-left: 0px; + margin-right: 15px; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; } +.summary-content-actors ul { + padding-left:20px; +} .summary-content-actors li { list-style: none; list-style-image: none; @@ -907,15 +935,38 @@ input[type="color"], line-height: 18px; color: #fff; } -.summary-content-writers { - margin-top: 10px; - margin-left: 35px; - margin-right: 35px; +.summary-content-genres { + margin-top: 0px; + margin-left: 0px; + margin-right: 15px; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; } +.summary-content-genres ul { + padding-left:20px; +} +.summary-content-genres li { + list-style: none; + list-style-image: none; + display: block; + font-size: 12px; + line-height: 18px; + color: #fff; +} +.summary-content-writers { + margin-top: 0px; + margin-left: 0px; + margin-right: 15px; + font-size: 12px; + line-height: 18px; + color: #999; + overflow: hidden; +} +.summary-content-writers ul { + padding-left: 20px; +} .summary-content-writers li { list-style: none; list-style-image: none; @@ -1111,6 +1162,10 @@ input[type="color"], margin: 0px 0px 0px 0px; } .user-overview-stats-instance { + float: left; + width: 350px; + height: 80px; + margin-bottom: 25px; } .user-overview-stats-instance-device_icon { float: left; @@ -1172,7 +1227,7 @@ input[type="color"], .user-platforms-instance { float: left; width: 240px; - height: 90px; + height: 80px; margin-bottom: 25px; } .user-platforms-instance li { diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html index b323200d..08455720 100644 --- a/data/interfaces/default/info.html +++ b/data/interfaces/default/info.html @@ -30,6 +30,7 @@ genres Returns an array of genres. actors Returns an array of actors. directors Returns an array of directors. studio Returns the name of the studio. +originally_available_at Returns the air date of the item. DOCUMENTATION :: END @@ -53,8 +54,10 @@ DOCUMENTATION :: END
- % if data['type'] == 'episode':
-
- % elif data['type'] == 'movie' or data['type'] == 'show': -
-
- % elif data['type'] == 'season': -
- % endif
@@ -228,13 +236,14 @@ DOCUMENTATION :: END <%def name="javascriptIncludes()"> + % if data: -% if data['type'] == 'movie': +% if data['type'] == 'movie' or data['type'] == 'show' or data['type'] == 'episode': % endif % endif diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html index 64c1b4fd..e8637750 100644 --- a/data/interfaces/default/user.html +++ b/data/interfaces/default/user.html @@ -343,7 +343,7 @@ from plexpy import helpers sync_table = $('#sync_table').DataTable(sync_table_options); history_table.column(1).visible(false); - var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark' } ); + var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark' } ); $( colvis_sync.button() ).appendTo('#button-bar-sync'); }); From 01b3ae377bb428aac44683ef0445499b459e41da Mon Sep 17 00:00:00 2001 From: JonnyWong16 Date: Wed, 19 Aug 2015 13:25:29 -0700 Subject: [PATCH 08/10] Add clear search button to data tables. --- data/interfaces/default/history.html | 2 ++ .../default/history_table_modal.html | 2 ++ data/interfaces/default/info.html | 6 +++++- data/interfaces/default/js/script.js | 9 +++++++++ data/interfaces/default/logs.html | 5 ++++- data/interfaces/default/sync.html | 3 ++- data/interfaces/default/user.html | 8 +++++++- data/interfaces/default/users.html | 19 ++++++++++++------- 8 files changed, 43 insertions(+), 11 deletions(-) diff --git a/data/interfaces/default/history.html b/data/interfaces/default/history.html index a7a0dfcf..bb796574 100644 --- a/data/interfaces/default/history.html +++ b/data/interfaces/default/history.html @@ -66,6 +66,8 @@ var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); $(colvis.button()).appendTo('div.colvis-button-bar'); + clearSearchButton('history_table', history_table); + $('#row-edit-mode').click(function() { if ($(this).hasClass('active')) { $('.delete-control').each(function() { diff --git a/data/interfaces/default/history_table_modal.html b/data/interfaces/default/history_table_modal.html index f0599592..cfff340d 100644 --- a/data/interfaces/default/history_table_modal.html +++ b/data/interfaces/default/history_table_modal.html @@ -43,6 +43,8 @@ } history_table = $('#history_table').DataTable(history_table_modal_options); + + clearSearchButton('history_table', history_table); }); % else: diff --git a/data/interfaces/default/info.html b/data/interfaces/default/info.html index 08455720..a1c313b2 100644 --- a/data/interfaces/default/info.html +++ b/data/interfaces/default/info.html @@ -267,6 +267,8 @@ DOCUMENTATION :: END var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); $(colvis.button()).appendTo('div.colvis-button-bar'); + + clearSearchButton('history_table', history_table); }); % elif data['type'] == 'show': @@ -285,6 +287,8 @@ DOCUMENTATION :: END history_table = $('#history_table').DataTable(history_table_options); var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); $(colvis.button()).appendTo('div.colvis-button-bar'); + + clearSearchButton('history_table', history_table); }); % endif @@ -303,7 +307,7 @@ DOCUMENTATION :: END % endif % endif diff --git a/data/interfaces/default/js/script.js b/data/interfaces/default/js/script.js index d4e2dbf8..0a4df6ff 100644 --- a/data/interfaces/default/js/script.js +++ b/data/interfaces/default/js/script.js @@ -348,3 +348,12 @@ Accordion.prototype.dropdown = function(e) { $el.find('.submenu').not($next).slideUp().parent().removeClass('open'); }; } + +function clearSearchButton(tableName, table) { + $('#' + tableName + '_filter').find('input[type=search]') + .wrap('
') + .after('') + $('#clear-search-' + tableName).click(function() { + table.search('').draw(); + }); +} diff --git a/data/interfaces/default/logs.html b/data/interfaces/default/logs.html index 51301fc2..bb992c17 100644 --- a/data/interfaces/default/logs.html +++ b/data/interfaces/default/logs.html @@ -86,8 +86,9 @@ from plexpy import helpers $(document).ready(function() { LoadPlexPyLogs(); + clearSearchButton('log_table', log_table); }); - + function LoadPlexPyLogs() { log_table_options.ajax = { "url": "getLog" @@ -105,11 +106,13 @@ from plexpy import helpers $("#plexpy-logs-btn").click(function() { $("#clear-logs").show(); LoadPlexPyLogs(); + clearSearchButton('log_table', log_table); }); $("#plex-logs-btn").click(function() { $("#clear-logs").hide(); LoadPlexLogs(); + clearSearchButton('plex_log_table', plex_log_table); }); $("#clear-logs").click(function() { diff --git a/data/interfaces/default/sync.html b/data/interfaces/default/sync.html index b856051c..7378ad77 100644 --- a/data/interfaces/default/sync.html +++ b/data/interfaces/default/sync.html @@ -57,9 +57,10 @@ "url": "get_sync" } sync_table = $('#sync_table').DataTable(sync_table_options); - var colvis = new $.fn.dataTable.ColVis( sync_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark' } ); $( colvis.button() ).appendTo('div.colvis-button-bar'); + + clearSearchButton('sync_table', sync_table); }); diff --git a/data/interfaces/default/user.html b/data/interfaces/default/user.html index e8637750..366d46dc 100644 --- a/data/interfaces/default/user.html +++ b/data/interfaces/default/user.html @@ -314,6 +314,8 @@ from plexpy import helpers var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark', exclude: [0, 10] }); $(colvis.button()).appendTo('#button-bar-history'); + + clearSearchButton('history_table', history_table); }); $( "#ip-tab-btn" ).one( "click", function() { @@ -329,6 +331,8 @@ from plexpy import helpers } } user_ip_table = $('#user_ip_table').DataTable(user_ip_table_options); + + clearSearchButton('user_ip_table', user_ip_table); }); $( "#sync-tab-btn" ).one( "click", function() { @@ -341,10 +345,12 @@ from plexpy import helpers } } sync_table = $('#sync_table').DataTable(sync_table_options); - history_table.column(1).visible(false); + sync_table.column(1).visible(false); var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: ' Select columns', buttonClass: 'btn btn-dark' } ); $( colvis_sync.button() ).appendTo('#button-bar-sync'); + + clearSearchButton('sync_table', sync_table); }); // Load edit user modal diff --git a/data/interfaces/default/users.html b/data/interfaces/default/users.html index c3a3b01a..ddb52843 100644 --- a/data/interfaces/default/users.html +++ b/data/interfaces/default/users.html @@ -41,15 +41,20 @@