Fix no-descending-specificity (CSS)

src/assets/css/dashboard.css

@@ -49,8 +49,9 @@ progress[aria-valuenow]:before {
 
 @media all and (min-width:50em) {
 
-    .type-interior>.ui-panel-content-wrap>div[data-role=content],
+    .type-interior>div[data-role=content],
-    .type-interior>div[data-role=content] {
+    .type-interior>.ui-panel-content-wrap>div[data-role=content]
+     {
         padding-right: 0;
         padding-left: 0;
         padding-top: 0;
@@ -74,6 +75,22 @@ progress[aria-valuenow]:before {
     height: 4em
 }
 
+a[data-role=button] {
+    background: #292929 !important;
+    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;
+    margin: 0 .25em !important;
+    display: inline-block;
+    padding: .8em 1em;
+    text-align: center;
+    text-decoration: none !important;
+}
+
 div[data-role=controlgroup] a[data-role=button] {
     display: inline-block !important;
     margin: 0 !important;
@@ -107,6 +124,24 @@ div[data-role=controlgroup] a.ui-btn-active {
     color: #292929 !important
 }
 
+.sessionAppInfo img {
+    max-width: 40px;
+    max-height: 40px;
+    margin-right: 8px;
+}
+
+.appLinks img {
+    height: 36px
+}
+
+.wizardContent h2 img {
+    height: 2.5em;
+    vertical-align: middle;
+    margin-right: .5em;
+    position: relative;
+    top: -.3em
+}
+
 .header .imageLink {
     display: inline-block
 }
@@ -167,6 +202,18 @@ div[data-role=controlgroup] a.ui-btn-active {
     flex-grow: 1
 }
 
+.sessionNowPlayingContent {
+    -webkit-background-size: cover;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center center;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0
+}
+
 .activeSession:not(.playingSession) .sessionNowPlayingContent {
     display: none
 }
@@ -213,15 +260,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     }
 }
 
-.premiumBanner img {
-    position: absolute;
-    text-align: right;
-    top: 0;
-    right: 0;
-    width: 4.4em;
-    height: 4.4em
-}
-
 .wizardContent {
     max-width: 62em;
     padding: .5em 2em 1em;
@@ -237,14 +275,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     max-width: 100%
 }
 
-.wizardContent h2 img {
-    height: 2.5em;
-    vertical-align: middle;
-    margin-right: .5em;
-    position: relative;
-    top: -.3em
-}
-
 .scheduledTaskPaperIconItem {
     outline: 0 !important
 }
@@ -296,18 +326,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin: 0
 }
 
-.sessionNowPlayingContent {
-    -webkit-background-size: cover;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0
-}
-
 .sessionNowPlayingInnerContent {
     position: absolute;
     top: 0;
@@ -340,12 +358,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     padding: 0.8em 0.5em;
 }
 
-.sessionAppInfo img {
-    max-width: 40px;
-    max-height: 40px;
-    margin-right: 8px;
-}
-
 .sessionNowPlayingTime {
     flex-shrink: 0;
     align-self: flex-end;
@@ -357,6 +369,13 @@ div[data-role=controlgroup] a.ui-btn-active {
     white-space: nowrap;
 }
 
+.playbackProgress,
+.transcodingProgress {
+    margin: 0px;
+    width: 100%;
+    background: transparent !important;
+}
+
 .activeSession .playbackProgress,
 .activeSession .transcodingProgress {
     position: absolute;
@@ -367,13 +386,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     width: 100%;
 }
 
-.playbackProgress,
-.transcodingProgress {
-    margin: 0px;
-    width: 100%;
-    background: transparent !important;
-}
-
 .playbackProgress > div {
     z-index: 1000;
     background-color: #00a4dc;
@@ -412,26 +424,6 @@ div[data-role=controlgroup] a.ui-btn-active {
     margin-left: 5px
 }
 
-.appLinks img {
-    height: 36px
-}
-
-a[data-role=button] {
-    background: #292929 !important;
-    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;
-    margin: 0 .25em !important;
-    display: inline-block;
-    padding: .8em 1em;
-    text-align: center;
-    text-decoration: none !important;
-}
-
 @-webkit-keyframes rotating {
     from {
         -webkit-transform: rotate(0);

src/assets/css/librarybrowser.css

@@ -84,6 +84,22 @@
     display: none
 }
 
+.headerLeft,
+.headerRight {
+    justify-content: center;
+}
+
+.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
+}
+
 .noHeaderRight .headerRight,
 .noHomeButtonHeader .headerHomeButton {
     display: none !important
@@ -164,17 +180,6 @@
     width: 100%
 }
 
-.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
-}
-
 .selectedMediaFolder {
     background-color: #f2f2f2 !important
 }
@@ -358,6 +363,11 @@
     margin: 0 0 .25em
 }
 
+.listTopPaging,
+.viewControls {
+    display: inline-block
+}
+
 .viewControls+.listTopPaging {
     margin-left: .5em !important
 }
@@ -445,15 +455,6 @@
     bottom: .75em
 }
 
-.layout-mobile .detailPagePrimaryContainer {
-    display: block;
-    position: relative;
-}
-
-.layout-tv .detailPagePrimaryContainer {
-    position: relative;
-}
-
 .detailPagePrimaryContainer {
     display: flex;
     align-items: center;
@@ -464,6 +465,15 @@
     z-index: 2;
 }
 
+.layout-mobile .detailPagePrimaryContainer {
+    display: block;
+    position: relative;
+}
+
+.layout-tv .detailPagePrimaryContainer {
+    position: relative;
+}
+
 .infoWrapper {
     flex: 1 0 0;
 }
@@ -483,11 +493,6 @@
     padding-right: 2%;
 }
 
