읽지 않은 알림을 더 눈에 띄게 만드는 방법은 무엇인가요?

개발
1

포럼의 CSS를 많이 수정해 왔는데, 새/읽지 않은 알림의 외관을 변경하려면 무엇을 타깃으로 해야 하는지 아무리 생각해도 모르겠습니다. 아래 그림에서 볼 수 있듯이 기본적으로 새 알림과 오래된 알림 사이에 거의 차이가 없습니다:

image
image748×1062 60 KB

읽지 않은 알림 뒤에 연한 파란색 배경을 추가해 더 눈에 띄게 만들고 싶은데, 읽지 않은 알림만 따로 분리해서 스타일을 적용하는 방법을 찾지 못했습니다. 지금까지는 읽지 않은 알림이 아니라 모든 알림의 외관만 변경하는 데 성공했습니다.

무엇을 입력해야 하는지 아시는 분 계신가요?

2

다음과 같이 시도해 보세요:

.user-menu .quick-access-panel {
  background-color: red;
  .read {
     background-color: var(--secondary);
  }
}