Revert vendor prefix removal

src/assets/css/dashboard.css

@@ -1,6 +1,7 @@
 .dashboardColumn,
 .dashboardSections {
-    flex-direction: column;
+    -webkit-box-orient: vertical;
+    -webkit-box-direction: normal
 }
 
 .dashboardFooter {
@@ -14,6 +15,8 @@
 
 progress {
     appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     margin: 0;
     background: #ccc !important
 }
@@ -73,17 +76,23 @@ 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
 }
 
@@ -137,14 +146,23 @@ 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
 }
 
@@ -153,6 +171,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .dashboardSection {
+    -webkit-flex-shrink: 0;
     flex-shrink: 0;
     margin: 0 0 2em
 }
@@ -168,7 +187,11 @@ 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
     }
 
@@ -273,6 +296,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .sessionNowPlayingContent {
+    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center center;
@@ -371,6 +395,7 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .disabledUser {
+    -webkit-filter: grayscale(100%);
     filter: grayscale(100%)
 }
 
@@ -391,7 +416,9 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 a[data-role=button] {
-    background-clip: padding-box;
+    -webkit-font-smoothing: antialiased;
+    -webkit-user-select: none;
+    -webkit-background-clip: padding-box;
     cursor: pointer !important;
     font-family: inherit !important;
     font-weight: 500 !important;
@@ -403,21 +430,37 @@ a[data-role=button] {
     background: #292929 !important;
 }
 
-@keyframes rotating {
+@-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)
 }
 

src/assets/css/fonts.css

@@ -4,6 +4,7 @@ html {
 
 html {
     font-size: 93%;
+    -webkit-text-size-adjust: 100%;
     text-size-adjust: 100%;
 }
 

src/assets/css/librarybrowser.css

@@ -15,6 +15,7 @@
 .headerSelectedPlayer,
 .itemMiscInfo,
 .navMenuOptionText {
+    -o-text-overflow: ellipsis;
     text-overflow: ellipsis;
     overflow: hidden
 }
@@ -47,6 +48,8 @@
     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
 }
 
@@ -55,14 +58,17 @@
 }
 
 .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;
@@ -70,6 +76,7 @@
 }
 
 .headerButton {
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -83,25 +90,34 @@
 }
 
 .pageTitle {
+    display: -webkit-inline-box;
+    display: -webkit-inline-flex;
     display: inline-flex;
     margin: .3em 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: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .detailButton-mobile,
 .skinHeader {
-    flex-direction: column;
+    -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
@@ -121,7 +137,7 @@
 
 .headerLeft,
 .headerRight {
-    justify-content: center;
+    -webkit-box-align: center
 }
 
 .hiddenViewMenuBar .skinHeader {
@@ -134,7 +150,10 @@
 
 .headerLeft {
     display: flex;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1;
     overflow: hidden;
     justify-content: flex-start;
@@ -145,8 +164,13 @@
 }
 
 .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
 }
 
@@ -155,19 +179,27 @@
 }
 
 .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
 }
 
@@ -181,6 +213,8 @@
 }
 
 .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;
@@ -210,7 +244,9 @@
         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%
@@ -247,9 +283,14 @@
     }
 
     .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;
@@ -307,6 +348,8 @@
 }
 
 .flexPageTabContent.is-active {
+    display: -webkit-box !important;
+    display: -webkit-flex !important;
     display: flex !important
 }
 
@@ -322,6 +365,7 @@
     margin: 1.5em 0;
     background: #222;
     padding: .8em .8em .8em 3em;
+    -webkit-border-radius: .3em;
     border-radius: .3em;
     position: relative
 }
@@ -380,6 +424,7 @@
 }
 
 .itemBackdrop {
+    -webkit-background-size: cover;
     background-size: cover;
     background-repeat: no-repeat;
     background-position: center;
@@ -443,15 +488,15 @@
 }
 
 .detailImageContainer {
-    margin: 1.25em 0;
+    width: 280px;
-    position: sticky;
+    margin-right: 2em;
-    top: 15%;
+    flex-shrink: 0;
-    float: left;
-    width: 22.786458333333332vw;
 }
 
 .detailPagePrimaryContent {
     position: relative;
+    -webkit-box-flex: 1;
+    -webkit-flex-grow: 1;
     flex-grow: 1
 }
 
@@ -459,8 +504,9 @@
     width: 25em;
     height: 9.375em;
     position: absolute;
