Add some micro animations and add placeholder for background on mobil…

…e titlePage
prayag17 · Jan 31, 2023 · 0b953c9 · 0b953c9
1 parent ab0b979
commit 0b953c9
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 16 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "nuxt.isNuxtApp": false
+}
diff --git a/src/components/_cards.scss b/src/components/_cards.scss
@@ -1,6 +1,6 @@
 /** @format */
 
-@use "../abstract/variables" as ab;
+@use "../abstract/variables" as *;
 @use "../abstract/mixins" as *;
 
 .emby-scroller {
@@ -43,7 +43,7 @@
 		position: relative;
 		aspect-ratio: auto;
 		overflow: hidden;
-		border-radius: ab.$rounding-default ab.$rounding-default 0 0;
+		border-radius: $rounding-default $rounding-default 0 0;
 		box-shadow: none !important;
 		width: calc(100% + 1px);
 
@@ -66,7 +66,7 @@
 				left: 0;
 				transform: scale(1);
 				z-index: -1;
-				transition: transform ab.$transition-time-fast-1 ease-in-out;
+				transition: transform $transition-time-fast-1 ease-in-out;
 			}
 			&::before {
 				filter: blur(5px) brightness(50%);
@@ -98,9 +98,9 @@
 		margin: 0.5em !important;
 		box-shadow: 0 0 0.5em rgb(0 0 0 / 0.75);
 		background: rgb(0 0 0 / 0.2);
-		border-radius: ab.$rounding-default;
+		border-radius: $rounding-default;
 		overflow: hidden;
-		transition: background ab.$transition-time-fast-1;
+		transition: background $transition-time-fast-1;
 	}
 	&:not([data-type="Person"]) .cardText-secondary {
 		padding-bottom: 0.5em;
@@ -115,7 +115,7 @@
 	}
 }
 .cardPadder {
-	background: ab.$gradient-dark !important;
+	background: $gradient-dark !important;
 	&-square {
 		aspect-ratio: 0 !important;
 		padding: 0;
@@ -134,12 +134,12 @@
 	margin-bottom: 5%;
 	margin-left: auto;
 	margin-right: auto;
-	border-radius: ab.$rounding-default;
+	border-radius: $rounding-default;
 	.itemProgressBar {
 		background: rgb(255 255 255/0.3);
 		height: 0.4em;
 		.itemProgressBarForeground {
-			background: ab.$gradient-default;
+			background: $gradient-default;
 		}
 	}
 }
@@ -154,15 +154,15 @@
 }
 
 .cardOverlayButton {
-	border-radius: ab.$rounding-min;
+	border-radius: $rounding-min;
 	span {
-		background: ab.$gradient-icon !important;
+		background: $gradient-icon !important;
 		background-clip: text !important;
 		-webkit-background-clip: text !important;
-		transition: ab.$transition-time-fast-1;
+		transition: $transition-time-fast-1;
 	}
 	&[data-action="resume"] {
-		border-radius: ab.$rounding-min;
+		border-radius: $rounding-min;
 		padding: 1.5em;
 		background: transparent !important;
 	}
@@ -186,7 +186,7 @@
 	display: none;
 }
 .defaultCardBackground {
-	background: ab.$gradient-dark !important;
+	background: $gradient-dark !important;
 }
 .chapterCard .innerCardFooter {
 	backdrop-filter: blur(5px);
@@ -198,7 +198,7 @@
 	width: fit-content;
 	background: rgb(0 0 0 / 0.5);
 	backdrop-filter: blur(5px);
-	border-radius: ab.$rounding-default !important;
+	border-radius: $rounding-default !important;
 	bottom: 10px;
 	right: 10px;
 }
@@ -210,3 +210,13 @@
 		display: none;
 	}
 }
+
+// commandPanel Selected card border
+
+.itemSelectionPanel {
+	border: 1px solid $jf-purple-light;
+	border-radius: 10px;
+	overflow: hidden;
+	padding: 0.5em;
+	background: linear-gradient(to bottom, rgb(0 0 0 / 0.75), transparent 21%);
+}
diff --git a/src/components/_header.scss b/src/components/_header.scss
@@ -1,5 +1,7 @@
 /** @format */
 
+@use "../abstract/variables" as *;
+
 .skinHeader {
 	background: transparent !important;
 	position: static;
@@ -37,3 +39,11 @@ div[data-role="page"].page {
 	height: 100%;
 	position: relative;
 }
+
+// Command Panel
+
+.selectionCommandsPanel {
+	background: rgb(0 0 0 / 0.75);
+	backdrop-filter: blur($filter-blur-default);
+	box-shadow: 0 0 15px black;
+}
diff --git a/src/components/_input.scss b/src/components/_input.scss
@@ -36,12 +36,21 @@
 		border-color: $jf-blue-light !important;
 	}
 }
+.emby-select:focus ~ .selectArrowContainer {
+	transform: rotate(180deg);
+}
+.selectArrowContainer {
+	transition: transform $transition-time-fast-1;
+}
 
 // Checkbox
 .checkbox {
 	&Outline {
-		background-color: $background-dark !important;
-		border-color: $background-dark !important;
+		background-color: hsl(208deg, 89%, 20%) !important;
+		border-color: hsl(208deg, 89%, 20%) !important;
+		border-radius: 5px !important;
+		/* align-items: center; */
+		/* justify-content: center; */
 	}
 }
 span.checkboxLabel {
@@ -62,6 +71,22 @@ span.checkboxLabel {
 .emby-checkbox:focus-visible + span.checkboxLabel::after {
 	transform: scaleX(1);
 }
+.checkboxIcon-checked,
+.emby-checkbox-label .checkboxIcon-checked {
+	display: block !important;
+	opacity: 0;
+	transform: rotate(45deg) scale(0);
+	align-items: center;
+	justify-content: center;
+	transition: transform $transition-time-fast-1,
+		opacity $transition-time-fast-1;
+}
+.emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
+	display: -webkit-flex !important;
+	display: flex !important;
+	opacity: 1;
+	transform: rotate(0deg) scale(1);
+}
 
 // Textarea
 .emby-textarea {

diff --git a/src/pages/_titlePage.scss b/src/pages/_titlePage.scss
@@ -150,6 +150,7 @@
 		margin-top: 0 !important;
 		mask-image: linear-gradient(to bottom, black, transparent);
 		-webkit-mask-image: linear-gradient(to bottom, black, transparent);
+		background-image: $gradient-default;
 	}
 	.detail {
 		&Ribbon {