Inna
65a97aab2d
Se añade una vista previa DEBAJO del editor que renderiza el texto actual y se ve igual que el post publicado: los ítems de wowhead con icono, nombre y color de calidad. Vive en el documento principal (no en el iframe del editor), así que la procesa el tooltips.js global sin ensuciar lo que se guarda (el editor sigue enviando el enlace plano). Un efecto refresca los enlaces de la preview al cambiar el texto (con debounce). forum.css: caja .forum-preview + la regla de «sin subrayado» de wowhead se generaliza a cualquier .post_container (post y preview). Verificado: el CSS de la preview se sirve y el componente queda compilado. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
298 lines
14 KiB
CSS
298 lines
14 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; }
|
|
/* enlaces de wowhead sin subrayado, tanto en el post como en la vista previa */
|
|
.post_container a[data-wowhead] { text-decoration: none; }
|
|
|
|
/* Vista previa bajo el editor (se ve como el post publicado, con icono/nombre/calidad). */
|
|
.forum-preview { margin-top: 14px; border: 1px solid #2a2723; border-radius: 3px; background: rgba(0, 0, 0, .18); padding: 10px 14px; }
|
|
.forum-preview-label { font-size: 11px; text-transform: uppercase; color: #8a8578; margin-bottom: 8px; }
|
|
.forum-preview .post_container { color: #b5b1a3; font-size: 13px; }
|
|
.forum-preview .post_container img { max-width: 100%; height: auto; }
|
|
|
|
/* Colores de calidad de WoW. theme.css solo trae q3..q6, así que aquí se completan
|
|
q0..q2 y q7 (con !important para ganar al color del enlace del post). Sin esto,
|
|
p.ej. un ítem verde (q2) se quedaba sin color y salía blanco. */
|
|
.post_container a.q0, .q0 { color: #9d9d9d !important; }
|
|
.post_container a.q1, .q1 { color: #ffffff !important; }
|
|
.post_container a.q2, .q2 { color: #1eff00 !important; }
|
|
.post_container a.q3 { color: #0070dd !important; }
|
|
.post_container a.q4 { color: #a335ee !important; }
|
|
.post_container a.q5 { color: #ff8000 !important; }
|
|
.post_container a.q6 { color: #e6cc80 !important; }
|
|
.post_container a.q7, .q7 { color: #00ccff !important; }
|
|
.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; }
|
|
}
|