5 files changed, 375 insertions, 0 deletions
diff --git a/src/app/web-series/styles/info.module.css b/src/app/web-series/styles/info.module.css
new file mode 100644
index 0000000..8873b41
--- /dev/null
+++ b/src/app/web-series/styles/info.module.css
@@ -0,0 +1,171 @@
+.Main {
+	min-height: 100vh;
+	margin-top: 60px;
+	
+}
+
+.Main::-webkit-scrollbar {
+	width: 0;
+}
+
+.AnimeInfo {
+	backdrop-filter: blur(10px);
+	background-color: #1f1f1fcb;
+
+}
+
+.AnimeInfoContainer {
+	width: 50%;
+	height: 100vh;
+	margin: 0px auto;
+}
+
+.TitleContainer {
+	display: flex;
+	align-items: center;
+}
+
+.TitleContainer img {
+	border-radius: 0.8rem;
+	padding: 0.5rem;
+}
+
+.SideTitleContainer {
+	margin: 0.4rem;
+	color: white;
+}
+
+.title {
+	margin: 0;
+}
+
+.secondTitle {
+	margin: 0;
+	font-size: small;
+}
+
+.tagline {
+	margin: 0;
+}
+
+.tagline span {
+	background-color: #121212b7;
+	padding: 0.2rem;
+	border-radius: 0.5rem;
+	font-size: 12px;
+}
+
+.description {
+	margin: 0.2rem 0 0 0;
+	height: auto;
+	max-height: 100px;
+	overflow: auto;
+}
+
+.description::-webkit-scrollbar {
+	width: 3px;
+}
+
+.description::-webkit-scrollbar-thumb {
+	background-color: var(--neon-yellow);
+	border-radius: 1rem;
+}
+
+
+.genres {
+	margin: 0;
+	color: var(--nord-yellow);
+}
+
+.genres span {
+	color: white;
+}
+
+.epiInfo {
+	margin: 0;
+	color: var(--nord-yellow);
+}
+
+.epiInfo span {
+	color: white;
+}
+
+.votes {
+	display: flex;
+}
+
+.votes p {
+	margin: 0 0 0 0;
+}
+
+.vote {
+	display: flex;
+	align-items: center;
+	margin: 0 0.2rem 0 0;
+}
+
+.CrewContainer {
+	color: white;
+	margin-top: -1rem;
+}
+
+.CrewEntry {
+	display: flex;
+	align-items: center;
+	overflow: auto;
+}
+
+.CrewEntry h2 {
+	margin: 0;
+	color: white;
+}
+
+.CastEntry {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	margin: 0 0 0 0.4rem;
+}
+
+.CastEntry img {
+	border-radius: 0.5rem;
+}
+
+.CastEntry p {
+	margin: 0;
+	width: 140px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+}
+
+.CrewEntry::-webkit-scrollbar {
+	height: 3px;
+}
+
+.CrewEntry::-webkit-scrollbar-thumb {
+	background-color: var(--neon-yellow);
+	border-radius: 1rem;
+}
+
+
+@media screen and (max-width: 1024px) {
+	.AnimeInfoContainer {
+		width: 100%;
+	}
+
+	.title {
+		font-size: 20px;
+	}
+
+	.description {
+		font-size: 14px;
+		max-height: 100px;
+		overflow: auto;
+	}
+
+	.SideTitleContainer {
+		font-size: 14px;
+	}
+}
+\ No newline at end of file
diff --git a/src/app/web-series/styles/pages.module.css b/src/app/web-series/styles/pages.module.css
new file mode 100644
index 0000000..631f7db
--- /dev/null
+++ b/src/app/web-series/styles/pages.module.css
@@ -0,0 +1,46 @@
+.main h2 {
+	color: white;
+}
+
+.SeriesContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+	grid-gap: 0.5rem;
+	align-items: center;
+	margin: -1rem 0 0 0;
+}
+
+.SeriesEntry {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background-color: #1f1f1fce;
+	border-radius: 0.5rem;
+	padding: 0.4rem;
+	color: white;
+	cursor: pointer;
+}
+
+.SeriesEntry p {
+	width: 160px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+	margin: 0.3rem 0 0 0;
+	font-family: "Atkinson Hyperlegible", serif;
+}
+
+.SeriesEntry img {
+	border-radius: 0.5rem;
+}
+
+@media screen and (max-width: 768px) {
+	.SeriesContainer {
+		display: flex;
+		align-items: center;
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+}
+\ No newline at end of file
diff --git a/src/app/web-series/styles/search.module.css b/src/app/web-series/styles/search.module.css
new file mode 100644
index 0000000..145a2aa
--- /dev/null
+++ b/src/app/web-series/styles/search.module.css
@@ -0,0 +1,78 @@
+.InputContainer {
+	display: flex;
+	align-items: center;
+	background-color: #121212;
+	width: 40vw;
+	border-radius: 0.5rem;
+}
+
+.SearchIcon {
+	margin-left: 0.4rem;
+}
+
+.InputContainer input {
+	background-color: transparent;
+	outline: none;
+	border: none;
+	padding: 0.4rem;
+	font-family: "Lexend Deca", serif;
+	margin-left: 0.2rem;
+	font-size: large;
+	color: white;
+	width: 100%;
+}
+
+.SearchedSeriesContainer {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
+	grid-gap: 0.7rem;
+	align-items: center;
+	margin-top: 0.8rem;
+}
+
+.SearchedSeriesEntry {
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	background-color: #1f1f1f;
+	border-radius: 0.5rem;
+	padding: 0.2rem;
+	transition: opacity 200ms ease;
+
+}
+
+.SearchedSeriesContainer:hover .SearchedSeriesEntry {
+	opacity: 0.5;
+}
+
+.SearchedSeriesContainer .SearchedSeriesEntry:hover {
+	opacity: 1;
+}
+
+.SearchedSeriesEntry p {
+	width: 150px;
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+	text-align: center;
+	margin: 0.2rem 0 0.2rem 0;
+}
+
+.SearchedSeriesEntry img {
+	border-radius: 0.5rem;
+	padding: 0.2rem 0.2rem 0 0.2rem;
+}
+
+@media screen and (max-width: 768px) {
+
+	.InputContainer {
+		width: 100%;
+	}
+
+	.SearchedSeriesContainer {
+		display: flex;
+		overflow: auto;
+	}
+
+
+}
+\ No newline at end of file
diff --git a/src/app/web-series/styles/videoPlayer.module.css b/src/app/web-series/styles/videoPlayer.module.css
new file mode 100644
index 0000000..f44776f
--- /dev/null
+++ b/src/app/web-series/styles/videoPlayer.module.css
@@ -0,0 +1,76 @@
+.Main {
+	margin: 1.5rem 0 0 0;
+}
+
+.EpisodeSeasonInput {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.EpisodeSeasonInput input {
+	padding: 0.6rem;
+	margin: 0 0.2rem 0 0.2rem;
+	border: none;
+	outline: none;
+	background-color: #121212a6;
+	border-radius: 0.5rem;
+	font-family: "Lexend Deca", serif;
+	color: white;
+}
+
+.EpisodeSeasonInput button {
+	padding: 0.5rem;
+	border: none;
+	outline: none;
+	border-radius: 0.5rem;
+	background-color: #121212a6;
+	color: white;
+	cursor: pointer;
+	font-family: "Atkinson Hyperlegible", serif;
+}
+
+
+.EpisodeSeasonInput input::placeholder {
+	color: gray;
+}
+
+.VideoPlayer iframe {
+	margin: 1rem 0 2.5rem 0;
+	width: 100%;
+	height: 400px;
+	border-radius: 0.5rem;
+	border: none;
+	outline: none;
+}
+
+.VideoPlayer p {
+	color: white;
+	margin: 0.5rem 0 0 0;
+	text-align: center;
+	font-size: 12px;
+}
+
+@media screen and (max-width: 768px) {
+
+	.EpisodeSeasonInput {
+		width: 80%;
+		margin: 0px auto;
+	}
+
+	.VideoPlayer iframe {
+		width: 100%;
+		height: 300px;
+		margin-bottom: 50px;
+	}
+
+	.EpisodeSeasonInput input {
+		padding: 0.4rem;
+	}
+	
+	.EpisodeSeasonInput button {
+		padding: 0.3rem 0.4rem 0.3rem 0.4rem;
+		font-size: 14px;
+	}
+
+}
+\ No newline at end of file
diff --git a/src/app/web-series/styles/web-series.module.css b/src/app/web-series/styles/web-series.module.css
new file mode 100644
index 0000000..849fed9
--- /dev/null
+++ b/src/app/web-series/styles/web-series.module.css
@@ -0,0 +1,4 @@
+.main {
+	margin: 65px auto;
+	width: 99%;
+}
+\ No newline at end of file