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
058d86a988
commit
1d0c9407f0
9 changed files with 46 additions and 63 deletions
|
@ -6,7 +6,7 @@
|
|||
max-height: 84%;
|
||||
}
|
||||
|
||||
.layout-tv .actionSheet {
|
||||
.actionsheet-fullscreen {
|
||||
max-height: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -91,9 +91,11 @@
|
|||
};
|
||||
|
||||
var backButton = false;
|
||||
var isFullscreen;
|
||||
|
||||
if (layoutManager.tv) {
|
||||
dialogOptions.size = 'fullscreen';
|
||||
isFullscreen = true;
|
||||
backButton = true;
|
||||
dialogOptions.autoFocus = true;
|
||||
} else {
|
||||
|
@ -106,6 +108,10 @@
|
|||
|
||||
var dlg = dialogHelper.createDialog(dialogOptions);
|
||||
|
||||
if (isFullscreen) {
|
||||
dlg.classList.add('actionsheet-fullscreen');
|
||||
}
|
||||
|
||||
if (!layoutManager.tv) {
|
||||
dlg.classList.add('actionsheet-extraSpacing');
|
||||
}
|
||||
|
|
|
@ -80,12 +80,6 @@
|
|||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab iron-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab i {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
@ -103,10 +97,6 @@
|
|||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
[is="emby-button"] iron-icon + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
[is="emby-button"] i + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
@ -140,7 +130,7 @@
|
|||
margin-right: .5em;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light] {
|
||||
.paper-icon-button-light {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
@ -158,10 +148,10 @@
|
|||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
min-width: 24px;
|
||||
min-height: 24px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
|
@ -178,49 +168,22 @@
|
|||
justify-content: center;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light].autoSize {
|
||||
width: auto !important;
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light][disabled] {
|
||||
.paper-icon-button-light[disabled] {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light] i {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
font-size: 24px;
|
||||
.paper-icon-button-light > i {
|
||||
width: auto;
|
||||
height: auto;
|
||||
font-size: 1.72em;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.layout-tv [is=paper-icon-button-light] {
|
||||
width: auto;
|
||||
height: auto;
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
.layout-tv [is=paper-icon-button-light] i {
|
||||
width: 3.7vh;
|
||||
height: 3.7vh;
|
||||
font-size: 3.7vh;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light] iron-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light] img {
|
||||
width: 100%;
|
||||
.paper-icon-button-light > img {
|
||||
width: 1.72em;
|
||||
/* Can't use 100% height or it will stretch past the boundaries in safari */
|
||||
/*height: 100%;*/
|
||||
max-height: 100%;
|
||||
|
@ -230,7 +193,7 @@
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light]:after {
|
||||
.paper-icon-button-light:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
@ -242,7 +205,7 @@
|
|||
opacity: 0;
|
||||
}
|
||||
|
||||
[is=paper-icon-button-light]:focus:after {
|
||||
.paper-icon-button-light:focus:after {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
|
|
|
@ -48,11 +48,11 @@
|
|||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embybutton') == 'true') {
|
||||
if (this.classList.contains('paper-icon-button-light')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.setAttribute('data-embybutton', 'true');
|
||||
this.classList.add('paper-icon-button-light');
|
||||
|
||||
if (enableAnimation()) {
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
|
|
|
@ -271,11 +271,7 @@
|
|||
@media all and (min-height: 720px) {
|
||||
|
||||
.channelPrograms, .channelHeaderCell {
|
||||
height: 6vh;
|
||||
}
|
||||
|
||||
.layout-tv .channelPrograms, .layout-tv .channelHeaderCell {
|
||||
height: 9vh;
|
||||
height: 4.2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -38,7 +38,7 @@ div.listItem {
|
|||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.listItem [is=paper-icon-button-light] {
|
||||
.listItem .paper-icon-button-light {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
|
|
@ -55,6 +55,7 @@
|
|||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
background: #EF6C00;
|
||||
padding: .25em .5em;
|
||||
padding: .2em .5em;
|
||||
border-radius: .25em;
|
||||
}
|
||||
font-size: 94%;
|
||||
}
|
||||
|
|
|
@ -122,7 +122,7 @@ function (dialogHelper, loading, connectionManager, globalize, actionsheet) {
|
|||
var html = '';
|
||||
|
||||
html += '<div class="dialogContent">';
|
||||
html += '<div class="dialogContentInner centeredContent">';
|
||||
html += '<div class="dialogContentInner dialog-content-centered">';
|
||||
html += '<form style="margin:auto;">';
|
||||
|
||||
html += '<h1>' + globalize.translate('HeaderChannels') + '</h1>';
|
||||
|
|
|
@ -7,6 +7,23 @@
|
|||
contain: layout style;
|
||||
}
|
||||
|
||||
[is="emby-button"].fab iron-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
[is="emby-button"] iron-icon + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
.paper-icon-button-light > iron-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* Links */
|
||||
.ui-body-b a {
|
||||
color: #52B54B /*{b-link-color}*/;
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue