fixed a bug & replicated all changes to docker version
This commit is contained in:
139
docker/views/404.html
Normal file
139
docker/views/404.html
Normal file
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - WaifuBoard</title>
|
||||
<link rel="stylesheet" href="/views/css/globals.css">
|
||||
<link rel="stylesheet" href="/views/css/components/navbar.css">
|
||||
<link rel="stylesheet" href="/views/css/components/titlebar.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
|
||||
<script src="/src/scripts/titlebar.js"></script>
|
||||
|
||||
<style>
|
||||
.error-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
padding: var(--spacing-2xl);
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.error-code {
|
||||
font-size: 6rem;
|
||||
font-weight: 900;
|
||||
margin: 0;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
font-size: 1.1rem;
|
||||
color: var(--color-text-secondary);
|
||||
margin: var(--spacing-md) 0 var(--spacing-xl);
|
||||
max-width: 420px;
|
||||
}
|
||||
|
||||
.error-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="titlebar">
|
||||
<div class="title-left">
|
||||
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
|
||||
<span class="app-title">WaifuBoard</span>
|
||||
</div>
|
||||
<div class="title-right">
|
||||
<button class="min">−</button>
|
||||
<button class="max">🗖</button>
|
||||
<button class="close">✕</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<div class="nav-center">
|
||||
<button class="nav-button" onclick="window.location.href='/anime'">Anime</button>
|
||||
<button class="nav-button" onclick="window.location.href='/books'">Books</button>
|
||||
<button class="nav-button" onclick="window.location.href='/gallery'">Gallery</button>
|
||||
<button class="nav-button" onclick="window.location.href='/schedule'">Schedule</button>
|
||||
<button class="nav-button" onclick="window.location.href='/my-list'">My List</button>
|
||||
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="search-wrapper" style="visibility: hidden;">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-user" id="nav-user" style="display:none;">
|
||||
<div class="user-avatar-btn">
|
||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
||||
<div class="online-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown" id="nav-dropdown">
|
||||
<div class="dropdown-header">
|
||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
||||
<div class="dropdown-user-info">
|
||||
<div class="dropdown-username" id="nav-username"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/my-list" class="dropdown-item">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
||||
<polyline points="7 3 7 8 15 8"/>
|
||||
</svg>
|
||||
<span>My List</span>
|
||||
</a>
|
||||
<button class="dropdown-item logout-item" id="nav-logout">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="error-container">
|
||||
<div>
|
||||
<h1 class="error-code">404</h1>
|
||||
<p class="error-message">
|
||||
This page doesn’t exist.
|
||||
</p>
|
||||
|
||||
<div class="error-actions">
|
||||
<button class="btn-primary" onclick="location.href='/'">Home</button>
|
||||
<button class="btn-blur" onclick="history.back()">Back</button>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<script src="/src/scripts/utils/auth-utils.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -219,6 +219,7 @@
|
||||
id="extension-pill"
|
||||
style="display: none; background: #8b5cf6"
|
||||
></div>
|
||||
<div class="pill" id="local-pill" style="display: none; background: #8b5cf6;"></div>
|
||||
<div class="pill score" id="score">--% Score</div>
|
||||
<div class="pill" id="year">----</div>
|
||||
<div class="pill" id="genres">Action</div>
|
||||
|
||||
@@ -9,9 +9,10 @@
|
||||
<link rel="stylesheet" href="/views/css/components/hero.css">
|
||||
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
|
||||
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
|
||||
<link rel="stylesheet" href="/views/css/components/local-library.css">
|
||||
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
|
||||
</head>
|
||||
<body >
|
||||
<body>
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
@@ -53,6 +54,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="dropdown-item" id="nav-settings">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="12" cy="12" r="3"/>
|
||||
<path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06A1.65 1.65 0 0 0 15 19.4a1.65 1.65 0 0 0-1 .6 1.65 1.65 0 0 0-.33 1.82V22a2 2 0 1 1-4 0v-.18a1.65 1.65 0 0 0-.33-1.82 1.65 1.65 0 0 0-1-.6 1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.6 15a1.65 1.65 0 0 0-.6-1 1.65 1.65 0 0 0-1.82-.33H2a2 2 0 1 1 0-4h.18a1.65 1.65 0 0 0 1.82-.33 1.65 1.65 0 0 0 .6-1 1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6c.37 0 .72-.14 1-.6A1.65 1.65 0 0 0 10.33 2.18V2a2 2 0 1 1 4 0v.18a1.65 1.65 0 0 0 .33 1.82c.28.46.63.6 1 .6a1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c0 .37.14.72.6 1 .46.28.6.63.6 1z"/>
|
||||
</svg>
|
||||
<span>Settings</span>
|
||||
</button>
|
||||
|
||||
<a href="/my-list" class="dropdown-item">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
@@ -108,8 +117,102 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="library-mode-btn icon-only" id="library-mode-btn" onclick="toggleLibraryMode()" title="Switch library mode">
|
||||
<svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
|
||||
<polyline points="9 22 9 12 15 12 15 22"/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Online Mode Content -->
|
||||
<main id="online-content">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue watching</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
||||
<div class="carousel" id="my-status">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- Local Library Mode Content -->
|
||||
<main id="local-content" class="hidden">
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Local Anime Library</div>
|
||||
<button class="btn-secondary" onclick="scanLocalLibrary()">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M21 12a9 9 0 1 1-9-9"/>
|
||||
<path d="M21 3v6h-6"/>
|
||||
</svg>
|
||||
<span id="scan-text">Scan Library</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="local-filters">
|
||||
<div class="filter-group">
|
||||
<button class="filter-btn active" data-filter="all">All</button>
|
||||
<button class="filter-btn" data-filter="watching">Watching</button>
|
||||
<button class="filter-btn" data-filter="completed">Completed</button>
|
||||
<button class="filter-btn" data-filter="unwatched">Unwatched</button>
|
||||
<button class="filter-btn" data-filter="unlinked">Unlinked</button>
|
||||
</div>
|
||||
|
||||
<div class="filter-group">
|
||||
<button class="filter-btn" data-sort="az">A–Z</button>
|
||||
<button class="filter-btn" data-sort="recent">Recent</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="local-library-grid" id="local-entries-grid">
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
<div class="skeleton-card"></div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="modal-overlay" id="add-list-modal">
|
||||
<div class="modal-content modal-list">
|
||||
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
|
||||
@@ -117,11 +220,10 @@
|
||||
|
||||
<div class="modal-body">
|
||||
<div class="modal-fields-grid">
|
||||
|
||||
<div class="form-group">
|
||||
<label>Status</label>
|
||||
<select id="entry-status" class="form-input">
|
||||
<option value="WATCHING">Watching/Reading</option>
|
||||
<option value="WATCHING"><Watchi></Watchi>ng/Reading</option>
|
||||
<option value="COMPLETED">Completed</option>
|
||||
<option value="PLANNING">Planning</option>
|
||||
<option value="PAUSED">Paused</option>
|
||||
@@ -167,7 +269,6 @@
|
||||
<input type="checkbox" id="entry-is-private" class="form-checkbox">
|
||||
<label for="entry-is-private">Mark as Private</label>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -178,63 +279,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<main>
|
||||
<section class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Continue watching</div>
|
||||
</div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('my-status', -1)">‹</button>
|
||||
<div class="carousel" id="my-status">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('my-status', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Trending This Season</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('trending', -1)">‹</button>
|
||||
<div class="carousel" id="trending">
|
||||
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('trending', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
<section class="section">
|
||||
<div class="section-header"><div class="section-title">Top Airing Now</div></div>
|
||||
<div class="carousel-wrapper">
|
||||
<button class="scroll-btn left" onclick="scrollCarousel('top-airing', -1)">‹</button>
|
||||
<div class="carousel" id="top-airing">
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
<div class="card"><div class="card-img-wrap skeleton"></div></div>
|
||||
</div>
|
||||
<button class="scroll-btn right" onclick="scrollCarousel('top-airing', 1)">›</button>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div id="updateToast" class="hidden">
|
||||
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
|
||||
|
||||
<a
|
||||
id="downloadButton"
|
||||
href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases"
|
||||
target="_blank"
|
||||
>
|
||||
<a id="downloadButton" href="https://git.waifuboard.app/ItsSkaiya/WaifuBoard/releases" target="_blank">
|
||||
Click To Download
|
||||
</a>
|
||||
</div>
|
||||
@@ -245,7 +293,9 @@
|
||||
<script src="/src/scripts/utils/continue-watching-manager.js"></script>
|
||||
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
|
||||
<script src="/src/scripts/anime/animes.js"></script>
|
||||
<script src="/src/scripts/local-library.js"></script>
|
||||
<script src="/src/scripts/updateNotifier.js"></script>
|
||||
<script src="/src/scripts/auth-guard.js"></script>
|
||||
<script src="/src/scripts/settings.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
62
docker/views/components/navbar.html
Normal file
62
docker/views/components/navbar.html
Normal file
@@ -0,0 +1,62 @@
|
||||
<nav class="navbar" id="navbar">
|
||||
<a href="#" class="nav-brand">
|
||||
<div class="brand-icon">
|
||||
<img src="/public/assets/waifuboards.ico" alt="WF Logo">
|
||||
</div>
|
||||
WaifuBoard
|
||||
</a>
|
||||
|
||||
<nav class="navbar">
|
||||
<div class="nav-center">
|
||||
<a href="/anime" class="nav-button {{anime}}">Anime</a>
|
||||
<a href="/books" class="nav-button {{books}}">Books</a>
|
||||
<a href="/gallery" class="nav-button {{gallery}}">Gallery</a>
|
||||
<a href="/schedule" class="nav-button {{schedule}}">Schedule</a>
|
||||
<a href="/my-list" class="nav-button {{myList}}">My List</a>
|
||||
<a href="/marketplace" class="nav-button {{marketplace}}">Marketplace</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<div class="search-wrapper {{hideSearch}}">
|
||||
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<path d="M21 21l-4.35-4.35"/>
|
||||
</svg>
|
||||
<input type="text" class="search-input" id="search-input" placeholder="Search anime..." autocomplete="off">
|
||||
<div class="search-results" id="search-results"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-user" id="nav-user" style="display:none;">
|
||||
<div class="user-avatar-btn">
|
||||
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
|
||||
<div class="online-indicator"></div>
|
||||
</div>
|
||||
|
||||
<div class="nav-dropdown" id="nav-dropdown">
|
||||
<div class="dropdown-header">
|
||||
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
|
||||
<div class="dropdown-user-info">
|
||||
<div class="dropdown-username" id="nav-username"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="/my-list" class="dropdown-item">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
|
||||
<polyline points="17 21 17 13 7 13 7 21"/>
|
||||
<polyline points="7 3 7 8 15 8"/>
|
||||
</svg>
|
||||
<span>My List</span>
|
||||
</a>
|
||||
<button class="dropdown-item logout-item" id="nav-logout">
|
||||
<svg width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/>
|
||||
<polyline points="16 17 21 12 16 7"/>
|
||||
<line x1="21" y1="12" x2="9" y2="12"/>
|
||||
</svg>
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
278
docker/views/components/settings-modal.html
Normal file
278
docker/views/components/settings-modal.html
Normal file
@@ -0,0 +1,278 @@
|
||||
<div id="settings-modal" class="modal hidden" onclick="if(event.target === this) window.toggleSettingsModal(true)">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content">
|
||||
|
||||
<aside class="modal-sidebar">
|
||||
<div class="sidebar-header">
|
||||
<h2 class="sidebar-title">Settings</h2>
|
||||
</div>
|
||||
<nav id="config-nav" class="nav-list">
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-footer">
|
||||
<button onclick="window.toggleSettingsModal(true)" class="btn-exit">
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
|
||||
<polyline points="16 17 21 12 16 7"></polyline>
|
||||
<line x1="21" y1="12" x2="9" y2="12"></line>
|
||||
</svg>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="modal-main">
|
||||
<form id="config-form" class="config-wrapper">
|
||||
<div id="config-section-content" class="section-container">
|
||||
<div class="skeleton-loader">
|
||||
<div class="skeleton title-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
<div class="skeleton field-skeleton"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="modal-footer-sticky">
|
||||
<p class="footer-hint">Changes are applied immediately after saving.</p>
|
||||
<button type="submit" class="btn-primary">Save Changes</button>
|
||||
</div>
|
||||
</form>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
/* --- AMOLED THEME VARIABLES --- */
|
||||
:root {
|
||||
--amoled-black: #000000;
|
||||
--amoled-surface: #080808;
|
||||
--amoled-field: #0e0e0e;
|
||||
--amoled-border: rgba(255, 255, 255, 0.08);
|
||||
--accent-purple: #8b5cf6;
|
||||
--accent-glow: rgba(139, 92, 246, 0.15);
|
||||
--text-main: #ffffff;
|
||||
--text-dim: #a1a1aa;
|
||||
}
|
||||
|
||||
/* --- MODAL BASE --- */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.modal.hidden { display: none !important; }
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
backdrop-filter: blur(12px);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row; /* Horizontal layout */
|
||||
width: 95%;
|
||||
max-width: 1200px; /* Increased size */
|
||||
height: 85vh;
|
||||
background: var(--amoled-black);
|
||||
border: var(--amoled-border);
|
||||
border-radius: 28px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
|
||||
animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
}
|
||||
|
||||
/* --- SIDEBAR --- */
|
||||
.modal-sidebar {
|
||||
width: 280px;
|
||||
background: var(--amoled-surface);
|
||||
border-right: var(--amoled-border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 2.5rem;
|
||||
color: var(--text-main);
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
.nav-list { flex: 1; }
|
||||
|
||||
.nav-item {
|
||||
padding: 12px 16px;
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
color: var(--text-dim);
|
||||
transition: all 0.2s ease;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: var(--text-main);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: var(--accent-glow);
|
||||
color: var(--accent-purple);
|
||||
box-shadow: inset 3px 0 0 var(--accent-purple);
|
||||
}
|
||||
|
||||
/* --- MAIN CONTENT & DYNAMIC INPUTS --- */
|
||||
.modal-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--amoled-black);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.config-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.section-container {
|
||||
flex: 1;
|
||||
padding: 3.5rem;
|
||||
overflow-y: auto;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #222 transparent;
|
||||
}
|
||||
|
||||
/* Styles for the injected section content */
|
||||
.config-group {
|
||||
margin-bottom: 2.5rem;
|
||||
animation: fadeInSection 0.4s ease-out;
|
||||
}
|
||||
|
||||
.config-group label {
|
||||
display: block;
|
||||
font-size: 0.75rem;
|
||||
color: var(--accent-purple);
|
||||
margin-bottom: 0.8rem;
|
||||
letter-spacing: 0.05em;
|
||||
font-weight: 800;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.config-input {
|
||||
width: 100%;
|
||||
padding: 1rem 1.2rem;
|
||||
background: var(--amoled-field);
|
||||
border: 1px solid #1a1a1a;
|
||||
border-radius: 14px;
|
||||
color: #fff;
|
||||
font-size: 1rem;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
.config-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-purple);
|
||||
background: #121212;
|
||||
box-shadow: 0 0 0 4px var(--accent-glow);
|
||||
}
|
||||
|
||||
/* --- FOOTER --- */
|
||||
.modal-footer-sticky {
|
||||
padding: 1.5rem 3.5rem;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
border-top: var(--amoled-border);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer-hint {
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
/* --- BUTTONS --- */
|
||||
.btn-primary {
|
||||
padding: 0.8rem 2.2rem;
|
||||
background: #ffffff;
|
||||
color: #000000;
|
||||
border: none;
|
||||
border-radius: 100px;
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
background: #f0f0f0;
|
||||
}
|
||||
|
||||
.btn-exit {
|
||||
background: #111;
|
||||
border: 1px solid #222;
|
||||
color: #ef4444;
|
||||
padding: 10px;
|
||||
border-radius: 12px;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
font-weight: 600;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
/* --- ANIMATIONS & SKELETON --- */
|
||||
@keyframes modalScaleUp {
|
||||
from { opacity: 0; transform: scale(0.97) translateY(10px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes fadeInSection {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
.skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
|
||||
.skeleton {
|
||||
background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: 12px;
|
||||
}
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
.title-skeleton { height: 35px; width: 40%; }
|
||||
.field-skeleton { height: 55px; width: 100%; }
|
||||
|
||||
/* Responsive Mobile View */
|
||||
@media (max-width: 850px) {
|
||||
.modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
|
||||
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
|
||||
.sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
|
||||
.section-container { padding: 2rem; }
|
||||
.modal-footer-sticky { padding: 1.5rem 2rem; }
|
||||
}
|
||||
</style>
|
||||
@@ -34,7 +34,7 @@
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.poster-card img {
|
||||
@@ -45,7 +45,7 @@
|
||||
|
||||
.info-grid {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 1.5rem;
|
||||
display: flex;
|
||||
@@ -53,36 +53,16 @@
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.info-item h4 {
|
||||
margin: 0 0 0.25rem 0;
|
||||
font-size: 0.85rem;
|
||||
color: var(--text-secondary);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.info-item span {
|
||||
font-weight: 600;
|
||||
font-size: 1rem;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.85rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
|
||||
.info-item span { font-weight: 600; font-size: 1rem; color: var(--color-text-primary); }
|
||||
|
||||
.character-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.character-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.char-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 50%;
|
||||
}
|
||||
.character-item { display: flex; align-items: center; gap: 0.75rem; font-size: 0.95rem; }
|
||||
.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; }
|
||||
|
||||
.main-content {
|
||||
display: flex;
|
||||
@@ -99,7 +79,7 @@
|
||||
font-weight: 900;
|
||||
line-height: 1;
|
||||
margin: 0 0 1.5rem 0;
|
||||
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
|
||||
text-shadow: 0 4px 30px rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
@@ -112,18 +92,14 @@
|
||||
|
||||
.pill {
|
||||
padding: 0.5rem 1.25rem;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: rgba(255,255,255,0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 600;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.pill.score {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: #4ade80;
|
||||
border-color: rgba(34, 197, 94, 0.2);
|
||||
}
|
||||
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
|
||||
|
||||
.action-row {
|
||||
display: flex;
|
||||
@@ -143,9 +119,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
transition:
|
||||
transform 0.2s,
|
||||
box-shadow 0.2s;
|
||||
transition: transform 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
|
||||
.btn-watch:hover {
|
||||
@@ -161,7 +135,7 @@
|
||||
border-radius: var(--radius-full);
|
||||
font-weight: 700;
|
||||
font-size: 1rem;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255,255,255,0.2);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
@@ -179,30 +153,17 @@
|
||||
line-height: 1.8;
|
||||
color: #e4e4e7;
|
||||
max-width: 900px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
background: rgba(255,255,255,0.03);
|
||||
padding: 2rem;
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255,255,255,0.05);
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.section-title {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 800;
|
||||
margin-bottom: 1.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
.section-title::before {
|
||||
content: "";
|
||||
width: 4px;
|
||||
height: 28px;
|
||||
background: var(--color-primary);
|
||||
border-radius: 2px;
|
||||
}
|
||||
.section-title { font-size: 1.8rem; font-weight: 800; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.8rem; }
|
||||
.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; }
|
||||
|
||||
.episodes-grid {
|
||||
display: grid;
|
||||
@@ -212,14 +173,14 @@
|
||||
|
||||
.episode-btn {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border: 1px solid rgba(255,255,255,0.1);
|
||||
padding: 1.25rem 1rem;
|
||||
border-radius: var(--radius-md);
|
||||
cursor: pointer;
|
||||
transition: 0.2s;
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
color: var(--text-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.episode-btn:hover {
|
||||
@@ -230,14 +191,8 @@
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(60px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
from { opacity: 0; transform: translateY(60px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
@@ -246,24 +201,11 @@
|
||||
margin-top: -100px;
|
||||
padding: 0 1.5rem 4rem 1.5rem;
|
||||
}
|
||||
.poster-card {
|
||||
width: 220px;
|
||||
margin: 0 auto;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
.main-content {
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
.anime-title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
}
|
||||
.sidebar {
|
||||
display: none;
|
||||
}
|
||||
.poster-card { width: 220px; margin: 0 auto; box-shadow: 0 10px 30px rgba(0,0,0,0.5); }
|
||||
.main-content { text-align: center; align-items: center; }
|
||||
.anime-title { font-size: 2.5rem; }
|
||||
.meta-row { justify-content: center; }
|
||||
.sidebar { display: none; }
|
||||
}
|
||||
|
||||
.read-more-btn {
|
||||
@@ -279,9 +221,7 @@
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
.read-more-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.read-more-btn:hover { text-decoration: underline; }
|
||||
|
||||
.episodes-header-row {
|
||||
display: flex;
|
||||
@@ -321,10 +261,7 @@
|
||||
}
|
||||
|
||||
.episode-search-input::-webkit-outer-spin-button,
|
||||
.episode-search-input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
.episode-search-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
|
||||
|
||||
.pagination-controls {
|
||||
display: flex;
|
||||
@@ -357,119 +294,4 @@
|
||||
color: #a1a1aa;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.content-container,
|
||||
.section,
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100vw;
|
||||
overflow-x: hidden;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
|
||||
.content-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-top: -50px;
|
||||
padding: 1rem 1.25rem 4rem 1.25rem;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
display: flex !important;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.poster-card {
|
||||
width: 180px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.info-grid {
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
order: 2;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.anime-title {
|
||||
font-size: 2.2rem;
|
||||
line-height: 1.1;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.pill {
|
||||
padding: 0.4rem 0.8rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.action-row {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.btn-watch,
|
||||
.btn-secondary {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.description-box {
|
||||
margin-top: 2rem;
|
||||
padding: 1.25rem;
|
||||
font-size: 1rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episodes-section {
|
||||
margin-top: 3rem;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.episodes-header-row {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.episode-search-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.episode-search-input {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.episodes-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.episode-btn {
|
||||
padding: 0.8rem 0.5rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.pagination-controls {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
132
docker/views/css/components/local-library.css
Normal file
132
docker/views/css/components/local-library.css
Normal file
@@ -0,0 +1,132 @@
|
||||
.library-mode-btn {
|
||||
padding: 0.6rem 1.2rem;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: var(--radius-full);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.library-mode-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.library-mode-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.library-mode-btn svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
.local-library-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
|
||||
gap: 1.5rem;
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
||||
.local-card {
|
||||
cursor: pointer;
|
||||
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
|
||||
}
|
||||
|
||||
.local-card:hover {
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
|
||||
.local-card-info {
|
||||
padding: 0.8rem 0;
|
||||
}
|
||||
|
||||
.local-card-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.match-status {
|
||||
font-size: 0.85rem;
|
||||
display: inline-block;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.status-linked {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.status-unlinked {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.skeleton-card {
|
||||
width: 100%;
|
||||
aspect-ratio: 2/3;
|
||||
background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%);
|
||||
background-size: 200% 100%;
|
||||
animation: shimmer 1.5s infinite;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% { background-position: 200% 0; }
|
||||
100% { background-position: -200% 0; }
|
||||
}
|
||||
|
||||
.hero-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.library-mode-btn.icon-only {
|
||||
position: absolute;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
z-index: 50;
|
||||
}
|
||||
|
||||
|
||||
.hero-mode-switch .library-mode-btn {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.local-filters {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.filter-btn {
|
||||
padding: 0.4rem 0.9rem;
|
||||
border-radius: 999px;
|
||||
background: rgba(255,255,255,0.06);
|
||||
border: 1px solid rgba(255,255,255,0.12);
|
||||
color: #bbb;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.filter-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
Reference in New Issue
Block a user