diff --git a/GUIA_DE_DESARROLLO.md b/GUIA_DE_DESARROLLO.md index 3434333..3de1c51 100644 --- a/GUIA_DE_DESARROLLO.md +++ b/GUIA_DE_DESARROLLO.md @@ -184,5 +184,3 @@ duele: 2. En `workflows_model.js` queda la logica de skins del movil (`themeOf`, `sameTheme`): `settings_view.js` coge `currentWorkflow` al cargar y no se puede envolver desde fuera sin tocar esa vista. Es poco, pero es del dev. -3. Selectores que ya no apuntan a nada: unos 60 en `styles/mobile_base.css`, 29 en - `hive_acampada.css` y 5 en `Acampada.css`. diff --git a/docs/FRONTERA_UPSTREAM.md b/docs/FRONTERA_UPSTREAM.md index c184f06..83a713c 100644 --- a/docs/FRONTERA_UPSTREAM.md +++ b/docs/FRONTERA_UPSTREAM.md @@ -138,7 +138,9 @@ nada, pero son peso muerto y confunden. `acampada` se registran desde `models/fork_workflows.js`. La config de serie del movil coincide con `acampada`. Queda en `workflows_model.js` la logica de skins del movil. -- Fase E: limpieza de selectores muertos en las hojas propias. +- Fase E (hecha el 19/10): fuera 153 selectores muertos de `mobile_base.css`, + `hive_acampada.css` y `Acampada.css` (287 lineas). Comparado pixel a pixel en 14 + pantallas: identicas. ## 6. Fase A: lo que se ha movido diff --git a/src/client/assets/styles/hive_acampada.css b/src/client/assets/styles/hive_acampada.css index 086235c..666fff2 100644 --- a/src/client/assets/styles/hive_acampada.css +++ b/src/client/assets/styles/hive_acampada.css @@ -96,23 +96,13 @@ body { background: var(--a26-bg) !important; } .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-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-add .bb-ico, .oasis-bottombar .bb-fab .bb-ico { - background: var(--a26-fg) !important; - color: var(--a26-bg) !important; - box-shadow: 0 3px 0 var(--a26-neon) !important; -} -.oasis-bottombar .bb-add .bb-lbl, .oasis-bottombar .bb-fab .bb-lbl { color: var(--a26-fg) !important; } -/* Nodos e Invitaciones: juntos y estrechos, que la barra quepa en 360px */ -.oasis-bottombar .bb-pair { +/* Nodos e Invitaciones: juntos y estrechos { background: var(--a26-bg) !important; border: var(--a26-bd-fino) !important; border-radius: var(--a26-radius) !important; padding: 2px !important; gap: 0 !important; } -.oasis-bottombar .bb-pair .bb-item { padding: 2px 4px !important; min-height: 44px !important; } -.oasis-bottombar .bb-pair .bb-ico { font-size: 18px !important; } -.oasis-bottombar .bb-pair .bb-lbl { font-size: 9.5px !important; } /* ---------- personalizar la barra ---------- */ .bb-manage-btn, .bb-pick-btn { @@ -138,12 +128,6 @@ body { background: var(--a26-bg) !important; } .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; } .chat-message-form .filter-btn::before, .forum-send-btn::before { color: var(--a26-fg) !important; } -.card-spread-centered .spread-btn, .card-spread-left .spread-btn, .spread-row .spread-btn, .card-chips-row .spread-btn { - background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; box-shadow: none !important; -} -.card-spread-centered .spread-btn.spread-btn-on, .card-spread-left .spread-btn.spread-btn-on { background: var(--a26-neon) !important; } -.activity-filter-btn { background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd) !important; } -#activity-filter-toggle:checked ~ .activity-filter-btn { background: var(--a26-neon) !important; color: var(--a26-fg) !important; } /* ---------- lo que mobile.css de upstream pinta en amarillo con !important ---------- */ /* mobile.css va detras del tema, asi que estas reglas tienen que ir aqui */ @@ -186,36 +170,6 @@ button, input[type="submit"], input[type="button"], .filter-btn, .create-button /* ---------- asistente de bienvenida: botones grandes de un toque ---------- */ .welcome-step { border: var(--a26-bd) !important; border-radius: var(--a26-radius) !important; } -.welcome-step-title { font-family: var(--a26-tit) !important; font-weight: 400 !important; text-transform: uppercase; font-size: 24px !important; } -.welcome-step-number { border: var(--a26-bd-fino) !important; font-weight: 700; } -.welcome-choices { gap: 14px !important; } -.welcome-choice.tap-choice, .welcome-ux-option.tap-choice { - background: var(--a26-bg) !important; - color: var(--a26-fg) !important; - border: var(--a26-bd) !important; - border-radius: var(--a26-radius) !important; - box-shadow: 0 5px 0 var(--a26-fg) !important; - font-family: var(--a26-txt) !important; - text-transform: none !important; - letter-spacing: 0 !important; - font-size: 16px !important; - min-height: 64px !important; - padding: 14px 16px !important; - margin: 0 0 4px !important; -} -.tap-choice .welcome-choice-name, .tap-choice .welcome-ux-label { - font-family: var(--a26-tit) !important; - font-weight: 400 !important; - text-transform: uppercase; - font-size: 22px !important; - letter-spacing: .02em; - line-height: 1.1; -} -.tap-choice .welcome-choice-hint { color: var(--a26-muted) !important; opacity: 1 !important; } -.tap-choice.is-current { background: var(--a26-neon) !important; } -.tap-choice.is-current .welcome-choice-hint { color: var(--a26-fg) !important; } -.tap-choice:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--a26-fg) !important; background: var(--a26-neon) !important; } -.welcome-ux-option.tap-choice .welcome-ux-shot { border: var(--a26-bd-fino) !important; } .welcome-banner .welcome-banner-start { font-size: 20px !important; min-height: 48px !important; padding: 8px 22px !important; } /* mobile.css pinta en naranja los botones sin clase y todos los .filter-btn */ @@ -289,7 +243,6 @@ button:not([class]), input[type="submit"]:not([class]), input[type="button"]:not border-radius: var(--a26-radius) !important; line-height: 1.2 !important; } -.welcome-choices:not(.welcome-langs) .tap-choice, .welcome-choices:not(.welcome-langs) .tap-choice * { text-align: left !important; } /* ---------- lo que tiene que seguir siendo pequeño ---------- */ /* los iconos de accion de cada tarjeta (borrar, fijar, enlace...): en fila y redondos */ @@ -348,7 +301,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important .filter-box__input::placeholder, input::placeholder, textarea::placeholder { color: #777 !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-id, .profile .feed-id, code { color: var(--a26-muted) !important; } +.main-column [class*="feed-id"], .profile .feed-id, code { color: var(--a26-muted) !important; } /* una sola caja por tarjeta: lo de dentro (cabecera, titulo, texto) sin marco */ .main-column section, .main-column [class*="-card-"], .main-column .card-section, .main-column .card-header, @@ -380,7 +333,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !important .content-actions .btn-singleview.btn-content, .content-actions a.btn-content { border-color: var(--a26-fg) !important; color: var(--a26-fg) !important; } /* opiniones y votos */ -.opinions-summary, .vote-btn, .feed-action-btn, .score-btn { +.opinions-summary, .vote-btn, .score-btn { background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; border-radius: 10px !important; box-shadow: none !important; font-family: var(--a26-txt) !important; text-transform: none !important; font-size: 14px !important; @@ -408,7 +361,7 @@ a.user-link { font-weight: 700 !important; text-decoration: underline !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; } .main-column [class*="feed-id"], .main-column a[href^="/author/"]:not(.user-link) { color: var(--a26-muted) !important; } -.profile-avatar, .profile img.avatar, .inhabitant-photo { border: var(--a26-bd) !important; } +.profile img.avatar, .inhabitant-photo { border: var(--a26-bd) !important; } /* etiquetas (#asamblea) y la tasa ECO: chips claros */ .card-tags { background: transparent !important; border: 0 !important; padding: 0 !important; display: flex !important; flex-wrap: wrap; gap: 6px; } @@ -544,10 +497,8 @@ label.welcome-ux-option:has(input:checked) { background: var(--a26-neon) !import .kc-btn { background: var(--a26-bg) !important; color: var(--a26-fg) !important; border: var(--a26-bd-fino) !important; } .kc-btn.on { background: var(--a26-neon) !important; } .kc-btn-stop { background: var(--a26-bg) !important; color: #c4003b !important; border-color: #c4003b !important; } -.chat-quote { background: var(--a26-soft) !important; border-left: 3px solid var(--a26-fg) !important; } -.chat-quote-author, .chat-quote-author a, .chat-quote-text, .chat-replying-label, .chat-reply-cancel, +.chat-reply-cancel, .chat-message-meta .chat-reply-btn { color: var(--a26-fg) !important; } -.chat-replying-to { background: #e5fcff !important; border-left: 3px solid var(--a26-fg) !important; } /* ---------- skins y workflows en Ajustes ---------- */ .skin-card, .workflow-card { diff --git a/src/client/assets/styles/mobile_base.css b/src/client/assets/styles/mobile_base.css index 0e3b955..a308bf9 100644 --- a/src/client/assets/styles/mobile_base.css +++ b/src/client/assets/styles/mobile_base.css @@ -9,7 +9,6 @@ html { overflow-x: clip; overflow-y: visible; height: auto; } body { overflow-x: clip; overflow-y: visible; } - .oasis-bottombar { display: flex; position: fixed; @@ -86,7 +85,7 @@ body { padding-top: 74px; background: #121212; } } .oasis-mobile-topbar .omt-menus .oasis-menu-btn span { text-decoration: none; } -/* ANULAR el "card" global de style.css `div{background:#222;border-radius:10px;box-shadow;padding:20px;margin-bottom:20px}` +/* ANULAR el "card" global de style.css `div {background:#222;border-radius:10px;box-shadow;padding:20px;margin-bottom:20px}` en nuestro chrome móvil propio: era el 2º color (caja mas clara) detras de los botones, la caja redondeada de la topbar y el fondo #222 detras del lanzador. */ .header, .launcher, .ln-group, .ln-grid, @@ -121,17 +120,6 @@ body { padding-top: 74px; background: #121212; } --c-muted: #8c8c8c; --radius-md: 12px; } -.oasis-bottombar .bb-fab .bb-ico { - width: 46px; height: 46px; - margin-top: -22px; - border-radius: 50%; - background: #FFD700; color: #121212; - display: flex; align-items: center; justify-content: center; - font-size: 22px; - box-shadow: 0 2px 8px rgba(0,0,0,.4); -} -.oasis-bottombar .bb-fab .bb-lbl { color: #FFD700; font-weight: bold; } - .main-column, .main-column p, .main-column li, .main-column a, .main-column span, .main-column td, .main-column h1, .main-column h2, .main-column h3 { overflow-wrap: anywhere; @@ -183,8 +171,8 @@ body { padding-top: 74px; background: #121212; } .main-column h2 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-2); } .main-column h3 { font-size: var(--fs-body-lg); font-weight: 600; margin: 0 0 var(--space-1); } .main-column p { font-size: var(--fs-body-lg); } -.main-column .created-at, .main-column .small, .main-column .time, -.main-column .meta, .main-column .author-meta, .main-column .subtitle { +.main-column .created-at, .main-column .time, +.main-column .meta, .main-column .subtitle { color: var(--c-muted); font-size: var(--fs-caption); } @@ -201,44 +189,24 @@ body { padding-top: 74px; background: #121212; } .main-column :is([class$="-card"], [class*="-card "]):active { background: #202020; } .btn, button, input[type="submit"], input[type="button"], .submit-button, -.filter-btn, .create-button, .edit-btn, .delete-btn, .join-btn, .leave-btn, .buy-btn { +.filter-btn, .create-button, .delete-btn, .buy-btn { min-height: 48px; } button:active, input[type="submit"]:active, .submit-button:active, -.filter-btn:active, .create-button:active, .edit-btn:active, -.delete-btn:active, .join-btn:active, .leave-btn:active, .buy-btn:active { +.filter-btn:active, .create-button:active, +.delete-btn:active, .buy-btn:active { filter: brightness(.85); } .main-column a:active { opacity: .6; } * { -webkit-tap-highlight-color: transparent; } -a, button, label, .tap, .oasis-menu-btn, .bb-item, .oasis-nav-header, .oasis-nav-list li a { +a, button, label, .oasis-menu-btn, .bb-item, .oasis-nav-header, .oasis-nav-list li a { touch-action: manipulation; } body { overscroll-behavior: none; } .main-content, .main-column, .header { overflow: visible; } -/* === Usabilidad 0.9.1: Personal/Community filtran el lanzador server-side (enlaces ?hive=) + desplegable FILTER === */ - -/* desplegable FILTER de la ristra de filtros de Activity (oculto por defecto) */ -.activity-filter-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0; } -.activity-filter-btn { - display: flex; align-items: center; justify-content: center; gap: 8px; - width: 100%; min-height: 44px; margin: 4px 0 8px; padding: 10px 12px; - border: 1.5px solid #333; border-radius: 10px; - background: #121212; color: #FFD700; - font-weight: bold; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; -} -.activity-filter-caret { transition: transform 150ms ease; } -#activity-filter-toggle:checked ~ .activity-filter-btn { background: #FFD700; color: #121212; border-color: #FFD700; } -#activity-filter-toggle:checked ~ .activity-filter-btn .activity-filter-caret { transform: rotate(180deg); } -.activity-filter-panel { display: none; } -#activity-filter-toggle:checked ~ .activity-filter-panel { display: block; } -.activity-filter-panel .activity-filter-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; } -.activity-filter-panel .activity-filter-col { display: contents; } -.activity-filter-panel form { margin: 0; } - .bb-manage { margin: 8px 0 16px; } .bb-manage h3, .bb-manage-add h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; @@ -298,17 +266,6 @@ body { overscroll-behavior: none; } .oasis-mobile-topbar { padding-top: calc(env(safe-area-inset-top, 0px) + 10px); } -.oasis-bottombar .bb-pair { - display: flex; align-items: center; - flex: 0 0 auto; - gap: 2px; padding: 3px; - background: #262626; - border: 1px solid #3a3a3a; - border-radius: 999px; -} -.oasis-bottombar .bb-pair .bb-item { flex: 0 0 auto; padding: 2px 8px; } -.oasis-bottombar .bb-pair .bb-lbl { font-size: 8px; } - .oasis-bottombar a.bb-item.current .bb-ico { background: #FFD700; color: #121212; border-radius: 999px; padding: 4px 12px; @@ -320,8 +277,7 @@ body { overscroll-behavior: none; } .main-column span, .main-column td, .main-column th, .main-column label, .main-column h1, .main-column h2, .main-column h3, .main-column h4, .main-column strong, .main-column em, .main-column small, -.created-at, .post-meta, .feed-post-meta, -.feed-row .small, .feed-row .time, .feed-row .created-at, +.created-at, .feed-row .time, .feed-row .created-at, .profile-sensors-box > *, .card-field .card-value, .card-field .card-label { overflow-wrap: break-word; @@ -342,8 +298,7 @@ body { overscroll-behavior: none; } } button, input[type="submit"], input[type="button"], -.filter-btn, a.filter-btn, .create-button, .edit-btn, .delete-btn, -.join-btn, .leave-btn, .buy-btn, .submit-button, .btn, +.filter-btn, a.filter-btn, .create-button, .delete-btn, .buy-btn, .submit-button, .btn, .conn-actions button, .peers-conn-actions button, .mode-buttons button, .mode-buttons .filter-btn, .filter-group button, .filter-group .filter-btn, @@ -484,84 +439,10 @@ button, input[type="submit"], input[type="button"], border-top: 1px solid #333; margin: 16px 0; } -.activity-filter-acc { width: 100%; margin-bottom: 8px; } - -.activity-quick-modes { - display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; -} -.activity-quick-modes form { flex: 1 1 0; min-width: 0; margin: 0; display: flex; } -.activity-quick-modes .filter-btn { - flex: 1 1 0; width: 100%; min-height: 44px; - white-space: nowrap; word-break: keep-all; overflow-wrap: normal; - padding-left: 6px; padding-right: 6px; font-size: 14px; -} - -.activity-groups { list-style: none; padding: 0; margin: 0; } - -.activity-groups .oasis-nav-header .emoji { display: none; } -.activity-groups .oasis-nav-header .nav-text { flex: 1 1 auto; } -.activity-groups .act-count { - flex: 0 0 auto; min-width: 20px; text-align: center; - font-size: 11px; font-weight: 700; color: #121212; - background: #FFD700; border-radius: 999px; padding: 1px 7px; - margin: 0 8px 0 0; -} - -.activity-groups .oasis-nav-list li { list-style: none; margin: 0; padding: 0; } -.activity-groups .oasis-nav-list form { margin: 0; display: block; width: 100%; } -.activity-groups .oasis-nav-list .filter-btn { - display: block; width: 100%; text-align: left; - min-height: 44px; margin: 2px 0; box-sizing: border-box; -} -.activity-groups .oasis-nav-list .filter-btn.active { - outline: 2px solid #FFD700; outline-offset: -2px; -} - .message-list { display: flex; flex-direction: column; gap: 4px; width: 100%; } .message-list .pm-thread { display: flex; flex-direction: column; width: 100%; align-self: stretch; } .pm-thread-replies { display: flex; flex-direction: column; gap: 4px; } -.pm-card.pm-bubble { - max-width: 82%; width: fit-content; min-width: 0; - box-sizing: border-box; padding: 8px 12px; margin: 2px 0; - border-radius: 16px; border: 1px solid #333; - background: #1e1e1e; box-shadow: none; cursor: default; -} - -.pm-card.pm-bubble.pm-recv { - align-self: flex-start; margin-left: 0; margin-right: auto; - border-bottom-left-radius: 4px; background: #1e1e1e; border-color: #343434; -} - -.pm-card.pm-bubble.pm-sent { - align-self: flex-end; margin-left: auto; margin-right: 0; - border-bottom-right-radius: 4px; background: #2a2413; border-color: #5c4c1f; -} - -.pm-bubble .pm-bubble-sender { font-size: 11px; font-weight: 700; color: #FFD700; margin-bottom: 3px; } -.pm-bubble .pm-bubble-sender a { color: #FFD700; } - -.pm-bubble .message-text { font-size: 15px; line-height: 1.42; color: #FFD700; margin: 0; } -.pm-bubble .message-text a { color: #FFD700; } - -.pm-bubble .pm-bubble-meta { - display: flex; flex-wrap: wrap; align-items: center; - gap: 6px; margin-top: 4px; font-size: 10px; color: var(--c-muted, #8c8c8c); -} -.pm-card.pm-sent .pm-bubble-meta { justify-content: flex-end; } -.pm-card.pm-recv .pm-bubble-meta { justify-content: flex-start; } -.pm-bubble .pm-bubble-subject { font-style: italic; opacity: .75; max-width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -.pm-bubble .pm-bubble-lock { opacity: .85; } -.pm-bubble .pm-bubble-eco { font-size: 9px; opacity: .9; } -.pm-bubble .pm-bubble-eco * { font-size: 9px; } - -.pm-bubble .pm-actions { margin-top: 6px; display: flex; gap: 6px; } -.pm-card.pm-sent .pm-actions { justify-content: flex-end; } -.pm-bubble .pm-actions .pm-btn { font-size: 10px; padding: 3px 8px; min-height: 28px; } -.pm-bubble .pm-actions form { margin: 0; } - -.pm-bubble .pm-info-table { display: none; } - .pm-thread .pm-thread-details { width: 100%; } .pm-thread .pm-thread-toggle { font-size: 12px; color: var(--c-muted, #8c8c8c); padding: 4px 0; cursor: pointer; } @@ -615,7 +496,7 @@ button, input[type="submit"], input[type="button"], .main-column p, .main-column li, .tags-header p, .tags-header .prefs-help, .indexing-note, .indexing-percent, -.error-page-message, .welcome-text, .message-text, .pm-bubble .message-text { +.error-page-message, .message-text { text-wrap: pretty; line-height: 1.55; max-width: min(66ch, 100%); @@ -626,7 +507,6 @@ button, input[type="submit"], input[type="button"], } .main-column p + p { margin-top: var(--space-3, 16px); } .tags-header p, .tags-header .prefs-help, .indexing-note { line-height: 1.5; margin: 4px 0 0 0; } -.pm-bubble .message-text { line-height: 1.45; max-width: 100%; } [style*="auto-fill"], [style*="minmax(240px"], [style*="minmax(280px"], [style*="minmax(300px"], @@ -635,7 +515,7 @@ button, input[type="submit"], input[type="button"], display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; } -.trending-container > *, .games-grid > *, .market-grid > *, .tribe-grid > *, +.trending-container > *, .market-grid > *, .tribe-grid > *, .feed-container, .feed-card, .trending-card, .main-column article, .main-column [class*="-card"], .main-column [class*="-item"], .main-column [class*="-entry"], .main-column .card { @@ -663,8 +543,7 @@ button, input[type="submit"], input[type="button"], [style*="width:60%"], [style*="width: 60%"], [style*="width:40%"], [style*="width: 40%"] { width: 100% !important; max-width: 100% !important; } -.main-column [style*="max-width: 800px"], .main-column [style*="max-width:800px"], -.ai-response, .ai-train-bar { +.main-column [style*="max-width: 800px"], .main-column [style*="max-width:800px"] { max-width: 100% !important; width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } .message-list, .pm-thread, .pm-thread-replies { width: 100%; max-width: 100%; box-sizing: border-box; } @@ -672,7 +551,6 @@ button, input[type="submit"], input[type="button"], .main-column p .user-link, .main-column p a[href^="/author/"], .main-column li .user-link, .main-column span .user-link, .main-column .message-text .user-link, .main-column .message-text a[href^="/author/"], -.pm-bubble .message-text .user-link, .pm-bubble .message-text a[href^="/author/"], .pm-quote a[href^="/author/"] { display: inline; white-space: normal; overflow-wrap: anywhere; word-break: keep-all; @@ -693,19 +571,18 @@ button, input[type="submit"], input[type="button"], overflow: hidden; text-overflow: ellipsis; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } -.invites-list .user-link.peer-key, .peers-list .block-info-table td .peer-key { +.peers-list .block-info-table td .peer-key { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: normal; } -.main-column .message-text a[href^="http"], .main-column p a[href^="http"], -.pm-bubble .message-text a[href^="http"], .main-column .message-text a.oasis-path-link, +.main-column .message-text a[href^="http"], .main-column p a[href^="http"], .main-column .message-text a.oasis-path-link, .main-column .message-text a.job-link, .main-column .message-text a.project-link, .main-column .message-text a.market-link { overflow-wrap: anywhere; word-break: keep-all; -webkit-hyphens: none; hyphens: none; } -.main-column code:not(pre code), .pm-bubble .message-text code { +.main-column code:not(pre code) { display: inline; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; white-space: pre-wrap; } @@ -717,48 +594,14 @@ button, input[type="submit"], input[type="button"], .main-column .tags-header p { font-size: 13px; line-height: 1.35; margin: 0; } .main-column { padding: 10px 12px 16px 12px; } -.activity-filter-acc { margin-bottom: 4px; } - -.empty-state { - display: flex; flex-direction: column; align-items: center; - justify-content: center; text-align: center; - padding: 40px 16px; gap: 8px; width: 100%; box-sizing: border-box; -} -.empty-state-icon { font-size: 44px; line-height: 1; opacity: 0.55; } -.empty-state-title { font-size: 16px; font-weight: 700; margin: 4px 0 0 0; color: #FFD700; } -.empty-state-text { color: var(--c-muted, #8c8c8c); font-size: 14px; line-height: 1.4; max-width: 40ch; margin: 0; } -.empty-state-cta { margin-top: 10px; min-height: 48px; display: inline-flex; align-items: center; } - -.activity-filter-collapsed { - display: flex; align-items: center; gap: 10px; - flex-wrap: wrap; margin-bottom: 8px; width: 100%; -} -.activity-back { - display: inline-flex; align-items: center; gap: 4px; - min-height: 44px; padding: 6px 14px 6px 10px; flex: 0 0 auto; -} -.activity-back-arrow { font-size: 22px; line-height: 1; font-weight: bold; } -.activity-active-filter { - font-weight: 700; color: #FFD700; text-transform: uppercase; - font-size: 13px; letter-spacing: .03em; -} .oasis-bottombar .bb-item { min-height: 48px; } -.oasis-bottombar .bb-pair .bb-item { min-height: 44px; padding: 4px 10px; } .oasis-mobile-menus .oasis-menu-btn { min-height: 48px; } -.pm-bubble .pm-actions .pm-btn { min-height: 40px; padding: 6px 12px; } -.score-btn, .vote-btn, .feed-action-btn { +.score-btn, .vote-btn { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; } -.score-btn:active, .vote-btn:active, .feed-action-btn:active { filter: brightness(.85); } - -.oasis-bottombar .bb-add .bb-ico { - background: #FFD700; color: #121212; border-radius: 999px; - width: 30px; height: 30px; display: inline-flex; - align-items: center; justify-content: center; - font-weight: bold; font-size: 20px; line-height: 1; -} +.score-btn:active, .vote-btn:active { filter: brightness(.85); } .bb-pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; margin-top: 8px; @@ -774,7 +617,6 @@ button, input[type="submit"], input[type="button"], .bb-pick-ico { font-size: 26px; color: #FFD700; line-height: 1; } .bb-pick-lbl { font-size: 11px; text-align: center; line-height: 1.2; } - /* Ocultar los checkboxes nativos del drawer (nav-left/right-toggle) — si no, salen 2 cuadrados blancos arriba */ .oasis-nav-side-toggle { position: absolute; @@ -833,66 +675,14 @@ button, input[type="submit"], input[type="button"], /* --- Reply a mensaje en chats (server-side ?replyTo=, sin JS) --- */ .chat-message-meta .chat-reply-btn { margin-left: auto; padding: 0 4px; color: #FFD700; text-decoration: none; font-size: 15px; opacity: .85; } .chat-message-self .chat-message-meta .chat-reply-btn { margin-left: 8px; } -.chat-quote { - display: block; border-left: 3px solid #FFD700; padding: 3px 8px; margin: 0 0 5px; - background: rgba(255,215,0,.08); border-radius: 6px; font-size: 12px; line-height: 1.3; -} -.chat-quote-author, .chat-quote-author a { color: #FFD700; font-weight: 700; margin-right: 6px; } -.chat-quote-text { color: #FFDD44; } -.chat-replying-to { - display: flex; flex-wrap: wrap; align-items: center; gap: 6px; - border-left: 3px solid #FFD700; background: rgba(255,215,0,.10); - padding: 6px 10px; margin-bottom: 8px; border-radius: 8px; font-size: 12px; -} -.chat-replying-label { color: #FFD700; font-weight: 700; } .chat-reply-cancel { margin-left: auto; color: #FFD700; text-decoration: none; font-weight: 700; font-size: 14px; } - -/* --- Switcher de chats: tira horizontal para saltar entre conversaciones --- */ -.chat-switcher { - display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; margin: 4px 0 8px; - -webkit-overflow-scrolling: touch; scrollbar-width: none; -} -.chat-switcher::-webkit-scrollbar { display: none; } -.chat-switch-chip { - flex: 0 0 auto; max-width: 140px; padding: 6px 12px; border-radius: 999px; - background: #1c1c1c; border: 1px solid #333; color: #FFD700; text-decoration: none; - font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} -.chat-switch-chip.active { background: #FFD700; color: #121212; border-color: #FFD700; font-weight: 700; } - -/* --- Subtopics de foro: tira de pestañas (topics con nombre) + input de topic en el compose --- */ -.forum-topics { - display: flex; gap: 6px; overflow-x: auto; padding: 6px 0; margin: 4px 0 8px; - scrollbar-width: none; -} -.forum-topics::-webkit-scrollbar { display: none; } -.forum-topic-chip { - flex: 0 0 auto; max-width: 160px; padding: 6px 14px; border-radius: 999px; - background: #1c1c1c; border: 1px solid #333; color: #FFD700; text-decoration: none; - font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; -} -.forum-topic-chip.active { background: #FFD700; color: #121212; border-color: #FFD700; font-weight: 700; } .new-message-form { flex-wrap: wrap; } -.forum-topic-input { - flex: 1 0 100%; box-sizing: border-box; border-radius: 12px; - padding: 8px 12px; font-size: 13px; margin: 0 0 6px; -} /* --- #1: chat estilo Signal — compose ABAJO + mensajes arriba (el reply deja de "saltar") --- */ .tribe-main.chat-full-width { display: flex; flex-direction: column-reverse; } #chatbox { scroll-margin-top: 8px; scroll-margin-bottom: 8px; } -/* --- Botón spread → pill compacto (vence button{min-height:48px}/ancho completo) --- */ -.card-spread-centered, .card-spread-left, .spread-row { margin: 6px 0; } -.card-spread-centered .spread-btn, .card-spread-left .spread-btn, -.spread-row .spread-btn, .card-chips-row .spread-btn { - display: inline-flex; align-items: center; justify-content: center; - width: auto; min-width: 0; min-height: 30px; height: 30px; - padding: 2px 14px; font-size: 13px; line-height: 1; - border-radius: 999px; border: 1px solid #555; background: #1a1a1a; color: #FFD700; -} -.card-spread-centered .spread-btn.spread-btn-on, -.card-spread-left .spread-btn.spread-btn-on { background: #FFD700; color: #1a1a1a; border-color: #FFD700; } +/* --- Botón spread → pill compacto (vence button {min-height:48px} /* --- Caja de votos (▲ n ▼): compacta y HORIZONTAL. El problema era una cadena de flex-stretch (comment-vote-col flex → estiraba la caja a 135px). @@ -934,11 +724,11 @@ button, input[type="submit"], input[type="button"], .forum-comment .comment-text-col > div { background: transparent; border: none; padding: 0; } .forum-comment { padding: 10px 12px; margin-bottom: 8px; } /* barra de votos alineada a la izquierda, no centrada, para que ocupe poco. - `display:flex !important` es DE PELEA: vence a mobile.css:164 `.comment-body-row{display:block!important}` */ + `display:flex !important` es DE PELEA: vence a mobile.css:164 `.comment-body-row {display:block!important}` */ .forum-comment .comment-body-row { display: flex !important; flex-direction: column; align-items: flex-start; } /* --- Reply/compose del foro estilo Signal: fila [textarea que crece] + [botón REDONDO con icono ↩] --- */ -/* especificidad extra (.main-column …) para ganar a nuestra propia regla `.main-column form{display:block}` sin !important */ +/* especificidad extra (.main-column …) para ganar a nuestra propia regla `.main-column form {display:block}` sin !important */ .main-column .new-reply .comment-form, .main-column .new-message-form { display: flex; flex-direction: row; align-items: flex-end; gap: 8px; margin: 6px 0 0; } .main-column .new-message-form br { display: none; } diff --git a/src/client/assets/themes/Acampada.css b/src/client/assets/themes/Acampada.css index ae5edf6..8c3211f 100644 --- a/src/client/assets/themes/Acampada.css +++ b/src/client/assets/themes/Acampada.css @@ -37,7 +37,7 @@ html, body { body { font-size: 17px; line-height: 1.5; } header, footer, .header, .main-content, .main-column, .sidebar-left, .sidebar-right, -section, article, div, table, .profile, .action-container { +section, article, div, table, .profile { background-color: transparent !important; color: var(--a26-fg) !important; border-color: var(--a26-fg) !important; @@ -87,7 +87,7 @@ h3 { font-size: 21px !important; } /* --- botones: los .bt de acampada --- */ button, input[type="submit"], input[type="button"], -.filter-btn, .create-button, .edit-btn, .join-btn, .leave-btn, .buy-btn, .delete-btn, +.filter-btn, .create-button, .buy-btn, .delete-btn, a.user-link, button.user-link, .date-link, .welcome-banner-start, .update-download-link { font-family: var(--a26-tit) !important; font-weight: 400 !important; @@ -173,7 +173,7 @@ table td { border-color: var(--a26-fg) !important; } /* --- colores sueltos de OasisMobile que se quedaban en amarillo o naranja --- */ .avatar, .article img, .post-preview img { border-color: var(--a26-fg) !important; } .profile .name, .snh-invite-code, .stats-kpi-label, .stats-kpi-value, .carbon-bar-formula, -a.hashtag, .chat-topic-title, .chat-topic-active .chat-topic-title, .chat-list-hide-btn, +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; }