Problema con el color de los iconos de la cabecera al pasar el ratón por encima

[Canapin (Coin-coin le Canapin)]

Hola

Durante mucho tiempo, al pasar el cursor sobre los iconos de mi sitio web, estos se volvían grises a pesar de que los había anulado con un color personalizado (un azul claro):

Debido a este CSS de Discourse:

.discourse-no-touch .d-header-icons .icon:hover .d-icon, .discourse-no-touch .d-header-icons .icon:focus .d-icon {
    color: #919191;
}

El azul claro funcionó al principio, y creo que dejó de funcionar después de una actualización de Discourse, y no le había prestado atención durante quizás un año.

Luego, actualicé a la versión 2.9.0 muy recientemente (actualizo cada vez que la interfaz me lo indica, y a veces un poco más a menudo), y el color personalizado que había establecido anteriormente volvió por sí solo, como por arte de magia

Sin embargo, ahora me doy cuenta de que el color gris ha vuelto

Es posible que haya actualizado Discourse nuevamente en el ínterin.
De todos modos, no sé por qué el color correcto volvió y desapareció de nuevo, ya que no edité el CSS de mi foro.

Así que, aquí está el orden actual de las reglas CSS:

Quiero que vuelva mi azul claro.

Mi CSS personalizado actual:

.d-header-icons .d-icon {
    color: white;
}
.d-header-icons .icon:hover, .d-header-icons .icon:focus {
    background: white;
}
.d-header-icons .icon:hover .d-icon, .d-header-icons .icon:focus .d-icon {
    color: var(--tertiary-medium);
}
.drop-down-mode .d-header-icons .active .icon .d-icon {
    color: var(--tertiary);
}

Prefiero no usar !important cuando puedo evitarlo, y a menudo tengo problemas para anular el CSS de Discourse de manera simple debido a la clase principal .discourse-no-touch que requiere que cree un verdadero tren de selectores para lograr mi objetivo.

1. ¿Alguna idea de por qué mi anulación de color volvió a funcionar durante unos días y luego dejó de hacerlo?

2. ¿Cómo anular correctamente las clases de Discourse con este molesto tatarabuelo .discourse-no-touch?

---

Nota: El color azul funciona en los teléfonos inteligentes. ¿Hay alguna regla de destino simple para que los cambios de CSS afecten tanto a los dispositivos táctiles como a los no táctiles?

[Don]

Hola,

Esto es un poco complicado, pero yo también uso algo similar en mi sitio, así que esto podría ser útil para ti también.

Común

// Botones de encabezado

.d-header-icons {
  .icon {
    &:hover,
    &:focus,
    &:active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
    .discourse-no-touch &:hover,
    .discourse-no-touch &:focus {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
    }
  }
  .d-icon {
    color: #fff;
  }
  .header-dropdown-toggle {
    &:hover {
      background: #fff;
    }
    &.active {
      background: #fff;
      .d-icon {
        color: var(--tertiary-medium);
      }
      &:hover {
        background: #fff;
        .d-icon {
          color: var(--tertiary-medium);
        }
      }
    }
  }
}

.drop-down-mode .d-header-icons .active .icon .d-icon {
  color: var(--tertiary);
}

[Canapin (Coin-coin le Canapin)]

¡Gracias por tu respuesta!

Por alguna razón, parece que los colores eran los correctos (mi querido azul claro) para los iconos nativos del encabezado, pero no para mis otros iconos, establecidos por un componente temático.

Entonces, el color azul claro de los iconos de hamburguesa y búsqueda funcionó, tal vez debido a su clase .header-dropdown-toggle.
El componente temático que agrega mis iconos adicionales también agrega un selector .custom-header-icon-link al mismo nivel que la clase .header-dropdown-toggle.

¿Quizás estos selectores agregan suficiente precisión para anular cualquier regla que use .discourse-no-touch? Honestamente, no estoy seguro de entender todo lo que está sucediendo aquí en CSS.

Pero tu sugerencia me ayudó a refactorizar mi CSS. Aquí está el resultado:

.d-header-icons {
    .header-dropdown-toggle, .custom-header-icon-link {
        .icon {
            .d-icon {
                color: white;
            }
            &:hover, &:focus {
                background: white;
                .d-icon {
                    color: var(--tertiary-medium);
                }
            }
        }
        &.active .icon .d-icon {
            color: var(--tertiary-medium);
        }
    }
}

Funciona perfectamente y no utilizo .discourse-no-touch.