Inna/NightSpire
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Foro: botones con el estilo del tema y sin descuadres

Browse Source 
Los botones del foro usaban un dorado propio; ahora comparten el lenguaje del
<button> del tema (fondo translúcido, texto crema en mayúsculas, aclara al hover),
el mismo que sale como «Editar» en el resto de la web.

Arreglos de maquetación:
- Altura fija (42px) con inline-flex en .nice_button: los <button> heredaban
  height:50px del tema y los <a> no, y en la misma fila quedaban a distinta altura
  (se notaba sobre todo en «Borrar», que es un <button>).
- Se quita el height:20px del <li> de post_controls, que aplastaba los botones.
- Texto de los enlaces-botón forzado a crema: el a:link/:visited del tema
  (más específico) pintaba de azul el texto de «Crear tema».
- «Editar», «Borrar» y «Desbloquear» pasan a .nice_button para que toda la fila
  de acciones sea homogénea.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
Inna Hoover Brown
2026-07-16 12:31:47 +00:00
parent af707ad98c
commit 9b44af9675
3 changed files with 55 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-next/app/forum.css
+44 -11
View File
@@ -201,12 +201,7 @@ h3.post_field dd { margin: 0; }
.post_deleted { opacity: .5; }
ul.post_controls { display: flex; justify-content: flex-end; align-items: center; gap: 8px; list-style: none; padding: 15px; margin: auto 0 0; }
ul.post_controls li { height: 20px; }
ul.post_controls li a {
display: block; border-radius: 2px; padding: 4px 8px; background: rgba(255, 255, 255, .04); font-weight: bold; color: #8a8578;
box-shadow: 0 1px 1px rgba(0, 0, 0, .13), inset 0 1px 1px rgba(255, 255, 255, .04);
}
ul.post_controls li a:hover { background: rgba(255, 255, 255, .08); color: var(--forum-gold); }
ul.post_controls li { display: inline-flex; align-items: center; }
ul.post_controls .post_date { color: #6d6a5e; font-weight: bold; font-size: 11px; margin-right: auto; }
/* quick reply / editor */
@@ -221,13 +216,51 @@ ul.post_controls .post_date { color: #6d6a5e; font-weight: bold; font-size: 11px
}
.forum-input::placeholder { color: #6d6a5e; }
/* nice_button (no está en theme.css) */
/* Botón del foro: mismo lenguaje que el <button> del tema (theme.css:159),
el que sale como «Editar» en el resto de la web (fondo translúcido, texto
crema, mayúsculas, aclara al hover). NO un dorado propio. */
.nice_button {
display: inline-block; padding: 9px 18px; border-radius: 5px; cursor: pointer; font-weight: bold; text-transform: uppercase;
color: #1c1305; border: 1px solid #b08f1d; background: linear-gradient(#e3ab2d, #b08f1d); transition: all 150ms;
/* inline-flex + altura fija para que <a> y <button> queden a la MISMA altura:
los <button> heredan height:50px del tema y los <a> no, y eso descuadraba la
fila (se notaba sobre todo en «Borrar», que es un <button>). box-sizing evita
que el padding sume por encima de la altura. */
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 42px;
padding: 0 20px;
border: 0;
border-radius: 3px;
cursor: pointer;
font-family: futuraef-book, Arial, sans-serif;
font-size: 15px;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
color: #ebdec2;
background: hsla(0, 0%, 100%, 0.05);
transition: 0.4s;
}
/* Estados de enlace: sin esto, el `a:visited/:link { color:#2471a9 }` del tema
(más específico que .nice_button) pinta de azul el texto de «Crear tema». */
a.nice_button,
a.nice_button:link,
a.nice_button:visited {
color: #ebdec2;
}
.nice_button:hover,
.nice_button:focus,
a.nice_button:hover,
a.nice_button:focus {
background: hsla(0, 0%, 100%, 0.1);
color: #fff;
}
.nice_button:disabled {
color: #5c4c44;
cursor: default;
background: hsla(0, 0%, 100%, 0.05);
}
.nice_button:hover { background: linear-gradient(#f0b53a, #c9a836); }
.nice_button:disabled { opacity: .5; cursor: default; }
/* ===================== responsive ===================== */
@media (max-width: 991px) {