Para que conste, entrar en modo seguro para realizar las acciones masivas puede ser una alternativa a desactivar el componente del tema para todos. Obviamente, sigue siendo una complicación adicional, pero ¿posiblemente con menos impacto en los demás?
Sí, eso es lo que averigüé después de aprender sobre el modo seguro…
1 me gusta
Hola,
¡Gracias por tu componente! Notamos un problema al usar tu componente en el foro https://community.escapecollective.com/. Si haces clic en el título del tema, la SPA se recarga (adjunto un gif con este problema), pero si haces clic en la tarjeta fuera del título, todo funciona bien. El problema se descubrió porque el componente Guest Gate no funcionaba correctamente debido a la recarga de la página.
Aquí tienes una sugerencia: Guest Gate Theme Component - #154 by Don
¿Podrías echar un vistazo a este problema?
Gracias,
Denis D.
2 Me gusta
Así que parece que algo ha cambiado con la última ronda de actualizaciones de Discourse.
Solo el borde más a la izquierda de mis tarjetas de tema está respetando este CSS, he estado investigando para tratar de encontrar qué lo arreglará, pero hasta ahora no he tenido éxito.
¿Alguien más puede confirmar y ver si puede rastrear los cambios necesarios?
El problema es la variable añadida recientemente para el color de fondo en los temas que has leído.
No creo que haya un dev-news sobre este cambio. Pero puedes encontrar información aquí:
¿Hay alguna forma de suprimir ese CSS? Esto ha destrozado el aspecto de mi sitio y, como no soy un programador en ningún sentido de la palabra, no sé cómo solucionarlo.
Revisé el inspector de elementos y veo la palabra ‘visited’ en todos los temas rotos y veo que falta en el que todavía se ve bien.
¿Cómo soluciono esto?
Tema que aún no he visitado (sin pasar el ratón por encima):
Y al pasar el ratón por encima:
Y los otros están rotos.
Ha sido más difícil de rastrear de lo que debería haber sido. (Estoy bastante seguro de que se debe a mis limitaciones, pero aun así…)
Parece que añadir:
.topic-list-item-background-color--visited {
background: none
}
Lo ha solucionado sin ningún efecto secundario no deseado.
En tus estilos, ahora solo necesitas cambiar estas dos variables:
--topic-list-item-background-color
--topic-list-item-background-color--visited
Así que algo como esto debería funcionar:
:root {
--topic-list-item-background-color: TU COLOR AQUÍ;
--topic-list-item-background-color--visited: TU COLOR AQUÍ;
}
¿Cómo explicaría eso las diferencias al cambiar entre claro y oscuro?
Puedes usar la función CSS light-dark()
--nombre-de-variable: light-dark(#efedea, #223a2c);
Puedes establecer ambos en lo mismo.
No se ha hecho nada con :hover en el núcleo. Solo tendrás que asegurarte de establecer la variable en lo que quieras al pasar el ratón por encima.
1 me gusta
Esto todavía no me funciona.
Esto es lo que originalmente funcionó:
// Mezclar los colores de las tarjetas de temas con el tema
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
Luego, después de la última actualización, agregué esto y pareció funcionar, pero luego dejó de hacerlo:
.topic-list-item-background-color--visited {
background: none
}
Luego, basándome en lo que dijiste aquí, probé tanto agregando a la actual como reemplazando todo con esto:
:root {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--hover: light-dark(#ddecf7, #163d51);
}
Debe haber otra variable que necesite cubrir hover-visited, porque los hilos no leídos funcionan bien, pero los visitados están rotos.
Esta variable no existe.
.topic-card.has-max-height:hover {
--topic-list-item-background-color: ADD COLOR HERE
--topic-list-item-background-color--visited: ADD COLOR HERE
}
Esto debería ser lo que necesitas, ¡espero que ayude!
Esta es la menor cantidad de líneas que pude encontrar que parece estar funcionando correctamente.
// Mezclar los colores de las tarjetas de temas con el tema
.topic-card.has-max-height {
--topic-list-item-background-color: light-dark(#e6ecf2, #223c44);
--topic-list-item-background-color--visited: light-dark(none, none);
}
.topic-card.has-max-height:hover {
--topic-list-item-background-color: light-dark(#ddecf7, #163d51);
--topic-list-item-background-color--visited: light-dark(none, none);
}
@media (prefers-color-scheme: dark) {
.topic-card.has-max-height {
background: #223c44 !important;
}
.topic-card.has-max-height:hover {
background: #163d51 !important;
}
}
@media (prefers-color-scheme: light) {
.topic-card.has-max-height {
background: #e6ecf2 !important;
}
.topic-card.has-max-height:hover {
background: #ddecf7 !important;
}
}
He hecho un PR a este componente de tema con dos adiciones:
Característica: Interruptor de temas sugeridos
Añade el ajuste Mostrar para temas sugeridos
Hace que el uso de tarjetas de temas para temas sugeridos sea opcional (como se describe en esta solicitud de característica)
Característica: Limitar a categorías
Añade el ajuste Mostrar en categorías
Si no está vacío, utiliza tarjetas de temas solo en las categorías seleccionadas.
5 Me gusta
Fantástica adición @RGJ, la probamos en nuestra instancia y funciona a la perfección, en mi opinión debería fusionarse definitivamente.
1 me gusta
Se encontró otro pequeño error de CSS con este tc en Discourse 3.5.0:
Se agrega un borde alrededor de varios elementos de la interfaz de usuario, como el historial de edición y los elementos de expandir cita.
Esto se debe a que faltan las clases btn no-text en los elementos del botón.
Revisado y fusionado, ¡gracias por la adición!
2 Me gusta
Este componente no está listado como compatible con el tema Horizon.
No creo que sea fácil cambiar eso porque ambos personalizan la lista de temas y, como se indica en la primera publicación:
2 Me gusta
Como puedo agregar el css, que veo aqui los hilo, mucho css