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

finished optimizing css

Browse Source
This commit is contained in:
lenafx
2025-12-09 16:51:32 +01:00
parent 4d3e258b06
commit bc1cf7b5e9
21 changed files with 130 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
views/anime/anime.html
View File

@@ -9,9 +9,9 @@
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/anime/anime.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
</head>
<body>
<div id="titlebar">

12
views/anime/animes.html
View File

@@ -7,8 +7,8 @@
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head>
@@ -54,13 +54,13 @@
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>
@@ -89,7 +89,7 @@
<div class="hero-wrapper">
<div class="hero-background">
<img id="hero-bg-media" src="/placeholder.svg" alt="">
<img id="hero-bg-media" alt="">
<div id="player" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120vw; height: 120vh; pointer-events: none; opacity: 0; transition: opacity 1s;"></div>
</div>
<div class="hero-vignette"></div>
@@ -97,7 +97,7 @@
<div class="hero-content">
<div class="hero-poster-card">
<div class="skeleton poster-skeleton" id="hero-poster-skeleton"></div>
<img id="hero-poster" src="/placeholder.svg" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
<img id="hero-poster" alt="" style="display: none;" onload="this.style.display='block'; document.getElementById('hero-poster-skeleton').style.display='none'">
</div>
<div class="hero-text">
<div id="hero-loading-ui">

4
views/anime/watch.html
View File

@@ -6,12 +6,12 @@
<title>WaifuBoard Watch</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/anime/watch.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="icon" href="/public/assets/waifuboards.ico">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>

4
views/books/book.html
View File

@@ -9,8 +9,8 @@
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/books/book.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>

8
views/books/books.html
View File

@@ -7,8 +7,8 @@
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
<script src="/src/scripts/books/books.js" defer></script>
@@ -51,13 +51,13 @@
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>

4
views/books/read.html
View File

@@ -6,9 +6,9 @@
<title>Reader</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/books/reader.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>

14
views/css/books/reader.css
View File

@@ -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 {

6
views/css/titlebar.css → views/css/components/titlebar.css
View File

@@ -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;

14
views/css/updateNotifier.css → views/css/components/updateNotifier.css
View File

@@ -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);
}

21
views/css/gallery/gallery.css
View File

@@ -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;

2
views/css/gallery/image.css
View File

@@ -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;

199
views/css/list.css
View File

@@ -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;
}

38
views/css/marketplace.css
View File

@@ -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 {

4
views/css/schedule/schedule.css
View File

@@ -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;

72
views/css/users.css
View File

@@ -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;
}

4
views/gallery/gallery.html
View File

@@ -8,11 +8,11 @@
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>

4
views/gallery/image.html
View File

@@ -7,11 +7,11 @@
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="stylesheet" href="/views/css/gallery/image.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>

8
views/list.html
View File

@@ -9,8 +9,8 @@
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/list.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
@@ -54,13 +54,13 @@
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>

8
views/marketplace.html
View File

@@ -7,9 +7,9 @@
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/marketplace.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
@@ -53,13 +53,13 @@
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>

11
views/schedule.html
View File

@@ -11,8 +11,8 @@
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
<link rel="stylesheet" href="/views/css/components/navbar.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
@@ -46,9 +46,8 @@
<button class="nav-button" onclick="window.location.href='/marketplace'">Marketplace</button>
</div>
<!-- Mejorado el contenedor de usuario con dropdown más completo -->
<div class="nav-right">
<div class="search-wrapper">
<div class="search-wrapper" style="visibility: hidden;">
<svg class="search-icon" width="18" height="18" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
<circle cx="11" cy="11" r="8"/>
<path d="M21 21l-4.35-4.35"/>
@@ -59,13 +58,13 @@
<div class="nav-user" id="nav-user" style="display:none;">
<div class="user-avatar-btn">
<img id="nav-avatar" src="/placeholder.svg" alt="avatar">
<img id="nav-avatar" src="/public/assets/waifuboards.ico" alt="avatar">
<div class="online-indicator"></div>
</div>
<div class="nav-dropdown" id="nav-dropdown">
<div class="dropdown-header">
<img id="dropdown-avatar" src="/placeholder.svg" alt="avatar" class="dropdown-avatar">
<img id="dropdown-avatar" src="/public/assets/waifuboards.ico" alt="avatar" class="dropdown-avatar">
<div class="dropdown-user-info">
<div class="dropdown-username" id="nav-username"></div>
</div>

5
views/users.html
View File

@@ -4,9 +4,8 @@
<meta charset="UTF-8">
<title>WaifuBoard - Users</title>
<link rel="stylesheet" href="/views/css/globals.css">
<link rel="stylesheet" href="/views/css/anime/animes.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/titlebar.css">
<link rel="stylesheet" href="/views/css/users.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>