Fix Bug: Show image is displayed incorrectly #72, Feature Request: sh…

…ow all library tiles on home screen #70, and more
prayag17 · Jul 2, 2022 · 960b668 · 960b668
1 parent 61409dd
commit 960b668
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 42 deletions.
diff --git a/src/base/_reset.scss b/src/base/_reset.scss
@@ -33,3 +33,7 @@
 		transparent
 	);
 }
+
+::selection {
+	background: ab.$jf-blue-light;
+}
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
@@ -19,6 +19,11 @@
 }
 .card {
 	contain: none !important;
+	&.overflowSquareCard .cardImageContainer {
+		&::after {
+			background-size: contain !important;
+		}
+	}
 	&OverlayContainer {
 		background: rgb(0 0 0 / 0.7);
 	}
@@ -44,7 +49,7 @@
 				background: inherit;
 			}
 			&::after {
-				background-size: contain;
+				background-size: cover;
 				width: 100%;
 				height: 100%;
 				left: 0;

diff --git a/src/pages/_indexPage.scss b/src/pages/_indexPage.scss
@@ -1,42 +1,38 @@
+/** @format */
+
 @use "../abstract/variables" as ab;
-#indexPage{
-    .sectionTitle {
-        display: flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        gap: 0.5em;
-        color: white;
-        align-items: center;
-        font-size: 1.6em;
-        &::before{
-            content: "";
-            width: 1.3em;
-            height: 2px;
-            background: white;
-        }
-    }
-    .emby-scroller{
-        .emby-button:not(.cardOverlayButton){
-            margin-right: 1.2em;
-            border-radius: ab.$rounding-default;
-            background: ab.$background-dark;
-            box-shadow: 0 0 15px rgb(0 0 0 / 0.2);
-            overflow: hidden;
-            &::after{
-                content: "";
-                width: 100%;
-                height: 100%;
-                position: absolute;
-                top: 0;
-                left: 0;
-                background: ab.$gradient-default;
-                opacity: 0;
-                transition: opacity ab.$transition-time-fast-1;
-                z-index: -1;
-            }
-            &:hover::after{
-                opacity: 1;
-            }
-        }
-    }
-}
+#indexPage {
+	.sectionTitle {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: nowrap;
+		gap: 0.5em;
+		color: white;
+		align-items: center;
+		font-size: 1.6em;
+		&::before {
+			content: "";
+			width: 1.3em;
+			height: 2px;
+			background: white;
+		}
+	}
+	.emby-scroller {
+		.emby-button:not(.cardOverlayButton) {
+			margin-right: 1.2em;
+			border-radius: ab.$rounding-default;
+			background: rgb(0 0 0 / 0.2);
+			box-shadow: 0 0 0.5em rgb(0 0 0 / 0.75);
+			overflow: hidden;
+			&::after {
+				all: unset;
+			}
+			&:hover {
+				background: rgb(0 0 0 / 0.5);
+			}
+		}
+	}
+	.section0 .itemsContainer {
+		flex-wrap: wrap;
+	}
+}
diff --git a/src/pages/_titlePage.scss b/src/pages/_titlePage.scss
@@ -17,6 +17,9 @@
 		background: transparent;
 		font-size: 2.2vh;
 		position: static !important;
+		.itemMiscInfo {
+			margin-bottom: 0 !important;
+		}
 	}
 	.detailImageContainer .card {
 		position: fixed !important;
@@ -52,6 +55,9 @@
 		&[title="Play"],
 		&[title="Resume"] {
 			border: 0.1em solid currentColor;
+			padding: 0.2em 1.2em !important;
+			gap: 0.2em;
+			margin-right: 0.5em;
 			&::after {
 				content: attr(title);
 				display: block;