@import 'tailwindcss'; /* Tokens de diseño NightSpire (paleta oscura fantasía WotLK). */ @theme { --color-ns-bg: #140d08; --color-ns-panel: #241812; --color-ns-panel-2: #2c1e14; --color-ns-border: #4a3320; --color-ns-gold: #d79602; --color-ns-gold-light: #f0b93f; --color-ns-text: #e8dccb; --color-ns-muted: #b1997f; } :root { color-scheme: dark; } /* El fondo, la tipografía (FuturaEF-Book) y los estilos base del los controla el tema real ns-ryu (theme.css), importado AL FINAL de este fichero. No los redefinimos aquí para que el tema quede idéntico. */ /* El tema ns-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; } /* `.back-to-account` es el botón de la CABECERA de una caja: 250px de ancho, line-height 50 y flotando a la derecha. Cuando se usa suelto en el CUERPO (el "Solicitar nuevo cambio de correo" de /expired-link) sale mal por dos motivos: el float lo pega a la derecha en vez de centrarlo, y el texto no cabe en 250px, se parte en dos líneas y cada una se lleva sus 50px -> un botón de 250x100. Aquí se le deja el aspecto del tema pero ajustado a su texto. */ .body-box-content .centered a.back-to-account { float: none; display: inline-block; width: auto; padding: 0 24px; } /* Mismo caso que .item-box de la tienda: el tema da a `.cc-box` (creadores de contenido) una altura FIJA de 172px contando con el content-box del navegador, y el border-box de Tailwind le resta el padding y el borde. Con 24px menos de alto útil, los enlaces de YouTube/Facebook se salían por abajo de la caja. */ .cc-box { box-sizing: content-box; } /* El tooltip de wowhead se inyecta en el , así que le caen encima las reglas globales del tema. La que lo rompe es `th { height: 40px }` (global, viene tal cual del tema original): el tooltip usa para la columna de la derecha (fase, tipo de arma, velocidad…), y cada una de esas filas se estiraba a 40px, dejando huecos enormes entre líneas. El store original no lo sufre porque su tooltip lo pinta otro script con otro markup. Se neutraliza solo dentro del tooltip: alto natural y sin el fondo de cabecera del tema. `font-weight` no hace falta tocarlo: wowhead ya lo pone normal. */ .wowhead-tooltip th { height: auto; background-color: transparent; } /* tooltips.js NO trae fondo para el tooltip (universal.css solo le da layout y los colores de calidad): en wowhead.com lo pinta el CSS de su web, que aquí no cargamos. Sin esto el tooltip es transparente y se lee la página a través de él —se ve igual en una página desnuda con solo tooltips.js, no es cosa del tema—. Se le da el fondo y el borde de las cajas del tema. */ .wowhead-tooltip { background: #0b0705; border: 2px solid #352e2b; } /* 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; } /* 4) La barra de navegación se diseñó para content-box: sus enlaces/botones usan `min-width: 126px` + `padding: 24px`, así que con el border-box del preflight quedan ~48px más estrechos (contenido 78px) y el header sale apretado/pequeño respecto al original. Volvemos a content-box en los elementos del nav para que el ancho coincida con la web original (126 + 48 = 174px). */ .nav-bar a, .nav-dropdown-btn, .nav-dropdown-content a { box-sizing: content-box; } /* Componentes reutilizables */ @layer components { .ns-btn { @apply inline-flex items-center justify-center rounded-md bg-ns-gold px-5 py-2.5 font-semibold text-[#1b120b] transition hover:bg-ns-gold-light; } .ns-btn-ghost { @apply inline-flex items-center justify-center rounded-md border border-ns-border px-5 py-2.5 font-semibold text-ns-text transition hover:border-ns-gold hover:text-ns-gold-light; } .ns-card { @apply rounded-xl border border-ns-border/70 bg-ns-panel/80 p-5 shadow-lg shadow-black/30 backdrop-blur; } .ns-heading { @apply bg-gradient-to-b from-ns-gold-light to-ns-gold bg-clip-text font-extrabold tracking-wide text-transparent; } .ns-input { @apply w-full rounded-md border border-ns-border bg-ns-panel-2 px-3 py-2 text-ns-text outline-none transition focus:border-ns-gold; } } /* Contenido HTML de noticias/foro */ .prose :where(a) { color: #7cc0f7; } /* Foro: textarea con el look del tema real (el tema ns-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). */ .ns-tool-btn { border: 2px solid #352e2b; background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; padding: 4px 10px; cursor: pointer; transition: 0.3s; } .ns-tool-btn:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } /* Paginación con el estilo de los botones del tema (borde + fondo tenue + hover). Los selectores :link/:visited elevan la especificidad para ganar a las reglas `a`/`a:visited` del tema (que si no dejan los enlaces visitados en azul). */ .ns-page-link { display: inline-block; min-width: 42px; padding: 9px 14px; margin: 0 3px; border: 2px solid #352e2b; background: hsla(0, 0%, 100%, 0.05); text-align: center; transition: 0.3s; } .ns-page-link:link, .ns-page-link:visited { color: #ebdec2; } .ns-page-link:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } .ns-page-current, .ns-page-current:link, .ns-page-current:visited { border-color: #b17c02; color: #d79602; background: hsla(40, 90%, 45%, 0.12); } /* 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. */ .ns-cookie-table { width: 100%; border-collapse: collapse; margin: 12px 0 16px; font-size: 15px; } .ns-cookie-table th, .ns-cookie-table td { border: 1px solid #352e2b; padding: 8px 10px; text-align: left; vertical-align: top; } .ns-cookie-table th { background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; text-transform: uppercase; font-size: 13px; } .ns-cookie-table td { color: #b1997f; } .ns-cookie-table a { color: #2471a9; } .ns-consent-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; } .btn-ns { 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-ns:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } .btn-ns-secondary { border-color: #5c2b2b; color: #d98c8c; } .btn-ns-secondary:hover { background: hsla(0, 60%, 30%, 0.15); color: #fff; } /* Banner de consentimiento de cookies (fijo abajo). */ .ns-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); } .ns-cookie-text { flex: 1 1 420px; } .ns-cookie-text h3 { color: #d79602; margin-bottom: 6px; } .ns-cookie-text p { color: #b1997f; font-size: 14px; line-height: 20px; } .ns-cookie-link { display: inline-block; margin-top: 6px; color: #2471a9; } .ns-cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; } .ns-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; } .ns-cookie-btn:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } .ns-cookie-btn-accept { border-color: #b17c02; color: #f0b93f; } .ns-cookie-btn-accept:hover { background: hsla(40, 90%, 45%, 0.15); color: #fff; } .ns-cookie-btn-reject { border-color: #5c2b2b; color: #d98c8c; } .ns-cookie-btn-save { border-color: #b17c02; color: #f0b93f; } .ns-cookie-btn-save:hover { background: hsla(40, 90%, 45%, 0.15); color: #fff; } /* Panel «Personalizar» del banner (checkboxes por categoría). */ .ns-cookie-details { margin-top: 14px; padding-top: 12px; border-top: 1px solid #352e2b; } .ns-cookie-category { margin-bottom: 10px; } .ns-cookie-category label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .ns-cookie-category input[type='checkbox'] { width: 16px; height: 16px; accent-color: #d79602; cursor: pointer; } .ns-cookie-category input[type='checkbox']:disabled { cursor: default; } .ns-cookie-cat-name { color: #ebdec2; font-size: 15px; } .ns-cookie-category p { color: #b1997f; font-size: 13px; margin: 2px 0 0 24px; line-height: 18px; } .ns-cookie-actions-detail { margin-top: 8px; } /* Panel «Tu estado de consentimiento» en /cookies (datos de la API de Zaraz). */ .ns-consent-status { border: 1px solid #352e2b; padding: 12px 14px; margin: 12px 0; } .ns-consent-status .ns-consent-source { font-size: 13px; color: #7e8d09; margin-bottom: 8px; } .ns-consent-status ul { list-style: none; padding: 0; margin: 0; } .ns-consent-status li { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border-bottom: 1px solid #241812; } .ns-consent-status li:last-child { border-bottom: 0; } .ns-consent-on { color: #6aa84f; } .ns-consent-off { color: #cc5b5b; } .ns-consent-always { color: #b1997f; } /* Selector de cuenta inline (dentro de «Nombre de la cuenta») + botón «+». */ .account-select { width: auto; min-width: 92px; height: auto; padding: 2px 8px; margin: 0 0 0 4px; font-size: 17px; vertical-align: middle; } .add-account-btn { height: auto; padding: 1px 9px; margin: 0 0 0 6px; font-size: 17px; line-height: 1.4; vertical-align: middle; border: 2px solid #352e2b; background: hsla(0, 0%, 100%, 0.05); color: #ebdec2; cursor: pointer; transition: 0.3s; } .add-account-btn:hover { background: hsla(0, 0%, 100%, 0.1); color: #fff; } /* El formulario de añadir cuenta sale en bloque, debajo del nombre. */ .add-account-box { display: block; margin-top: 6px; } .add-account-input { min-width: 150px; } .add-account-msg { display: block; margin-top: 4px; } /* Colores de calidad de objeto (enlaces de recompensas RAF, etc.). */ .q0 { color: #9d9d9d; } .q1 { color: #ffffff; } .q2 { color: #1eff00; } .q3 { color: #0070dd; } .q4 { color: #a335ee; } .q5 { color: #ff8000; } /* 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; } /* Logos en línea de las pasarelas de pago (lista de métodos en /d-points) */ .pay-inline-logo { height: 18px; width: auto; vertical-align: middle; margin: 0 2px; } /* Pasarelas de pago en /d-points: layout e iconos de los botones de método (portado del tema original; los SVG no tienen tamaño intrínseco, así que se dimensionan aquí para que el icono quede en línea con el texto como PayPal). */ .dnt-sidebar.dnt-methods { margin-top: 5px; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; } .dnt-sidebar.dnt-methods .dnt-button-2 { flex: 1 1 auto; padding: 0 18px; } .dnt-sidebar.dnt-methods .dnt-button-2 img { height: 22px; width: auto; vertical-align: middle; margin-right: 6px; } /* ==== Verificación en 2 pasos (/security-2falogin) ==== */ .twofa-login-info { display: block; } .twofa-login-preview { float: right; max-width: 370px; margin-left: 24px; margin-bottom: 8px; height: auto; border: 2px solid #352e2b; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .google-play-logo { height: 40px; width: 140px; vertical-align: middle; } .apple-store-logo { height: 40px; width: 120px; vertical-align: middle; } .toggle-password, .toggle-token { cursor: pointer; margin-left: -28px; color: #b1997f; transition: .3s; } .toggle-password:hover, .toggle-token:hover { color: #fff; } .copy-secret-container { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 6px; } #secret-key { width: 240px; text-align: center; } .copy-btn { cursor: pointer; } #qr-code { display: block; margin: 0 auto; max-width: 220px; height: auto; background: #fff; padding: 8px; border-radius: 6px; } @media screen and (max-width: 1024px) { .twofa-login-info { display: flex; flex-direction: column-reverse; align-items: center; } .twofa-login-preview { float: none; display: block; clear: both; margin: 10px auto 8px auto; max-width: 90vw; } } /* ==== Selector de forma de pago (PD / Stripe / SumUp) ==== */ .pay-method-select { margin: 10px auto 4px auto; max-width: 560px; } .pay-method-options { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 8px 0; } .pay-method-option { flex: 1 1 150px; min-width: 140px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px 10px; cursor: pointer; border: 2px solid #352e2b; border-radius: 8px; background: rgba(0, 0, 0, 0.25); transition: border-color .25s, background .25s; } .pay-method-option:hover { border-color: #6b5a4e; } .pay-method-option.selected { border-color: #d79602; background: rgba(215, 150, 2, 0.10); } .pay-method-option.disabled { cursor: not-allowed; opacity: .55; } .pay-method-option input[type='radio'] { accent-color: #d79602; } .pay-method-label { color: #ebdec2; font-weight: bold; } .pay-method-sub { font-size: 13px; } .pay-method-balance { margin-top: 2px; font-size: 13px; } /* ==== Tienda (/store) ==== */ #store-list, #store-list ul { list-style: none; margin: 0; padding-left: 14px; } #store-list ul { display: block !important; } #store-list > li { margin: 4px 0; } /* Ojo: como en el markup original, el