aboutsummaryrefslogtreecommitdiff
path: root/src/app/kdrama/styles/popular.module.css
diff options
context:
space:
mode:
Diffstat (limited to 'src/app/kdrama/styles/popular.module.css')
-rw-r--r--src/app/kdrama/styles/popular.module.css29
1 files changed, 20 insertions, 9 deletions
diff --git a/src/app/kdrama/styles/popular.module.css b/src/app/kdrama/styles/popular.module.css
index eafe792..ecfcbdd 100644
--- a/src/app/kdrama/styles/popular.module.css
+++ b/src/app/kdrama/styles/popular.module.css
@@ -3,11 +3,13 @@
font-family: "Poppins";
font-size: 28px;
margin-bottom: 10px;
+ font-weight: 500;
}
.AnimeContainer {
display: flex;
overflow-x: auto;
+ overflow-y: hidden;
}
.AnimeContainer::-webkit-scrollbar {
@@ -24,29 +26,38 @@
border-radius: 5px;
}
+.AnimeContainer:hover .AnimeEntry {
+ opacity: 0.4;
+}
+
+.AnimeContainer:hover .AnimeEntry:hover {
+ opacity: 1;
+ transform: scale(1.02);
+}
+
/* Format the scrollbar later */
.AnimeEntry {
display: flex;
flex-direction: column;
align-items: center;
- margin: 7px;
- transition: transform 0.2s linear;
+ margin: 4px;
+ background-color: #353535a6;
+ padding: 0.5rem;
+ transition: opacity 400ms ease, transform 400ms ease;
cursor: grab;
-}
-
-.AnimeEntry:hover {
- transition: transform 0.2s linear;
- transform: scale(0.97);
+ border-radius: 1rem;
}
.AnimeEntry img {
- border-radius: 5px;
+ border-radius: 1rem;
}
-
.AnimeEntry p {
text-align: center;
color: white;
font-family: "Atkinson Hyperlegible";
+ width: 140px;
+ height: 60px;
+ overflow-y: auto;
} \ No newline at end of file