ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

Compare commits

base: ItsSkaiya:7544f56ba9081dc85c392e4f39b2d819030c2963
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1
..
compare: ItsSkaiya:7c85d91b85341a88ab5e07579a2a5520e5d2b474
Branches Tags
ItsSkaiya:main
ItsSkaiya:v2.0.0 ItsSkaiya:v2.0.0-rc.2 ItsSkaiya:v2.0.0-rc.1 ItsSkaiya:v2.0.0-rc.0 ItsSkaiya:v1.6.4 ItsSkaiya:v1.6.3 ItsSkaiya:v1.6.2 ItsSkaiya:v1.6.1

2 Commits
7544f56ba9 ... 7c85d91b85

Author SHA1 Message Date
itsskaiya
7c85d91b85 Merge branch 'main' of https://git.waifuboard.app/ItsSkaiya/WaifuBoard 2025-12-17 13:00:35 -05:00
itsskaiya
c11a1eed35 Docker server has responsiveness now 2025-12-17 13:00:15 -05:00
14 changed files with 2465 additions and 747 deletions
Expand all files Collapse all files

281
docker/views/anime/anime.html
View File

@@ -1,22 +1,33 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
href="/public/assets/waifuboards.ico"
type="image/x-icon"
/>
<title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/anime/anime.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/globals.css" />
<link rel="stylesheet" href="/views/css/components/anilist-modal.css" />
<link rel="stylesheet" href="/views/css/components/hero.css" />
<link rel="stylesheet" href="/views/css/anime/anime.css" />
<link
rel="stylesheet"
href="/views/css/components/updateNotifier.css"
/>
<script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/components/titlebar.css">
</head>
<body>
<div id="titlebar">
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
</head>
<body>
<div id="titlebar">
<div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<img
class="app-icon"
src="/public/assets/waifuboards.ico"
alt=""
/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
@@ -24,24 +35,25 @@
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
</div>
<div class="modal-overlay" id="desc-modal">
<div class="modal-overlay" id="desc-modal">
<div class="modal-content">
<button class="modal-close" onclick="closeModal()">✕</button>
<h2 class="modal-title">Synopsis</h2>
<div class="modal-text" id="full-description"></div>
</div>
</div>
</div>
<div class="modal-overlay" id="add-list-modal">
<div class="modal-overlay" id="add-list-modal">
<div class="modal-content modal-list">
<button class="modal-close" onclick="closeAddToListModal()">✕</button>
<button class="modal-close" onclick="closeAddToListModal()">
✕
</button>
<h2 class="modal-title" id="modal-title">Add to List</h2>
<div class="modal-body">
<div class="modal-fields-grid">
<div class="form-group">
<label>Status</label>
<select id="entry-status" class="form-input">
@@ -56,69 +68,132 @@
<div class="form-group">
<label>Episodes Watched</label>
<input type="number" id="entry-progress" class="form-input" min="0" placeholder="0">
<input
type="number"
id="entry-progress"
class="form-input"
min="0"
placeholder="0"
/>
</div>
<div class="form-group">
<label>Your Score (0-10)</label>
<input type="number" id="entry-score" class="form-input" min="0" max="10" step="0.1" placeholder="Optional">
<input
type="number"
id="entry-score"
class="form-input"
min="0"
max="10"
step="0.1"
placeholder="Optional"
/>
</div>
<div class="form-group full-width">
<div class="date-group">
<div class="date-input-pair">
<label for="entry-start-date">Start Date</label>
<input type="date" id="entry-start-date" class="form-input">
<label for="entry-start-date"
>Start Date</label
>
<input
type="date"
id="entry-start-date"
class="form-input"
/>
</div>
<div class="date-input-pair">
<label for="entry-end-date">End Date</label>
<input type="date" id="entry-end-date" class="form-input">
<input
type="date"
id="entry-end-date"
class="form-input"
/>
</div>
</div>
</div>
<div class="form-group">
<label for="entry-repeat-count">Rewatch Count</label>
<input type="number" id="entry-repeat-count" class="form-input" min="0">
<label for="entry-repeat-count"
>Rewatch Count</label
>
<input
type="number"
id="entry-repeat-count"
class="form-input"
min="0"
/>
</div>
<div class="form-group notes-group">
<label for="entry-notes">Notes</label>
<textarea id="entry-notes" class="form-input notes-textarea" rows="4" placeholder="Personal notes..."></textarea>
<textarea
id="entry-notes"
class="form-input notes-textarea"
rows="4"
placeholder="Personal notes..."
></textarea>
</div>
<div class="form-group checkbox-group">
<input type="checkbox" id="entry-is-private" class="form-checkbox">
<label for="entry-is-private">Mark as Private</label>
<input
type="checkbox"
id="entry-is-private"
class="form-checkbox"
/>
<label for="entry-is-private"
>Mark as Private</label
>
</div>
</div>
</div>
<div class="modal-actions">
<button class="btn-danger" id="modal-delete-btn" onclick="deleteFromList()">Remove</button>
<button class="btn-secondary" onclick="closeAddToListModal()">Cancel</button>
<button class="btn-primary" onclick="saveToList()">Save Changes</button>
<button
class="btn-danger"
id="modal-delete-btn"
onclick="deleteFromList()"
>
Remove
</button>
<button
class="btn-secondary"
onclick="closeAddToListModal()"
>
Cancel
</button>
<button class="btn-primary" onclick="saveToList()">
Save Changes
</button>
</div>
</div>
</div>
</div>
<a href="/anime" class="back-btn">
<svg width="20" height="20" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path d="M15 19l-7-7 7-7"/></svg>
<a href="/anime" class="back-btn">
<svg
width="20"
height="20"
fill="none"
stroke="currentColor"
stroke-width="2.5"
viewBox="0 0 24 24"
>
<path d="M15 19l-7-7 7-7" />
</svg>
Back to Home
</a>
</a>
<div class="hero-wrapper">
<div class="hero-wrapper">
<div class="video-background">
<div id="player"></div>
</div>
<div class="hero-overlay"></div>
</div>
</div>
<div class="content-container">
<div class="content-container">
<aside class="sidebar">
<div class="poster-card">
<img id="poster" src="" alt="">
<img id="poster" src="" alt="" />
</div>
<div class="info-grid">
@@ -157,7 +232,11 @@
<h1 class="anime-title" id="title">Loading...</h1>
<div class="meta-row">
<div class="pill extension-pill" id="extension-pill" style="display: none; background: #8b5cf6;"></div>
<div
class="pill extension-pill"
id="extension-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>
@@ -165,60 +244,122 @@
<div class="action-row">
<button class="btn-watch" id="watch-btn">
<svg width="24" height="24" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
<svg
width="24"
height="24"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M8 5v14l11-7z" />
</svg>
Start Watching
</button>
<button class="btn-secondary" id="add-to-list-btn" onclick="openAddToListModal()">+ Add to List</button>
<button
class="btn-secondary"
id="add-to-list-btn"
onclick="openAddToListModal()"
>
+ Add to List
</button>
</div>
</div>
<div class="description-box">
<div id="description-preview"></div>
<button id="read-more-btn" class="read-more-btn" style="display: none;" onclick="openModal()">
<button
id="read-more-btn"
class="read-more-btn"
style="display: none"
onclick="openModal()"
>
Read More
<svg width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M19 9l-7 7-7-7"/></svg>
<svg
width="16"
height="16"
fill="none"
stroke="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
>
<path d="M19 9l-7 7-7-7" />
</svg>
</button>
</div>
<div class="episodes-section">
<div class="episodes-header-row">
<div class="section-title" style="margin:0; border:none; padding:0;">
<h2 style="font-size: 1.8rem; border-left: 4px solid #8b5cf6; padding-left: 1rem;">Episodes</h2>
<div
class="section-title"
style="margin: 0; border: none; padding: 0"
>
<h2
style="
font-size: 1.8rem;
border-left: 4px solid #8b5cf6;
padding-left: 1rem;
"
>
Episodes
</h2>
</div>
<div class="episode-search-wrapper">
<input type="number" id="ep-search" class="episode-search-input" placeholder="Jump to Ep #" min="1">
<input
type="number"
id="ep-search"
class="episode-search-input"
placeholder="Jump to Ep #"
min="1"
/>
</div>
</div>
<div class="episodes-grid" id="episodes-grid"></div>
<div class="pagination-controls" id="pagination-controls">
<button class="page-btn" id="prev-page" onclick="changePage(-1)">Previous</button>
<span class="page-info" id="page-info">Page 1 of 1</span>
<button class="page-btn" id="next-page" onclick="changePage(1)">Next</button>
<button
class="page-btn"
id="prev-page"
onclick="changePage(-1)"
>
Previous
</button>
<span class="page-info" id="page-info"
>Page 1 of 1</span
>
<button
class="page-btn"
id="next-page"
onclick="changePage(1)"
>
Next
</button>
</div>
</div>
</main>
</div>
</div>
<div id="updateToast" class="hidden">
<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>
</div>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script>
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/anime/anime.js"></script>
</body>
<script src="/src/scripts/utils/auth-utils.js"></script>
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/url-utils.js"></script>
<script src="/src/scripts/utils/pagination-manager.js"></script>
<script src="/src/scripts/utils/media-metadata-utils.js"></script>
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/anime/anime.js"></script>
</body>
</html>

