From 18098dd38e7b50e6824f69ee1c3278a822821b50 Mon Sep 17 00:00:00 2001 From: hacklab Date: Tue, 20 Oct 2026 12:23:25 +0200 Subject: [PATCH] acampada: el texto sobre el resalte y los tonos claros salen de variables --a26-on-neon (texto sobre el color de resalte), --a26-tint y --a26-line en vez de #000, #e5fcff y #ccc fijos. Con los colores de siempre no cambia nada; con un fondo oscuro o un resalte oscuro el texto sigue leyendose. --- src/client/assets/styles/hive_acampada.css | 42 +++++++++++----------- src/client/assets/themes/Acampada.css | 15 ++++---- 2 files changed, 30 insertions(+), 27 deletions(-) diff --git a/src/client/assets/styles/hive_acampada.css b/src/client/assets/styles/hive_acampada.css index 588cf6d..59aa5e3 100644 --- a/src/client/assets/styles/hive_acampada.css +++ b/src/client/assets/styles/hive_acampada.css @@ -30,7 +30,7 @@ body { background: var(--a26-bg) !important; } box-shadow: 0 4px 0 var(--a26-fg) !important; } .oasis-mobile-topbar .omt-menus .oasis-menu-btn span { color: var(--a26-fg) !important; } -.oasis-mobile-topbar .omt-menus .oasis-menu-btn.active { background: var(--a26-neon) !important; } +.oasis-mobile-topbar .omt-menus .oasis-menu-btn.active { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } .oasis-mobile-topbar .omt-menus .oasis-menu-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--a26-fg) !important; } .oasis-mobile-topbar .omt-logo img, .oasis-mobile-topbar .omt-avatar img { border: var(--a26-bd) !important; @@ -70,7 +70,7 @@ body { background: var(--a26-bg) !important; } transform: translateY(3px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; - border-color: var(--a26-fg) !important; + border-color: var(--a26-fg) !important; color: var(--a26-on-neon) !important; } .ln-app:hover, .ln-app:focus-visible { background: transparent !important; } .ln-lbl { color: var(--a26-fg) !important; font-size: 12px !important; font-weight: 600 !important; } @@ -93,9 +93,9 @@ body { background: var(--a26-bg) !important; } overflow: hidden; text-overflow: ellipsis; } -.oasis-bottombar a.bb-item.current .bb-ico { background: var(--a26-neon) !important; color: var(--a26-fg) !important; } +.oasis-bottombar a.bb-item.current .bb-ico { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } .oasis-bottombar a.bb-item.current .bb-lbl { color: var(--a26-fg) !important; } -.oasis-bottombar .bb-badge { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: 2px solid var(--a26-fg) !important; } +.oasis-bottombar .bb-badge { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; border: 2px solid var(--a26-fg) !important; } /* Nodos e Invitaciones: juntos y estrechos { background: var(--a26-bg) !important; border: var(--a26-bd-fino) !important; @@ -122,11 +122,11 @@ body { background: var(--a26-bg) !important; } /* ---------- menu desplegable de upstream (si se abre) ---------- */ .oasis-nav-header { background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; } .oasis-nav-list li a, .oasis-nav-list li a .emoji { color: var(--a26-fg) !important; } -.oasis-nav-list li a.current { background: var(--a26-neon) !important; } +.oasis-nav-list li a.current { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* ---------- foro y chat: los colores de hive.css pensados para fondo negro ---------- */ .forum-comment.level-1, .forum-comment.level-2, .forum-comment.level-3, .forum-comment.level-4 { border-left: 3px solid var(--a26-fg) !important; } -.forum-comment.highlighted-reply { background: #e5fcff !important; border-left: 5px solid var(--a26-neon) !important; } +.forum-comment.highlighted-reply { background: var(--a26-tint) !important; border-left: 5px solid var(--a26-neon) !important; } .chat-message-form .filter-btn::before, .forum-send-btn::before { color: var(--a26-fg) !important; } /* ---------- lo que mobile.css de upstream pinta en amarillo con !important ---------- */ @@ -136,7 +136,7 @@ body { background: var(--a26-bg) !important; } border-color: var(--a26-fg) !important; color: var(--a26-bg) !important; } -.filter-btn.active { background-color: var(--a26-neon) !important; border-color: var(--a26-fg) !important; color: var(--a26-fg) !important; } +.filter-btn.active { background-color: var(--a26-neon) !important; border-color: var(--a26-fg) !important; color: var(--a26-on-neon) !important; } .peers-conn-actions button, .filter-box__button { background-color: var(--a26-bg) !important; color: var(--a26-fg) !important; } .oasis-id-copy { background: var(--a26-soft) !important; } .gov-overview tbody tr { border: var(--a26-bd-fino) !important; } @@ -184,7 +184,7 @@ button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not height: auto !important; min-height: 48px !important; } -.filter-btn.active, a.filter-btn.active { background-color: var(--a26-neon) !important; } +.filter-btn.active, a.filter-btn.active { background-color: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* pantallas estrechas (360px): Nodos e Invitaciones solo con icono, para que los cuatro atajos no se corten */ @@ -215,7 +215,7 @@ button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not .identities .identity-row { border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important; background: var(--a26-bg) !important; } .identities .identity-name { font-family: var(--a26-tit) !important; font-weight: 400 !important; text-transform: uppercase; font-size: 22px !important; } .identities .identity-feed { color: var(--a26-muted) !important; } -.identities .identity-active { background: var(--a26-neon) !important; border: var(--a26-bd-fino) !important; color: var(--a26-fg) !important; } +.identities .identity-active { background: var(--a26-neon) !important; border: var(--a26-bd-fino) !important; color: var(--a26-on-neon) !important; } .identities .identity-warn { color: #c4003b !important; } /* las barras de filtros de cada modulo: upstream las encoge (.75em) y les pone @@ -286,7 +286,7 @@ button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; } .activity-filter-chips button.active, .activity-filter-grid button.active, .activity-sub-filter button.active, .activity-filter-col button.active { - background: var(--a26-neon) !important; + background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* fechas y autores al pie de cada tarjeta: texto, no botones */ .card-footer .date-link, .card-footer a.user-link, a.user-link, .date-link { @@ -298,7 +298,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important .card-footer { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; color: var(--a26-muted) !important; } /* buscador de cada modulo */ .filter-box { display: flex !important; gap: 8px !important; align-items: stretch !important; } -.filter-box__input::placeholder, input::placeholder, textarea::placeholder { color: #777 !important; } +.filter-box__input::placeholder, input::placeholder, textarea::placeholder { color: var(--a26-muted) !important; } .filter-box__button { font-size: 15px !important; padding: 4px 14px !important; box-shadow: none !important; } /* el pie de cada pagina y el id del perfil, en gris */ .main-column [class*="feed-id"], .profile .feed-id, code { color: var(--a26-muted) !important; } @@ -345,7 +345,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important background: var(--a26-bg) !important; color: var(--a26-fg) !important; border-color: var(--a26-fg) !important; } .main-column table { border: var(--a26-bd-fino) !important; border-radius: 10px !important; } -.main-column table tr + tr td { border-top: 1px solid #ccc !important; } +.main-column table tr + tr td { border-top: 1px solid var(--a26-line) !important; } .main-column table td:first-child, .main-column table th, .main-column [class*="-info-label"] { color: var(--a26-muted) !important; font-weight: 700 !important; font-size: 13px !important; text-transform: uppercase; letter-spacing: .03em; @@ -359,7 +359,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important .profile-sensors-box { display: flex !important; flex-direction: column !important; gap: 4px !important; align-items: center !important; } .profile-sensors-box strong, .profile-sensors-box a, .device-mobile { color: var(--a26-fg) !important; } .inhabitant-stat { border: var(--a26-bd-fino) !important; border-radius: 10px !important; padding: 4px 10px !important; } -.profile-side-relationship .status { background: var(--a26-neon) !important; border: var(--a26-bd-fino) !important; border-radius: 8px !important; padding: 2px 10px !important; } +.profile-side-relationship .status { background: var(--a26-neon) !important; border: var(--a26-bd-fino) !important; border-radius: 8px !important; padding: 2px 10px !important; color: var(--a26-on-neon) !important; } .main-column [class*="feed-id"], .main-column a[href^="/author/"]:not(.user-link) { color: var(--a26-muted) !important; } .profile img.avatar, .inhabitant-photo { border: var(--a26-bd) !important; } @@ -372,7 +372,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important } .eco-tax-chip, [class*="eco-tax-chip-"] { background: var(--a26-soft) !important; color: var(--a26-muted) !important; - border: 1px solid #bbb !important; border-radius: 8px !important; + border: 1px solid var(--a26-line) !important; border-radius: 8px !important; } /* los filtros de la actividad son enlaces .activity-chip */ @@ -381,7 +381,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important border: var(--a26-bd-fino) !important; border-radius: 10px !important; padding: 4px 10px !important; font-weight: 700 !important; text-decoration: none !important; } -.activity-chip.active { background: var(--a26-neon) !important; } +.activity-chip.active { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } .activity-chip:hover { color: var(--a26-fg) !important; border-color: var(--a26-fg) !important; } /* ---------- fichas de filtro de 1.3.3 (OasisMobile.css las pinta en amarillo y gris) ---------- */ @@ -407,14 +407,14 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important .main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) .filter-btn.active:not(.create-button) { background: var(--a26-neon) !important; border-color: var(--a26-fg) !important; - color: var(--a26-fg) !important; + color: var(--a26-on-neon) !important; } .main-column :is(.tribe-mode-buttons, .mode-buttons, .mode-buttons-row, .filter-group) .create-button { min-height: 48px !important; } /* acciones de la tarjeta: iconos SVG en negro dentro del circulo */ .main-column .content-actions .btn-singleview { width: 36px !important; height: 36px !important; } .btn-singleview .btn-icon { width: 18px !important; height: 18px !important; } -.btn-singleview.btn-pin-on { background: var(--a26-neon) !important; } +.btn-singleview.btn-pin-on { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* hilos del foro (lista tipo archivo de 1.3.3): tarjeta negra sin la raya naranja */ .main-column .mailing-archive-item { @@ -444,7 +444,7 @@ label.welcome-ux-option { background: var(--a26-bg) !important; border: var(--a26-bd-fino) !important; border-radius: var(--a26-radius) !important; box-shadow: 0 4px 0 var(--a26-fg) !important; } -label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !important; } +label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* chat: burbujas con marco negro y las reacciones como chips pequeños (el estilo general de botones de Acampada las hacia de 48px a ancho completo) */ @@ -452,7 +452,7 @@ label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !import background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; border-radius: 14px 14px 14px 4px !important; } -.chat-bubble-row-self .chat-message { background: #e5fcff !important; border-radius: 14px 14px 4px 14px !important; } +.chat-bubble-row-self .chat-message { background: var(--a26-tint) !important; border-radius: 14px 14px 4px 14px !important; } .chat-bubble-sender, .chat-bubble-sender-owner { color: var(--a26-fg) !important; } .chat-bubble-time { color: var(--a26-muted) !important; } .main-column .chat-msg-actions { display: flex !important; flex-wrap: wrap !important; gap: 4px !important; } @@ -483,8 +483,8 @@ label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !import font-family: var(--a26-tit) !important; font-weight: 400 !important; text-transform: uppercase; letter-spacing: .02em; font-size: 21px !important; } -.skin-card.is-current { background: var(--a26-neon) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; } -.skin-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; } +.skin-card.is-current { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; border: var(--a26-bd) !important; } +.skin-card:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* ---------- letra y botones mas grandes, para leer sin gafas ---------- */ body { font-size: 18px; } diff --git a/src/client/assets/themes/Acampada.css b/src/client/assets/themes/Acampada.css index 8c3211f..3bd4c88 100644 --- a/src/client/assets/themes/Acampada.css +++ b/src/client/assets/themes/Acampada.css @@ -20,6 +20,9 @@ --a26-neon: #00e5ff; --a26-soft: #f2f2f2; --a26-muted: #555; + --a26-on-neon: #000; + --a26-tint: #e5fcff; + --a26-line: #ccc; --a26-bd: 3px solid var(--a26-fg); --a26-bd-fino: 2px solid var(--a26-fg); --a26-radius: 14px; @@ -47,7 +50,7 @@ div { border: 0 !important; box-shadow: none !important; } span, p, li, td, th, label, small, strong, em, h4, h5, h6 { color: inherit !important; } a { color: var(--a26-fg) !important; } -a:hover, a:focus-visible { color: var(--a26-fg) !important; background-color: var(--a26-neon); } +a:hover, a:focus-visible { color: var(--a26-on-neon) !important; background-color: var(--a26-neon); } /* --- titulos: Anton en mayusculas --- */ h1, h2, h3, .card-label, .tags-header h2, .oasis-nav-header { @@ -111,7 +114,7 @@ button:active, input[type="submit"]:active, input[type="button"]:active, .filter-btn:active, .create-button:active, a.user-link:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; - background: var(--a26-neon) !important; + background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } /* el boton elegido (filtros, pestañas): relleno cian */ .filter-btn.active, .mode-buttons .filter-btn.active, .mode-buttons-row .filter-btn.active, @@ -120,7 +123,7 @@ button:active, input[type="submit"]:active, input[type="button"]:active, .bank-range-tabs .filter-btn.active { background: var(--a26-neon) !important; border-color: var(--a26-fg) !important; - color: var(--a26-fg) !important; + color: var(--a26-on-neon) !important; } /* el boton de crear: negro, para que se vea primero */ .create-button, .mode-buttons .create-button, .mode-buttons-row .create-button, @@ -158,12 +161,12 @@ table td { border-color: var(--a26-fg) !important; } /* --- avisos de upstream (bienvenida, actualizaciones) --- */ .update-banner, .welcome-banner { background: var(--a26-neon) !important; - color: var(--a26-fg) !important; + color: var(--a26-on-neon) !important; border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important; margin: 8px 10px !important; } -.update-banner-link, .update-banner-text { color: var(--a26-fg) !important; } +.update-banner-link, .update-banner-text { color: var(--a26-on-neon) !important; } .welcome-banner-close-btn { background: var(--a26-bg) !important; box-shadow: none !important; @@ -177,7 +180,7 @@ a.hashtag, .chat-topic-title, .chat-topic-active .chat-topic-title, .chat-topic-meta, .chat-topic-last-author, .chat-workspace-details > .tribe-side .tribe-card-members { color: var(--a26-fg) !important; } -.chat-topic-active { background: var(--a26-neon) !important; } +.chat-topic-active { background: var(--a26-neon) !important; color: var(--a26-on-neon) !important; } a.hashtag { text-decoration: underline !important; } .pdf-maximized { background: var(--a26-bg) !important; }