diff --git a/public/css/home.css b/public/css/home.css index 6c84531..9c10659 100644 --- a/public/css/home.css +++ b/public/css/home.css @@ -78,7 +78,7 @@ body position: fixed; top:0; background: var(--bgBetter); - z-index: 1; + z-index: 999; } .nav > .button-container { @@ -180,7 +180,7 @@ button:hover margin-right: 3em; border-bottom:4px solid var(--border-hover); } -.carousel > .buttonContainer +.buttonContainer { display: flex; flex-direction: row; @@ -1003,4 +1003,109 @@ button:hover .flexBox > .inView { border: 3px solid var(--accent); +} +.chapterContainer +{ + display: flex; + gap: 1em; + height: 20em; + overflow: hidden; + color: var(--text); + flex-direction: row; + flex-wrap: nowrap; + align-items: center; + justify-content: center; +} +.boundry +{ + display: flex; + flex-direction: row; + gap: 1em; + transition: transform 0.5s ease; +} +.hideOverflow +{ + width: 90%; + overflow: hidden; +} +.chapterCard +{ + background:var(--bgBetter); + border: 2px solid var(--border); + border-radius:15px; + height:15em; + min-width: 20em; + overflow:hidden; + display:flex; +} +.chapterCardOverlay +{ + cursor: pointer; + +} +.chapterInfo +{ + width: 100%; +} +.imgContainer +{ + overflow:hidden; + margin: 1em; + border: 2px solid var(--border); + border-radius:10px; + width:8em; + min-width: 8em; + max-width: 8em; + height:85%; +} +.chapterImage +{ + height:100%; + width:100%; + object-fit:cover; +} +.removeChapter:hover +{ + color:var(--purple-heart-900) +} +.removeChapter +{ + position:relative; + color:var(--dropped); + top:2%; + left:95%; + z-index: 5; +} +.continueTitle +{ + text-align: center; + font-size: 2em; + color: var(--purple-heart-50); + border-bottom: 3px solid var(--purple-heart-50); + width: 80%; + left: 10%; + position: relative; +} +#buttonContainerchapters +{ + top:-12em; + width:90%; + left: 5%; +} +.mangaImageContainer +{ + width: 3em; + height: 4.5em; + border: 2px solid var(--border); + border-radius: 5px; + overflow: hidden; + position: absolute; + left: 80%; + bottom: 5%; +} +.mangaCoverImg +{ + width: 100%; + height: 100%; + object-fit: fill; } \ No newline at end of file