From d08cd4d1cd087fdcf02c9c87928ab2a8676edcfb Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 30 Dec 2019 12:09:48 +0100
Subject: [PATCH 1/8] Remove vendor prefixes in CSS

---
 src/components/cardbuilder/card.css           |  6 --
 src/components/dialogHelper/dialoghelper.css  |  1 -
 src/components/emby-button/emby-button.css    |  8 --
 .../emby-checkbox/emby-checkbox.css           |  3 -
 src/components/emby-input/emby-input.css      |  3 -
 src/components/emby-radio/emby-radio.css      |  6 --
 src/components/emby-select/emby-select.css    |  5 -
 src/components/emby-slider/emby-slider.css    | 13 ---
 .../emby-textarea/emby-textarea.css           |  1 -
 src/components/emby-toggle/emby-toggle.css    |  8 --
 src/components/filterdialog/style.css         |  1 -
 src/components/homesections/homesections.css  |  2 -
 src/components/htmlvideoplayer/style.css      |  1 -
 src/components/images/style.css               | 12 ---
 src/components/indicators/indicators.css      |  4 -
 src/components/loading/loading.css            | 40 --------
 src/components/navdrawer/navdrawer.css        | 11 ---
 .../remotecontrol/remotecontrol.css           | 49 +---------
 src/components/slideshow/style.css            |  3 -
 src/components/subtitlesync/subtitlesync.css  |  2 -
 src/components/themes/appletv/theme.css       |  6 --
 src/components/themes/blueradiance/theme.css  |  7 --
 src/components/themes/dark/theme.css          |  6 --
 src/components/themes/emby/theme.css          |  6 --
 src/components/themes/light/theme.css         |  6 --
 src/components/themes/purple-haze/theme.css   |  7 --
 src/components/themes/wmc/theme.css           |  7 --
 src/components/upnextdialog/upnextdialog.css  |  5 -
 src/css/dashboard.css                         | 35 -------
 src/css/fonts.css                             |  1 -
 src/css/librarybrowser.css                    | 95 -------------------
 src/css/material-icons/style.css              |  2 -
 src/css/metadataeditor.css                    |  4 -
 src/css/scrollstyles.css                      |  7 --
 src/css/site.css                              |  8 +-
 src/css/videoosd.css                          | 61 +-----------
 36 files changed, 7 insertions(+), 435 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index ec19c83f00..a9cf9a0b2a 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -4,7 +4,6 @@ button::-moz-focus-inner {
 }
 
 button {
-    -webkit-border-fit: border !important;
 }
 
 .card {
@@ -18,7 +17,6 @@ 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;
@@ -81,7 +79,6 @@ button {
     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 style;
 }
@@ -148,7 +145,6 @@ button {
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -182,7 +178,6 @@ button {
     margin: 0 !important;
     /* Needed in safari */
     height: 100%;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     outline: none !important;
     contain: strict;
 }
@@ -346,7 +341,6 @@ 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;
diff --git a/src/components/dialogHelper/dialoghelper.css b/src/components/dialogHelper/dialoghelper.css
index 2cc20b5ff2..aa4145e016 100644
--- a/src/components/dialogHelper/dialoghelper.css
+++ b/src/components/dialogHelper/dialoghelper.css
@@ -16,7 +16,6 @@
 .dialog {
     margin: 0;
     border-radius: .2em;
-    -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;
diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css
index 0273de9d7d..25141eaa21 100644
--- a/src/components/emby-button/emby-button.css
+++ b/src/components/emby-button/emby-button.css
@@ -9,9 +9,6 @@
     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;
@@ -25,7 +22,6 @@
     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;
@@ -99,9 +95,6 @@
     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;
@@ -119,7 +112,6 @@
     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;
diff --git a/src/components/emby-checkbox/emby-checkbox.css b/src/components/emby-checkbox/emby-checkbox.css
index 5641893f63..319565b0ef 100644
--- a/src/components/emby-checkbox/emby-checkbox.css
+++ b/src/components/emby-checkbox/emby-checkbox.css
@@ -38,9 +38,6 @@
     margin: 0;
     padding: 0;
     opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
diff --git a/src/components/emby-input/emby-input.css b/src/components/emby-input/emby-input.css
index d888eb570d..57a46ec7b6 100644
--- a/src/components/emby-input/emby-input.css
+++ b/src/components/emby-input/emby-input.css
@@ -10,10 +10,8 @@
     font-weight: inherit;
     padding: .4em .25em;
     /* 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%;
 }
 
@@ -35,6 +33,5 @@
 }
 
 .emby-input-iconbutton {
-    -webkit-align-self: flex-end;
     align-self: flex-end;
 }
diff --git a/src/components/emby-radio/emby-radio.css b/src/components/emby-radio/emby-radio.css
index 25fdc5b933..0db9641b87 100644
--- a/src/components/emby-radio/emby-radio.css
+++ b/src/components/emby-radio/emby-radio.css
@@ -27,9 +27,6 @@
     margin: 0;
     padding: 0;
     opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -70,17 +67,14 @@
     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);
 }
 
diff --git a/src/components/emby-select/emby-select.css b/src/components/emby-select/emby-select.css
index 76b28c4208..4aff8cab92 100644
--- a/src/components/emby-select/emby-select.css
+++ b/src/components/emby-select/emby-select.css
@@ -12,7 +12,6 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 
@@ -20,8 +19,6 @@
         background: none !important;
         border-color: transparent !important;
         color: inherit !important;
-        -webkit-appearance: none;
-        -moz-appearance: none;
         appearance: none;
     }
 
@@ -41,7 +38,6 @@
 
 .emby-select-focusscale {
     transition: transform 180ms ease-out !important;
-    -webkit-transform-origin: center center;
     transform-origin: center center;
 }
 
@@ -77,7 +73,6 @@
 }
 
 .emby-select-withcolor {
-    -webkit-appearance: none;
     appearance: none;
     border-radius: .2em;
 }
diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css
index b173f5c511..20f5ce39f3 100644
--- a/src/components/emby-slider/emby-slider.css
+++ b/src/components/emby-slider/emby-slider.css
@@ -1,31 +1,21 @@
 _:-ms-input-placeholder {
-    -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*/
     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;
 }
 
@@ -69,7 +59,6 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
         width: 1.2em;
         height: 1.2em;
         box-sizing: border-box;
@@ -96,7 +85,6 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-moz-range-thumb {
-    -moz-appearance: none;
     width: 0.9em;
     height: 0.9em;
     box-sizing: border-box;
@@ -108,7 +96,6 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-ms-thumb {
-    -webkit-appearance: none;
     width: 1.8em;
     height: 1.8em;
     box-sizing: border-box;
diff --git a/src/components/emby-textarea/emby-textarea.css b/src/components/emby-textarea/emby-textarea.css
index 6ac8262236..0dab1b1ece 100644
--- a/src/components/emby-textarea/emby-textarea.css
+++ b/src/components/emby-textarea/emby-textarea.css
@@ -13,7 +13,6 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 
diff --git a/src/components/emby-toggle/emby-toggle.css b/src/components/emby-toggle/emby-toggle.css
index fb91419cbc..3b14b8cf09 100644
--- a/src/components/emby-toggle/emby-toggle.css
+++ b/src/components/emby-toggle/emby-toggle.css
@@ -9,10 +9,6 @@
     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;
@@ -28,9 +24,6 @@
     margin: 0;
     padding: 0;
     opacity: 0;
-    -ms-appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -89,7 +82,6 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     display: inline-block;
     box-sizing: border-box;
diff --git a/src/components/filterdialog/style.css b/src/components/filterdialog/style.css
index 5daf6eb38c..69a82d2408 100644
--- a/src/components/filterdialog/style.css
+++ b/src/components/filterdialog/style.css
@@ -5,7 +5,6 @@
     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
diff --git a/src/components/homesections/homesections.css b/src/components/homesections/homesections.css
index 45df67c482..5df2440f82 100644
--- a/src/components/homesections/homesections.css
+++ b/src/components/homesections/homesections.css
@@ -13,13 +13,11 @@
 .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
 }
diff --git a/src/components/htmlvideoplayer/style.css b/src/components/htmlvideoplayer/style.css
index 9550f2c873..ed7b6d126e 100644
--- a/src/components/htmlvideoplayer/style.css
+++ b/src/components/htmlvideoplayer/style.css
@@ -38,7 +38,6 @@ 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;
 }
 
diff --git a/src/components/images/style.css b/src/components/images/style.css
index 5cf39c1e4b..06fbf1f9cf 100644
--- a/src/components/images/style.css
+++ b/src/components/images/style.css
@@ -18,21 +18,9 @@
 
 .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);
 }
 