-    top: 14.5%;
+    top: 13.5%;
-    right: 10.5%;
+    right: 19.5%;
+    -webkit-background-size: contain;
     background-size: contain
 }
 
@@ -489,8 +535,13 @@
 }
 
 .itemDetailImage {
-    width: 100% !important;
+    width: 100%;
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37)
+}
+
+.thumbDetailImageContainer {
+    width: 400px
 }
 
 @media all and (max-width:62.5em) {
@@ -503,6 +554,19 @@
     }
 }
 
+@media all and (min-width:62.5em) {
+    .itemBackdrop {
+        display: none
+    }
+
+    .detailPagePrimaryContainer {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: flex;
+        margin-bottom: 3em
+    }
+}
+
 @media all and (max-width:75em) {
     .lnkSibling {
         display: none !important
@@ -557,7 +621,8 @@
 
 .detailButton-mobile,
 .mainDetailButtons {
-    display: flex;
+    display: -webkit-box;
+    display: -webkit-flex
 }
 
 .itemName {
@@ -578,7 +643,10 @@
 
 .mainDetailButtons {
     display: flex;
+    -webkit-box-align: center;
+    -webkit-align-items: center;
     align-items: center;
+    -webkit-flex-wrap: wrap;
     flex-wrap: wrap;
     margin: 1em 0;
 }
@@ -586,6 +654,7 @@
 .recordingFields button {
     margin-left: 0;
     margin-right: .5em;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -596,7 +665,11 @@
 .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
@@ -628,9 +701,18 @@
 }
 
 .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
 }
 
@@ -684,14 +766,21 @@
 }
 
 .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
     }
 
@@ -781,6 +870,7 @@
 }
 
 .btnSyncComplete i {
+    -webkit-border-radius: 100em;
     border-radius: 100em
 }
 
@@ -789,9 +879,14 @@
 }
 
 .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
 }
 
@@ -829,6 +924,7 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .sectionTitleButton {
     margin-left: 1.5em !important;
+    -webkit-flex-shrink: 0;
     flex-shrink: 0
 }
 
@@ -838,17 +934,22 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 
 .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
 }
@@ -920,6 +1021,8 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
 }
 
 .itemsViewSettingsContainer {
+    -webkit-box-pack: center;
+    -webkit-justify-content: center;
     justify-content: center
 }
 

src/assets/css/metadataeditor.css

@@ -28,13 +28,17 @@
 
 .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
 }

src/assets/css/scrollstyles.css

@@ -1,5 +1,6 @@
 .scrollX {
     overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
     overflow-y: hidden;
     white-space: nowrap;
 }
@@ -9,11 +10,13 @@
 }
 
 .hiddenScrollX, .layout-tv .scrollX {
-    scrollbar-width: none;
+    -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 {
-    scrollbar-width: none;
+    overflow: -moz-scrollbars-none;
 }
 
 .hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
@@ -23,21 +26,25 @@
 
 .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 {
-    scrollbar-width: none;
+    -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 {
-    scrollbar-width: none;
+    overflow: -moz-scrollbars-none;
 }
 
 .hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {

src/assets/css/site.css

@@ -20,12 +20,18 @@ 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
 }
 
 .mainAnimatedPage {

src/assets/css/videoosd.css

@@ -1,6 +1,8 @@
 .chapterThumbTextContainer,
 .videoOsdBottom {
-    user-select: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none
 }
 
 .osdPoster img,
@@ -12,10 +14,13 @@
 }
 
 .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;
 }
@@ -29,13 +34,17 @@
 }
 
 .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;
@@ -81,12 +90,20 @@
     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
+    user-select: none;
+    -webkit-touch-callout: none
 }
 
 .videoOsdBottom-hidden {
@@ -94,35 +111,49 @@
 }
 
 .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: flex;
+    display: -webkit-box;
-    align-items: center;
+    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
 }
 
@@ -136,10 +167,15 @@
     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
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-drag: none;
+    -webkit-user-select: none;
+    -ms-user-select: none
 }
 
 .osdTitle,
@@ -149,6 +185,7 @@
 
 .osdMediaInfo {
     display: flex;
+    -webkit-align-items: center;
     align-items: center
 }
 
@@ -157,14 +194,23 @@
 }
 
 .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
 }
 
@@ -172,13 +218,12 @@
     margin-left: auto;
 }
 
