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

enhanced server settings section

Browse Source
This commit is contained in:
lenafx
2026-01-01 17:53:50 +01:00
parent d7ab08c022
commit 01ae038a8b
21 changed files with 540 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
docker/src/api/config/config.controller.ts
View File

@@ -1,43 +1,53 @@
import {FastifyReply, FastifyRequest} from 'fastify';
import {getConfig, setConfig} from '../../shared/config';
import { FastifyReply, FastifyRequest } from 'fastify';
import { getConfig, setConfig } from '../../shared/config';
export async function getFullConfig(req: FastifyRequest, reply: FastifyReply) {
try {
return getConfig();
} catch (err) {
const { values, schema } = getConfig();
return { values, schema };
} catch {
return { error: "Error loading config" };
}
}
export async function getConfigSection(req: FastifyRequest<{ Params: { section: string } }>, reply: FastifyReply) {
export async function getConfigSection(
req: FastifyRequest<{ Params: { section: string } }>,
reply: FastifyReply
) {
try {
const { section } = req.params;
const config = getConfig();
const { values } = getConfig();
if (config[section] === undefined) {
if (values[section] === undefined) {
return { error: "Section not found" };
}
return { [section]: config[section] };
} catch (err) {
return { [section]: values[section] };
} catch {
return { error: "Error loading config section" };
}
}
export async function updateConfig(req: FastifyRequest<{ Body: any }>, reply: FastifyReply) {
export async function updateConfig(
req: FastifyRequest<{ Body: any }>,
reply: FastifyReply
) {
try {
return setConfig(req.body);
} catch (err) {
return setConfig(req.body); // schema nunca se toca
} catch {
return { error: "Error updating config" };
}
}
export async function updateConfigSection(req: FastifyRequest<{ Params: { section: string }, Body: any }>, reply: FastifyReply) {
export async function updateConfigSection(
req: FastifyRequest<{ Params: { section: string }, Body: any }>,
reply: FastifyReply
) {
try {
const { section } = req.params;
const updatedConfig = setConfig({ [section]: req.body });
return { [section]: updatedConfig[section] };
} catch (err) {
const updatedValues = setConfig({ [section]: req.body });
return { [section]: updatedValues[section] };
} catch {
return { error: "Error updating config section" };
}
}

4
docker/src/api/local/download.service.ts
View File

@@ -70,8 +70,8 @@ async function getOrCreateEntry(
throw new Error('METADATA_NOT_FOUND');
}
const config = loadConfig();
const basePath = config.library?.[type];
const { values } = loadConfig();
const basePath = values.library?.[type];
if (!basePath) {
throw new Error(`NO_LIBRARY_PATH_FOR_${type.toUpperCase()}`);

6
docker/src/api/local/local.service.ts
View File

@@ -127,9 +127,9 @@ export async function resolveEntryMetadata(entry: any, type: string) {
}
export async function performLibraryScan(mode: 'full' | 'incremental' = 'incremental') {
const config = loadConfig();
const { values } = loadConfig();
if (!config.library) {
if (!values.library) {
throw new Error('NO_LIBRARY_CONFIGURED');
}
@@ -138,7 +138,7 @@ export async function performLibraryScan(mode: 'full' | 'incremental' = 'increme
await run(`DELETE FROM local_entries`, [], 'local_library');
}
for (const [type, basePath] of Object.entries(config.library)) {
for (const [type, basePath] of Object.entries(values.library)) {
if (!basePath || !fs.existsSync(<PathLike>basePath)) continue;
const dirs = fs.readdirSync(<string>basePath, { withFileTypes: true }).filter(d => d.isDirectory());

169
docker/src/scripts/settings.js
View File

@@ -1,5 +1,6 @@
const API_BASE = '/api/config';
let currentConfig = {};
let currentSchema = {};
let activeSection = '';
let modal, navContainer, formContent, form;
@@ -9,96 +10,74 @@ window.toggleSettingsModal = async (forceClose = false) => {
formContent = document.getElementById('config-section-content');
form = document.getElementById('config-form');
if (!modal) {
console.error('Modal not found');
return;
}
if (!modal) return;
if (forceClose) {
modal.classList.add('hidden');
} else {
const isHidden = modal.classList.contains('hidden');
if (isHidden) {
// Abrir modal
modal.classList.remove('hidden');
await loadSettings();
} else {
// Cerrar modal
modal.classList.add('hidden');
}
}
};
async function loadSettings() {
if (!formContent) {
console.error('Form content not found');
return;
}
if (!formContent) return;
// Mostrar loading
// Loading State
formContent.innerHTML = `
<div class="skeleton-loader">
<div class="skeleton title-skeleton"></div>
<div class="skeleton text-skeleton"></div>
<div class="skeleton text-skeleton"></div>
<div class="skeleton field-skeleton"></div>
<div class="skeleton field-skeleton"></div>
</div>
`;
try {
const res = await fetch(API_BASE);
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
const data = await res.json();
if (data.error) throw new Error(data.error);
currentConfig = data;
// --- CORRECCIÓN AQUI ---
// Tu JSON devuelve "values", el código original buscaba "config"
currentConfig = data.values || data.config || data;
currentSchema = data.schema || {};
renderNav();
// Seleccionar la primera sección si no hay ninguna activa
if (!activeSection || !currentConfig[activeSection]) {
activeSection = Object.keys(currentConfig)[0];
}
switchSection(activeSection);
} catch (err) {
console.error('Error loading settings:', err);
formContent.innerHTML = `
<div style="padding: 2rem; text-align: center;">
<p style="color: var(--color-danger); margin-bottom: 1rem;">Failed to load settings</p>
<p style="color: var(--color-text-muted); font-size: 0.9rem;">${err.message}</p>
<p style="color: #ef4444; margin-bottom: 1rem;">Failed to load settings</p>
<p style="color: #888; font-size: 0.9rem;">${err.message}</p>
</div>
`;
}
}
function renderNav() {
if (!navContainer) return;
navContainer.innerHTML = '';
Object.keys(currentConfig).forEach(section => {
const btn = document.createElement('div');
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
btn.textContent = section;
btn.onclick = () => switchSection(section);
navContainer.appendChild(btn);
});
}
function switchSection(section) {
if (!currentConfig[section]) return;
activeSection = section;
renderNav();
const sectionData = currentConfig[section];
const sectionSchema = currentSchema[section] || {};
formContent.innerHTML = `
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize;">
<h2 class="section-title" style="margin-bottom: 2rem; text-transform: capitalize; font-size: 1.8rem;">
${section.replace(/_/g, ' ')}
</h2>
`;
@@ -109,21 +88,34 @@ function switchSection(section) {
const isBool = typeof value === 'boolean';
const inputId = `input-${section}-${key}`;
const label = key.replace(/_/g, ' ');
const labelText = key.replace(/_/g, ' ');
// Obtener descripción
const description = sectionSchema[key]?.description || '';
const descHtml = description
? `<p class="config-description">${description}</p>`
: '';
if (isBool) {
group.innerHTML = `
<div style="display: flex; align-items: center; gap: 0.5rem;">
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}>
<label for="${inputId}" style="margin: 0; cursor: pointer;">${label}</label>
</div>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="display: flex; align-items: center; gap: 0.8rem;">
<input type="checkbox" id="${inputId}" name="${key}" ${value ? 'checked' : ''}
style="width: 20px; height: 20px; accent-color: var(--accent);">
<label for="${inputId}" style="margin: 0; cursor: pointer; font-size: 1rem;">${labelText}</label>
</div>
${descHtml} </div>
`;
} else {
// --- CAMBIO PRINCIPAL AQUI ---
// Movimos ${descHtml} para que esté DESPUÉS del input
group.innerHTML = `
<label for="${inputId}">${label}</label>
<label for="${inputId}">${labelText}</label>
<input class="config-input" id="${inputId}" name="${key}"
type="${typeof value === 'number' ? 'number' : 'text'}"
value="${value}">
value="${value || ''}"
placeholder="Not set">
${descHtml}
`;
}
@@ -131,9 +123,27 @@ function switchSection(section) {
});
}
// Setup form submit handler
function renderNav() {
if (!navContainer) return;
navContainer.innerHTML = '';
Object.keys(currentConfig).forEach(section => {
const btn = document.createElement('div');
btn.className = `nav-item ${section === activeSection ? 'active' : ''}`;
// Icono opcional según la sección (puedes personalizar esto)
let icon = '';
if(section === 'library') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"></path><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"></path></svg>';
if(section === 'paths') icon = '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><folder></folder><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>';
btn.innerHTML = `${icon} ${section}`;
btn.onclick = () => switchSection(section);
navContainer.appendChild(btn);
});
}
// Handler de guardado
document.addEventListener('DOMContentLoaded', () => {
// Usar delegación de eventos ya que el form se carga dinámicamente
document.addEventListener('submit', async (e) => {
if (e.target.id === 'config-form') {
e.preventDefault();
@@ -146,8 +156,9 @@ async function saveSettings() {
if (!form || !activeSection) return;
const updatedData = {};
const sectionConfig = currentConfig[activeSection];
Object.keys(currentConfig[activeSection]).forEach(key => {
Object.keys(sectionConfig).forEach(key => {
const input = form.elements[key];
if (!input) return;
@@ -168,51 +179,35 @@ async function saveSettings() {
});
if (res.ok) {
currentConfig[activeSection] = updatedData;
// Mostrar notificación de éxito
const notification = document.createElement('div');
notification.style.cssText = `
position: fixed;
top: 20px;
right: 20px;
background: var(--color-success, #10b981);
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
z-index: 10000;
animation: slideIn 0.3s ease-out;
`;
notification.textContent = 'Settings saved successfully!';
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease-out';
setTimeout(() => notification.remove(), 300);
}, 2000);
currentConfig[activeSection] = updatedData; // Actualizamos localmente
showNotification('Settings saved successfully!');
} else {
throw new Error('Failed to save settings');
}
} catch (err) {
console.error('Error saving settings:', err);
alert('Error saving settings: ' + err.message);
console.error(err);
showNotification('Error saving settings', true);
}
}
// Añadir estilos para las animaciones (solo si no existen)
if (!document.getElementById('settings-animations')) {
const animationStyles = document.createElement('style');
animationStyles.id = 'settings-animations';
animationStyles.textContent = `
@keyframes slideIn {
from { transform: translateX(400px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOut {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(400px); opacity: 0; }
}
function showNotification(msg, isError = false) {
const notification = document.createElement('div');
const bg = isError ? '#ef4444' : '#10b981';
notification.style.cssText = `
position: fixed; top: 20px; right: 20px;
background: ${bg}; color: white;
padding: 1rem 1.5rem; border-radius: 8px; font-weight: 600;
box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 20000;
animation: slideIn 0.3s ease-out; display: flex; align-items: center; gap: 10px;
`;
document.head.appendChild(animationStyles);
notification.innerHTML = isError
? `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg> ${msg}`
: `<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg> ${msg}`;
document.body.appendChild(notification);
setTimeout(() => {
notification.style.animation = 'slideOut 0.3s ease-out';
setTimeout(() => notification.remove(), 300);
}, 3000);
}

23
docker/src/shared/config.js
View File

@@ -11,6 +11,22 @@ const DEFAULT_CONFIG = {
anime: null,
manga: null,
novels: null
},
paths: {
mpv: null,
ffmpeg: null
}
};
export const CONFIG_SCHEMA = {
library: {
anime: { description: "Path where anime is stored" },
manga: { description: "Path where manga is stored" },
novels: { description: "Path where novels are stored" }
},
paths: {
mpv: { description: "Required to open anime episodes in mpv on desktop version." },
ffmpeg: { description: "Required for downloading anime episodes." }
}
};
@@ -31,7 +47,12 @@ function ensureConfigFile() {
export function getConfig() {
ensureConfigFile();
const raw = fs.readFileSync(CONFIG_PATH, 'utf8');
return yaml.load(raw) || DEFAULT_CONFIG;
const loaded = yaml.load(raw) || {};
return {
values: deepMerge(structuredClone(DEFAULT_CONFIG), loaded),
schema: CONFIG_SCHEMA
};
}
export function setConfig(partialConfig) {

2
docker/views/anime/animes.html
View File

@@ -9,7 +9,6 @@
<link rel="stylesheet" href="/views/css/components/hero.css">
<link rel="stylesheet" href="/views/css/components/anilist-modal.css">
<link rel="stylesheet" href="/views/css/components/updateNotifier.css">
<link rel="stylesheet" href="/views/css/components/local-library.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
</head>
<body>
@@ -119,7 +118,6 @@
<script src="/src/scripts/utils/youtube-player-utils.js"></script>
<script src="/src/scripts/anime/animes.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>

1
docker/views/books/books.html
View File

@@ -89,5 +89,6 @@
<script src="/src/scripts/books/books.js"></script>
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>
</html>

230
docker/views/components/settings-modal.html
View File

@@ -42,16 +42,15 @@
</div>
<style>
/* --- AMOLED THEME VARIABLES --- */
/* --- THEME VARIABLES (Heredadas y adaptadas de anime.css) --- */
:root {
--amoled-black: #000000;
--amoled-surface: #080808;
--amoled-field: #0e0e0e;
--amoled-border: rgba(255, 255, 255, 0.08);
--accent-purple: #8b5cf6;
--accent-glow: rgba(139, 92, 246, 0.15);
--text-main: #ffffff;
--text-dim: #a1a1aa;
--modal-bg: #0b0b0b;
--modal-sidebar: rgba(255, 255, 255, 0.02);
--modal-border: rgba(255, 255, 255, 0.08);
--input-bg: rgba(255, 255, 255, 0.04);
--accent: #8b5cf6; /* Tu morado principal */
--text-primary: #ffffff;
--text-secondary: #a1a1aa;
}
/* --- MODAL BASE --- */
@@ -63,6 +62,7 @@
align-items: center;
justify-content: center;
padding: 20px;
font-family: system-ui, -apple-system, sans-serif; /* Coherencia con anime.css */
}
.modal.hidden { display: none !important; }
@@ -70,55 +70,58 @@
.modal-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(12px);
background: rgba(0, 0, 0, 0.85); /* Un poco menos opaco para profundidad */
backdrop-filter: blur(8px);
z-index: -1;
animation: fadeIn 0.3s ease;
}
.modal-content {
position: relative;
display: flex;
flex-direction: row; /* Horizontal layout */
width: 95%;
max-width: 1200px; /* Increased size */
height: 85vh;
background: var(--amoled-black);
border: var(--amoled-border);
border-radius: 28px;
flex-direction: row;
width: 100%;
max-width: 1100px;
height: 80vh;
background: var(--modal-bg);
border: 1px solid var(--modal-border);
border-radius: 16px; /* Bordes menos exagerados, más elegantes */
overflow: hidden;
box-shadow: 0 0 0 1px var(--amoled-border), 0 24px 60px rgba(0,0,0,0.8);
animation: modalScaleUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 40px 80px rgba(0,0,0,0.6);
animation: modalSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
/* --- SIDEBAR --- */
.modal-sidebar {
width: 280px;
background: var(--amoled-surface);
border-right: var(--amoled-border);
width: 260px;
background: var(--modal-sidebar);
border-right: 1px solid var(--modal-border);
display: flex;
flex-direction: column;
padding: 2rem;
padding: 2rem 1.5rem;
flex-shrink: 0;
}
.sidebar-header { margin-bottom: 2rem; }
.sidebar-title {
font-size: 1.4rem;
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 2.5rem;
color: var(--text-main);
letter-spacing: -0.02em;
color: var(--text-primary);
margin: 0;
letter-spacing: -0.03em;
}
.nav-list { flex: 1; }
.nav-list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.nav-item {
padding: 12px 16px;
border-radius: 14px;
padding: 10px 14px;
border-radius: 8px;
cursor: pointer;
color: var(--text-dim);
color: var(--text-secondary);
transition: all 0.2s ease;
margin-bottom: 6px;
font-weight: 500;
font-weight: 600;
font-size: 0.95rem;
display: flex;
align-items: center;
gap: 12px;
@@ -127,22 +130,23 @@
.nav-item:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--text-main);
color: var(--text-primary);
}
.nav-item.active {
background: var(--accent-glow);
color: var(--accent-purple);
box-shadow: inset 3px 0 0 var(--accent-purple);
background: var(--accent);
color: white;
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.25); /* Glow sutil */
}
/* --- MAIN CONTENT & DYNAMIC INPUTS --- */
/* --- MAIN CONTENT area --- */
.modal-main {
flex: 1;
display: flex;
flex-direction: column;
background: var(--amoled-black);
background: transparent;
min-width: 0;
position: relative;
}
.config-wrapper {
@@ -153,52 +157,54 @@
.section-container {
flex: 1;
padding: 3.5rem;
padding: 3rem;
overflow-y: auto;
/* Custom Scrollbar sutil */
scrollbar-width: thin;
scrollbar-color: #222 transparent;
scrollbar-color: #333 transparent;
}
/* Styles for the injected section content */
/* --- INPUTS & FORMS (Estilo WaifuBoards/Anime) --- */
.config-group {
margin-bottom: 2.5rem;
animation: fadeInSection 0.4s ease-out;
margin-bottom: 2rem;
animation: fadeInSection 0.3s ease-out;
}
.config-group label {
display: block;
font-size: 0.75rem;
color: var(--accent-purple);
margin-bottom: 0.8rem;
letter-spacing: 0.05em;
font-weight: 800;
font-size: 0.8rem;
color: var(--text-secondary);
margin-bottom: 0.6rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.config-input {
width: 100%;
padding: 1rem 1.2rem;
background: var(--amoled-field);
border: 1px solid #1a1a1a;
border-radius: 14px;
color: #fff;
padding: 0.9rem 1rem;
background: var(--input-bg);
border: 1px solid var(--modal-border);
border-radius: 8px;
color: var(--text-primary);
font-size: 1rem;
transition: all 0.25s ease;
font-family: inherit;
transition: all 0.2s ease;
}
.config-input:focus {
outline: none;
border-color: var(--accent-purple);
background: #121212;
box-shadow: 0 0 0 4px var(--accent-glow);
border-color: var(--accent);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 1px var(--accent);
}
/* --- FOOTER --- */
/* --- FOOTER ACTION BAR --- */
.modal-footer-sticky {
padding: 1.5rem 3.5rem;
background: rgba(0, 0, 0, 0.8);
padding: 1.2rem 3rem;
background: rgba(11, 11, 11, 0.8); /* Glass effect */
backdrop-filter: blur(10px);
border-top: var(--amoled-border);
border-top: 1px solid var(--modal-border);
display: flex;
align-items: center;
justify-content: space-between;
@@ -206,32 +212,34 @@
.footer-hint {
font-size: 0.85rem;
color: var(--text-dim);
color: var(--text-secondary);
font-weight: 500;
}
/* --- BUTTONS --- */
.btn-primary {
padding: 0.8rem 2.2rem;
background: #ffffff;
color: #000000;
padding: 0.7rem 2rem;
background: white; /* Estilo 'btn-watch' de anime.css */
color: black;
border: none;
border-radius: 100px;
font-weight: 700;
border-radius: 6px;
font-weight: 800;
font-size: 0.95rem;
cursor: pointer;
transition: transform 0.2s ease;
transition: transform 0.2s ease, filter 0.2s;
}
.btn-primary:hover {
transform: translateY(-2px);
background: #f0f0f0;
transform: scale(1.02);
filter: brightness(0.9);
}
.btn-exit {
background: #111;
border: 1px solid #222;
color: #ef4444;
background: transparent;
border: 1px solid var(--modal-border);
color: #ef4444; /* Rojo error sutil */
padding: 10px;
border-radius: 12px;
border-radius: 8px;
width: 100%;
cursor: pointer;
display: flex;
@@ -240,39 +248,63 @@
gap: 8px;
font-weight: 600;
margin-top: auto;
transition: background 0.2s;
}
/* --- ANIMATIONS & SKELETON --- */
@keyframes modalScaleUp {
from { opacity: 0; transform: scale(0.97) translateY(10px); }
.btn-exit:hover {
background: rgba(239, 68, 68, 0.1);
border-color: #ef4444;
}
/* --- SKELETON & ANIMATIONS --- */
@keyframes modalSlideUp {
from { opacity: 0; transform: scale(0.98) translateY(15px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes fadeInSection {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInSection { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
.skeleton-loader { display: flex; flex-direction: column; gap: 2rem; }
.skeleton-loader { display: flex; flex-direction: column; gap: 1.5rem; }
.skeleton {
background: linear-gradient(90deg, #080808 25%, #121212 50%, #080808 75%);
background: linear-gradient(90deg, #111 25%, #1a1a1a 50%, #111 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: 12px;
animation: shimmer 2s infinite;
border-radius: 6px;
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.title-skeleton { height: 35px; width: 40%; }
.field-skeleton { height: 55px; width: 100%; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* Responsive Mobile View */
.title-skeleton { height: 28px; width: 30%; margin-bottom: 1rem; }
.field-skeleton { height: 48px; width: 100%; }
/* --- RESPONSIVE --- */
@media (max-width: 850px) {
.modal-content { flex-direction: column; height: 95vh; width: 100vw; border-radius: 0; }
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: var(--amoled-border); padding: 1rem; }
.sidebar-title { margin-bottom: 1rem; font-size: 1.2rem; }
.section-container { padding: 2rem; }
.modal-footer-sticky { padding: 1.5rem 2rem; }
.modal-content { flex-direction: column; height: 100%; width: 100%; border-radius: 0; border: none; }
.modal-sidebar { width: 100%; height: auto; border-right: none; border-bottom: 1px solid var(--modal-border); padding: 1.5rem; }
.sidebar-footer { display: none; } /* Ocultar btn salir sidebar en movil */
.section-container { padding: 1.5rem; }
.modal-footer-sticky { padding: 1rem 1.5rem; }
/* Añadir un botón de cierre flotante en móvil si fuera necesario,
pero el diseño actual debería funcionar bien con scroll */
}
/* --- Estilo para la nueva descripción --- */
.config-description {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.5); /* Gris sutil */
/* Ajustes para posición inferior */
margin-top: 0.5rem; /* Espacio entre el input y la descripción */
margin-bottom: 0; /* Ya no necesitamos margen abajo */
line-height: 1.4;
font-weight: 400;
}
/* Ajuste para inputs vacíos (placeholder) */
.config-input::placeholder {
color: rgba(255, 255, 255, 0.2);
font-style: italic;
}
</style>

1
docker/views/marketplace.html
View File

@@ -57,5 +57,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/marketplace.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>
</html>

1
docker/views/profile.html
View File

@@ -194,5 +194,6 @@
<script src="/src/scripts/utils/notification-utils.js"></script>
<script src="/src/scripts/utils/list-modal-manager.js"></script>
<script src="/src/scripts/profile.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>
</html>

1
docker/views/schedule.html
View File

@@ -78,5 +78,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/schedule/schedule.js"></script>
<script src="/src/scripts/auth-guard.js"></script>
<script src="/src/scripts/settings.js"></script>
</body>
</html>