diff options
| author | real-zephex <[email protected]> | 2024-05-11 19:14:29 +0530 |
|---|---|---|
| committer | GitHub <[email protected]> | 2024-05-11 19:14:29 +0530 |
| commit | e8875b008268c5873454b120bfb358cb4180093f (patch) | |
| tree | 2a0f8a15fb42f093e1d35f52eb3f7e14f1b0fbe5 /src/app/anime/styles/search.module.css | |
| parent | Merge pull request #24 from zephex-alt/master (diff) | |
| parent | added anime history section (diff) | |
| download | dramalama-e8875b008268c5873454b120bfb358cb4180093f.tar.xz dramalama-e8875b008268c5873454b120bfb358cb4180093f.zip | |
Merge pull request #25 from real-zephex/improvement-2
Improvement 2
Diffstat (limited to 'src/app/anime/styles/search.module.css')
| -rw-r--r-- | src/app/anime/styles/search.module.css | 90 |
1 files changed, 90 insertions, 0 deletions
diff --git a/src/app/anime/styles/search.module.css b/src/app/anime/styles/search.module.css new file mode 100644 index 0000000..d3564f7 --- /dev/null +++ b/src/app/anime/styles/search.module.css @@ -0,0 +1,90 @@ +.SearchBarContainer { + padding: 1rem 0 0.8rem 0; + display: flex; + align-items: center; +} + +.SearchInputContainer { + display: flex; + align-items: center; + background-color: #121212; + padding: 0.5rem; + border-radius: 0.5rem; + width: 40%; +} + +.animeHistoryButton { + font-family: "Lexend Deca", serif; + outline: none; + border: none; + background-color: #121212; + color: white; + margin: 0 0 0 0.4rem; + padding: 0.5rem; + cursor: pointer; +} + +.SearchInputContainer input { + background-color: transparent; + border: none; + outline: none; + color: white; + margin-left: 0.5rem; + font-size: 18px; + font-family: "Atkinson Hyperlegible", serif; + width: 100%; +} + +/* Search Results */ + +.SearchResultsContainer { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); + grid-gap: 0.7rem; +} + +.AnimeEntry { + display: flex; + align-items: center; + justify-content: space-between; + background-color: #252525be; + padding: 0.5rem; + border-radius: 0.5rem; +} + +.AnimeEntry p { + font-size: 18px; +} + +.AnimeEntry img { + border-radius: 0.5rem; +} + +.SearchResultsContainer::-webkit-scrollbar { + height: 0.2rem; +} + +.SearchResultsContainer::-webkit-scrollbar-track { + background-color: var(--softer-purple); +} + +.SearchResultsContainer::-webkit-scrollbar-thumb { + background-color: var(--light-green); + border-radius: 1rem; +} + +@media screen and (max-width: 768px) { + .SearchBarContainer { + width: 100%; + } + + .SearchResultsContainer { + display: flex; + align-items: center; + overflow: auto; + } + + .AnimeEntry p { + width: 50vw; + } +}
\ No newline at end of file |