From c0e1fdf15604dc9fbac5799784fc4c1deeedd807 Mon Sep 17 00:00:00 2001 From: SITO Date: Wed, 19 Aug 2026 10:31:36 +0200 Subject: [PATCH] karvan: el panel de llamada no tenia estilos Un comentario sin cerrar en karvan.css se comia la llave de la regla que neutraliza el div{background:#222;padding:20px} global, y con ella todo el bloque de la videollamada. En escritorio el resultado eran dos cajas vacias enormes y unos botones cuadrados en vez del panel. Ademas: - La hoja del modulo se cargaba antes que el tema, asi que el tema ganaba por cascada. Pasa a cargarse despues, que es lo que decia su propio comentario. - Las opciones de duracion (30m / 2h / 8h) se partian letra a letra; les faltaba white-space: nowrap. - Clear-SNH usa !important en casi todo, asi que ninguna hoja posterior puede ganarle. Se resuelve como lo resuelve Oasis: es el tema el que pinta el modulo. Sin ese bloque las burbujas salian negras sobre blanco y el texto secundario en amarillo palido, ilegible. Comprobado con los cuatro temas. --- src/client/assets/styles/karvan.css | 7 +++++-- src/client/assets/themes/Clear-SNH.css | 13 +++++++++++++ src/views/main_views.js | 12 ++++++------ 3 files changed, 24 insertions(+), 8 deletions(-) diff --git a/src/client/assets/styles/karvan.css b/src/client/assets/styles/karvan.css index 7620c14..36fc1f5 100644 --- a/src/client/assets/styles/karvan.css +++ b/src/client/assets/styles/karvan.css @@ -30,7 +30,7 @@ background: #161616; border: 1px solid #333; border-radius: 10px; color: #FFD700; } .karvan-ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0; } .karvan-ttl-lbl { color: #FFDD44; font-size: 13px; } -.karvan-ttl-opt { display: inline-flex; align-items: center; gap: 4px; color: #FFD700; font-size: 13px; } +.karvan-ttl-opt { display: inline-flex; align-items: center; gap: 4px; color: #FFD700; font-size: 13px; white-space: nowrap; } .karvan-create button, .karvan-compose button { padding: 10px 16px; border: 1px solid #FFD700; border-radius: 10px; background: #FFD700; color: #121212; font-weight: 700; cursor: pointer; } .karvan-rooms { list-style: none; margin: 8px 0 0; padding: 0; } @@ -71,8 +71,11 @@ .karvan-invite-msg.ok { color: #35d07f; } .karvan-invite-msg.err { color: #ff8a8a; } /* --- Karvan videollamada (Fase 1): media P2P sobre el mismo WebRTC del chat --- */ +/* el div{background:#222;padding:20px} de style.css y el div{border} del tema + convierten cada contenedor del panel en una caja: aqui se neutralizan */ .karvan-call, .karvan-videos, .karvan-call-bar, .kc-status { - background-color: transparent; box-shadow: none; border-radius: 0; padding: 0; margin: 0; /* anular div{#222} + background-color: transparent; box-shadow: none; border: 0; border-radius: 0; padding: 0; margin: 0; +} .karvan-call { margin: 10px 0; } .karvan-videos { display: none; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; margin-bottom: 8px; } .karvan-call.active .karvan-videos { display: grid; } diff --git a/src/client/assets/themes/Clear-SNH.css b/src/client/assets/themes/Clear-SNH.css index 8e82def..a04c3f3 100644 --- a/src/client/assets/themes/Clear-SNH.css +++ b/src/client/assets/themes/Clear-SNH.css @@ -370,3 +370,16 @@ a.user-link:focus { .chat-topic-active { background: #FFF3E0 !important; } .chat-topic-title { color: #2D2D2D !important; } .chat-workspace-empty { border-color: #DDD !important; } + +/* Karvan: su hoja (karvan.css) esta pensada para fondo oscuro; aqui se traduce + a la paleta clara, igual que este tema hace con el resto de la interfaz */ +.karvan-back, .karvan-room-title, .kr-title { color: #B25000 !important; } +.karvan-sub, .karvan-expire, .karvan-live, .kr-meta, +.karvan-ttl-lbl, .karvan-ttl-opt { color: #6B5300 !important; } +.karvan-room-item, .karvan-create input[type="text"] { + background-color: #FFFFFF !important; border: 1px solid #E0E0E0 !important; color: #2C2C2C !important; +} +.karvan-msg { background-color: #FFF8E1 !important; border: 1px solid #E6CE86 !important; } +.karvan-msg-self { background-color: #FFEFC2 !important; border-color: #D9A400 !important; } +.karvan-msg .km-from { color: #8A6D00 !important; } +.karvan-msg .km-text { color: #2C2C2C !important; } diff --git a/src/views/main_views.js b/src/views/main_views.js index 215a63d..4ec97a0 100644 --- a/src/views/main_views.js +++ b/src/views/main_views.js @@ -1214,14 +1214,14 @@ const template = (titlePrefix, ...elements) => { head( title(titlePrefix, " | Oasis"), link({ rel: "stylesheet", href: `/assets/styles/style.css?v=${assetVersion()}` }), - // el modulo Karvan trae su propia hoja: asi se ve igual en cualquier tema - // y tambien en escritorio, donde no se carga OasisMobile.css - link({ rel: "stylesheet", href: `/assets/styles/karvan.css?v=${assetVersion()}` }), // movil: el tema va DESPUES de mobile.css para ganar por cascada sin !important; // escritorio: orden original de epsylon ...(process.env.OASIS_MOBILE === '1' ? [ link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}` }), themeLink ] : [ themeLink, link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}`, media: "(max-width: 768px)" }) ]), + // el modulo Karvan trae su propia hoja: asi se ve igual en cualquier tema + // y tambien en escritorio, donde no se carga OasisMobile.css + link({ rel: "stylesheet", href: `/assets/styles/karvan.css?v=${assetVersion()}` }), link({ rel: "icon", href: "/assets/images/favicon.svg" }), meta({ charset: "utf-8" }), meta({ name: "description", content: i18n.oasisDescription }), @@ -1579,14 +1579,14 @@ exports.ainavHomeView = ({ recentTags = [] } = {}) => { head( title(placeholder, " | Oasis"), link({ rel: "stylesheet", href: `/assets/styles/style.css?v=${assetVersion()}` }), - // el modulo Karvan trae su propia hoja: asi se ve igual en cualquier tema - // y tambien en escritorio, donde no se carga OasisMobile.css - link({ rel: "stylesheet", href: `/assets/styles/karvan.css?v=${assetVersion()}` }), // movil: el tema va DESPUES de mobile.css para ganar por cascada sin !important; // escritorio: orden original de epsylon ...(process.env.OASIS_MOBILE === '1' ? [ link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}` }), link({ rel: "stylesheet", href: `/assets/themes/${theme}.css?v=${assetVersion()}` }) ] : [ link({ rel: "stylesheet", href: `/assets/themes/${theme}.css?v=${assetVersion()}` }), link({ rel: "stylesheet", href: `/assets/styles/mobile.css?v=${assetVersion()}`, media: "(max-width: 768px)" }) ]), + // el modulo Karvan trae su propia hoja: asi se ve igual en cualquier tema + // y tambien en escritorio, donde no se carga OasisMobile.css + link({ rel: "stylesheet", href: `/assets/styles/karvan.css?v=${assetVersion()}` }), link({ rel: "icon", href: "/assets/images/favicon.svg" }), meta({ charset: "utf-8" }), meta({ name: "description", content: i18n.oasisDescription }),