minify
This commit is contained in:
Luke Pulverenti
parent
82bcca376f
commit
8a6884abef
494 changed files with 256 additions and 120180 deletions
|
|
@ -1,244 +1 @@
|
|||
.emby-button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 .29em;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
outline-width: 0;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
padding: 1em .7em;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 2px;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.emby-button::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.button-flat {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.emby-button-focusscale {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.emby-button-focusscale:focus {
|
||||
transform: scale(1.16);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-button > i {
|
||||
/* For non-fab buttons that have icons */
|
||||
font-size: 1.36em;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.fab {
|
||||
display: inline-flex;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(170,170,190, .4);
|
||||
padding: .6em;
|
||||
box-sizing: border-box;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.fab > i {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
vertical-align: middle;
|
||||
font-size: 2.85em;
|
||||
}
|
||||
|
||||
.emby-button-noflex {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.fab.mini {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.fab.mini > i {
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
font-size: 1.72em;
|
||||
}
|
||||
|
||||
.emby-button.block {
|
||||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .25em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.raised:focus {
|
||||
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.4);
|
||||
transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.emby-button > i + span {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.emby-button > span + i {
|
||||
margin-left: .5em;
|
||||
}
|
||||
|
||||
.paper-icon-button-light {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 .29em;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
outline-width: 0;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
min-width: initial;
|
||||
min-height: initial;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 8px;
|
||||
font-weight: normal;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
font-weight: 500;
|
||||
border-radius: 50%;
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.paper-icon-button-light::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light[disabled] {
|
||||
opacity: .3;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > i {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: 1.6em;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.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%;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
transition: opacity .3s ease-out;
|
||||
background: currentcolor;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus {
|
||||
color: #52B54B;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:focus:after {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.emby-button-ripple-effect, .paper-icon-button-light-ripple-effect {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
background: currentcolor;
|
||||
animation: ripple-animation .8s;
|
||||
opacity: 0.25;
|
||||
transform-origin: center center;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
@keyframes ripple-animation {
|
||||
from {
|
||||
transform: none;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scale(20);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.icon-button-focusscale {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.icon-button-focusscale:focus {
|
||||
transform: scale(1.3);
|
||||
z-index: 1;
|
||||
}
|
||||
.emby-button,.fab{-webkit-box-sizing:border-box}.emby-button,.paper-icon-button-light{text-align:center;outline:0!important;overflow:hidden;font-weight:500;-webkit-tap-highlight-color:transparent}.emby-button,.paper-icon-button-light,.paper-icon-button-light>i,.paper-icon-button-light>img{position:relative;vertical-align:middle}.emby-button{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;box-sizing:border-box;margin:0 .29em;font-size:inherit;font-family:inherit;color:inherit;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:0;padding:1em .7em;border:0;-webkit-border-radius:2px;border-radius:2px}.emby-button.block,.fab{-webkit-box-align:center}.emby-button::-moz-focus-inner{border:0}.button-flat{background:0 0;-webkit-box-shadow:none;box-shadow:none;text-transform:uppercase}.emby-button-focusscale{-webkit-transition:-webkit-transform 180ms ease-out!important;-o-transition:transform 180ms ease-out!important;transition:transform 180ms ease-out!important;-webkit-transform-origin:center center;transform-origin:center center}.emby-button-focusscale:focus{-webkit-transform:scale(1.16);transform:scale(1.16);z-index:1}.emby-button>i{font-size:1.36em;width:1em;height:1em}.fab{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-border-radius:50%;border-radius:50%;background-color:rgba(170,170,190,.4);padding:.6em;box-sizing:border-box;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;text-align:center;color:#fff;margin:0}.fab>i{height:1em;width:1em;vertical-align:middle;font-size:2.85em}.emby-button-noflex{display:inline-block;white-space:nowrap}.fab.mini{padding:8px}.fab.mini>i{height:1em;width:1em;font-size:1.72em}.emby-button.block{display:block;-webkit-align-items:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;margin:.25em 0;width:100%}.raised:focus{-webkit-box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.4);box-shadow:0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12),0 5px 5px -3px rgba(0,0,0,.4);-webkit-transition:-webkit-box-shadow .28s cubic-bezier(.4,0,.2,1);-o-transition:box-shadow .28s cubic-bezier(.4,0,.2,1);transition:box-shadow .28s cubic-bezier(.4,0,.2,1)}.emby-button>i+span,.emby-button>span+i{margin-left:.5em}.paper-icon-button-light{display:-webkit-inline-box;display:-webkit-inline-flex;display:inline-flex;-webkit-box-align:center;-webkit-align-items:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0 .29em;background:0 0;font-size:inherit;font-family:inherit;color:inherit;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;user-select:none;cursor:pointer;z-index:0;min-width:initial;min-height:initial;width:auto;height:auto;padding:8px;border:0;-webkit-border-radius:50%;border-radius:50%;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center}.paper-icon-button-light::-moz-focus-inner{border:0}.paper-icon-button-light[disabled]{opacity:.3}.paper-icon-button-light>i{width:1em;height:1em;font-size:1.6em;z-index:1}.paper-icon-button-light>img{width:1.72em;max-height:100%;z-index:1}.paper-icon-button-light:after{content:'';position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transition:opacity .3s ease-out;-o-transition:opacity .3s ease-out;transition:opacity .3s ease-out;background:currentcolor;opacity:0}.paper-icon-button-light:focus{color:#52B54B}.paper-icon-button-light:focus:after{opacity:.2}.emby-button-ripple-effect,.paper-icon-button-light-ripple-effect{position:absolute;-webkit-border-radius:50%;border-radius:50%;width:50px;height:50px;top:50%;left:50%;background:currentcolor;-webkit-animation:ripple-animation .8s;animation:ripple-animation .8s;opacity:.25;-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}@-webkit-keyframes ripple-animation{from{-webkit-transform:none;transform:none;opacity:.5}to{-webkit-transform:scale(20);transform:scale(20);opacity:0}}@keyframes ripple-animation{from{-webkit-transform:none;transform:none;opacity:.5}to{-webkit-transform:scale(20);transform:scale(20);opacity:0}}.emby-button-foreground{position:relative;z-index:1}.icon-button-focusscale{-webkit-transition:-webkit-transform 180ms ease-out!important;-o-transition:transform 180ms ease-out!important;transition:transform 180ms ease-out!important;-webkit-transform-origin:center center;transform-origin:center center}.icon-button-focusscale:focus{-webkit-transform:scale(1.3);transform:scale(1.3);z-index:1}
|
||||
|
|
@ -1,106 +1 @@
|
|||
define(['browser', 'dom', 'layoutManager', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||
|
||||
function animateButtonInternal(e, btn) {
|
||||
|
||||
var div = document.createElement('div');
|
||||
|
||||
for (var i = 0, length = btn.classList.length; i < length; i++) {
|
||||
div.classList.add(btn.classList[i] + '-ripple-effect');
|
||||
}
|
||||
|
||||
var offsetX = e.offsetX || 0;
|
||||
var offsetY = e.offsetY || 0;
|
||||
|
||||
if (offsetX > 0 && offsetY > 0) {
|
||||
div.style.left = offsetX + 'px';
|
||||
div.style.top = offsetY + 'px';
|
||||
}
|
||||
|
||||
var firstChild = btn.firstChild;
|
||||
if (firstChild) {
|
||||
btn.insertBefore(div, btn.firstChild);
|
||||
} else {
|
||||
btn.appendChild(div);
|
||||
}
|
||||
|
||||
div.addEventListener(dom.whichAnimationEvent(), function () {
|
||||
div.parentNode.removeChild(div);
|
||||
}, false);
|
||||
}
|
||||
|
||||
function animateButton(e, btn) {
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
animateButtonInternal(e, btn);
|
||||
});
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
animateButton(e, this);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseDown(e) {
|
||||
|
||||
if (e.button === 0) {
|
||||
animateButton(e, this);
|
||||
}
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
|
||||
animateButton(e, this);
|
||||
}
|
||||
|
||||
function enableAnimation() {
|
||||
if (browser.tv) {
|
||||
// too slow
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
|
||||
if (this.classList.contains('emby-button')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('emby-button');
|
||||
|
||||
// Even though they support flex, it doesn't quite work with button elements
|
||||
if (browser.firefox || browser.safari) {
|
||||
this.classList.add('emby-button-noflex');
|
||||
}
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('emby-button-focusscale');
|
||||
}
|
||||
|
||||
if (enableAnimation()) {
|
||||
dom.addEventListener(this, 'keydown', onKeyDown, {
|
||||
passive: true
|
||||
});
|
||||
if (browser.safari) {
|
||||
dom.addEventListener(this, 'click', onClick, {
|
||||
passive: true
|
||||
});
|
||||
} else {
|
||||
dom.addEventListener(this, 'mousedown', onMouseDown, {
|
||||
passive: true
|
||||
});
|
||||
//this.addEventListener('touchstart', animateButton);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('emby-button', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'button'
|
||||
});
|
||||
});
|
||||
define(["browser","dom","layoutManager","css!./emby-button","registerElement"],function(browser,dom,layoutManager){"use strict";function animateButtonInternal(e,btn){for(var div=document.createElement("div"),i=0,length=btn.classList.length;i<length;i++)div.classList.add(btn.classList[i]+"-ripple-effect");var offsetX=e.offsetX||0,offsetY=e.offsetY||0;offsetX>0&&offsetY>0&&(div.style.left=offsetX+"px",div.style.top=offsetY+"px");var firstChild=btn.firstChild;firstChild?btn.insertBefore(div,btn.firstChild):btn.appendChild(div),div.addEventListener(dom.whichAnimationEvent(),function(){div.parentNode.removeChild(div)},!1)}function animateButton(e,btn){requestAnimationFrame(function(){animateButtonInternal(e,btn)})}function onKeyDown(e){13===e.keyCode&&animateButton(e,this)}function onMouseDown(e){0===e.button&&animateButton(e,this)}function onClick(e){animateButton(e,this)}function enableAnimation(){return!browser.tv}var EmbyButtonPrototype=Object.create(HTMLButtonElement.prototype);EmbyButtonPrototype.createdCallback=function(){this.classList.contains("emby-button")||(this.classList.add("emby-button"),(browser.firefox||browser.safari)&&this.classList.add("emby-button-noflex"),layoutManager.tv&&this.classList.add("emby-button-focusscale"),enableAnimation()&&(dom.addEventListener(this,"keydown",onKeyDown,{passive:!0}),browser.safari?dom.addEventListener(this,"click",onClick,{passive:!0}):dom.addEventListener(this,"mousedown",onMouseDown,{passive:!0})))},document.registerElement("emby-button",{prototype:EmbyButtonPrototype,extends:"button"})});
|
||||
|
|
@ -1,82 +1 @@
|
|||
define(['browser', 'dom', 'layoutManager', 'css!./emby-button', 'registerElement'], function (browser, dom, layoutManager) {
|
||||
'use strict';
|
||||
|
||||
var EmbyButtonPrototype = Object.create(HTMLButtonElement.prototype);
|
||||
|
||||
function enableAnimation() {
|
||||
if (browser.tv) {
|
||||
// too slow
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
function animateButtonInternal(e, btn) {
|
||||
|
||||
var div = document.createElement('div');
|
||||
|
||||
for (var i = 0, length = btn.classList.length; i < length; i++) {
|
||||
div.classList.add(btn.classList[i] + '-ripple-effect');
|
||||
}
|
||||
|
||||
var offsetX = e.offsetX || 0;
|
||||
var offsetY = e.offsetY || 0;
|
||||
|
||||
if (offsetX > 0 && offsetY > 0) {
|
||||
div.style.left = offsetX + 'px';
|
||||
div.style.top = offsetY + 'px';
|
||||
}
|
||||
|
||||
btn.appendChild(div);
|
||||
|
||||
div.addEventListener(dom.whichAnimationEvent(), function () {
|
||||
div.parentNode.removeChild(div);
|
||||
}, false);
|
||||
}
|
||||
|
||||
function animateButton(e, btn) {
|
||||
|
||||
requestAnimationFrame(function () {
|
||||
animateButtonInternal(e, btn);
|
||||
});
|
||||
}
|
||||
|
||||
function onKeyDown(e) {
|
||||
|
||||
if (e.keyCode === 13) {
|
||||
animateButton(e, this);
|
||||
}
|
||||
}
|
||||
|
||||
function onClick(e) {
|
||||
|
||||
animateButton(e, this);
|
||||
}
|
||||
|
||||
EmbyButtonPrototype.createdCallback = function () {
|
||||
|
||||
if (this.classList.contains('paper-icon-button-light')) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.classList.add('paper-icon-button-light');
|
||||
|
||||
if (layoutManager.tv) {
|
||||
this.classList.add('icon-button-focusscale');
|
||||
}
|
||||
|
||||
if (enableAnimation()) {
|
||||
dom.addEventListener(this, 'keydown', onKeyDown, {
|
||||
passive: true
|
||||
});
|
||||
dom.addEventListener(this, 'click', onClick, {
|
||||
passive: true
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
document.registerElement('paper-icon-button-light', {
|
||||
prototype: EmbyButtonPrototype,
|
||||
extends: 'button'
|
||||
});
|
||||
});
|
||||
define(["browser","dom","layoutManager","css!./emby-button","registerElement"],function(browser,dom,layoutManager){"use strict";function enableAnimation(){return!browser.tv}function animateButtonInternal(e,btn){for(var div=document.createElement("div"),i=0,length=btn.classList.length;i<length;i++)div.classList.add(btn.classList[i]+"-ripple-effect");var offsetX=e.offsetX||0,offsetY=e.offsetY||0;offsetX>0&&offsetY>0&&(div.style.left=offsetX+"px",div.style.top=offsetY+"px"),btn.appendChild(div),div.addEventListener(dom.whichAnimationEvent(),function(){div.parentNode.removeChild(div)},!1)}function animateButton(e,btn){requestAnimationFrame(function(){animateButtonInternal(e,btn)})}function onKeyDown(e){13===e.keyCode&&animateButton(e,this)}function onClick(e){animateButton(e,this)}var EmbyButtonPrototype=Object.create(HTMLButtonElement.prototype);EmbyButtonPrototype.createdCallback=function(){this.classList.contains("paper-icon-button-light")||(this.classList.add("paper-icon-button-light"),layoutManager.tv&&this.classList.add("icon-button-focusscale"),enableAnimation()&&(dom.addEventListener(this,"keydown",onKeyDown,{passive:!0}),dom.addEventListener(this,"click",onClick,{passive:!0})))},document.registerElement("paper-icon-button-light",{prototype:EmbyButtonPrototype,extends:"button"})});
|
||||
Loading…
Add table
Add a link
Reference in a new issue