-@keyframes spin {
+@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
-    100% {
+@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
-        transform:rotate(360deg);
+@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
-    }
-}
-
 .osdMediaStatus .animate {
+    -webkit-animation:spin 4s linear infinite;
+    -moz-animation:spin 4s linear infinite;
     animation:spin 4s linear infinite;
 }
 

src/components/cardbuilder/card.css

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

src/components/dialogHelper/dialoghelper.css

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

src/components/filterdialog/style.css

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

src/components/homesections/homesections.css

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

src/components/htmlvideoplayer/style.css

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

src/components/images/style.css

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

src/components/indicators/indicators.css

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

src/components/loading/loading.css

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

src/components/navdrawer/navdrawer.css

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

src/components/remotecontrol/remotecontrol.css

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

src/components/slideshow/style.css

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

src/components/subtitlesync/subtitlesync.css

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

src/components/upnextdialog/upnextdialog.css

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

src/elements/emby-button/emby-button.css

@@ -9,6 +9,9 @@
     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;
@@ -21,6 +24,8 @@
     outline: none !important;
     position: relative;
     font-weight: 600;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     text-decoration: none;
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
@@ -94,6 +99,9 @@
     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;
@@ -110,6 +118,8 @@
     position: relative;
     overflow: hidden;
     border-radius: 50%;
+    /* Disable webkit tap highlighting */
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     justify-content: center;
     transform-origin: center;
     transition: 0.2s;

src/elements/emby-checkbox/emby-checkbox.css

@@ -38,6 +38,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -112,7 +115,7 @@
     margin-bottom: .25em;
 }
 
-@keyframes repaintChrome {
+@-webkit-keyframes repaintChrome {
     from {
         padding: 0;
     }

src/elements/emby-input/emby-input.css

@@ -10,8 +10,10 @@
     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%;
 }
 
@@ -33,5 +35,6 @@
 }
 
 .emby-input-iconbutton {
+    -webkit-align-self: flex-end;
     align-self: flex-end;
 }

src/elements/emby-radio/emby-radio.css

@@ -27,6 +27,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -67,13 +70,17 @@
     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);
 }
 

src/elements/emby-select/emby-select.css

@@ -12,6 +12,7 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 
@@ -19,6 +20,8 @@
         background: none !important;
         border-color: transparent !important;
         color: inherit !important;
+        -webkit-appearance: none;
+        -moz-appearance: none;
         appearance: none;
     }
 
@@ -38,6 +41,7 @@
 
 .emby-select-focusscale {
     transition: transform 180ms ease-out !important;
+    -webkit-transform-origin: center center;
     transform-origin: center center;
 }
 
@@ -73,6 +77,7 @@
 }
 
 .emby-select-withcolor {
+    -webkit-appearance: none;
     appearance: none;
     border-radius: .2em;
 }

src/elements/emby-slider/emby-slider.css

@@ -1,21 +1,31 @@
 _:-ms-input-placeholder {
-    appearance: none;
+    -ms-appearance: none;
     height: 2.223em;
     margin: 0;
 }
 
 .mdl-slider {
     width: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -ms-appearance: none;
     appearance: none;
     height: 150%;/*150% is needed, else ie and edge won't display the thumb properly*/
     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;
 }
 
@@ -59,7 +69,7 @@ _:-ms-input-placeholder {
     }
 
     .mdl-slider::-webkit-slider-thumb {
-        appearance: none;
+        -webkit-appearance: none;
         width: 1.2em;
         height: 1.2em;
         box-sizing: border-box;
@@ -98,7 +108,7 @@ _:-ms-input-placeholder {
 }
 
 .mdl-slider::-ms-thumb {
-    appearance: none;
+    -webkit-appearance: none;
     width: 1.8em;
     height: 1.8em;
     box-sizing: border-box;

src/elements/emby-textarea/emby-textarea.css

@@ -13,6 +13,7 @@
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
     width: 100%;
 }
 

src/elements/emby-toggle/emby-toggle.css

@@ -9,6 +9,10 @@
     margin: 0;
     padding: 0;
     overflow: visible;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
     user-select: none;
     flex-direction: row-reverse;
     justify-content: flex-end;
@@ -24,6 +28,9 @@
     margin: 0;
     padding: 0;
     opacity: 0;
+    -ms-appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
     appearance: none;
     border: none;
 }
@@ -82,6 +89,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
+    -webkit-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);
     display: inline-block;
     box-sizing: border-box;