230
docker/views/css/anime/anime.css
View File

@@ -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,16 +53,36 @@
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(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-item span {
font-weight: 600;
font-size: 1rem;
color: var(--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;
@@ -79,7 +99,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 {
@@ -92,14 +112,18 @@
.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;
@@ -119,7 +143,9 @@
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 {
@@ -135,7 +161,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;
@@ -153,17 +179,30 @@
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;
@@ -173,7 +212,7 @@
.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;
@@ -191,8 +230,14 @@
}
@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) {
@@ -201,11 +246,24 @@
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 {
@@ -221,7 +279,9 @@
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;
@@ -261,7 +321,10 @@
}
.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;
@@ -295,3 +358,118 @@
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;
}
}

346
docker/views/css/anime/watch.css
View File

@@ -4,7 +4,11 @@
left: 0;
right: 0;
padding: var(--spacing-lg) var(--spacing-xl);
background: linear-gradient(180deg, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
background: linear-gradient(
180deg,
rgba(0, 0, 0, 0.8) 0%,
transparent 100%
);
z-index: 1000;
pointer-events: none;
}
@@ -64,7 +68,11 @@
box-shadow: var(--shadow-sm);
}
.control-group { display: flex; align-items: center; gap: var(--spacing-md); }
.control-group {
display: flex;
align-items: center;
gap: var(--spacing-md);
}
.sd-toggle {
display: flex;
@@ -87,11 +95,15 @@
letter-spacing: 0.05em;
}
.sd-option.active { color: var(--color-text-primary); }
.sd-option.active {
color: var(--color-text-primary);
}
.sd-bg {
position: absolute;
top: 4px; left: 4px; bottom: 4px;
top: 4px;
left: 4px;
bottom: 4px;
width: calc(50% - 4px);
background: var(--color-primary);
border-radius: var(--radius-full);
@@ -100,7 +112,9 @@
z-index: 1;
}
.sd-toggle[data-state="dub"] .sd-bg { transform: translateX(100%); }
.sd-toggle[data-state="dub"] .sd-bg {
transform: translateX(100%);
}
.source-select {
appearance: none;
@@ -119,8 +133,15 @@
transition: all var(--transition-base);
}
.source-select:hover { border-color: var(--color-primary); background-color: var(--color-bg-card); }
.source-select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-glow); }
.source-select:hover {
border-color: var(--color-primary);
background-color: var(--color-bg-card);
}
.source-select:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-glow);
}
.video-container {
aspect-ratio: 16/9;
@@ -128,14 +149,25 @@
background: var(--color-bg-base);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg), 0 0 0 1px var(--glass-border);
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--glass-border);
position: relative;
transition: box-shadow var(--transition-smooth);
}
.video-container:hover { box-shadow: var(--shadow-lg), 0 0 0 1px var(--color-primary), var(--shadow-glow); }
.video-container:hover {
box-shadow:
var(--shadow-lg),
0 0 0 1px var(--color-primary),
var(--shadow-glow);
}
#player { width: 100%; height: 100%; object-fit: contain; }
#player {
width: 100%;
height: 100%;
object-fit: contain;
}
.loading-overlay {
position: absolute;
@@ -150,16 +182,25 @@
}
.spinner {
width: 48px; height: 48px;
border: 3px solid rgba(255,255,255,0.1);
width: 48px;
height: 48px;
border: 3px solid rgba(255, 255, 255, 0.1);
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.loading-overlay p { color: var(--color-text-secondary); font-size: 0.95rem; font-weight: 500; }
.loading-overlay p {
color: var(--color-text-secondary);
font-size: 0.95rem;
font-weight: 500;
}
.episode-controls {
display: flex;
@@ -174,21 +215,49 @@
box-shadow: var(--shadow-sm);
}
.episode-info h1 { font-size: 1.75rem; font-weight: 800; margin: 0 0 var(--spacing-xs); }
.episode-info p { color: var(--color-primary); font-weight: 600; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.05em; }
.navigation-buttons { display: flex; gap: var(--spacing-md); }
.nav-btn {
display: flex; align-items: center; gap: var(--spacing-sm);
background: var(--color-bg-elevated); border: var(--border-subtle);
color: var(--color-text-primary); padding: 0.75rem 1.5rem;
border-radius: var(--radius-full); font-weight: 600; font-size: 0.9rem;
cursor: pointer; transition: all var(--transition-base);
.episode-info h1 {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 var(--spacing-xs);
}
.episode-info p {
color: var(--color-primary);
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.nav-btn:hover:not(:disabled) { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); }
.nav-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.navigation-buttons {
display: flex;
gap: var(--spacing-md);
}
.nav-btn {
display: flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--color-bg-elevated);
border: var(--border-subtle);
color: var(--color-text-primary);
padding: 0.75rem 1.5rem;
border-radius: var(--radius-full);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all var(--transition-base);
}
.nav-btn:hover:not(:disabled) {
background: var(--color-primary);
border-color: var(--color-primary);
transform: translateY(-2px);
box-shadow: var(--shadow-glow);
}
.nav-btn:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.episode-carousel-compact {
width: 100%;
@@ -258,10 +327,18 @@
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
mask-image: linear-gradient(to right, transparent, black var(--spacing-md), black calc(100% - var(--spacing-md)), transparent);
mask-image: linear-gradient(
to right,
transparent,
black var(--spacing-md),
black calc(100% - var(--spacing-md)),
transparent
);
}
.episode-carousel-compact-list::-webkit-scrollbar { display: none; }
.episode-carousel-compact-list::-webkit-scrollbar {
display: none;
}
.carousel-item {
flex: 0 0 200px;
@@ -290,12 +367,14 @@
.carousel-item.active-ep-carousel {
border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.15);
box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-md);
box-shadow:
0 0 0 2px var(--color-primary),
var(--shadow-md);
transform: scale(1.02);
}
.carousel-item.active-ep-carousel::after {
content: 'WATCHING';
content: "WATCHING";
position: absolute;
top: 0;
right: 0;
@@ -391,7 +470,8 @@
color: var(--color-primary);
}
.anime-details, .anime-extra-content {
.anime-details,
.anime-extra-content {
max-width: 1600px;
margin: var(--spacing-2xl) auto;
}
@@ -425,9 +505,17 @@
text-align: left;
}
.cover-image { width: 220px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.cover-image {
width: 220px;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
}
.details-content h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: var(--spacing-md); }
.details-content h1 {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: var(--spacing-md);
}
.meta-badge {
background: rgba(139, 92, 246, 0.12);
@@ -439,8 +527,15 @@
border: 1px solid rgba(139, 92, 246, 0.2);
}
.meta-badge.meta-score { background: var(--color-primary); color: white; }
.details-description { font-size: 1rem; line-height: 1.7; color: var(--color-text-secondary); }
.meta-badge.meta-score {
background: var(--color-primary);
color: white;
}
.details-description {
font-size: 1rem;
line-height: 1.7;
color: var(--color-text-secondary);
}
.characters-header {
display: flex;
@@ -471,9 +566,15 @@
border-radius: var(--radius-sm);
}
.expand-btn:hover { background: rgba(139, 92, 246, 0.1); }
.expand-btn svg { transition: transform var(--transition-smooth); }
.expand-btn[data-expanded="true"] svg { transform: rotate(180deg); }
.expand-btn:hover {
background: rgba(139, 92, 246, 0.1);
}
.expand-btn svg {
transition: transform var(--transition-smooth);
}
.expand-btn[data-expanded="true"] svg {
transform: rotate(180deg);
}
.characters-carousel {
display: flex;
@@ -495,7 +596,6 @@
}
.characters-carousel.expanded {
height: auto;
max-height: 3200px;
overflow-y: auto;
@@ -519,15 +619,38 @@
background: transparent;
}
.plyr--video { border-radius: var(--radius-xl); }
.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
.plyr--full-ui input[type=range] { color: var(--color-primary); }
.plyr__control:hover { background: rgba(255,255,255,0.12) !important; }
.plyr__menu__container { background: var(--glass-bg) !important; backdrop-filter: blur(16px); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg) !important; }
.plyr--video {
border-radius: var(--radius-xl);
}
.plyr__controls {
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.9) 0%,
rgba(0, 0, 0, 0.5) 50%,
transparent 100%
) !important;
padding: 1rem 1.5rem 1.5rem !important;
}
.plyr--full-ui input[type="range"] {
color: var(--color-primary);
}
.plyr__control:hover {
background: rgba(255, 255, 255, 0.12) !important;
}
.plyr__menu__container {
background: var(--glass-bg) !important;
backdrop-filter: blur(16px);
border: 1px solid var(--glass-border);
box-shadow: var(--shadow-lg) !important;
}
@media (min-width: 1024px) {
.carousel-nav { display: flex; }
.watch-container { padding-top: 5rem; }
.carousel-nav {
display: flex;
}
.watch-container {
padding-top: 5rem;
}
.details-cover {
align-items: center;
@@ -540,64 +663,101 @@
}
@media (max-width: 768px) {
.watch-container { padding: 4.5rem 1rem; }
.episode-carousel-compact-list {
padding: var(--spacing-sm) var(--spacing-md);
}
.carousel-header {
padding: 0 var(--spacing-md);
}
.carousel-item {
flex: 0 0 180px;
height: 100px;
}
.carousel-item-img-container { height: 60px; }
.carousel-item-info p { font-size: 0.95rem; }
.carousel-item.no-thumbnail {
flex: 0 0 140px;
height: 80px;
.watch-container {
padding: 5rem 1rem 2rem 1rem;
margin: 0;
width: 100%;
overflow-x: hidden;
}
.details-container { flex-direction: column; text-align: center; }
.player-toolbar {
flex-direction: column;
align-items: stretch;
gap: 1rem;
padding: 1rem;
}
.details-cover {
align-items: center;
.control-group {
justify-content: space-between;
width: 100%;
}
.details-cover h1 {
font-size: 2rem;
.source-select {
width: 100%;
background-position: right 1.5rem center;
}
.episode-controls {
flex-direction: column;
align-items: flex-start;
gap: 1.5rem;
}
.episode-info {
width: 100%;
text-align: left;
}
.episode-info h1 {
font-size: 1.4rem;
line-height: 1.3;
}
.navigation-buttons {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.8rem;
}
.nav-btn {
justify-content: center;
padding: 0.8rem;
width: 100%;
}
.details-container {
flex-direction: column;
padding: 1.5rem;
gap: 2rem;
}
.details-cover {
flex-direction: row;
align-items: flex-start;
width: 100%;
gap: 1.5rem;
}
@media (max-width: 480px) {
.details-cover {
flex-direction: column;
align-items: center;
text-align: center;
}
.cover-image { width: 180px; margin: 0 auto; }
.episode-controls { flex-direction: column; gap: var(--spacing-md); }
.navigation-buttons { width: 100%; justify-content: center; }
.nav-btn { flex: 1; justify-content: center; }
}
@media (max-width: 480px) {
.episode-info h1, .details-content h1 { font-size: 1.5rem; }
.carousel-item {
flex: 0 0 150px;
height: 90px;
}
.carousel-item-img-container { height: 50px; }
.carousel-item-info p { font-size: 0.9rem; }
.carousel-item.no-thumbnail {
flex: 0 0 120px;
height: 70px;
}
.details-cover h1 {
font-size: 1.5rem;
text-align: center;
}
}
.nav-btn span { display: none; }
.cover-image {
width: 140px;
flex-shrink: 0;
margin: 0 auto;
}
.details-content h1 {
font-size: 1.3rem;
}
.characters-carousel {
justify-content: center;
padding-bottom: 1rem;
}
.character-card {
flex: 1 1 100%;
width: calc(50% - 0.75rem);
flex: 0 0 calc(50% - 0.75rem);
}
}

513
docker/views/css/books/book.css
View File

@@ -1,28 +1,61 @@
.back-btn {
position: fixed;
top: 2rem; left: 2rem; z-index: 100;
display: flex; align-items: center; gap: 0.5rem;
top: 2rem;
left: 2rem;
z-index: 100;
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: var(--color-glass-bg); backdrop-filter: blur(12px);
border: var(--border-subtle); border-radius: var(--radius-full);
color: white; text-decoration: none; font-weight: 600;
background: var(--color-glass-bg);
backdrop-filter: blur(12px);
border: var(--border-subtle);
border-radius: var(--radius-full);
color: white;
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
.back-btn:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateX(-5px);
}
.hero-wrapper {
position: relative; width: 100%; height: 60vh; overflow: hidden;
position: relative;
width: 100%;
height: 60vh;
overflow: hidden;
}
.hero-background {
position: absolute;
inset: 0;
z-index: 0;
}
.hero-background img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0.4;
filter: blur(8px);
transform: scale(1.1);
}
.hero-background { position: absolute; inset: 0; z-index: 0; }
.hero-background img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; filter: blur(8px); transform: scale(1.1); }
.hero-overlay {
position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%);
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
to bottom,
transparent 0%,
var(--color-bg-base) 100%
);
}
.content-container {
position: relative; z-index: 10;
max-width: 1600px; margin: -350px auto 0 auto;
position: relative;
z-index: 10;
max-width: 1600px;
margin: -350px auto 0 auto;
padding: 0 3rem 4rem 3rem;
display: grid;
grid-template-columns: 260px 1fr;
@@ -31,7 +64,9 @@
animation: slideUp 0.8s ease;
}
.hero-content { display: none; }
.hero-content {
display: none;
}
.sidebar {
display: flex;
@@ -44,49 +79,111 @@
}
.poster-card {
width: 100%; aspect-ratio: 2/3; 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);
width: 100%;
aspect-ratio: 2/3;
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);
background: #1a1a1a;
}
.poster-card img { width: 100%; height: 100%; object-fit: cover; }
.poster-card img {
width: 100%;
height: 100%;
object-fit: cover;
}
.info-grid {
background: var(--color-bg-elevated); border: var(--border-subtle);
border-radius: var(--radius-md); padding: 1.25rem;
display: flex; flex-direction: column; gap: 1rem;
background: var(--color-bg-elevated);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.info-item h4 {
margin: 0 0 0.25rem 0;
font-size: 0.8rem;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.info-item span {
font-weight: 600;
font-size: 0.95rem;
}
.info-item h4 { margin: 0 0 0.25rem 0; font-size: 0.8rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.info-item span { font-weight: 600; font-size: 0.95rem; }
.main-content {
display: flex; flex-direction: column;
display: flex;
flex-direction: column;
padding-top: 4rem;
justify-content: flex-start;
}
.book-header { margin-bottom: 1.5rem; }
.book-title { font-size: 3.5rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; text-shadow: 0 4px 30px rgba(0,0,0,0.8); }
.meta-row { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.pill { padding: 0.4rem 1rem; background: rgba(255,255,255,0.1); border-radius: 99px; font-size: 0.9rem; font-weight: 600; border: var(--border-subtle); backdrop-filter: blur(10px); }
.pill.score { background: rgba(34, 197, 94, 0.2); color: #4ade80; border-color: rgba(34, 197, 94, 0.2); }
#description { display: none; }
#year { display: none; }
.action-row { display: flex; gap: 1rem; }
.btn-primary {
padding: 0.8rem 2rem; background: white; color: black; border: none; border-radius: 99px;
font-weight: 800; cursor: pointer; transition: transform 0.2s;
.book-header {
margin-bottom: 1.5rem;
}
.book-title {
font-size: 3.5rem;
font-weight: 900;
line-height: 1.1;
margin: 0 0 1rem 0;
text-shadow: 0 4px 30px rgba(0, 0, 0, 0.8);
}
.meta-row {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.pill {
padding: 0.4rem 1rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 99px;
font-size: 0.9rem;
font-weight: 600;
border: var(--border-subtle);
backdrop-filter: blur(10px);
}
.pill.score {
background: rgba(34, 197, 94, 0.2);
color: #4ade80;
border-color: rgba(34, 197, 94, 0.2);
}
#description {
display: none;
}
#year {
display: none;
}
.action-row {
display: flex;
gap: 1rem;
}
.btn-primary {
padding: 0.8rem 2rem;
background: white;
color: black;
border: none;
border-radius: 99px;
font-weight: 800;
cursor: pointer;
transition: transform 0.2s;
}
.btn-primary:hover {
transform: scale(1.05);
}
.btn-primary:hover { transform: scale(1.05); }
.btn-secondary {
padding: 0.8rem 2rem;
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 99px;
font-weight: 700;
cursor: pointer;
@@ -94,49 +191,80 @@
backdrop-filter: blur(10px);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.2);
background: rgba(255, 255, 255, 0.2);
}
.btn-blur {
padding: 0.8rem 2rem;
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 99px;
font-weight: 700;
cursor: pointer;
transition: 0.2s;
backdrop-filter: blur(10px);
}
.btn-blur:hover { background: rgba(255,255,255,0.2); }
.btn-blur:hover {
background: rgba(255, 255, 255, 0.2);
}
.chapters-section { margin-top: 1rem; }
.section-title { display: flex; align-items: center; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 0.8rem; margin-bottom: 1.5rem; }
.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; }
.chapters-section {
margin-top: 1rem;
}
.section-title {
display: flex;
align-items: center;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding-bottom: 0.8rem;
margin-bottom: 1.5rem;
}
.section-title h2 {
font-size: 1.5rem;
margin: 0;
border-left: 4px solid var(--color-primary);
padding-left: 1rem;
}
.chapters-table-wrapper {
background: var(--color-bg-elevated); border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.05); overflow: hidden;
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px solid rgba(255, 255, 255, 0.05);
overflow: hidden;
}
.chapters-table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.chapters-table { width: 100%; border-collapse: collapse; text-align: left; }
.chapters-table th {
padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03);
color: var(--color-text-secondary); font-weight: 600; font-size: 0.85rem;
text-transform: uppercase; letter-spacing: 0.5px;
padding: 0.8rem 1.2rem;
background: rgba(255, 255, 255, 0.03);
color: var(--color-text-secondary);
font-weight: 600;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.chapters-table td {
padding: 1rem 1.2rem; border-bottom: 1px solid rgba(255,255,255,0.05);
color: var(--color-text-primary); font-size: 0.95rem;
padding: 1rem 1.2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
color: var(--color-text-primary);
font-size: 0.95rem;
}
.chapters-table tr:last-child td {
border-bottom: none;
}
.chapters-table tr:hover {
background: var(--color-bg-elevated-hover);
}
.chapters-table tr:last-child td { border-bottom: none; }
.chapters-table tr:hover { background: var(--color-bg-elevated-hover); }
.filter-select {
appearance: none;
-webkit-appearance: none;
background-color: var(--color-bg-elevated);
color: var(--color-text-primary);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0.5rem 2rem 0.5rem 1rem;
border-radius: 99px;
font-size: 0.9rem;
@@ -159,36 +287,261 @@
}
.read-btn-small {
background: var(--color-primary); color: white; border: none;
padding: 0.4rem 0.9rem; border-radius: 6px; font-weight: 600; cursor: pointer;
font-size: 0.8rem; transition: 0.2s;
background: var(--color-primary);
color: white;
border: none;
padding: 0.4rem 0.9rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
font-size: 0.8rem;
transition: 0.2s;
}
.read-btn-small:hover {
background: #7c3aed;
}
.read-btn-small:hover { background: #7c3aed; }
.pagination-controls {
display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center;
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.5rem;
align-items: center;
}
.page-btn {
background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1);
color: white; padding: 0.5rem 1rem; border-radius: 8px; cursor: pointer; font-size: 0.9rem;
background: var(--color-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
}
.page-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.page-btn:hover:not(:disabled) {
border-color: var(--color-primary);
}
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); }
@keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1024px) {
.hero-wrapper { height: 40vh; }
.content-container { grid-template-columns: 1fr; margin-top: -80px; padding: 0 1.5rem 4rem 1.5rem; }
.poster-card { display: none; }
.hero-wrapper {
height: 40vh;
}
.content-container {
grid-template-columns: 1fr;
margin-top: -80px;
padding: 0 1.5rem 4rem 1.5rem;
}
.poster-card {
display: none;
}
.main-content { padding-top: 0; align-items: center; text-align: center; }
.book-title { font-size: 2.2rem; }
.meta-row { justify-content: center; }
.action-row { justify-content: center; width: 100%; }
.btn-primary, .btn-blur { flex: 1; justify-content: center; }
.main-content {
padding-top: 0;
align-items: center;
text-align: center;
}
.book-title {
font-size: 2.2rem;
}
.meta-row {
justify-content: center;
}
.action-row {
justify-content: center;
width: 100%;
}
.btn-primary,
.btn-blur {
flex: 1;
justify-content: center;
}
.sidebar { display: none; }
.chapters-table th:nth-child(3), .chapters-table td:nth-child(3) { display: none; }
.chapters-table th:nth-child(4), .chapters-table td:nth-child(4) { display: none; }
.sidebar {
display: none;
}
.chapters-table th:nth-child(3),
.chapters-table td:nth-child(3) {
display: none;
}
.chapters-table th:nth-child(4),
.chapters-table td:nth-child(4) {
display: none;
}
}
@media (max-width: 768px) {
.hero-wrapper {
height: 35vh;
}
.content-container {
display: flex;
flex-direction: column;
margin-top: -60px;
padding: 0 1rem 3rem 1rem;
gap: 1.5rem;
}
.sidebar {
display: flex !important;
position: static;
width: 100%;
align-items: center;
order: 1;
}
.poster-card {
display: block !important;
width: 160px;
margin: 0 auto;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.15);
}
.info-grid {
display: none;
}
.main-content {
order: 2;
padding-top: 0;
text-align: center;
align-items: center;
}
.book-title {
font-size: 2rem;
line-height: 1.2;
margin-bottom: 0.8rem;
}
.meta-row {
justify-content: center;
gap: 0.5rem;
}
.pill {
padding: 0.3rem 0.8rem;
font-size: 0.8rem;
}
.action-row {
flex-direction: column;
width: 100%;
gap: 0.8rem;
}
.btn-primary,
.btn-secondary,
.btn-blur {
width: 100%;
justify-content: center;
padding: 0.9rem;
}
.chapters-table-wrapper {
background: transparent;
border: none;
}
.chapters-table thead {
display: none;
}
.chapters-table tbody,
.chapters-table tr,
.chapters-table td {
display: block;
width: 100%;
}
.chapters-table tr {
background: var(--color-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 12px;
margin-bottom: 0.8rem;
padding: 1rem;
position: relative;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.chapters-table td {
padding: 0;
border: none;
text-align: left;
}
.chapters-table td:nth-child(1) {
font-size: 1rem;
font-weight: 700;
color: white;
}
.chapters-table td:nth-child(2) {
font-size: 0.8rem;
color: var(--color-text-secondary);
order: 3;
}
.chapters-table td:last-child {
margin-top: 0.5rem;
order: 4;
}
.chapters-table td:last-child,
.chapters-table td:nth-child(4) {
display: block !important;
width: 100%;
margin-top: 1rem;
padding-top: 0.75rem;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
.read-btn-small {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.8rem;
font-size: 0.95rem;
background: var(--color-primary);
border: none;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}
.chapters-table td:nth-child(3) {
display: block !important;
font-size: 0.8rem;
color: var(--color-text-secondary);
margin-bottom: 0.25rem;
}
.chapters-table td:nth-child(3)::before {
content: "Provider: ";
font-weight: 700;
color: #555;
}
.read-btn-small {
width: 100%;
padding: 0.7rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
}

90
docker/views/css/books/reader.css
View File

@@ -4,11 +4,15 @@
--bg-hover: #252530;
}
.hidden { display: none !important; }
.hidden {
display: none !important;
}
.top-bar {
position: fixed;
top: 0; left: 0; right: 0;
top: 0;
left: 0;
right: 0;
height: 64px;
background: rgba(10, 10, 15, 0.85);
backdrop-filter: blur(20px) saturate(180%);
@@ -107,7 +111,9 @@
height: auto;
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
transition: transform 0.2s ease, box-shadow 0.2s ease;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
cursor: pointer;
display: block;
}
@@ -160,7 +166,9 @@
box-shadow: var(--shadow-lg);
object-fit: contain;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
transition:
transform 0.2s ease,
box-shadow 0.2s ease;
}
.double-container img:hover {
@@ -174,7 +182,7 @@
padding: 3rem 2.5rem;
line-height: var(--ln-line-height, 1.8);
font-size: var(--ln-font-size, 18px);
font-family: var(--ln-font-family, 'Georgia', serif);
font-family: var(--ln-font-family, "Georgia", serif);
color: var(--ln-text-color, #e5e7eb);
text-align: var(--ln-text-align, left);
}
@@ -183,7 +191,9 @@
margin-bottom: 1.5em;
}
.ln-content h1, .ln-content h2, .ln-content h3 {
.ln-content h1,
.ln-content h2,
.ln-content h3 {
margin-top: 2em;
margin-bottom: 1em;
font-weight: 700;
@@ -297,7 +307,7 @@
.control label span {
color: var(--color-text-primary);
font-weight: 600;
font-family: 'JetBrains Mono', monospace;
font-family: "JetBrains Mono", monospace;
font-size: 0.8125rem;
}
@@ -338,7 +348,9 @@ input[type="range"]::-moz-range-thumb {
transition: all 0.2s;
}
select, input[type="color"], input[type="number"] {
select,
input[type="color"],
input[type="number"] {
width: 100%;
padding: 0.625rem 0.875rem;
border-radius: var(--radius-md);
@@ -350,11 +362,15 @@ select, input[type="color"], input[type="number"] {
border: 1px solid var(--border-subtle);
}
select:hover, input[type="color"]:hover, input[type="number"]:hover {
select:hover,
input[type="color"]:hover,
input[type="number"]:hover {
border-color: var(--color-primary);
}
select:focus, input[type="color"]:focus, input[type="number"]:focus {
select:focus,
input[type="color"]:focus,
input[type="number"]:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px var(--color-primary-glow);
@@ -454,7 +470,9 @@ input[type="color"] {
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.loading-container {
@@ -545,3 +563,53 @@ input[type="color"] {
margin: 0 auto;
display: block;
}
@media (max-width: 768px) {
#reader {
padding-left: 0 !important;
padding-right: 0 !important;
padding-top: 64px;
}
.manga-container {
width: 100% !important;
max-width: 100% !important;
gap: 0 !important;
}
.page-img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.page-img.longstrip-fit {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
.double-container {
flex-direction: column !important;
gap: 0 !important;
width: 100% !important;
}
.double-container img {
width: 100% !important;
max-width: 100% !important;
border-radius: 0 !important;
}
.fit-height,
.fit-screen {
width: 100% !important;
height: auto !important;
max-height: none !important;
max-width: 100% !important;
object-fit: contain !important;
}
}

123
docker/views/css/components/anilist-modal.css
View File

@@ -1,7 +1,7 @@
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.9);
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(10px);
z-index: 2000;
display: flex;
@@ -12,14 +12,14 @@
.modal-content {
background: var(--color-bg-amoled);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
max-width: 900px;
width: 95%;
padding: 0;
position: relative;
animation: modalSlideUp 0.3s ease;
box-shadow: 0 20px 50px rgba(0,0,0,0.8);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);
max-height: 90vh;
display: flex;
flex-direction: column;
@@ -40,8 +40,8 @@
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: white;
width: 36px;
height: 36px;
@@ -66,7 +66,7 @@
padding: 1.5rem 2rem 0.5rem;
margin-bottom: 0;
color: var(--color-text-primary);
border-bottom: 1px solid rgba(255,255,255,0.05);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.modal-body {
@@ -112,7 +112,7 @@
.form-input {
background: var(--color-bg-field);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
padding: 0.8rem 1rem;
border-radius: 8px;
@@ -154,7 +154,7 @@
.form-checkbox {
width: 18px;
height: 18px;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
background: var(--color-bg-base);
border-radius: 4px;
cursor: pointer;
@@ -171,7 +171,7 @@
}
.form-checkbox:checked::after {
content: '✓';
content: "✓";
position: absolute;
top: 50%;
left: 50%;
@@ -187,21 +187,25 @@
justify-content: flex-end;
flex-shrink: 0;
padding: 1rem 2rem;
border-top: 1px solid rgba(255,255,255,0.05);
border-top: 1px solid rgba(255, 255, 255, 0.05);
background: var(--color-bg-amoled);
position: sticky;
bottom: 0;
z-index: 10;
}
.btn-primary, .btn-secondary, .btn-danger {
.btn-primary,
.btn-secondary,
.btn-danger {
padding: 0.8rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.95rem;
border: none;
cursor: pointer;
transition: transform 0.2s, background 0.2s;
transition:
transform 0.2s,
background 0.2s;
flex: none;
}
@@ -215,13 +219,13 @@
}
.btn-secondary {
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
color: white;
border: 1px solid rgba(255,255,255,0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.btn-secondary:hover {
background: rgba(255,255,255,0.15);
background: rgba(255, 255, 255, 0.15);
}
.btn-danger {
@@ -243,26 +247,89 @@
opacity: 1;
}
@media (max-width: 900px) {
@media (max-width: 600px) {
.modal-content {
max-width: 95%;
width: 100%;
height: 100%;
max-height: 100vh;
border-radius: 0;
display: flex;
flex-direction: column;
}
.modal-title {
font-size: 1.4rem;
padding: 1rem;
padding-right: 3rem;
}
.modal-close {
top: 0.8rem;
right: 0.8rem;
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.08);
}
.modal-body {
padding: 0 1rem;
}
.modal-fields-grid {
grid-template-columns: repeat(2, 1fr);
display: flex;
flex-direction: column;
gap: 1.2rem;
padding: 1rem 0;
}
.form-group.notes-group {
grid-column: 1 / -1;
.form-group,
.form-group.notes-group,
.form-group.checkbox-group,
.form-group.full-width {
grid-column: auto;
width: 100%;
}
.form-group.checkbox-group {
grid-column: 1 / -1;
align-self: auto;
.date-group {
flex-direction: column;
gap: 1rem;
}
.notes-textarea {
min-height: 120px;
}
.modal-actions {
padding: 1rem 1.5rem;
flex-direction: column;
gap: 0.8rem;
padding: 1rem;
background: var(--color-bg-elevated);
}
.modal-title, .modal-body {
padding-left: 1.5rem;
padding-right: 1.5rem;
.btn-primary,
.btn-secondary,
.btn-danger {
width: 100%;
padding: 1rem;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-size: 1rem;
}
.btn-primary {
order: 1;
}
.btn-secondary {
order: 2;
}
.btn-danger {
order: 3;
margin-top: 0.5rem;
background: rgba(239, 68, 68, 0.2);
color: #f87171;
border: 1px solid rgba(239, 68, 68, 0.3);
}
}

104
docker/views/css/components/hero.css
View File

@@ -23,7 +23,12 @@
.hero-vignette {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 120%
),
linear-gradient(to top, var(--color-bg-base) 10%, transparent 60%);
z-index: 1;
}
@@ -106,8 +111,18 @@
.hero-overlay {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, transparent 0%, var(--color-bg-base) 120%),
linear-gradient(to top, var(--color-bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%);
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 120%
),
linear-gradient(
to top,
var(--color-bg-base) 10%,
rgba(9, 9, 11, 0.8) 25%,
transparent 60%
);
z-index: 1;
}
@@ -118,3 +133,86 @@
border-radius: 6px;
border: 1px solid rgba(34, 197, 94, 0.2);
}
@media (max-width: 768px) {
.hero-wrapper {
height: auto;
min-height: 85vh;
}
.hero-content {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 6rem 1.5rem 3rem 1.5rem;
gap: 2rem;
}
.hero-poster-card {
width: 150px;
height: 225px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
border: 2px solid rgba(255, 255, 255, 0.15);
margin-bottom: 0.5rem;
}
.hero-text {
width: 100%;
margin-bottom: 0;
}
.hero-title {
font-size: 2.2rem;
line-height: 1.1;
margin-bottom: 0.8rem;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.9);
}
.hero-meta {
justify-content: center;
flex-wrap: wrap;
gap: 0.8rem;
font-size: 0.9rem;
}
.hero-desc {
font-size: 1rem;
line-height: 1.5;
-webkit-line-clamp: 3;
max-width: 100%;
padding: 0 0.5rem;
}
.hero-buttons {
flex-direction: column;
width: 100%;
gap: 1rem;
}
.hero-buttons .btn-primary,
.hero-buttons .btn-blur {
width: 100%;
justify-content: center;
padding: 1rem;
}
.hero-overlay {
background:
radial-gradient(
circle at center,
transparent 0%,
var(--color-bg-base) 140%
),
linear-gradient(
to top,
var(--color-bg-base) 15%,
rgba(0, 0, 0, 0.8) 40%,
rgba(0, 0, 0, 0.6) 100%
);
}
}

112
docker/views/css/components/navbar.css
View File

@@ -8,7 +8,11 @@
align-items: center;
justify-content: space-between;
padding: 0 3rem;
background: linear-gradient(to bottom, rgba(9, 9, 11, 0.9) 0%, rgba(9, 9, 11, 0) 100%);
background: linear-gradient(
to bottom,
rgba(9, 9, 11, 0.9) 0%,
rgba(9, 9, 11, 0) 100%
);
transition: background 0.3s;
}
@@ -211,7 +215,9 @@
min-width: 260px;
display: none;
flex-direction: column;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.1);
box-shadow:
0 20px 40px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(139, 92, 246, 0.1);
z-index: 9999;
overflow: hidden;
animation: dropdownSlide 0.2s ease-out;
@@ -416,3 +422,105 @@
background: rgba(255, 255, 255, 0.2);
border-radius: 3px;
}
@media (max-width: 768px) {
.navbar {
padding: 0 1rem;
height: 60px;
gap: 0.5rem;
z-index: 1002;
background: rgba(9, 9, 11, 0.95);
}
.nav-brand {
min-width: auto;
font-size: 0;
}
.brand-icon {
width: 32px;
height: 32px;
}
.search-wrapper {
flex: 1;
width: auto;
}
.search-input {
padding: 0.5rem 1rem 0.5rem 2.2rem;
font-size: 0.9rem;
}
.search-icon {
left: 10px;
}
#nav-avatar {
width: 32px;
height: 32px;
}
.nav-center {
position: absolute;
top: 60px;
left: 0;
right: 0;
display: flex;
background: rgba(9, 9, 11, 0.98);
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding: 0.5rem 1rem;
overflow-x: auto;
white-space: nowrap;
justify-content: flex-start;
gap: 0.5rem;
-ms-overflow-style: none;
scrollbar-width: none;
z-index: 1001;
border-radius: 0;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-center::-webkit-scrollbar {
display: none;
}
.nav-button {
flex-shrink: 0;
padding: 0.4rem 1rem;
font-size: 0.85rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
}
.nav-button.active {
background: var(--color-primary);
border-color: var(--color-primary);
}
.search-results {
position: fixed;
top: 110px;
left: 0;
right: 0;
width: 100vw;
border-radius: 0;
max-height: calc(100vh - 120px);
}
.nav-dropdown {
position: fixed;
top: 70px;
right: 1rem;
left: 1rem;
width: auto;
min-width: auto;
z-index: 9999;
}
}

96
docker/views/css/globals.css
View File

@@ -57,7 +57,7 @@ body {
padding: 0;
background-color: var(--color-bg-base);
color: var(--color-text-primary);
font-family: 'Inter', system-ui, sans-serif;
font-family: "Inter", system-ui, sans-serif;
overflow-x: hidden;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
@@ -288,7 +288,7 @@ body {
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;
@@ -299,3 +299,95 @@ body {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.05);
}
Here is the CSS you need to add to the very bottom of your file.
I have targeted the specific classes you provided (.card, .section, .back-btn) to make them touch-friendly, and I added a specific section to fix the "Who's exploring?" screen from your screenshot.
1. First: The HTML Tag (Crucial)
Ensure this is in your HTML <head> or the CSS below will not work:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2. The CSS Update
Copy and paste this entire block to the bottom of your CSS file:
CSS
@media (max-width: 768px) {
:root {
--nav-height: 60px;
--spacing-2xl: 1.5rem;
}
.section {
padding: 1.25rem 1rem;
}
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.section-title {
font-size: 1.5rem;
}
.back-btn {
top: 1rem;
left: 1rem;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
position: absolute;
}
.scroll-btn {
display: none !important;
}
.carousel {
padding: 0.5rem 0;
padding-right: 1.5rem;
}
.card {
min-width: 160px;
width: 160px;
flex: 0 0 160px;
}
.card-content h3 {
font-size: 0.9rem;
}
.profile-selection-container,
main {
width: 90% !important;
margin: 0 auto;
padding-top: 20vh;
text-align: center;
}
h1 {
font-size: 2rem !important;
line-height: 1.2;
}
.profile-card img,
.user-avatar {
width: 140px !important;
height: 140px !important;
}
.btn-primary,
.btn-blur,
.add-user-btn {
width: 100%;
justify-content: center;
padding: 1rem;
}
}

184
docker/views/css/list.css
View File

@@ -27,14 +27,16 @@
.stat-card {
background: var(--color-bg-elevated);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
transition: transform 0.3s, box-shadow 0.3s;
box-shadow: 0 5px 20px rgba(0,0,0,0.2);
transition:
transform 0.3s,
box-shadow 0.3s;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
.stat-card:hover {
@@ -54,7 +56,6 @@
font-weight: 600;
}
/* --- Filtros mejorados --- */
.filters-section {
display: flex;
gap: 1.5rem;
@@ -62,9 +63,9 @@
padding: 1.5rem;
background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
flex-wrap: wrap;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.filter-group {
@@ -85,7 +86,7 @@
.filter-select {
background: var(--color-bg-base);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-primary);
padding: 0.7rem 1rem;
border-radius: 8px;
@@ -118,7 +119,7 @@
.view-btn {
background: var(--color-bg-base);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
color: var(--color-text-secondary);
padding: 0.7rem;
border-radius: 8px;
@@ -159,7 +160,9 @@
}
@keyframes spin {
to { transform: rotate(360deg); }
to {
transform: rotate(360deg);
}
}
.empty-state {
@@ -194,14 +197,14 @@
.list-item {
background: var(--color-bg-elevated-hover);
border: 1px solid rgba(255,255,255,0.08);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: var(--radius-md);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
display: flex;
flex-direction: column;
position: relative;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.list-item:hover {
@@ -236,16 +239,15 @@
}
.list-grid.list-view .item-poster {
/* Cambiar el ancho y alto */
width: 120px; /* Antes: 100px */
height: 180px; /* Antes: 150px */
width: 120px;
height: 180px;
aspect-ratio: auto;
border-radius: 8px;
margin: 1rem;
}
.item-content {
padding: 1rem; /* Antes: 1.2rem */
padding: 1rem;
display: flex;
flex-direction: column;
flex-grow: 1;
@@ -262,7 +264,7 @@
}
.item-title {
font-size: 1rem; /* Antes: 1.1rem */
font-size: 1rem;
font-weight: 800;
margin-bottom: 0.5rem;
white-space: nowrap;
@@ -281,16 +283,16 @@
.item-meta {
display: flex;
gap: 0.3rem; /* Antes: 0.75rem. Espacio entre los pills */
margin-bottom: 0.5rem; /* Antes: 0.8rem */
gap: 0.3rem;
margin-bottom: 0.5rem;
flex-wrap: wrap;
/* Añadir: Asegura que si se envuelven, lo hagan con poco margen vertical */
line-height: 1.4;
}
.meta-pill {
font-size: 0.65rem; /* Antes: 0.7rem */
padding: 0.15rem 0.4rem; /* Antes: 0.25rem 0.6rem. Reduce el padding interno */
font-size: 0.65rem;
padding: 0.15rem 0.4rem;
border-radius: 999px;
font-weight: 700;
white-space: nowrap;
@@ -329,12 +331,12 @@
}
.progress-bar-container {
background: rgba(255,255,255,0.08);
background: rgba(255, 255, 255, 0.08);
border-radius: 999px;
height: 10px;
overflow: hidden;
margin-bottom: 0.5rem;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
}
.progress-bar {
@@ -364,7 +366,6 @@
border-radius: 4px;
}
/* --- Botón de edición flotante --- */
.edit-icon-btn {
position: absolute;
top: 1rem;
@@ -382,7 +383,10 @@
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s, transform 0.2s, background 0.2s;
transition:
opacity 0.3s,
transform 0.2s,
background 0.2s;
}
.list-item:hover .edit-icon-btn {
@@ -412,74 +416,92 @@
transform: none;
}
/* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */
@media (max-width: 550px) {
/* Layout de lista (card view) */
.list-grid {
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.list-grid.list-view .list-item {
flex-direction: column;
align-items: flex-start;
padding-right: 0;
}
.list-grid.list-view .item-poster {
width: 100%;
height: auto;
margin: 0;
border-radius: 0;
aspect-ratio: 16/9;
}
.list-grid.list-view .item-content {
flex-direction: column;
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.list-grid.list-view .item-content > div:first-child {
flex-basis: auto;
}
.list-grid.list-view .edit-icon-btn {
position: absolute;
top: 1rem;
right: 1rem;
opacity: 1;
background: rgba(18, 18, 21, 0.8);
width: 100%;
}
/* Modal en móvil */
.modal-content {
margin: 0.5rem;
width: auto;
.header-section {
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.modal-fields-grid {
.page-title {
font-size: 2rem;
text-align: center;
margin-bottom: 1.5rem;
}
.stats-row {
grid-template-columns: 1fr;
gap: 1rem;
padding-bottom: 0;
}
.form-group.notes-group,
.form-group.checkbox-group {
grid-column: auto;
.stat-card {
padding: 1rem;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.modal-actions {
flex-direction: column;
align-items: stretch;
}
.btn-danger {
margin-right: 0;
order: 3;
}
.btn-secondary {
.stat-value {
font-size: 1.8rem;
order: 2;
}
.btn-primary {
.stat-label {
font-size: 1rem;
order: 1;
}
}
.edit-btn-card {
display: none;
}
.filters-section {
flex-direction: column;
padding: 1rem;
gap: 1rem;
}
.item-poster-link {
z-index: 1;
.filter-group {
min-width: 100%;
}
.filter-select {
width: 100%;
padding: 0.8rem;
}
.view-toggle {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
}
.view-btn {
justify-content: center;
}
.list-grid {
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: 1rem;
}
.item-title {
font-size: 0.9rem;
}
.item-meta {
gap: 0.2rem;
}
.meta-pill {
font-size: 0.6rem;
padding: 0.1rem 0.3rem;
}
.edit-icon-btn {
opacity: 1;
background: rgba(0, 0, 0, 0.6);
width: 35px;
height: 35px;
}
}

132
docker/views/css/marketplace.css
View File

@@ -25,7 +25,7 @@
border-radius: 999px;
background: var(--color-bg-elevated-hover);
color: var(--color-text-primary);
border: 1px solid rgba(255,255,255,0.1);
border: 1px solid rgba(255, 255, 255, 0.1);
appearance: none;
font-weight: 600;
@@ -51,14 +51,14 @@
.extension-card {
background: var(--bg-surface);
border: 1px solid rgba(255,255,255,0.05);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: var(--radius-md);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: flex-start;
transition: all 0.2s;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
min-height: 140px;
position: relative;
overflow: hidden;
@@ -67,7 +67,7 @@
.extension-card:hover {
background: var(--color-bg-elevated-hover);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
}
.card-content-wrapper {
@@ -128,7 +128,10 @@
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
transition:
background 0.2s,
transform 0.2s,
box-shadow 0.2s;
margin-top: auto;
text-transform: uppercase;
letter-spacing: 0.5px;
@@ -176,7 +179,7 @@
border-radius: 8px;
margin-bottom: 0.75rem;
border: 2px solid rgba(255,255,255,0.05);
border: 2px solid rgba(255, 255, 255, 0.05);
}
.skeleton-text.title-skeleton {
height: 1.1em;
@@ -228,10 +231,14 @@
border-radius: var(--radius-lg);
width: 90%;
max-width: 450px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
border: 1px solid rgba(255,255,255,0.1);
box-shadow:
0 15px 50px rgba(0, 0, 0, 0.8),
0 0 20px var(--color-primary-glow);
border: 1px solid rgba(255, 255, 255, 0.1);
transform: translateY(-50px);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
transition:
transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1),
opacity 0.3s ease-in-out;
opacity: 0;
}
@@ -245,7 +252,7 @@
font-weight: 800;
margin-top: 0;
color: var(--color-primary);
border-bottom: 2px solid rgba(255,255,255,0.05);
border-bottom: 2px solid rgba(255, 255, 255, 0.05);
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
}
@@ -264,14 +271,15 @@
}
.modal-button {
padding: 0.6rem 1.5rem;
border-radius: 999px;
font-weight: 700;
font-size: 0.9rem;
border: none;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
transition:
background 0.2s,
transform 0.2s;
text-transform: uppercase;
letter-spacing: 0.5px;
}
@@ -293,3 +301,103 @@
background: #ef4444;
transform: scale(1.02);
}
@media (max-width: 768px) {
.section-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.filter-controls {
width: 100%;
overflow-x: auto;
white-space: nowrap;
padding-bottom: 0.5rem;
-ms-overflow-style: none;
scrollbar-width: none;
}
.filter-controls::-webkit-scrollbar {
display: none;
}
.filter-select {
flex-shrink: 0;
padding: 0.6rem 2.2rem 0.6rem 1rem;
font-size: 0.9rem;
}
.marketplace-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 0.75rem;
}
.extension-card {
padding: 0.75rem;
min-height: auto;
}
.extension-icon {
width: 40px;
height: 40px;
}
.extension-name {
font-size: 1rem;
}
.extension-status-badge {
font-size: 0.65rem;
}
.extension-card:hover {
transform: none;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}
.extension-action-button {
padding: 0.5rem;
font-size: 0.8rem;
}
.modal-content {
width: 95%;
max-width: none;
padding: 1.5rem;
position: absolute;
bottom: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
transform: translateY(100%);
margin-bottom: 0;
}
.modal-overlay:not(.hidden) .modal-content {
transform: translateY(0);
}
#modalTitle {
font-size: 1.3rem;
margin-bottom: 1rem;
}
#modalMessage {
font-size: 0.95rem;
margin-bottom: 1.5rem;
}
.modal-actions {
flex-direction: column;
gap: 0.75rem;
}
.modal-button {
width: 100%;
padding: 0.8rem;
justify-content: center;
display: flex;
}
}

94
docker/views/css/schedule/schedule.css
View File

@@ -361,3 +361,97 @@ html.electron body {
transform: rotate(360deg);
}
}
@media (max-width: 768px) {
body {
height: auto;
overflow-y: auto;
overflow-x: hidden;
}
.calendar-wrapper {
padding: 1rem;
height: auto;
overflow: visible;
display: block;
}
.calendar-controls {
flex-direction: column;
gap: 1rem;
padding-bottom: 1rem;
}
.month-selector {
width: 100%;
justify-content: space-between;
gap: 0.5rem;
}
.month-title {
font-size: 1.5rem;
min-width: auto;
text-align: center;
flex: 1;
}
.controls-right {
width: 100%;
justify-content: center;
}
.calendar-board {
border: none;
background: transparent;
box-shadow: none;
overflow: visible;
}
.weekdays-grid {
display: none;
}
.days-grid {
display: flex;
flex-direction: column;
gap: 1rem;
background: transparent;
height: auto;
overflow: visible;
}
.day-cell.empty {
display: none;
}
.day-cell {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--color-bg-elevated);
min-height: auto;
padding: 1rem;
}
.day-cell:nth-child(7n) {
border-right: 1px solid var(--border-subtle);
}
.day-header {
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
padding-bottom: 0.5rem;
margin-bottom: 0.8rem;
}
.day-number {
background: rgba(255, 255, 255, 0.05);
}
.anime-chip {
padding: 12px;
font-size: 0.95rem;
}
.cell-backdrop {
display: none;
}
}

165
docker/views/css/users.css
View File

@@ -10,15 +10,29 @@
.background-gradient {
position: fixed;
inset: 0;
background: radial-gradient(ellipse at top, rgba(139, 92, 246, 0.15) 0%, transparent 60%),
radial-gradient(ellipse at bottom right, rgba(59, 130, 246, 0.1) 0%, transparent 50%);
background:
radial-gradient(
ellipse at top,
rgba(139, 92, 246, 0.15) 0%,
transparent 60%
),
radial-gradient(
ellipse at bottom right,
rgba(59, 130, 246, 0.1) 0%,
transparent 50%
);
z-index: 0;
animation: gradientShift 10s ease infinite;
}
@keyframes gradientShift {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
0%,
100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
}
.content-container {
@@ -80,9 +94,8 @@
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}
/* Badge de contraseña protegida */
.user-card.has-password::after {
content: '🔒';
content: "🔒";
position: absolute;
top: 10px;
left: 10px;
@@ -116,7 +129,11 @@
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(59, 130, 246, 0.05) 100%);
background: linear-gradient(
135deg,
rgba(139, 92, 246, 0.1) 0%,
rgba(59, 130, 246, 0.05) 100%
);
}
.user-avatar-placeholder svg {
@@ -131,7 +148,12 @@
left: 0;
right: 0;
padding: 1rem 1.5rem;
background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.7) 50%, transparent 100%);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.7) 50%,
transparent 100%
);
transform: translateY(100%);
transition: transform 0.3s ease;
}
@@ -168,7 +190,9 @@
justify-content: center;
cursor: pointer;
opacity: 0;
transition: opacity 0.3s, background 0.2s;
transition:
opacity 0.3s,
background 0.2s;
z-index: 20;
}
@@ -205,7 +229,6 @@
box-shadow: 0 10px 30px var(--color-primary-glow);
}
/* Modal Styles */
.modal {
display: none;
position: fixed;
@@ -438,7 +461,6 @@ input[type="file"] {
color: white;
}
/* Estilos para modal de password */
.password-modal-content {
padding: 1.5rem;
}
@@ -461,7 +483,6 @@ input[type="file"] {
margin-top: 0.1rem;
}
/* ESTILOS PARA MODAL DE ACCIONES INDIVIDUALES */
.manage-actions-modal {
display: flex;
flex-direction: column;
@@ -673,10 +694,13 @@ input[type="file"] {
border: 1px solid rgba(59, 130, 246, 0.4);
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeInDown {
@@ -720,22 +744,121 @@ input[type="file"] {
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* Responsive */
@media (max-width: 768px) {
.page-wrapper {
padding: 1rem;
align-items: flex-start;
padding-top: 2rem;
}
.header-section {
margin-bottom: 2rem;
}
.page-title {
font-size: 2.5rem;
font-size: 2.2rem;
line-height: 1.1;
}
.users-grid {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
max-width: 100%;
}
.user-name {
font-size: 1.1rem;
font-weight: 800;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}
.user-config-btn {
width: 44px;
height: 44px;
top: 5px;
right: 5px;
background: rgba(0, 0, 0, 0.6);
opacity: 1 !important;
}
.user-config-btn svg {
width: 20px;
height: 20px;
}
.btn-add-user {
width: 100%;
padding: 1.25rem;
font-size: 1.1rem;
margin-bottom: 3rem;
}
}
@media (max-width: 380px) {
.users-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.user-card {
aspect-ratio: 16/9;
}
}
@media (hover: none) {
.user-info {
transform: translateY(0);
background: linear-gradient(
to top,
rgba(0, 0, 0, 0.95) 0%,
rgba(0, 0, 0, 0.6) 50%,
transparent 100%
);
padding: 1rem;
}
.user-card:hover {
transform: none;
border-color: rgba(255, 255, 255, 0.1);
}
.user-card:active {
transform: scale(0.97);
border-color: var(--color-primary);
}
}
@media (max-width: 768px) {
.modal {
align-items: flex-end;
}
.modal-content {
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
max-height: 85vh;
padding: 1.5rem;
overflow-y: auto;
}
.form-group input[type="text"],
.form-group input[type="password"] {
padding: 1.2rem;
font-size: 16px;
}
.btn-primary,
.btn-secondary {
padding: 1.2rem;
}
}

220
docker/views/users.html
View File

@@ -1,28 +1,41 @@
<!DOCTYPE html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<head>
<meta charset="UTF-8" />
<title>WaifuBoard - Users</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="stylesheet" href="/views/css/users.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/globals.css" />
<link
rel="stylesheet"
href="/views/css/components/updateNotifier.css"
/>
<link rel="stylesheet" href="/views/css/components/titlebar.css" />
<link rel="stylesheet" href="/views/css/users.css" />
<link
rel="icon"
href="/public/assets/waifuboards.ico"
type="image/x-icon"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
</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>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
</div>
<div class="page-wrapper">
<div class="page-wrapper">
<div class="background-gradient"></div>
<div class="content-container">
@@ -31,26 +44,39 @@
<p class="page-subtitle">Select your profile to continue</p>
</div>
<div class="users-grid" id="usersGrid">
</div>
<div class="users-grid" id="usersGrid"></div>
<button class="btn-add-user" id="btnAddUser">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="12" y1="5" x2="12" y2="19"></line>
<line x1="5" y1="12" x2="19" y2="12"></line>
</svg>
Add User
</button>
</div>
</div>
</div>
<div class="modal" id="modalCreateUser">
<div class="modal" id="modalCreateUser">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>Create New User</h2>
<button class="modal-close" id="closeCreateModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
@@ -59,54 +85,94 @@
<form id="createUserForm">
<div class="form-group">
<label for="username">Username</label>
<input type="text" id="username" name="username" required maxlength="20" placeholder="Enter your name">
<input
type="text"
id="username"
name="username"
required
maxlength="20"
placeholder="Enter your name"
/>
</div>
<div class="form-group">
<label>Profile Picture</label>
<div class="avatar-upload-area" id="avatarUploadArea">
<div class="avatar-preview" id="avatarPreview">
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<svg
class="avatar-preview-placeholder"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<p class="avatar-upload-text">Click to upload or drag and drop</p>
<p class="avatar-upload-hint">PNG, JPG, GIF... up to 50 MB</p>
<p class="avatar-upload-text">
Click to upload or drag and drop
</p>
<p class="avatar-upload-hint">
PNG, JPG, GIF... up to 50 MB
</p>
</div>
<input type="file" id="avatarInput" accept="image/*">
<input type="file" id="avatarInput" accept="image/*" />
</div>
<div class="modal-actions">
<button type="button" class="btn-secondary" id="cancelCreate">Cancel</button>
<button type="submit" class="btn-primary">Create User</button>
<button
type="button"
class="btn-secondary"
id="cancelCreate"
>
Cancel
</button>
<button type="submit" class="btn-primary">
Create User
</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="modalUserActions">
<div class="modal" id="modalUserActions">
<div class="modal-overlay"></div>
<div class="modal-content" style="max-width: 400px;">
<div class="modal-content" style="max-width: 400px">
<div class="modal-header">
<h2 id="actionsModalTitle">Manage Profile</h2>
<button class="modal-close" id="closeActionsModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div id="actionsModalContent">
<div id="actionsModalContent"></div>
</div>
</div>
</div>
<div class="modal" id="modalEditUser">
<div class="modal" id="modalEditUser">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>Edit Profile</h2>
<button class="modal-close" id="closeEditModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
@@ -115,49 +181,87 @@
<form id="editUserForm">
<div class="form-group">
<label for="editUsername">Username</label>
<input type="text" id="editUsername" name="username" required maxlength="20" placeholder="Enter your new name">
<input
type="text"
id="editUsername"
name="username"
required
maxlength="20"
placeholder="Enter your new name"
/>
</div>
<div class="form-group">
<label>Profile Picture</label>
<div class="avatar-upload-area" id="editAvatarUploadArea">
<div
class="avatar-upload-area"
id="editAvatarUploadArea"
>
<div class="avatar-preview" id="editAvatarPreview">
<svg class="avatar-preview-placeholder" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<svg
class="avatar-preview-placeholder"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<path
d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"
></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
</div>
<p class="avatar-upload-text">Click to upload or drag and drop</p>
<p class="avatar-upload-text">
Click to upload or drag and drop
</p>
<p class="avatar-upload-hint">PNG, JPG up to 5MB</p>
</div>
<input type="file" id="editAvatarInput" accept="image/*">
<input
type="file"
id="editAvatarInput"
accept="image/*"
/>
</div>
<div class="modal-actions">
<button type="button" class="btn-secondary" id="cancelEdit">Cancel</button>
<button type="submit" class="btn-primary">Save Changes</button>
<button
type="button"
class="btn-secondary"
id="cancelEdit"
>
Cancel
</button>
<button type="submit" class="btn-primary">
Save Changes
</button>
</div>
</form>
</div>
</div>
</div>
<div class="modal" id="modalAniList">
<div class="modal" id="modalAniList">
<div class="modal-overlay"></div>
<div class="modal-content">
<div class="modal-header">
<h2>AniList Integration</h2>
<button class="modal-close" id="closeAniListModal">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
>
<line x1="18" y1="6" x2="6" y2="18"></line>
<line x1="6" y1="6" x2="18" y2="18"></line>
</svg>
</button>
</div>
<div id="aniListContent">
<div id="aniListContent"></div>
</div>
</div>
</div>
<div id="userToastContainer"></div>
<div id="updateToast" class="hidden">
<div id="userToastContainer"></div>
<div id="updateToast" class="hidden">
<p>Update available: <span id="latestVersionDisplay">v1.x</span></p>
<a
id="downloadButton"
@@ -166,9 +270,11 @@
>
Click To Download
</a>
</div>
<script>localStorage.removeItem("token")</script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/users.js"></script>
</body>
</div>
<script>
localStorage.removeItem("token");
</script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/users.js"></script>
</body>
</html>