CSS 선택자 관련 작은 도움 좀 부탁드려요?

[Turtle]

안녕하세요,
채팅 메시지에서 스태프 사용자를 나타내는 방패 아이콘이나 다른 표시가 없어서, 스태프 사용자의 닉네임을 살짝 다른 색으로 표시하고 싶었어요. 셀렉터는 찾았는데, 스태프 사용자를 선택하는 방법을 찾지 못해서 막혔습니다. 현재까지 작성한 코드는 다음과 같습니다:

.chat-message-info__username__name {
  color:  #c3e7eb;
}

이것이 작동할 수 있는 방법이 있을까요? 가능하다면 어떻게 하면 될까요? 감사합니다!

[Arkshine]

다음과 같이 사용할 수 있습니다:

.chat-message-info__username.is-staff {
  .chat-message-info__username__name {
     color:  #c3e7eb;
  }
}

[Turtle]

감사합니다! 그걸 놓쳤을 줄은 몰랐네요.

[Turtle]

아, 하나 더 물어보겠습니다. 신뢰 수준 4 사용자를 위한 것은 무엇인가요? 구체적으로 설명하자면, 신뢰 수준 4 사용자를 위해 비슷한 작업을 수행하고 싶습니다. 하지만 이를 위한 선택자를 찾을 수 없었습니다.

[Arkshine]

코드를 살펴본 결과, 다음과 같은 클래스명이 사용될 것으로 예상됩니다:

• is-staff
• is-admin
• is-moderator
• is-new-user
• group--primary_group_name

그룹을 생성하고 이를 기본 그룹으로 설정할 수 있습니다.

또한 일부 코드를 사용하여 누락된 클래스명을 추가할 수도 있습니다.

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => { 
  // 추가하려는 그룹을 추가합니다
  const allowedGroups = ["trust_level_4"];

  api.modifyClass("components:chat/message/info", () => {
    return class extends SuperClass {
      @service currentUser;
      
      get usernameClasses() {
        if (!this.currentUser) {
          return super.usernameClasses;
        }
        const allowedGroupClasses = this.currentUser.groups
          .filter((g) => allowedGroups.includes(g.name))
          .map((g) => `group--${g.name}`)
          .join(" ");
      
        return super.usernameClasses + " " + allowedGroupClasses;
      }
    }
  })
});

이후 .group--trust_level_4를 사용하여 CSS를 적용할 수 있습니다.

예시:

.chat-message-info__username.group--trust_level_4 {
    .chat-message-info__username__name {
        color: blue;
    }
}

사용자 이름의 경우, 위의 코드가 필요하지 않습니다:

.chat-message-info__username.[data-user-card="username_here"]  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

group--trust_level_4

신뢰 수준 4 대신 특정 사용자명을 선택할 수 있을까요? 참고로, 이 답변은 정말 잘 작성된 것 같습니다. 감사드립니다.

질문이 많아서 죄송합니다. 저는 코딩에 익숙하지 않습니다.

[Arkshine]

위 코드를 업데이트했습니다.
.user--username을 사용하여 사용자 이름을 포함합니다.
원하시면 ID를 사용할 수도 있습니다.

[Turtle]

예를 들어, 제 사용자 이름의 색상을 변경하는 경우를 보여줄 수 있나요?

[Arkshine]

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username.user--arkshine  {
    .chat-message-info__username__name {
        color: red;
    }
}

음, Kat_Mac이라는 사용자에게는 작동하지 않나요?

.chat-message-info__username.user--kat_mac  {
    .chat-message-info__username__name {
        color: red;
    }
}

업데이트된 JS를 가지고 있습니다.

[Arkshine]

사용자 이름이 "Kat_Mac"인 경우, CSS는 user--Kat_Mac여야 합니다.

[Turtle]

음, 아직 작동하지 않아요. JS 부분에 포함해야 하는 건 사용자 이름인 Kat_Mac뿐이죠, 맞나요?

[Arkshine]

아니요, JS를 변경하지 마세요. includeUsersField,를 참조하는 경우, “사용자 이름”(예: Kat_Mac)으로 표시할지 “ID”(예: 4와 같이)로 표시할지를 의미합니다. 사용자 이름으로 표시하려면 그대로 두세요.

[Turtle]

어떤 경우에도 여전히 작동하지 않습니다. 그래도 도움 주셔서 감사합니다.

[Arkshine]

나에게는 잘 작동합니다:

최신 JS 코드를 사용하고 있는지, 그리고 CSS를 제대로 업데이트했는지 확인하세요!

---

@Turtle 제 코드를 무시해 주세요. 실제로는 사용자를 식별할 수 있는 사용자명 속성을 찾지 못했기 때문입니다.

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

이게 전부입니다.

문제가 무엇인지 모르겠습니다.

[Arkshine]

이 CSS를 사용하세요:

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

[Turtle]

@Arkshine

.chat-message-info__username[data-user-card="Kat_Mac"] {
    .chat-message-info__username__name {
        color: red;
    }
}

동작했어요, 감사합니다!