Fix rebasing issues

src/assets/css/dashboard.css

@@ -2,7 +2,7 @@
 .dashboardSections {
     flex-direction: column;
     -webkit-box-orient: vertical;
-    -webkit-box-direction: normal
+    -webkit-box-direction: normal;
 }
 
 .dashboardFooter {
@@ -99,17 +99,17 @@ div[data-role=controlgroup] a[data-role=button] {
 }
 
 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;
+    -webkit-border-bottom-left-radius: 0.3125em;
+    border-bottom-left-radius: 0.3125em;
+    -webkit-border-top-left-radius: 0.3125em;
+    border-top-left-radius: 0.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;
+    -webkit-border-bottom-right-radius: 0.3125em;
+    border-bottom-right-radius: 0.3125em;
+    -webkit-border-top-right-radius: 0.3125em;
+    border-top-right-radius: 0.3125em;
 }
 
 div[data-role=controlgroup] a[data-role=button] + a[data-role=button] {
@@ -425,12 +425,12 @@ div[data-role=controlgroup] a.ui-btn-active {
 @-webkit-keyframes rotating {
     from {
         -webkit-transform: rotate(0);
-        transform: rotate(0)
+        transform: rotate(0);
     }
 
     to {
         -webkit-transform: rotate(360deg);
-        transform: rotate(360deg)
+        transform: rotate(360deg);
     }
 }
 
@@ -452,8 +452,8 @@ div[data-role=controlgroup] a.ui-btn-active {
 }
 
 .pluginPreviewImg {
-    -webkit-box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
-    box-shadow: 0 .0725em .29em 0 rgba(0, 0, 0, .37);
+    -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
 .ui-bar-a {

src/assets/css/fonts.css

@@ -5,7 +5,9 @@ html {
     text-size-adjust: 100%;
 }
 
-h1, h2, h3 {
+h1,
+ h2,
+ h3 {
     /* For better bolding, since Helvetica does not support 500 weight, and 600 is too thick */
     font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", 'Open Sans', sans-serif;
 }

src/assets/css/librarybrowser.css

@@ -48,9 +48,9 @@
     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;
+    -webkit-transition: -webkit-transform 0.2s ease-out;
+    -o-transition: transform 0.2s ease-out;
+    transition: transform 0.2s ease-out;
 }
 
 .pageTabContent:not(.is-active) {
@@ -84,9 +84,15 @@
     display: none;
 }
 
-.headerLeft,
-.headerRight {
-    justify-content: center;
+.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;
 }
 
 .headerRight {
@@ -121,7 +127,7 @@
 .headerLeft,
 .skinHeader {
     display: -webkit-box;
-    display: -webkit-flex
+    display: -webkit-flex;
 }
 
 .detailButton-mobile,
@@ -129,7 +135,7 @@
     flex-direction: column;
     -webkit-flex-direction: column;
     -webkit-box-orient: vertical;
-    -webkit-box-direction: normal
+    -webkit-box-direction: normal;
 }
 
 .pageTitleWithLogo {
@@ -152,11 +158,6 @@
     contain: layout style paint;
 }
 
-.headerLeft,
-.headerRight {
-    -webkit-box-align: center
-}
-
 .hiddenViewMenuBar .skinHeader {
     display: none;
 }
@@ -165,17 +166,6 @@
     padding: 0.54em 0;
 }
 
-.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;
-}
-
 .sectionTabs {
     width: 100%;
 }
@@ -193,7 +183,7 @@
     align-items: center;
     text-decoration: none;
     color: inherit;
-    padding: .9em 0 .9em 2.4em !important;
+    padding: 0.9em 0 0.9em 2.4em !important;
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     flex-grow: 1;
@@ -219,9 +209,9 @@
 }
 
 .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;
+    -webkit-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+    -o-transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
+    transition: left ease-in-out 0.3s, padding ease-in-out 0.3s;
     position: absolute;
     top: 0;
     right: 0;
@@ -374,9 +364,9 @@
 .criticReview {
     margin: 1.5em 0;
     background: #222;
-    padding: .8em .8em .8em 3em;
-    -webkit-border-radius: .3em;
-    border-radius: .3em;
+    padding: 0.8em 0.8em 0.8em 3em;
+    -webkit-border-radius: 0.3em;
+    border-radius: 0.3em;
     position: relative;
 }
 
@@ -548,8 +538,8 @@
 
 .itemDetailImage {
     width: 100% !important;
-    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 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
 @media all and (max-width: 62.5em) {
@@ -573,6 +563,15 @@
     margin-bottom: 0.5em;
 }
 
+.btnSyncComplete {
+    background: #673ab7 !important;
+}
+
+.btnSyncComplete i {
+    -webkit-border-radius: 100em;
+    border-radius: 100em;
+}
+
 .emby-button.detailFloatingButton {
     position: absolute;
     background-color: rgba(0, 0, 0, 0.5) !important;
@@ -581,7 +580,7 @@
     left: 50%;
     margin: -2.2em 0 0 -2.2em;
     padding: 0.4em !important;
-    color: rgba(255, 255, 255, .76);
+    color: rgba(255, 255, 255, 0.76);
 }
 
 .emby-button.detailFloatingButton i {
@@ -618,7 +617,7 @@
 .mainDetailButtons {
     display: flex;
     display: -webkit-box;
-    display: -webkit-flex
+    display: -webkit-flex;
 }
 
 .itemName {
@@ -649,7 +648,7 @@
 
 .recordingFields button {
     margin-left: 0;
-    margin-right: .5em;
+    margin-right: 0.5em;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }
@@ -856,15 +855,6 @@
     }
 }
 
-.btnSyncComplete {
-    background: #673ab7 !important;
-}
-
-.btnSyncComplete i {
-    -webkit-border-radius: 100em;
-    border-radius: 100em
-}
-
 .bulletSeparator {
     margin: 0 0.35em;
 }

src/assets/css/scrollstyles.css

@@ -9,7 +9,8 @@
     scroll-behavior: smooth;
 }
 
-.hiddenScrollX, .layout-tv .scrollX {
+.hiddenScrollX,
+ .layout-tv .scrollX {
     -ms-overflow-style: none;
 }
 
@@ -17,7 +18,8 @@
     overflow: -moz-scrollbars-none;
 }
 
-.hiddenScrollX::-webkit-scrollbar, .layout-tv .scrollX::-webkit-scrollbar {
+.hiddenScrollX::-webkit-scrollbar,
+ .layout-tv .scrollX::-webkit-scrollbar {
     height: 0 !important;
     display: none;
 }
@@ -35,17 +37,22 @@
     scroll-behavior: smooth;
 }
 
-.hiddenScrollY, .layout-tv .smoothScrollY {
+.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;*/
+
+    /* overflow: -moz-scrollbars-none; */
 }
 
 .hiddenScrollY-forced {
     overflow: -moz-scrollbars-none;
 }
 
-.hiddenScrollY::-webkit-scrollbar, .layout-tv .smoothScrollY::-webkit-scrollbar, .layout-tv .scrollY::-webkit-scrollbar {
+.hiddenScrollY::-webkit-scrollbar,
+ .layout-tv .smoothScrollY::-webkit-scrollbar,
+ .layout-tv .scrollY::-webkit-scrollbar {
     width: 0 !important;
     display: none;
 }

src/assets/css/site.css

@@ -31,7 +31,7 @@ html {
 body {
     overflow-x: hidden;
     background-color: transparent !important;
-    -webkit-font-smoothing: antialiased
+    -webkit-font-smoothing: antialiased;
 }
 
 .mainAnimatedPage {

src/assets/css/videoosd.css

@@ -3,7 +3,7 @@
     user-select: none;
     -webkit-user-select: none;
     -moz-user-select: none;
-    -ms-user-select: none
+    -ms-user-select: none;
 }
 
 .osdPoster img,
@@ -15,9 +15,9 @@
 }
 
 .osdHeader {
-    -webkit-transition: opacity .3s ease-out;
-    -o-transition: opacity .3s ease-out;
-    transition: opacity .3s ease-out;
+    -webkit-transition: opacity 0.3s ease-out;
+    -o-transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
     position: relative;
     z-index: 1;
     background: rgba(0, 0, 0, 0.7) !important;
@@ -118,7 +118,7 @@
 }
 
 .videoOsdBottom .buttons {
-    padding: .25em 0 0;
+    padding: 0.25em 0 0;
     display: -webkit-box;
     display: -webkit-flex;
     display: flex;
@@ -142,7 +142,7 @@
     display: -webkit-box;
     display: -webkit-flex;
     align-items: center;
-    -webkit-box-align: center
+    -webkit-box-align: center;
 }
 
 .volumeButtons {
@@ -224,28 +224,28 @@
 @-moz-keyframes spin {
     100% {
         -moz-transform: rotate(360deg);
-        transform:rotate(360deg);
+        transform: rotate(360deg);
     }
 }
 
 @-webkit-keyframes spin {
     100% {
         -webkit-transform: rotate(360deg);
-        transform:rotate(360deg);
+        transform: rotate(360deg);
     }
 }
 
 @keyframes spin {
     100% {
         -webkit-transform: rotate(360deg);
-        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;
+    -webkit-animation: spin 4s linear infinite;
+    -moz-animation: spin 4s linear infinite;
+    animation: spin 4s linear infinite;
 }
 
 .pageContainer {
@@ -276,7 +276,8 @@
 }
 
 @media all and (max-width: 50em) {
-    .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
+    .videoOsdBottom .btnFastForward,
+ .videoOsdBottom .btnRewind {
         display: none !important;
     }
 }

src/components/cardbuilder/card.css

@@ -18,7 +18,7 @@ button::-moz-focus-inner {
     padding: 0;
     display: block;
     color: inherit !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     outline: none !important;
     cursor: pointer;
     contain: layout style;
@@ -55,17 +55,27 @@ button::-moz-focus-inner {
     contain: layout style;
 }
 
-.cardPadder-backdrop, .cardPadder-mixedBackdrop, .cardPadder-smallBackdrop, .cardPadder-overflowBackdrop, .cardPadder-overflowSmallBackdrop {
+.cardPadder-backdrop,
+ .cardPadder-mixedBackdrop,
+ .cardPadder-smallBackdrop,
+ .cardPadder-overflowBackdrop,
+ .cardPadder-overflowSmallBackdrop {
     padding-bottom: 56.25%;
     contain: strict;
 }
 
-.cardPadder-square, .cardPadder-mixedSquare, .cardPadder-overflowSquare, .overflowSquareCard-textCardPadder {
+.cardPadder-square,
+ .cardPadder-mixedSquare,
+ .cardPadder-overflowSquare,
+ .overflowSquareCard-textCardPadder {
     padding-bottom: 100%;
     contain: strict;
 }
 
-.cardPadder-portrait, .cardPadder-mixedPortrait, .cardPadder-overflowPortrait, .overflowPortraitCard-textCardPadder {
+.cardPadder-portrait,
+ .cardPadder-mixedPortrait,
+ .cardPadder-overflowPortrait,
+ .overflowPortraitCard-textCardPadder {
     padding-bottom: 150%;
     contain: strict;
 }
@@ -80,8 +90,9 @@ button::-moz-focus-inner {
     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);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     outline: none !important;
     contain: layout;
     contain: style;
@@ -156,6 +167,7 @@ button::-moz-focus-inner {
     position: relative;
     background-clip: content-box !important;
     color: inherit;
+
     /* This is only needed for scalable cards */
     height: 100%;
     contain: strict;
@@ -177,13 +189,16 @@ button::-moz-focus-inner {
     left: 0;
     right: 0;
     bottom: 0;
+
     /* Needed in case this is a button */
     display: block;
+
     /* Needed in case this is a button */
     margin: 0 !important;
+
     /* Needed in safari */
     height: 100%;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     outline: none !important;
     contain: strict;
 }
@@ -227,6 +242,7 @@ button::-moz-focus-inner {
 .cardImage-img {
     max-height: 100%;
     max-width: 100%;
+
     /* This is simply for lazy image purposes, to ensure the image is visible sooner when scrolling */
     min-height: 70%;
     min-width: 70%;
@@ -303,7 +319,7 @@ button::-moz-focus-inner {
     background: transparent;
     padding: 0 !important;
     cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     outline: none !important;
     color: inherit;
     vertical-align: middle;
@@ -475,13 +491,15 @@ button::-moz-focus-inner {
         width: 33.333333333333333333333333333333%;
     }
 
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 33.333333333333333333333333333333%;
     }
 }
 
 @media (min-width: 43.75em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 25%;
     }
 }
@@ -497,7 +515,8 @@ button::-moz-focus-inner {
         width: 50%;
     }
 
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 20%;
     }
 
@@ -517,7 +536,8 @@ button::-moz-focus-inner {
         width: 25%;
     }
 
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 16.666666666666666666666666666667%;
     }
 
@@ -531,7 +551,8 @@ button::-moz-focus-inner {
 }
 
 @media (min-width: 87.5em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 14.285714285714285714285714285714%;
     }
 
@@ -549,13 +570,15 @@ button::-moz-focus-inner {
         width: 20%;
     }
 
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 12.5%;
     }
 }
 
 @media (min-width: 120em) {
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 11.111111111111111111111111111111%;
     }
 }
@@ -565,7 +588,8 @@ button::-moz-focus-inner {
         width: 25%;
     }
 
-    .squareCard, .portraitCard {
+    .squareCard,
+ .portraitCard {
         width: 10%;
     }
 }
@@ -596,7 +620,8 @@ button::-moz-focus-inner {
     width: 72vw;
 }
 
-.overflowSquareCard, .overflowPortraitCard {
+.overflowSquareCard,
+ .overflowPortraitCard {
     width: 40vw;
 }
 
@@ -621,29 +646,34 @@ button::-moz-focus-inner {
 }
 
 @media (min-width: 43.75em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 23.1vw;
     }
 }
 
 @media (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 30vw;
     }
 }
 
 @media (orientation: landscape) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 30vw;
     }
 
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 23.1vw;
     }
 }
 
 @media (orientation: landscape) and (min-width: 48.125em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 23.1vw;
     }
 }
