mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
fix overlay menus
This commit is contained in:
Luke Pulverenti
parent
a15cc23c27
commit
6dae843884
6 changed files with 244 additions and 246 deletions
|
|
@ -131,6 +131,35 @@ html body .ui-group-theme-a .ui-radio-on:after,
|
|||
border-color: #3388cc /*{a-active-background-color}*/;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button'] {
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button']:first-child {
|
||||
border-bottom-left-radius: .3125em;
|
||||
border-top-left-radius: .3125em;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button']:last-child {
|
||||
border-bottom-right-radius: .3125em;
|
||||
border-top-right-radius: .3125em;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button'] + a[data-role='button'] {
|
||||
border-left-width: 0 !important;
|
||||
margin: 0 0 0 -3px !important;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a.ui-btn-active {
|
||||
background: #38c !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.jqmButtonNoText {
|
||||
padding: 3px 4px !important;
|
||||
border-radius: 4px !important;
|
||||
|
|
@ -420,3 +449,202 @@ a[data-role='button'], .type-interior button:not([data-role='none']):not(.clearB
|
|||
position: relative;
|
||||
top: -3px;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status='Idle'] paper-fab {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status="Cancelling"] paper-fab {
|
||||
background-color: #cc3333;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status="Running"] paper-fab {
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem #progressContainer {
|
||||
height: 8px !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem #primaryProgress {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem paper-progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.activeSession {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.activeSession .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.sessionNowPlayingContent {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sessionNowPlayingInnerContent {
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sessionAppInfo {
|
||||
padding: .5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sessionAppName {
|
||||
vertical-align: top;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.sessionNowPlayingInfo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 11px;
|
||||
padding: .5em;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sessionAppInfo img {
|
||||
max-width: 32px;
|
||||
max-height: 32px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.activeSession .playbackProgress {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
opacity: .95;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.activeDevicesCollapsible .ui-collapsible-content {
|
||||
padding: .25em !important;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingContent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingInfo {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sessionNowPlayingTime {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 39px;
|
||||
}
|
||||
|
||||
.sessionTranscodingFramerate {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sessionNowPlayingStreamInfo {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 19px;
|
||||
}
|
||||
|
||||
.activeSession .transcodingProgress {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
opacity: .9;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.transcodingSession .playbackProgress {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.transcodingProgress::-moz-progress-bar {
|
||||
border-radius: 5px;
|
||||
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.transcodingProgress::-webkit-progress-value {
|
||||
border-radius: 5px;
|
||||
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important;
|
||||
background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.transcodingProgress[aria-valuenow]:before {
|
||||
border-radius: 5px;
|
||||
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) {
|
||||
|
||||
.sessionAppName {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.sessionAppName {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.activeSession {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.disabledUser {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.disabledUserBanner {
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -206,35 +206,6 @@ div[data-role='page'] {
|
|||
outline: none;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button'] {
|
||||
display: inline-block !important;
|
||||
margin: 0 !important;
|
||||
-webkit-box-shadow: none !important;
|
||||
-moz-box-shadow: none !important;
|
||||
box-shadow: none !important;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button']:first-child {
|
||||
border-bottom-left-radius: .3125em;
|
||||
border-top-left-radius: .3125em;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button']:last-child {
|
||||
border-bottom-right-radius: .3125em;
|
||||
border-top-right-radius: .3125em;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a[data-role='button'] + a[data-role='button'] {
|
||||
border-left-width: 0 !important;
|
||||
margin: 0 0 0 -3px !important;
|
||||
}
|
||||
|
||||
div[data-role="controlgroup"] a.ui-btn-active {
|
||||
background: #38c !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/**
|
||||
* Note: I have omitted any vendor-prefixes for clarity.
|
||||
* Adding them is left as an exercise for the reader.
|
||||
|
|
@ -705,166 +676,6 @@ progress {
|
|||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.activeSession {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.activeSession .cardPadder {
|
||||
padding-bottom: 56.25%;
|
||||
}
|
||||
|
||||
|
||||
.sessionNowPlayingContent {
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sessionNowPlayingInnerContent {
|
||||
background-color: rgba(0, 0, 0, .6);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.sessionAppInfo {
|
||||
padding: .5em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.sessionAppName {
|
||||
vertical-align: top;
|
||||
max-width: 200px;
|
||||
}
|
||||
|
||||
.sessionNowPlayingInfo {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 11px;
|
||||
padding: .5em;
|
||||
max-width: 150px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sessionAppInfo img {
|
||||
max-width: 32px;
|
||||
max-height: 32px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.activeSession .playbackProgress {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 7px;
|
||||
width: 100%;
|
||||
opacity: .95;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.activeDevicesCollapsible .ui-collapsible-content {
|
||||
padding: .25em !important;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingContent {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.activeSession:not(.playingSession) .sessionNowPlayingInfo {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.sessionNowPlayingTime {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 39px;
|
||||
}
|
||||
|
||||
.sessionTranscodingFramerate {
|
||||
position: absolute;
|
||||
left: 10px;
|
||||
bottom: 19px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.sessionNowPlayingStreamInfo {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 19px;
|
||||
}
|
||||
|
||||
.activeSession .transcodingProgress {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
opacity: .9;
|
||||
z-index: 999;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.transcodingSession .playbackProgress {
|
||||
bottom: 5px;
|
||||
}
|
||||
|
||||
/* Firefox */
|
||||
.transcodingProgress::-moz-progress-bar {
|
||||
border-radius: 5px;
|
||||
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
/* Chrome */
|
||||
.transcodingProgress::-webkit-progress-value {
|
||||
border-radius: 5px;
|
||||
background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(221, 73, 25)), color-stop(1, rgb(221, 73, 25)) ) !important;
|
||||
background-image: -webkit-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
/* Polyfill */
|
||||
.transcodingProgress[aria-valuenow]:before {
|
||||
border-radius: 5px;
|
||||
background-image: -moz-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
background-image: -ms-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
background-image: -o-linear-gradient( center bottom, rgb(221, 73, 25) 37%, rgb(221, 73, 25) 69% ) !important;
|
||||
}
|
||||
|
||||
@media all and (max-width: 550px) {
|
||||
|
||||
.sessionAppName {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
@media all and (max-width: 500px) {
|
||||
|
||||
.sessionAppName {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.activeSession {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboardFooter {
|
||||
margin-top: 50px;
|
||||
text-align: center;
|
||||
|
|
@ -902,26 +713,6 @@ progress {
|
|||
}
|
||||
}
|
||||
|
||||
.disabledUser {
|
||||
-webkit-filter: grayscale(100%);
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
.disabledUserBanner {
|
||||
margin: 0 0 2em;
|
||||
}
|
||||
|
||||
.modalLoading {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
/* One less than jqm loading spinner, so we can combine them */
|
||||
z-index: 9999998;
|
||||
}
|
||||
|
||||
.nativeApp *:not(input):not(select):not(textarea) {
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
|
|
@ -961,36 +752,6 @@ progress {
|
|||
}
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status='Idle'] paper-fab {
|
||||
background-color: #999;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status="Cancelling"] paper-fab {
|
||||
background-color: #cc3333;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem[data-status="Running"] paper-fab {
|
||||
background-color: #52B54B;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem #progressContainer {
|
||||
height: 8px !important;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem #primaryProgress {
|
||||
border-bottom-left-radius: 5px;
|
||||
border-top-left-radius: 5px;
|
||||
}
|
||||
|
||||
.scheduledTaskPaperIconItem paper-progress {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.imageDropZone {
|
||||
border: 2px dashed #bbb;
|
||||
-moz-border-radius: 5px;
|
||||
|
|
|
|||
|
|
@ -119,6 +119,7 @@
|
|||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
LibraryBrowser.createCardMenus(elem);
|
||||
ImageLoader.lazyChildren(elem);
|
||||
}
|
||||
return function (view, params, tabContent) {
|
||||
|
|
|
|||
|
|
@ -1705,7 +1705,7 @@
|
|||
}
|
||||
|
||||
var width = screenWidth / innerWidth;
|
||||
div.remove();
|
||||
div.parentNode.removeChild(div);
|
||||
return Math.floor(width);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -168,7 +168,7 @@
|
|||
return html;
|
||||
}
|
||||
|
||||
function onTrailerButtonClick() {
|
||||
function onTrailerButtonClick(e) {
|
||||
|
||||
var id = this.getAttribute('data-itemid');
|
||||
|
||||
|
|
@ -176,10 +176,12 @@
|
|||
MediaController.play({ items: trailers });
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onPlayItemButtonClick() {
|
||||
function onPlayItemButtonClick(e) {
|
||||
|
||||
var target = this;
|
||||
|
||||
|
|
@ -191,10 +193,12 @@
|
|||
|
||||
LibraryBrowser.showPlayMenu(this, id, type, isFolder, mediaType, resumePosition);
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
function onMoreButtonClick() {
|
||||
function onMoreButtonClick(e) {
|
||||
|
||||
var card = parentWithClass(this, 'card');
|
||||
|
||||
|
|
@ -202,6 +206,8 @@
|
|||
showPlayOptions: false
|
||||
});
|
||||
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
return false;
|
||||
}
|
||||
|
||||
|
|
@ -705,7 +711,7 @@
|
|||
|
||||
if (listviewMenuButton) {
|
||||
showContextMenu(listviewMenuButton, {});
|
||||
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -111,7 +111,8 @@
|
|||
preferThumb: true,
|
||||
lazy: true,
|
||||
showDetailsMenu: true,
|
||||
centerText: true
|
||||
centerText: true,
|
||||
overlayMoreButton: true
|
||||
|
||||
});
|
||||
html += '</div>';
|
||||
|
|
@ -120,6 +121,7 @@
|
|||
}
|
||||
|
||||
elem.innerHTML = html;
|
||||
LibraryBrowser.createCardMenus(elem);
|
||||
ImageLoader.lazyChildren(elem);
|
||||
}
|
||||
return function (view, params, tabContent) {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue