1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

update components

This commit is contained in:
Luke Pulverenti 2016-08-02 01:55:52 -04:00
parent 6f21a963ea
commit 823f69bb92
68 changed files with 303 additions and 388 deletions

View file

@ -12,36 +12,36 @@
contain: style;
}
.dialog.fixedSize {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
max-height: none !important;
max-width: none !important;
width: auto;
}
.dialog-fixedSize {
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
max-height: none !important;
max-width: none !important;
width: auto;
}
.dialog.centeredDialog {
top: 50%;
left: 50%;
max-width: 70%;
max-height: 84%;
}
.centeredDialog {
top: 50%;
left: 50%;
max-width: 70%;
max-height: 84%;
}
@media all and (min-width: 1280px) and (min-height: 720px) {
.dialog.medium {
.dialog-medium {
top: 10% !important;
bottom: 10% !important;
left: 10% !important;
right: 10% !important;
}
.dialog.small {
.dialog-small {
top: 10% !important;
bottom: 10% !important;
left: 20% !important;
@ -51,7 +51,7 @@
@media all and (min-width: 1280px) and (min-height: 720px) {
.dialog.fullscreen-border {
.dialog-fullscreen-border {
top: 5% !important;
bottom: 5% !important;
left: 5% !important;
@ -68,32 +68,6 @@
padding: 0 24px;
}
.dialog .buttons {
position: relative;
padding: 0;
margin: 1em;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.dialog .buttons button {
color: #52B54B;
padding: 0.35em 1em;
margin: 0;
}
.dialog .buttons button:focus {
color: #fff;
background-color: #52B54B;
}
.dialogBackdrop {
background-color: #000;
opacity: 0;
@ -107,20 +81,6 @@
transition: opacity ease-out 0.2s;
}
.dialogBackdrop.opened {
opacity: .6;
}
.dialog::backdrop {
opacity: 0;
background-color: #000;
transition: opacity ease-out 0.2s;
}
.mouseIdle .dialog::backdrop {
cursor: none !important;
}
.dialog.opened::backdrop {
.dialogBackdropOpened {
opacity: .6;
}

View file

@ -98,7 +98,7 @@
dlg.addEventListener('close', onDialogClosed);
var center = !dlg.classList.contains('fixedSize');
var center = !dlg.classList.contains('dialog-fixedSize');
if (center) {
dlg.classList.add('centeredDialog');
}
@ -184,7 +184,7 @@
// Doing this immediately causes the opacity to jump immediately without animating
setTimeout(function () {
backdrop.classList.add('opened');
backdrop.classList.add('dialogBackdropOpened');
}, 0);
backdrop.addEventListener('click', function () {
@ -363,7 +363,7 @@
if (backdrop) {
dlg.backdrop = null;
backdrop.classList.remove('opened');
backdrop.classList.remove('dialogBackdropOpened');
setTimeout(function () {
backdrop.parentNode.removeChild(backdrop);
@ -382,16 +382,10 @@
options = options || {};
var dlg = document.createElement('dialog');
// If there's no native dialog support, use a plain div
// Also not working well in samsung tizen browser, content inside not clickable
if (!dlg.showModal || browser.tv) {
dlg = document.createElement('div');
} else {
// Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
dlg = document.createElement('div');
}
// Just go ahead and always use a plain div because we're seeing issues overlaying absoltutely positioned content over a modal dialog
var dlg = document.createElement('div');
dlg.classList.add('focuscontainer');
dlg.classList.add('hide');
@ -474,8 +468,8 @@
}
if (options.size) {
dlg.classList.add('fixedSize');
dlg.classList.add(options.size);
dlg.classList.add('dialog-fixedSize');
dlg.classList.add('dialog-' + options.size);
}
return dlg;