헤더 아이콘 마우스 오버 시 색상 문제

제품 지원
3

답변해 주셔서 감사합니다!

어떤 이유에서인지 네이티브 헤더 아이콘의 색상은 제가 원했던 색상(친근한 연한 파란색)이었지만, 테마 컴포넌트로 설정한 다른 아이콘들은 그렇지 않았습니다.

햄버거 아이콘과 검색 아이콘의 연한 파란색 색상은 작동했는데, 아마도 .header-dropdown-toggle 클래스 때문인 것 같습니다.

추가 아이콘을 추가하는 테마 컴포넌트는 .header-dropdown-toggle 클래스와 동일한 수준에서 .custom-header-icon-link 선택자도 함께 추가합니다.

아마도 이 선택자들이 .discourse-no-touch를 사용한 규칙을 오버라이드할 만큼 충분한 정확도를 제공했을 수 있습니다. 솔직히 CSS에서 일어나는 모든 것을 완전히 이해하고 있지는 않습니다.

하지만 제안을 덕분에 CSS를 리팩토링할 수 있었습니다. 결과는 다음과 같습니다:

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

완벽하게 작동하며 .discourse-no-touch를 사용하지 않습니다.

chrome_Q7W3Tsm9BU