[0.9.1] FORK_IA_UX v5: drop 29 !important by replacing the CSS (no visual change)
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.
This commit is contained in:
s1to
parent
b31b8cbfbd
commit
634625d134
2 changed files with 38 additions and 36 deletions
|
|
@ -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"] {
|
||||
|
|
|
|||
|
|
@ -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). --- */
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue