Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web-next: revertir el reset de Tailwind que aplastaba los campos del tema

Browse Source 
El tema nw-ryu se diseño para los defaults del navegador (la web Django no
usa Tailwind). El preflight de Tailwind rompia el layout de los formularios:

- box-sizing:border-box hacia que la height fija de los inputs (24px)
  incluyera el padding → campos finos/aplastados. Se vuelve a content-box
  en los inputs/select del tema (.admin-form conserva border-box).
- table{border-collapse:collapse} anulaba el border-spacing de las tablas
  del tema (middle-center-table, max-center-table...) → filas pegadas sin
  separacion. Se vuelve a border-collapse:separate.

Reglas sin @layer → ganan al preflight (que va en @layer base). Verificado
por captura: los campos de /login ahora coinciden pixel a pixel con Django.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-13 10:17:48 +00:00
parent 51203c7eee
commit 3eaa60224c
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/globals.css
+20
View File
@@ -20,6 +20,26 @@
los controla el tema real nw-ryu (novawow-style.css), cargado en el <head> 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. */ 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;
}
/* Componentes reutilizables */ /* Componentes reutilizables */
@layer components { @layer components {
.nw-btn { .nw-btn {