/* ------------------------------------------------------------ Desarrollado por Marco Antonio Posligua San Martin ------------------------------------------------------------ Ajustes de presentacion sobre el tema de Chainlit. REGLA DE ORO DE ESTE FICHERO, aprendida rompiendola: Chainlit inyecta este CSS en el ANTES que su propia hoja de estilos. A igual especificidad siempre gana la suya. La primera version de este fichero traia reglas para la tipografia, el codigo en linea, los titulares y las tablas, y NINGUNA llegaba a aplicarse: se comprobo midiendo el estilo calculado en el navegador, no leyendo el fichero, que es la unica forma de saberlo. De ahi que aqui quede poco: - Lo que Chainlit expone como VARIABLE (colores, tipografia) va en public/theme.json. Ahi no hay pelea de cascada: su propia regla `body { font-family: var(--font-sans) }` usa el valor que le demos. - Lo que ya resuelve su componente (tablas, codigo, titulares) se deja en paz. Duplicarlo era codigo muerto que aparentaba hacer algo. - Aqui solo queda lo que no existe de otra manera: la marca en la cabecera y las barras de desplazamiento, ambas fuera de su alcance. Se evita depender de nombres de clase generados por el compilador (cambian en cada version y romperian en silencio): se usan id y atributos estables. */ /* --- La marca dentro de la aplicacion --------------------------------- El logo solo salia en la pantalla de login: dentro, la cabecera iba sin marca ninguna, con aspecto de plantilla sin terminar. Se coloca junto al boton de conversacion nueva, sirviendolo del mismo endpoint que ya usa Chainlit para no duplicar fichero ni ruta. `#header` es un id estable, y un id gana a cualquier clase suya. */ #header > div:first-child::after { content: ""; display: block; width: 168px; height: 26px; margin-left: 0.55rem; background: url("/logo?theme=light") left center / contain no-repeat; } .dark #header > div:first-child::after { background-image: url("/logo?theme=dark"); } /* En pantalla estrecha manda el espacio para escribir, no la marca. */ @media (max-width: 640px) { #header > div:first-child::after { display: none; } } /* --- Accesos directos de la pantalla de inicio ------------------------ La disposicion ya la trae Chainlit (#starters se envuelve solo); aqui solo borde y respuesta al raton, para que se lean como botones y no como etiquetas sueltas. Comprobado en el DOM: los botones se llaman `starter--`, asi que el selector de atributo es estable. */ button[id^="starter-"] { border: 1px solid hsl(var(--border)); background: hsl(var(--card)); transition: border-color .15s ease, background-color .15s ease; } button[id^="starter-"]:hover { border-color: hsl(var(--primary) / 0.55); background: hsl(var(--accent)); } /* --- Menu de secciones de la barra lateral ---------------------------- Lo construye public/menu-lateral.js; aqui solo su aspecto. Las clases son propias (no de Chainlit), asi que no hay pelea de cascada ni riesgo de que una version suya las cambie. Los colores salen de las variables del tema, para que siga a claro y oscuro sin duplicar nada. */ #menu-secciones { display: flex; flex-direction: column; gap: 1px; padding: 0.25rem 0.5rem 0.75rem; border-bottom: 1px solid hsl(var(--sidebar-border)); margin-bottom: 0.5rem; } #menu-secciones .menu-titulo { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: hsl(var(--sidebar-foreground) / 0.55); padding: 0.65rem 0.5rem 0.3rem; } #menu-secciones .menu-elemento { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.4rem 0.5rem; border: 0; border-radius: var(--radius); background: transparent; color: hsl(var(--sidebar-foreground)); font-size: 0.875rem; text-align: left; cursor: pointer; transition: background-color .12s ease; } #menu-secciones .menu-elemento:hover { background: hsl(var(--sidebar-accent)); } #menu-secciones .menu-elemento:focus-visible { outline: 2px solid hsl(var(--sidebar-ring)); outline-offset: -2px; } #menu-secciones .menu-icono { font-size: 0.95rem; line-height: 1; width: 1.15rem; text-align: center; flex: none; } #menu-secciones .menu-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* --- Barras de desplazamiento ----------------------------------------- La del sistema, con sus flechas y su gris de hace veinte anos, era lo unico que seguia delatando que esto no es una aplicacion cuidada. Nadie compite por estos pseudo-elementos, asi que aqui no hay problema de cascada. */ * { scrollbar-width: thin; scrollbar-color: hsl(var(--border)) transparent; } ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-button { display: none; } ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: hsl(var(--border)); border: 3px solid transparent; background-clip: content-box; border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.55); background-clip: content-box; } /* --- Login ------------------------------------------------------------ La ilustracion ocupa media pantalla: que no se coma el formulario en pantallas estrechas, donde ademas no aporta nada. */ @media (max-width: 900px) { [class*="login"] img, [alt*="login" i] { display: none; } }