Inna
6337de73ad
La página de cuenta no se parecía a la de Django (oro descuadrado, info como
tabla, herramientas en grupos abiertos). Reescrita para replicar el
partials/my-account.html + isla AccountDashboard de Django:
- Información en DOS fieldsets (.account-fieldset): «Datos básicos» (cuentas,
correos, fecha de registro, IPs) y «Estado de la cuenta» (insignia de rango
nw-rank + PD/PV/créditos/token + baneo + reclutamiento). lib/account.ts
ampliado para traer reg_mail/email/joindate/last_ip/last_attempt_ip, estado
de baneo (account_banned) y nº de reclutados.
- Personajes en char-box con el markup exacto de Django: retrato flotante +
oro EN LÍNEA (monedas width=10). Antes las monedas salían a tamaño nativo
(descuadre) y apiladas.
- Herramientas en paneles plegables (acordeón) «OPCIONES DE CUENTA / OPCIONES
DE PERSONAJE» como Django (componente cliente AccountTools), con los
servicios ya implementados en Next y las etiquetas/descripciones exactas.
- globals.css: revertir otro reset del preflight de Tailwind — img{display:
block} apilaba verticalmente los iconos en línea (monedas); el tema los usa
inline como la web Django. Volvemos a img{display:inline}.
Verificado con Playwright (login real con cuenta de prueba + captura): info,
personajes con oro en línea y paneles que expanden con sus iconos; home sin
regresión por el cambio de img.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
147 lines
4.2 KiB
CSS
147 lines
4.2 KiB
CSS
@import 'tailwindcss';
|
|
|
|
/* Tokens de diseño NovaWoW (paleta oscura fantasía WotLK). */
|
|
@theme {
|
|
--color-nw-bg: #140d08;
|
|
--color-nw-panel: #241812;
|
|
--color-nw-panel-2: #2c1e14;
|
|
--color-nw-border: #4a3320;
|
|
--color-nw-gold: #d79602;
|
|
--color-nw-gold-light: #f0b93f;
|
|
--color-nw-text: #e8dccb;
|
|
--color-nw-muted: #b1997f;
|
|
}
|
|
|
|
:root {
|
|
color-scheme: dark;
|
|
}
|
|
|
|
/* El fondo, la tipografía (FuturaEF-Book) y los estilos base del <body>
|
|
los controla el tema real nw-ryu (novawow-style.css), cargado en el <head>
|
|
del layout. No los redefinimos aquí para que el tema Django quede idéntico. */
|
|
|
|
/* El tema nw-ryu se diseñó para los defaults del navegador (igual que la web
|
|
Django, que NO usa Tailwind). El preflight de Tailwind rompe dos cosas:
|
|
1) box-sizing:border-box hace que la height fija de los inputs incluya el
|
|
padding → campos aplastados. Volvemos a content-box en los inputs/select
|
|
que estiliza el tema (los de .admin-form conservan border-box por su
|
|
mayor especificidad).
|
|
2) border-collapse:collapse anula el border-spacing de las tablas del tema
|
|
(middle-center-table, etc.) → filas pegadas. Volvemos a separate.
|
|
Reglas SIN capa: ganan al preflight de Tailwind (que va en @layer base). */
|
|
input[type='text'],
|
|
input[type='email'],
|
|
input[type='password'],
|
|
input[type='number'],
|
|
select {
|
|
box-sizing: content-box;
|
|
}
|
|
table {
|
|
border-collapse: separate;
|
|
}
|
|
/* 3) Tailwind pone img{display:block}, lo que apila verticalmente los iconos
|
|
en línea (monedas de oro/plata/cobre, iconos inline del tema). El tema los
|
|
usa inline (como la web Django). Volvemos a inline; las imágenes que deban
|
|
ser bloque ya lo fijan por su propia clase (.img-med-icon, etc., mayor
|
|
especificidad). */
|
|
img {
|
|
display: inline;
|
|
}
|
|
|
|
/* Componentes reutilizables */
|
|
@layer components {
|
|
.nw-btn {
|
|
@apply inline-flex items-center justify-center rounded-md bg-nw-gold px-5 py-2.5 font-semibold text-[#1b120b] transition hover:bg-nw-gold-light;
|
|
}
|
|
.nw-btn-ghost {
|
|
@apply inline-flex items-center justify-center rounded-md border border-nw-border px-5 py-2.5 font-semibold text-nw-text transition hover:border-nw-gold hover:text-nw-gold-light;
|
|
}
|
|
.nw-card {
|
|
@apply rounded-xl border border-nw-border/70 bg-nw-panel/80 p-5 shadow-lg shadow-black/30 backdrop-blur;
|
|
}
|
|
.nw-heading {
|
|
@apply bg-gradient-to-b from-nw-gold-light to-nw-gold bg-clip-text font-extrabold tracking-wide text-transparent;
|
|
}
|
|
.nw-input {
|
|
@apply w-full rounded-md border border-nw-border bg-nw-panel-2 px-3 py-2 text-nw-text outline-none transition focus:border-nw-gold;
|
|
}
|
|
}
|
|
|
|
/* Contenido HTML de noticias/foro */
|
|
.prose :where(a) {
|
|
color: #7cc0f7;
|
|
}
|
|
|
|
/* Foro: textarea con el look del tema real (el tema nw-ryu no estiliza textarea base). */
|
|
textarea {
|
|
width: 100%;
|
|
background-color: #000;
|
|
border: 2px solid #352e2b;
|
|
color: #fff;
|
|
font-family: 'FuturaEF-Book';
|
|
font-size: 17px;
|
|
padding: 8px;
|
|
transition: 0.5s;
|
|
}
|
|
textarea:focus {
|
|
border-color: #948474;
|
|
}
|
|
|
|
/* Foro: barra de herramientas del editor y paginación (colores del tema). */
|
|
.nw-tool-btn {
|
|
border: 2px solid #352e2b;
|
|
background: hsla(0, 0%, 100%, 0.05);
|
|
color: #ebdec2;
|
|
padding: 4px 10px;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
.nw-tool-btn:hover {
|
|
background: hsla(0, 0%, 100%, 0.1);
|
|
color: #fff;
|
|
}
|
|
.nw-page-link {
|
|
display: inline-block;
|
|
min-width: 34px;
|
|
padding: 4px 8px;
|
|
margin: 0 2px;
|
|
border: 2px solid #352e2b;
|
|
color: #2471a9;
|
|
}
|
|
.nw-page-link:hover {
|
|
color: #fff;
|
|
}
|
|
.nw-page-current {
|
|
border-color: #b17c02;
|
|
color: #d79602;
|
|
}
|
|
/* Contenido de posts del foro */
|
|
.post-content {
|
|
line-height: 22px;
|
|
}
|
|
.post-content a {
|
|
color: #2471a9;
|
|
}
|
|
|
|
/* Panel de admin: campos a ancho completo dentro de la caja del formulario. */
|
|
.admin-form input,
|
|
.admin-form textarea,
|
|
.admin-form select {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* Colores de clase de WoW (nombre de personaje) */
|
|
.class-warrior { color: #c79c6e; }
|
|
.class-paladin { color: #f58cba; }
|
|
.class-hunter { color: #abd473; }
|
|
.class-rogue { color: #fff569; }
|
|
.class-priest { color: #ffffff; }
|
|
.class-death-knight { color: #c41f3b; }
|
|
.class-shaman { color: #0070de; }
|
|
.class-mage { color: #69ccf0; }
|
|
.class-warlock { color: #9482c9; }
|
|
.class-druid { color: #ff7d0a; }
|
|
.class-unknown { color: #f0b100; }
|