-.layout-mobile .detailImageContainer,
-.layout-tv .detailImageContainer {
-    position: relative;
-}
-
 .detailImageContainer {
     margin: 1.25em 0;
     position: sticky;
@@ -496,6 +501,11 @@
     width: 22.786458333333332vw;
 }
 
+.layout-mobile .detailImageContainer,
+.layout-tv .detailImageContainer {
+    position: relative;
+}
+
 .detailPagePrimaryContent {
     position: relative;
     -webkit-box-flex: 1;
@@ -741,11 +751,6 @@
     }
 }
 
-.listTopPaging,
-.viewControls {
-    display: inline-block
-}
-
 @media all and (max-width:50em) {
     .editorMenuLink {
         display: none

src/components/cardbuilder/card.css

@@ -1,12 +1,12 @@
+button {
+    -webkit-border-fit: border !important;
+}
+
 button::-moz-focus-inner {
     padding: 0;
     border: 0;
 }
 
-button {
-    -webkit-border-fit: border !important;
-}
-
 .card {
     border: 0;
     font-size: inherit !important;
@@ -87,6 +87,11 @@ button {
     contain: style;
 }
 
+.card.show-animation .cardBox {
+    will-change: transform;
+    transition: transform 200ms ease-out;
+}
+
 .card.show-focus:not(.show-animation) .cardBox {
     margin: .4em;
 }
@@ -96,11 +101,6 @@ button {
     border: .5em solid transparent;
 }
 
-.card.show-animation .cardBox {
-    will-change: transform;
-    transition: transform 200ms ease-out;
-}
-
 .card.show-animation:focus > .cardBox {
     transform: scale(1.18, 1.18);
 }
@@ -298,6 +298,23 @@ button {
     padding-top: .24em;
 }
 
+.textActionButton {
+    border: 0 !important;
+    background: transparent;
+    padding: 0 !important;
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+    outline: none !important;
+    color: inherit;
+    vertical-align: middle;
+    font-family: inherit;
+    font-size: inherit;
+}
+
+.textActionButton:hover {
+    text-decoration: underline;
+}
+
 .cardText > .textActionButton {
     width: 100%;
     overflow: hidden;
@@ -337,23 +354,6 @@ button {
     text-align: center;
 }
 
-.textActionButton {
-    border: 0 !important;
-    background: transparent;
-    padding: 0 !important;
-    cursor: pointer;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);
-    outline: none !important;
-    color: inherit;
-    vertical-align: middle;
-    font-family: inherit;
-    font-size: inherit;
-}
-
-.textActionButton:hover {
-    text-decoration: underline;
-}
-
 .cardImageIcon {
     font-size: 5em;
     color: inherit;

src/components/guide/guide.css

@@ -123,6 +123,10 @@
     width: 2.0833333333333333333333333333333%;
 }
 
+.programCell, .guide-channelHeaderCell {
+    outline: none !important;
+}
+
 .guide-channelHeaderCell, .guide-channelTimeslotHeader {
     padding: 0 !important;
     cursor: pointer;
@@ -362,10 +366,6 @@
     contain: layout style paint;
 }
 
-.programCell, .guide-channelHeaderCell {
-    outline: none !important;
-}
-
 .timerIcon, .seriesTimerIcon {
     color: #cc3333 !important;
 }

src/components/listview/listview.css

@@ -85,6 +85,11 @@
     justify-content: center;
 }
 
+.listItem, .listItemBody, .listItemMediaInfo {
+    display: flex;
+    contain: layout style;
+}
+
 .layout-tv .listItemBody {
     padding: .35em .75em;
 }
@@ -241,11 +246,6 @@
     align-items: center;
 }
 
-.listItem, .listItemBody, .listItemMediaInfo {
-    display: flex;
-    contain: layout style;
-}
-
 .listItem-bottomoverview {
     font-size: 88%;
     margin-bottom: 1em;

src/components/loading/loading.css

@@ -345,19 +345,6 @@
     }
 }
 
