- 
+ 
+
-
+
@@ -89,7 +89,7 @@
+
-
+ ![]()
@@ -97,7 +97,7 @@
+
-
+ ![]()
+
diff --git a/views/anime/watch.html b/views/anime/watch.html
index 8518238..77d87cc 100644
--- a/views/anime/watch.html
+++ b/views/anime/watch.html
@@ -6,12 +6,12 @@
WaifuBoard Watch
-
+
-
+
diff --git a/views/books/book.html b/views/books/book.html
index 7091506..e1c6eb5 100644
--- a/views/books/book.html
+++ b/views/books/book.html
@@ -9,8 +9,8 @@
-
-
+
+
diff --git a/views/books/books.html b/views/books/books.html
index 0ebf138..78878de 100644
--- a/views/books/books.html
+++ b/views/books/books.html
@@ -7,8 +7,8 @@
-
-
+
+
@@ -51,13 +51,13 @@
-
+
+
-
+
diff --git a/views/books/read.html b/views/books/read.html
index cdf5bdf..878408f 100644
--- a/views/books/read.html
+++ b/views/books/read.html
@@ -6,9 +6,9 @@
Reader
-
+
-
+
diff --git a/views/css/books/reader.css b/views/css/books/reader.css
index 7590953..a616a21 100644
--- a/views/css/books/reader.css
+++ b/views/css/books/reader.css
@@ -4,20 +4,6 @@
--bg-hover: #252530;
}
-* {
- margin: 0;
- padding: 0;
- box-sizing: border-box;
-}
-
-body {
- background: var(--color-bg-base);
- color: var(--color-text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- overflow-x: hidden;
- line-height: 1.6;
-}
-
.hidden { display: none !important; }
.top-bar {
diff --git a/views/css/titlebar.css b/views/css/components/titlebar.css
similarity index 89%
rename from views/css/titlebar.css
rename to views/css/components/titlebar.css
index a1aa50d..d2a3c06 100644
--- a/views/css/titlebar.css
+++ b/views/css/components/titlebar.css
@@ -9,14 +9,12 @@
html {
background: #09090b;
visibility: hidden;
- /* Agregado scrollbar-gutter para reservar espacio estable */
scrollbar-gutter: stable;
}
html.electron {
margin: 0;
box-sizing: border-box;
- /* Overflow optimizado para evitar desplazamiento horizontal */
overflow-x: hidden;
overflow-y: auto;
}
@@ -49,7 +47,6 @@ html.electron .back-btn {
position: fixed;
top: 0;
left: 0;
- /* Cambiado a width: 100vw para ocupar todo el viewport sin considerar scrollbar */
width: 100vw;
z-index: 999999;
backdrop-filter: blur(12px);
@@ -139,10 +136,8 @@ html.electron .back-btn {
transform: scale(1.1);
}
-/* Scrollbar mejorado para no afectar el layout */
html.electron::-webkit-scrollbar {
width: 12px;
- /* Posicionamiento absoluto para overlay */
position: absolute;
}
@@ -161,7 +156,6 @@ html.electron::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}
-/* Asegurar que body también maneje el overflow correctamente */
body {
margin: 0;
padding: 0;
diff --git a/views/css/updateNotifier.css b/views/css/components/updateNotifier.css
similarity index 83%
rename from views/css/updateNotifier.css
rename to views/css/components/updateNotifier.css
index 628fd0f..232721f 100644
--- a/views/css/updateNotifier.css
+++ b/views/css/components/updateNotifier.css
@@ -22,7 +22,7 @@
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.6);
- color: var(--text-primary);
+ color: var(--color-text-primary);
font-size: 0.9rem;
}
@@ -51,11 +51,11 @@
font-size: 0.9rem;
padding: 0.2rem 0.6rem;
border-radius: 6px;
- background: var(--accent);
- color: var(--bg-base);
+ background: var(--color-primary);
+ color: var(--color-bg-base);
display: inline-block;
margin-left: 0.5rem;
- box-shadow: 0 0 12px var(--accent-glow);
+ box-shadow: 0 0 12px var(--color-primary-glow);
transition: transform 0.2s;
}
@@ -69,15 +69,15 @@
text-decoration: none;
text-align: center;
- background: var(--accent);
+ background: var(--color-primary);
color: white;
border: none;
- box-shadow: 0 4px 10px var(--accent-glow);
+ box-shadow: 0 4px 10px var(--color-primary-glow);
transition: transform 0.2s, background 0.2s;
}
#downloadButton:hover {
transform: translateY(-2px);
background: #7c4dff;
- box-shadow: 0 6px 15px var(--accent-glow);
+ box-shadow: 0 6px 15px var(--color-primary-glow);
}
\ No newline at end of file
diff --git a/views/css/gallery/gallery.css b/views/css/gallery/gallery.css
index d8c6ce8..bafc394 100644
--- a/views/css/gallery/gallery.css
+++ b/views/css/gallery/gallery.css
@@ -16,10 +16,9 @@
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.1);
- padding: 0.7rem 1rem;
padding-right: 2.5rem;
border-radius: 99px;
- color: var(--text-primary);
+ color: var(--color-text-primary);
font-family: inherit;
font-size: 1rem;
cursor: pointer;
@@ -28,8 +27,8 @@
.provider-selector:focus {
outline: none;
- 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);
}
.provider-icon {
@@ -38,7 +37,7 @@
top: 50%;
transform: translateY(-50%);
pointer-events: none;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
font-size: 0.8rem;
}
@@ -167,7 +166,7 @@
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.07);
- color: var(--text-primary);
+ color: var(--color-text-primary);
border: 1px solid rgba(255,255,255,0.15);
padding: 0.7rem 1rem;
border-radius: 99px;
@@ -180,7 +179,7 @@
.fav-toggle-btn:hover {
background: rgba(255,255,255,0.12);
- border-color: var(--accent);
+ border-color: var(--color-primary);
}
.fav-toggle-btn.active {
@@ -228,7 +227,7 @@
max-width: 250px; /* Adjusted for better fit */
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
- color: var(--text-primary);
+ color: var(--color-text-primary);
padding: 0.75rem 2.8rem 0.75rem 1rem;
border-radius: 99px;
font-size: 0.95rem;
@@ -241,8 +240,8 @@
transition: all 0.25s ease;
}
-.provider-selector:hover { background-color: rgba(255,255,255,0.12); border-color: var(--accent); }
-.provider-selector:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,107,107,0.2); }
+.provider-selector:hover { background-color: rgba(255,255,255,0.12); border-color: var(--color-primary); }
+.provider-selector:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(255,107,107,0.2); }
.provider-selector option {
background: #111;
@@ -262,7 +261,7 @@
align-items: center;
gap: 8px;
background: rgba(255,255,255,0.08);
- color: var(--text-primary);
+ color: var(--color-text-primary);
border: 1px solid rgba(255,255,255,0.15);
padding: 0.75rem 1.1rem;
border-radius: 99px;
diff --git a/views/css/gallery/image.css b/views/css/gallery/image.css
index ee28ecc..6746405 100644
--- a/views/css/gallery/image.css
+++ b/views/css/gallery/image.css
@@ -179,7 +179,6 @@
}
.similar-grid {
-
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1rem;
@@ -187,7 +186,6 @@
}
.similar-card {
-
height: 180px;
border-radius: var(--radius-lg, 16px);
overflow: hidden;
diff --git a/views/css/list.css b/views/css/list.css
index 2421a96..9ba9228 100644
--- a/views/css/list.css
+++ b/views/css/list.css
@@ -1,134 +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;
- --danger: #ef4444;
- --success: #22c55e;
- --bg-amoled: #0a0a0a;
- --bg-field: #0e0e0f;
-}
-
-* { box-sizing: border-box; margin: 0; padding: 0; }
-
-body {
- margin: 0; /* Aseguramos que no haya margen en el body */
- background-color: var(--bg-base);
- color: var(--text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- overflow-x: hidden;
- padding-top: var(--nav-height);
-}
-
-.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: 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;
- 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;
-}
-
-.nav-button:hover { color: white; }
-.nav-button.active {
- background: rgba(255, 255, 255, 0.1);
- color: white;
- backdrop-filter: blur(8px);
- border: 1px solid rgba(255,255,255,0.1);
-}
-
-.search-wrapper {
- position: relative;
- width: 300px;
-}
-
-.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);
- outline: none;
-}
-
-.search-icon {
- position: absolute;
- left: 12px;
- top: 50%;
- transform: translateY(-50%);
- pointer-events: none;
- color: var(--text-secondary);
-}
-
.container {
max-width: 1600px;
margin: 0 auto;
@@ -144,7 +13,7 @@ body {
font-size: 3rem;
font-weight: 900;
margin-bottom: 2rem;
- background: linear-gradient(135deg, var(--accent), #a78bfa);
+ background: linear-gradient(135deg, var(--color-primary), #a78bfa);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -157,7 +26,7 @@ body {
}
.stat-card {
- background: var(--bg-surface);
+ background: var(--color-bg-elevated);
border: 1px solid rgba(255,255,255,0.1);
border-radius: var(--radius-lg);
padding: 1.5rem;
@@ -170,18 +39,18 @@ body {
.stat-card:hover {
transform: translateY(-5px);
- box-shadow: 0 15px 35px var(--accent-glow);
+ box-shadow: 0 15px 35px var(--color-primary-glow);
}
.stat-value {
font-size: 2.5rem;
font-weight: 900;
- color: var(--accent);
+ color: var(--color-primary);
}
.stat-label {
font-size: 0.9rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
font-weight: 600;
}
@@ -191,7 +60,7 @@ body {
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem;
- background: var(--bg-surface);
+ background: var(--color-bg-elevated);
border-radius: var(--radius-md);
border: 1px solid rgba(255,255,255,0.05);
flex-wrap: wrap;
@@ -209,15 +78,15 @@ body {
.filter-group label {
font-size: 0.8rem;
font-weight: 700;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.filter-select {
- background: var(--bg-base);
+ background: var(--color-bg-base);
border: 1px solid rgba(255,255,255,0.1);
- color: var(--text-primary);
+ color: var(--color-text-primary);
padding: 0.7rem 1rem;
border-radius: 8px;
font-family: inherit;
@@ -233,13 +102,13 @@ body {
}
.filter-select:hover {
- border-color: var(--accent);
+ border-color: var(--color-primary);
}
.filter-select:focus {
outline: none;
- border-color: var(--accent);
- box-shadow: 0 0 10px var(--accent-glow);
+ border-color: var(--color-primary);
+ box-shadow: 0 0 10px var(--color-primary-glow);
}
.view-toggle {
@@ -248,9 +117,9 @@ body {
}
.view-btn {
- background: var(--bg-base);
+ background: var(--color-bg-base);
border: 1px solid rgba(255,255,255,0.1);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
padding: 0.7rem;
border-radius: 8px;
cursor: pointer;
@@ -261,13 +130,13 @@ body {
}
.view-btn:hover {
- border-color: var(--accent);
+ border-color: var(--color-primary);
color: white;
}
.view-btn.active {
- background: var(--accent);
- border-color: var(--accent);
+ background: var(--color-primary);
+ border-color: var(--color-primary);
color: white;
}
@@ -284,7 +153,7 @@ body {
width: 50px;
height: 50px;
border: 4px solid rgba(139, 92, 246, 0.1);
- border-top-color: var(--accent);
+ border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@@ -300,7 +169,7 @@ body {
justify-content: center;
padding: 5rem 0;
gap: 1.5rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.empty-state svg {
@@ -309,7 +178,7 @@ body {
.empty-state h2 {
font-size: 1.8rem;
- color: var(--text-primary);
+ color: var(--color-text-primary);
}
.list-grid {
@@ -324,7 +193,7 @@ body {
}
.list-item {
- background: var(--bg-surface-hover);
+ background: var(--color-bg-elevated-hover);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
overflow: hidden;
@@ -337,8 +206,8 @@ body {
.list-item:hover {
transform: translateY(-8px);
- border-color: var(--accent);
- box-shadow: 0 15px 30px var(--accent-glow);
+ border-color: var(--color-primary);
+ box-shadow: 0 15px 30px var(--color-primary-glow);
}
.list-grid.list-view .list-item {
@@ -350,7 +219,7 @@ body {
.list-grid.list-view .list-item:hover {
transform: none;
- box-shadow: 0 4px 20px var(--accent-glow);
+ box-shadow: 0 4px 20px var(--color-primary-glow);
}
.item-poster-link {
@@ -430,19 +299,19 @@ body {
.status-pill {
background: rgba(34, 197, 94, 0.2);
- color: var(--success);
+ color: var(--color-success);
border: 1px solid rgba(34, 197, 94, 0.3);
}
.type-pill {
background: rgba(139, 92, 246, 0.15);
- color: var(--accent);
+ color: var(--color-primary);
border: 1px solid rgba(139, 92, 246, 0.3);
}
.source-pill {
background: rgba(255, 255, 255, 0.1);
- color: var(--text-primary);
+ color: var(--color-text-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
@@ -470,14 +339,14 @@ body {
.progress-bar {
height: 100%;
- background: linear-gradient(90deg, var(--accent), #a78bfa);
+ background: linear-gradient(90deg, var(--color-primary), #a78bfa);
border-radius: 999px;
transition: width 0.3s;
}
.progress-text {
font-size: 0.9rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
display: flex;
justify-content: space-between;
align-items: center;
@@ -522,8 +391,8 @@ body {
}
.edit-icon-btn:hover {
- background: var(--accent);
- border-color: var(--accent);
+ background: var(--color-primary);
+ border-color: var(--color-primary);
}
.list-grid.list-view .edit-icon-btn {
@@ -533,13 +402,13 @@ body {
margin-left: auto;
opacity: 1;
transform: none;
- background: var(--bg-surface);
+ background: var(--color-bg-elevated);
border: 1px solid rgba(255, 255, 255, 0.1);
}
.list-grid.list-view .list-item:hover .edit-icon-btn {
opacity: 1;
- background: var(--accent);
- border-color: var(--accent);
+ background: var(--color-primary);
+ border-color: var(--color-primary);
transform: none;
}
diff --git a/views/css/marketplace.css b/views/css/marketplace.css
index 5337b5c..02d5f7f 100644
--- a/views/css/marketplace.css
+++ b/views/css/marketplace.css
@@ -5,7 +5,7 @@
.marketplace-subtitle {
font-size: 1.1rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.filter-controls {
@@ -16,15 +16,15 @@
.filter-label {
font-size: 0.9rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
font-weight: 600;
}
.filter-select {
padding: 0.6rem 2rem 0.6rem 1.25rem;
border-radius: 999px;
- background: var(--bg-surface-hover);
- color: var(--text-primary);
+ background: var(--color-bg-elevated-hover);
+ color: var(--color-text-primary);
border: 1px solid rgba(255,255,255,0.1);
appearance: none;
font-weight: 600;
@@ -38,8 +38,8 @@
}
.filter-select:hover {
- border-color: var(--accent);
- box-shadow: 0 0 8px var(--accent-glow);
+ border-color: var(--color-primary);
+ box-shadow: 0 0 8px var(--color-primary-glow);
}
.marketplace-grid {
@@ -65,7 +65,7 @@
}
.extension-card:hover {
- background: var(--bg-surface-hover);
+ background: var(--color-bg-elevated-hover);
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0,0,0,0.5);
}
@@ -81,17 +81,17 @@
border-radius: 8px;
object-fit: contain;
margin-bottom: 0.75rem;
- border: 2px solid var(--accent);
- background-color: var(--bg-base);
+ border: 2px solid var(--color-primary);
+ background-color: var(--color-bg-base);
flex-shrink: 0;
- box-shadow: 0 0 10px var(--accent-glow);
+ box-shadow: 0 0 10px var(--color-primary-glow);
}
.extension-name {
font-size: 1.1rem;
font-weight: 700;
margin: 0;
- color: var(--text-primary);
+ color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@@ -135,13 +135,13 @@
}
.btn-install {
- background: var(--accent);
+ background: var(--color-primary);
color: white;
}
.btn-install:hover {
background: #a78bfa;
transform: scale(1.02);
- box-shadow: 0 0 15px var(--accent-glow);
+ box-shadow: 0 0 15px var(--color-primary-glow);
}
.btn-uninstall {
@@ -196,7 +196,7 @@
.section-title {
font-size: 1.8rem;
font-weight: 800;
- color: var(--text-primary);
+ color: var(--color-text-primary);
}
.modal-overlay {
@@ -223,12 +223,12 @@
.modal-content {
background: var(--bg-surface);
- color: var(--text-primary);
+ color: var(--color-text-primary);
padding: 2.5rem;
border-radius: var(--radius-lg);
width: 90%;
max-width: 450px;
- box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--accent-glow);
+ box-shadow: 0 15px 50px rgba(0, 0, 0, 0.8), 0 0 20px var(--color-primary-glow);
border: 1px solid rgba(255,255,255,0.1);
transform: translateY(-50px);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease-in-out;
@@ -244,7 +244,7 @@
font-size: 1.6rem;
font-weight: 800;
margin-top: 0;
- color: var(--accent);
+ color: var(--color-primary);
border-bottom: 2px solid rgba(255,255,255,0.05);
padding-bottom: 0.75rem;
margin-bottom: 1.5rem;
@@ -253,7 +253,7 @@
#modalMessage {
font-size: 1rem;
line-height: 1.6;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
margin-bottom: 2rem;
}
@@ -277,7 +277,7 @@
}
.modal-button.btn-install {
- background: var(--accent);
+ background: var(--color-primary);
color: white;
}
.modal-button.btn-install:hover {
diff --git a/views/css/schedule/schedule.css b/views/css/schedule/schedule.css
index eb41c01..23b010f 100644
--- a/views/css/schedule/schedule.css
+++ b/views/css/schedule/schedule.css
@@ -6,8 +6,8 @@
body {
margin: 0;
- background-color: var(--bg-base);
- color: var(--text-primary);
+ background-color: var(--color-bg-base);
+ color: var(--color-text-primary);
overflow: hidden;
height: 100vh;
display: flex;
diff --git a/views/css/users.css b/views/css/users.css
index ccec9da..02d8625 100644
--- a/views/css/users.css
+++ b/views/css/users.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;
-}
-
-* {
- box-sizing: border-box;
- margin: 0;
- padding: 0;
-}
-
-body {
- background-color: var(--bg-base);
- color: var(--text-primary);
- font-family: 'Inter', system-ui, sans-serif;
- overflow-x: hidden;
- min-height: 100vh;
-}
-
.page-wrapper {
position: relative;
min-height: 100vh;
@@ -52,7 +26,6 @@ body {
z-index: 10;
max-width: 1400px;
width: 100%;
- /* Añadido: Centra el contenido si la cuadrícula no llena el ancho */
margin: 0 auto;
}
@@ -74,19 +47,16 @@ body {
.page-subtitle {
font-size: 1.2rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
font-weight: 500;
}
.users-grid {
display: grid;
- /* Usar auto-fit con un ancho fijo para centrar elementos sueltos */
grid-template-columns: repeat(auto-fit, 260px);
gap: 2rem;
margin-bottom: 3rem;
animation: fadeInUp 0.8s ease;
-
- /* Centrado de la cuadrícula en su contenedor */
justify-content: center;
max-width: 1200px;
margin-left: auto;
@@ -100,13 +70,13 @@ body {
border-radius: var(--radius-lg);
overflow: hidden;
transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
- background: var(--bg-surface);
+ background: var(--color-bg-elevated);
border: 2px solid rgba(255, 255, 255, 0.05);
}
.user-card:hover {
transform: translateY(-12px) scale(1.02);
- border-color: var(--accent);
+ border-color: var(--color-primary);
box-shadow: 0 20px 40px rgba(139, 92, 246, 0.3);
}
@@ -195,7 +165,7 @@ body {
}
.user-config-btn:hover {
- background: var(--accent);
+ background: var(--color-primary);
}
.btn-add-user {
@@ -208,9 +178,9 @@ body {
margin: 0 auto 2rem;
padding: 1.2rem 2rem;
background: rgba(139, 92, 246, 0.1);
- border: 2px dashed var(--accent);
+ border: 2px dashed var(--color-primary);
border-radius: 999px;
- color: var(--accent);
+ color: var(--color-primary);
font-weight: 700;
font-size: 1.1rem;
cursor: pointer;
@@ -220,7 +190,7 @@ body {
.btn-add-user:hover {
background: rgba(139, 92, 246, 0.2);
transform: scale(1.05);
- box-shadow: 0 10px 30px var(--accent-glow);
+ box-shadow: 0 10px 30px var(--color-primary-glow);
}
.btn-manage {
@@ -252,7 +222,7 @@ body {
.modal-content {
position: relative;
z-index: 10;
- background: var(--bg-surface);
+ background: var(--color-bg-elevated);
border-radius: var(--radius-lg);
padding: 2rem;
max-width: 500px;
@@ -282,7 +252,7 @@ body {
.modal-close {
background: transparent;
border: none;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
@@ -302,7 +272,7 @@ body {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.form-group input[type="text"] {
@@ -319,8 +289,8 @@ body {
.form-group input[type="text"]:focus {
background: rgba(255, 255, 255, 0.08);
- 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);
outline: none;
}
@@ -335,12 +305,12 @@ body {
}
.avatar-upload-area:hover {
- border-color: var(--accent);
+ border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.05);
}
.avatar-upload-area.dragover {
- border-color: var(--accent);
+ border-color: var(--color-primary);
background: rgba(139, 92, 246, 0.1);
}
@@ -370,13 +340,13 @@ body {
.avatar-upload-text {
font-size: 0.9rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
margin-bottom: 0.5rem;
}
.avatar-upload-hint {
font-size: 0.75rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
opacity: 0.7;
}
@@ -403,7 +373,7 @@ input[type="file"] {
}
.btn-primary {
- background: var(--accent);
+ background: var(--color-primary);
color: white;
}
@@ -419,7 +389,7 @@ input[type="file"] {
.btn-secondary {
background: rgba(255, 255, 255, 0.05);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
border: 1px solid rgba(255, 255, 255, 0.1);
}
@@ -482,7 +452,7 @@ input[type="file"] {
.btn-action.cancel {
background: rgba(255, 255, 255, 0.05);
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.btn-action.cancel:hover {
@@ -526,7 +496,7 @@ input[type="file"] {
.anilist-info p {
font-size: 0.85rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
}
.btn-disconnect {
@@ -583,7 +553,7 @@ input[type="file"] {
.empty-text {
font-size: 1.1rem;
- color: var(--text-secondary);
+ color: var(--color-text-secondary);
margin-bottom: 2rem;
}
diff --git a/views/gallery/gallery.html b/views/gallery/gallery.html
index 88f97af..00f710e 100644
--- a/views/gallery/gallery.html
+++ b/views/gallery/gallery.html
@@ -8,11 +8,11 @@
-
+
-
+
diff --git a/views/gallery/image.html b/views/gallery/image.html
index f91214e..ca700fb 100644
--- a/views/gallery/image.html
+++ b/views/gallery/image.html
@@ -7,11 +7,11 @@
-
+
-
+
diff --git a/views/list.html b/views/list.html
index 5b0d89e..aa4d9a8 100644
--- a/views/list.html
+++ b/views/list.html
@@ -9,8 +9,8 @@
-
-
+
+
@@ -54,13 +54,13 @@
+
-
+
+
-
+
diff --git a/views/marketplace.html b/views/marketplace.html
index f65c916..69933c6 100644
--- a/views/marketplace.html
+++ b/views/marketplace.html
@@ -7,9 +7,9 @@
-
+
-
+
@@ -53,13 +53,13 @@
+
-
+
+
-
+
diff --git a/views/schedule.html b/views/schedule.html
index 959db79..3582fe7 100644
--- a/views/schedule.html
+++ b/views/schedule.html
@@ -11,8 +11,8 @@
-
-
+
+
@@ -46,9 +46,8 @@
-
+
-
+