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

Suporte
3

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.

chrome_Q7W3Tsm9BU

1 curtida