Revert vendor prefix removal

src/components/cardbuilder/card.css

@@ -18,6 +18,7 @@ button {
     padding: 0;
     display: block;
     color: inherit !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     cursor: pointer;
     contain: layout style;
@@ -79,9 +80,10 @@ button {
     margin: 0.6em;
     transition: none;
     border: 0 solid transparent;
+    /* These both are needed in case cardBox is a button */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
-    contain: layout;
-    contain: style;
+    contain: layout style;
 }
 
 .card.show-focus:not(.show-animation) .cardBox {
@@ -146,6 +148,7 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -179,6 +182,7 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -342,6 +346,7 @@ button {
     border: 0 !important;
     padding: 0 !important;
     cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     color: inherit;
     vertical-align: middle;

src/components/dialogHelper/dialoghelper.css

@@ -16,6 +16,7 @@
 .dialog {
     margin: 0;
     border-radius: .2em;
+    -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;

src/components/filterdialog/style.css

@@ -5,6 +5,7 @@
     margin-top: 0 !important;
     margin-bottom: 0 !important;
     margin-right: 0 !important;
+    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
     max-height: none !important;
     max-width: none !important

src/components/homesections/homesections.css

@@ -13,11 +13,13 @@
 .homeLibraryIcon {
     margin-left: .5em;
     margin-right: .5em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
 .homeLibraryText {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }

src/components/htmlvideoplayer/style.css

@@ -42,6 +42,7 @@ video::-webkit-media-controls {
 .htmlvideoplayer::cue {
     background-color: transparent;
     text-shadow: 0.14em 0.14em 0.14em rgba(0, 0, 0, 1);
+    -webkit-font-smoothing: antialiased;
     font-family: inherit;
 }
 

src/components/images/style.css

@@ -18,9 +18,21 @@
 
 .lazy-image-fadein {
     opacity: 0;
+    -webkit-animation-duration: .8s;
+    -moz-animation-duration: .8s;
+    -o-animation-duration: .8s;
     animation-duration: .8s;
+    -webkit-animation-name: popInAnimation;
+    -moz-animation-name: popInAnimation;
+    -o-animation-name: popInAnimation;
     animation-name: popInAnimation;
+    -webkit-animation-fill-mode: forwards;
+    -moz-animation-fill-mode: forwards;
+    -o-animation-fill-mode: forwards;
     animation-fill-mode: forwards;
+    -webkit-animation-timing-function: cubic-bezier(0,0,.5,1);
+    -moz-animation-timing-function: cubic-bezier(0,0,.5,1);
+    -o-animation-timing-function: cubic-bezier(0,0,.5,1);
     animation-timing-function: cubic-bezier(0,0,.5,1);
 }
 

src/components/indicators/indicators.css

@@ -14,6 +14,7 @@
 
 .indicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -42,6 +43,7 @@
 
 .countIndicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -53,6 +55,7 @@
 
 .playedIndicator {
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -64,6 +67,7 @@
 .videoIndicator {
     background: #444;
     border-radius: 100em;
+    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;

src/components/loading/loading.css

@@ -7,11 +7,20 @@
 
 .mdlSpinnerActive {
     display: inline-block;
+    -webkit-animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }
 
+@-webkit-keyframes mdl-spinner__container-rotate {
+    to {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+
 @keyframes mdl-spinner__container-rotate {
     to {
+        -webkit-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }
@@ -28,6 +37,7 @@
 }
 
 .mdl-spinner__layer-1-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-1-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -36,6 +46,7 @@
 }
 
 .mdl-spinner__layer-2-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-2-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -44,6 +55,7 @@
 }
 
 .mdl-spinner__layer-3-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-3-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
@@ -52,39 +64,90 @@
 }
 
 .mdl-spinner__layer-4-active {
+    -webkit-animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, mdl-spinner__layer-4-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdl-spinner__fill-unfill-rotate {
+@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
     12.5% {
+        -webkit-transform: rotate(135deg);
         transform: rotate(135deg);
     }
 
     25% {
+        -webkit-transform: rotate(270deg);
         transform: rotate(270deg);
     }
 
     37.5% {
+        -webkit-transform: rotate(405deg);
         transform: rotate(405deg);
     }
 
     50% {
+        -webkit-transform: rotate(540deg);
         transform: rotate(540deg);
     }
 
     62.5% {
+        -webkit-transform: rotate(675deg);
         transform: rotate(675deg);
     }
 
     75% {
+        -webkit-transform: rotate(810deg);
         transform: rotate(810deg);
     }
 
     87.5% {
+        -webkit-transform: rotate(945deg);
         transform: rotate(945deg);
     }
 
     to {
+        -webkit-transform: rotate(1080deg);
+        transform: rotate(1080deg);
+    }
+}
+
+@keyframes mdl-spinner__fill-unfill-rotate {
+    12.5% {
+        -webkit-transform: rotate(135deg);
+        transform: rotate(135deg);
+    }
+
+    25% {
+        -webkit-transform: rotate(270deg);
+        transform: rotate(270deg);
+    }
+
+    37.5% {
+        -webkit-transform: rotate(405deg);
+        transform: rotate(405deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(540deg);
+        transform: rotate(540deg);
+    }
+
+    62.5% {
+        -webkit-transform: rotate(675deg);
+        transform: rotate(675deg);
+    }
+
+    75% {
+        -webkit-transform: rotate(810deg);
+        transform: rotate(810deg);
+    }
+
+    87.5% {
+        -webkit-transform: rotate(945deg);
+        transform: rotate(945deg);
+    }
+
+    to {
+        -webkit-transform: rotate(1080deg);
         transform: rotate(1080deg);
     }
 }
@@ -98,6 +161,32 @@
 * - https://github.com/Polymer/paper-spinner/issues/9
 * - https://code.google.com/p/chromium/issues/detail?id=436255
 */
+@-webkit-keyframes mdl-spinner__layer-1-fade-in-out {
+    from {
+        opacity: 0.99;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    26% {
+        opacity: 0;
+    }
+
+    89% {
+        opacity: 0;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0.99;
+    }
+}
+
 @keyframes mdl-spinner__layer-1-fade-in-out {
     from {
         opacity: 0.99;
@@ -124,6 +213,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-2-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    15% {
+        opacity: 0;
+    }
+
+    25% {
+        opacity: 0.99;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    51% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-2-fade-in-out {
     from {
         opacity: 0;
@@ -146,6 +257,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-3-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    40% {
+        opacity: 0;
+    }
+
+    50% {
+        opacity: 0.99;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    76% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-3-fade-in-out {
     from {
         opacity: 0;
@@ -168,6 +301,28 @@
     }
 }
 
+@-webkit-keyframes mdl-spinner__layer-4-fade-in-out {
+    from {
+        opacity: 0;
+    }
+
+    65% {
+        opacity: 0;
+    }
+
+    75% {
+        opacity: 0.99;
+    }
+
+    90% {
+        opacity: 0.99;
+    }
+
+    100% {
+        opacity: 0;
+    }
+}
+
 @keyframes mdl-spinner__layer-4-fade-in-out {
     from {
         opacity: 0;
@@ -211,6 +366,7 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
+    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -221,47 +377,91 @@
 
 .mdl-spinner__circleLeft {
     border-right-color: transparent !important;
+    -webkit-transform: rotate(129deg);
     transform: rotate(129deg);
 }
 
 .mdl-spinner__circleLeft-active {
+    -webkit-animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
 .mdl-spinner__circleRight {
     left: -100%;
     border-left-color: transparent !important;
+    -webkit-transform: rotate(-129deg);
     transform: rotate(-129deg);
 }
 
 .mdl-spinner__circleRight-active {
+    -webkit-animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
     animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@keyframes mdl-spinner__left-spin {
+@-webkit-keyframes mdl-spinner__left-spin {
     from {
+        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 
     50% {
+        -webkit-transform: rotate(-5deg);
         transform: rotate(-5deg);
     }
 
     to {
+        -webkit-transform: rotate(130deg);
         transform: rotate(130deg);
     }
 }
 
+@keyframes mdl-spinner__left-spin {
+    from {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(-5deg);
+        transform: rotate(-5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(130deg);
+        transform: rotate(130deg);
+    }
+}
+
+@-webkit-keyframes mdl-spinner__right-spin {
+    from {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+
+    50% {
+        -webkit-transform: rotate(5deg);
+        transform: rotate(5deg);
+    }
+
+    to {
+        -webkit-transform: rotate(-130deg);
+        transform: rotate(-130deg);
+    }
+}
+
 @keyframes mdl-spinner__right-spin {
     from {
+        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 
     50% {
+        -webkit-transform: rotate(5deg);
         transform: rotate(5deg);
     }
 
     to {
+        -webkit-transform: rotate(-130deg);
         transform: rotate(-130deg);
     }
 }

src/components/navdrawer/navdrawer.css

@@ -9,20 +9,29 @@
 .touch-menu-la {
     background-color: #FFF;
     will-change: transform;
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-transition: -webkit-transform ease-out 40ms, left ease-out 260ms;
+    -o-transition: transform ease-out 40ms, left ease-out 260ms;
     transition: transform ease-out 40ms, left ease-out 260ms;
     z-index: 1099
 }
 
 .touch-menu-la.transition {
+    -webkit-transition: -webkit-transform ease-out 240ms, left ease-out 260ms;
+    -o-transition: transform ease-out 240ms, left ease-out 260ms;
     transition: transform ease-out 240ms, left ease-out 260ms
 }
 
 .drawer-open {
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
     box-shadow: 2px 0 12px rgba(0, 0, 0, .4)
 }
 
 .scrollContainer {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -32,6 +41,8 @@
     background-color: #000;
     opacity: 0;
     z-index: 1098;
+    -webkit-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
+    -o-transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     transition: opacity ease-in-out .38s, visibility ease-in-out .38s;
     will-change: opacity;
     background-color: rgba(0, 0, 0, .3)

src/components/remotecontrol/remotecontrol.css

@@ -1,5 +1,10 @@
 .nowPlayingInfoContainer {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: row;
     flex-direction: row
 }
 
@@ -36,20 +41,27 @@
 }
 
 .nowPlayingInfoButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
 .nowPlayingInfoControls,
 .nowPlayingTime {
-    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -60,9 +72,16 @@
 }
 
 .nowPlayingInfoControls {
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     display: flex;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal;
+    -webkit-flex-direction: column;
     flex-direction: column;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
@@ -71,15 +90,25 @@
     left: 0;
     right: 0;
     width: 100%;
+    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .1em solid #222;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none
 }
 
 @media all and (orientation:portrait) and (max-width:50em) {
     .nowPlayingInfoContainer {
+        -webkit-box-orient: vertical !important;
+        -webkit-box-direction: normal !important;
+        -webkit-flex-direction: column !important;
         flex-direction: column !important;
+        -webkit-box-align: center;
+        -webkit-align-items: center;
         align-items: center
     }
 
@@ -93,6 +122,8 @@
     }
 
     .nowPlayingInfoButtons {
+        -webkit-box-pack: center;
+        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -120,20 +151,33 @@
 
 .nowPlayingTime {
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
     margin: 0 1em
 }
 
 .nowPlayingSecondaryButtons {
+    display: -webkit-box;
+    display: -webkit-flex;
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 
 @media all and (min-width:50em) {
     .nowPlayingSecondaryButtons {
+        -webkit-box-flex: 1;
+        -webkit-flex-grow: 1;
         flex-grow: 1;
+        -webkit-box-pack: end;
+        -webkit-justify-content: flex-end;
         justify-content: flex-end
     }
 }
@@ -150,11 +194,13 @@
 
 .smallBackdropPosterItem .cardOverlayInner>div {
     white-space: nowrap;
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
 
 .playlistIndexIndicatorImage {
+    -webkit-background-size: initial initial !important;
     background-size: initial !important;
     background-image: url(assets/img/equalizer.gif) !important;
 }

src/components/slideshow/style.css

@@ -41,6 +41,9 @@
     height: auto;
     max-width: 100%;
     max-height: 100%;
+    -ms-transform: translate(-50%, -50%);
+    -webkit-transform: translate(-50%, -50%);
+    -moz-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     position: absolute;
     left: 50%;

src/components/subtitlesync/subtitlesync.css

@@ -40,6 +40,8 @@
     margin-right: 1%;
     top: 2.5em;
     height: 1.4em;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     border-radius: .3em;
     z-index: 1; 

src/components/upnextdialog/upnextdialog.css

@@ -11,6 +11,7 @@
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
+    -webkit-touch-callout: none;
 }
 
 .upNextDialog-hidden {
@@ -66,4 +67,8 @@
     border: 0;
     user-drag: none;
     user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none;
 }