diff --git a/src/components/indicators/indicators.css b/src/components/indicators/indicators.css
index c2d089e1af..b0d0119c05 100644
--- a/src/components/indicators/indicators.css
+++ b/src/components/indicators/indicators.css
@@ -14,7 +14,6 @@
 
 .indicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -43,7 +42,6 @@
 
 .countIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -55,7 +53,6 @@
 
 .playedIndicator {
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -67,7 +64,6 @@
 .videoIndicator {
     background: #444;
     border-radius: 100em;
-    display: -webkit-flex;
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css
index 6d8472fc15..c98d071e3d 100644
--- a/src/components/loading/loading.css
+++ b/src/components/loading/loading.css
@@ -7,20 +7,17 @@
 
 .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);
     }
 }
@@ -37,7 +34,6 @@
 }
 
 .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;
 }
 
@@ -46,7 +42,6 @@
 }
 
 .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;
 }
 
@@ -55,7 +50,6 @@
 }
 
 .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;
 }
 
@@ -64,90 +58,73 @@
 }
 
 .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;
 }
 
 @-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);
     }
 }
@@ -366,7 +343,6 @@
     border-color: inherit;
     border-bottom-color: transparent !important;
     border-radius: 50%;
-    -webkit-animation: none;
     animation: none;
     position: absolute;
     top: 0;
@@ -377,91 +353,75 @@
 
 .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;
 }
 
 @-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);
     }
 }
diff --git a/src/components/navdrawer/navdrawer.css b/src/components/navdrawer/navdrawer.css
index f774c6919f..5d63e150d1 100644
--- a/src/components/navdrawer/navdrawer.css
+++ b/src/components/navdrawer/navdrawer.css
@@ -9,29 +9,20 @@
 .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
 }
 
@@ -41,8 +32,6 @@
     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)
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 0b6a2dbbc5..bdaaeef594 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -1,10 +1,5 @@
 .nowPlayingInfoContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row
 }
 
@@ -21,27 +16,19 @@
 }
 
 .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: -webkit-box;
-    display: -webkit-flex
 }
 
 .nowPlayingPageImageContainer {
     width: 20%;
     margin-right: .25em;
     position: relative;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -52,16 +39,9 @@
 }
 
 .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
 }
 
@@ -70,25 +50,15 @@
     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
+    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
     }
 
@@ -102,8 +72,6 @@
     }
 
     .nowPlayingInfoButtons {
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -131,33 +99,20 @@
 
 .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
     }
 }
@@ -174,13 +129,11 @@
 
 .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(../../img/equalizer.gif) !important;
 }
diff --git a/src/components/slideshow/style.css b/src/components/slideshow/style.css
index 43211a8fef..1167a972c8 100644
--- a/src/components/slideshow/style.css
+++ b/src/components/slideshow/style.css
@@ -41,9 +41,6 @@
     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%;
diff --git a/src/components/subtitlesync/subtitlesync.css b/src/components/subtitlesync/subtitlesync.css
index 112e624722..38a15be901 100644
--- a/src/components/subtitlesync/subtitlesync.css
+++ b/src/components/subtitlesync/subtitlesync.css
@@ -40,8 +40,6 @@
     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; 
diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css
index 128594bc72..fc102654c7 100644
--- a/src/components/themes/appletv/theme.css
+++ b/src/components/themes/appletv/theme.css
@@ -35,13 +35,11 @@ html {
         background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
         background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
         background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        -webkit-backdrop-filter: blur(1.5em);
         backdrop-filter: blur(1.5em)
     }
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important
 }
 
