[0.9.1] Mobile: Signal-style chats + compact threaded forums + circular reply
- Chats/PM: message bubbles (own messages right with accent, others left), compact meta, all via the existing .chat-message-self hooks — no view changes. - Forums: shrink the oversized vote widget to a small horizontal bar, flatten the nested boxes into one clean comment block, indent replies by depth so threads read as threads, tone down the highlighted-reply frame. - Reply/compose: Signal-style row — a growing text box plus a round send button with a ↩ / ➤ glyph (CSS ::before), instead of the full-width bar. - All in the OasisMobile theme (loads after mobile.css so it wins by cascade); where epsylon forces !important on the forum layout we match it, scoped to the forum/chat widgets. No client JS, no changes to any feature view.
This commit is contained in:
s1to
parent
7f85389a88
commit
2b2c65fc7a
1 changed files with 130 additions and 0 deletions
|
|
@ -796,3 +796,133 @@ button, input[type="submit"], input[type="button"],
|
|||
pointer-events: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
Usabilidad 0.9.1 — Chats estilo Signal + widgets compactos + foros con hilos
|
||||
Todo en NUESTRO tema (carga tras mobile.css → gana por cascada, sin !important)
|
||||
========================================================================== */
|
||||
|
||||
/* --- Chats: burbujas tipo Signal (los hooks .chat-message-self/-author ya existen) --- */
|
||||
.chat-messages-list { display: flex; flex-direction: column; gap: 4px; width: 100%; }
|
||||
.chat-message {
|
||||
max-width: 82%; width: fit-content; min-width: 0; box-sizing: border-box;
|
||||
padding: 8px 12px; margin: 2px 0;
|
||||
border: 1px solid #343434; background: #1e1e1e;
|
||||
border-radius: 16px; border-bottom-left-radius: 4px;
|
||||
align-self: flex-start;
|
||||
}
|
||||
.chat-message.chat-message-self {
|
||||
align-self: flex-end; margin-left: auto; margin-right: 0;
|
||||
background: #2a2413; border-color: #5c4c1f;
|
||||
border-bottom-left-radius: 16px; border-bottom-right-radius: 4px;
|
||||
}
|
||||
.chat-message-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 10px; color: var(--c-muted, #8c8c8c); }
|
||||
.chat-message.chat-message-self .chat-message-meta { justify-content: flex-end; }
|
||||
.chat-message-sender, .chat-message-sender a { font-size: 11px; font-weight: 700; color: #FFA500; }
|
||||
.chat-message-date { opacity: .8; }
|
||||
.chat-message-text {
|
||||
display: block; font-size: 15px; line-height: 1.42; color: #ececec; margin: 0;
|
||||
word-break: break-word; overflow-wrap: anywhere;
|
||||
}
|
||||
.chat-message-text a { color: #FFD700; }
|
||||
.chat-message-image-wrap { margin-top: 6px; }
|
||||
.chat-message-image { max-width: 100%; border-radius: 10px; }
|
||||
|
||||
/* --- Compose de chat: caja redondeada + enviar como pill (no bloque naranja de ancho completo) --- */
|
||||
.chat-message-form textarea {
|
||||
width: 100%; box-sizing: border-box; border-radius: 14px;
|
||||
padding: 10px 14px; resize: vertical; font-size: 15px;
|
||||
}
|
||||
.chat-message-form .filter-btn {
|
||||
width: 46px !important; height: 46px !important; min-width: 46px !important; min-height: 46px !important;
|
||||
padding: 0 !important; border-radius: 50% !important;
|
||||
display: inline-flex !important; align-items: center !important; justify-content: center !important;
|
||||
font-size: 0 !important; line-height: 0 !important;
|
||||
}
|
||||
.chat-message-form .filter-btn::before { content: "\27A4"; font-size: 18px; line-height: 1; color: #121212; }
|
||||
.chat-message-form input[type="file"] { font-size: 12px; }
|
||||
|
||||
/* --- 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: #ffa500;
|
||||
}
|
||||
.card-spread-centered .spread-btn.spread-btn-on,
|
||||
.card-spread-left .spread-btn.spread-btn-on { background: #ffa500; color: #1a1a1a; border-color: #ff7300; }
|
||||
|
||||
/* --- Caja de votos (▲ n ▼): compacta y HORIZONTAL.
|
||||
El problema era una cadena de flex-stretch (comment-vote-col flex → estiraba la caja a 135px).
|
||||
Rompemos el estiramiento con height:auto + inline-flex en toda la cadena, con !important
|
||||
para vencer el min-height:44px de .score-btn (762) y el !important de epsylon en mobile.css. --- */
|
||||
.comment-vote-col { display: block !important; height: auto !important; min-height: 0 !important; width: auto !important; }
|
||||
.forum-score-box {
|
||||
display: inline-flex !important; height: auto !important; min-height: 0 !important;
|
||||
min-width: 0 !important; width: auto !important;
|
||||
padding: 4px 8px !important; border-radius: 10px !important;
|
||||
flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important;
|
||||
}
|
||||
.forum-score-form {
|
||||
display: inline-flex !important; height: auto !important; width: auto !important;
|
||||
flex-direction: row !important; flex-wrap: nowrap !important; gap: 12px !important; align-items: center !important;
|
||||
}
|
||||
.score-btn {
|
||||
flex: 0 0 auto !important;
|
||||
width: 30px !important; height: 30px !important; min-width: 30px !important; min-height: 30px !important;
|
||||
font-size: 0.95em !important; border-radius: 8px !important; padding: 0 !important;
|
||||
}
|
||||
.score-total { flex: 0 0 auto !important; font-size: 1.15em !important; min-height: 0 !important; height: auto !important; margin: 0 !important; white-space: nowrap; }
|
||||
.comment-votes .votes-count { font-size: 11px; }
|
||||
|
||||
/* Aplanar el comentario: quitar las cajas/recuadros internos para que sea UN bloque limpio
|
||||
(cada sección salía como una tarjeta con padding enorme → mucho hueco muerto) */
|
||||
.forum-comment .comment-header,
|
||||
.forum-comment .comment-body-row,
|
||||
.forum-comment .comment-vote-col,
|
||||
.forum-comment .comment-text-col,
|
||||
.forum-comment .new-reply {
|
||||
background: transparent !important; border: none !important; box-shadow: none !important;
|
||||
padding: 0 !important; margin: 6px 0 0 !important; border-radius: 0 !important;
|
||||
}
|
||||
.forum-comment .comment-header { margin-top: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; }
|
||||
/* la barra de votos de abajo ya muestra el score → ocultar el ▲:0 ▼:0 redundante de la cabecera */
|
||||
.forum-comment .comment-header .comment-votes { display: none !important; }
|
||||
.forum-comment .comment-text-col p { margin: 4px 0 !important; }
|
||||
.forum-comment .comment-text-col > div { background: transparent !important; border: none !important; padding: 0 !important; }
|
||||
.forum-comment { padding: 10px 12px !important; margin-bottom: 8px !important; }
|
||||
/* barra de votos alineada a la izquierda, no centrada, para que ocupe poco */
|
||||
.forum-comment .comment-body-row { display: flex !important; flex-direction: column !important; align-items: flex-start !important; }
|
||||
|
||||
/* --- Reply/compose del foro estilo Signal: fila [textarea que crece] + [botón REDONDO con icono ↩] --- */
|
||||
.new-reply .comment-form,
|
||||
.new-message-form { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 8px !important; margin: 6px 0 0 !important; }
|
||||
.new-message-form br { display: none !important; }
|
||||
.comment-textarea, .new-message-form textarea {
|
||||
flex: 1 1 auto !important; box-sizing: border-box; border-radius: 14px;
|
||||
padding: 9px 14px; min-height: 42px; resize: none; font-size: 14px; margin: 0 !important;
|
||||
}
|
||||
.forum-send-btn {
|
||||
flex: 0 0 auto !important;
|
||||
width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important;
|
||||
padding: 0 !important; margin: 0 !important; border-radius: 50% !important;
|
||||
font-size: 0 !important; line-height: 0 !important;
|
||||
display: inline-flex !important; align-items: center !important; justify-content: center !important;
|
||||
}
|
||||
.forum-send-btn::before { content: "\21A9"; font-size: 20px; line-height: 1; color: #121212; }
|
||||
.new-reply { margin-top: 6px; }
|
||||
|
||||
/* --- Fase 2: hilos anidados. mobile.css fuerza margin-left:0 !important → necesitamos !important para ganar --- */
|
||||
.forum-comment.level-1 { margin-left: 10px !important; border-left: 2px solid #333; }
|
||||
.forum-comment.level-2 { margin-left: 20px !important; border-left: 2px solid #3a3a3a; }
|
||||
.forum-comment.level-3 { margin-left: 28px !important; border-left: 2px solid #404040; }
|
||||
.forum-comment.level-4 { margin-left: 34px !important; border-left: 2px solid #454545; }
|
||||
/* comentario destacado: acento sutil a la izquierda en vez del marco naranja enorme */
|
||||
.forum-comment.highlighted-reply { border: 1px solid #3a3a3a !important; border-left: 3px solid #FFA500 !important; background: #1b1a16 !important; }
|
||||
|
||||
/* --- Reply del foro SIN tocar la vista de epsylon: la cajita se agranda al enfocarla;
|
||||
el botón redondo ↩ está SIEMPRE visible (el usuario pidió icono de reply, no gesto/JS). --- */
|
||||
.new-reply .comment-textarea { min-height: 42px; }
|
||||
.new-reply:focus-within .comment-textarea { min-height: 64px; }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue