Inna
c4961879df
Dos ajustes sobre los enlaces de wowhead: 1) Color en el post. forum.css teñía TODOS los enlaces del post de dorado y los subrayaba, con más especificidad que la clase de calidad de wowhead, así que el nombre salía dorado/azul en vez del color de calidad. Ahora la regla dorada excluye los enlaces con data-wowhead (`a:not([data-wowhead])`) y a esos se les quita el subrayado, para que se vean con su color de calidad como en el tooltip. 2) Vista previa en el editor. TinyMCE vive en un iframe con su propio documento, al que no llega el tooltips.js de la página, por eso en el editor salía item=41599 en crudo. Se carga el script de wowhead dentro del iframe (con renameLinks:true) y se refresca tras insertar, así el ítem se ve con icono, nombre y calidad ya al redactar. No afecta a lo que se guarda: los formularios envían el HTML del estado de React (lo insertado, limpio), no la mutación visual del iframe. Verificado: el CSS servido excluye los enlaces de wowhead del dorado; la inyección del script en el iframe queda compilada en el bundle. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
279 lines
13 KiB
CSS
279 lines
13 KiB
CSS
/*
|
|
* Estilos del foro (adaptado del forum.css original de FusionCMS).
|
|
* Cambios respecto al original:
|
|
* - rutas de imagen ../images/ -> /forum/ (assets en public/forum, ver copia)
|
|
* - el dorado del foro se alinea al acento del sitio (#d79602)
|
|
* - se aportan .nice_button, .main-wide y .pagination (no están en theme.css)
|
|
* theme.css se importa DESPUÉS y podría pisar reglas: por eso el foro cuelga de
|
|
* contenedores propios (.forum-container, .forum-padding, .topic_post…).
|
|
*/
|
|
|
|
:root {
|
|
--forum-gold: #d79602;
|
|
--forum-gold-soft: #c9a33c;
|
|
}
|
|
|
|
/* ===================== index ===================== */
|
|
.forum-container { margin: 0 40px; }
|
|
|
|
.category-title {
|
|
display: block;
|
|
color: #8a8272;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
text-shadow: 0 0 8px #000, 0 1px 1px #000;
|
|
text-transform: uppercase;
|
|
text-align: left;
|
|
}
|
|
|
|
.forum-row {
|
|
width: 100%;
|
|
min-height: 75px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
text-align: left;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, .18);
|
|
box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
|
|
transition: all 200ms;
|
|
}
|
|
.forum-row:hover { box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .05); }
|
|
|
|
.forum-row .icon img { margin: 6px 0 0 6px; }
|
|
.forum-row .forum_title_desc { text-align: left; flex: 1 1 220px; }
|
|
.forum-row .forum_title_desc a { display: block; }
|
|
.forum-row .forum_title_desc a h1 {
|
|
font-size: 14px; color: var(--forum-gold); font-weight: bold; margin: 8px 0 0 20px; transition: all 200ms;
|
|
}
|
|
.forum-row .forum_title_desc a:hover h1 { color: #f0b53a; }
|
|
.forum-row .forum_title_desc a h2 { font-size: 12px; color: #6d6a5e; font-weight: bold; margin: 4px 0 8px 20px; }
|
|
|
|
.forum-row .post, .forum-row .topics { min-width: 78px; text-align: center; }
|
|
.forum-row .post p, .forum-row .topics p { font-size: 15px; color: #8a8578; font-weight: bold; margin: 24px 0; }
|
|
|
|
.forum-row .lastpost { flex: 1 1 200px; padding-left: 12px; }
|
|
.forum-row .lastpost p.topic_title a { font-size: 12px; color: #8d8370; font-weight: bold; }
|
|
.forum-row .lastpost p.topic_title a:hover { color: var(--forum-gold); }
|
|
.forum-row .lastpost p.by { margin: 0 0 0 15px; }
|
|
.forum-row .lastpost p.by a { font-size: 12px; font-weight: bold; color: var(--forum-gold-soft); }
|
|
.forum-row .lastpost p.postdate { font-size: 11px; color: #6d6a5e; margin: 0 0 0 15px; }
|
|
|
|
/* class tiles (type 1) & flag tiles (type 2) */
|
|
.class-row {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 53px;
|
|
overflow: hidden;
|
|
background: rgba(0, 0, 0, .18);
|
|
box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
|
|
border-radius: 4px;
|
|
transition: all 200ms;
|
|
}
|
|
.class-row:hover { box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .05); }
|
|
.class-row .icon { width: 36px; height: 36px; margin: 8px; flex: 0 0 auto; }
|
|
.class-row .icon img.image_icon { width: 36px; height: 36px; border-radius: 3px; box-shadow: 0 0 6px rgba(0, 0, 0, .4); }
|
|
.class-row .icon div.image_icon {
|
|
width: 36px; height: 36px;
|
|
background-image: url(/forum/forum_icons/icons.jpg);
|
|
background-repeat: no-repeat;
|
|
border-radius: 3px;
|
|
box-shadow: 0 0 6px rgba(0, 0, 0, .4);
|
|
}
|
|
.deathknight .icon div.image_icon { background-position: 0 0; }
|
|
.druid .icon div.image_icon { background-position: -36px 0; }
|
|
.hunter .icon div.image_icon { background-position: -72px 0; }
|
|
.mage .icon div.image_icon { background-position: -108px 0; }
|
|
.paladin .icon div.image_icon { background-position: -144px 0; }
|
|
.priest .icon div.image_icon { background-position: -180px 0; }
|
|
.rogue .icon div.image_icon { background-position: -216px 0; }
|
|
.shaman .icon div.image_icon { background-position: -252px 0; }
|
|
.warlock .icon div.image_icon { background-position: -288px 0; }
|
|
.warrior .icon div.image_icon { background-position: -324px 0; }
|
|
.monk .icon div.image_icon { background-position: -360px 0; }
|
|
.demonhunter .icon div.image_icon { background-position: -396px 0; }
|
|
.evoker .icon div.image_icon { background-position: -432px 0; }
|
|
.class-row .info { margin: 0 0 0 4px; text-align: left; }
|
|
.class-row .info a { display: block; }
|
|
.class-row .info a h1 { font-size: 13px; color: var(--forum-gold); }
|
|
.class-row .info a h2 { font-size: 11px; color: #6d6a5e; }
|
|
|
|
.forum-path { margin-bottom: 10px; display: block; color: var(--forum-gold); font-weight: bold; }
|
|
.forum-path a { color: var(--forum-gold); opacity: .7; }
|
|
.forum-path a:hover { opacity: 1; }
|
|
.forum-path .sep { opacity: .4; margin: 0 6px; }
|
|
|
|
/* ===================== subforum ===================== */
|
|
.main-wide { max-width: 1100px; margin: 0 auto; padding: 0 15px; }
|
|
.forum-padding { margin: 0 30px; }
|
|
|
|
.forum_header, .topic_header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin: 20px 0;
|
|
padding-bottom: 12px;
|
|
box-shadow: 0 2px 0 rgba(0, 0, 0, .25);
|
|
}
|
|
.forum_title h1 { font-size: 24px; color: var(--forum-gold); }
|
|
.forum_title h3 { font-weight: bold; font-size: 13px; color: #6d6a5e; }
|
|
.forum_header h4, .topic_header h4 { font-size: 20px; color: #6d6a5e; font-weight: normal; }
|
|
.forum_header h4 b, .topic_header h4 b { color: var(--forum-gold-soft); }
|
|
|
|
.actions_c { display: flex; justify-content: space-between; align-items: center; margin: 0 0 24px; flex-wrap: wrap; gap: 10px; }
|
|
|
|
ul.pagination { display: flex; list-style: none; padding: 0; margin: 0; gap: 3px; flex-wrap: wrap; }
|
|
ul.pagination li a, ul.pagination li p {
|
|
display: block; min-width: 24px; height: 24px; line-height: 24px; padding: 0 6px;
|
|
background: rgba(241, 221, 196, .07); border-radius: 3px; text-align: center; color: #8a8578;
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .02), 0 1px 1px rgba(0, 0, 0, .4);
|
|
}
|
|
ul.pagination li.active p { color: var(--forum-gold); font-weight: bold; }
|
|
ul.pagination li a:hover { color: var(--forum-gold); }
|
|
|
|
ul.topic_row {
|
|
display: flex; flex-wrap: nowrap; align-items: center; width: 100%; list-style: none; margin: 0 0 6px; padding: 0;
|
|
background: rgba(0, 0, 0, .18);
|
|
box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
|
|
border-radius: 3px;
|
|
}
|
|
ul.topic_row li { text-shadow: 0 0 6px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6); }
|
|
ul.topic_row .icon { width: 60px; flex: 0 0 auto; }
|
|
ul.topic_row .icon img { margin: 8px 0 0 4px; }
|
|
ul.topic_row li.topic_title_by_date { flex: 1 1 auto; text-align: left; }
|
|
ul.topic_row li.topic_title_by_date h1 { margin: 11px 0 0 14px; }
|
|
ul.topic_row li.topic_title_by_date h1 a { font-size: 13px; font-weight: bold; color: var(--forum-gold); }
|
|
ul.topic_row li.topic_title_by_date h1 a:hover { color: #f0b53a; }
|
|
ul.topic_row li.topic_title_by_date p { margin: 3px 0 8px 14px; font-weight: bold; font-size: 11px; color: #6d6a5e; }
|
|
ul.topic_row li.topic_title_by_date p a.username { color: var(--forum-gold-soft); }
|
|
ul.topic_row .lastpost { flex: 0 0 220px; padding-left: 14px; color: #6d6a5e; text-align: left; }
|
|
ul.topic_row .lastpost h4 { margin: 13px 0 0 0; font-size: 11px; }
|
|
ul.topic_row .lastpost h4 a { color: var(--forum-gold-soft); }
|
|
ul.topic_row .lastpost h5 { margin: 2px 0 8px; font-size: 11px; color: #6d6a5e; }
|
|
|
|
.forum-empty { text-align: center; color: #6d6a5e; padding: 30px 0; }
|
|
|
|
/* ===================== posts ===================== */
|
|
.topic_title h1 { font-size: 22px; color: var(--forum-gold); margin: 0 0 5px; font-weight: bold; }
|
|
.topic_title h3 { font-weight: bold; font-size: 13px; color: #6d6a5e; }
|
|
|
|
.topic_post {
|
|
display: flex; flex-wrap: wrap; width: 100%;
|
|
background: rgba(0, 0, 0, .18);
|
|
box-shadow: 0 0 11px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .03);
|
|
border-radius: 3px; margin: 0 0 30px;
|
|
}
|
|
.topic_post.isStaff {
|
|
box-shadow: inset 0 0 1px rgba(96, 76, 65, .3), 0 0 0 1px #251d19, 0 2px 2px rgba(0, 0, 0, .3), inset 0 0 46px rgba(255, 68, 0, .12);
|
|
}
|
|
.topic_post .left_side {
|
|
flex: 0 0 200px; padding: 10px; background: rgba(0, 0, 0, .25);
|
|
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03);
|
|
}
|
|
.topic_post .right_side { flex: 1 1 320px; display: flex; flex-direction: column; }
|
|
.username_container { display: block; margin: 6px 0 0; text-align: center; }
|
|
.username_container a.username { font-size: 14px; color: var(--forum-gold-soft); font-weight: bold; }
|
|
.topic_post .left_side .user_avatar {
|
|
width: 86px; height: 86px; border-radius: 3px; margin: 16px auto; overflow: hidden;
|
|
background: rgba(69, 67, 62, .5);
|
|
box-shadow: inset 0 0 1px 1px rgba(255, 255, 255, .05), inset 0 0 28px rgba(0, 0, 0, .8), 0 0 16px rgba(0, 0, 0, .6);
|
|
}
|
|
.topic_post .left_side .user_avatar.isStaff { border: 1px solid #813c26; box-shadow: 0 0 21px rgba(240, 106, 59, .45); }
|
|
.topic_post .left_side .user_avatar span { display: block; width: 100%; height: 100%; }
|
|
.topic_post .left_side .user_info { text-align: center; }
|
|
h3.post_field {
|
|
border: 1px solid #212322; border-radius: 5px; margin: 8px 4px; display: flex; align-items: center; gap: .5rem; padding: 8px;
|
|
font-size: 12px; font-weight: bold; color: #8a8578;
|
|
}
|
|
h3.post_field dt { min-width: auto; }
|
|
h3.post_field dd { margin: 0; }
|
|
.badge_staff { color: #f06a3b; }
|
|
|
|
.topic_post .right_side .post_container {
|
|
padding: 14px; font-size: 13px; color: #b5b1a3; min-height: 120px;
|
|
text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
|
|
}
|
|
.topic_post .right_side .post_container img { display: block; max-width: 100%; height: auto; }
|
|
/* Enlaces normales del post en dorado; los de wowhead (data-wowhead) se dejan con
|
|
SU color de calidad e icono, sin subrayado, para que se vean como en el tooltip. */
|
|
.topic_post .right_side .post_container a:not([data-wowhead]) { color: var(--forum-gold-soft); text-decoration: underline; }
|
|
.topic_post .right_side .post_container a[data-wowhead] { text-decoration: none; }
|
|
.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 { 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 */
|
|
.quick_reply { padding: 0 20px 20px; background: rgba(0, 0, 0, .18); border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .03); }
|
|
.quick_reply h2 { font-size: 14px; color: #8a8578; padding: 18px 0; text-transform: uppercase; text-align: left; }
|
|
.forum-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
|
|
.forum-form-actions .right-0 { margin-left: auto; }
|
|
|
|
.forum-input {
|
|
width: 100%; padding: 12px; margin: 12px 0; border: none; border-radius: 3px; color: #d4cdbb; font-size: 14px;
|
|
background: rgba(0, 0, 0, .25); box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .25), inset 0 0 10px rgba(0, 0, 0, .1);
|
|
}
|
|
.forum-input::placeholder { color: #6d6a5e; }
|
|
|
|
/* 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 {
|
|
/* 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);
|
|
}
|
|
|
|
/* ===================== responsive ===================== */
|
|
@media (max-width: 991px) {
|
|
.forum-container { margin: 0; }
|
|
.forum-padding { margin: 0; }
|
|
}
|
|
@media (max-width: 767px) {
|
|
.forum-row .post, .forum-row .topics { display: none; }
|
|
ul.topic_row .lastpost { display: none; }
|
|
.topic_post .left_side { flex-basis: 100%; }
|
|
.topic_post .left_side .user_avatar { width: 56px; height: 56px; }
|
|
}
|