From 4d3e258b06c682ab6c72acd33ea7796ae94c7d37 Mon Sep 17 00:00:00 2001 From: lenafx Date: Mon, 8 Dec 2025 14:08:53 +0100 Subject: [PATCH] optimize css --- README.md | 8 +- views/anime/anime.html | 9 +- views/anime/animes.html | 4 +- views/anime/watch.html | 1 + views/books/book.html | 3 +- views/books/books.html | 7 +- views/books/read.html | 1 + views/css/anime/anime.css | 352 +----------- views/css/anime/watch.css | 51 -- views/css/books/book.css | 393 +------------ views/css/books/books.css | 339 ------------ views/css/books/reader.css | 103 ++-- views/css/components/anilist-modal.css | 273 +++++++++ views/css/components/hero.css | 112 ++++ .../{anime/home.css => components/navbar.css} | 523 +++--------------- views/css/gallery/gallery.css | 23 +- views/css/gallery/image.css | 23 +- views/css/globals.css | 299 ++++++++++ views/css/list.css | 273 --------- views/css/marketplace.css | 13 - views/css/schedule/schedule.css | 430 +------------- views/gallery/gallery.html | 5 +- views/gallery/image.html | 3 +- views/list.html | 4 +- views/marketplace.html | 3 +- views/schedule.html | 5 +- views/users.html | 3 +- 27 files changed, 917 insertions(+), 2346 deletions(-) delete mode 100644 views/css/books/books.css create mode 100644 views/css/components/anilist-modal.css create mode 100644 views/css/components/hero.css rename views/css/{anime/home.css => components/navbar.css} (51%) create mode 100644 views/css/globals.css diff --git a/README.md b/README.md index 1257596..1aef6ed 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,13 @@ The official recode repo, its private no one should know about this or have the | Mobile View | Not Done | N/A | | Gallery | ✅ | N/A | | Anime Schedule (Release Calendar for the week/month) | ✅ | N/A | -| My List (Tracking) | Not Done | Persistent data would be in a data.db file in waifuboard directory | -| Marketplace | Not Done | Uses the gitea repo | -| Add to list / library | Not Done | Persistent data would be in data.db file in waifuboard directory| +| My List (Tracking) | ✅ | Persistent data would be in a data.db file in waifuboard directory | +| Marketplace | ✅ | Uses the gitea repo | +| Add to list / library | ✅ | Persistent data would be in data.db file in waifuboard directory| | Gallery favorites | ✅ | Persistent in data.db like how it was previously | | Change "StreamFlow" to "WaifuBoard" | ✅ | N/A | | Change the cube icon next to "StreamFlow" to the current ico file | ✅ | Use the ico file from the current waifuboard ver | | Favicon | ✅ | Use the ico file from the current waifuboard ver | -| Make video player more professional looking | Not Done | N/A | +| Make video player more professional looking | ✅ | N/A | ***This stuff will get updated as time goes on, please check things off with a green checkmark as you complete them.*** \ No newline at end of file diff --git a/views/anime/anime.html b/views/anime/anime.html index afbdf8c..be8ed38 100644 --- a/views/anime/anime.html +++ b/views/anime/anime.html @@ -5,6 +5,9 @@ WaifuBoard + + + @@ -92,9 +95,9 @@
- - - + + +
diff --git a/views/anime/animes.html b/views/anime/animes.html index a2dcbf9..91b8218 100644 --- a/views/anime/animes.html +++ b/views/anime/animes.html @@ -4,7 +4,9 @@ WaifuBoard - + + + diff --git a/views/anime/watch.html b/views/anime/watch.html index 3fa6809..8518238 100644 --- a/views/anime/watch.html +++ b/views/anime/watch.html @@ -4,6 +4,7 @@ WaifuBoard Watch + diff --git a/views/books/book.html b/views/books/book.html index 12c7c27..7091506 100644 --- a/views/books/book.html +++ b/views/books/book.html @@ -6,7 +6,8 @@ WaifuBoard Book - + + diff --git a/views/books/books.html b/views/books/books.html index 4d4f237..0ebf138 100644 --- a/views/books/books.html +++ b/views/books/books.html @@ -4,13 +4,14 @@ WaifuBoard Books - + + + - - +
diff --git a/views/books/read.html b/views/books/read.html index 189ee4f..cdf5bdf 100644 --- a/views/books/read.html +++ b/views/books/read.html @@ -4,6 +4,7 @@ Reader + diff --git a/views/css/anime/anime.css b/views/css/anime/anime.css index a491d60..8fa4f50 100644 --- a/views/css/anime/anime.css +++ b/views/css/anime/anime.css @@ -1,60 +1,3 @@ -:root { - --bg-base: #09090b; - --bg-surface: #121215; - --bg-surface-hover: #1e1e22; - --accent: #8b5cf6; - --accent-glow: rgba(139, 92, 246, 0.4); - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --radius-md: 12px; - --radius-lg: 24px; - --radius-full: 9999px; - --danger: #ef4444; - --success: #22c55e; - --bg-amoled: #0a0a0a; /* Añadido de list.css */ - --bg-field: #0e0e0f; /* Añadido de list.css */ -} - -body { - margin: 0; - background-color: var(--bg-base); - color: var(--text-primary); - font-family: 'Inter', system-ui, sans-serif; - overflow-x: hidden; -} - -.back-btn { - position: fixed; - top: 2rem; - left: 2rem; - z-index: 100; - display: flex; - align-items: center; - gap: 0.5rem; - padding: 0.8rem 1.5rem; - background: rgba(0, 0, 0, 0.6); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius-full); - color: white; - text-decoration: none; - font-weight: 600; - transition: all 0.2s ease; - cursor: pointer; -} - -.back-btn:hover { - background: rgba(255, 255, 255, 0.1); - transform: translateX(-5px); -} - -.hero-wrapper { - position: relative; - width: 100%; - height: 85vh; - overflow: hidden; -} - .video-background { position: absolute; top: 50%; @@ -67,14 +10,6 @@ body { opacity: 0.6; } -.hero-overlay { - position: absolute; - inset: 0; - background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%), - linear-gradient(to top, var(--bg-base) 10%, rgba(9,9,11,0.8) 25%, transparent 60%); - z-index: 1; -} - .content-container { position: relative; z-index: 10; @@ -109,7 +44,7 @@ body { } .info-grid { - background: var(--bg-surface); + background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.05); border-radius: var(--radius-md); padding: 1.5rem; @@ -127,7 +62,7 @@ body { 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(--accent); border-radius: 50%; } +.char-dot { width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } .main-content { display: flex; @@ -174,8 +109,8 @@ body { .btn-watch { padding: 1rem 3rem; - background: var(--text-primary); - color: var(--bg-base); + background: var(--color-text-primary); + color: var(--color-bg-base); border-radius: var(--radius-full); font-weight: 800; font-size: 1.1rem; @@ -228,7 +163,7 @@ body { 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(--accent); border-radius: 2px; } +.section-title::before { content: ''; width: 4px; height: 28px; background: var(--color-primary); border-radius: 2px; } .episodes-grid { display: grid; @@ -237,7 +172,7 @@ body { } .episode-btn { - background: var(--bg-surface); + background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.1); padding: 1.25rem 1rem; border-radius: var(--radius-md); @@ -249,10 +184,10 @@ body { } .episode-btn:hover { - background: var(--bg-surface-hover); + background: var(--color-bg-elevated-hover); color: white; transform: translateY(-3px); - border-color: var(--accent); + border-color: var(--color-primary); } @keyframes slideUp { @@ -273,266 +208,6 @@ body { .sidebar { display: none; } } -/* --- ESTILOS DE MODAL (INCLUIDOS DE LIST.CSS) --- */ -.modal-overlay { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.9); /* Más oscuro */ - backdrop-filter: blur(10px); - z-index: 2000; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s; - padding: 1rem; -} -.modal-overlay.active { - display: flex; - opacity: 1; -} - -@keyframes modalSlideUp { - from { opacity: 0; transform: translateY(20px); } - to { opacity: 1; transform: translateY(0); } -} - -.modal-content { - background: var(--bg-amoled); /* AMOLED */ - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius-lg); - max-width: 900px; /* Ancho para el grid de 3 columnas */ - width: 95%; - padding: 0; /* padding se moverá al título y cuerpo */ - position: relative; - box-shadow: 0 20px 50px rgba(0,0,0,0.8); - max-height: 90vh; - display: flex; - flex-direction: column; - animation: modalSlideUp 0.3s ease; -} - -.modal-content.modal-list { /* Usamos esto para sobrescribir el ancho genérico del modal de descripción */ - max-width: 700px; -} - -.modal-close { - position: absolute; - top: 1rem; - right: 1rem; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - color: white; - width: 36px; - height: 36px; - border-radius: 8px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: 0.2s; - z-index: 2001; -} - -.modal-close:hover { - background: var(--danger); - border-color: var(--danger); -} - -.modal-title { - font-size: 1.8rem; - font-weight: 800; - padding: 1.5rem 2rem 0.5rem; - margin-top: 0; - margin-bottom: 0; - color: var(--text-primary); - border-bottom: 1px solid rgba(255,255,255,0.05); -} - -.modal-body { - display: flex; - flex-direction: column; - overflow-y: auto; - padding: 0 2rem; - flex-grow: 1; -} - -/* GRUPO PRINCIPAL DE CAMPOS (GRID) */ -.modal-fields-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem 2rem; - padding: 1.5rem 0; -} -.form-group { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -/* Grid layout overrides */ -.form-group.notes-group { - grid-column: 1 / span 2; -} -.form-group.checkbox-group { - grid-column: 3 / 4; - align-self: flex-end; - margin-bottom: 0.5rem; - flex-direction: row; - align-items: center; - justify-content: flex-end; - gap: 1rem; -} -.form-group.full-width { - grid-column: 1 / -1; -} - -/* Date Input Styling */ -.date-group { - display: flex; - gap: 1rem; -} -.date-input-pair { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.form-group label { - font-size: 0.8rem; /* Tamaño más pequeño */ - font-weight: 700; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.form-input { - background: var(--bg-field); /* Fondo específico para campos */ - border: 1px solid rgba(255,255,255,0.1); - color: var(--text-primary); - padding: 0.8rem 1rem; - border-radius: 8px; - font-family: inherit; - font-size: 1rem; - transition: 0.2s; -} - -.form-input:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 10px var(--accent-glow); -} - -.notes-textarea { - resize: vertical; - min-height: 100px; -} - -/* Checkbox Styling */ -.form-checkbox { - width: 18px; - height: 18px; - border: 1px solid rgba(255,255,255,0.2); - background: var(--bg-base); - border-radius: 4px; - cursor: pointer; - -webkit-appearance: none; - appearance: none; - position: relative; - transition: all 0.2s; - flex-shrink: 0; -} -.form-checkbox:checked { - background: var(--accent); - border-color: var(--accent); -} -.form-checkbox:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 14px; -} - -/* ACCIONES (Barra inferior pegajosa) */ -.modal-actions { - display: flex; - gap: 1rem; - margin-top: 0; - justify-content: flex-end; - flex-shrink: 0; - padding: 1rem 2rem; - border-top: 1px solid rgba(255,255,255,0.05); - background: var(--bg-amoled); /* Fondo para la barra sticky */ - position: sticky; - bottom: 0; - z-index: 10; -} - -.btn-modal-primary, .btn-modal-secondary, .btn-modal-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; - flex: none; /* Asegura que no se estiren */ -} - -.btn-modal-primary { - background: var(--accent); - color: white; -} -.btn-modal-primary:hover { - transform: scale(1.05); -} - -.btn-modal-secondary { - background: rgba(255,255,255,0.1); - color: white; - border: 1px solid rgba(255,255,255,0.2); -} -.btn-modal-secondary:hover { - background: rgba(255,255,255,0.15); -} - -.btn-modal-danger { - background: var(--danger); - color: white; - margin-right: auto; /* Para alinear a la izquierda */ -} -.btn-modal-danger:hover { - opacity: 0.9; -} - -/* Media Queries para el Modal */ -@media (max-width: 900px) { - .modal-content { max-width: 95%; } - .modal-fields-grid { grid-template-columns: repeat(2, 1fr); } - .form-group.notes-group { grid-column: 1 / -1; } - .form-group.checkbox-group { grid-column: 1 / -1; align-self: auto; justify-content: flex-start; } - .modal-actions { padding: 1rem 1.5rem; } - .modal-title, .modal-body { padding-left: 1.5rem; padding-right: 1.5rem; } -} - -@media (max-width: 550px) { - .modal-content { margin: 0.5rem; width: auto; } - .modal-fields-grid { grid-template-columns: 1fr; gap: 1rem; padding-bottom: 0; } - .date-group { flex-direction: column; gap: 1rem; } - .form-group.notes-group, .form-group.checkbox-group { grid-column: auto; } - .modal-actions { flex-direction: column; align-items: stretch; } - .btn-modal-danger { margin-right: 0; order: 3; } - .btn-modal-secondary { order: 2; } - .btn-modal-primary { order: 1; } -} - - .read-more-btn { background: none; border: none; @@ -619,15 +294,4 @@ body { color: #a1a1aa; font-size: 0.9rem; font-weight: 500; -} - -/* Asegura que por defecto esté oculto si quitaste el style en línea */ -#add-list-modal { - display: none; -} - -/* Define cómo se muestra al abrirlo */ -#add-list-modal.active { - display: flex; - opacity: 1; } \ No newline at end of file diff --git a/views/css/anime/watch.css b/views/css/anime/watch.css index 3b0141f..27bddfd 100644 --- a/views/css/anime/watch.css +++ b/views/css/anime/watch.css @@ -1,54 +1,3 @@ -:root { - --color-bg-base: #000000; - --color-bg-elevated: #0a0a0b; - --color-bg-card: #121214; - --color-primary: #8b5cf6; - --color-primary-hover: #7c3aed; - --color-primary-glow: rgba(139, 92, 246, 0.4); - --color-text-primary: #ffffff; - --color-text-secondary: #a1a1aa; - --color-text-muted: #71717a; - - --border-subtle: 1px solid rgba(255, 255, 255, 0.08); - --border-medium: 1px solid rgba(255, 255, 255, 0.12); - --glass-bg: rgba(18, 18, 20, 0.8); - --glass-border: rgba(255, 255, 255, 0.1); - - --spacing-xs: 0.5rem; - --spacing-sm: 0.75rem; - --spacing-md: 1rem; - --spacing-lg: 1.5rem; - --spacing-xl: 2rem; - --spacing-2xl: 3rem; - - --radius-sm: 0.5rem; - --radius-md: 1rem; - --radius-lg: 1.25rem; - --radius-xl: 1.5rem; - --radius-full: 9999px; - - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); - --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); - --shadow-glow: 0 8px 32px var(--color-primary-glow); - - --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); - --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); - --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1); - - --plyr-color-main: var(--color-primary); -} - -body { - margin: 0; - padding: 0; - background-color: var(--color-bg-base); - color: var(--color-text-primary); - font-family: 'Inter', system-ui, sans-serif; - overflow-x: hidden; - -webkit-font-smoothing: antialiased; -} - .top-bar { position: fixed; top: 0; diff --git a/views/css/books/book.css b/views/css/books/book.css index 8b27019..3e3c042 100644 --- a/views/css/books/book.css +++ b/views/css/books/book.css @@ -1,39 +1,10 @@ -:root { - --bg-base: #09090b; - --bg-surface: #121215; - --bg-surface-hover: #1e1e22; - --accent: #8b5cf6; - --accent-glow: rgba(139, 92, 246, 0.4); /* Añadido */ - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --radius-md: 12px; - --radius-lg: 24px; - --radius-full: 9999px; - --glass-border: 1px solid rgba(255, 255, 255, 0.1); - --glass-bg: rgba(20, 20, 23, 0.7); - --nav-height: 80px; - --danger: #ef4444; /* Añadido */ - --bg-amoled: #0a0a0a; /* Añadido */ - --bg-field: #0e0e0f; /* Añadido */ -} - -* { box-sizing: border-box; outline: none; } - -body { - margin: 0; - background-color: var(--bg-base); - color: var(--text-primary); - font-family: 'Inter', system-ui, sans-serif; - overflow-x: hidden; -} - .back-btn { position: fixed; top: 2rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; - background: var(--glass-bg); backdrop-filter: blur(12px); - border: var(--glass-border); border-radius: var(--radius-full); + 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; } @@ -46,7 +17,7 @@ body { .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(--bg-base) 100%); + background: linear-gradient(to bottom, transparent 0%, var(--color-bg-base) 100%); } .content-container { @@ -81,11 +52,11 @@ body { .poster-card img { width: 100%; height: 100%; object-fit: cover; } .info-grid { - background: var(--bg-surface); border: var(--glass-border); + 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(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; } +.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 { @@ -98,7 +69,7 @@ body { .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(--glass-border); backdrop-filter: blur(10px); } +.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; } @@ -141,30 +112,30 @@ body { .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(--accent); padding-left: 1rem; } +.section-title h2 { font-size: 1.5rem; margin: 0; border-left: 4px solid var(--color-primary); padding-left: 1rem; } .chapters-table-wrapper { - background: var(--bg-surface); border-radius: var(--radius-md); + 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 th { padding: 0.8rem 1.2rem; background: rgba(255,255,255,0.03); - color: var(--text-secondary); font-weight: 600; font-size: 0.85rem; + 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(--text-primary); font-size: 0.95rem; + color: var(--color-text-primary); font-size: 0.95rem; } .chapters-table tr:last-child td { border-bottom: none; } -.chapters-table tr:hover { background: var(--bg-surface-hover); } +.chapters-table tr:hover { background: var(--color-bg-elevated-hover); } .filter-select { appearance: none; -webkit-appearance: none; - background-color: var(--bg-surface); - color: var(--text-primary); + background-color: var(--color-bg-elevated); + color: var(--color-text-primary); border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 2rem 0.5rem 1rem; border-radius: 99px; @@ -178,17 +149,17 @@ body { } .filter-select:hover { - border-color: var(--accent); - background-color: var(--bg-surface-hover); + border-color: var(--color-primary); + background-color: var(--color-bg-elevated-hover); } .filter-select option { - background-color: var(--bg-surface); - color: var(--text-primary); + background-color: var(--color-bg-elevated); + color: var(--color-text-primary); } .read-btn-small { - background: var(--accent); color: white; border: none; + 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; } @@ -198,11 +169,11 @@ body { display: flex; justify-content: center; gap: 1rem; margin-top: 1.5rem; align-items: center; } .page-btn { - background: var(--bg-surface); border: 1px solid rgba(255,255,255,0.1); + 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(--accent); } +.page-btn:hover:not(:disabled) { border-color: var(--color-primary); } @keyframes slideUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @@ -220,328 +191,4 @@ body { .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; } -} - -/* ==================================== */ -/* MODAL STYLES (REEMPLAZO POR MODAL COMPLETO) */ -/* ==================================== */ -.modal-overlay { - display: none; - position: fixed; - inset: 0; - background: rgba(0, 0, 0, 0.9); - backdrop-filter: blur(10px); - z-index: 2000; - align-items: center; - justify-content: center; - opacity: 0; - transition: opacity 0.3s; - padding: 1rem; -} -.modal-overlay.active { - display: flex; - opacity: 1; -} -.modal-content { - background: var(--bg-amoled); /* Fondo AMOLED oscuro */ - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: var(--radius-lg); - max-width: 900px; /* Ancho para el grid de 3 columnas */ - width: 95%; - padding: 0; - position: relative; - box-shadow: 0 20px 50px rgba(0,0,0,0.8); - max-height: 90vh; - display: flex; - flex-direction: column; - animation: modalSlideUp 0.3s ease; -} - -@keyframes modalSlideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.modal-close { - position: absolute; - top: 1rem; - right: 1rem; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - color: white; - width: 36px; - height: 36px; - border-radius: 8px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: 0.2s; - z-index: 2001; -} - -.modal-close:hover { - background: var(--danger); - border-color: var(--danger); -} - -.modal-title { - font-size: 1.8rem; - font-weight: 800; - padding: 1.5rem 2rem 0.5rem; - margin-bottom: 0; - color: var(--text-primary); - border-bottom: 1px solid rgba(255,255,255,0.05); -} - -.modal-body { - display: flex; - flex-direction: column; - overflow-y: auto; - padding: 0 2rem; - flex-grow: 1; -} - -/* GRUPO PRINCIPAL DE CAMPOS (GRID) */ -.modal-fields-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem 2rem; - padding: 1.5rem 0; -} - -.form-group { /* Agregado para consistencia con list.css */ - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.form-group label { - font-size: 0.8rem; - font-weight: 700; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; -} - - -/* Ajustes de campos específicos */ -.form-group.notes-group { - grid-column: 1 / span 2; -} -.form-group.checkbox-group { - grid-column: 3 / 4; - align-self: flex-end; - margin-bottom: 0.5rem; - flex-direction: row; /* Necesario para la checkbox en línea */ - align-items: center; - justify-content: flex-end; - gap: 1rem; -} -.form-group.full-width { - grid-column: 1 / -1; -} - -/* Date Input Styling */ -.date-group { - display: flex; - gap: 1rem; -} - -.date-input-pair { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - - -/* Input Styling dentro del modal */ -.modal-content .form-input { - background: var(--bg-field); /* Fondo específico para campos */ - border: 1px solid rgba(255,255,255,0.1); - color: var(--text-primary); /* Asegura color del texto */ - padding: 0.8rem 1rem; - border-radius: 8px; - font-family: inherit; /* Asegura fuente consistente */ - font-size: 1rem; /* Asegura tamaño de fuente */ - transition: 0.2s; /* Asegura transiciones */ -} - -.modal-content .form-input:focus { - border-color: var(--accent); - box-shadow: 0 0 10px var(--accent-glow); - outline: none; /* Agregado */ -} - -.notes-textarea { - resize: vertical; - min-height: 100px; -} - -/* Select Styling */ -.modal-content select.form-input { - /* Reiniciar la apariencia por defecto para selects, si es necesario */ - -webkit-appearance: menulist; - appearance: menulist; -} - - -/* Checkbox Styling */ -.form-checkbox { - width: 18px; - height: 18px; - border: 1px solid rgba(255,255,255,0.2); - background: var(--bg-base); - border-radius: 4px; - cursor: pointer; - -webkit-appearance: none; - appearance: none; - position: relative; - transition: all 0.2s; - flex-shrink: 0; -} - -.form-checkbox:checked { - background: var(--accent); - border-color: var(--accent); -} - -.form-checkbox:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 14px; -} - -/* ACCIONES (Barra inferior pegajosa) */ -.modal-actions { - display: flex; - gap: 1rem; - margin-top: 0; - justify-content: flex-end; - flex-shrink: 0; - padding: 1rem 2rem; - border-top: 1px solid rgba(255,255,255,0.05); - background: var(--bg-amoled); /* Fondo para la barra sticky */ - position: sticky; - bottom: 0; - z-index: 10; -} - -/* Botones con nuevas clases para el modal */ -.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; - flex: none; -} - -/* Re-estilizar btn-primary/secondary para el contexto del modal, pero manteniendo la base existente */ -/* El .btn-primary global en book.css es blanco/negro, aquí es el color de acento/blanco para el modal */ - -.modal-actions .btn-primary { /* Asegura que el botón primario del modal use el color de acento */ - background: var(--accent); - color: white; -} - -.modal-actions .btn-primary:hover { - transform: scale(1.05); - /* No hace falta redefinir el hover */ -} - -.modal-actions .btn-secondary { /* Asegura que el botón secundario del modal use los estilos de blur */ - background: rgba(255,255,255,0.1); - color: white; - border: 1px solid rgba(255,255,255,0.2); -} - -.modal-actions .btn-secondary:hover { - background: rgba(255,255,255,0.15); /* Cambiado para ser coherente con list.css */ -} - -.btn-danger { - background: var(--danger); - color: white; - margin-right: auto; /* Para alinear a la izquierda */ -} - -.btn-danger:hover { - opacity: 0.9; -} - - -/* --- Media Queries (Ajuste del Modal) --- */ - -@media (max-width: 900px) { - .modal-content { - max-width: 95%; - } - .modal-fields-grid { - grid-template-columns: repeat(2, 1fr); - } - .form-group.notes-group { - grid-column: 1 / -1; - } - .form-group.checkbox-group { - grid-column: 1 / -1; - align-self: auto; - justify-content: flex-start; - } - .modal-actions { - padding: 1rem 1.5rem; - } - .modal-title, .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} - -@media (max-width: 550px) { - .modal-content { - margin: 0.5rem; - width: auto; - } - .modal-fields-grid { - grid-template-columns: 1fr; - gap: 1rem; - padding-bottom: 0; - } - .date-group { - flex-direction: column; - gap: 1rem; - } - .form-group.notes-group, - .form-group.checkbox-group { - grid-column: auto; - } - .modal-actions { - flex-direction: column; - align-items: stretch; - } - .btn-danger { - margin-right: 0; - order: 3; - } - .btn-secondary { - order: 2; - } - .btn-primary { - order: 1; - } } \ No newline at end of file diff --git a/views/css/books/books.css b/views/css/books/books.css deleted file mode 100644 index eaf45e8..0000000 --- a/views/css/books/books.css +++ /dev/null @@ -1,339 +0,0 @@ -:root { - --bg-base: #09090b; - --bg-surface: #121215; - --bg-surface-hover: #1e1e22; - --accent: #8b5cf6; - --accent-glow: rgba(139, 92, 246, 0.4); - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --radius-md: 12px; - --radius-lg: 24px; - --nav-height: 80px; -} - -* { box-sizing: border-box; outline: none; } - -body { - margin: 0; - background-color: var(--bg-base); - color: var(--text-primary); - font-family: 'Inter', system-ui, sans-serif; - overflow-x: hidden; -} - -.navbar { - width: 100%; - height: var(--nav-height); - position: fixed; - top: 0; - z-index: 1000; - display: flex; - 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%); - transition: background 0.3s; -} - -.navbar.scrolled { - background: rgba(9, 9, 11, 0.85); - backdrop-filter: blur(12px); - border-bottom: 1px solid rgba(255,255,255,0.05); -} - -.nav-brand { - font-weight: 900; - font-size: 1.5rem; - display: flex; - align-items: center; - gap: 0.8rem; - letter-spacing: -0.5px; - min-width: 200px; - color: white; - text-decoration: none; - cursor: pointer; -} - -.brand-icon { - width: 36px; - height: 36px; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; - overflow: hidden; -} - -.brand-icon img { - width: 70%; - height: 70%; - object-fit: contain; -} - -.nav-center { - display: flex; - gap: 0.5rem; - background: rgba(255,255,255,0.03); - padding: 0.4rem; - border-radius: 999px; - border: 1px solid rgba(255,255,255,0.05); -} - -.nav-button { - background: transparent; - border: none; - color: var(--text-secondary); - padding: 0.6rem 1.5rem; - border-radius: 999px; - cursor: pointer; - font-weight: 600; - transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); -} - -.nav-button:hover { color: white; } -.nav-button.active { - background: rgba(255, 255, 255, 0.1); - color: white; - box-shadow: 0 4px 15px rgba(0,0,0,0.2); - backdrop-filter: blur(8px); - border: 1px solid rgba(255,255,255,0.1); -} - -.search-wrapper { - position: relative; - width: 300px; - z-index: 2000; -} - -.search-input { - width: 100%; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - padding: 0.7rem 1rem 0.7rem 2.5rem; - border-radius: 99px; - color: white; - font-family: inherit; - transition: 0.2s; -} - -.search-input:focus { - background: rgba(0, 0, 0, 0.8); - border-color: var(--accent); - box-shadow: 0 0 15px var(--accent-glow); - border-radius: 12px 12px 0 0; -} - -.search-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - pointer-events: none; - color: var(--text-secondary); -} - -.search-results { - position: absolute; - top: 100%; - left: 0; - right: 0; - background: rgba(15, 15, 18, 0.95); - backdrop-filter: blur(12px); - border: 1px solid rgba(255,255,255,0.1); - border-top: none; - border-radius: 0 0 12px 12px; - padding: 0.5rem; - display: none; - flex-direction: column; - gap: 0.25rem; - box-shadow: 0 10px 30px rgba(0,0,0,0.5); - max-height: 400px; - overflow-y: auto; -} - -.search-results.active { display: flex; } - -.search-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 0.5rem; - border-radius: 8px; - cursor: pointer; - transition: background 0.2s; - text-decoration: none; - color: inherit; -} - -.search-item:hover { background: rgba(255,255,255,0.1); } - -.search-poster { - width: 40px; - height: 56px; - border-radius: 4px; - object-fit: cover; - background: #222; -} - -.search-info { flex: 1; overflow: hidden; } - -.search-title { - font-size: 0.9rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--text-primary); -} - -.search-meta { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - color: var(--text-secondary); - margin-top: 2px; -} - -.rating-pill { color: #4ade80; font-weight: 700; } - -.hero-wrapper { - position: relative; - height: 85vh; - width: 100%; - overflow: hidden; -} - -.hero-background { position: absolute; inset: 0; z-index: 0; } - -#hero-bg-media { - width: 100%; height: 100%; object-fit: cover; opacity: 0.6; - transform: scale(1.1); transition: opacity 1s ease; -} - -.hero-vignette { - position: absolute; inset: 0; - background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%), - linear-gradient(to top, var(--bg-base) 10%, transparent 60%); - z-index: 1; -} - -.hero-content { - position: relative; z-index: 10; height: 100%; - max-width: 1600px; margin: 0 auto; padding: 0 3rem; - display: flex; align-items: flex-end; padding-bottom: 6rem; gap: 3rem; -} - -.hero-poster-card { - width: 260px; height: 380px; border-radius: var(--radius-lg); - overflow: hidden; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); - border: 1px solid rgba(255,255,255,0.1); flex-shrink: 0; - background: #1a1a1a; -} -.hero-poster-card img { width: 100%; height: 100%; object-fit: cover; } - -.hero-text { flex: 1; max-width: 800px; margin-bottom: 1rem; animation: fadeInUp 0.8s ease; } - -.hero-title { - font-size: 4rem; font-weight: 900; line-height: 1.1; margin: 0 0 1rem 0; - text-shadow: 0 4px 20px rgba(0,0,0,0.8); - display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; -} - -.hero-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; font-size: 1.1rem; font-weight: 600; } -.score-badge { color: #22c55e; background: rgba(34, 197, 94, 0.1); padding: 0.2rem 0.8rem; border-radius: 6px; border: 1px solid rgba(34, 197, 94, 0.2); } - -.hero-desc { - font-size: 1.1rem; line-height: 1.6; color: #e4e4e7; margin-bottom: 2rem; - max-width: 650px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; - overflow: hidden; text-shadow: 0 2px 4px rgba(0,0,0,0.5); -} - -.hero-buttons { display: flex; gap: 1rem; } - -.btn-primary, .btn-blur { - padding: 1rem 2.5rem; border-radius: 999px; font-weight: 700; font-size: 1rem; - border: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; - transition: transform 0.2s; -} -.btn-primary { background: white; color: black; } -.btn-primary:hover { transform: scale(1.05); } -.btn-blur { background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); color: white; border: 1px solid rgba(255,255,255,0.2); } -.btn-blur:hover { background: rgba(255, 255, 255, 0.2); } - -.section { max-width: 1700px; margin: 0 auto; padding: 2rem 3rem; } -.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } -.section-title { font-size: 1.8rem; font-weight: 800; } - -.carousel-wrapper { position: relative; } -.carousel { display: flex; gap: 1.25rem; overflow-x: auto; padding: 1rem 0; scroll-behavior: smooth; scrollbar-width: none; } -.carousel::-webkit-scrollbar { display: none; } - -.scroll-btn { - position: absolute; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; - border-radius: 50%; background: rgba(20, 20, 23, 0.9); border: 1px solid rgba(255,255,255,0.1); - color: white; z-index: 20; cursor: pointer; display: flex; align-items: center; justify-content: center; - opacity: 0; transition: 0.3s; -} -.carousel-wrapper:hover .scroll-btn { opacity: 1; } -.scroll-btn:hover { background: var(--accent); } -.scroll-btn.left { left: -25px; } -.scroll-btn.right { right: -25px; } - -.card { min-width: 220px; cursor: pointer; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); } -.card:hover { transform: translateY(-8px); } -.card-img-wrap { width: 100%; aspect-ratio: 2/3; border-radius: var(--radius-md); overflow: hidden; position: relative; margin-bottom: 0.8rem; background: #222; } -.card-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; } -.card:hover .card-img-wrap img { transform: scale(1.05); } - -.card-content h3 { margin: 0; font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } -.card-content p { margin: 4px 0 0 0; font-size: 0.85rem; color: var(--text-secondary); } - -.skeleton { - background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; - border-radius: 6px; - display: inline-block; -} -.text-skeleton { height: 1em; width: 70%; margin-bottom: 0.5rem; } -.title-skeleton { height: 3em; width: 80%; margin-bottom: 1rem; } -.poster-skeleton { width: 100%; height: 100%; } - -@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } -@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } - -@media (max-width: 768px) { - :root { --nav-height: auto; } - .navbar { padding: 1rem; flex-wrap: wrap; gap: 1rem; background: rgba(9,9,11,0.98); position: fixed; } - .nav-brand { flex: 1; min-width: auto; font-size: 1.3rem; } - .search-wrapper { order: 2; width: auto; flex: 1; min-width: 140px; } - .search-input { width: 100%; padding-left: 2.2rem; font-size: 0.9rem; } - .nav-center { - order: 3; width: 100%; padding: 0.5rem 0; overflow-x: auto; - justify-content: flex-start; gap: 0.8rem; background: transparent; border: none; - border-radius: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; - } - .nav-center::-webkit-scrollbar { display: none; } - .nav-button { flex-shrink: 0; background: rgba(255,255,255,0.05); padding: 0.5rem 1rem; font-size: 0.85rem; border-radius: 99px; } - - .hero-wrapper { height: 75vh; } - .hero-content { flex-direction: column; justify-content: flex-end; padding: 0 1.5rem 6rem 1.5rem; gap: 1rem; } - .hero-poster-card { display: none; } - .hero-text { width: 100%; text-align: center; margin-bottom: 0; } - .hero-title { font-size: 2.5rem; line-height: 1.1; } - .hero-meta { justify-content: center; flex-wrap: wrap; gap: 0.8rem; } - .hero-buttons { justify-content: center; width: 100%; } - .btn-primary, .btn-blur { flex: 1; justify-content: center; } - .hero-desc { text-align: center; -webkit-line-clamp: 3; font-size: 0.95rem; } - - .section { padding: 1.5rem 1rem; } - .section-title { font-size: 1.4rem; } - .scroll-btn { display: none; } - .card { min-width: 140px; } - - .search-results { - position: fixed; top: 120px; left: 0; right: 0; - width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001; - } -} \ No newline at end of file diff --git a/views/css/books/reader.css b/views/css/books/reader.css index 6dd69f6..7590953 100644 --- a/views/css/books/reader.css +++ b/views/css/books/reader.css @@ -1,24 +1,7 @@ :root { - --bg-base: #0a0a0f; --bg-surface: #14141b; --bg-elevated: #1c1c26; --bg-hover: #252530; - --accent: #8b5cf6; - --accent-hover: #7c3aed; - --accent-light: rgba(139, 92, 246, 0.15); - --text-primary: #ffffff; - --text-secondary: #9ca3af; - --text-muted: #6b7280; - --border: rgba(255, 255, 255, 0.08); - --border-focus: rgba(139, 92, 246, 0.4); - --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); - --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); - --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.5); - --radius-sm: 8px; - --radius-md: 12px; - --radius-lg: 16px; - --radius-xl: 24px; - --radius-full: 9999px; } * { @@ -28,8 +11,8 @@ } body { - background: var(--bg-base); - color: var(--text-primary); + background: var(--color-bg-base); + color: var(--color-text-primary); font-family: 'Inter', system-ui, sans-serif; overflow-x: hidden; line-height: 1.6; @@ -43,7 +26,7 @@ body { height: 64px; background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(20px) saturate(180%); - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; @@ -54,8 +37,8 @@ body { .glass-btn { background: var(--bg-surface); - border: 1px solid var(--border); - color: var(--text-primary); + border: 1px solid var(--border-subtle); + color: var(--color-text-primary); padding: 0.625rem 1.25rem; border-radius: var(--radius-full); font-weight: 600; @@ -69,7 +52,7 @@ body { .glass-btn:hover { background: var(--bg-hover); - border-color: var(--accent); + border-color: var(--color-primary); transform: translateY(-1px); } @@ -83,27 +66,27 @@ body { gap: 1rem; font-size: 0.95rem; font-weight: 600; - color: var(--text-primary); + color: var(--color-text-primary); } .nav-arrow { background: var(--bg-surface); - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); width: 36px; height: 36px; border-radius: 50%; font-size: 1.25rem; cursor: pointer; transition: all 0.2s; - color: var(--text-primary); + color: var(--color-text-primary); display: flex; align-items: center; justify-content: center; } .nav-arrow:hover { - background: var(--accent); - border-color: var(--accent); + background: var(--color-primary); + border-color: var(--color-primary); transform: scale(1.05); } @@ -234,7 +217,7 @@ body { display: flex; flex-direction: column; background: var(--bg-surface); - border-left: 1px solid var(--border); + border-left: 1px solid var(--border-subtle); box-shadow: -10px 0 30px rgba(0, 0, 0, 0.6); } @@ -251,7 +234,7 @@ body { padding: 1.5rem; z-index: 10; background: #0a0a0f; - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border-subtle); } .panel-header h3 { @@ -272,12 +255,12 @@ body { justify-content: center; background: var(--bg-elevated); border: none; - color: var(--text-secondary); + color: var(--color-text-secondary); } .close-btn:hover { - background: var(--accent); - color: var(--text-primary); + background: var(--color-primary); + color: var(--color-text-primary); transform: rotate(90deg); } @@ -290,7 +273,7 @@ body { .settings-section { margin-bottom: 2rem; padding-bottom: 2rem; - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border-subtle); } .settings-section:last-child { @@ -301,7 +284,7 @@ body { .settings-section h4 { margin: 0 0 1.25rem 0; - color: var(--text-primary); + color: var(--color-text-primary); font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; @@ -321,12 +304,12 @@ body { align-items: center; margin-bottom: 0.625rem; font-size: 0.875rem; - color: var(--text-secondary); + color: var(--color-text-secondary); font-weight: 500; } .control label span { - color: var(--text-primary); + color: var(--color-text-primary); font-weight: 600; font-family: 'JetBrains Mono', monospace; font-size: 0.8125rem; @@ -351,7 +334,7 @@ input[type="range"]::-webkit-slider-thumb { box-shadow: 0 2px 8px rgba(139, 92, 246, 0.4); width: 20px; height: 20px; - background: var(--accent); + background: var(--color-primary); } input[type="range"]::-webkit-slider-thumb:hover { @@ -362,7 +345,7 @@ input[type="range"]::-webkit-slider-thumb:hover { input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; - background: var(--accent); + background: var(--color-primary); border-radius: 50%; cursor: pointer; border: none; @@ -373,22 +356,22 @@ select, input[type="color"], input[type="number"] { width: 100%; padding: 0.625rem 0.875rem; border-radius: var(--radius-md); - color: var(--text-primary); + color: var(--color-text-primary); font-size: 0.875rem; transition: all 0.2s; cursor: pointer; background: var(--bg-elevated); - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); } select:hover, input[type="color"]:hover, input[type="number"]:hover { - border-color: var(--accent); + border-color: var(--color-primary); } select:focus, input[type="color"]:focus, input[type="number"]:focus { outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px var(--accent-light); + border-color: var(--color-primary); + box-shadow: 0 0 0 3px var(--color-primary-glow); transform: translateY(-1px); } @@ -407,23 +390,23 @@ input[type="color"] { .presets button { background: var(--bg-elevated); border-radius: var(--radius-md); - color: var(--text-primary); + color: var(--color-text-primary); cursor: pointer; transition: all 0.2s; font-size: 0.875rem; padding: 1rem; background: var(--bg-elevated); - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); font-weight: 700; letter-spacing: 0.02em; } .presets button:hover { - background: var(--accent); - background: var(--accent); - border-color: var(--accent); + background: var(--color-primary); + background: var(--color-primary); + border-color: var(--color-primary); transform: translateY(-2px); - box-shadow: 0 4px 15px var(--accent-light); + box-shadow: 0 4px 15px var(--color-primary-glow); } .toggle-group { @@ -442,21 +425,21 @@ input[type="color"] { text-align: center; padding: 0.75rem 1rem; background: var(--bg-elevated); - border: 1px solid var(--border); - color: var(--text-secondary); + border: 1px solid var(--border-subtle); + color: var(--color-text-secondary); font-weight: 600; } .toggle-btn:hover { - border-color: var(--accent); - color: var(--text-primary); + border-color: var(--color-primary); + color: var(--color-text-primary); } .toggle-btn.active { - background: var(--accent); - border-color: var(--accent); - color: var(--text-primary); - box-shadow: 0 2px 10px var(--accent-light); + background: var(--color-primary); + border-color: var(--color-primary); + color: var(--color-text-primary); + box-shadow: 0 2px 10px var(--color-primary-glow); } .overlay { @@ -479,7 +462,7 @@ input[type="color"] { width: 40px; height: 40px; border: 3px solid var(--bg-elevated); - border-top-color: var(--accent); + border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } @@ -495,7 +478,7 @@ input[type="color"] { justify-content: center; padding: 4rem 2rem; gap: 1rem; - color: var(--text-secondary); + color: var(--color-text-secondary); } .settings-panel::-webkit-scrollbar { diff --git a/views/css/components/anilist-modal.css b/views/css/components/anilist-modal.css new file mode 100644 index 0000000..231a944 --- /dev/null +++ b/views/css/components/anilist-modal.css @@ -0,0 +1,273 @@ +.modal-overlay { + position: fixed; + inset: 0; + background: rgba(0,0,0,0.9); + backdrop-filter: blur(10px); + z-index: 2000; + display: flex; + align-items: center; + justify-content: center; + padding: 1rem; +} + +.modal-content { + background: var(--bg-amoled); + 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); + max-height: 90vh; + display: flex; + flex-direction: column; +} + +@keyframes modalSlideUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.modal-close { + position: absolute; + top: 1rem; + right: 1rem; + background: rgba(255,255,255,0.05); + border: 1px solid rgba(255,255,255,0.1); + color: white; + width: 36px; + height: 36px; + border-radius: 8px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 1.2rem; + transition: 0.2s; + z-index: 2001; +} + +.modal-close:hover { + background: var(--danger); + border-color: var(--danger); +} + +.modal-title { + font-size: 1.8rem; + font-weight: 800; + padding: 1.5rem 2rem 0.5rem; + margin-bottom: 0; + color: var(--text-primary); + border-bottom: 1px solid rgba(255,255,255,0.05); +} + +.modal-body { + display: flex; + flex-direction: column; + overflow-y: auto; + padding: 0 2rem; + flex-grow: 1; +} + +/* GRUPO PRINCIPAL DE CAMPOS */ +.modal-fields-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 1.5rem 2rem; + padding: 1.5rem 0; +} + +.form-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +/* Column Span Overrides */ +.form-group.notes-group { + grid-column: 1 / span 2; +} +.form-group.checkbox-group { + grid-column: 3 / 4; + align-self: flex-end; + margin-bottom: 0.5rem; +} +.form-group.full-width { + grid-column: 1 / -1; +} + + +.form-group label { + font-size: 0.8rem; + font-weight: 700; + color: var(--text-secondary); + text-transform: uppercase; + letter-spacing: 0.5px; +} + +.form-input { + background: var(--bg-field); + border: 1px solid rgba(255,255,255,0.1); + color: var(--text-primary); + padding: 0.8rem 1rem; + border-radius: 8px; + font-family: inherit; + font-size: 1rem; + transition: 0.2s; +} + +.form-input:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 10px var(--accent-glow); +} + +.notes-textarea { + resize: vertical; + min-height: 100px; +} + +.date-group { + display: flex; + gap: 1rem; +} + +/* CLAVE: Hace que la etiqueta de fecha esté encima del input */ +.date-input-pair { + flex: 1; + min-width: 0; + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.checkbox-group { + flex-direction: row; + align-items: center; + gap: 1rem; +} + +.form-checkbox { + width: 18px; + height: 18px; + border: 1px solid rgba(255,255,255,0.2); + background: var(--bg-base); + border-radius: 4px; + cursor: pointer; + -webkit-appearance: none; + appearance: none; + position: relative; + transition: all 0.2s; + flex-shrink: 0; +} + +.form-checkbox:checked { + background: var(--accent); + border-color: var(--accent); +} + +.form-checkbox:checked::after { + content: '✓'; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + color: white; + font-size: 14px; +} + +/* ACCIONES (Barra inferior pegajosa) */ +.modal-actions { + display: flex; + gap: 1rem; + margin-top: 0; + justify-content: flex-end; + flex-shrink: 0; + padding: 1rem 2rem; + border-top: 1px solid rgba(255,255,255,0.05); + background: var(--bg-amoled); + position: sticky; + bottom: 0; + z-index: 10; +} + +.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; + flex: none; +} + +.btn-primary { + background: var(--accent); + color: white; +} + +.btn-primary:hover { + transform: scale(1.05); +} + +.btn-secondary { + background: rgba(255,255,255,0.1); + color: white; + border: 1px solid rgba(255,255,255,0.2); +} + +.btn-secondary:hover { + background: rgba(255,255,255,0.15); +} + +.btn-danger { + background: var(--danger); + color: white; + margin-right: auto; +} + +.btn-danger:hover { + opacity: 0.9; +} + +.modal-overlay { + display: none; + opacity: 0; +} +.modal-overlay.active { + display: flex; + opacity: 1; +} + +/* --- Media Queries (Responsive) --- */ +@media (max-width: 900px) { + .modal-content { + max-width: 95%; + } + .modal-fields-grid { + grid-template-columns: repeat(2, 1fr); + } + .form-group.notes-group { + grid-column: 1 / -1; + } + .form-group.checkbox-group { + grid-column: 1 / -1; + align-self: auto; + } + .modal-actions { + padding: 1rem 1.5rem; + } + .modal-title, .modal-body { + padding-left: 1.5rem; + padding-right: 1.5rem; + } +} diff --git a/views/css/components/hero.css b/views/css/components/hero.css new file mode 100644 index 0000000..482bd85 --- /dev/null +++ b/views/css/components/hero.css @@ -0,0 +1,112 @@ +.hero-wrapper { + position: relative; + height: 85vh; + width: 100%; + overflow: hidden; +} + +.hero-background { + position: absolute; + inset: 0; + z-index: 0; +} + +#hero-bg-media { + width: 100%; + height: 100%; + object-fit: cover; + opacity: 0.6; + transform: scale(1.1); + transition: opacity 1s ease; +} + +.hero-vignette { + 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%, transparent 60%); + z-index: 1; +} + +.hero-content { + position: relative; + z-index: 10; + height: 100%; + max-width: 1600px; + margin: 0 auto; + padding: 0 3rem; + display: flex; + align-items: flex-end; + padding-bottom: 6rem; + gap: 3rem; +} + +.hero-poster-card { + width: 260px; + height: 380px; + border-radius: var(--radius-lg); + overflow: hidden; + box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); + border: 1px solid rgba(255, 255, 255, 0.1); + flex-shrink: 0; + background: #1a1a1a; +} +.hero-poster-card img { + width: 100%; + height: 100%; + object-fit: cover; +} + +.hero-text { + flex: 1; + max-width: 800px; + margin-bottom: 1rem; + animation: fadeInUp 0.8s ease; +} + +.hero-title { + font-size: 4rem; + font-weight: 900; + line-height: 1.1; + margin: 0 0 1rem 0; + text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); + display: -webkit-box; + -webkit-line-clamp: 2; + -webkit-box-orient: vertical; + overflow: hidden; +} + +.hero-meta { + display: flex; + align-items: center; + gap: 1.5rem; + margin-bottom: 1.5rem; + font-size: 1.1rem; + font-weight: 600; +} + +.hero-desc { + font-size: 1.1rem; + line-height: 1.6; + color: #e4e4e7; + margin-bottom: 2rem; + max-width: 650px; + display: -webkit-box; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; + overflow: hidden; + text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); +} + +.hero-buttons { + display: flex; + gap: 1rem; +} + +.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%); + z-index: 1; +} \ No newline at end of file diff --git a/views/css/anime/home.css b/views/css/components/navbar.css similarity index 51% rename from views/css/anime/home.css rename to views/css/components/navbar.css index df620a7..048eb64 100644 --- a/views/css/anime/home.css +++ b/views/css/components/navbar.css @@ -1,29 +1,3 @@ -:root { - --bg-base: #09090b; - --bg-surface: #121215; - --bg-surface-hover: #1e1e22; - --accent: #8b5cf6; - --accent-glow: rgba(139, 92, 246, 0.4); - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --radius-md: 12px; - --radius-lg: 24px; - --nav-height: 80px; -} - -* { - box-sizing: border-box; - outline: none; -} - -body { - margin: 0; - background-color: var(--bg-base); - color: var(--text-primary); - font-family: "Inter", system-ui, sans-serif; - overflow-x: hidden; -} - .navbar { width: 100%; height: var(--nav-height); @@ -85,7 +59,7 @@ body { .nav-button { background: transparent; border: none; - color: var(--text-secondary); + color: var(--color-text-secondary); padding: 0.6rem 1.5rem; border-radius: 999px; cursor: pointer; @@ -106,7 +80,8 @@ body { .search-wrapper { position: relative; - width: 250px; + width: 300px; + z-index: 2000; } .search-input { width: 100%; @@ -118,10 +93,11 @@ body { font-family: inherit; transition: 0.2s; } + .search-input:focus { background: rgba(255, 255, 255, 0.1); - border-color: var(--accent); - box-shadow: 0 0 15px var(--accent-glow); + border-color: var(--color-primary); + box-shadow: 0 0 15px var(--color-primary-glow); } .search-icon { position: absolute; @@ -129,313 +105,7 @@ body { top: 50%; transform: translateY(-50%); pointer-events: none; - color: var(--text-secondary); -} - -.hero-wrapper { - position: relative; - height: 85vh; - width: 100%; - overflow: hidden; -} - -.hero-background { - position: absolute; - inset: 0; - z-index: 0; -} - -#hero-bg-media { - width: 100%; - height: 100%; - object-fit: cover; - opacity: 0.6; - transform: scale(1.1); - transition: opacity 1s ease; -} - -.hero-vignette { - position: absolute; - inset: 0; - background: radial-gradient(circle at center, transparent 0%, var(--bg-base) 120%), - linear-gradient(to top, var(--bg-base) 10%, transparent 60%); - z-index: 1; -} - -.hero-content { - position: relative; - z-index: 10; - height: 100%; - max-width: 1600px; - margin: 0 auto; - padding: 0 3rem; - display: flex; - align-items: flex-end; - padding-bottom: 6rem; - gap: 3rem; -} - -.hero-poster-card { - width: 260px; - height: 380px; - border-radius: var(--radius-lg); - overflow: hidden; - box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7); - border: 1px solid rgba(255, 255, 255, 0.1); - flex-shrink: 0; - background: #1a1a1a; -} -.hero-poster-card img { - width: 100%; - height: 100%; - object-fit: cover; -} - -.hero-text { - flex: 1; - max-width: 800px; - margin-bottom: 1rem; - animation: fadeInUp 0.8s ease; -} - -.hero-title { - font-size: 4rem; - font-weight: 900; - line-height: 1.1; - margin: 0 0 1rem 0; - text-shadow: 0 4px 20px rgba(0, 0, 0, 0.8); - display: -webkit-box; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - overflow: hidden; -} - -.hero-meta { - display: flex; - align-items: center; - gap: 1.5rem; - margin-bottom: 1.5rem; - font-size: 1.1rem; - font-weight: 600; -} -.score-badge { - color: #22c55e; - background: rgba(34, 197, 94, 0.1); - padding: 0.2rem 0.8rem; - border-radius: 6px; - border: 1px solid rgba(34, 197, 94, 0.2); -} - -.hero-desc { - font-size: 1.1rem; - line-height: 1.6; - color: #e4e4e7; - margin-bottom: 2rem; - max-width: 650px; - display: -webkit-box; - -webkit-line-clamp: 3; - -webkit-box-orient: vertical; - overflow: hidden; - text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); -} - -.hero-buttons { - display: flex; - gap: 1rem; -} - -.btn-primary, -.btn-blur { - padding: 1rem 2.5rem; - border-radius: 999px; - font-weight: 700; - font-size: 1rem; - border: none; - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; - transition: transform 0.2s; -} -.btn-primary { - background: white; - color: black; -} -.btn-primary:hover { - transform: scale(1.05); -} -.btn-blur { - background: rgba(255, 255, 255, 0.1); - backdrop-filter: blur(10px); - color: white; - border: 1px solid rgba(255, 255, 255, 0.2); -} -.btn-blur:hover { - background: rgba(255, 255, 255, 0.2); -} - -.section { - max-width: 1700px; - margin: 0 auto; - padding: 2rem 3rem; -} -.section-header { - display: flex; - justify-content: space-between; - align-items: center; - margin-bottom: 1.5rem; -} -.section-title { - font-size: 1.8rem; - font-weight: 800; -} - -.carousel-wrapper { - position: relative; -} -.carousel { - display: flex; - gap: 1.25rem; - overflow-x: auto; - padding: 1rem 0; - scroll-behavior: smooth; - scrollbar-width: none; -} -.carousel::-webkit-scrollbar { - display: none; -} - -.scroll-btn { - position: absolute; - top: 50%; - transform: translateY(-50%); - width: 50px; - height: 50px; - border-radius: 50%; - background: rgba(20, 20, 23, 0.9); - border: 1px solid rgba(255, 255, 255, 0.1); - color: white; - z-index: 20; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - opacity: 0; - transition: 0.3s; -} -.carousel-wrapper:hover .scroll-btn { - opacity: 1; -} -.scroll-btn:hover { - background: var(--accent); -} -.scroll-btn.left { - left: -25px; -} -.scroll-btn.right { - right: -25px; -} - -.card { - min-width: 220px; - width: 220px; - flex: 0 0 220px; - cursor: pointer; - transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); -} -.source-badge { - position: absolute; - top: 6px; - left: 6px; - background: rgba(0,0,0,0.75); - color: white; - font-size: 10px; - padding: 2px 6px; - border-radius: 6px; - text-transform: uppercase; -} - -.card:hover { - transform: translateY(-8px); -} -.card-img-wrap { - width: 100%; - aspect-ratio: 2 / 3; - border-radius: var(--radius-md); - overflow: hidden; - position: relative; - margin-bottom: 0.8rem; - background: #222; -} -.card-img-wrap img { - width: 100%; - height: 100%; - object-fit: cover; - transition: transform 0.4s; -} -.card:hover .card-img-wrap img { - transform: scale(1.05); -} - -.card-content h3 { - margin: 0; - font-size: 1rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; -} -.card-content p { - margin: 4px 0 0 0; - font-size: 0.85rem; - color: var(--text-secondary); -} - -.skeleton { - background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%); - background-size: 200% 100%; - animation: shimmer 1.5s infinite; - border-radius: 6px; - display: inline-block; -} -.text-skeleton { - height: 1em; - width: 70%; - margin-bottom: 0.5rem; -} -.title-skeleton { - height: 3em; - width: 80%; - margin-bottom: 1rem; -} -.poster-skeleton { - width: 100%; - height: 100%; -} - -@keyframes shimmer { - 0% { - background-position: 200% 0; - } - 100% { - background-position: -200% 0; - } -} -@keyframes fadeInUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.search-wrapper { - position: relative; - width: 300px; - z-index: 2000; + color: var(--color-text-secondary); } .search-input { @@ -451,8 +121,8 @@ body { .search-input:focus { background: rgba(0, 0, 0, 0.8); - border-color: var(--accent); - box-shadow: 0 0 15px var(--accent-glow); + border-color: var(--color-primary); + box-shadow: 0 0 15px var(--color-primary-glow); border-radius: 12px 12px 0 0; } @@ -462,7 +132,7 @@ body { top: 50%; transform: translateY(-50%); pointer-events: none; - color: var(--text-secondary); + color: var(--color-text-secondary); } .search-results { @@ -484,77 +154,6 @@ body { overflow-y: auto; } -.search-results.active { - display: flex; -} - -.search-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 0.5rem; - border-radius: 8px; - cursor: pointer; - transition: background 0.2s; - text-decoration: none; - color: inherit; -} - -.search-item:hover { - background: rgba(255, 255, 255, 0.1); -} - -.search-poster { - width: 40px; - height: 56px; - border-radius: 4px; - object-fit: cover; - background: #222; -} - -.search-info { - flex: 1; - overflow: hidden; -} - -.search-title { - font-size: 0.9rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--text-primary); -} - -.search-meta { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - color: var(--text-secondary); - margin-top: 2px; -} - -.rating-pill { - color: #4ade80; - font-weight: 700; -} - -.search-results::-webkit-scrollbar { - width: 6px; -} -.search-results::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.2); - border-radius: 3px; -} - -.nav-right { - display: flex; - align-items: center; - gap: 1.5rem; -} - -/* Estilos mejorados del dropdown de usuario */ .nav-user { position: relative; display: flex; @@ -576,15 +175,15 @@ body { height: 44px; object-fit: cover; border-radius: 50%; - border: 2px solid var(--accent); - background: var(--bg-surface); + border: 2px solid var(--color-primary); + background: var(--color-bg-elevated); cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 0 0 0 var(--accent-glow); + box-shadow: 0 0 0 0 var(--color-primary-glow); } .user-avatar-btn:hover #nav-avatar { - box-shadow: 0 0 0 4px var(--accent-glow); + box-shadow: 0 0 0 4px var(--color-primary-glow); border-color: #a78bfa; } @@ -595,21 +194,11 @@ body { width: 12px; height: 12px; background: #22c55e; - border: 2px solid var(--bg-base); + border: 2px solid var(--color-bg-base); border-radius: 50%; animation: pulse 2s infinite; } -@keyframes pulse { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.6; - } -} - .nav-dropdown { position: absolute; top: calc(100% + 12px); @@ -657,8 +246,8 @@ body { height: 48px; border-radius: 12px; object-fit: cover; - border: 2px solid var(--accent); - background: var(--bg-surface); + border: 2px solid var(--color-primary); + background: var(--color-bg-elevated); } .dropdown-user-info { @@ -669,7 +258,7 @@ body { .dropdown-username { font-weight: 700; font-size: 1rem; - color: var(--text-primary); + color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -705,7 +294,7 @@ body { align-items: center; gap: 12px; padding: 12px 16px; - color: var(--text-primary); + color: var(--color-text-primary); text-decoration: none; font-size: 0.9rem; font-weight: 500; @@ -720,7 +309,7 @@ body { .dropdown-item svg { flex-shrink: 0; - color: var(--text-secondary); + color: var(--color-text-secondary); transition: all 0.2s ease; } @@ -731,7 +320,7 @@ body { } .dropdown-item:hover svg { - color: var(--accent); + color: var(--color-primary); transform: translateX(2px); } @@ -757,3 +346,73 @@ body { color: #f87171; transform: translateX(2px); } + +.nav-right { + display: flex; + align-items: center; + gap: 1.5rem; +} + +.search-results.active { + display: flex; +} + +.search-item { + display: flex; + align-items: center; + gap: 1rem; + padding: 0.5rem; + border-radius: 8px; + cursor: pointer; + transition: background 0.2s; + text-decoration: none; + color: inherit; +} + +.search-item:hover { + background: rgba(255, 255, 255, 0.1); +} + +.search-poster { + width: 40px; + height: 56px; + border-radius: 4px; + object-fit: cover; + background: #222; +} + +.search-info { + flex: 1; + overflow: hidden; +} + +.search-title { + font-size: 0.9rem; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + color: var(--color-text-primary); +} + +.search-meta { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.75rem; + color: var(--color-text-secondary); + margin-top: 2px; +} + +.rating-pill { + color: #4ade80; + font-weight: 700; +} + +.search-results::-webkit-scrollbar { + width: 6px; +} +.search-results::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 3px; +} \ No newline at end of file diff --git a/views/css/gallery/gallery.css b/views/css/gallery/gallery.css index 0b648c1..d8c6ce8 100644 --- a/views/css/gallery/gallery.css +++ b/views/css/gallery/gallery.css @@ -251,26 +251,9 @@ } .search-gallery-wrapper { - flex: 1; - min-width: 200px; - max-width: none; -} - -.search-input { - width: 100%; - background: rgba(255,255,255,0.08); - border: 1px solid rgba(255,255,255,0.15); - color: var(--text-primary); - padding: 0.75rem 1.3rem; - border-radius: 99px; - font-size: 1rem; - transition: all 0.25s; -} - -.search-input:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 0 3px rgba(255,107,107,0.2); + position: relative; + width: 300px; + z-index: 2000; } .fav-toggle-btn { diff --git a/views/css/gallery/image.css b/views/css/gallery/image.css index 5f617fc..ee28ecc 100644 --- a/views/css/gallery/image.css +++ b/views/css/gallery/image.css @@ -1,14 +1,3 @@ -:root { - --accent: #8b5cf6; - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --radius-lg: 24px; - --radius-full: 9999px; - --glass-border: 1px solid rgba(255, 255, 255, 0.1); - --glass-bg: rgba(20, 20, 23, 0.7); - --nav-height: 80px; -} - .gallery-hero-placeholder { height: var(--nav-height); width: 100%; } .item-content-flex-wrapper { @@ -59,7 +48,7 @@ } .provider-name { - color: var(--text-secondary); + color: var(--color-text-secondary); font-size: 1rem; opacity: 0.9; } @@ -114,7 +103,7 @@ } .download-btn { - background: var(--accent); + background: var(--color-primary); color: white; } @@ -134,7 +123,7 @@ .tags-section h3 { margin: 0 0 1rem 0; - color: var(--text-secondary); + color: var(--color-text-secondary); font-weight: 500; } @@ -146,7 +135,7 @@ .tag-item { background: rgba(139,92,246,0.2); - color: var(--accent); + color: var(--color-primary); padding: 0.5rem 1rem; border-radius: 99px; font-size: 0.95rem; @@ -185,7 +174,7 @@ .similar-section h3 { margin: 0 0 1.5rem 0; font-size: 1.6rem; - color: var(--text-primary); + color: var(--color-text-primary); text-align: center; } @@ -248,7 +237,7 @@ top: 5rem; left: 2rem; z-index: 100; display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.5rem; - background: var(--glass-bg); backdrop-filter: blur(12px); + background: var(--color-glass-bg); backdrop-filter: blur(12px); border: var(--glass-border); border-radius: var(--radius-full); color: white; text-decoration: none; font-weight: 600; transition: all 0.2s ease; diff --git a/views/css/globals.css b/views/css/globals.css new file mode 100644 index 0000000..8747a4b --- /dev/null +++ b/views/css/globals.css @@ -0,0 +1,299 @@ +:root { + --color-bg-base: #09090b; + --color-bg-elevated: #121215; + --color-bg-elevated-hover: #1e1e22; + --color-bg-card: #121214; + --color-primary: #8b5cf6; + --color-primary-hover: #7c3aed; + --color-primary-glow: rgba(139, 92, 246, 0.4); + --color-danger: #ef4444; + --color-success: #22c55e; + --color-bg-amoled: #0a0a0a; + --color-bg-field: #0e0e0f; + --color-glass-bg: rgba(20, 20, 23, 0.7); + + --color-text-primary: #ffffff; + --color-text-secondary: #a1a1aa; + --color-text-muted: #71717a; + + --border-subtle: 1px solid rgba(255, 255, 255, 0.08); + --border-medium: 1px solid rgba(255, 255, 255, 0.12); + --glass-bg: rgba(18, 18, 20, 0.8); + --glass-border: 1px solid rgba(255, 255, 255, 0.1); + + --spacing-xs: 0.5rem; + --spacing-sm: 0.75rem; + --spacing-md: 1rem; + --spacing-lg: 1.5rem; + --spacing-xl: 2rem; + --spacing-2xl: 3rem; + + --radius-sm: 0.5rem; + --radius-md: 0.75rem; + --radius-lg: 1.5rem; + --radius-xl: 1.5rem; + --radius-full: 9999px; + + --nav-height: 80px; + + --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); + --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); + --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); + --shadow-glow: 0 8px 32px var(--color-primary-glow); + --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1); + --transition-smooth: 350ms cubic-bezier(0.4, 0, 0.2, 1); + + --plyr-color-main: var(--color-primary); +} + +* { + box-sizing: border-box; + outline: none; +} + +body { + margin: 0; + padding: 0; + background-color: var(--color-bg-base); + color: var(--color-text-primary); + font-family: 'Inter', system-ui, sans-serif; + overflow-x: hidden; + line-height: 1.6; + -webkit-font-smoothing: antialiased; +} + +.section { + max-width: 1700px; + margin: 0 auto; + padding: 2rem 3rem; +} +.section-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 1.5rem; +} +.section-title { + font-size: 1.8rem; + font-weight: 800; +} + +.btn-primary, +.btn-blur { + padding: 1rem 2.5rem; + border-radius: 999px; + font-weight: 700; + font-size: 1rem; + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; + transition: transform 0.2s; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + color: white; + border: 1px solid rgba(255, 255, 255, 0.2); +} + +.btn-primary { + background: white; + color: black; +} + +.btn-primary:hover { + transform: scale(1.05); +} + +.btn-blur:hover { + background: rgba(255, 255, 255, 0.2); +} + +.card { + min-width: 220px; + width: 220px; + flex: 0 0 220px; + cursor: pointer; + transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); +} + +.card:hover { + transform: translateY(-8px); +} +.card-img-wrap { + width: 100%; + aspect-ratio: 2 / 3; + border-radius: var(--radius-md); + overflow: hidden; + position: relative; + margin-bottom: 0.8rem; + background: #222; +} +.card-img-wrap img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.4s; +} +.card:hover .card-img-wrap img { + transform: scale(1.05); +} + +.card-content h3 { + margin: 0; + font-size: 1rem; + font-weight: 600; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.card-content p { + margin: 4px 0 0 0; + font-size: 0.85rem; + color: var(--color-text-secondary); +} + +.skeleton { + background: linear-gradient(90deg, #18181b 25%, #27272a 50%, #18181b 75%); + background-size: 200% 100%; + animation: shimmer 1.5s infinite; + border-radius: 6px; + display: inline-block; +} +.text-skeleton { + height: 1em; + width: 70%; + margin-bottom: 0.5rem; +} +.title-skeleton { + height: 3em; + width: 80%; + margin-bottom: 1rem; +} +.poster-skeleton { + width: 100%; + height: 100%; +} + +@keyframes shimmer { + 0% { + background-position: 200% 0; + } + 100% { + background-position: -200% 0; + } +} + +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +@keyframes pulse { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.6; + } +} + +.carousel-wrapper { + position: relative; +} +.carousel { + display: flex; + gap: 1.25rem; + overflow-x: auto; + padding: 1rem 0; + scroll-behavior: smooth; + scrollbar-width: none; +} +.carousel::-webkit-scrollbar { + display: none; +} + +.carousel-wrapper:hover .scroll-btn { + opacity: 1; +} + +.scroll-btn { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 50px; + height: 50px; + border-radius: 50%; + background: rgba(20, 20, 23, 0.9); + border: 1px solid rgba(255, 255, 255, 0.1); + color: white; + z-index: 20; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: 0.3s; +} + +.scroll-btn:hover { + background: var(--color-primary); +} +.scroll-btn.left { + left: -25px; +} +.scroll-btn.right { + right: -25px; +} + +.back-btn { + position: fixed; + top: 2rem; + left: 2rem; + z-index: 100; + display: flex; + align-items: center; + gap: 0.5rem; + padding: 0.8rem 1.5rem; + background: rgba(0, 0, 0, 0.6); + backdrop-filter: blur(12px); + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: var(--radius-full); + color: white; + text-decoration: none; + font-weight: 600; + transition: all 0.2s ease; + cursor: pointer; +} + +.back-btn:hover { + background: rgba(255, 255, 255, 0.1); + transform: translateX(-5px); +} + +.btn-secondary { + padding: 1rem 2rem; + background: rgba(255, 255, 255, 0.1); + backdrop-filter: blur(10px); + color: white; + border-radius: var(--radius-full); + font-weight: 700; + font-size: 1rem; + border: 1px solid rgba(255,255,255,0.2); + cursor: pointer; + transition: all 0.2s; + display: flex; + align-items: center; + gap: 0.5rem; +} +.btn-secondary:hover { + background: rgba(255, 255, 255, 0.2); + transform: scale(1.05); +} \ No newline at end of file diff --git a/views/css/list.css b/views/css/list.css index 003798a..2421a96 100644 --- a/views/css/list.css +++ b/views/css/list.css @@ -544,279 +544,6 @@ body { } /* --- Modal de Edición Mejorado (Estilo Anilist + AMOLED) --- */ -.modal-overlay { - position: fixed; - inset: 0; - background: rgba(0,0,0,0.9); - backdrop-filter: blur(10px); - z-index: 2000; - display: flex; - align-items: center; - justify-content: center; - padding: 1rem; -} - -.modal-content { - background: var(--bg-amoled); - 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); - max-height: 90vh; - display: flex; - flex-direction: column; -} - -@keyframes modalSlideUp { - from { - opacity: 0; - transform: translateY(20px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.modal-close { - position: absolute; - top: 1rem; - right: 1rem; - background: rgba(255,255,255,0.05); - border: 1px solid rgba(255,255,255,0.1); - color: white; - width: 36px; - height: 36px; - border-radius: 8px; - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - transition: 0.2s; - z-index: 2001; -} - -.modal-close:hover { - background: var(--danger); - border-color: var(--danger); -} - -.modal-title { - font-size: 1.8rem; - font-weight: 800; - padding: 1.5rem 2rem 0.5rem; - margin-bottom: 0; - color: var(--text-primary); - border-bottom: 1px solid rgba(255,255,255,0.05); -} - -.modal-body { - display: flex; - flex-direction: column; - overflow-y: auto; - padding: 0 2rem; - flex-grow: 1; -} - -/* GRUPO PRINCIPAL DE CAMPOS */ -.modal-fields-grid { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1.5rem 2rem; - padding: 1.5rem 0; -} - -.form-group { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -/* Column Span Overrides */ -.form-group.notes-group { - grid-column: 1 / span 2; -} -.form-group.checkbox-group { - grid-column: 3 / 4; - align-self: flex-end; - margin-bottom: 0.5rem; -} -.form-group.full-width { - grid-column: 1 / -1; -} - - -.form-group label { - font-size: 0.8rem; - font-weight: 700; - color: var(--text-secondary); - text-transform: uppercase; - letter-spacing: 0.5px; -} - -.form-input { - background: var(--bg-field); - border: 1px solid rgba(255,255,255,0.1); - color: var(--text-primary); - padding: 0.8rem 1rem; - border-radius: 8px; - font-family: inherit; - font-size: 1rem; - transition: 0.2s; -} - -.form-input:focus { - outline: none; - border-color: var(--accent); - box-shadow: 0 0 10px var(--accent-glow); -} - -.notes-textarea { - resize: vertical; - min-height: 100px; -} - -.date-group { - display: flex; - gap: 1rem; -} - -/* CLAVE: Hace que la etiqueta de fecha esté encima del input */ -.date-input-pair { - flex: 1; - min-width: 0; - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.checkbox-group { - flex-direction: row; - align-items: center; - gap: 1rem; -} - -.form-checkbox { - width: 18px; - height: 18px; - border: 1px solid rgba(255,255,255,0.2); - background: var(--bg-base); - border-radius: 4px; - cursor: pointer; - -webkit-appearance: none; - appearance: none; - position: relative; - transition: all 0.2s; - flex-shrink: 0; -} - -.form-checkbox:checked { - background: var(--accent); - border-color: var(--accent); -} - -.form-checkbox:checked::after { - content: '✓'; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; - font-size: 14px; -} - -/* ACCIONES (Barra inferior pegajosa) */ -.modal-actions { - display: flex; - gap: 1rem; - margin-top: 0; - justify-content: flex-end; - flex-shrink: 0; - padding: 1rem 2rem; - border-top: 1px solid rgba(255,255,255,0.05); - background: var(--bg-amoled); - position: sticky; - bottom: 0; - z-index: 10; -} - -.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; - flex: none; -} - -.btn-primary { - background: var(--accent); - color: white; -} - -.btn-primary:hover { - transform: scale(1.05); -} - -.btn-secondary { - background: rgba(255,255,255,0.1); - color: white; - border: 1px solid rgba(255,255,255,0.2); -} - -.btn-secondary:hover { - background: rgba(255,255,255,0.15); -} - -.btn-danger { - background: var(--danger); - color: white; - margin-right: auto; -} - -.btn-danger:hover { - opacity: 0.9; -} - -.modal-overlay { - display: none; - opacity: 0; -} -.modal-overlay.active { - display: flex; - opacity: 1; -} - -/* --- Media Queries (Responsive) --- */ -@media (max-width: 900px) { - .modal-content { - max-width: 95%; - } - .modal-fields-grid { - grid-template-columns: repeat(2, 1fr); - } - .form-group.notes-group { - grid-column: 1 / -1; - } - .form-group.checkbox-group { - grid-column: 1 / -1; - align-self: auto; - } - .modal-actions { - padding: 1rem 1.5rem; - } - .modal-title, .modal-body { - padding-left: 1.5rem; - padding-right: 1.5rem; - } -} @media (max-width: 550px) { /* Layout de lista (card view) */ diff --git a/views/css/marketplace.css b/views/css/marketplace.css index 37793bd..5337b5c 100644 --- a/views/css/marketplace.css +++ b/views/css/marketplace.css @@ -1,5 +1,4 @@ .hero-spacer { - height: var(--nav-height); width: 100%; } @@ -9,15 +8,6 @@ color: var(--text-secondary); } -.section-header { - display: flex; - justify-content: space-between; - align-items: flex-end; - flex-wrap: wrap; - gap: 1.5rem; - padding-bottom: 0.5rem; -} - .filter-controls { display: flex; align-items: center; @@ -31,7 +21,6 @@ } .filter-select { - padding: 0.6rem 2rem 0.6rem 1.25rem; border-radius: 999px; background: var(--bg-surface-hover); @@ -54,9 +43,7 @@ } .marketplace-grid { - display: grid; - grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; padding-top: 1rem; diff --git a/views/css/schedule/schedule.css b/views/css/schedule/schedule.css index d372622..eb41c01 100644 --- a/views/css/schedule/schedule.css +++ b/views/css/schedule/schedule.css @@ -1,30 +1,13 @@ :root { - --bg-base: #09090b; - --bg-surface: #121215; --bg-glass: rgba(18, 18, 21, 0.8); --bg-cell: #0c0c0e; - --accent: #8b5cf6; - --accent-glow: rgba(139, 92, 246, 0.3); - --text-primary: #ffffff; - --text-secondary: #a1a1aa; - --border: rgba(255, 255, 255, 0.08); - --radius-md: 12px; - --radius-lg: 24px; - --nav-height: 80px; - --font-main: "Inter", sans-serif; - --titlebar-height: 40px; -} - -* { - box-sizing: border-box; - outline: none; + --color-primary-glow: rgba(139, 92, 246, 0.3); } body { margin: 0; background-color: var(--bg-base); color: var(--text-primary); - font-family: var(--font-main); overflow: hidden; height: 100vh; display: flex; @@ -35,369 +18,6 @@ html.electron body { padding-top: 0; } -.navbar { - height: var(--nav-height); - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 2rem; - background: var(--bg-glass); - backdrop-filter: blur(16px); - border-bottom: 1px solid var(--border); - z-index: 100; - flex-shrink: 0; - position: relative; -} - -.nav-brand { - position: absolute; - left: 2rem; - font-weight: 900; - font-size: 1.4rem; - display: flex; - align-items: center; - gap: 0.8rem; - color: white; - text-decoration: none; - letter-spacing: -0.02em; -} - -.brand-icon { - width: 36px; - height: 36px; - background: transparent; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: center; -} - -.brand-icon img { - width: 100%; - height: 100%; - object-fit: contain; -} - -.nav-center { - display: flex; - gap: 0.5rem; - background: rgba(255, 255, 255, 0.03); - padding: 0.3rem; - border-radius: 999px; - border: 1px solid var(--border); - position: absolute; - left: 50%; - transform: translateX(-50%); -} - -.nav-button { - background: transparent; - border: none; - color: var(--text-secondary); - padding: 0.5rem 1.2rem; - border-radius: 999px; - cursor: pointer; - font-weight: 600; - font-size: 0.9rem; - transition: all 0.2s ease; -} - -.nav-button:hover { - color: white; - background: rgba(255, 255, 255, 0.05); -} - -.nav-button.active { - background: rgba(255, 255, 255, 0.1); - color: white; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); - border: 1px solid rgba(255, 255, 255, 0.05); -} - -.nav-right { - display: flex; - align-items: center; - gap: 1.5rem; - margin-left: auto; -} - -.search-wrapper { - position: relative; - width: 250px; -} - -.search-input { - width: 100%; - background: rgba(255, 255, 255, 0.05); - border: 1px solid rgba(255, 255, 255, 0.1); - padding: 0.7rem 1rem 0.7rem 2.5rem; - border-radius: 99px; - color: white; - font-family: inherit; - transition: 0.2s; -} - -.search-input:focus { - background: rgba(255, 255, 255, 0.1); - border-color: var(--accent); - box-shadow: 0 0 15px var(--accent-glow); -} - -.search-icon { - position: absolute; - left: 12px; - top: 50%; - transform: translateY(-50%); - pointer-events: none; - color: var(--text-secondary); -} - -.search-results { - position: absolute; - top: 100%; - left: 0; - right: 0; - background: rgba(15, 15, 18, 0.95); - backdrop-filter: blur(12px); - border: 1px solid rgba(255, 255, 255, 0.1); - border-top: none; - border-radius: 0 0 12px 12px; - padding: 0.5rem; - display: none; - flex-direction: column; - gap: 0.25rem; - box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); - max-height: 400px; - overflow-y: auto; - z-index: 2000; -} - -.search-results.active { - display: flex; -} - -.search-item { - display: flex; - align-items: center; - gap: 1rem; - padding: 0.5rem; - border-radius: 8px; - cursor: pointer; - transition: background 0.2s; - text-decoration: none; - color: inherit; -} - -.search-item:hover { - background: rgba(255, 255, 255, 0.1); -} - -.search-poster { - width: 40px; - height: 56px; - border-radius: 4px; - object-fit: cover; - background: #222; -} - -.search-info { - flex: 1; - overflow: hidden; -} - -.search-title { - font-size: 0.9rem; - font-weight: 600; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: var(--text-primary); -} - -.search-meta { - display: flex; - align-items: center; - gap: 0.5rem; - font-size: 0.75rem; - color: var(--text-secondary); - margin-top: 2px; -} - -.rating-pill { - color: #4ade80; - font-weight: 700; -} - -.nav-user { - position: relative; - display: flex; - align-items: center; -} - -.user-avatar-btn { - position: relative; - cursor: pointer; - transition: transform 0.2s ease; -} - -.user-avatar-btn:hover { - transform: scale(1.05); -} - -#nav-avatar { - width: 44px; - height: 44px; - object-fit: cover; - border-radius: 50%; - border: 2px solid var(--accent); - background: var(--bg-surface); - cursor: pointer; - transition: all 0.3s ease; - box-shadow: 0 0 0 0 var(--accent-glow); -} - -.user-avatar-btn:hover #nav-avatar { - box-shadow: 0 0 0 4px var(--accent-glow); - border-color: #a78bfa; -} - -.online-indicator { - position: absolute; - bottom: 2px; - right: 2px; - width: 12px; - height: 12px; - background: #22c55e; - border: 2px solid var(--bg-base); - border-radius: 50%; - animation: pulse 2s infinite; -} - -@keyframes pulse { - 0%, - 100% { - opacity: 1; - } - 50% { - opacity: 0.6; - } -} - -.nav-dropdown { - position: absolute; - top: calc(100% + 12px); - right: 0; - background: rgba(18, 18, 21, 0.98); - backdrop-filter: blur(20px); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 16px; - padding: 0; - 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); - z-index: 9999; - overflow: hidden; - animation: dropdownSlide 0.2s ease-out; -} - -@keyframes dropdownSlide { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.nav-dropdown.active { - display: flex; -} - -.dropdown-header { - display: flex; - align-items: center; - gap: 12px; - padding: 16px; - background: rgba(139, 92, 246, 0.08); - border-bottom: 1px solid rgba(255, 255, 255, 0.05); -} - -.dropdown-avatar { - width: 48px; - height: 48px; - border-radius: 12px; - object-fit: cover; - border: 2px solid var(--accent); - background: var(--bg-surface); -} - -.dropdown-user-info { - flex: 1; - overflow: hidden; -} - -.dropdown-username { - font-weight: 700; - font-size: 1rem; - color: var(--text-primary); - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - margin-bottom: 2px; -} - -.dropdown-item { - display: flex; - align-items: center; - gap: 12px; - padding: 12px 16px; - color: var(--text-primary); - text-decoration: none; - font-size: 0.9rem; - font-weight: 500; - cursor: pointer; - transition: all 0.2s ease; - border: none; - background: transparent; - width: 100%; - text-align: left; - font-family: inherit; -} - -.dropdown-item svg { - flex-shrink: 0; - color: var(--text-secondary); - transition: all 0.2s ease; -} - -.dropdown-item:hover { - background: rgba(255, 255, 255, 0.08); - color: white; - padding-left: 20px; -} - -.dropdown-item:hover svg { - color: var(--accent); - transform: translateX(2px); -} - -.logout-item { - color: #ef4444; - margin-top: 4px; -} - -.logout-item svg { - color: #ef4444; -} - -.logout-item:hover { - background: rgba(239, 68, 68, 0.15); - color: #f87171; -} - .ambient-bg { position: absolute; inset: 0; @@ -447,7 +67,7 @@ html.electron body { .icon-btn { background: rgba(255, 255, 255, 0.03); - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); width: 44px; height: 44px; border-radius: 12px; @@ -460,8 +80,8 @@ html.electron body { } .icon-btn:hover { - background: var(--accent); - border-color: var(--accent); + background: var(--color-primary); + border-color: var(--color-primary); transform: translateY(-2px); } @@ -475,7 +95,7 @@ html.electron body { background: #0f0f12; padding: 4px; border-radius: 99px; - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3); } @@ -484,7 +104,7 @@ html.electron body { border-radius: 99px; border: none; background: transparent; - color: var(--text-secondary); + color: var(--color-text-secondary); font-weight: 600; font-size: 0.9rem; cursor: pointer; @@ -492,9 +112,9 @@ html.electron body { } .toggle-item.active { - background: var(--accent); + background: var(--color-primary); color: white; - box-shadow: 0 2px 10px var(--accent-glow); + box-shadow: 0 2px 10px var(--color-primary-glow); } .calendar-board { @@ -502,16 +122,16 @@ html.electron body { display: flex; flex-direction: column; overflow: hidden; - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); - background: var(--bg-surface); + background: var(--color-bg-elevated); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); } .weekdays-grid { display: grid; grid-template-columns: repeat(7, 1fr); - border-bottom: 1px solid var(--border); + border-bottom: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); flex-shrink: 0; } @@ -522,9 +142,9 @@ html.electron body { text-transform: uppercase; font-size: 0.75rem; font-weight: 800; - color: var(--text-secondary); + color: var(--color-text-secondary); letter-spacing: 0.1em; - border-right: 1px solid var(--border); + border-right: 1px solid var(--border-subtle); } .weekday-header:last-child { @@ -539,14 +159,14 @@ html.electron body { flex: 1; grid-auto-rows: minmax(180px, 1fr); - background: var(--bg-base); + background: var(--color-bg-base); } .day-cell { position: relative; background: var(--bg-cell); - border-right: 1px solid var(--border); - border-bottom: 1px solid var(--border); + border-right: 1px solid var(--border-subtle); + border-bottom: 1px solid var(--border-subtle); display: flex; flex-direction: column; padding: 12px; @@ -569,7 +189,7 @@ html.electron body { .day-cell.today { background: rgba(139, 92, 246, 0.03); - box-shadow: inset 0 0 0 1px var(--accent); + box-shadow: inset 0 0 0 1px var(--color-primary); } .day-header { @@ -584,7 +204,7 @@ html.electron body { .day-number { font-size: 1.1rem; font-weight: 700; - color: var(--text-secondary); + color: var(--color-text-secondary); width: 32px; height: 32px; display: flex; @@ -594,15 +214,15 @@ html.electron body { } .day-cell.today .day-number { - background: var(--accent); + background: var(--color-primary); color: white; - box-shadow: 0 0 15px var(--accent-glow); + box-shadow: 0 0 15px var(--color-primary-glow); } .today-label { font-size: 0.65rem; font-weight: 800; - color: var(--accent); + color: var(--color-primary); letter-spacing: 0.05em; text-transform: uppercase; display: none; @@ -655,7 +275,7 @@ html.electron body { top: 0; bottom: 0; width: 3px; - background: var(--accent); + background: var(--color-primary); opacity: 0; transition: opacity 0.2s; } @@ -683,7 +303,7 @@ html.electron body { .chip-ep { font-size: 0.7rem; font-weight: 700; - color: var(--text-secondary); + color: var(--color-text-secondary); background: rgba(0, 0, 0, 0.4); padding: 2px 6px; border-radius: 4px; @@ -711,7 +331,7 @@ html.electron body { bottom: 30px; right: 30px; background: #18181b; - border: 1px solid var(--border); + border: 1px solid var(--border-subtle); padding: 12px 24px; border-radius: 99px; display: flex; @@ -731,7 +351,7 @@ html.electron body { width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.1); - border-top-color: var(--accent); + border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s infinite linear; } diff --git a/views/gallery/gallery.html b/views/gallery/gallery.html index 2544564..88f97af 100644 --- a/views/gallery/gallery.html +++ b/views/gallery/gallery.html @@ -4,7 +4,8 @@ WaifuBoard - Gallery - + + @@ -45,7 +46,7 @@
-
+
+
-