/* ============================================================================ PrimeShop — colores de marca ============================================================================ Se inyecta después del CSS de LibreChat, así que solo pisa variables. TODOS los nombres de variable de este archivo fueron verificados contra el bundle compilado de la imagen oficial (index.CdHFgm6U.css). No hay ninguno inventado: una versión anterior usaba --text-link, --text-link-hover y --border-focus, que no existen en LibreChat. Expectativa realista: LibreChat es una interfaz mayormente gris por diseño, sin un acento que tiña toda la UI. El naranja aparece en el botón de enviar, los anillos de foco y los acentos — no convierte la app en naranja. ============================================================================ */ :root { /* --- Naranja PrimeShop --------------------------------------------------- Extraído del logo oficial: color dominante del PNG (5363 píxeles del muestreo). Verificado, no estimado. Único lugar donde cambiarlo: todo lo demás deriva de acá. */ --prime-orange: #ec671d; --prime-orange-hover: #d15a16; /* Naranja oscurecido para texto sobre fondo claro. #EC671D sobre blanco da 3.20:1 — alcanza para texto grande (AA pide 3:1) pero no para texto normal (4.5:1). #C05612 da 4.53:1, y es lo más cerca del color de marca que se puede estar sin bajar de AA. */ --prime-orange-on-light: #c05612; } /* --- Botón de enviar -------------------------------------------------------- En LibreChat es verde (--green-700). Es el elemento de marca más visible de toda la app: está en pantalla en cada conversación. */ :root, .dark { --surface-submit: var(--prime-orange); --surface-submit-hover: var(--prime-orange-hover); } /* --- Anillos de foco -------------------------------------------------------- 6 usos en el bundle. Por defecto gris; en naranja marcan la identidad cada vez que alguien navega con teclado. */ :root, .dark { --ring-primary: var(--prime-orange); } /* --- Acento de marca -------------------------------------------------------- LibreChat trae un violeta (#ab68ff) con un solo uso. Lo pasamos a naranja para que no aparezca un color ajeno a la marca. */ :root { --brand-purple: var(--prime-orange-on-light); } .dark { /* Sobre fondo oscuro el naranja de marca tiene contraste de sobra, así que ahí va el color puro, sin compromisos. */ --brand-purple: var(--prime-orange); } /* ============================================================================ El verde de acento de LibreChat ============================================================================ Además de las variables, LibreChat usa clases de Tailwind con el verde escrito literal (#10a37f, el verde de ChatGPT — 18 apariciones en el bundle). Esas clases NO pasan por ninguna variable, así que pisarlas requiere reglas propias. USAMOS `~=` Y NO `*=`, y la diferencia importa mucho: `*=` matchea cualquier subcadena, así que `[class*="text-green-"]` también agarra `peer-focus:text-green-600` — una clase que Tailwind aplica SOLO cuando el campo está enfocado. El resultado fue que las etiquetas "Email address" y "Password" quedaban naranjas de forma permanente en vez de grises. `~=` matchea el token exacto separado por espacios, así que `[class~="text-green-600"]` ignora `peer-focus:text-green-600`. Las variantes condicionales se manejan aparte, con su propio estado. `!important` está justificado: competimos contra utilidades de Tailwind, que ya tienen alta especificidad. DELIBERADAMENTE NO tocamos `bg-green-50/100/900/950` ni los bordes: esos son estados de éxito (mensajes de "guardado con éxito"), no color de marca. Pintarlos de naranja rompería la señal de que algo salió bien. ============================================================================ */ /* ============================================================================ Logo en la pantalla de chat nuevo ============================================================================ LibreChat solo dibuja el logo en el login. La pantalla de chat nuevo muestra el ícono del proveedor de IA (40px, redondo) y el saludo, sin marca alguna. El contenedor de esa pantalla, según el bundle compilado, es: flex h-full transform-gpu flex-col items-center justify-center pb-16 `transform-gpu` junto con `h-full` y `pb-16` es una combinación específica de esa vista, así que sirve de ancla sin tocar el resto de la app. La ruta 'logo.svg' es relativa a este archivo CSS: ambos viven en /assets/, así que resuelve a /assets/logo.svg sin importar el dominio. ============================================================================ */ .transform-gpu.h-full.flex-col.items-center.justify-center.pb-16 > div::before { content: ''; display: block; width: min(240px, 60vw); aspect-ratio: 4191 / 1381; /* proporción real del logo, evita deformarlo */ margin: 0 auto 1.25rem; background-image: url('logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; } /* --- Texto de acento, estado normal --- */ [class~='text-green-500'], [class~='text-green-600'], [class~='text-green-700'] { color: var(--prime-orange-on-light) !important; } .dark [class~='dark:text-green-400'], .dark [class~='dark:text-green-500'] { color: var(--prime-orange) !important; } /* --- Texto de acento, hover y foco --- */ [class~='hover:text-green-700']:hover, [class~='focus:text-green-700']:focus { color: var(--prime-orange-hover) !important; } .dark [class~='dark:hover:text-green-400']:hover, .dark [class~='dark:focus:text-green-400']:focus { color: #f5813f !important; } /* --- Etiquetas flotantes de los campos --- Solo cuando el input hermano está enfocado. Fuera de foco quedan grises, que es como tienen que estar. */ input:focus ~ [class*='peer-focus:text-green-'], textarea:focus ~ [class*='peer-focus:text-green-'] { color: var(--prime-orange) !important; } /* --- Subrayado de enlaces al pasar el mouse --- */ [class*='decoration-green-']:hover, [class*='decoration-green-']:focus { text-decoration-color: var(--prime-orange) !important; } /* --- Anillo de foco de Tailwind --- */ [class*='ring-green-']:focus { --tw-ring-color: var(--prime-orange) !important; } /* --- Fondos de acento (botones), no los de estado de éxito --- */ [class~='bg-green-500'], [class~='bg-green-600'], [class~='bg-green-700'], .dark [class~='dark:bg-green-500'], .dark [class~='dark:bg-green-600'] { background-color: var(--prime-orange) !important; } [class~='hover:bg-green-600']:hover, [class~='hover:bg-green-700']:hover, .dark [class~='dark:hover:bg-green-600']:hover, .dark [class~='dark:hover:bg-green-700']:hover { background-color: var(--prime-orange-hover) !important; } /* --------------------------------------------------------------------------- El logo en tema claro --------------------------------------------------------------------------- El logo de Prime tiene "PRIME" en blanco y "shop" en naranja. Sobre el fondo oscuro se lee entero; sobre el claro la parte blanca desaparece y queda solo "shop" suelto, como si faltara media marca. Se ve sobre todo en el celular, que abre en tema claro. No se puede recolorear con un filtro: el archivo es una imagen, no un dibujo vectorial, y cualquier filtro que oscurezca el blanco se lleva puesto también el naranja. Por eso hay dos versiones y se cambia una por otra. `content` sobre un reemplaza la imagen que muestra. El selector `html:not(.dark)` es el tema claro: LibreChat marca el oscuro con la clase `dark` en la raíz. OJO con el selector: LibreChat escribe el src RELATIVO (`assets/logo.svg`, sin barra al principio). Buscar `/assets/logo.svg` no encuentra nada y la regla no se aplica — comprobado en el navegador, `content` quedaba en `normal`. Por eso se busca solo `logo.svg`, que sirve para las dos formas. --------------------------------------------------------------------------- */ html:not(.dark) img[src*='logo.svg'] { content: url('/assets/logo-oscuro.svg'); } /* ============================================================================ Las listas, en naranja y no en fucsia ============================================================================ Las listas salen dentro de un bloque de código, y ahí LibreChat aplica resaltado de sintaxis pensado para PROGRAMAR. Una lista de precios no es código: el resaltado le adivina un lenguaje y reparte colores al azar. El resultado real, mirando una CDE STOCK entera: los colores (Black, Blue, Sage), las secciones (JAPAN, USA), los modelos (17 Pro Max) y todos los precios caían en el mismo grupo, que su paleta pinta en magenta —#df3079 en oscuro, #9a2f6a en claro—. El bloque entero se veía fucsia. Se pisa la paleta COMPLETA, no solo el magenta. Dejar los verdes y los azules no arreglaría nada: seguirían siendo colores repartidos por un adivinador de lenguajes sobre un texto que no es de ningún lenguaje. Dos excepciones a propósito: · los comentarios quedan grises — es el gris de LibreChat y se lee bien · el texto sin clase queda como está, que es el color normal del bloque `[class*='hljs-']` acá SÍ es lo correcto, al revés que con el verde de más arriba: no hay ninguna variante de foco ni de hover entre estas clases, así que no hay nada que pisar de más. */ pre code [class*='hljs-']:not(.hljs-comment):not(.hljs-meta) { color: var(--prime-orange-on-light) !important; } .dark pre code [class*='hljs-']:not(.hljs-comment):not(.hljs-meta) { color: var(--prime-orange) !important; }