@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 los controla el tema real nw-ryu (novawow-style.css), cargado en el 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 SOLO en los inputs de texto que estiliza el tema (el navegador les da content-box por defecto, como la web Django sin Tailwind; los de .admin-form conservan border-box por su mayor especificidad). OJO: `select` NO va aquí — su default del navegador es border-box (40px); forzarlo a content-box lo agranda a 60px. 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'] { 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; } /* Listas dentro de las cajas de contenido (el tema no las estiliza y el preflight de Tailwind quita los bullets; los devolvemos como en Django). */ .body-box-content ul { list-style: disc; padding-left: 22px; margin: 8px 0; } .body-box-content li { line-height: 22px; } /* Declaración de cookies: tablas y botones de consentimiento. */ .uw-cookie-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 15px; } .uw-cookie-table th, .uw-cookie-table td { border: 1px solid #352e2b; padding: 8px 10px; text-align: left; vertical-align: top; } .uw-cookie-table th { background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; text-transform: uppercase; font-size: 13px; } .uw-cookie-table td { color: #b1997f; } .uw-cookie-table a { color: #2471a9; } .uw-consent-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; } .btn-uw { border: 2px solid #352e2b; background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; padding: 10px 18px; cursor: pointer; text-transform: uppercase; transition: 0.3s; } .btn-uw:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } .btn-uw-secondary { border-color: #5c2b2b; color: #d98c8c; } .btn-uw-secondary:hover { background: hsla(0, 60%, 30%, 0.15); color: #fff; } /* Banner de consentimiento de cookies (fijo abajo). */ .uw-cookie-content { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9999; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; padding: 16px 24px; background: #140d08; border-top: 2px solid #4a3320; box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.55); } .uw-cookie-text { flex: 1 1 420px; } .uw-cookie-text h3 { color: #d79602; margin-bottom: 6px; } .uw-cookie-text p { color: #b1997f; font-size: 14px; line-height: 20px; } .uw-cookie-link { display: inline-block; margin-top: 6px; color: #2471a9; } .uw-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .uw-cookie-btn { border: 2px solid #352e2b; background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; padding: 9px 16px; cursor: pointer; text-transform: uppercase; font-size: 14px; transition: 0.3s; } .uw-cookie-btn:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } .uw-cookie-btn-accept { border-color: #b17c02; color: #f0b93f; } .uw-cookie-btn-accept:hover { background: hsla(40, 90%, 45%, 0.15); color: #fff; } .uw-cookie-btn-reject { border-color: #5c2b2b; color: #d98c8c; } .uw-cookie-btn-save { border-color: #b17c02; color: #f0b93f; } .uw-cookie-btn-save:hover { background: hsla(40, 90%, 45%, 0.15); color: #fff; } /* Panel «Personalizar» del banner (checkboxes por categoría). */ .uw-cookie-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid #352e2b; } .uw-cookie-category { margin-bottom: 10px; } .uw-cookie-category label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .uw-cookie-category input[type='checkbox'] { width: 16px; height: 16px; accent-color: #d79602; cursor: pointer; } .uw-cookie-category input[type='checkbox']:disabled { cursor: default; } .uw-cookie-cat-name { color: #ebdec2; font-size: 15px; } .uw-cookie-category p { color: #b1997f; font-size: 13px; margin: 2px 0 0 24px; line-height: 18px; } .uw-cookie-actions-detail { margin-top: 8px; } /* Panel «Tu estado de consentimiento» en /cookies (datos de la API de Zaraz). */ .uw-consent-status { border: 1px solid #352e2b; padding: 12px 14px; margin: 12px 0; } .uw-consent-status .uw-consent-source { font-size: 13px; color: #7e8d09; margin-bottom: 8px; } .uw-consent-status ul { list-style: none; padding: 0; margin: 0; } .uw-consent-status li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #241812; } .uw-consent-status li:last-child { border-bottom: 0; } .uw-consent-on { color: #6aa84f; } .uw-consent-off { color: #cc5b5b; } .uw-consent-always { color: #b1997f; } /* 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; }