diff --git a/animex/Resources/styles.css b/animex/Resources/styles.css index d25bf5e..c1a6c86 100644 --- a/animex/Resources/styles.css +++ b/animex/Resources/styles.css @@ -35,8 +35,10 @@ body { color: var(--text-primary); display: flex; flex-direction: column; - height: 100vh; - overflow: hidden; + + height: auto !important; + min-height: 100vh; + overflow-y: auto !important; } /* @@ -51,7 +53,7 @@ DESKTOP STYLES (REWORKED & CONSOLIDATED) flex-direction: row; flex-grow: 1; height: 100vh; - overflow: hidden; + overflow-x: hidden; } .desktop-main { diff --git a/animex/manga-info.html b/animex/manga-info.html index 76c3126..a0e0d1f 100644 --- a/animex/manga-info.html +++ b/animex/manga-info.html @@ -1,4 +1,4 @@ - + @@ -7,8 +7,6 @@ content="width=device-width, initial-scale=1.0, user-scalable=no" /> Manga Info - - -
@@ -459,21 +520,25 @@ id="manga-poster" class="poster-image" src="https://placehold.co/400x600/202020/666?text=..." - alt="Manga Cover" + alt="Cover" />
-
- -
+

Loading...

-

- Loading synopsis... -

+

Loading metadata...

+ @@ -485,30 +550,75 @@
-
- -
+ + + +
+
- -
    - -
- -
-
+ +
    + +
    +
    +
    +
    +

    Select Source

    +

    + Ch. +

    +
    + +
    +
    + - \ No newline at end of file + diff --git a/animex/manga.html b/animex/manga.html index 5eb9236..b5e968e 100644 --- a/animex/manga.html +++ b/animex/manga.html @@ -1,4 +1,4 @@ - + @@ -141,7 +141,9 @@ max-width: 220px; height: 330px; border-radius: 12px; - transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.5s ease; + transition: + transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), + opacity 0.5s ease; cursor: pointer; transform: scale(0.5); opacity: 0; @@ -153,11 +155,31 @@ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } - .slide-center { transform: translateX(0) scale(1); opacity: 1; z-index: 10; } - .slide-left { transform: translateX(-40%) scale(0.8) rotate(-8deg); opacity: 1; z-index: 5; } - .slide-right { transform: translateX(40%) scale(0.8) rotate(8deg); opacity: 1; z-index: 5; } - .slide-exit-left { transform: translateX(-150%) scale(0.6); opacity: 0; z-index: 1; } - .slide-exit-right { transform: translateX(150%) scale(0.6); opacity: 0; z-index: 1; } + .slide-center { + transform: translateX(0) scale(1); + opacity: 1; + z-index: 10; + } + .slide-left { + transform: translateX(-40%) scale(0.8) rotate(-8deg); + opacity: 1; + z-index: 5; + } + .slide-right { + transform: translateX(40%) scale(0.8) rotate(8deg); + opacity: 1; + z-index: 5; + } + .slide-exit-left { + transform: translateX(-150%) scale(0.6); + opacity: 0; + z-index: 1; + } + .slide-exit-right { + transform: translateX(150%) scale(0.6); + opacity: 0; + z-index: 1; + } /* --- DESKTOP HERO SECTION (Hidden on Mobile) --- */ #desktop-hero { @@ -169,9 +191,9 @@ border-radius: 20px; overflow: hidden; background-color: #000; - box-shadow: 0 20px 50px rgba(0,0,0,0.5); + box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } - + .hero-bg-image { position: absolute; top: 0; @@ -180,21 +202,36 @@ height: 100%; object-fit: cover; opacity: 0.8; - mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%); - -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 100%); + mask-image: linear-gradient( + to right, + transparent 0%, + black 20%, + black 100% + ); + -webkit-mask-image: linear-gradient( + to right, + transparent 0%, + black 20%, + black 100% + ); transition: opacity 0.5s ease-in-out; } - + .hero-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background: linear-gradient(to right, #121212 30%, rgba(18,18,18,0.8) 50%, transparent 100%); + background: linear-gradient( + to right, + #121212 30%, + rgba(18, 18, 18, 0.8) 50%, + transparent 100% + ); z-index: 1; } - + .hero-content { position: relative; z-index: 2; @@ -205,7 +242,9 @@ flex-direction: column; justify-content: center; box-sizing: border-box; - transition: opacity 0.5s ease-in-out, transform 0.5s ease; + transition: + opacity 0.5s ease-in-out, + transform 0.5s ease; } /* Animation State Class */ @@ -228,7 +267,7 @@ flex-wrap: wrap; } .hero-tag { - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); padding: 5px 12px; border-radius: 4px; font-size: 0.85em; @@ -241,9 +280,9 @@ line-height: 1.1; font-weight: 800; margin: 0 0 10px 0; - text-shadow: 0 2px 10px rgba(0,0,0,0.5); + text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } - + .hero-subtitle { font-size: 1.5rem; color: var(--accent-color); @@ -274,13 +313,15 @@ font-weight: 700; border-radius: 8px; cursor: pointer; - transition: transform 0.2s, background 0.2s; + transition: + transform 0.2s, + background 0.2s; display: flex; align-items: center; gap: 10px; border: none; } - + .btn-primary { background: #fff; color: #000; @@ -289,15 +330,15 @@ background: #eee; transform: translateY(-2px); } - + .btn-outline { background: transparent; - border: 2px solid rgba(255,255,255,0.3); + border: 2px solid rgba(255, 255, 255, 0.3); color: #fff; } .btn-outline:hover { border-color: #fff; - background: rgba(255,255,255,0.1); + background: rgba(255, 255, 255, 0.1); } /* --- Hero Indicators (Dots) --- */ @@ -335,27 +376,31 @@ /* --- MEDIA QUERY FOR DESKTOP --- */ @media (min-width: 1024px) { body { - padding-top: 100px; + padding-top: 100px; } /* Swap Carousel for Hero */ - #featured-carousel-container { display: none !important; } - #desktop-hero { display: flex !important; } + #featured-carousel-container { + display: none !important; + } + #desktop-hero { + display: flex !important; + } /* Relax grid layout */ .poster-card { - width: 160px; - height: 240px; + width: 160px; + height: 240px; } - + /* Make navbar cleaner on desktop */ .navbar { - padding: 20px 0; + padding: 20px 0; } } @media (max-width: 768px) { .section-title { - font-size: 1em; + font-size: 1em; } .horizontal-scroll-container { @@ -364,51 +409,55 @@ } /* --- Search & Grids --- */ - #mangadex-search-container { margin-bottom: 30px; } + #mangadex-search-container { + margin-bottom: 30px; + } .search-box { - position: relative; - width: 100%; - max-width: 600px; - margin: 0 auto 30px auto; + position: relative; + width: 100%; + max-width: 600px; + margin: 0 auto 30px auto; } #mangadex-search-input { - width: 100%; - padding: 15px 50px 15px 20px; - font-size: 1.1em; - border-radius: 30px; - border: 2px solid #333; - background-color: #1f1f1f; - color: #fff; - box-sizing: border-box; - transition: border-color 0.3s, box-shadow 0.3s; + width: 100%; + padding: 15px 50px 15px 20px; + font-size: 1.1em; + border-radius: 30px; + border: 2px solid #333; + background-color: #1f1f1f; + color: #fff; + box-sizing: border-box; + transition: + border-color 0.3s, + box-shadow 0.3s; } #mangadex-search-input:focus { - outline: none; - border-color: var(--accent-color); - box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3); + outline: none; + border-color: var(--accent-color); + box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.3); } #mangadex-search-btn { - position: absolute; - right: 10px; - top: 50%; - transform: translateY(-50%); - background: var(--accent-color); - border: none; - color: white; - width: 40px; - height: 40px; - border-radius: 50%; - cursor: pointer; - font-size: 1.2em; - display: flex; - align-items: center; - justify-content: center; + position: absolute; + right: 10px; + top: 50%; + transform: translateY(-50%); + background: var(--accent-color); + border: none; + color: white; + width: 40px; + height: 40px; + border-radius: 50%; + cursor: pointer; + font-size: 1.2em; + display: flex; + align-items: center; + justify-content: center; } #mangadex-results-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); - gap: 24px; - min-height: 200px; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); + gap: 24px; + min-height: 200px; } /* --- Loaders & Common --- */ @@ -421,7 +470,14 @@ animation: spin 1s linear infinite; margin: 100px auto; } - @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } + @keyframes spin { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } .section-header-row { display: flex; @@ -429,7 +485,7 @@ align-items: center; margin-bottom: 15px; padding-bottom: 10px; - border-bottom: 1px solid rgba(255,255,255,0.05); + border-bottom: 1px solid rgba(255, 255, 255, 0.05); } .view-all-arrow { display: flex; @@ -444,7 +500,9 @@ font-weight: bold; transition: background 0.2s; } - .view-all-arrow:hover { background-color: var(--accent-color); } + .view-all-arrow:hover { + background-color: var(--accent-color); + } .horizontal-scroll-container { display: flex; @@ -454,9 +512,16 @@ scrollbar-width: thin; scrollbar-color: #444 #121212; } - .horizontal-scroll-container::-webkit-scrollbar { height: 8px; } - .horizontal-scroll-container::-webkit-scrollbar-track { background: #121212; } - .horizontal-scroll-container::-webkit-scrollbar-thumb { background-color: #444; border-radius: 4px; } + .horizontal-scroll-container::-webkit-scrollbar { + height: 8px; + } + .horizontal-scroll-container::-webkit-scrollbar-track { + background: #121212; + } + .horizontal-scroll-container::-webkit-scrollbar-thumb { + background-color: #444; + border-radius: 4px; + } .poster-card { flex-shrink: 0; @@ -466,7 +531,9 @@ position: relative; border-radius: 10px; overflow: hidden; - transition: transform 0.3s ease, box-shadow 0.3s ease; + transition: + transform 0.3s ease, + box-shadow 0.3s ease; background-color: #222; } .poster-card:hover { @@ -486,7 +553,11 @@ left: 0; width: 100%; height: 60%; - background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, transparent 100%); + background: linear-gradient( + to top, + rgba(0, 0, 0, 0.9) 0%, + transparent 100% + ); border-radius: 0 0 10px 10px; } .poster-card .poster-title { @@ -502,7 +573,7 @@ color: #fff; white-space: normal; line-height: 1.2; - text-shadow: 0 2px 4px rgba(0,0,0,0.8); + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8); } .error-message { color: #e5e5e5; @@ -519,7 +590,9 @@ text-align: left; transition: transform 0.2s ease-in-out; } - .poster-container:hover { transform: translateY(-5px); } + .poster-container:hover { + transform: translateY(-5px); + } .poster-image-wrapper { position: relative; cursor: pointer; @@ -535,7 +608,9 @@ display: block; transition: transform 0.3s ease; } - .poster-container:hover .poster-image-wrapper img { transform: scale(1.05); } + .poster-container:hover .poster-image-wrapper img { + transform: scale(1.05); + } .poster-container .poster-title { font-size: 0.9em; font-weight: 500; @@ -544,7 +619,9 @@ overflow: hidden; text-overflow: ellipsis; } - .poster-container:hover .poster-title { color: var(--accent-color); } + .poster-container:hover .poster-title { + color: var(--accent-color); + } .progress-bar { position: absolute; bottom: 0; @@ -582,85 +659,122 @@ fill="none" xmlns="http://www.w3.org/2000/svg" > - + - - - - + + + +
    - -
    -

    Spotlight

    -
    - -
    + +
    +

    Spotlight

    +
    + +
    +
    + + +
    + + - -
    - -
    - - - - -
    + +
    + +
    +
    + + + +
    - \ No newline at end of file + diff --git a/animex/search.html b/animex/search.html index 3b60de9..791bd9d 100644 --- a/animex/search.html +++ b/animex/search.html @@ -8,7 +8,7 @@ - +