-.mdl-spinner__circle-clipper {
-    display: inline-block;
-    position: relative;
-    width: 50%;
-    height: 100%;
-    overflow: hidden;
-    border-color: inherit;
-}
-
-    .mdl-spinner__circle-clipper .mdl-spinner__circle {
-        width: 200%;
-    }
-
 .mdl-spinner__circle {
     box-sizing: border-box;
     height: 100%;
@@ -375,6 +362,19 @@
     left: 0;
 }
 
+.mdl-spinner__circle-clipper {
+    display: inline-block;
+    position: relative;
+    width: 50%;
+    height: 100%;
+    overflow: hidden;
+    border-color: inherit;
+}
+
+    .mdl-spinner__circle-clipper .mdl-spinner__circle {
+        width: 200%;
+    }
+
 .mdl-spinner__circleLeft {
     border-right-color: transparent !important;
     -webkit-transform: rotate(129deg);

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

@@ -25,6 +25,10 @@
         appearance: none;
     }
 
+.emby-select::-moz-focus-inner {
+    border: 0;
+}
+
 .selectContainer-inline > .emby-select {
     padding: .3em 1.9em .3em .5em;
     font-size: inherit;
@@ -35,10 +39,6 @@
         padding-right: 0;
     }
 
-.emby-select::-moz-focus-inner {
-    border: 0;
-}
-
 .emby-select-focusscale {
     transition: transform 180ms ease-out !important;
     -webkit-transform-origin: center center;

src/themes/appletv/theme.css

@@ -280,6 +280,11 @@ html {
     border-color: #fff;
 }
 
+.emby-checkbox:checked+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #00a4dc
+}
+
 .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
     border-color: #00a4dc;
 }
@@ -294,11 +299,6 @@ html {
     color: #fff
 }
 
-.emby-checkbox:checked+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #00a4dc
-}
-
 .itemProgressBarForeground-recording {
     background-color: #CB272A
 }

src/themes/blueradiance/theme.css

@@ -290,15 +290,15 @@ html {
     border-color: #fff;
 }
 
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border-color: #00a4dc;
-}
-
 .emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }
 
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
 .itemProgressBarForeground-recording {
     background-color: #CB272A
 }
@@ -437,11 +437,6 @@ html {
     border-color: #00a4dc !important
 }
 
-.layout-desktop ::-webkit-scrollbar {
-    width: 1em;
-    height: 1em
-}
-
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
@@ -450,6 +445,11 @@ html {
     background-color: #3b3b3b
 }
 
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;

src/themes/dark/theme.css

@@ -264,15 +264,15 @@ html {
     border-color: #fff;
 }
 
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border-color: #00a4dc;
-}
-
 .emby-checkbox:checked+span+.checkboxOutline,
 .itemProgressBarForeground {
     background-color: #00a4dc
 }
 
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border-color: #00a4dc;
+}
+
 .itemProgressBarForeground-recording {
     background-color: #CB272A
 }
@@ -407,11 +407,6 @@ html {
     border-color: #00a4dc !important
 }
 
-.layout-desktop ::-webkit-scrollbar {
-    width: 1em;
-    height: 1em
-}
-
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
@@ -420,6 +415,11 @@ html {
     background-color: #3b3b3b
 }
 
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;

src/themes/light/theme.css

@@ -273,6 +273,11 @@ html {
     border-color: #000;
 }
 
+.emby-checkbox:checked+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #00a4dc
+}
+
 .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
     border-color: #00a4dc;
 }
@@ -287,11 +292,6 @@ html {
     color: #fff
 }
 
