minor fixes and feature improvements: added an indicator which shows when the animes are being loaded and also indicates when no anime with given title is found

1 files changed, 47 insertions, 32 deletions

diff --git a/src/app/kdrama/kdrama.css b/src/app/kdrama/kdrama.css
index 014083e..7a82bea 100644
--- a/src/app/kdrama/kdrama.css
+++ b/src/app/kdrama/kdrama.css
@@ -1,31 +1,31 @@
-
-.navbar {
+.sC {
 	display: flex;
-	flex-direction: column;
-	justify-content: center;
 	align-items: center;
-	margin: 0px auto;
-}
-
-.navbar p {
-	font-family: "Kanit";
-	font-size: 36px;
-	color: var(--soft-purple);
+	margin: 30px auto;
+	background-color: #2c2c2c;
+	padding: 8px;
+	border-radius: 5px;
+	width: 20%;
 }
 
-.navbar input {
-	padding: 5px;
-	border-radius: 5px;
+.sC input {
 	border: none;
+	border-radius: 5px;
+	color: white;
 	outline: none;
-	width: 200px;
-	margin-top: 5px;
-	box-shadow: 0 4px 	8px #0003, 0 6px 20px #00000030;
-	background-color: #9eacc4;
-	color: #fff;
-	font-family: "Atkinson Hyperlegible";
+	background: none;
+	width: 100%;
+	font-family: "Lato";
+	font-size: 16px;
 }
 
+
+.searchIcon {
+	color: white;
+	margin-right: 5px;
+}
+
+
 .intro {
 	display: flex;
 	color: white;
@@ -57,13 +57,9 @@
 	height: 100%;
 	justify-content: center;
 	width: 100%;
-	background-color: #141414e8;
+	background-color: #141414ad;
 }
 
-.popupEntries::-webkit-scrollbar {
-	width: 5px;
-	height: 5px;
-}
 
 .popupEntries {
 	border-radius: 5px;
@@ -73,20 +69,27 @@
 	overflow-y: auto;
 }
 
+.popupEntries::-webkit-scrollbar {
+	width: 5px;
+	height: 5px;
+}
+
 .popupEntry {
 	background: #272727b4;
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	border-style: groove;
 	align-items: center;
 	border-radius: 10px;
 	width: 800px;
 	margin: 5px auto;
 	padding: 3px;
 	border-color: var(--soft-purple);
+	cursor: pointer;
 }
 
+
+
 .popupEntry img {
 	width: 120px;
 	height: "auto";
@@ -96,7 +99,7 @@
 }
 
 .popupEntry p {
-	color: var(--neon-green);
+	color: #8CABFF;
 	font-size: 20px;
 	margin-left: 10px;
 }
@@ -105,7 +108,7 @@
 	position: absolute;
 	bottom: 0;
 	left: 0;
-	margin: 10px
+	margin: 10px;
 }
 
 .closeButton button {
@@ -115,6 +118,7 @@
 	font-size: 18px;
 	border-radius: 5px;
 	border: none;
+	cursor: pointer;
 }
 
 .videoContainer {
@@ -127,14 +131,13 @@
 	border-radius: 20px;
 	border-width: 4px;
 	padding: 10px;
-	text-align: center
+	/* text-align: center */
 }
 
 .titleContainer {
 	display: flex;
 	flex-direction: row;
 	justify-content: space-between;
-	width: 900px;
 	align-items: center;
 	margin: 0px auto;
 }
@@ -153,13 +156,15 @@
 .dramaDescription {
 	color: var(--softer-purple);
 	font-family: "Atkinson Hyperlegible";
+	text-align: center;
 }
 
 .episodesButtonsContainer {
-	max-width: 70%;
+	max-width: 80%;
 	margin: 0px auto;
 	max-height: 200px;
 	overflow-y: auto;
+	text-align: center;
 }
 
 .episodeButton {
@@ -178,13 +183,19 @@
 	background-color: var(--soft-purple);
 }
 
+.episodeButton:focus {
+	background-color: var(--pastel-red);
+	transition: padding 0.2s ease;
+	padding: 5px;
+}
+
 .videoPlayer {
 	display: flex;
 	justify-content: center;
 }
 
 .videoPlayer video {
-	border-radius: 5px;
+	border-radius: 10px;
 }
 
 @media screen and (max-width: 1440px) {
@@ -212,6 +223,10 @@
 	.popupEntry {
 		width: 90%;
 	}
+
+	.sC {
+		width: 70%;
+	}
 } 
 
 @media (prefers-color-scheme: dark) {