Add files via upload

MakD · Jun 9, 2024 · efc2651 · efc2651
1 parent f89555d
commit efc2651
Show file tree

Hide file tree

Showing 3 changed files with 1,000 additions and 790 deletions.
diff --git a/landscape-grid-episodes.css b/landscape-grid-episodes.css
@@ -0,0 +1,151 @@
+.childrenItemsContainer.itemsContainer.padded-right.vertical-list {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+}
+@media all and (min-width: 2000px) {
+  .listItemImage-large {
+    height: 9.5vw;
+  }
+}
+@media all and (max-width: 2000px) {
+  .childrenItemsContainer.itemsContainer.padded-right.vertical-list {
+    grid-template-columns: 1fr 1fr 1fr;
+  }
+}
+@media all and (max-width: 1000px) {
+  .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;
+}
+.layout-mobile .listItemImageButton-icon {
+  padding: 0;
+  top: 0.34em;
+  position: absolute !important;
+  font-size: 1.5em !important;
+  right: 3em;
+}
+#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: 0.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 {
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: -1;
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  color: #fff;
+}
+.layout-mobile .listItemIndicators {
+  right: 0;
+  top: 0;
+  z-index: 0;
+}
+.layout-mobile .playedIndicator {
+  width: 2em;
+  height: 2em;
+  font-size: 1.2rem;
+  position: absolute;
+  top: 0;
+  right: 0;
+  box-shadow: none;
+}
+.layout-mobile .listItemIndicators .indicatorIcon.check {
+  z-index: 2;
+}
+.layout-mobile .listItemBodyText {
+  max-width: 36vw;
+}
+@media all and (min-width: 50em) {
+  .layout-mobile .listItemBodyText {
+    max-width: 100%;
+  }
+}
+.layout-mobile .listItem .playedIndicator {
+  background: 0 0 !important;
+  color: rgba(var(--accent));
+}
+.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;
+}
+.layout-mobile .listItemImageButton:hover {
+  transform: scale(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;
+  background: 0 0 !important;
+  position: unset;
+  color: #fff;
+}
+.listItemImageButton {
+  margin: auto;
+  font-size: 1.6em !important;
+}
+.listItem-bottomoverview.secondary,
+.listItemBody.itemAction {
+  z-index: 1;
+}
+.listItem-bottomoverview.secondary {
+  text-align: justify;
+  padding: 0.5em;
+  margin: 0;
+}
diff --git a/mobile-alt-layout.css b/mobile-alt-layout.css
@@ -1,19 +1,12 @@
-/*if the logo is present on the details page and loaded hide the title so it doesnt duplicate and look weird*/
-#itemDetailPage .itemName.infoText.parentNameLast > bdi:nth-child(1) {
+#itemDetailPage .itemName.infoText.parentNameLast > bdi:first-child,
+#itemDetailPage .parentName > bdi:first-child {
   display: none;
 }
-.hide + .detailPageWrapperContainer .itemName > bdi:nth-child(1) {
+.hide + .detailPageWrapperContainer .itemName > bdi:first-child,
+.hide + .parentName > bdi:first-child {
   display: block !important;
 }
-/*the same but for the single episodes link back title*/
-#itemDetailPage .parentName > bdi:nth-child(1) {
-  display: none;
-}
-.hide + .parentName > bdi:nth-child(1) {
-  display: block !important;
-}
-
-@media (orientation: portrait) {
+@media only screen and (max-width: 480px) and (orientation: portrait) {
   .layout-mobile .itemBackdrop {
     position: relative;
     background-size: cover;
@@ -30,11 +23,9 @@
       rgba(var(--dark-apparent), 0) 90%
     );
   }
-
   .layout-mobile {
     position: relative;
   }
-
   .layout-mobile .detailLogo {
     display: block;
     width: 25em;
@@ -43,84 +34,58 @@
     top: 30vh;
     transform: translateX(-50%);
   }
-
-  /* moviendo a la Izq Contenedor de botones de pelicula*/
   .layout-mobile .mainDetailButtons {
     margin-top: 2em;
     padding-left: 0;
     justify-content: space-evenly;
     flex-wrap: wrap;
   }
-
   .layout-mobile .btnPlay {
     border-radius: 2em;
     width: 100% !important;
-    background-color: white;
-    color: black;
+    background-color: #fff;
+    color: #000;
     padding: 0.6em !important;
     margin-bottom: 1em !important;
   }
-
+  .layout-mobile .libraryPage .btnPlay {
+    margin-right: 0 !important;
+  }
   .layout-mobile .btnPlay::after {
     content: attr(title);
     margin: 0 10px 0 2px;
-    color: black;
+    color: #000;
   }
-
   .layout-mobile .btnPlay.detailButton {
     flex-direction: row;
   }
-
+  .layout-mobile .btnReplay::after,
   .layout-mobile .btnShuffle::after {
     content: attr(title);
-    color: white;
-    font-weight: normal;
+    color: #fff;
+    font-weight: 400;
   }
-
-  .layout-mobile .btnPlaystate::after {
-    content: attr(title);
-    color: white;
-    font-weight: normal;
-  }
-
+  .layout-mobile .btnMoreCommands::after,
+  .layout-mobile .btnPlayTrailer::after,
+  .layout-mobile .btnPlaystate::after,
   .layout-mobile .btnUserRating::after {
-    content: attr(title);
-    color: white;
-    font-weight: normal;
-  }
-
-  .layout-mobile .btnMoreCommands::after {
-    content: attr(title);
-    color: white;
-    font-weight: normal;
+    content: "";
+    color: #fff;
+    font-weight: 400;
   }
-
-  .layout-mobile .btnPlayTrailer::after {
-    content: attr(title);
-    color: white;
-    font-weight: normal;
-  }
-
-  .layout-mobile .btnReplay::after {
-    content: attr(title);
-    color: white;
-    font-weight: normal;
-  }
-
-  .layout-mobile .btnShuffle .detailButton-icon,
-  .layout-mobile .btnReplay .detailButton-icon,
-  .layout-mobile .btnPlayTrailer .detailButton-icon,
   .layout-mobile .btnMoreCommands .detailButton-icon,
-  .layout-mobile .btnUserRating .detailButton-icon,
-  .layout-mobile .btnPlaystate .detailButton-icon {
+  .layout-mobile .btnPlayTrailer .detailButton-icon,
+  .layout-mobile .btnPlaystate .detailButton-icon,
+  .layout-mobile .btnReplay .detailButton-icon,
+  .layout-mobile .btnShuffle .detailButton-icon,
+  .layout-mobile .btnUserRating .detailButton-icon {
     background-color: #ffffff21;
     border-radius: 50%;
     padding: 0.25em;
     display: flex;
     justify-content: center;
     align-items: center;
-    width: 1em;
-    height: 1em;
-    /*margin-bottom: .3em;*/
+    width: 1.5em;
+    height: 1.5em;
   }
 }