diff options
| author | real-zephex <[email protected]> | 2024-04-10 01:19:20 +0530 |
|---|---|---|
| committer | real-zephex <[email protected]> | 2024-04-10 01:19:20 +0530 |
| commit | e5935c15af0375240fa7c711dc99101fa48048be (patch) | |
| tree | e1807c8552c25b0f2f10d55dce59725606bb4b66 /src/app/anime/top-airing | |
| parent | prolly the last update to dramalama. (diff) | |
| download | dramalama-e5935c15af0375240fa7c711dc99101fa48048be.tar.xz dramalama-e5935c15af0375240fa7c711dc99101fa48048be.zip | |
UI changes
Diffstat (limited to 'src/app/anime/top-airing')
| -rw-r--r-- | src/app/anime/top-airing/page.jsx | 2 | ||||
| -rw-r--r-- | src/app/anime/top-airing/trending.module.css | 31 |
2 files changed, 22 insertions, 11 deletions
diff --git a/src/app/anime/top-airing/page.jsx b/src/app/anime/top-airing/page.jsx index 898b766..e385629 100644 --- a/src/app/anime/top-airing/page.jsx +++ b/src/app/anime/top-airing/page.jsx @@ -6,7 +6,7 @@ export default async function Trending() { const data = await test(); return ( - <div className="trendingContainer"> + <div className={styles.TrendingContainer}> <div className={styles.TrendingText}> <p>Trending</p> </div> diff --git a/src/app/anime/top-airing/trending.module.css b/src/app/anime/top-airing/trending.module.css index c3c55c5..33d00d3 100644 --- a/src/app/anime/top-airing/trending.module.css +++ b/src/app/anime/top-airing/trending.module.css @@ -8,6 +8,7 @@ margin: 5px; color: var(--soft-purple); font-family: "Poppins"; + font-weight: 500; } .TrendingText span { @@ -17,11 +18,20 @@ .trending { display: flex; overflow-x: auto; - margin: 5px; +} + +.TrendingContainer:hover .trendingEntries { + opacity: 0.5; +} + +.TrendingContainer:hover .trendingEntries:hover { + opacity: 1; + transform: scale(1.02); } .trending::-webkit-scrollbar { height: 5px; + width: 0px; } .trending::-webkit-scrollbar-thumb { @@ -30,13 +40,12 @@ } .trendingEntries { - margin: 7px; - transition: transform 0.2s linear; -} - -.trendingEntries:hover { - transition: transform 0.2s linear; - transform: scale(0.97); + margin: 4px; + transition: transform 400ms ease; + background-color: #353535a6; + padding: 0.5rem; + border-radius: 1rem; + transition: opacity 400ms ease, transform 400ms ease; } .trendingEntries p { @@ -44,10 +53,12 @@ margin: 5px auto; width: 140px; font-family: "Atkinson Hyperlegible"; + height: 80px; + overflow-y: auto; } .trendingEntries p::-webkit-scrollbar { - width: 5px; + width: 2px; } .trendingEntries p::-webkit-scrollbar-thumb { @@ -56,6 +67,6 @@ } .trendingImage { - border-radius: 5px; + border-radius: 1rem; aspect-ratio: auto; }
\ No newline at end of file |