Huge hopefully final update

effects/glassy.css

@@ -0,0 +1,6 @@
+@supports (backdrop-filter: blur(15px)) {
+  .dialog, .mainDrawer, .toast, .appfooter {
+    backdrop-filter: blur(15px);
+    background-color: rgba(0, 0, 0, 0.35);
+  }
+}

effects/scrollfade.css

@@ -0,0 +1,88 @@
+body.force-scroll {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    overflow: hidden;
+}
+ 
+.skinHeader {
+    position: static;
+    width: 100%;
+    align-self: flex-start;
+}
+ 
+.mainAnimatedPages {
+    height: 100vh;
+    position: relative !important;
+    overflow: hidden;
+}
+ 
+.libraryPage:not(.noSecondaryNavPage) {
+    padding: 1em !important;
+}
+ 
+div#itemDetailPage {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+}
+ 
+@media (min-width: 40em) {
+    .dashboardDocument .skinBody {
+        left: 20em;
+        width: calc(100vw - 20em);
+    }
+}
+ 
+div#loginPage {
+    margin-top: 0 !important;
+    position: fixed;
+}
+ 
+div[data-role=page] {
+    margin: 0 !important;
+    padding: 0 !important;
+    position: static;
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+    -webkit-mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent);
+    mask: linear-gradient(to bottom, transparent, black 25px calc(100% - 15px), transparent);
+}
+ 
+.layout-tv .mainAnimatedPages {
+    overflow: visible;
+    mask: none;
+    -webkit-mask: none;
+}
+ 
+div#videoOsdPage {
+    overflow: hidden !important;
+    margin-top: 1em !important;
+    -webkit-mask: none !important;
+    mask: none !important;
+}
+ 
+div[data-role=page]:not(.withTabs) {
+    margin-top: 1em !important;
+}
+ 
+div#itemBackdrop {
+    display: none;
+}
+ 
+.layout-desktop .detailRibbon {
+    margin-top: 7.2em;
+}
+ 
+.layout-mobile #itemDetailPage {
+    position: fixed;
+    -webkit-mask: none;
+    mask: none;
+    margin-top: 4em !important;
+    height: calc(100vh - 4em);
+}
+
+

episodelist/episodes_grid.css

@@ -0,0 +1,144 @@
+/*Size episode preview images in a more compact way*/
+
+.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+}
+
+@media all and (max-width: 1001px) {
+  .childrenItemsContainer.itemsContainer.padded-right.vertical-list {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.layout-mobile
+  .childrenItemsContainer.itemsContainer.padded-right.vertical-list {
+  grid-template-columns: 1fr;
+}
+
+#itemDetailPage .listItem-content {
+  border-radius: var(--rounding);
+  overflow: hidden;
+  transition: background 0.15s ease-in-out;
+  flex-flow: column;
+  -webkit-transition: background 0.15s ease-in-out;
+  -moz-transition: background 0.15s ease-in-out;
+  -ms-transition: background 0.15s ease-in-out;
+  -o-transition: background 0.15s ease-in-out;
+}
+
+.listItemImage.listItemImage-large {
+  width: 100%;
+  margin: 0;
+}
+
+.listItem-overview.listItemBodyText {
+  height: 5.5em !important;
+  font-size: 1em !important;
+}
+
+.listItemImageButton-icon {
+  padding: 0;
+}
+
+#itemDetailPage .listItem {
+  position: relative;
+  height: -webkit-fit-content;
+  height: -moz-fit-content;
+  height: fit-content;
+  overflow: hidden;
+  margin-bottom: 1.5rem;
+  border-radius: var(--rounding);
+  padding: .5em;
+}
+
+#itemDetailPage .secondary.listItem-overview.listItemBodyText {
+  height: 100%;
+  margin: 0;
+}
+
+.listItem[data-mediatype="Audio"] {
+  padding: 0 1em;
+  border-radius: var(--rounding) !important;
+  -webkit-border-radius: var(--rounding) !important;
+  -moz-border-radius: var(--rounding) !important;
+  -ms-border-radius: var(--rounding) !important;
+  -o-border-radius: var(--rounding) !important;
+}
+
+.layout-mobile #itemDetailPage .listItemImageButton {
+  font-size: 0 !important;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.72);
+  z-index: -1;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+}
+
+.layout-mobile .listItemIndicators {
+  right: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.layout-mobile .playedIndicator {
+  width: 100%;
+  height: 100%;
+  font-size: 1.2rem;
+}
+
+.layout-mobile .listItemIndicators .indicatorIcon.check {
+  position: absolute;
+  top: .55em;
+  right: 4em;
+}
+
+.layout-mobile .listItemBodyText {
+  max-width: 10rem;
+}
+
+.layout-mobile .listItem .playedIndicator {
+  background: transparent !important;
+}
+
+.layout-mobile .listItemImage {
+  height: 100% !important;
+  width: 100% !important;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  overflow: hidden;
+  border-radius: var(--rounding) !important;
+  z-index: -1;
+}
+
+.layout-mobile .listViewUserDataButtons {
+  position: absolute;
+  right: 0;
+  top: 1.25em;
+  padding-right: 1em;
+}
+
+.layout-mobile .listItemButton {
+  padding: 0 0.556em !important;
+}
+
+.layout-mobile #itemDetailPage .listItem-content {
+  -webkit-backdrop-filter: none;
+  backdrop-filter: none;
+  align-items: flex-start;
+}
+
+.layout-mobile #itemDetailPage .listItem-content {
+  background: none !important;
+  position: unset;
+  color: white;
+}
+
+.listItemImageButton {
+  margin: auto;
+  font-size: 1.6em !important;
+}

header/header_transparent-dashboard.css

@@ -57,7 +57,7 @@
   #pluginsPage,
   #musicRecommendedPage {
     margin-top: 130px;
-    padding-top: 0px !important;
+    padding-top: 0.5em !important;
     overflow: scroll;
   }
-}
+}

header/header_transparent.css

@@ -39,7 +39,7 @@
   #tvRecommendedPage,
   #musicRecommendedPage {
     margin-top: 130px;
-    padding-top: 0px !important;
+    padding-top: 0.5em !important;
     overflow: scroll;
   }
-}
+}

login/login_frame.css

@@ -0,0 +1,35 @@
+/*Narrow the login form, size according to display size (bigger on mobile)*/
+#loginPage .readOnlyContent,
+#loginPage form {
+  max-width: 22em;
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page {
+  margin-top: 8em
+}
+
+/*Hide "manual" and "forgot" buttons}*/
+#loginPage .raised.cancel.block.btnForgotPassword.emby-button {
+  display: none
+}
+
+#loginPage .padded-left.padded-right.padded-bottom-page {
+    margin-left: auto;
+    margin-right: auto;
+    background: rgba(0, 0, 0, 0.35);
+    width: 24em;
+    border-radius: var(--rounding);
+}
+#loginPage form {
+    padding-top: 4em;
+}
+
+#loginPage .sectionTitle{
+    margin-left: auto !important;
+    margin-right: auto !important;
+    margin-bottom: 1.2em !important;
+}
+#loginPage {
+  background: url(https://i.imgur.com/9vL4iNf.png) !important; 
+  background-size: cover !important;
+}

login/login_minimalistic.css

@@ -9,10 +9,10 @@
   display: none
 }
 #loginPage .padded-left.padded-right.padded-bottom-page {
-  margin-top: 50px
+  margin-top: 8em
 }
 
 /*Hide "manual" and "forgot" buttons}*/
 #loginPage .raised.cancel.block.btnForgotPassword.emby-button {
   display: none
-}
+}

presets/kaleidochromic_preset.css

@@ -4,16 +4,16 @@
 @import url('https://ctalvio.github.io/Ultrachromic/accentlist.css');
 @import url('https://ctalvio.github.io/Ultrachromic/rounding.css');
 @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css');
-@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css');
+@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css');
-@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css');
+@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css');
-@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css');
+@import url('https://ctalvio.github.io/Ultrachromic/login/login_frame.css');
-@import url('https://ctalvio.github.io/Ultrachromic/fields_2.css');
+@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_noborder.css');
 @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css');
-@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_2.css');
+@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_corner.css');
-@import url('https://ctalvio.github.io/Ultrachromic/title_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css');
 @import url('https://ctalvio.github.io/Ultrachromic/type/colorful.css');
 @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css');
-@import url('https://ctalvio.github.io/Ultrachromic/hoverglow.css');
+@import url('https://ctalvio.github.io/Ultrachromic/effects/hoverglow.css');
 
 
 :root {--rounding: 12px;}
@@ -21,4 +21,4 @@
 /*Style backdrop*/
 .backdropImage {
   filter: blur(18px) saturate(120%) contrast(120%) brightness(40%);
-}
+}

presets/monochromic_preset.css

@@ -1,16 +1,15 @@
-@import url('https://ctalvio.github.io/Ultrachromic/presets/monochromic_values.css');
 @import url('https://ctalvio.github.io/Ultrachromic/jf_font.css');
 @import url('https://ctalvio.github.io/Ultrachromic/fixes.css');
 @import url('https://ctalvio.github.io/Ultrachromic/base.css');
 @import url('https://ctalvio.github.io/Ultrachromic/rounding.css');
 @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css');
-@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css');
+@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css');
-@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css');
+@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css');
-@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css');
+@import url('https://ctalvio.github.io/Ultrachromic/login/login_minimalistic.css');
-@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_border.css');
 @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css');
-@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_separate.css');
-@import url('https://ctalvio.github.io/Ultrachromic/title_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css');
 @import url('https://ctalvio.github.io/Ultrachromic/type/dark.css');
 @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css');
 
@@ -19,4 +18,4 @@
 /*Style backdrop*/
 .backdropImage {
   filter: blur(60px) saturate(200%) contrast(160%) brightness(25%);
-}
+}

presets/novachromic_preset.css

@@ -4,13 +4,13 @@
 @import url('https://ctalvio.github.io/Ultrachromic/accentlist.css');
 @import url('https://ctalvio.github.io/Ultrachromic/rounding.css');
 @import url('https://ctalvio.github.io/Ultrachromic/smallercast.css');
-@import url('https://ctalvio.github.io/Ultrachromic/compactepisodes.css');
+@import url('https://ctalvio.github.io/Ultrachromic/episodelist/episodes_compactlist.css');
-@import url('https://ctalvio.github.io/Ultrachromic/transparentbanner-dashboard.css');
+@import url('https://ctalvio.github.io/Ultrachromic/header/header_transparent-dashboard.css');
-@import url('https://ctalvio.github.io/Ultrachromic/minimalisticlogin.css');
+@import url('https://ctalvio.github.io/Ultrachromic/login/login_minimalistic.css');
-@import url('https://ctalvio.github.io/Ultrachromic/fields_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/fields/fields_noborder.css');
 @import url('https://ctalvio.github.io/Ultrachromic/dialogues.css');
-@import url('https://ctalvio.github.io/Ultrachromic/cardindicator_2.css');
+@import url('https://ctalvio.github.io/Ultrachromic/cornerindicator/indicator_light.css');
-@import url('https://ctalvio.github.io/Ultrachromic/title_1.css');
+@import url('https://ctalvio.github.io/Ultrachromic/titlepage/title_simple.css');
 @import url('https://ctalvio.github.io/Ultrachromic/type/light.css');
 @import url('https://ctalvio.github.io/Ultrachromic/overlayprogress.css');
 
@@ -19,4 +19,4 @@
 /*Style backdrop*/
 .backdropImage {
   filter: blur(22px) saturate(95%) contrast(15%) brightness(155%);
-}
+}

titlepage/title_banner-logo.css

@@ -0,0 +1,49 @@
+/*Alternate itempage*/
+.itemBackdrop {
+  height: 31vh !important;
+  display: inherit;
+}
+.detailLogo {
+  display: none;
+}
+.layout-desktop .detailRibbon {
+  margin-top: 0;
+  padding-top: .5em;
+  padding-bottom: .5em;
+}
+.detailImageContainer .card.backdropCard {
+    top: 40vh;
+}
+
+#itemDetailPage .detailLogo {
+    position: static;
+    margin-left: 32.5%;
+    display: block;
+    -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
+    /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */
+    flex-shrink: 0;
+    background-position: 0 50%;
+    margin-top: -18vh;
+    margin-bottom: 2vh;
+}
+
+.layout-mobile .detailLogo {
+    display: none !important;
+}
+
+#itemDetailPage .itemName.infoText.parentNameLast {
+    display: none;
+}
+
+.hide+.detailPageWrapperContainer .itemName {
+    display: block !important;
+}
+
+.itemName {
+    margin: .5em 0 !important;
+}
+
+.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
+    display: block;
+}
+

titlepage/title_banner.css

@@ -13,4 +13,4 @@
 }
 .detailImageContainer .card.backdropCard {
     top: 40vh;
-}
+}

titlepage/title_simple-logo.css

@@ -0,0 +1,60 @@
+/*Tweak series/movie/album title screen*/
+.detailImageContainer .card {
+  position:fixed;
+}
+.detailSectionContent {
+  max-width: 66em;
+}
+.trackSelections {
+  max-width: 22em;
+}
+.detailLogo {
+  display: none;
+}
+.detailPagePrimaryContainer {
+  background: rgba(0,0,0,0) !important;
+}
+.layout-desktop .detailRibbon {
+  background: rgba(0,0,0,0) !important;
+}
+@media all and (min-width: 32em){
+  .itemBackdrop {
+    display: none;
+  }
+	.layout-desktop .detailRibbon {
+    margin-top: 13vh;
+	}
+}
+
+#itemDetailPage .detailLogo {
+    position: static;
+    margin-left: 32.5%;
+    display: block;
+    -webkit-filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75));
+    /*! filter: drop-shadow(0 0 10px rgba(2, 2, 2, 0.75)); */
+    flex-shrink: 0;
+    background-position: 0 50%;
+    margin-top: 8vh;
+    margin-bottom: -10em;
+}
+
+.layout-mobile .detailLogo {
+    display: none !important;
+}
+
+#itemDetailPage .itemName.infoText.parentNameLast {
+    display: none;
+}
+
+.hide+.detailPageWrapperContainer .itemName {
+    display: block !important;
+}
+
+.itemName {
+    margin: .5em 0 !important;
+}
+
+.layout-mobile #itemDetailPage .itemName.infoText.parentNameLast {
+    display: block;
+}
+

type/colorful.css

@@ -10,6 +10,20 @@
     background-color: rgba(8, 8, 8, 0.85);
 }
 
+/*Login background*/
+#loginPage {
+  background: url(https://i.imgur.com/9vL4iNf.png) !important; 
+  background-size: cover !important;
+}
+
+/*Colors for title_2*/
+.layout-desktop .detailRibbon {
+    background: rgba(0, 0, 0, 0.2);
+}
+.itemBackdrop::after {
+  background: rgba(0,0,0,.26) !important;
+}
+
 /*Accenting*/
 .drawer-open {
     box-shadow: 0px 0px 5px rgba(var(--accent), 1) !important;
@@ -93,4 +107,4 @@ progress {
 }
 .defaultCardBackground5 {
 	background-color: rgba(var(--accent), .6);
-}
+}

type/dark.css

@@ -7,6 +7,10 @@
 .playbackProgress > div {
     background-color: rgba(255,255,255,0.75);
 }
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, 0);
+}
+
 
 /*Some themeing for the dashboard*/
 
@@ -309,4 +313,4 @@ progress {
 }
 .defaultCardBackground5 {
 	background-color: #666666;
-}
+}

type/dark_withaccent.css

@@ -1,6 +1,10 @@
 /*This file contains color and style changes for the dark theme type*/
 :root {--selection: 120, 120, 120;}
 
+.backgroundContainer.withBackdrop {
+    background-color: rgba(0, 0, 0, 0);
+}
+
 /*Some themeing for the dashboard*/
 
 #user_usage_report_table,
@@ -411,4 +415,4 @@ progress::-webkit-progress-value {
 .syncPlayIconCircle {
   color: rgba(var(--accent),1) !important;
   text-shadow: none !important;
-}
+}

type/light.css

@@ -3,6 +3,14 @@
 :root {--indicator: var(--accent);}
 :root {--selection: var(--accent);}
 
+/*Colors for title_2*/
+.layout-desktop .detailRibbon {
+  background: rgba(255,255,255,.2) !important;
+}
+.itemBackdrop::after {
+  background: rgba(0,0,0,.2) !important;
+}
+
 /*Various themeing*/
 #itemDetailPage .emby-select-withcolor {
   background-color: rgba(255, 255, 255, 0.2);
@@ -369,4 +377,4 @@ h4,
 }
 .defaultCardBackground5 {
 	background-color: rgba(var(--accent), .6);
-}
+}