mirror of
https://github.com/jellyfin/jellyfin-web
synced 2025-03-30 19:56:21 +00:00
merge branch master into autoplay
This commit is contained in:
dkanada
commit
aef4fede3c
136 changed files with 5135 additions and 2469 deletions
|
|
@ -8,20 +8,26 @@
|
|||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
color: inherit;
|
||||
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
outline-width: 0;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
z-index: 0;
|
||||
padding: 0.9em 1em;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0.2em;
|
||||
/* These are getting an outline in opera tv browsers, which run chrome 30 */
|
||||
outline: none !important;
|
||||
position: relative;
|
||||
font-weight: 600;
|
||||
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
text-decoration: none;
|
||||
|
||||
/* Not crazy about this but it normalizes heights between anchors and buttons */
|
||||
line-height: 1.35;
|
||||
transform-origin: center;
|
||||
|
|
@ -42,7 +48,7 @@
|
|||
}
|
||||
|
||||
.button-flat:hover {
|
||||
opacity: .5;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.button-link {
|
||||
|
|
@ -79,7 +85,7 @@
|
|||
display: block;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: .25em 0;
|
||||
margin: 0.25em 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
|
@ -88,12 +94,15 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
margin: 0 .29em;
|
||||
margin: 0 0.29em;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
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;
|
||||
|
|
@ -101,15 +110,17 @@
|
|||
min-height: initial;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: .556em;
|
||||
padding: 0.556em;
|
||||
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;
|
||||
border-radius: 50%;
|
||||
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
justify-content: center;
|
||||
transform-origin: center;
|
||||
transition: 0.2s;
|
||||
|
|
@ -120,32 +131,33 @@
|
|||
z-index: 1;
|
||||
}
|
||||
|
||||
.paper-icon-button-light::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.paper-icon-button-light::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.paper-icon-button-light:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
.paper-icon-button-light:disabled {
|
||||
opacity: 0.3;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > i {
|
||||
font-size: 1.66956521739130434em;
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.paper-icon-button-light > i {
|
||||
font-size: 1.66956521739130434em;
|
||||
|
||||
.paper-icon-button-light > div {
|
||||
max-height: 100%;
|
||||
transform: scale(1.8);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Make sure its on top of the ripple */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.paper-icon-button-light > div {
|
||||
max-height: 100%;
|
||||
transform: scale(1.8);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
vertical-align: middle;
|
||||
display: inline;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.emby-button-foreground {
|
||||
position: relative;
|
||||
|
|
@ -159,7 +171,6 @@
|
|||
.filterButtonBubble {
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
background: #444;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 1.6em;
|
||||
|
|
@ -170,7 +181,7 @@
|
|||
justify-content: center;
|
||||
font-size: 82%;
|
||||
border-radius: 100em;
|
||||
box-shadow: 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
background: #03A9F4;
|
||||
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
background: #03a9f4;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -32,12 +32,16 @@
|
|||
|
||||
.emby-checkbox {
|
||||
position: absolute;
|
||||
|
||||
/* This is for focusing purposes, so the focusManager doesn't skip over it */
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -46,14 +50,13 @@
|
|||
position: absolute;
|
||||
top: 3px;
|
||||
left: 0;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 1.83em;
|
||||
height: 1.83em;
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border: 2px solid currentcolor;
|
||||
border-radius: .14em;
|
||||
border-radius: 0.14em;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -98,18 +101,18 @@
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.checkboxList-verticalwrap > .emby-checkbox-label {
|
||||
display: inline-flex;
|
||||
margin: .3em 0 .3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
.checkboxList-verticalwrap > .emby-checkbox-label {
|
||||
display: inline-flex;
|
||||
margin: 0.3em 0 0.3em 0;
|
||||
width: 12em;
|
||||
}
|
||||
|
||||
.checkboxList-paperList {
|
||||
padding: 1em !important;
|
||||
}
|
||||
|
||||
.checkboxListLabel {
|
||||
margin-bottom: .25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
@keyframes repaintChrome {
|
||||
|
|
@ -121,3 +124,13 @@
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes repaintChrome {
|
||||
from {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.emby-collapse {
|
||||
margin: .5em 0;
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
|
||||
.collapseContent {
|
||||
|
|
@ -18,10 +18,9 @@
|
|||
text-transform: none;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
border-width: 0 0 .1em 0;
|
||||
border-width: 0 0 0.1em 0;
|
||||
border-style: solid;
|
||||
padding-left: .1em;
|
||||
padding-left: 0.1em;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
|
@ -30,7 +29,7 @@
|
|||
transform-origin: 50% 50%;
|
||||
transition: transform 180ms ease-out;
|
||||
position: absolute;
|
||||
right: .5em;
|
||||
right: 0.5em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,18 +4,22 @@
|
|||
margin-bottom: 0 !important;
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding: .4em .25em;
|
||||
padding: 0.4em 0.25em;
|
||||
|
||||
/* must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: 110%;
|
||||
|
||||
/* prevent padding from causing width overflow */
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.emby-input::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.inputContainer {
|
||||
margin-bottom: 1.8em;
|
||||
|
|
@ -23,13 +27,14 @@
|
|||
|
||||
.inputLabel {
|
||||
display: inline-block;
|
||||
margin-bottom: .25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.emby-input + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.emby-input-iconbutton {
|
||||
-webkit-align-self: flex-end;
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,9 +11,9 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: .25em solid rgba(0, 0, 0, 1);
|
||||
border: 0.25em solid rgba(0, 0, 0, 1);
|
||||
box-sizing: border-box;
|
||||
background: rgba(0, 0, 0, .9);
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
width: 200%;
|
||||
height: 200%;
|
||||
border-radius: 50%;
|
||||
border-width: .25em;
|
||||
border-width: 0.25em;
|
||||
border-style: solid;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,29 +4,29 @@
|
|||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding-left: 0;
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.radio-label-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: .5em;
|
||||
margin-bottom: .5em;
|
||||
}
|
||||
|
||||
.mdl-radio {
|
||||
padding-left: 24px;
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.mdl-radio__button {
|
||||
line-height: 24px;
|
||||
position: absolute;
|
||||
|
||||
/* 1px is for focusing purposes, so the focusManager doesn't skip over it */
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
|
||||
border: 2px solid rgba(0,0,0, 0.26);
|
||||
border: 2px solid rgba(0, 0, 0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -67,27 +67,31 @@
|
|||
cursor: pointer;
|
||||
transition-duration: 0.28s;
|
||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
||||
transition-property: -webkit-transform;
|
||||
transition-property: transform;
|
||||
transition-property: transform, -webkit-transform;
|
||||
-webkit-transform: scale3d(0, 0, 0);
|
||||
transform: scale3d(0, 0, 0);
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
}
|
||||
|
||||
.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
-webkit-transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
background: rgba(0,0,0, 0.26);
|
||||
background: rgba(0, 0, 0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
box-shadow: 0 0 0px 10px rgba(255, 255, 255, 0.76);
|
||||
box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
|
||||
}
|
||||
|
||||
.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
|
||||
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26)
|
||||
box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
|
||||
}
|
||||
|
||||
.mdl-radio__label {
|
||||
|
|
@ -95,6 +99,6 @@
|
|||
}
|
||||
|
||||
.mdl-radio__button:disabled + .mdl-radio__label {
|
||||
color: rgba(0,0,0, 0.26);
|
||||
color: rgba(0, 0, 0, 0.26);
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,52 +2,60 @@
|
|||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
/* Remove select styling */
|
||||
|
||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: 110%;
|
||||
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
padding: .5em 1.9em .5em .5em;
|
||||
padding: 0.5em 1.9em 0.5em 0.5em;
|
||||
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-select[disabled] {
|
||||
background: none !important;
|
||||
border-color: transparent !important;
|
||||
color: inherit !important;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select {
|
||||
padding: .3em 1.9em .3em .5em;
|
||||
font-size: inherit;
|
||||
.emby-select[disabled] {
|
||||
background: none !important;
|
||||
border-color: transparent !important;
|
||||
color: inherit !important;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select[disabled] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.emby-select::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select {
|
||||
padding: 0.3em 1.9em 0.3em 0.5em;
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .emby-select[disabled] {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.emby-select-focusscale {
|
||||
transition: transform 180ms ease-out !important;
|
||||
-webkit-transform-origin: center center;
|
||||
transform-origin: center center;
|
||||
}
|
||||
|
||||
.emby-select-focusscale:focus {
|
||||
transform: scale(1.04);
|
||||
z-index: 1;
|
||||
}
|
||||
.emby-select-focusscale:focus {
|
||||
transform: scale(1.04);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.emby-select + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.selectContainer {
|
||||
|
|
@ -63,31 +71,32 @@
|
|||
|
||||
.selectLabel {
|
||||
display: block;
|
||||
margin-bottom: .25em;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .selectLabel {
|
||||
margin-bottom: 0;
|
||||
margin-right: .5em;
|
||||
margin-right: 0.5em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.emby-select-withcolor {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border-radius: .2em;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
|
||||
.selectArrowContainer {
|
||||
position: absolute;
|
||||
right: .3em;
|
||||
top: .2em;
|
||||
right: 0.3em;
|
||||
top: 0.2em;
|
||||
color: inherit;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.selectContainer-inline > .selectArrowContainer {
|
||||
top: initial;
|
||||
bottom: .24em;
|
||||
bottom: 0.24em;
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
|
|
@ -96,7 +105,7 @@
|
|||
}
|
||||
|
||||
.selectArrow {
|
||||
margin-top: .35em;
|
||||
margin-top: 0.35em;
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,73 +1,85 @@
|
|||
_:-ms-input-placeholder {
|
||||
:-ms-input-placeholder {
|
||||
appearance: none;
|
||||
-ms-appearance: none;
|
||||
height: 2.223em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mdl-slider {
|
||||
width: 100%;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-ms-appearance: none;
|
||||
appearance: none;
|
||||
height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
|
||||
height: 150%;/* 150% is needed, else ie and edge won't display the thumb properly */
|
||||
background: transparent;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
outline: 0;
|
||||
color: #00a4dc;
|
||||
-webkit-align-self: center;
|
||||
-ms-flex-item-align: center;
|
||||
align-self: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
margin: 0;
|
||||
|
||||
/* Disable webkit tap highlighting */
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
display: block;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
.mdl-slider::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
.mdl-slider::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
.mdl-slider::-webkit-slider-runnable-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-track {
|
||||
background: #444;
|
||||
border: none;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.mdl-slider::-moz-range-track {
|
||||
background: #444;
|
||||
border: none;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.mdl-slider::-moz-range-progress {
|
||||
background: #00a4dc;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
.mdl-slider::-moz-range-progress {
|
||||
background: #00a4dc;
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-track {
|
||||
background: none;
|
||||
color: transparent;
|
||||
height: .2em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
.mdl-slider::-ms-track {
|
||||
background: none;
|
||||
color: transparent;
|
||||
height: 0.2em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-lower {
|
||||
display: none;
|
||||
}
|
||||
.mdl-slider::-ms-fill-lower {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-fill-upper {
|
||||
display: none;
|
||||
}
|
||||
.mdl-slider::-ms-fill-upper {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
.mdl-slider::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-webkit-slider-thumb {
|
||||
transform: none;
|
||||
|
|
@ -91,27 +103,27 @@ _:-ms-input-placeholder {
|
|||
height: 0.9em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background-image: none;
|
||||
background: #00a4dc;
|
||||
background-image: none;
|
||||
border: none;
|
||||
transform: Scale(1.4, 1.4);
|
||||
transform: scale(1.4, 1.4);
|
||||
}
|
||||
|
||||
.mdl-slider::-ms-thumb {
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
width: 1.8em;
|
||||
height: 1.8em;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #00a4dc;
|
||||
border: none;
|
||||
transform: scale(.9, .9);
|
||||
transform: scale(0.9, 0.9);
|
||||
transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.mdl-slider-hoverthumb::-ms-thumb {
|
||||
margin-left: -.4em;
|
||||
transform: scale(.5, .5);
|
||||
margin-left: -0.4em;
|
||||
transform: scale(0.5, 0.5);
|
||||
}
|
||||
|
||||
.mdl-slider:hover::-ms-thumb {
|
||||
|
|
@ -149,15 +161,15 @@ _:-ms-input-placeholder {
|
|||
.mdl-slider-background-flex-container {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: -.05em;
|
||||
margin-top: -0.05em;
|
||||
top: 50%;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.mdl-slider-background-flex {
|
||||
background: #333;
|
||||
height: .2em;
|
||||
margin-top: -.08em;
|
||||
height: 0.2em;
|
||||
margin-top: -0.08em;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
|
|
@ -173,7 +185,7 @@ _:-ms-input-placeholder {
|
|||
}
|
||||
|
||||
.mdl-slider-background-lower {
|
||||
/*transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
/* transition: width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0;
|
||||
|
|
@ -188,15 +200,16 @@ _:-ms-input-placeholder {
|
|||
|
||||
.mdl-slider-background-lower-withtransform {
|
||||
width: 100%;
|
||||
/*transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
|
||||
/* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
transform-origin: left center;
|
||||
transform: scaleX(0);
|
||||
}
|
||||
|
||||
.mdl-slider-background-upper {
|
||||
/*transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1);*/
|
||||
/* transition: left 0.18s cubic-bezier(0.4, 0, 0.2, 1), width 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
background: #666;
|
||||
background: rgba(255, 255, 255, .4);
|
||||
background: rgba(255, 255, 255, 0.4);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 0;
|
||||
|
|
@ -218,5 +231,5 @@ _:-ms-input-placeholder {
|
|||
|
||||
.sliderBubbleText {
|
||||
margin: 0;
|
||||
padding: .5em .75em;
|
||||
padding: 0.5em 0.75em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager) {
|
||||
define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-slider', 'registerElement', 'emby-input'], function (browser, dom, layoutManager, keyboardnavigation) {
|
||||
'use strict';
|
||||
|
||||
var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
|
||||
|
|
@ -250,7 +250,7 @@ define(['browser', 'dom', 'layoutManager', 'css!./emby-slider', 'registerElement
|
|||
* Handle KeyDown event
|
||||
*/
|
||||
function onKeyDown(e) {
|
||||
switch (e.key) {
|
||||
switch (keyboardnavigation.getKeyName(e)) {
|
||||
case 'ArrowLeft':
|
||||
case 'Left':
|
||||
stepKeyboard(this, -this.keyboardStepDown || -1);
|
||||
|
|
|
|||
|
|
@ -2,30 +2,35 @@
|
|||
display: block;
|
||||
margin: 0;
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
/* Remove select styling */
|
||||
|
||||
/* Font size must the 16px or larger to prevent iOS page zoom on focus */
|
||||
font-size: inherit;
|
||||
|
||||
/* General select styles: change as needed */
|
||||
font-family: inherit;
|
||||
font-weight: inherit;
|
||||
color: inherit;
|
||||
padding: .35em .25em;
|
||||
padding: 0.35em 0.25em;
|
||||
|
||||
/* Prevent padding from causing width overflow */
|
||||
box-sizing: border-box;
|
||||
outline: none !important;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.emby-textarea::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
.emby-textarea::-moz-focus-inner {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.textareaLabel {
|
||||
display: inline-block;
|
||||
transition: all .2s ease-out;
|
||||
margin-bottom: .25em;
|
||||
transition: all 0.2s ease-out;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
|
||||
.emby-textarea + .fieldDescription {
|
||||
margin-top: .25em;
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,10 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: visible;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
flex-direction: row-reverse;
|
||||
justify-content: flex-end;
|
||||
|
|
@ -24,6 +28,9 @@
|
|||
margin: 0;
|
||||
padding: 0;
|
||||
opacity: 0;
|
||||
-ms-appearance: none;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
border: none;
|
||||
}
|
||||
|
|
@ -34,7 +41,7 @@
|
|||
}
|
||||
|
||||
.mdl-switch__track {
|
||||
background: rgba(128,128,128, 0.5);
|
||||
background: rgba(128, 128, 128, 0.5);
|
||||
height: 1em;
|
||||
border-radius: 1em;
|
||||
cursor: pointer;
|
||||
|
|
@ -45,7 +52,7 @@
|
|||
}
|
||||
|
||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__track {
|
||||
background: rgba(0,0,0, 0.12);
|
||||
background: rgba(0, 0, 0, 0.12);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -53,7 +60,7 @@
|
|||
background: #999;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: -.25em;
|
||||
top: -0.25em;
|
||||
height: 1.44em;
|
||||
width: 1.44em;
|
||||
border-radius: 50%;
|
||||
|
|
@ -70,11 +77,11 @@
|
|||
.mdl-switch__input:checked + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: #00a4dc;
|
||||
left: 1.466em;
|
||||
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px .56em 0 rgba(0, 0, 0, 0.12);
|
||||
box-shadow: 0 3px 0.28em 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 0.56em 0 rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.mdl-switch__input[disabled] + .mdl-switch__label + .mdl-switch__trackContainer > .mdl-switch__thumb {
|
||||
background: rgb(189,189,189);
|
||||
background: rgb(189, 189, 189);
|
||||
cursor: auto;
|
||||
}
|
||||
|
||||
|
|
@ -82,17 +89,18 @@
|
|||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: .6em;
|
||||
height: .6em;
|
||||
width: 0.6em;
|
||||
height: 0.6em;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.mdl-switch__input:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, .05);
|
||||
box-shadow: 0 0 0 1.39em rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.mdl-switch__input:checked:focus + .mdl-switch__label + .mdl-switch__trackContainer .mdl-switch__focus-helper {
|
||||
|
|
@ -105,10 +113,10 @@
|
|||
margin: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-left: .7em;
|
||||
margin-left: 0.7em;
|
||||
}
|
||||
|
||||
.mdl-switch__input[disabled] .mdl-switch__label {
|
||||
color: rgb(189,189,189);
|
||||
color: rgb(189, 189, 189);
|
||||
cursor: auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue