mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
update button styles
This commit is contained in:
parent
217234f89d
commit
b33a3302ed
109 changed files with 474 additions and 733 deletions
|
@ -15,12 +15,12 @@
|
|||
},
|
||||
"devDependencies": {},
|
||||
"ignore": [],
|
||||
"version": "1.4.24",
|
||||
"_release": "1.4.24",
|
||||
"version": "1.4.25",
|
||||
"_release": "1.4.25",
|
||||
"_resolution": {
|
||||
"type": "version",
|
||||
"tag": "1.4.24",
|
||||
"commit": "05159909e71faf74eb1d39f3cac661614b0a5d5b"
|
||||
"tag": "1.4.25",
|
||||
"commit": "aa53e6de589581ac2cd9773b464c59a79ab45486"
|
||||
},
|
||||
"_source": "https://github.com/MediaBrowser/emby-webcomponents.git",
|
||||
"_target": "^1.2.0",
|
||||
|
|
|
@ -31,7 +31,7 @@
|
|||
top: 50%;
|
||||
left: 50%;
|
||||
max-width: 70%;
|
||||
max-height: 80%;
|
||||
max-height: 84%;
|
||||
}
|
||||
|
||||
@media all and (min-width: 1280px) and (min-height: 720px) {
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
margin: 0 .29em;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
outline-width: 0;
|
||||
-moz-user-select: none;
|
||||
|
@ -25,6 +26,8 @@
|
|||
outline: none !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
[is="emby-button"].raised {
|
||||
|
@ -35,7 +38,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .25em .29em;
|
||||
margin: .25em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
@ -55,19 +58,21 @@
|
|||
height: 50px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: white;
|
||||
animation: ripple-animation 2s;
|
||||
opacity: 0.4;
|
||||
background: currentcolor;
|
||||
animation: ripple-animation .8s;
|
||||
opacity: 0.25;
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
from {
|
||||
transform: none;
|
||||
opacity: 0.4;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(100);
|
||||
transform: scale(20);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -18,9 +18,9 @@
|
|||
|
||||
this.appendChild(div);
|
||||
|
||||
setTimeout(function () {
|
||||
div.addEventListener("animationend", function() {
|
||||
div.parentNode.removeChild(div);
|
||||
}, 2000);
|
||||
}, false);
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
@ -30,6 +30,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
|
||||
if (e.button == 0) {
|
||||
animateButton.call(this, e);
|
||||
}
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.attachedCallback = function () {
|
||||
|
||||
if (this.getAttribute('data-embybutton') == 'true') {
|
||||
|
@ -39,7 +46,8 @@
|
|||
this.setAttribute('data-embybutton', 'true');
|
||||
|
||||
this.addEventListener('keydown', onKeyDown);
|
||||
this.addEventListener('mousedown', animateButton);
|
||||
this.addEventListener('mousedown', onMouseDown);
|
||||
this.addEventListener('touchstart', animateButton);
|
||||
//this.addEventListener('click', animateButton);
|
||||
};
|
||||
|
||||
|
|
|
@ -20,11 +20,6 @@ define([], function () {
|
|||
|
||||
function focus(element) {
|
||||
|
||||
var tagName = element.tagName;
|
||||
if (tagName == 'PAPER-INPUT') {
|
||||
element = element.querySelector('input') || element;
|
||||
}
|
||||
|
||||
try {
|
||||
element.focus();
|
||||
} catch (err) {
|
||||
|
@ -32,7 +27,7 @@ define([], function () {
|
|||
}
|
||||
}
|
||||
|
||||
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-BUTTON', 'PAPER-INPUT', 'PAPER-CHECKBOX'];
|
||||
var focusableTagNames = ['INPUT', 'TEXTAREA', 'SELECT', 'BUTTON', 'A', 'PAPER-CHECKBOX'];
|
||||
var focusableContainerTagNames = ['BODY', 'DIALOG'];
|
||||
var focusableQuery = focusableTagNames.join(',') + ',.focusable';
|
||||
|
||||
|
|
|
@ -109,29 +109,25 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
|
|||
target.addEventListener(type, handler, optionsOrCapture);
|
||||
}
|
||||
|
||||
function unveilWithIntersection(images) {
|
||||
function unveilWithIntersection(images, root) {
|
||||
|
||||
var filledCount = 0;
|
||||
|
||||
var options = {};
|
||||
|
||||
options.rootMargin = "150%";
|
||||
//options.rootMargin = "300%";
|
||||
|
||||
var observer = new IntersectionObserver(function (entries) {
|
||||
for (var j = 0, length2 = entries.length; j < length2; j++) {
|
||||
var entry = entries[j];
|
||||
var intersectionRatio = entry.intersectionRatio;
|
||||
if (intersectionRatio) {
|
||||
|
||||
var target = entry.target;
|
||||
observer.unobserve(target);
|
||||
fillImage(target);
|
||||
filledCount++;
|
||||
}
|
||||
var target = entry.target;
|
||||
observer.unobserve(target);
|
||||
fillImage(target);
|
||||
filledCount++;
|
||||
}
|
||||
|
||||
if (filledCount >= images.length) {
|
||||
//observer.disconnect();
|
||||
observer.disconnect();
|
||||
}
|
||||
},
|
||||
options
|
||||
|
@ -142,14 +138,14 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
|
|||
}
|
||||
}
|
||||
|
||||
function unveilElements(images) {
|
||||
function unveilElements(images, root) {
|
||||
|
||||
if (!images.length) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (supportsIntersectionObserver) {
|
||||
unveilWithIntersection(images);
|
||||
unveilWithIntersection(images, root);
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -223,7 +219,7 @@ define(['visibleinviewport', 'imageFetcher', 'layoutManager', 'events', 'browser
|
|||
|
||||
function lazyChildren(elem) {
|
||||
|
||||
unveilElements(elem.getElementsByClassName('lazy'));
|
||||
unveilElements(elem.getElementsByClassName('lazy'), elem);
|
||||
}
|
||||
|
||||
function getPrimaryImageAspectRatio(items) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue