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

제품 지원
1

안녕하세요!

오랜 기간 동안 제 웹사이트에서 아이콘에 마우스를 올렸을 때 커스텀 색상(연한 파란색)으로 오버라이드했음에도 불구하고 아이콘이 회색으로 표시되는 문제가 있었습니다:

image

이것은 다음과 같은 Discourse CSS 때문이었습니다:

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

처음에는 연한 파란색이 정상적으로 적용되었는데, Discourse 업그레이드 이후로 작동이 멈춘 것 같습니다. 아마도 1년 정도 동안 이 문제를 확인하지 않았던 것 같습니다.

그런데 최근 2.9.0으로 업그레이드했는데(인터페이스에서 업그레이드하라고 알려줄 때마다, 혹은 그보다 조금 더 자주 업그레이드합니다), 이전에 설정했던 커스텀 색상이 마법처럼 저절로 다시 적용되었습니다 :magic_wand:

image

하지만 이제 회색 색상이 다시 돌아온 것을 확인했습니다 :grey_question: :weary:

그 사이에 Discourse를 다시 업그레이드했을 수도 있습니다.
어쨌든, 제 포럼 CSS를 수정한 적이 없는데 왜 올바른 색상이 다시 나타났다가 사라졌는지 모르겠습니다.

현재 CSS 규칙 순서는 다음과 같습니다:

image
image305×173 4.37 KB

연한 파란색을 다시 되찾고 싶습니다. :relieved:

현재 사용 중인 제 커스텀 CSS:

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

가능하면 !important를 사용하지 않고 싶습니다. .discourse-no-touch라는 부모 클래스 때문에 Discourse의 CSS를 간단하게 오버라이드하는 데 종종 어려움을 겪고 있으며, 제 목표를 달성하기 위해 선택자의 긴 열차 :train: :train: :train: 를 만들어야 합니다.

  1. 제 색상 오버라이드가 며칠 동안 다시 작동했다가 왜 다시 작동하지 않게 되었을까요? 아이디어가 있으신가요?

  2. 이 번거로운 고조부모 클래스 .discourse-no-touch가 있는 상황에서 Discourse의 클래스를 올바르게 오버라이드하는 방법은 무엇인가요?

참고: 스마트폰에서는 파란색 색상이 정상적으로 작동합니다. CSS 변경 사항이 터치 및 비터치 장치 모두에 영향을 미치도록 하는 간단한 대상 규칙이 있을까요?

2

안녕하세요,

이 부분은 조금 까다롭지만, 저도 제 사이트에서 비슷한 것을 사용하고 있어서 이 정보가 여러분에게도 도움이 될 수 있을 것 같습니다. :slightly_smiling_face:

공통

// Header buttons

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