@@ -655,51 +685,60 @@ button::-moz-focus-inner {
 }
 
 @media (min-width: 50em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 18.5vw;
     }
 }
 
 @media (min-width: 75em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 23.1vw;
     }
 
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 15.5vw;
     }
 }
 
 @media (min-width: 87.5em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 13.3vw;
     }
 }
 
 @media (min-width: 100em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 18.7vw;
     }
 
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 11.6vw;
     }
 }
 
 @media (min-width: 120em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 10.3vw;
     }
 }
 
 @media (min-width: 131.25em) {
-    .overflowSquareCard, .overflowPortraitCard {
+    .overflowSquareCard,
+ .overflowPortraitCard {
         width: 9.3vw;
     }
 }
 
 @media (min-width: 156.25em) {
-    .overflowBackdropCard, .overflowSmallBackdropCard {
+    .overflowBackdropCard,
+ .overflowSmallBackdropCard {
         width: 15.6vw;
     }
 }
@@ -716,7 +755,8 @@ button::-moz-focus-inner {
     padding-bottom: 87.75%;
 }
 
-.itemsContainer-tv > .overflowSquareCard, .itemsContainer-tv > .overflowPortraitCard {
+.itemsContainer-tv > .overflowSquareCard,
+ .itemsContainer-tv > .overflowPortraitCard {
     width: 15.6vw;
 }
 

src/components/dialogHelper/dialoghelper.css

@@ -15,11 +15,12 @@
 
 .dialog {
     margin: 0;
-    border-radius: .2em;
+    border-radius: 0.2em;
     -webkit-font-smoothing: antialiased;
     border: 0;
     padding: 0;
     will-change: transform, opacity;
+
     /* Strict does not work well with actionsheet */
     contain: style paint;
     box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.4);
@@ -112,7 +113,8 @@
 }
 
 @media all and (max-width: 80em), all and (max-height: 45em) {
-    .dialog-fixedSize, .dialog-fullscreen-lowres {
+    .dialog-fixedSize,
+ .dialog-fullscreen-lowres {
         position: fixed !important;
         top: 0 !important;
         bottom: 0 !important;

src/components/formdialog.css

@@ -12,7 +12,8 @@
 }
 
 .formDialogHeaderTitle {
-    margin-left: .25em;
+    margin-left: 0.25em;
+
     /* In case of h1, h2, h3 */
     margin-top: 0;
     margin-bottom: 0;
@@ -46,6 +47,7 @@
     display: flex;
     position: absolute;
     padding: 1.25em 1em;
+
     /* Without this emby-checkbox is able to appear on top */
     z-index: 1;
     align-items: center;

src/components/guide/guide.css

@@ -91,24 +91,28 @@
     flex-shrink: 0;
 }
 
-.channelPrograms, .timeslotHeadersInner {
+.channelPrograms,
+ .timeslotHeadersInner {
     width: 1800vw;
 }
 
 @media all and (min-width: 37.5em) {
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+ .timeslotHeadersInner {
         width: 1400vw;
     }
 }
 
 @media all and (min-width: 50em) {
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+ .timeslotHeadersInner {
         width: 1200vw;
     }
 }
 
 @media all and (min-width: 80em) {
-    .channelPrograms, .timeslotHeadersInner {
+    .channelPrograms,
+ .timeslotHeadersInner {
         width: 810vw;
     }
 }
@@ -120,11 +124,13 @@
     width: 2.0833333333333333333333333333333%;
 }
 
-.programCell, .guide-channelHeaderCell {
+.programCell,
+ .guide-channelHeaderCell {
     outline: none !important;
 }
 
-.guide-channelHeaderCell, .guide-channelTimeslotHeader {
+.guide-channelHeaderCell,
+ .guide-channelTimeslotHeader {
     padding: 0 !important;
     cursor: pointer;
     outline: none !important;
@@ -138,6 +144,7 @@
     display: flex;
     align-items: center;
     text-decoration: none;
+
     /* Needed in firefox */
     text-align: left;
     contain: strict;
@@ -159,30 +166,35 @@
 /* Important - have to put the fixed width on channelsContainer, not the individual channelHeaderCell
    This was causing channelsContainer to extend beyond the fixed width on ps4, tizen, lg and opera tv.
 */
-.channelsContainer, .guide-channelTimeslotHeader {
+.channelsContainer,
+ .guide-channelTimeslotHeader {
     width: 24vw;
 }
 
 @media all and (min-width: 31.25em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+ .guide-channelTimeslotHeader {
         width: 16vw;
     }
 }
 
 @media all and (min-width: 37.5em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+ .guide-channelTimeslotHeader {
         width: 16vw;
     }
 }
 
 @media all and (min-width: 50em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+ .guide-channelTimeslotHeader {
         width: 14vw;
     }
 }
 
 @media all and (min-width: 80em) {
-    .channelsContainer, .guide-channelTimeslotHeader {
+    .channelsContainer,
+ .guide-channelTimeslotHeader {
         width: 12vw;
     }
 }
@@ -201,20 +213,26 @@
 }
 
 @media all and (max-width: 50em) {
-    .newTvProgram, .liveTvProgram, .premiereTvProgram, .guideHdIcon {
+    .newTvProgram,
+ .liveTvProgram,
+ .premiereTvProgram,
+ .guideHdIcon {
         display: none;
     }
 }
 
-    .channelPrograms + .channelPrograms, .guide-channelHeaderCell + .guide-channelHeaderCell {
+    .channelPrograms + .channelPrograms,
+ .guide-channelHeaderCell + .guide-channelHeaderCell {
         margin-top: -1px;
     }
 
-.channelPrograms-tv, .guide-channelHeaderCell-tv {
+.channelPrograms-tv,
+ .guide-channelHeaderCell-tv {
     height: 3em;
 }
 
-.guide-channelTimeslotHeader, .timeslotHeader {
+.guide-channelTimeslotHeader,
+ .timeslotHeader {
     background: transparent !important;
     height: 2.8em;
 }
@@ -243,6 +261,7 @@
     text-decoration: none;
     overflow: hidden;
     align-items: center;
+
     /* Needed for Firefox */
     text-align: left;
     contain: strict;
@@ -259,6 +278,7 @@
     position: relative;
     flex-grow: 1;
     contain: layout style paint;
+
     /* transition: transform 60ms ease-out; */
 }
 
@@ -356,11 +376,13 @@
     flex-direction: column;
 }
 
-.channelsContainer, .programGrid {
+.channelsContainer,
+ .programGrid {
     contain: layout style paint;
 }
 
-.timerIcon, .seriesTimerIcon {
+.timerIcon,
+ .seriesTimerIcon {
     color: #c33 !important;
 }
 

src/components/homesections/homesections.css

@@ -10,8 +10,8 @@
 }
 
 .homeLibraryIcon {
-    margin-left: .5em;
-    margin-right: .5em;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
     -webkit-flex-shrink: 0;
     flex-shrink: 0;
 }

src/components/images/style.css

@@ -1,5 +1,22 @@
 .lazy-image-fadein {
+    opacity: 0;
     animation: lazy-image-fadein 330ms ease-in normal both;
+    -webkit-animation-duration: 0.8s;
+    -moz-animation-duration: 0.8s;
+    -o-animation-duration: 0.8s;
+    animation-duration: 0.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, 0.5, 1);
+    -moz-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    -o-animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
+    animation-timing-function: cubic-bezier(0, 0, 0.5, 1);
 }
 
 .lazy-image-fadein-fast {
@@ -16,26 +33,6 @@
     }
 }
 
-.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);
-}
-
 @keyframes popInAnimation {
     0% {
         opacity: 0;

src/components/imageuploader/style.css

@@ -1,6 +1,7 @@
 .imageEditor-dropZone {
-    border: .2em dashed currentcolor;
-    border-radius: .25em;
+    border: 0.2em dashed currentcolor;
+    border-radius: 0.25em;
+
     /* padding: 1.6em; */
     text-align: center;
     position: relative;

src/components/indicators/indicators.css

@@ -85,7 +85,8 @@
     color: #333;
 }
 
-.missingIndicator, .unairedIndicator {
+.missingIndicator,
+ .unairedIndicator {
     background: #c33;
     padding: 0.25em 0.5em;
     border-radius: 100em;

src/components/listview/listview.css

@@ -53,11 +53,15 @@
     transform: scale(1) !important;
 }
 
-.listItemImage, .listItemIcon, .listItemAside {
+.listItemImage,
+ .listItemIcon,
+ .listItemAside {
     flex-shrink: 0;
 }
 
-.listItemBody, .listItemImage, .listItemIcon {
+.listItemBody,
+ .listItemImage,
+ .listItemIcon {
     display: inline-block;
     vertical-align: middle;
 }
@@ -85,7 +89,9 @@
     justify-content: center;
 }
 
-.listItem, .listItemBody, .listItemMediaInfo {
+.listItem,
+ .listItemBody,
+ .listItemMediaInfo {
     display: flex;
     contain: layout style;
 }
@@ -253,7 +259,9 @@
 }
 
 @media all and (max-width: 50em) {
-    .listItem .endsAt, .listItem .criticRating, .listItem-overview {
+    .listItem .endsAt,
+ .listItem .criticRating,
+ .listItem-overview {
         display: none !important;
     }
 }

src/components/navdrawer/navdrawer.css

@@ -25,8 +25,8 @@
 }
 
 .drawer-open {
-    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
-    box-shadow: 2px 0 12px rgba(0, 0, 0, .4);
+    -webkit-box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
+    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.4);
 }
 
 .scrollContainer {
@@ -40,9 +40,9 @@
     right: 0;
     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;
+    -webkit-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    -o-transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
+    transition: opacity ease-in-out 0.38s, visibility ease-in-out 0.38s;
     will-change: opacity;
     background-color: rgba(0, 0, 0, 0.3);
 }

src/components/nowplayingbar/nowplayingbar.css

@@ -28,7 +28,8 @@
     justify-content: center;
 }
 
-.mediaButton, .nowPlayingBarUserDataButtons .btnUserItemRating {
+.mediaButton,
+ .nowPlayingBarUserDataButtons .btnUserItemRating {
     vertical-align: middle;
     margin: 0;
     text-align: center;
@@ -62,6 +63,7 @@
 .nowPlayingBarCenter {
     vertical-align: middle;
     text-align: center;
+
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
     flex-grow: 1;
@@ -89,7 +91,8 @@
 
 .nowPlayingBarRight {
     position: relative;
-    margin: 0 .5em 0 auto;
+    margin: 0 0.5em 0 auto;
+
     /* Need this to make sure it's on top of nowPlayingBarPositionContainer so that buttons are fully clickable */
     z-index: 2;
     display: flex;
@@ -161,7 +164,8 @@
 }
 
 @media all and (max-width: 24em) {
-    .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+    .nowPlayingBar .muteButton,
+ .nowPlayingBar .unmuteButton {
         display: none;
     }
 }

src/components/remotecontrol/remotecontrol.css

@@ -12,23 +12,23 @@
     text-align: center;
 }
 
-.btnArrowUp{
+.btnArrowUp {
     border-radius: 40% 40% 10% 10%;
 }
 
-.btnArrowLeft{
+.btnArrowLeft {
     border-radius: 40% 10% 10% 40%;
 }
 
-.btnArrowRight{
+.btnArrowRight {
     border-radius: 10% 40% 40% 10%;
 }
 
-.btnArrowDown{
+.btnArrowDown {
     border-radius: 10% 10% 40% 40%;
 }
 
-.btnOk{
+.btnOk {
     border-radius: 10%;
 }
 
@@ -55,7 +55,7 @@
 .nowPlayingTime {
     display: flex;
     display: -webkit-box;
-    display: -webkit-flex
+    display: -webkit-flex;
 }
 
 .nowPlayingPageImageContainer {
@@ -99,7 +99,7 @@
     -moz-user-select: none;
     -webkit-user-drag: none;
     -webkit-user-select: none;
-    -ms-user-select: none
+    -ms-user-select: none;
 }
 
 @media all and (orientation: portrait) and (max-width: 50em) {
@@ -218,7 +218,8 @@
     .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
         display: none !important;
     }
-    .navigationSection .collapseContent i{
+
+    .navigationSection .collapseContent i {
         font-size: 4em;
     }
 }

src/components/slideshow/style.css

@@ -3,11 +3,14 @@
     background: #000;
 }
 
-.slideshowSwiperContainer, .swiper-wrapper, .swiper-slide {
+.slideshowSwiperContainer,
+ .swiper-wrapper,
+ .swiper-slide {
     background: #000;
 }
 
-.slideshowImage, .slideshowSwiperContainer {
+.slideshowImage,
+ .slideshowSwiperContainer {
     position: fixed;
     top: 0;
     right: 0;
@@ -32,6 +35,7 @@
     color: #fff;
     z-index: 1002;
     font-weight: normal;
+
     /* Add an outline */
     text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
 }

src/components/viewManager/viewContainer.css

@@ -5,7 +5,9 @@
     right: 0;
     bottom: 0;
     contain: layout style size;
+
     /* Can't use will-change because it causes the alpha picker to move when the page scrolls */
+
     /* will-change: transform; */
 }
 

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

@@ -8,6 +8,7 @@
     font-size: inherit;
     font-family: inherit;
     color: inherit;
+
     /* These are getting an outline in opera tv browsers, which run chrome 30 */
     outline: none !important;
     outline-width: 0;
@@ -22,9 +23,11 @@
     border: 0;
     border-radius: 0.2em;
     font-weight: 600;
+
     /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     text-decoration: none;
+
     /* Not crazy about this but it normalizes heights between anchors and buttons */
     line-height: 1.35;
     transform-origin: center;
@@ -110,12 +113,14 @@
     padding: 0.556em;
     vertical-align: middle;
     border: 0;
+
     /* These are getting an outline in opera tv browsers, which run chrome 30 */
     outline: none !important;
     overflow: hidden;
     border-radius: 50%;
+
     /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     justify-content: center;
     transform-origin: center;
     transition: 0.2s;
@@ -137,6 +142,7 @@
 
     .paper-icon-button-light > i {
         font-size: 1.66956521739130434em;
+
         /* Make sure its on top of the ripple */
         position: relative;
         z-index: 1;

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

@@ -32,6 +32,7 @@
 
 .emby-checkbox {
     position: absolute;
+
     /* This is for focusing purposes, so the focusManager doesn't skip over it */
     width: 1px;
     height: 1px;

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

@@ -2,18 +2,22 @@
     display: block;
     margin: 0;
     margin-bottom: 0 !important;
+
     /* Remove select styling */
+
     /* Font size must the 16px or larger to prevent iOS page zoom on focus */
     font-size: 110%;
+
     /* General select styles: change as needed */
     font-family: inherit;
     font-weight: inherit;
-    padding: .4em .25em;
+    padding: 0.4em 0.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);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
 }
 

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

@@ -17,6 +17,7 @@
 .mdl-radio__button {
     line-height: 24px;
     position: absolute;
+
     /* 1px is for focusing purposes, so the focusManager doesn't skip over it */
     width: 1px;
     height: 1px;

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

@@ -2,17 +2,21 @@
     display: block;
     margin: 0;
     margin-bottom: 0 !important;
+
     /* Remove select styling */
+
     /* Font size must the 16px or larger to prevent iOS page zoom on focus */
     font-size: 110%;
+
     /* General select styles: change as needed */
     font-family: inherit;
     font-weight: inherit;
-    padding: .5em 1.9em .5em .5em;
+    padding: 0.5em 1.9em 0.5em 0.5em;
+
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
 }
 

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

@@ -25,8 +25,9 @@
     z-index: 1;
     cursor: pointer;
     margin: 0;
+
     /* Disable webkit tap highlighting */
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     display: block;
 }
 
@@ -199,6 +200,7 @@
 
 .mdl-slider-background-lower-withtransform {
     width: 100%;
+
     /* transition: transform 0.18s cubic-bezier(0.4, 0, 0.2, 1); */
     transform-origin: left center;
     transform: scaleX(0);

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

@@ -2,18 +2,22 @@
     display: block;
     margin: 0;
     margin-bottom: 0 !important;
+
     /* Remove select styling */
+
     /* Font size must the 16px or larger to prevent iOS page zoom on focus */
     font-size: inherit;
+
     /* General select styles: change as needed */
     font-family: inherit;
     font-weight: inherit;
     color: inherit;
-    padding: .35em .25em;
+    padding: 0.35em 0.25em;
+
     /* Prevent padding from causing width overflow */
     box-sizing: border-box;
     outline: none !important;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     width: 100%;
 }
 

src/themes/appletv/theme.css

@@ -23,10 +23,10 @@ html {
 .skinHeader-withBackground {
     color: rgba(0, 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);
+    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 {
@@ -44,16 +44,16 @@ html {
 
 .backgroundContainer,
 .dialog {
-    background: #D5E9F2;
+    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));
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(192, 212, 222, 0.94)), color-stop(rgba(235, 250, 254, 0.94)), color-stop(rgba(227, 220, 212, 0.94)), color-stop(rgba(206, 214, 216, 0.94)), to(rgba(192, 211, 218, 0.94)));
+    background: -webkit-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
+    background: -o-linear-gradient(top, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
+    background: linear-gradient(to bottom, rgba(192, 212, 222, 0.94), rgba(235, 250, 254, 0.94), rgba(227, 220, 212, 0.94), rgba(206, 214, 216, 0.94), rgba(192, 211, 218, 0.94));
 }
 
 .actionSheet {
@@ -189,10 +189,10 @@ html {
 .formDialogFooter:not(.formDialogFooter-clear) {
     color: rgba(0, 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);
+    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);
 }
 
 .nowPlayingBarSecondaryText {
@@ -254,10 +254,10 @@ html {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgba(255, 255, 255, .9);
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    background: rgba(255, 255, 255, 0.9);
+    border: 0.07em solid rgba(0, 0, 0, 0.158);
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -408,8 +408,8 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {

src/themes/blueradiance/theme.css

@@ -17,20 +17,20 @@ 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);
+    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: -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));
-    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .pageTitleWithDefaultLogo {
@@ -251,10 +251,10 @@ html {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent;
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0.07em solid transparent;
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -411,8 +411,8 @@ html {
     color: #ddd;
     background: #111;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {
@@ -438,8 +438,8 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-track-piece {

src/themes/dark/theme.css

@@ -226,9 +226,9 @@ html {
 .emby-textarea {
     color: inherit;
     background: #292929;
-    border: .07em solid #292929;
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    border: 0.07em solid #292929;
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -381,8 +381,8 @@ html {
     color: #ddd;
     background: #111;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {
@@ -408,8 +408,8 @@ html {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-track-piece {

src/themes/light/theme.css

@@ -22,9 +22,9 @@ html {
 .skinHeader-withBackground {
     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);
+    color: rgba(255, 255, 255, 0.87);
+    -webkit-box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
+    box-shadow: 0 0.0725em 0.29em 0 rgba(0, 0, 0, 0.37);
 }
 
 .osdHeader {
@@ -248,9 +248,9 @@ html {
 .emby-textarea {
     color: inherit;
     background: #fff;
-    border: .07em solid rgba(0, 0, 0, .158);
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    border: 0.07em solid rgba(0, 0, 0, 0.158);
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -400,8 +400,8 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {

src/themes/purplehaze/theme.css

@@ -18,18 +18,18 @@ 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%);
+    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%);
 }
 
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    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));
-    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .pageTitleWithDefaultLogo {
@@ -339,10 +339,10 @@ a[data-role=button] {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgba(0, 0, 0, .5);
-    border: .07em solid transparent;
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    background: rgba(0, 0, 0, 0.5);
+    border: 0.07em solid transparent;
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -504,8 +504,8 @@ a[data-role=button] {
     color: #0e0f2d;
     background: #dbe6ff;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {
@@ -542,8 +542,8 @@ a[data-role=button] {
 }
 
 ::-webkit-scrollbar-track {
-    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
-    box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-track-piece {

src/themes/wmc/theme.css

@@ -32,11 +32,11 @@ html {
 .skinHeader.semiTransparent {
     -webkit-backdrop-filter: none !important;
     backdrop-filter: none !important;
-    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));
-    background-color: rgba(0, 0, 0, .3);
+    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.6)), to(rgba(0, 0, 0, 0)));
+    background: -webkit-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: -o-linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0));
+    background-color: rgba(0, 0, 0, 0.3);
 }
 
 .pageTitleWithDefaultLogo {
@@ -45,11 +45,11 @@ html {
 
 .backgroundContainer,
 .dialog {
-    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);
-    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);
+    background-color: #0f3562;
 }
 
 .backgroundContainer.withBackdrop {
@@ -169,12 +169,12 @@ 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);
+    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, 0.78);
 }
 
 .itemSelectionPanel {
@@ -237,10 +237,10 @@ html {
 .emby-input,
 .emby-textarea {
     color: inherit;
-    background: rgba(255, 255, 255, .2);
-    border: .07em solid rgba(255, 255, 255, .135);
-    -webkit-border-radius: .15em;
-    border-radius: .15em;
+    background: rgba(255, 255, 255, 0.2);
+    border: 0.07em solid rgba(255, 255, 255, 0.135);
+    -webkit-border-radius: 0.15em;
+    border-radius: 0.15em;
 }
 
 .emby-input:focus,
@@ -395,8 +395,8 @@ html {
     color: #000;
     background: #fff3a5;
     padding: 1em;
-    -webkit-border-radius: .25em;
-    border-radius: .25em;
+    -webkit-border-radius: 0.25em;
+    border-radius: 0.25em;
 }
 
 .ratingbutton-icon-withrating {
@@ -422,8 +422,8 @@ 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);
+    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
 }
 
 ::-webkit-scrollbar-track-piece {
@@ -439,7 +439,7 @@ html {
 ::-webkit-scrollbar-thumb:vertical {
     border-radius: 2px;
     -webkit-border-radius: 2px;
-    background: center no-repeat rgba(255, 255, 255, .7);
+    background: center no-repeat rgba(255, 255, 255, 0.7);
 }
 
 .metadataSidebarIcon {