@@ -56,7 +54,6 @@ html {
 .backgroundContainer,
 .dialog {
     background: #D5E9F2;
-    -webkit-background-size: 100% 100%;
     background-size: 100% 100%
 }
 
@@ -209,7 +206,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -275,7 +271,6 @@ html {
     color: inherit;
     background: rgba(255, 255, 255, .9);
     border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -434,7 +429,6 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css
index f450404bea..8764136fa4 100644
--- a/src/components/themes/blueradiance/theme.css
+++ b/src/components/themes/blueradiance/theme.css
@@ -24,7 +24,6 @@ html {
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
@@ -44,7 +43,6 @@ html {
 
 .backgroundContainer {
     background: url(bg.jpg) center top no-repeat #033361;
-    -webkit-background-size: cover;
     background-size: cover
 }
 
@@ -184,7 +182,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -254,7 +251,6 @@ html {
     color: inherit;
     background: rgba(0, 0, 0, .5);
     border: .07em solid transparent;
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -419,7 +415,6 @@ html {
     color: #ddd;
     background: #111;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -451,7 +446,6 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -460,7 +454,6 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index b4d4bcda4b..e5d0132e04 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -20,7 +20,6 @@ html {
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -165,7 +164,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -235,7 +233,6 @@ html {
     color: inherit;
     background: #292929;
     border: .07em solid #292929;
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -396,7 +393,6 @@ html {
     color: #ddd;
     background: #111;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -428,7 +424,6 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -437,7 +432,6 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index 7206150235..ccb2b91a5a 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -20,7 +20,6 @@ html {
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -165,7 +164,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -235,7 +233,6 @@ html {
     color: inherit;
     background: #292929;
     border: .07em solid #292929;
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -396,7 +393,6 @@ html {
     color: #ddd;
     background: #111;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -428,7 +424,6 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -437,7 +432,6 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index 6da511dfd2..0fef58a17f 100644
--- a/src/components/themes/light/theme.css
+++ b/src/components/themes/light/theme.css
@@ -23,17 +23,14 @@ html {
     background-color: #303030;
     color: #ccc;
     color: rgba(255, 255, 255, .87);
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
 .osdHeader {
-    -webkit-box-shadow: none !important;
     box-shadow: none !important
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -192,7 +189,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -257,7 +253,6 @@ html {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -415,7 +410,6 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
index 566af827ee..9da13575db 100644
--- a/src/components/themes/purple-haze/theme.css
+++ b/src/components/themes/purple-haze/theme.css
@@ -24,7 +24,6 @@ html {
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
@@ -44,7 +43,6 @@ html {
 
 .backgroundContainer {
     background: url(bg.jpg) center top no-repeat #030322;
-    -webkit-background-size: cover;
     background-size: cover
 }
 
@@ -272,7 +270,6 @@ a[data-role=button] {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -342,7 +339,6 @@ a[data-role=button] {
     color: inherit;
     background: rgba(0, 0, 0, .5);
     border: .07em solid transparent;
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -512,7 +508,6 @@ a[data-role=button] {
     color: #0e0f2d;
     background: #dbe6ff;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -550,7 +545,6 @@ a[data-role=button] {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -559,7 +553,6 @@ a[data-role=button] {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index a19eeb93a2..6555a22f36 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -32,13 +32,11 @@ html {
 @supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
     .skinHeader-blurred {
         background: rgba(20, 20, 20, .7);
-        -webkit-backdrop-filter: blur(1.5em);
         backdrop-filter: blur(1.5em)
     }
 }
 
 .skinHeader.semiTransparent {
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
     background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
@@ -188,7 +186,6 @@ html {
 @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
-        -webkit-backdrop-filter: blur(20px);
         backdrop-filter: blur(20px)
     }
 }
@@ -255,7 +252,6 @@ html {
     color: inherit;
     background: rgba(255, 255, 255, .2);
     border: .07em solid rgba(255, 255, 255, .135);
-    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -418,7 +414,6 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -450,7 +445,6 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -459,7 +453,6 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    -webkit-border-radius: 2px;
     background: center no-repeat rgba(255, 255, 255, .7)
 }
 
diff --git a/src/components/upnextdialog/upnextdialog.css b/src/components/upnextdialog/upnextdialog.css
index 336a90d58e..784c79cbb7 100644
--- a/src/components/upnextdialog/upnextdialog.css
+++ b/src/components/upnextdialog/upnextdialog.css
@@ -11,7 +11,6 @@
     background-color: rgba(0, 0, 0, 0.7);
     color: #fff;
     user-select: none;
-    -webkit-touch-callout: none;
 }
 
 .upNextDialog-hidden {
@@ -67,8 +66,4 @@
     border: 0;
     user-drag: none;
     user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none;
 }
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 1c69dfccb4..6c916a116a 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -1,7 +1,5 @@
 .dashboardColumn,
 .dashboardSections {
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal
 }
 
 .dashboardFooter {
@@ -15,8 +13,6 @@
 
 progress {
     appearance: none;
-    -moz-appearance: none;
-    -webkit-appearance: none;
     margin: 0;
     background: #ccc !important
 }
@@ -76,23 +72,17 @@ progress[aria-valuenow]:before {
 div[data-role=controlgroup] a[data-role=button] {
     display: inline-block !important;
     margin: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important;
-    -webkit-border-radius: 0;
     border-radius: 0
 }
 
 div[data-role=controlgroup] a[data-role=button]:first-child {
-    -webkit-border-bottom-left-radius: .3125em;
     border-bottom-left-radius: .3125em;
-    -webkit-border-top-left-radius: .3125em;
     border-top-left-radius: .3125em
 }
 
 div[data-role=controlgroup] a[data-role=button]:last-child {
-    -webkit-border-bottom-right-radius: .3125em;
     border-bottom-right-radius: .3125em;
-    -webkit-border-top-right-radius: .3125em;
     border-top-right-radius: .3125em
 }
 
@@ -146,23 +136,14 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSections {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column
 }
 
 .dashboardColumn {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-direction: column;
     flex-direction: column;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -171,7 +152,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSection {
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     margin: 0 0 2em
 }
@@ -187,11 +167,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 
 @media all and (min-width:70em) {
     .dashboardSections {
-        -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
-        -webkit-box-orient: horizontal;
-        -webkit-box-direction: normal;
-        -webkit-flex-direction: row;
         flex-direction: row
     }
 
@@ -296,7 +272,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionNowPlayingContent {
-    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -395,7 +370,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .disabledUser {
-    -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
@@ -416,9 +390,6 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 a[data-role=button] {
-    -webkit-font-smoothing: antialiased;
-    -webkit-user-select: none;
-    -webkit-background-clip: padding-box;
     cursor: pointer !important;
     font-family: inherit !important;
     font-weight: 500 !important;
@@ -432,35 +403,29 @@ a[data-role=button] {
 
 @-webkit-keyframes rotating {
     from {
-        -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 
     to {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }
 
 @keyframes rotating {
     from {
-        -webkit-transform: rotate(0);
         transform: rotate(0)
     }
 
     to {
-        -webkit-transform: rotate(360deg);
         transform: rotate(360deg)
     }
 }
 
 .rotatingCircle {
-    -webkit-animation: rotating 2s linear infinite;
     animation: rotating 2s linear infinite
 }
 
 .pluginPreviewImg {
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
diff --git a/src/css/fonts.css b/src/css/fonts.css
index 12f1eaf4b7..da5515fc1e 100644
--- a/src/css/fonts.css
+++ b/src/css/fonts.css
@@ -4,7 +4,6 @@ html {
 
 html {
     font-size: 93%;
-    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }
 
diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index 8982ba88b5..0df248a075 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -15,7 +15,6 @@
 .headerSelectedPlayer,
 .itemMiscInfo,
 .navMenuOptionText {
-    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
@@ -48,8 +47,6 @@
     z-index: 1;
     margin: 0 !important;
     top: 6.9em !important;
-    -webkit-transition: -webkit-transform .2s ease-out;
-    -o-transition: transform .2s ease-out;
     transition: transform .2s ease-out
 }
 
@@ -58,17 +55,14 @@
 }
 
 .headerUserImage {
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center center;
-    -webkit-border-radius: 100em;
     border-radius: 100em;
     display: inline-block
 }
 
 .headerUserButtonRound div {
-    -webkit-border-radius: 100em;
     border-radius: 100em;
     background-size: cover;
     background-repeat: no-repeat;
@@ -76,7 +70,6 @@
 }
 
 .headerButton {
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -90,34 +83,23 @@
 }
 
 .pageTitle {
-    display: -webkit-inline-box;
-    display: -webkit-inline-flex;
     display: inline-flex;
     margin: 0 0 0 .5em;
     height: 1.7em;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-shrink: 1;
     flex-shrink: 1
 }
 
 .headerLeft,
 .skinHeader {
-    display: -webkit-box;
-    display: -webkit-flex
 }
 
 .detailButton-mobile,
 .skinHeader {
-    -webkit-flex-direction: column;
-    -webkit-box-orient: vertical;
-    -webkit-box-direction: normal
 }
 
 .pageTitleWithLogo {
     background-position: left center;
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     width: 13.2em
@@ -137,7 +119,6 @@
 
 .headerLeft,
 .headerRight {
-    -webkit-box-align: center
 }
 
 .hiddenViewMenuBar .skinHeader {
@@ -150,10 +131,7 @@
 
 .headerLeft {
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     overflow: hidden
 }
@@ -163,13 +141,8 @@
 }
 
 .headerRight {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-box-pack: end;
-    -webkit-justify-content: flex-end;
     justify-content: flex-end
 }
 
@@ -178,27 +151,19 @@
 }
 
 .navMenuOption {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: flex !important;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     text-decoration: none;
     color: inherit;
     padding: .9em 0 .9em 2.4em !important;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     font-weight: 400 !important;
     margin: 0 !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important
 }
 
 .navMenuOptionIcon {
     margin-right: 1.2em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -212,8 +177,6 @@
 }
 
 .dashboardDocument .skinBody {
-    -webkit-transition: left ease-in-out .3s, padding ease-in-out .3s;
-    -o-transition: left ease-in-out .3s, padding ease-in-out .3s;
     transition: left ease-in-out .3s, padding ease-in-out .3s;
     position: absolute;
     top: 0;
@@ -242,9 +205,7 @@
         z-index: inherit !important;
         left: 0 !important;
         top: 0 !important;
-        -webkit-transform: none !important;
         transform: none !important;
-        -webkit-box-shadow: none !important;
         box-shadow: none !important;
         width: 20.205em !important;
         font-size: 94%
@@ -281,14 +242,9 @@
     }
 
     .headerTabs {
-        -webkit-align-self: center;
         align-self: center;
         width: auto;
-        -webkit-box-align: center;
-        -webkit-align-items: center;
         align-items: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center;
         margin-top: -3.34em;
         position: relative;
@@ -346,8 +302,6 @@
 }
 
 .flexPageTabContent.is-active {
-    display: -webkit-box !important;
-    display: -webkit-flex !important;
     display: flex !important
 }
 
@@ -363,7 +317,6 @@
     margin: 1.5em 0;
     background: #222;
     padding: .8em .8em .8em 3em;
-    -webkit-border-radius: .3em;
     border-radius: .3em;
     position: relative
 }
@@ -422,7 +375,6 @@
 }
 
 .itemBackdrop {
-    -webkit-background-size: cover;
     background-size: cover;
     height: 50vh;
     position: relative
@@ -451,15 +403,12 @@
 .detailImageContainer {
     margin-right: 2em;
     width: 280px;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     margin-left: .6em
 }
 
 .detailPagePrimaryContent {
     position: relative;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -469,7 +418,6 @@
     position: absolute;
     top: 13.5%;
     right: 19.5%;
-    -webkit-background-size: contain;
     background-size: contain
 }
 
@@ -499,7 +447,6 @@
 
 .itemDetailImage {
     width: 100%;
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
     box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
 }
 
@@ -535,8 +482,6 @@
     }
 
     .detailPagePrimaryContainer {
-        display: -webkit-box;
-        display: -webkit-flex;
         display: flex;
         margin-bottom: 3em
     }
@@ -597,8 +542,6 @@
 
 .detailButton-mobile,
 .mainDetailButtons {
-    display: -webkit-box;
-    display: -webkit-flex
 }
 
 .itemName {
@@ -619,10 +562,7 @@
 
 .mainDetailButtons {
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 1em 0
 }
@@ -630,7 +570,6 @@
 .recordingFields button {
     margin-left: 0;
     margin-right: .5em;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -641,11 +580,7 @@
 .detailButton-mobile {
     display: flex;
     flex-direction: column;
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     margin: 0 !important;
     padding: .5em .7em !important
@@ -677,18 +612,9 @@
 }
 
 .detailButton-mobile-content {
-    display: -webkit-box;
-    display: -webkit-flex;
     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;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
@@ -745,21 +671,14 @@
 }
 
 .itemMiscInfo {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
 @media all and (max-width:31.25em) {
     .mobileDetails .itemMiscInfo {
         text-align: center;
-        -webkit-box-pack: center;
-        -webkit-justify-content: center;
         justify-content: center
     }
 
@@ -851,7 +770,6 @@
 }
 
 .btnSyncComplete i {
-    -webkit-border-radius: 100em;
     border-radius: 100em
 }
 
@@ -860,14 +778,9 @@
 }
 
 .mediaInfoIcons {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
     margin: 1em 0;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap
 }
 
@@ -902,7 +815,6 @@
 
 .sectionTitleButton {
     margin-left: 1.5em !important;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -912,22 +824,17 @@
 
 .sectionTitleIconButton {
     margin-left: 1.5em !important;
-    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     font-size: 84% !important;
     padding: .5em !important
 }
 
 .horizontalItemsContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex
 }
 
 .sectionTitleTextButton {
     margin: 0 !important;
-    display: -webkit-inline-box !important;
-    display: -webkit-inline-flex !important;
     display: inline-flex !important;
     color: inherit !important
 }
@@ -999,8 +906,6 @@
 }
 
 .itemsViewSettingsContainer {
-    -webkit-box-pack: center;
-    -webkit-justify-content: center;
     justify-content: center
 }
 
diff --git a/src/css/material-icons/style.css b/src/css/material-icons/style.css
index 2d410b9985..c42c932b17 100644
--- a/src/css/material-icons/style.css
+++ b/src/css/material-icons/style.css
@@ -15,8 +15,6 @@
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
-    -webkit-font-feature-settings: 'liga';
-    -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga" 1;
     line-height: 1;
diff --git a/src/css/metadataeditor.css b/src/css/metadataeditor.css
index 542c7c8f2b..c5de6f3efe 100644
--- a/src/css/metadataeditor.css
+++ b/src/css/metadataeditor.css
@@ -28,17 +28,13 @@
 
 .jstree-wholerow-hovered {
     background: #38c !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important
 }
 
 .jstree-default .jstree-hovered {
     background: 0 0 !important;
-    -webkit-border-radius: 0 !important;
     border-radius: 0 !important;
-    -webkit-box-shadow: none !important;
     box-shadow: none !important;
     color: #fff !important
 }
diff --git a/src/css/scrollstyles.css b/src/css/scrollstyles.css
index aa2f7dafad..2ef07f3e80 100644
--- a/src/css/scrollstyles.css
+++ b/src/css/scrollstyles.css
@@ -1,6 +1,5 @@
 .scrollX {
     overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
     white-space: nowrap;
 }
@@ -10,13 +9,11 @@
 }
 
 .hiddenScrollX, .layout-tv .scrollX {
-    -ms-overflow-style: none;
     /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
     /*overflow: -moz-scrollbars-none;*/
 }
 
 .hiddenScrollX-forced {
-    overflow: -moz-scrollbars-none;
 }
 
 .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
@@ -26,25 +23,21 @@
 
 .scrollY {
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
 }
 
 .smoothScrollY {
     overflow-y: auto;
-    -webkit-overflow-scrolling: touch;
     overflow-x: hidden;
     scroll-behavior: smooth;
 }
 
 .hiddenScrollY, .layout-tv .smoothScrollY {
-    -ms-overflow-style: none;
     /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
     /*overflow: -moz-scrollbars-none;*/
 }
 
 .hiddenScrollY-forced {
-    overflow: -moz-scrollbars-none;
 }
 
 .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
diff --git a/src/css/site.css b/src/css/site.css
index 292fc67454..895944f77f 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -20,18 +20,12 @@ html {
 
 .layout-mobile,
 .layout-tv {
-    -webkit-touch-callout: none;
-    -webkit-user-select: none;
-    -khtml-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none
 }
 
 body {
     overflow-x: hidden;
-    background-color: transparent !important;
-    -webkit-font-smoothing: antialiased
+    background-color: transparent !important
 }
 
 .mainAnimatedPage {
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index f9c4798e97..23c8661192 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -1,8 +1,5 @@
 .chapterThumbTextContainer,
 .videoOsdBottom {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none
 }
 
 .osdPoster img,
@@ -14,13 +11,10 @@
 }
 
 .osdHeader {
-    -webkit-transition: opacity .3s ease-out;
-    -o-transition: opacity .3s ease-out;
     transition: opacity .3s ease-out;
     position: relative;
     z-index: 1;
     background: rgba(0, 0, 0, 0.7) !important;
-    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     color: #eee !important;
 }
@@ -34,17 +28,13 @@
 }
 
 .chapterThumbContainer {
-    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1;
     position: relative
 }
 
 .chapterThumb {
     background-position: center center;
-    -webkit-background-size: contain;
     background-size: contain;
     background-repeat: no-repeat;
     border: 0;
@@ -90,20 +80,12 @@
     position: fixed;
     background-color: rgba(0, 0, 0, 0.7);
     padding: 1%;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-orient: horizontal;
-    -webkit-box-direction: normal;
-    -webkit-flex-direction: row;
     flex-direction: row;
     will-change: opacity;
-    -webkit-transition: opacity 0.3s ease-out;
-    -o-transition: opacity 0.3s ease-out;
     transition: opacity 0.3s ease-out;
     color: #fff;
-    user-select: none;
-    -webkit-touch-callout: none
+    user-select: none
 }
 
 .videoOsdBottom-hidden {
@@ -111,49 +93,33 @@
 }
 
 .osdControls {
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .videoOsdBottom .buttons {
     padding: .25em 0 0;
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center
 }
 
 .osdVolumeSliderContainer {
     width: 9em;
-    -webkit-box-flex: 1;
-    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
 .osdMediaInfo,
 .volumeButtons {
-    display: -webkit-box;
-    display: -webkit-flex;
-    -webkit-box-align: center
 }
 
 .volumeButtons {
     margin: 0 .5em 0 auto;
     display: flex;
-    -webkit-align-items: center;
     align-items: center
 }
 
 .osdTimeText {
     margin-left: 1em;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none
 }
 
@@ -167,15 +133,10 @@
     position: absolute;
     height: auto;
     width: 100%;
-    -webkit-box-shadow: 0 0 1.9vh #000;
     box-shadow: 0 0 1.9vh #000;
     border: .08em solid #222;
     user-drag: none;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-drag: none;
-    -webkit-user-select: none;
-    -ms-user-select: none
+    user-select: none
 }
 
 .osdTitle,
@@ -185,7 +146,6 @@
 
 .osdMediaInfo {
     display: flex;
-    -webkit-align-items: center;
     align-items: center
 }
 
@@ -194,23 +154,14 @@
 }
 
 .osdTextContainer {
-    display: -webkit-box;
-    display: -webkit-flex;
     display: flex;
-    -webkit-box-align: center;
-    -webkit-align-items: center;
     align-items: center;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
     user-select: none;
     margin-bottom: .7em;
     padding-left: .5em
 }
 
 .osdMainTextContainer {
-    -webkit-box-align: baseline;
-    -webkit-align-items: baseline;
     align-items: baseline
 }
 
@@ -218,12 +169,10 @@
     margin-left: auto;
 }
 
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@-moz-keyframes spin { 100% { } }
+@-webkit-keyframes spin { 100% { } }
+@keyframes spin { 100% { transform:rotate(360deg); } }
 .osdMediaStatus .animate {
-    -webkit-animation:spin 4s linear infinite;
-    -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
 }
 

From ecf0ee0c341e3b42aa0906dae3f3352085fe54ea Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 30 Dec 2019 13:38:51 +0100
Subject: [PATCH 2/8] Fix automatic vendor prefix removal

---
 src/components/cardbuilder/card.css         |  3 ++-
 src/components/emby-slider/emby-slider.css  |  4 ++++
 src/components/themes/emby/theme.css        |  2 ++
 src/components/themes/purple-haze/theme.css |  2 ++
 src/components/themes/wmc/theme.css         |  4 +++-
 src/css/dashboard.css                       |  2 ++
 src/css/librarybrowser.css                  |  4 ++++
 src/css/material-icons/style.css            |  2 ++
 src/css/scrollstyles.css                    | 10 +++++-----
 src/css/videoosd.css                        |  8 +++++---
 10 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index a9cf9a0b2a..e206c1fccf 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -4,6 +4,7 @@ button::-moz-focus-inner {
 }
 
 button {
+    -webkit-border-fit: border !important;
 }
 
 .card {
@@ -774,4 +775,4 @@ button {
 .cardOverlayFab-primary:hover {
     transform: scale(1.4, 1.4);
     transition: 0.2s;
-}
\ No newline at end of file
+}
diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css
index 20f5ce39f3..c442d110ac 100644
--- a/src/components/emby-slider/emby-slider.css
+++ b/src/components/emby-slider/emby-slider.css
@@ -1,4 +1,5 @@
 _:-ms-input-placeholder {
+    -ms-appearance: none;
     height: 2.223em;
     margin: 0;
 }
@@ -59,6 +60,7 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
         width: 1.2em;
         height: 1.2em;
         box-sizing: border-box;
@@ -85,6 +87,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-moz-range-thumb {
+    -moz-appearance: none;
     width: 0.9em;
     height: 0.9em;
     box-sizing: border-box;
@@ -96,6 +99,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-ms-thumb {
+    -webkit-appearance: none;
     width: 1.8em;
     height: 1.8em;
     box-sizing: border-box;
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index ccb2b91a5a..2d3e635e2d 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -424,6 +424,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -432,6 +433,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
index 9da13575db..97097eff7d 100644
--- a/src/components/themes/purple-haze/theme.css
+++ b/src/components/themes/purple-haze/theme.css
@@ -545,6 +545,7 @@ a[data-role=button] {
 }
 
 ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -553,6 +554,7 @@ a[data-role=button] {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index 6555a22f36..ae2e40708e 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -86,7 +86,7 @@ html {
     background: #00a4dc;
     color: #fff
 }
-
+border-radius: 2px;
 .button-submit:focus {
     background: #0cb0e8;
     color: #fff
@@ -445,6 +445,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -453,6 +454,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
     background: center no-repeat rgba(255, 255, 255, .7)
 }
 
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index 6c916a116a..c39afcd373 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -1,5 +1,6 @@
 .dashboardColumn,
 .dashboardSections {
+    flex-direction: column;
 }
 
 .dashboardFooter {
@@ -390,6 +391,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 a[data-role=button] {
+    background-clip: padding-box;
     cursor: pointer !important;
     font-family: inherit !important;
     font-weight: 500 !important;
diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index 0df248a075..6dc78b2e93 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -92,10 +92,12 @@
 
 .headerLeft,
 .skinHeader {
+    display: flex;
 }
 
 .detailButton-mobile,
 .skinHeader {
+    flex-direction: column;
 }
 
 .pageTitleWithLogo {
@@ -119,6 +121,7 @@
 
 .headerLeft,
 .headerRight {
+    justify-content: center;
 }
 
 .hiddenViewMenuBar .skinHeader {
@@ -542,6 +545,7 @@
 
 .detailButton-mobile,
 .mainDetailButtons {
+    display: flex;
 }
 
 .itemName {
diff --git a/src/css/material-icons/style.css b/src/css/material-icons/style.css
index c42c932b17..2d410b9985 100644
--- a/src/css/material-icons/style.css
+++ b/src/css/material-icons/style.css
@@ -15,6 +15,8 @@
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
+    -webkit-font-feature-settings: 'liga';
+    -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;
     font-feature-settings: "liga" 1;
     line-height: 1;
diff --git a/src/css/scrollstyles.css b/src/css/scrollstyles.css
index 2ef07f3e80..69039ce341 100644
--- a/src/css/scrollstyles.css
+++ b/src/css/scrollstyles.css
@@ -9,11 +9,11 @@
 }
 
 .hiddenScrollX, .layout-tv .scrollX {
-    /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
-    /*overflow: -moz-scrollbars-none;*/
+    scrollbar-width: none;
 }
 
 .hiddenScrollX-forced {
+    scrollbar-width: none;
 }
 
 .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
@@ -33,14 +33,14 @@
 }
 
 .hiddenScrollY, .layout-tv .smoothScrollY {
-    /* Can't do this because it not only hides the scrollbar, but also prevents scrolling */
-    /*overflow: -moz-scrollbars-none;*/
+    scrollbar-width: none;
 }
 
 .hiddenScrollY-forced {
+    scrollbar-width: none;
 }
 
 .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
     width: 0 !important;
     display: none;
-}
\ No newline at end of file
+}
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index 23c8661192..fd716e88ab 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -110,6 +110,8 @@
 
 .osdMediaInfo,
 .volumeButtons {
+    display: flex;
+    align-items: center;
 }
 
 .volumeButtons {
@@ -169,9 +171,9 @@
     margin-left: auto;
 }
 
-@-moz-keyframes spin { 100% { } }
-@-webkit-keyframes spin { 100% { } }
-@keyframes spin { 100% { transform:rotate(360deg); } }
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 .osdMediaStatus .animate {
     animation:spin 4s linear infinite;
 }

From b56cc14a1b6137d8cc777ac5dc61374c6854423e Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 30 Dec 2019 14:17:51 +0100
Subject: [PATCH 3/8] Fix leftHeader alignement issue

---
 src/css/librarybrowser.css | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index 6dc78b2e93..e873221bf1 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -133,10 +133,11 @@
 }
 
 .headerLeft {
-    display: flex;
+    display: flex;justify-content: left;
     align-items: center;
     flex-grow: 1;
-    overflow: hidden
+    overflow: hidden;
+    justify-content: left;
 }
 
 .sectionTabs {
@@ -530,7 +531,7 @@
         display: none
     }
 }
-
+justify-content: left;
 @media all and (min-width:31.25em) {
     .mobileDetails {
         display: none

From 6f165eab154c059d62479cd83842e538b7d3cec7 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Mon, 30 Dec 2019 14:44:22 +0100
Subject: [PATCH 4/8] Add some other small fixes

---
 src/components/themes/wmc/theme.css | 2 +-
 src/css/videoosd.css                | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index ae2e40708e..464056f1ca 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -86,7 +86,7 @@ html {
     background: #00a4dc;
     color: #fff
 }
-border-radius: 2px;
+
 .button-submit:focus {
     background: #0cb0e8;
     color: #fff
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index fd716e88ab..9be46da4ea 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -1,5 +1,6 @@
 .chapterThumbTextContainer,
 .videoOsdBottom {
+    user-select: none;
 }
 
 .osdPoster img,
@@ -173,7 +174,7 @@
 
 @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
 @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
+@keyframes spin { 100% { transform:rotate(360deg); } }
 .osdMediaStatus .animate {
     animation:spin 4s linear infinite;
 }

From 4acf4f071e29b7f28db1d65111345f1d7bfd690a Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Thu, 2 Jan 2020 10:17:11 +0100
Subject: [PATCH 5/8] Remove comments related to prefixed properties

---
 src/components/cardbuilder/card.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/cardbuilder/card.css b/src/components/cardbuilder/card.css
index e206c1fccf..39cd65ba64 100644
--- a/src/components/cardbuilder/card.css
+++ b/src/components/cardbuilder/card.css
@@ -79,9 +79,9 @@ button {
     margin: 0.6em;
     transition: none;
     border: 0 solid transparent;
-    /* These both are needed in case cardBox is a button */
     outline: none !important;
-    contain: layout style;
+    contain: layout;
+    contain: style;
 }
 
 .card.show-focus:not(.show-animation) .cardBox {

From 93e2aa2d3f98822405eb54b7121bd9e5e451d7eb Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Thu, 2 Jan 2020 13:36:44 +0100
Subject: [PATCH 6/8] Remove further vendor-prefixed CSS

---
 src/components/emby-button/emby-button.css    |   2 -
 .../emby-checkbox/emby-checkbox.css           |   2 +-
 src/components/emby-radio/emby-radio.css      |   1 -
 src/components/emby-slider/emby-slider.css    |   5 +-
 src/components/loading/loading.css            | 160 ------------------
 .../remotecontrol/remotecontrol.css           |   3 +-
 src/components/themes/appletv/theme.css       |  19 +--
 src/components/themes/blueradiance/theme.css  |  12 +-
 src/components/themes/dark/theme.css          |   6 +-
 src/components/themes/emby/theme.css          |   5 +-
 src/components/themes/light/theme.css         |   5 +-
 src/components/themes/purple-haze/theme.css   |  11 +-
 src/components/themes/wmc/theme.css           |  19 +--
 src/css/dashboard.css                         |  10 --
 src/css/site.css                              |   2 +-
 src/css/videoosd.css                          |   9 +-
 16 files changed, 23 insertions(+), 248 deletions(-)

diff --git a/src/components/emby-button/emby-button.css b/src/components/emby-button/emby-button.css
index 25141eaa21..38d62b1299 100644
--- a/src/components/emby-button/emby-button.css
+++ b/src/components/emby-button/emby-button.css
@@ -21,7 +21,6 @@
     outline: none !important;
     position: relative;
     font-weight: 600;
-    /* Disable webkit tap highlighting */
     text-decoration: none;
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
@@ -111,7 +110,6 @@
     position: relative;
     overflow: hidden;
     border-radius: 50%;
-    /* Disable webkit tap highlighting */
     justify-content: center;
     transform-origin: center;
     transition: 0.2s;
diff --git a/src/components/emby-checkbox/emby-checkbox.css b/src/components/emby-checkbox/emby-checkbox.css
index 319565b0ef..4e27928e2a 100644
--- a/src/components/emby-checkbox/emby-checkbox.css
+++ b/src/components/emby-checkbox/emby-checkbox.css
@@ -112,7 +112,7 @@
     margin-bottom: .25em;
 }
 
-@-webkit-keyframes repaintChrome {
+@keyframes repaintChrome {
     from {
         padding: 0;
     }
diff --git a/src/components/emby-radio/emby-radio.css b/src/components/emby-radio/emby-radio.css
index 0db9641b87..6b8575bc86 100644
--- a/src/components/emby-radio/emby-radio.css
+++ b/src/components/emby-radio/emby-radio.css
@@ -68,7 +68,6 @@
     transition-duration: 0.28s;
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-property: transform;
-    transition-property: transform, -webkit-transform;
     transform: scale3d(0, 0, 0);
     border-radius: 50%;
     background: #00a4dc;
diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css
index c442d110ac..1ca441188a 100644
--- a/src/components/emby-slider/emby-slider.css
+++ b/src/components/emby-slider/emby-slider.css
@@ -16,7 +16,6 @@ _:-ms-input-placeholder {
     z-index: 1;
     cursor: pointer;
     margin: 0;
-    /* Disable webkit tap highlighting */
     display: block;
 }
 
@@ -60,7 +59,7 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-webkit-slider-thumb {
-        -webkit-appearance: none;
+        appearance: none;
         width: 1.2em;
         height: 1.2em;
         box-sizing: border-box;
@@ -99,7 +98,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-ms-thumb {
-    -webkit-appearance: none;
+    appearance: none;
     width: 1.8em;
     height: 1.8em;
     box-sizing: border-box;
diff --git a/src/components/loading/loading.css b/src/components/loading/loading.css
index c98d071e3d..e3f10c0e2e 100644
--- a/src/components/loading/loading.css
+++ b/src/components/loading/loading.css
@@ -10,12 +10,6 @@
     animation: mdl-spinner__container-rotate 1568.23529412ms linear infinite;
 }
 
-@-webkit-keyframes mdl-spinner__container-rotate {
-    to {
-        transform: rotate(360deg);
-    }
-}
-
 @keyframes mdl-spinner__container-rotate {
     to {
         transform: rotate(360deg);
@@ -61,40 +55,6 @@
     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;
 }
 
-@-webkit-keyframes mdl-spinner__fill-unfill-rotate {
-    12.5% {
-        transform: rotate(135deg);
-    }
-
-    25% {
-        transform: rotate(270deg);
-    }
-
-    37.5% {
-        transform: rotate(405deg);
-    }
-
-    50% {
-        transform: rotate(540deg);
-    }
-
-    62.5% {
-        transform: rotate(675deg);
-    }
-
-    75% {
-        transform: rotate(810deg);
-    }
-
-    87.5% {
-        transform: rotate(945deg);
-    }
-
-    to {
-        transform: rotate(1080deg);
-    }
-}
-
 @keyframes mdl-spinner__fill-unfill-rotate {
     12.5% {
         transform: rotate(135deg);
@@ -138,32 +98,6 @@
 * - 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;
@@ -190,28 +124,6 @@
     }
 }
 
-@-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;
@@ -234,28 +146,6 @@
     }
 }
 
-@-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;
@@ -278,28 +168,6 @@
     }
 }
 
-@-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;
@@ -370,20 +238,6 @@
     animation: mdl-spinner__right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
 }
 
-@-webkit-keyframes mdl-spinner__left-spin {
-    from {
-        transform: rotate(130deg);
-    }
-
-    50% {
-        transform: rotate(-5deg);
-    }
-
-    to {
-        transform: rotate(130deg);
-    }
-}
-
 @keyframes mdl-spinner__left-spin {
     from {
         transform: rotate(130deg);
@@ -398,20 +252,6 @@
     }
 }
 
-@-webkit-keyframes mdl-spinner__right-spin {
-    from {
-        transform: rotate(-130deg);
-    }
-
-    50% {
-        transform: rotate(5deg);
-    }
-
-    to {
-        transform: rotate(-130deg);
-    }
-}
-
 @keyframes mdl-spinner__right-spin {
     from {
         transform: rotate(-130deg);
diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index bdaaeef594..76d4f834e2 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -23,6 +23,7 @@
 
 .nowPlayingInfoControls,
 .nowPlayingTime {
+    display: flex;
 }
 
 .nowPlayingPageImageContainer {
@@ -53,7 +54,7 @@
     box-shadow: 0 0 1.9vh #000;
     border: .1em solid #222;
     user-drag: none;
-    user-select: none
+    user-select: none;
 }
 
 @media all and (orientation:portrait) and (max-width:50em) {
diff --git a/src/components/themes/appletv/theme.css b/src/components/themes/appletv/theme.css
index fc102654c7..74f4b35e8e 100644
--- a/src/components/themes/appletv/theme.css
+++ b/src/components/themes/appletv/theme.css
@@ -23,17 +23,11 @@ html {
 .skinHeader-withBackground {
     color: rgba(0, 0, 0, .7);
     background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
-    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
     background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
+@supports (backdrop-filter:blur(1.5em)) {
     .skinHeader-blurred {
-        background: -webkit-gradient(linear, left top, right top, from(rgba(188, 188, 188, .7)), color-stop(rgba(167, 180, 183, .7)), color-stop(rgba(190, 181, 165, .7)), color-stop(rgba(173, 190, 194, .7)), to(rgba(185, 199, 203, .7)));
-        background: -webkit-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
-        background: -o-linear-gradient(left, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
         background: linear-gradient(to right, rgba(188, 188, 188, .7), rgba(167, 180, 183, .7), rgba(190, 181, 165, .7), rgba(173, 190, 194, .7), rgba(185, 199, 203, .7));
         backdrop-filter: blur(1.5em)
     }
@@ -58,9 +52,6 @@ html {
 }
 
 .backgroundContainer.withBackdrop {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, .94)), color-stop(rgba(235, 250, 254, .94)), color-stop(rgba(227, 220, 212, .94)), color-stop(rgba(206, 214, 216, .94)), to(rgba(192, 211, 218, .94)));
-    background: -webkit-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
-    background: -o-linear-gradient(top, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94));
     background: linear-gradient(to bottom, rgba(192, 212, 222, .94), rgba(235, 250, 254, .94), rgba(227, 220, 212, .94), rgba(206, 214, 216, .94), rgba(192, 211, 218, .94))
 }
 
@@ -197,13 +188,10 @@ html {
 .formDialogFooter:not(.formDialogFooter-clear) {
     color: rgba(0, 0, 0, .7);
     background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#BCBCBC), color-stop(#A7B4B7), color-stop(#BEB5A5), color-stop(#ADBEC2), to(#B9C7CB));
-    background: -webkit-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
-    background: -o-linear-gradient(left, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB);
     background: linear-gradient(to right, #BCBCBC, #A7B4B7, #BEB5A5, #ADBEC2, #B9C7CB)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -419,9 +407,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#E4E2DC));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #E4E2DC);
     background: linear-gradient(rgba(0, 0, 0, 0), #E4E2DC)
 }
 
diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css
index 8764136fa4..a280eeff66 100644
--- a/src/components/themes/blueradiance/theme.css
+++ b/src/components/themes/blueradiance/theme.css
@@ -17,18 +17,12 @@ html {
 
 .skinHeader-withBackground {
     background: #303030;
-    background: -webkit-gradient(linear, left top, right top, from(#291A31), color-stop(#033664), color-stop(#011432), color-stop(#141A3A), to(#291A31));
-    background: -webkit-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
-    background: -o-linear-gradient(left, #291A31, #033664, #011432, #141A3A, #291A31);
     background: linear-gradient(to right, #291A31, #033664, #011432, #141A3A, #291A31)
 }
 
 .skinHeader.semiTransparent {
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
@@ -179,7 +173,7 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -405,9 +399,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
     background: linear-gradient(rgba(0, 0, 0, 0), #181818)
 }
 
@@ -446,6 +437,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index e5d0132e04..7c826b9a97 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -161,7 +161,7 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -383,9 +383,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#101010));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #101010);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #101010);
     background: linear-gradient(rgba(0, 0, 0, 0), #101010)
 }
 
@@ -424,6 +421,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
diff --git a/src/components/themes/emby/theme.css b/src/components/themes/emby/theme.css
index 2d3e635e2d..bce2e738bb 100644
--- a/src/components/themes/emby/theme.css
+++ b/src/components/themes/emby/theme.css
@@ -161,7 +161,7 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -383,9 +383,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#1a1a1a));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #1a1a1a);
     background: linear-gradient(rgba(0, 0, 0, 0), #1a1a1a)
 }
 
diff --git a/src/components/themes/light/theme.css b/src/components/themes/light/theme.css
index 0fef58a17f..556e2cb5f6 100644
--- a/src/components/themes/light/theme.css
+++ b/src/components/themes/light/theme.css
@@ -186,7 +186,7 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -400,9 +400,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#f2f2f2));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #f2f2f2);
     background: linear-gradient(rgba(0, 0, 0, 0), #f2f2f2)
 }
 
diff --git a/src/components/themes/purple-haze/theme.css b/src/components/themes/purple-haze/theme.css
index 97097eff7d..c04c21f52d 100644
--- a/src/components/themes/purple-haze/theme.css
+++ b/src/components/themes/purple-haze/theme.css
@@ -17,18 +17,12 @@ html {
 
 .skinHeader-withBackground {
     background: #000420;
-    background: -moz-linear-gradient(left, #000420 0%, #06256f 18%, #2b052b 38%, #2b052b 68%, #06256f 81%, #000420 100%);
-    background: -webkit-linear-gradient(left, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
     background: linear-gradient(to right, #000420 0%,#06256f 18%,#2b052b 38%,#2b052b 68%,#06256f 81%,#000420 100%);
-    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000420', endColorstr='#000420',GradientType=1 );
 }
 
 .skinHeader.semiTransparent {
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
@@ -267,7 +261,7 @@ a[data-role=button] {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -498,9 +492,6 @@ a[data-role=button] {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#181818));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #181818);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #181818);
     background: linear-gradient(rgba(0, 0, 0, 0), #181818)
 }
 
diff --git a/src/components/themes/wmc/theme.css b/src/components/themes/wmc/theme.css
index 464056f1ca..21f5abf8f4 100644
--- a/src/components/themes/wmc/theme.css
+++ b/src/components/themes/wmc/theme.css
@@ -23,13 +23,10 @@ html {
 .formDialogHeader:not(.formDialogHeader-clear),
 .skinHeader-withBackground {
     background-color: #0C2450;
-    background: -webkit-gradient(linear, left top, left bottom, from(#0C2450), to(#081B3B));
-    background: -webkit-linear-gradient(top, #0C2450, #081B3B);
-    background: -o-linear-gradient(top, #0C2450, #081B3B);
     background: linear-gradient(to bottom, #0C2450, #081B3B)
 }
 
-@supports (backdrop-filter:blur(1.5em)) or (-webkit-backdrop-filter:blur(1.5em)) {
+@supports (backdrop-filter:blur(1.5em)) {
     .skinHeader-blurred {
         background: rgba(20, 20, 20, .7);
         backdrop-filter: blur(1.5em)
@@ -39,9 +36,6 @@ html {
 .skinHeader.semiTransparent {
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, .3);
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, .6)), to(rgba(0, 0, 0, 0)));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
-    background: -o-linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
     background: linear-gradient(rgba(0, 0, 0, .6), rgba(0, 0, 0, 0))
 }
 
@@ -52,9 +46,6 @@ html {
 .backgroundContainer,
 .dialog {
     background-color: #0F3562;
-    background: -webkit-gradient(linear, left top, left bottom, from(#0F3562), color-stop(#1162A4), to(#03215F));
-    background: -webkit-linear-gradient(top, #0F3562, #1162A4, #03215F);
-    background: -o-linear-gradient(top, #0F3562, #1162A4, #03215F);
     background: linear-gradient(to bottom, #0F3562, #1162A4, #03215F)
 }
 
@@ -176,14 +167,11 @@ html {
 .appfooter,
 .formDialogFooter:not(.formDialogFooter-clear) {
     background: #0C2450;
-    background: -webkit-gradient(linear, left bottom, left top, from(#0C2450), to(#081B3B));
-    background: -webkit-linear-gradient(bottom, #0C2450, #081B3B);
-    background: -o-linear-gradient(bottom, #0C2450, #081B3B);
     background: linear-gradient(to top, #0C2450, #081B3B);
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(24, 24, 24, .7);
         backdrop-filter: blur(20px)
@@ -404,9 +392,6 @@ html {
 }
 
 .itemBackdropFader {
-    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(#115E9E));
-    background: -webkit-linear-gradient(rgba(0, 0, 0, 0), #115E9E);
-    background: -o-linear-gradient(rgba(0, 0, 0, 0), #115E9E);
     background: linear-gradient(rgba(0, 0, 0, 0), #115E9E)
 }
 
diff --git a/src/css/dashboard.css b/src/css/dashboard.css
index c39afcd373..d4928db691 100644
--- a/src/css/dashboard.css
+++ b/src/css/dashboard.css
@@ -403,16 +403,6 @@ a[data-role=button] {
     background: #292929 !important;
 }
 
-@-webkit-keyframes rotating {
-    from {
-        transform: rotate(0)
-    }
-
-    to {
-        transform: rotate(360deg)
-    }
-}
-
 @keyframes rotating {
     from {
         transform: rotate(0)
diff --git a/src/css/site.css b/src/css/site.css
index 895944f77f..6491799117 100644
--- a/src/css/site.css
+++ b/src/css/site.css
@@ -25,7 +25,7 @@ html {
 
 body {
     overflow-x: hidden;
-    background-color: transparent !important
+    background-color: transparent !important;
 }
 
 .mainAnimatedPage {
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index 9be46da4ea..f20abf9d07 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -172,9 +172,12 @@
     margin-left: auto;
 }
 
-@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-@keyframes spin { 100% { transform:rotate(360deg); } }
+@keyframes spin {
+    100% {
+        transform:rotate(360deg);
+    }
+}
+
 .osdMediaStatus .animate {
     animation:spin 4s linear infinite;
 }

From 019d3730dffa408e9dc859d2ea1e04e57de18e5e Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Thu, 2 Jan 2020 14:46:22 +0100
Subject: [PATCH 7/8] Remove leftover MS vendor prefix

---
 src/components/emby-slider/emby-slider.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emby-slider/emby-slider.css b/src/components/emby-slider/emby-slider.css
index 1ca441188a..50021fdb51 100644
--- a/src/components/emby-slider/emby-slider.css
+++ b/src/components/emby-slider/emby-slider.css
@@ -1,5 +1,5 @@
 _:-ms-input-placeholder {
-    -ms-appearance: none;
+    appearance: none;
     height: 2.223em;
     margin: 0;
 }

From b2b67b81ef1a647e7312e5cd93b05499633a1885 Mon Sep 17 00:00:00 2001
From: MrTimscampi <julien.machiels@protonmail.com>
Date: Sat, 4 Jan 2020 11:02:46 +0100
Subject: [PATCH 8/8] Fix unreplaced and duplicate CSS properties

---
 src/components/themes/blueradiance/theme.css | 1 +
 src/components/themes/dark/theme.css         | 1 +
 src/css/librarybrowser.css                   | 4 ++--
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/themes/blueradiance/theme.css b/src/components/themes/blueradiance/theme.css
index a280eeff66..c47a0d9844 100644
--- a/src/components/themes/blueradiance/theme.css
+++ b/src/components/themes/blueradiance/theme.css
@@ -446,6 +446,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/components/themes/dark/theme.css b/src/components/themes/dark/theme.css
index 7c826b9a97..290c8fb25d 100644
--- a/src/components/themes/dark/theme.css
+++ b/src/components/themes/dark/theme.css
@@ -430,6 +430,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
+    border-radius: 2px;
     background: center no-repeat #888
 }
 
diff --git a/src/css/librarybrowser.css b/src/css/librarybrowser.css
index e873221bf1..e48ef6ef9e 100644
--- a/src/css/librarybrowser.css
+++ b/src/css/librarybrowser.css
@@ -133,7 +133,7 @@
 }
 
 .headerLeft {
-    display: flex;justify-content: left;
+    display: flex;
     align-items: center;
     flex-grow: 1;
     overflow: hidden;
@@ -531,7 +531,7 @@
         display: none
     }
 }
-justify-content: left;
+
 @media all and (min-width:31.25em) {
     .mobileDetails {
         display: none