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

Hm, 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;
    }
}

うまくいきました、ありがとうございます！