src/themes/appletv/theme.css

@@ -23,10 +23,14 @@ 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)
 }
 
 .skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important
 }
 
@@ -41,10 +45,14 @@ html {
 .backgroundContainer,
 .dialog {
     background: #D5E9F2;
+    -webkit-background-size: 100% 100%;
     background-size: 100% 100%
 }
 
 .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))
 }
 
@@ -181,6 +189,9 @@ 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)
 }
 
@@ -245,6 +256,7 @@ html {
     color: inherit;
     background: rgba(255, 255, 255, .9);
     border: .07em solid rgba(0, 0, 0, .158);
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -392,10 +404,18 @@ html {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 

src/themes/blueradiance/theme.css

@@ -17,12 +17,19 @@ 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 {
+    -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)));
+    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))
 }
 
@@ -37,6 +44,7 @@ html {
 
 .backgroundContainer {
     background: url(bg.jpg) center top no-repeat #033361;
+    -webkit-background-size: cover;
     background-size: cover
 }
 
@@ -173,7 +181,7 @@ html {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(1, 2, 50, .7);
         backdrop-filter: blur(20px)
@@ -245,6 +253,7 @@ html {
     color: inherit;
     background: rgba(0, 0, 0, .5);
     border: .07em solid transparent;
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -398,10 +407,18 @@ html {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -433,7 +450,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -442,7 +459,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    border-radius: 2px;
+    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 

src/themes/dark/theme.css

@@ -20,6 +20,7 @@ html {
 }
 
 .skinHeader.semiTransparent {
+    -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
     background-color: rgba(0, 0, 0, 0.4);
 }
@@ -226,6 +227,7 @@ html {
     color: inherit;
     background: #292929;
     border: .07em solid #292929;
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -375,10 +377,18 @@ html {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #ddd;
     background: #111;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -410,7 +420,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -419,7 +429,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    border-radius: 2px;
+    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 

src/themes/light/theme.css

@@ -23,14 +23,17 @@ 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);
 }
@@ -246,6 +249,7 @@ html {
     color: inherit;
     background: #fff;
     border: .07em solid rgba(0, 0, 0, .158);
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -392,10 +396,18 @@ html {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 

src/themes/purplehaze/theme.css

@@ -17,12 +17,19 @@ 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 {
+    -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)));
+    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))
 }
 
@@ -37,6 +44,7 @@ html {
 
 .backgroundContainer {
     background: url(bg.jpg) center top no-repeat #030322;
+    -webkit-background-size: cover;
     background-size: cover
 }
 
@@ -261,7 +269,7 @@ a[data-role=button] {
     color: rgba(255, 255, 255, .78)
 }
 
-@supports (backdrop-filter:blur(10px)) {
+@supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)) {
     .appfooter-blurred {
         background: rgba(6, 37, 111, .7);
         backdrop-filter: blur(20px)
@@ -333,6 +341,7 @@ a[data-role=button] {
     color: inherit;
     background: rgba(0, 0, 0, .5);
     border: .07em solid transparent;
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -491,10 +500,18 @@ a[data-role=button] {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #0e0f2d;
     background: #dbe6ff;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -532,7 +549,7 @@ a[data-role=button] {
 }
 
 ::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -541,7 +558,7 @@ a[data-role=button] {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    border-radius: 2px;
+    -webkit-border-radius: 2px;
     background: center no-repeat #888
 }
 

src/themes/wmc/theme.css

@@ -23,12 +23,19 @@ 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)
 }
 
 .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)));
+    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))
 }
 
@@ -39,6 +46,9 @@ 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)
 }
 
@@ -160,6 +170,9 @@ 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)
 }
@@ -226,6 +239,7 @@ html {
     color: inherit;
     background: rgba(255, 255, 255, .2);
     border: .07em solid rgba(255, 255, 255, .135);
+    -webkit-border-radius: .15em;
     border-radius: .15em
 }
 
@@ -377,10 +391,18 @@ html {
     color: #fff
 }
 
+.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)
+}
+
 .infoBanner {
     color: #000;
     background: #fff3a5;
     padding: 1em;
+    -webkit-border-radius: .25em;
     border-radius: .25em
 }
 
@@ -412,7 +434,7 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -421,7 +443,7 @@ html {
 
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
-    border-radius: 2px;
+    -webkit-border-radius: 2px;
     background: center no-repeat rgba(255, 255, 255, .7)
 }