body { font-family: 'Open Sans', Arial, sans-serif; color: #fff; margin-top: 50px; overflow: hidden; } a { color: #eee; } a:hover, a:focus { color: #e9a049; text-decoration: none; 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; } 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; } select[multiple] { height: 125px; margin: 5px 0 5px 0; color: #fff; border: 0px solid #444; background: #555; padding: 2px 2px; background-color: #555; border-radius: 3px; transition: background-color .3s; } select[multiple]:focus { outline: 0; outline: thin dotted \9; color: #555; background-color: #fff; transition: background-color .3s; } select[multiple]:focus::-webkit-scrollbar-thumb { background-color: rgba(0,0,0,.15); } select[multiple] option { padding: 6px 10px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } img { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .navbar { background: #000; -webkit-box-shadow: 0 0 0 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 0 3px rgba(0,0,0,.2); box-shadow: 0 0 0 3px rgba(0,0,0,.2); } .navbar-brand { padding: 5px 5px; } .nav > li > a { color: #999; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #282828; color: #eee; } .nav > li.active > a, .nav > li.active > a:hover, .nav > li.active > a:focus { color: #f9be03; background-color: #282828; } .navbar-toggle { background-color: #282828; } .navbar-toggle:hover, .navbar-toggle:focus { background-color: #2f2f2f; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #2f2f2f; border-color: none; } .dropdown-menu { background-color: #282828; } .dropdown-menu .divider { background-color: #777; } .dropdown-menu > li > a { color: #999; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: #fff; background-color: #2f2f2f; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:hover, .dropdown-menu > .active > a:focus { color: #fff; background-color: #2f2f2f; } .dropdown-menu > .disabled > a, .dropdown-menu > .disabled > a:hover, .dropdown-menu > .disabled > a:focus { color: #999; } .icon-bar { background-color: #999; } .padded-header { margin: 25px 0 25px 0; } .padded-header h1,h2,h3,h4,h5,h6 { color: #eee; } .padded-header h3 { font-size: 16px; font-weight: bold; text-transform: uppercase; } .padded-header h3 small { font-size: 13px; text-transform: none; } .btn { outline:0px !important; } .btn:not(select) { -webkit-appearance:none; } .btn-dark { color: #d7d7d7; background-color: #3B3B3B; border-color: transparent; } .btn-dark:focus, .btn-dark.focus { color: #d7d7d7; background-color: #3B3B3B; } .btn-dark:hover { color: #fff; background-color: #333; border-color: #444; } .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark { color: #fff; background-color: #333; border-color: #444; } .btn-dark:active:hover, .btn-dark.active:hover, .open > .dropdown-toggle.btn-dark:hover, .btn-dark:active:focus, .btn-dark.active:focus, .open > .dropdown-toggle.btn-dark:focus, .btn-dark:active.focus, .btn-dark.active.focus, .open > .dropdown-toggle.btn-dark.focus { color: #fff; background-color: #333; } .btn-dark:active, .btn-dark.active, .open > .dropdown-toggle.btn-dark { background-image: none; } .btn-dark.disabled, .btn-dark[disabled], fieldset[disabled] .btn-dark, .btn-dark.disabled:hover, .btn-dark[disabled]:hover, fieldset[disabled] .btn-dark:hover, .btn-dark.disabled:focus, .btn-dark[disabled]:focus, fieldset[disabled] .btn-dark:focus, .btn-dark.disabled.focus, .btn-dark[disabled].focus, fieldset[disabled] .btn-dark.focus, .btn-dark.disabled:active, .btn-dark[disabled]:active, fieldset[disabled] .btn-dark:active, .btn-dark.disabled.active, .btn-dark[disabled].active, fieldset[disabled] .btn-dark.active { background-color: #333; color: #aaa; } .btn-dark .badge { color: #e5e5e5; background-color: #3B3B3B; } .btn-bright { color: #fff; background-color: #cc7b19; box-shadow: inset 0 1px 0 #e7993b; } .btn-bright:focus, .btn-bright.focus { color: #fff; background-color: #eb8600; } .btn-bright:hover { color: #fff; background-color: #e59029; box-shadow: inset 0 1px 0 #ebac60; } .btn-bright:active, .btn-bright.active, .open > .dropdown-toggle.btn-bright { color: #fff; background-color: #cc7b19; box-shadow: inset 0 1px 0 #e7993b; } .btn-bright:active:hover, .btn-bright.active:hover, .open > .dropdown-toggle.btn-bright:hover, .btn-bright:active:focus, .btn-bright.active:focus, .open > .dropdown-toggle.btn-bright:focus, .btn-bright:active.focus, .btn-bright.active.focus, .open > .dropdown-toggle.btn-bright.focus { color: #fff; background-color: #cc7b19; box-shadow: inset 0 1px 0 #e7993b; } .btn-bright:active, .btn-bright.active, .open > .dropdown-toggle.btn-bright { background-image: none; } .btn-bright.disabled, .btn-bright[disabled], fieldset[disabled] .btn-bright, .btn-bright.disabled:hover, .btn-bright[disabled]:hover, fieldset[disabled] .btn-bright:hover, .btn-bright.disabled:focus, .btn-bright[disabled]:focus, fieldset[disabled] .btn-bright:focus, .btn-bright.disabled.focus, .btn-bright[disabled].focus, fieldset[disabled] .btn-bright.focus, .btn-bright.disabled:active, .btn-bright[disabled]:active, fieldset[disabled] .btn-bright:active, .btn-bright.disabled.active, .btn-bright[disabled].active, fieldset[disabled] .btn-bright.active { background-color: #cc7b19; border-color: #b56d16; } .btn-bright .badge { color: #fff; background-color: #cc7b19; box-shadow: inset 0 1px 0 #e7993b; } .btn-danger.btn-edit { color: #d7d7d7; background-color: #3B3B3B; border-color: transparent; float: right; } .btn-danger.btn-edit:hover { color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-danger.btn-edit.active { color: #fff; background-color: #c9302c; border-color: #ac2925; } .btn-danger.btn-edit.active:hover { color: #fff; background-color: #ac2925; border-color: #761c19; } .btn-group select { margin-top: 0; } #user-selection label { margin-bottom: 0; } .alert-edit { display: none; float: left; margin-bottom: 0; /*margin-right: 5px;*/ padding: 6px 15px; } .modal-header { 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; } .modal-body table { color: #fff; } .modal-body li { margin-top: 7px; margin-left: 4px; color: #aaa; } .modal-body li strong { color: #eee; } .modal-body i { color: #F9AA03; } .modal-body i.fa { color: #fff; } .modal-body td:hover a .fa, .modal-body a:focus i.fa { color: #f9aa03; } .modal-body strong { color: #F9AA03; } .modal-footer { padding: 15px 20px; margin-top: 0; background-color: #323232; border-radius: 0 0 3px 3px; border-top: 1px solid #1C1C1C; } textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], 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; } textarea.form-control { height: initial; margin: 5px 0 5px 0; color: #fff; border: 0px solid #444; background: #555; padding: 6px 12px; background-color: #555; border-radius: 3px; transition: background-color .3s; resize: none; } textarea.form-control:focus { outline: 0; color: #555; background-color: #fff; transition: background-color .3s; } .pagination > li > a, .pagination > li > span { position: relative; float: left; padding: 6px 12px; margin-left: -1px; line-height: 1.42857143; color: #fff; text-decoration: none; background-color: #262626; border: 1px solid #444444; } .pagination > li > a:hover, .pagination > li > span:hover, .pagination > li > a:focus, .pagination > li > span:focus { background-color: #cc7b19; border: 1px solid #444444; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus { z-index: 2; color: #fff; cursor: default; background-color: #cc7b19; border-color: #444444; } .pagination > .disabled > span, .pagination > .disabled > span:hover, .pagination > .disabled > span:focus, .pagination > .disabled > a, .pagination > .disabled > a:hover, .pagination > .disabled > a:focus { color: #444444; cursor: not-allowed; background-color: #262626; border-color: #444444; } .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #cc7b19; } .nav-pills > li > a { border-radius: 3px; padding: 5px 10px; margin: 0 0 20px 0; } .btn-form { padding: 4px 12px; margin: 5px 0 5px 0; font-size: 14px; font-weight: normal; height: 32px; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; background-color: #3B3B3B; color: #e5e5e5; border: 1px solid transparent; border-radius: 3px; outline:0px !important; -webkit-appearance:none; } .btn-form:hover { color: #fff; background-color: #333; } .btn-form:focus { color: #fff; } .form-control-feedback { position: absolute; color: #F9AA03; top: 0; right: 0; margin: 5px 10px 5px 0; z-index: 2; display: block; width: 32px; height: 32px; line-height: 32px; text-align: center; pointer-events: none; } .poster { position: relative; height: 225px; } .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); -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); overflow: hidden; } .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); -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 { overflow: hidden; float: left; background-size: cover; background-position: center; height: 40px; width: 40px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); } .libraries-poster-face { overflow: hidden; float: left; background-size: cover; background-position: center; height: 40px; width: 40px; /*-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);*/ } a .poster-face:hover, a .cover-face:hover, a .users-poster-face:hover { 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; } .users-name { position: relative; } .platform { padding-bottom: 0px; margin-bottom: 0px; margin-left: 5px; float: left; } #dashboard-checking-activity, #dashboard-no-activity { margin-bottom: 20px; } .dashboard-instance { float: left; position: relative; height: 260px; width: 350px; margin-right: 20px; margin-bottom: 20px; } .dashboard-instance.hover .dashboard-activity-poster { -webkit-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049; -moz-box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049; box-shadow: 0 0 4px rgba(0,0,0,.3),inset 0 0 0 2px #e9a049; } .dashboard-instance.hover .dashboard-activity-poster-info-bar { opacity: 1; } .dashboard-instance.hover .dashboard-activity-progress-bar { height: 14px; transform-origin: top; transition: all .2s ease; border-radius: 0px 0px 3px 3px; } .dashboard-instance.hover .bar { height: 14px; transform-origin: top; transition: all .2s ease; border-radius: 0px 0px 3px 3px; color: rgba(255, 255, 255, 1); background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px); background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px); background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px); } .dashboard-instance.hover .bufferbar { height: 14px; transform-origin: top; transition: all .2s ease; border-radius: 0px 0px 3px 3px; color: rgba(255, 255, 255, 1); background-image: -webkit-linear-gradient(left,rgba(0,0,0,0.25),0%,rgba(0,0,0,0),50px); background-image: -moz-linear-gradient(left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px); background-image: linear-gradient(to left,rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 50px); } .dashboard-instance.hover .dashboard-activity-metadata-wrapper { margin-top: 11px; transform-origin: top; transition: all .2s ease; } .dashboard-activity-poster { height: 200px; width: 100%; position: relative; overflow: hidden; } .dashboard-activity-poster-face { background-position: center; background-size: cover; height: 100%; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 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); z-index: -3; } .dashboard-activity-cover-face-bg { background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 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); -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: 0.75; z-index: -3; } .dashboard-activity-cover-face { background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; width: 200px; -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); position: absolute; top: 0; left: calc(50% - 100px); z-index: -3; } .dashboard-activity-clip-face-bg { background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; width: 100%; position: absolute; top: 0; right: 0; bottom: 0; left: 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); -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity: 0.75; z-index: -3; } .dashboard-activity-clip-face { background-position: center; background-size: cover; background-repeat: no-repeat; height: 100%; width: 130px; 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); position: absolute; top: 0; left: calc(50% - 65px); z-index: -3; } .dashboard-activity-info-details-overlay { text-align: left; background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(0,0,0,.75)),to(rgba(0,0,0,0))); background-image: -webkit-linear-gradient(top,rgba(0,0,0,.75),0,rgba(0,0,0,0),100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 100%); background-image: linear-gradient(to bottom,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 100%); background-repeat: repeat-x; position: absolute; top: 0; width: 100%; height: 100%; display: none; z-index: -1; } .dashboard-activity-button-info { width: 50px; height: 50px; position: absolute; top: 10px; right: 10px; z-index: 1; } .btn-activity-info, .btn-activity-info:focus { color: #999; background-color: rgba(0,0,0,0.5); } .btn-activity-info:hover { color: #fff; } .dashboard-activity-info-details-content { height: 200px; width: 100%; line-height: 25px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #aaa; padding: 10px; } .dashboard-activity-info-details-content strong { color: #fff; font-weight: normal; } .dashboard-activity-info-platform { width: 100%; height: 50px; margin-bottom: 10px; } .dashboard-activity-info-platform-box { float: left; background-position: center; background-size: cover; width: 50px; height: 50px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin-right: 10px; } .dashboard-activity-poster-info-bar { position:absolute; width: 100%; height: 100%; background-image: -webkit-gradient(linear,left 30%,left 100%,from(rgba(0,0,0,0)),to(rgba(0,0,0,0.75))); background-image: -webkit-linear-gradient(top,rgba(0,0,0,0),30%,rgba(0,0,0,0.75),100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%); background-image: linear-gradient(to bottom,rgba(0,0,0,0) 30%,rgba(0,0,0,0.75) 100%); opacity: 0; -webkit-transition: all .2s; transition: all .2s; z-index: -2; } .dashboard-activity-poster-info-text { position: absolute; bottom: 0; left: 0; float: left; text-align: left; padding: 5px 8px; font-size: 12px; color: #eee; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 150px; } .dashboard-activity-poster-info-ip-address { position: absolute; bottom: 5px; left: 10px; text-align: left; font-size: 12px; color: #eee; } .dashboard-activity-poster-info-time { position: absolute; bottom: 5px; right: 10px; text-align: right; font-size: 12px; color: #eee; } .dashboard-activity-progress { width: 100%; height: 5px; margin-bottom: 5px; } .dashboard-activity-progress-bar { overflow: hidden; height: 5px; background-color: #111; width: 100%; z-index: -1; -webkit-transition: all 0s; transition: all 0s; } .dashboard-activity-progress .bufferbar { padding-right: 3px; font-size: x-small; text-align: right; color: rgba(255, 255, 255, 0); background-color: #444; position: absolute; height: 6px; overflow: hidden; } .dashboard-activity-progress .bar { padding-right: 3px; font-size: x-small; text-align: right; color: rgba(255, 255, 255, 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); position: absolute; height: 6px; overflow: hidden; } .dashboard-activity-metadata-wrapper { position: relative; width: 100%; height: 50px; font-size: 13px; padding: 0 3px; } .dashboard-activity-metadata-title { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: bold; line-height: 25px; color: #fff; max-width: 300px; } .dashboard-activity-metadata-subtitle { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: bold; line-height: 25px; color: #999; max-width: 172px; float: left; } .dashboard-activity-metadata-user { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; font-size: 13px; font-weight: bold; line-height: 25px; color: #999; text-align: right; max-width: 122px; float: right; } .dashboard-activity-metadata-user-thumb { background-color: #282828; background-position: center; background-size: cover; margin-top: 5px; margin-left: 10px; height: 40px; width: 40px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); overflow: hidden; float: right; } a .dashboard-activity-metadata-user-thumb:hover { -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-activity-metadata-user a { color: #999; } .dashboard-activity-metadata-user a:hover { color: #e9a049; } .dashboard-activity-metadata-title a:hover { color: #e9a049; } .dashboard-activity-metadata-progress-wrapper { margin-bottom: 20px; font-size: 12px; font-weight: bold; color: #e9a049; } .dashboard-recent-media-row { width: 100%; margin: 0 auto; text-align: center; position: relative; z-index: 0; overflow: hidden; } .dashboard-recent-media { width: 100%; margin: auto; list-style: none; } .dashboard-recent-media li { float: left; position: relative; left: 0px; margin-right: 25px; margin-bottom: 25px; } .dashboard-recent-media-poster { position: relative; float: left; } .dashboard-recent-media-cover { position: relative; margin-top: 75px; float: left; } a:hover .dashboard-recent-media-poster, a:hover .dashboard-recent-media-cover { 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-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); -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); z-index: -2; } .dashboard-recent-media-cover-face { background-position: center; background-size: cover; height: 150px; 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); z-index: -2; } .dashboard-recent-media-overlay { position: absolute; left: 0; right: 0; bottom: 0; text-align: left; 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%); height: 100%; z-index: -1; } .dashboard-recent-media-overlay-text { color: #aaa; font-size: 12px; font-weight: bold; float: left; position: absolute; left: 8px; bottom: 5px; } .dashboard-recent-media-metacontainer { width: 150px; font-size: 13px; clear: both; } .dashboard-recent-media-metacontainer h3 { padding: 5px 3px 0 3px; color: #fff; text-overflow: ellipsis; overflow: hidden; position: relative; font-size: 13px; font-weight: bold; margin: 0; line-height: 16px; width: 150px; white-space: nowrap; text-align: left; clear: both; } .dashboard-recent-media-metacontainer h3.text-muted { color: #777; } .dashboard-recent-media-metacontainer h3.text-muted a { color: #777; } .dashboard-recent-media-metacontainer h3.text-muted a:hover { color: #e9a049; } .art-face { background-repeat: no-repeat; background-position: center center; background-attachment: scroll; background-size: cover; opacity: 0; position: fixed; top: 0; bottom: 0; width: 100%; } .art-music-face { background-repeat: no-repeat; background-position: center; background-size: cover; width: 250px; position: relative; top: 0; bottom: 0; } .summary-container { position: absolute; top: 0; right: 0; bottom: 0; left: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; } .summary-container .table-card-header, .summary-container .table-card-back { background: rgba(40,40,40, 0.9); } .summary-navbar { background-color: rgba(255,255,255,.03); height: 50px; line-height: 50px; max-height: 50px; overflow: hidden; } .summary-navbar-list { padding: 0 25px; color: #999; white-space: nowrap; overflow: hidden; } .summary-navbar-list .breadcrumb { padding: 0; margin: 0; background: none; } .summary-navbar-list .breadcrumb > li + li:before { color: #444; font-family: FontAwesome; content: "\f054"; padding: 0 15px; } .summary-navbar-list .breadcrumb > .active { color: #eee; } .summary-navbar-list .breadcrumb a { color: #999; } .summary-navbar-list .breadcrumb a:hover { color: #f9be03; } .summary-content-title-wrapper { height: 150px; padding-top: 50px; } .summary-content-title { overflow: hidden; position: relative; max-height: 100px; } .summary-content-title h1 { margin-top: 0; margin-bottom: 10px; color: #f9be03; font-size: 28px; line-height: 40px; float: left; clear: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; } .summary-content-title h1 a { color: #f9be03; } .summary-content-title h1 a:hover { color: #fff; } .summary-content-title h2 { margin-top: 0; margin-bottom: 10px; color: #fff; font-size: 28px; line-height: 40px; float: left; clear: left; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; width: 100%; } .summary-content-title h3 { margin-top: 0; margin-bottom: 10px; color: #999; font-size: 28px; line-height: 40px; position: absolute; bottom: 0; right: 0; } .summary-content-title h3 a:hover { text-decoration: underline; } .summary-content-title h3 a { color: #999; } .summary-content-wrapper { background: rgba(0,0,0,.4); background: -webkit-linear-gradient(top, rgba(0,0,0,.4), rgba(10,10,10,.4)); background: -o-linear-gradient(bottom, rgba(0,0,0,.4), rgba(10,10,10,.4)); background: -moz-linear-gradient(bottom, rgba(0,0,0,.4), rgba(10,10,10,.4)); background: linear-gradient(to bottom, rgba(0,0,0,.4), rgba(10,10,10,.4)); background-clip: content-box; min-height: calc(100% - 200px); position: inherit; width: 100%; } .summary-content-poster { float: left; width: 250px; margin: 0 40px 0 25px; height: 100px; overflow: visible; } .summary-poster-face { background-position: center; background-size: cover; height: 375px; width: 250px; 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); overflow: hidden; z-index: 1; } .summary-poster-face-episode { background-position: center; background-size: cover; height: 140px; width: 250px; 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); overflow: hidden; z-index: 1; } .summary-poster-face-track { background-position: center; background-size: cover; height: 250px; width: 250px; 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); overflow: hidden; z-index: 1; } .summary-poster-face-overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; background-image: -webkit-gradient(linear,left 0,left 100%,from(rgba(0,0,0,.7)),to(rgba(0,0,0,.9))); background-image: -webkit-linear-gradient(top,rgba(0,0,0,.7),0,rgba(0,0,0,.9),100%); background-image: -moz-linear-gradient(top,rgba(0,0,0,.7) 0,rgba(0,0,0,.9) 100%); background-image: linear-gradient(to bottom,rgba(0,0,0,.7) 0,rgba(0,0,0,.9) 100%); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#b3000000', endColorstr='#e6000000', GradientType=0); 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; opacity: 0; transition: opacity .2s; } .summary-poster-face-overlay span { display: block; width: 100%; height: 100%; background-image: url(../images/plex-logo-light-small.png); background-size: 100px; background-repeat: no-repeat; background-position: center; opacity: 0; transition: opacity .3s; } a:hover .summary-poster-face .summary-poster-face-overlay, a:hover .summary-poster-face-episode .summary-poster-face-overlay, a:hover .summary-poster-face-track .summary-poster-face-overlay, a:hover .summary-poster-face .summary-poster-face-overlay span, a:hover .summary-poster-face-episode .summary-poster-face-overlay span, a:hover .summary-poster-face-track .summary-poster-face-overlay span { opacity: 1; } .summary-content-padding { float: left; width: 250px; height: 1px; margin: 0 40px 20px 25px; position: relative; } .summary-content { position: relative; color: #999; overflow: hidden; padding-right: 10px; margin-bottom: 20px; } .summary-content-details-wrapper { width: 100%; padding: 10px 0 15px 0; position: relative; float: left; } .summary-content-details-tag { float: left; line-height: 24px; } .summary-content-details-tag strong { color: #fff; margin-left: 2px; margin-right: 10px; } .summary-content-media-info-wrapper { width: 100%; position: absolute; bottom: 0; left: 0; text-align: center; } .summary-content-media-flag { width: auto; height: auto; max-width: 75pt; max-height: 15px; margin: 0 5px; } .summary-content-summary { overflow: hidden; color: #fff; float: left; position: relative; clear: both; height: auto; max-height: 160px; padding-bottom: 0px; } .summary-content-people-wrapper { margin-right: 20px; float: left; } .summary-content-people-wrapper hidden-phone hidden-tablet { overflow: hidden; height: auto; min-height: 0px; } .summary-content-actors { margin-top: 13px; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; } .summary-content-actors ul { padding-left:20px; margin-bottom: 0; } .summary-content-actors li { list-style: none; list-style-image: none; display: block; font-size: 12px; line-height: 18px; color: #fff; } .summary-content-genres { margin-top: 13px; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; } .summary-content-genres ul { padding-left:20px; margin-bottom: 0; } .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: 13px; font-size: 12px; line-height: 18px; color: #999; overflow: hidden; } .summary-content-writers ul { padding-left: 20px; margin-bottom: 0; } .summary-content-writers li { list-style: none; list-style-image: none; display: block; font-size: 12px; line-height: 18px; color: #fff; } .star-rating { display: inline-block; font-size: 15px; overflow: hidden; white-space: nowrap; margin-top: 3px; height: 21px; float: right; } .star-rating .star-icon { width: auto; margin-left: 2px; color: #f9be03; } .star-rating .star-icon-o { width: auto; margin-left: 2px; color: #999; } #children-list, #search-results-list { position: relative; z-index: 0; } .item-children-wrapper { } .item-children-section-title { position: relative; padding: 10px; background-color: #2c2c2c; border-bottom: 1px solid #3d3d3d; border-top: 1px solid #282828; height: 50px; line-height: 22px; padding: 13px 20px; margin: 20px 0; } .item-children-section-title h4 { position: relative; margin: 0; line-height: 22px; color: #fff; font-size: 16px; text-align: center; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-children-instance { list-style: none; margin: 0; overflow: hidden; } .item-children-instance li { float: left; position: relative; left: 0px; margin-right: 25px; margin-bottom: 25px; } .item-children-instance li.item-children-list-item { width: 100%; height: 35px; margin-right: 0; margin-bottom: 0; } .item-children-poster { float: left; position: relative; left: 0px; } a:hover .item-children-poster { 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; } .item-children-poster-face { background-position: center; background-size: cover; 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); z-index: -2; } .item-children-poster-face.season-poster { width: 150px; height: 225px; } .item-children-poster-face.episode-poster { width: 250px; height: 140px; } .item-children-poster-face.album-poster { width: 150px; height: 150px; } .item-children-card-overlay { position: absolute; left: 0; right: 0; bottom: 0; text-align: left; 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%); height: 100%; z-index: -1; } .item-children-overlay-text { color: #aaa; font-size: 12px; font-weight: bold; float: left; position: absolute; left: 8px; bottom: 5px; } .item-children-instance-text-wrapper { font-size: 13px; margin-bottom: 20px; clear: both; } .item-children-instance-text-wrapper.season-item { width: 150px; } .item-children-instance-text-wrapper.episode-item { width: 250px; } .item-children-instance-text-wrapper.album-item { width: 150px; } .item-children-instance-text-wrapper h3 { width: 100%; padding: 5px 3px 0 3px; color: #fff; text-overflow: ellipsis; overflow: hidden; position: relative; font-size: 13px; font-weight: bold; margin: 0; line-height: 16px; white-space: nowrap; text-align: left; clear: both; } .item-children-instance-text-wrapper h3.text-muted { color: #777; } .item-children-instance-text-wrapper h3.text-muted a { color: #777; } .item-children-instance-text-wrapper h3.text-muted a:hover { color: #e9a049; } .item-children-list-item-odd { border-top: 0px solid #343434; border-bottom: 0px solid #343434; background-color: rgba(255,255,255,0.010); height: 100%; font-size: 13px; padding-top: 10px; } .item-children-list-item-even { border-top: 0px solid #343434; border-bottom: 0px solid #343434; background-color: rgba(255,255,255,0.035); height: 100%; font-size: 13px; padding-top: 10px; } .item-children-list-item-odd:hover, .item-children-list-item-even:hover { background-color: rgba(255,255,255,0.075); } .item-children-list-item-index { float: left; color: #777; text-align: right; display: inline-block; width: 35px; margin-right: 10px; } .item-children-list-item-title { display: inline-block; width: calc(100% - 110px); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .item-children-list-item-duration { float: right; color: #777; text-align: right; display: inline-block; width: 40px; margin-right: 20px; } #new_title h3 { color: #f9be03; font-size: 14px; line-height: 1.42857143; font-weight: bold; margin: 0; } .settings-alert { float: left; padding: 0; margin: 5px 0; border: 0; position: relative; } .settings-alert ul { padding: 0; } .settings-alert ul li { list-style: none; padding: 5px 12px 5px 35px; margin: 0; border: 1px solid #ebccd1; border-radius: 4px; } .settings-alert ul li:before { content: "\f071"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; font-size: 18px; position: absolute; top: 5px; left: 12px; } .user-info-wrapper { } .user-info-poster-face { float: left; margin: 15px 15px 15px 0; background-size: cover; background-position: center; height: 80px; width: 80px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); } .user-info-username { font-size: 24px; color: #fff; padding-top: 27px; padding-left: 110px; } .user-info-nav { margin-top: 15px; } .user-info-nav > .active > a { color: #cc7b19; } .nav-tabs > .active > a:hover, .nav-tabs > .active > a:focus { color: #e9a049; } .user-info-nav a:hover { color: #e9a049; text-decoration: none; } .user-info-nav ul { list-style: none; padding: 0; } .user-info-nav li { 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; } .user-overview-stats-instance { float: left; width: 400px; height: 80px; margin-bottom: 25px; } .user-overview-stats-instance-device_icon { float: left; padding-right: 15px; } .user-overview-stats-instance-device_icon img{ } .user-overview-stats-instance li { float: left; list-style: none; width: 100%; height: 90px; } .user-overview-stats-instance-text { position: relative; top: 0px; left: 0px; } .user-overview-stats-instance p { color: #aaa; font-size: 12px; float: left; position: relative; top: 15px; left: 0px; } .user-overview-stats-instance h3 strong{ color: #fff; } .user-overview-stats-instance h3 { font-size: 30px; font-weight: bold; color: #f9be03; line-height: 22px; position: relative; top: 5px; margin: 0 5px 0 10px; float: left; } .user-overview-stats-instance h4 { 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; } .user-player ul { list-style: none; margin: 0; } .user-player-instance { float: left; width: 240px; height: 80px; margin-bottom: 25px; } .user-player-instance li { } .user-player-instance-box { float: left; border-radius: 3px; -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); background-size: contain; position: relative; height: 80px; width: 80px; } .user-player-instance-name { float: left; padding-top: 14px; color: #fff; text-overflow: ellipsis; overflow: hidden; position: relative; font-size: 14px; line-height: 16px; font-weight: normal; width: 140px; margin-left: 10px; margin-bottom: 10px; } .user-player-instance-playcount h3 { font-size: 30px; font-weight: bold; color: #f9be03; line-height: 22px; position: relative; top: 5px; margin: 0 5px 0 10px; float: left; } .user-player-instance-playcount p { color: #aaa; font-size: 12px; float: left; position: relative; top: 15px; left: 0px; } .library-info-poster-face { float: left; margin: 15px 15px 15px 0; background-size: cover; background-position: center; height: 80px; width: 80px; /*-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);*/ } .library-user-instance-box { float: left; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); background-size: contain; position: relative; height: 80px; width: 80px; } a .library-user-instance-box:hover { -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; } .home-platforms { } .home-platforms ul { list-style: none; margin: 0; } .home-platforms-instance { background-color: #282828; position: relative; float: left; width: 330px; padding: 10px; margin-right: 20px; margin-bottom: 20px; -webkit-box-sizing: content-box; box-sizing: content-box; -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); white-space: nowrap; } .home-platforms-instance li { position: relative; } .home-platforms-instance-info { float: left; position: relative; padding-left: 80px; width: 100%; height: 120px; overflow: hidden; } .home-platforms-instance-name { color: #fff; text-overflow: ellipsis; overflow: hidden; position: relative; font-size: 14px; line-height: 16px; font-weight: bold; width: 100%; padding: 0 0 0 20px; } .home-platforms-instance-name h4 { margin: 10px 0 4px 0; } .home-platforms-instance-playcount { display: inline-block; position: relative; padding: 6px 0 0 20px; max-width: 100%; } .home-platforms-instance-playcount h4 { font-size: 14px; line-height: 16px; margin: 10px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-platforms-instance-playcount h3 { font-size: 30px; font-weight: bold; color: #f9be03; line-height: 22px; position: relative; top: 5px; margin: 0 5px 0 0; float: left; } .home-platforms-instance-playcount p { color: #aaa; font-size: 12px; float: left; position: relative; top: 15px; left: 0px; margin-right: 5px; } .home-platforms-instance-last-user { float: left; position: relative; padding: 6px 0 0 20px; width: 100%; } .home-platforms-instance-last-user h4 { font-size: 14px; line-height: 16px; margin: 10px 0 10px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-platforms-instance-last-user h5 { font-size: 12px; position: relative; margin: 0 0 2px 0; float: left; } .home-platforms-instance-last-user p { color: #aaa; font-size: 12px; float: left; clear: left; position: relative; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-platforms-instance-poster { margin-left: 0px; position: absolute; } .home-platforms-instance-poster .home-platforms-poster-face { background-position: center; background-size: cover; height: 120px; width: 80px; -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); } .home-platforms-instance-poster .home-platforms-library-thumb { background-position: center; background-size: cover; height: 80px; width: 80px; margin-top: 20px; } .home-platforms-instance-box { background-position: center; background-size: cover; margin: 20px 0 0 0px; height: 80px; width: 80px; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -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); overflow: hidden; } .home-platforms-instance-oval { background-position: center; background-size: cover; margin: 20px 0 0 0px; height: 80px; width: 80px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); overflow: hidden; } .home-platforms-instance-list { float: left; position: relative; width: 100%; padding: 0 10px 25px 10px; } .home-platforms-instance-list li { margin-top: 25px; position: relative; height: 60px; } .home-platforms-instance-list-number { background-color: #f9be03; float: left; position: absolute; top: -10px; left: 10px; height: 20px; width: 20px; display: block; text-align: center; padding-top: 1px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); } .home-platforms-instance-list-number h4 { color: #000; font-size: 15px; font-weight: bold; margin: 0; } .home-platforms-instance-list-info { float: left; position: relative; padding-left: 75px; width: 100%; height: 60px; } .home-platforms-instance-list-name { float: left; color: #fff; text-overflow: ellipsis; overflow: hidden; position: relative; font-size: 13px; line-height: 15px; font-weight: bold; width: 100%; padding: 2px 0 0 10px; } .home-platforms-instance-list-name h5 { margin: 5px 0px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-platforms-instance-list-playcount { float: left; position: relative; padding: 4px 0 0 10px; width: 100%; } .home-platforms-instance-list-playcount h3 { font-size: 20px; font-weight: bold; color: #f9be03; line-height: 22px; position: relative; margin: 0 5px 0 0; float: left; } .home-platforms-instance-list-playcount p { color: #aaa; font-size: 12px; float: left; position: relative; top: 5px; left: 0px; margin-right: 5px; } .home-platforms-instance-list-last-user { float: left; position: relative; padding: 0 0 0 10px; width: 100%; } .home-platforms-instance-list-last-user h5 { font-size: 12px; position: relative; margin: 0 0 2px 0; float: left; } .home-platforms-instance-list-last-user p { color: #aaa; font-size: 12px; float: left; clear: left; position: relative; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .home-platforms-instance-list-poster { position: absolute; left: 20px; } .home-platforms-instance-list-poster .home-platforms-list-poster-face { background-position: center; background-size: cover; height: 60px; width: 40px; -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); } .home-platforms-instance-list-box { background-position: center; background-size: cover; margin: 10px 0 0 20px; height: 40px; width: 40px; position: relative; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -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); overflow: hidden; } .home-platforms-instance-list-oval { background-position: center; background-size: cover; margin: 10px 0 0 20px; height: 40px; width: 40px; position: relative; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -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); overflow: hidden; } .home-platforms-instance-list-chevron { position: absolute; top: 105px; right: 0; cursor: pointer; } .home-platforms-instance-list-chevron i { color: #999; font-size: 16px; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .home-platforms-instance-list-chevron i:hover { color: #f9be03; } .home-platforms-instance-list-chevron.active i.fa-chevron-down{ color: #f9be03; -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); transform: rotate(180deg); } a .home-platforms-instance-box:hover, a .home-platforms-instance-oval:hover, a .home-platforms-instance-list-box:hover, a .home-platforms-instance-list-oval:hover, a .home-platforms-poster-face:hover, a .home-platforms-list-poster-face:hover { -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; } .home-platforms-instance .slider { background-color: #2d2d2d; width: calc(100% + 20px); display: none; position: absolute; top: 128px; left: -10px; -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); z-index: 1; clip: rect(1px, 354px, 1000px, -2px); } .history-table-title { text-overflow: ellipsis; overflow: hidden; max-width: 350px; } .graphs-instance { height: 330px; padding: 20px; background-color: #333; margin-bottom: 20px; border-radius: 8px; } .watch-chart { margin-top: 10px; height: 300px; width: 100%; } .graphs-load { color: #999999; text-align: center; line-height: 300px; } .card-back { padding: 16px; background-color: #282828; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 80%; overflow: hidden; } .card-back-full { padding: 20px; background-color: #282828; margin-top: 20px; margin-bottom: 20px; overflow: hidden; } .table-card-back { padding: 16px 16px 16px 16px; background-color: #282828; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: 20px; width: 90%; overflow: hidden; } .table-card-header { padding: 16px 16px 16px 16px; background-color: #2c2c2c; border-bottom: 1px solid #3d3d3d; border-top: 1px solid #282828; margin-left: auto; margin-right: auto; margin-top: 20px; margin-bottom: -20px; width: 90%; overflow: hidden; } .table-card-back td { font-size: 12px; } .header-bar { float: left; } .header-bar span { font-size: 22px; font-weight: bold; line-height: 34px; } .button-bar { float: right; } .colvis-button-bar, .refresh-users-button, .refresh-libraries-button { /*float: right;*/ } .refresh-users-button, .refresh-libraries-button { /*margin-right: 5px;*/ } .nav-settings, .nav-settings ul { 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; } .nav-settings > li > a { border-bottom: 1px solid #232323; 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; } .nav-settings > .active > a, .nav-settings > .active > a:hover, .nav-settings > .active > a:focus { color: #f9be03; background-color: #2f2f2f; } .stacked-configs, .stacked-configs ul { margin: 0px 0px 20px 0px; } .stacked-configs > li { 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; } .stacked-configs > li > span:hover, .stacked-configs > li > span:focus { color: #eee; background-color: #2f2f2f; } .stacked-configs > li > span > a.toggle-right { float: right; color: #999; padding-left: 10px; } .stacked-configs > li > span > a.toggle-left { color: #444; padding-right: 8px; } .stacked-configs > li > span > a:hover { color: #eee; } .stacked-configs > li > span > a.active { color: #f9be03; } .accordion { 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; } .accordion li:last-child .link { border-bottom: 0; } .accordion li i { position: absolute; top: 10px; left: 10px; color: #999; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } .accordion li i.fa-chevron-down { right: 12px; left: auto; font-size: 16px; } .accordion li .link:hover { color: #FFF; background: #2f2f2f; } .accordion li.open .link { color: #f9be03; } .accordion li.open i { color: #f9be03; } .accordion li.open i.fa-chevron-down { -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; } .submenu li { 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; } .submenu a:hover { background: #f9be03; color: #FFF; } .ajaxMsg { background-color: rgba(255,255,255,0.075); color: #999999; display: none; font-size: 14px; right: 10px; padding: 10px 10px; position: fixed; text-align: center; bottom: 10px; min-height: 32px; width: 250px; z-index: 9999; } .ajaxMsg .msg { line-height: normal; padding-left: 20px; } .ajaxMsg .loader { position: relative; top: 2px; } .ajaxMsg .success { text-align: left; } .ajaxMsg .error { background-color: rgba(255,0,0,0.5); font-size: 20px; text-align: left; } .ajaxMsg .ui-icon { display: inline-block; margin-left: -20px; top: 2px; position: relative; margin-right: 3px; } .dataTables_processing { background-color: grey; display: none; font-size: 14px; right: 10px; padding: 10px 10px; position: fixed; text-align: center; bottom: 10px; min-height: 32px; width: 250px; z-index: 9999; } .dataTables_paginate li { margin: 0; } .tooltip.top .tooltip-arrow { border-top-color: #fff; } .tooltip.right .tooltip-arrow { border-right-color: #fff; } .tooltip.bottom .tooltip-arrow { border-bottom-color: #fff; } .tooltip.left .tooltip-arrow { border-left-color: #fff; } .tooltip-inner { color: #000; background: #fff; border: 0; font-weight: bold; border-radius: 2px; } .history-thumbnail-popover { z-index: 2; padding: 0; border: 0; } .history-thumbnail-popover.popover.left { margin-left: -15px; } .history-thumbnail-popover.popover.right { margin-left: 15px; } .history-thumbnail-popover .popover-content { color: #000; padding: 0; } .history-thumbnail { background-position: center; background-size: cover; width: 80px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -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); } .edit-user-toggles, .edit-library-toggles { padding-right: 10px; } .edit-user-toggles > input[type='checkbox'], .edit-library-toggles > input[type='checkbox'] { display: none; } .edit-user-toggles > input[type='checkbox'] + label, .edit-library-toggles > input[type='checkbox'] + label { color: #444; cursor: pointer; } .edit-user-toggles > input[type='checkbox']:checked + label, .edit-library-toggles > input[type='checkbox']:checked + label { color: #fff; cursor: pointer; } .edit-user-name > input[type='text'] { margin: 0; } .noTransition { -moz-transition: none !important; -webkit-transition: none !important; -o-transition: none !important; transition: none !important; } .settings-alert { float: left; padding: 0; margin: 5px 0; border: 0; position: relative; } .settings-alert ul { padding: 0; } .settings-alert ul li { list-style: none; padding: 5px 12px 5px 35px; margin: 0; border: 1px solid #ebccd1; border-radius: 4px; } .settings-alert ul li:before { content: "\f071"; font-family: FontAwesome; font-style: normal; font-weight: normal; text-decoration: inherit; font-size: 18px; position: absolute; top: 5px; left: 12px; } #users-to-delete > li, #users-to-purge > li, #libraries-to-delete > li, #libraries-to-purge > li { color: #e9a049; } #updatebar { background-color: #444; color: #999999; display: none; font-size: 14px; right: 10px; padding: 7px 10px; position: fixed; text-align: center; bottom: 10px; min-height: 22px; width: 250px; z-index: 9999; display: block; } #updatebar .msg { line-height: normal; padding-left: 20px; } #updatebar .loader { position: relative; top: 2px; } #updatebar.success { padding: 15px 10px; text-align: left; } #updatebar.error { padding: 15px 10px; text-align: left; } #updatebar .ui-icon { display: inline-block; margin-left: -20px; top: 2px; position: relative; margin-right: 3px; } #updatebar a:hover { color: #e9a049; } .body-container { position: absolute; top: 50px; right: 0; bottom: 0; left: 0; overflow: auto; -webkit-overflow-scrolling: touch; } ::-webkit-scrollbar { width: 15px; } ::-webkit-scrollbar-track { background-color: rgba(0,0,0,.2); } ::-webkit-scrollbar-thumb { min-height: 50px; background-color: rgba(255,255,255,.15); border: 3px solid transparent; border-radius: 8px; background-clip: padding-box; } @media only screen and (min-device-width: 300px) and (max-device-width: 400px) { .home-platforms-instance { width: calc(100% - 20px); } .dashboard-instance { width: 100%; } } table.display, table.display tr.shown + tr table[id^='history_child'], table.display tr.shown + tr table[id^='media_info_child'], table.display tr.shown + tr table[id^='media_info_child'] tr.shown + tr table[id^='media_info_child'] { table-layout: auto; } table.display tr.shown + tr div.slider { display: none; } table.display tr.shown + tr > td { padding-top: 0; padding-bottom: 0; padding-left: 0; } table.display tr.shown + tr:hover { background-color: rgba(255,255,255,0); } table.display tr.shown + tr:hover a, table.display tr.shown + tr td:hover a, table.display tr.shown + tr .pagination > .active > a, table.display tr.shown + tr .pagination > .active > a:hover { color: #fff; } table.display tr.shown + tr table[id^='history_child'] td:hover a, table.display tr.shown + tr table[id^='media_info_child'] > tr > td:hover a, table.display tr.shown + tr table[id^='media_info_child'] tr.shown + tr table[id^='media_info_child'] td:hover a { color: #cc7b19; } table.display tr.shown + tr .pagination > .disabled > a, table.display tr.shown + tr .pagination > .disabled > a:hover { color: #444444; } table.display tr.shown + tr .pagination > li > a:hover { color: #e9a049; } table.display tr.odd td, table.display tr.even td { padding: 5px 10px !important; } table[id^='history_child'] { margin-top: 0; opacity: .6; } table[id^='media_info_child'] { margin-top: 0; } div[id^='history_child'] thead th, div[id^='media_info_child'] thead th { line-height: 0; height: 0 !important; overflow: hidden; } div[id^='history_child'] div.row, div[id^='media_info_child'] div.row { margin: 0; } div[id^='history_child'] div.col-sm-12, div[id^='media_info_child'] div.col-sm-12 { padding: 0; } div[id^='history_child'] div.dataTables_scrollBody, div[id^='media_info_child'] div.dataTables_scrollBody { overflow: hidden !important; } div[id^='media_info_child'] div[id^='media_info_child'] div.dataTables_scrollHead thead th { line-height: 25px; height: 35px !important; overflow: hidden; } .dataTables_scrollBody { -webkit-overflow-scrolling: touch; } #search_form { width: 300px; padding: 8px 15px; } #search_form span.input-textbox { overflow: hidden; width: 200px; height: 34px; display: inline-flex; float: right; } #search_form #query { width: 0; height: 34px; margin-top: 0; float: right; position: relative; right: -200px; border-radius: 3px 0 0 3px; } #search_form #query.active { width: 200px; right: 0px; } #search_form #search_button.btn-inactive { background-color: #000; border: 1px solid rgba(0,0,0,0); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; -ms-transition: background 0.3s; -o-transition: background 0.3s; transition: background 0.3s; } #update_search_form div.input-group { display: inline-table; vertical-align: middle; max-width: 250px; } #update_search_form #update_query { margin: 5px 0 0 0.5em; } .notification-params { width: 100%; margin-top: 10px; background-color: #282828; } .notification-params th { padding-left: 10px; height: 30px; } .notification-params td { height: 25px; } .notification-params td:first-child { padding-left: 10px; width: 200px; } .notification-params.time-options td:first-child { padding-left: 10px; width: 125px; } .notification-params.time-options td:nth-child(2) { padding-left: 10px; width: 275px; } .notification-params td:not(:first-child) { padding-right: 10px; } .notification-params tr:nth-child(odd) td { background-color: rgba(255,255,255,0.035); } .notification-params tr:nth-child(even) td { background-color: rgba(255,255,255,0.010); } #days-selection label { margin-bottom: 0; } #graph-days { margin: 0; width: 75px; height: 34px; } .card-sortable { height: 36px; padding: 0 20px 0 0; line-height: 34px; cursor: move; cursor: -webkit-grab; cursor: grab; border-bottom: 1px solid #232323; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } .card { position: relative; background-color: #282828; border-top: 1px solid #2d2d2d; } .card label { font-weight: normal; } .card-handle { display: inline-block; width: 30px; margin-right: 10px; color: #444; text-align: center; background-color: #2f2f2f; } .selectize-input input[type='text'] { height: 20px; } .small-muted { font-size: small; color: #777; } .config-info-table, .config-scheduler-table { width: 100% } .config-info-table td, .config-info-table th, .config-scheduler-table td, .config-scheduler-table th { padding-bottom: 5px; } .config-info-table td:first-child { width: 150px; } .config-scheduler-table td:first-child { width: 225px; } .config-scheduler-table th { color: #fff; } a.no-highlight { color: #777; } a.no-highlight:hover { color: #fff; } .top-line { border-top: 1px dotted #777; padding-top: 5px; } .help-bold { font-weight: bold; color: #fff; } .save-button { margin-top: 15px; } .nav-dashboard > li { float: left; } .btn-gray.disabled, .btn-gray.disabled:focus, .btn-gray.disabled:hover, .btn-gray.disabled:active { color: #323232; cursor: default; } .nav-header > li > a:focus, .nav-header > li > a:hover { background-color: transparent; } #recently-added-row-scroller, #recently-watched-row-scroller { position: relative; height: 265px; margin-bottom: 25px; } @media (min-width: 768px) { .login-container { max-width: 750px; } } @media (min-width: 992px) { .login-container { max-width: 970px; } } @media (min-width: 1200px) { .login-container { max-width: 1170px; } } .login-container { margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .login { margin: 0 auto; } .login-logo { margin: 0 auto 50px auto; width: 340px; height: 100px; } .login-container .form-group { margin-bottom: 20px; } .login-container .form-group label { font-weight: 400; color: #999; } .login-container .form-control { height: 38px; line-height: 1.5em; } .login-container .form-footer { margin-top: 40px; } .login-container .login-button { float: right; text-transform: uppercase; text-shadow: 0 -1px 1px rgba(0,0,0,.4),0 0 15px rgba(0,0,0,.2); } .login-container .remember-group { float: left; color: #999; } .login-container .remember-group .control-label { display: inline; margin-bottom: 0; font-weight: 400; cursor: pointer; } #admin-login-modal .form-group label { font-weight: 400; color: #999; } #admin-login-modal .remember-group { float: left; color: #999; } #admin-login-modal .remember-group .control-label { display: inline; margin-bottom: 0; font-weight: 400; cursor: pointer; } .datatable-wrap { min-width: 150px; max-width: 250px; }