Cor dos ícones do cabeçalho em problema de pairar do mouse

[Canapin (Coin-coin le Canapin)]

Olá!

Por muito tempo, ao passar o mouse sobre os ícones do meu site, eles ficavam cinzas, apesar de eu ter substituído a cor por uma personalizada (um azul claro):

Por causa deste CSS do Discourse:

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

O azul claro funcionou no início, e acho que parou de funcionar após uma atualização do Discourse, e eu não olhei isso por talvez um ano.

Então, atualizei para a versão 2.9.0 muito recentemente (eu atualizo toda vez que a interface me avisa, e às vezes um pouco mais), e a cor personalizada que eu havia definido voltou sozinha, como mágica

No entanto, agora percebo que a cor cinza voltou novamente

É possível que eu tenha atualizado o Discourse novamente nesse meio tempo.
De qualquer forma, não sei por que a cor certa voltou e desapareceu novamente, já que não editei o CSS do meu fórum.

Então, aqui está a ordem atual das regras CSS:

Eu quero meu azul claro de volta.

Meu CSS personalizado atual:

.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);
}

Prefiro não usar !important quando posso fazer de outra forma, e muitas vezes tenho problemas para substituir o CSS do Discourse de forma simples por causa da classe pai .discourse-no-touch, que me obriga a criar uma verdadeira fila de seletores para atingir meu objetivo.

1. Alguma ideia de por que meu override de cor funcionou novamente por alguns dias e depois não mais?

2. Como substituir corretamente as classes do Discourse com esse irritante bisavô .discourse-no-touch?

---

Nota: A cor azul funciona em smartphones. Existe uma regra de destino simples para fazer com que as alterações de CSS afetem dispositivos com e sem toque?

[Don]

Olá,

Isso é um pouco complicado, mas eu também uso algo assim no meu site, então isso pode ser útil para você também.

Comum

// Botões do cabeçalho

.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)]

Obrigado pela sua resposta!

Por algum motivo, parece que as cores eram as certas (meu querido azul claro) para os ícones nativos do cabeçalho, mas não para meus outros ícones, definidos por um componente de tema.

Então, a cor azul claro dos ícones de hambúrguer e de pesquisa funcionou, talvez por causa de sua classe .header-dropdown-toggle.
O componente de tema que adiciona meus ícones adicionais também adiciona um seletor .custom-header-icon-link no mesmo nível da classe .header-dropdown-toggle.

Talvez esses seletores adicionem precisão suficiente para substituir qualquer regra que use .discourse-no-touch? Honestamente, não tenho certeza se entendo tudo o que está acontecendo aqui em CSS.

Mas sua sugestão me ajudou a refatorar meu CSS. Aqui está o 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 perfeitamente e não utilizo .discourse-no-touch.