-.emby-checkbox:checked+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #00a4dc
-}
-
 .itemProgressBarForeground-recording {
     background-color: #CB272A
 }

src/themes/purplehaze/theme.css

@@ -117,6 +117,20 @@ a[data-role=button] {
     color: rgb(225, 229, 242)
 }
 
+#btnResetPassword,
+.btnForgotPassword,
+.btnCancel,
+.button-cancel {
+    background: rgba(0, 0, 0, .5);
+    color: rgba(255, 255, 255, .87);
+}
+
+.alphaPickerButton {
+    color: #999;
+    color: rgba(255, 255, 255, .5);
+    background-color: transparent
+}
+
 #btnResetPassword:hover,
 #btnRestart:hover,
 #btnDeleteImage:hover,
@@ -148,14 +162,6 @@ a[data-role=button] {
     color: rgba(255, 255, 255, .87)
 }
 
-#btnResetPassword,
-.btnForgotPassword,
-.btnCancel,
-.button-cancel {
-    background: rgba(0, 0, 0, .5);
-    color: rgba(255, 255, 255, .87);
-}
-
 .itemName {
     color: #f1f7ee
 }
@@ -289,12 +295,6 @@ a[data-role=button] {
     color: #48C3C8
 }
 
-.alphaPickerButton {
-    color: #999;
-    color: rgba(255, 255, 255, .5);
-    background-color: transparent
-}
-
 .alphaPickerButton-selected {
     color: #0ce8d6
 }
@@ -379,14 +379,14 @@ a[data-role=button] {
     color: rgb(12, 232, 214);
 }
 
-.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
-    border:2px solid #ff77f1;
-}
-
 .emby-checkbox:focus+span+.checkboxOutline {
     border-color: #ff77f1;
 }
 
+.emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
+    border:2px solid #ff77f1;
+}
+
 .itemProgressBarForeground {
     background-color: rgb(12, 232, 214);
 }
@@ -525,6 +525,11 @@ a[data-role=button] {
     color: #4285F4
 }
 
+.personCard .cardScalable {
+    border-radius: 50%;
+    border: 1px solid rgb(255, 255, 255);
+}
+
 .card:focus .cardBox.visualCardBox,
 .card:focus .cardBox:not(.visualCardBox) .cardScalable {
     border-color: #ff77f1 !important
@@ -536,11 +541,6 @@ a[data-role=button] {
     scrollbar-color: #888 rgba(59, 59, 59, 0.5)
 }
 
-.layout-desktop ::-webkit-scrollbar {
-    width: .4em;
-    height: 1em
-}
-
 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3)
 }
@@ -549,6 +549,11 @@ a[data-role=button] {
     background-color: rgba(59, 59, 59, 0.5)
 }
 
+.layout-desktop ::-webkit-scrollbar {
+    width: .4em;
+    height: 1em
+}
+
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
     -webkit-border-radius: 2px;
@@ -573,11 +578,6 @@ a[data-role=button] {
     width: 40vw;
 }
 
-.personCard .cardScalable {
-    border-radius: 50%;
-    border: 1px solid rgb(255, 255, 255);
-}
-
 .personCard .cardPadder-overflowPortrait,
 .personCard .cardPadder-portrait {
     padding-bottom: 100%;

src/themes/wmc/theme.css

@@ -263,6 +263,11 @@ html {
     border-color: #fff;
 }
 
+.emby-checkbox:checked+span+.checkboxOutline,
+.itemProgressBarForeground {
+    background-color: #00a4dc
+}
+
 .emby-checkbox:focus:not(:checked)+span+.checkboxOutline {
     border-color: #00a4dc;
 }
@@ -277,11 +282,6 @@ html {
     color: #fff
 }
 
-.emby-checkbox:checked+span+.checkboxOutline,
-.itemProgressBarForeground {
-    background-color: #00a4dc
-}
-
 .itemProgressBarForeground-recording {
     background-color: #CB272A
 }
@@ -421,11 +421,6 @@ html {
     border-color: #fff !important
 }
 
-.layout-desktop ::-webkit-scrollbar {
-    width: 1em;
-    height: 1em
-}
-
 ::-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)
@@ -435,6 +430,11 @@ html {
     background-color: #081B3B
 }
 
+.layout-desktop ::-webkit-scrollbar {
+    width: 1em;
+    height: 1em
+}
+
 ::-webkit-scrollbar-thumb:horizontal,
 ::-webkit-scrollbar-thumb:vertical {
     border-radius: 2px;