mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update components
This commit is contained in:
parent
6f21a963ea
commit
823f69bb92
68 changed files with 303 additions and 388 deletions
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue