From 634625d134945f6663909587a1bab00385d7c1a5 Mon Sep 17 00:00:00 2001 From: s1to Date: Thu, 6 Aug 2026 17:27:43 +0200 Subject: [PATCH] [0.9.1] FORK_IA_UX v5: drop 29 !important by replacing the CSS (no visual change) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Per feedback (avoid !important, substitute the CSS). Verified with computed-style diffs on the real forum/chat DOM — layout is byte-identical. - OasisMobile.css: 45 -> 23 !important. Removed the ones that only fought epsylon's NARROW rules; win by load-order/specificity instead (e.g. .forum-score-box .forum-score-form, .main-column .new-message-form). Kept the truly load-bearing ones (inline-style overrides [style*=...], round buttons vs the broad button{min-height:44px!important}, and comment-body-row vs mobile.css:164). - mobile.css (FORK ONLY, user-authorized): removed !important from 7 narrow forum/chat rules (.forum-comment margin/padding, .comment-body-row flex-dir, .comment-vote/text-col width, .forum-score-* flex, .comment-textarea width) so our theme wins without !important. Not touched on UX_OASIS. --- src/client/assets/styles/mobile.css | 14 +++--- src/client/assets/themes/OasisMobile.css | 60 ++++++++++++------------ 2 files changed, 38 insertions(+), 36 deletions(-) diff --git a/src/client/assets/styles/mobile.css b/src/client/assets/styles/mobile.css index 18c1720..e7e301d 100644 --- a/src/client/assets/styles/mobile.css +++ b/src/client/assets/styles/mobile.css @@ -510,28 +510,28 @@ h3 { font-size: 1em !important; } } .forum-comment { - margin-left: 0 !important; - padding-left: 8px !important; + margin-left: 0; + padding-left: 8px; } .comment-body-row { - flex-direction: column !important; + flex-direction: column; } .comment-vote-col, .comment-text-col { - width: 100% !important; + width: 100%; } .forum-score-box, .forum-score-form { - flex-direction: row !important; - justify-content: center !important; + flex-direction: row; + justify-content: center; } .new-message-form textarea, .comment-textarea { - width: 100% !important; + width: 100%; } [style*="grid-template-columns: repeat(6"] { diff --git a/src/client/assets/themes/OasisMobile.css b/src/client/assets/themes/OasisMobile.css index 1238d43..5f76e03 100644 --- a/src/client/assets/themes/OasisMobile.css +++ b/src/client/assets/themes/OasisMobile.css @@ -956,23 +956,23 @@ button, input[type="submit"], input[type="button"], 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; } +.comment-vote-col { display: block; height: auto; min-height: 0; width: auto; } .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; + display: inline-flex; height: auto; min-height: 0; + min-width: 0; width: auto; + padding: 4px 8px; border-radius: 10px; + flex-direction: row; flex-wrap: nowrap; gap: 12px; align-items: center; } -.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; +.forum-score-box .forum-score-form { + display: inline-flex; height: auto; width: auto; + flex-direction: row; flex-wrap: nowrap; gap: 12px; align-items: center; } .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; } +.score-total { flex: 0 0 auto; font-size: 1.15em; min-height: 0; height: auto; margin: 0; white-space: nowrap; } .comment-votes .votes-count { font-size: 11px; } /* Aplanar el comentario: quitar las cajas/recuadros internos para que sea UN bloque limpio @@ -982,25 +982,27 @@ button, input[type="submit"], input[type="button"], .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; + background: transparent; border: none; box-shadow: none; + padding: 0; margin: 6px 0 0; border-radius: 0; } -.forum-comment .comment-header { margin-top: 0 !important; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; } +.forum-comment .comment-header { margin-top: 0; 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; } +.forum-comment .comment-header .comment-votes { display: none; } +.forum-comment .comment-text-col p { margin: 4px 0; } +.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}` */ +.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 ↩] --- */ -.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; +/* 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; } +.main-column .comment-textarea, .main-column .new-message-form textarea { + flex: 1 1 auto; box-sizing: border-box; border-radius: 14px; + padding: 9px 14px; min-height: 42px; resize: none; font-size: 14px; margin: 0; } .forum-send-btn { flex: 0 0 auto !important; @@ -1013,12 +1015,12 @@ button, input[type="submit"], input[type="button"], .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; } +.forum-comment.level-1 { margin-left: 10px; border-left: 2px solid #333; } +.forum-comment.level-2 { margin-left: 20px; border-left: 2px solid #3a3a3a; } +.forum-comment.level-3 { margin-left: 28px; border-left: 2px solid #404040; } +.forum-comment.level-4 { margin-left: 34px; 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 #FFD700 !important; background: #1b1a16 !important; } +.forum-comment.highlighted-reply { border: 1px solid #3a3a3a; border-left: 3px solid #FFD700; background: #1b1a16; } /* --- 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). --- */