yurucampテンプレで特定ユーザーのみ反対にしたい

[uu_uzuka]

対象: わんコメ
表示画面: OBS
利用OS: Windows10 64bit
利用バージョン: わんコメ 3.1.0
対象配信サイト: わんコメ対応のすべて
過去ログ: 検索した

ドキュメントを確認して
lineテンプレで特定ユーザーのみ逆にするCSSがあったのですが
同じようなことをyurucampテンプレートでも可能でしょうか？

[ASTIE]

ゆるキャン風テンプレに関してはLine風に比べやや複雑ですが可能です

__origin/css/theme/yurucamp-right.cssというのがありますが、yurucampのcssにこのrightの内容を特定のユーザー名を付けたものにだけ適用すれば左右逆転することができます

下記はテストユーザーの例ですが、中身はyurucamp-right.cssに[data-user=“ユーザー名”]をつけただけのものです

[data-user='テストユーザー'] .avatar {
  margin-left: 20px;
  margin-right: 0;
}
[data-user='テストユーザー'] .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
[data-user='テストユーザー'] .comment-block {
  flex-direction: row-reverse;
}
[data-user='テストユーザー'] .comment-body {
  margin-left: 0;
  margin-right: 24px;
  border: 3px solid var(--lcv-border-color);
  border-right: none;
  border-radius: 8px 0 0 8px;
}
[data-user='テストユーザー'] .comment-body::before {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 8px 0 0;
}
[data-user='テストユーザー'] .comment-body::after {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 0 8px 0;
}
[data-user='テストユーザー'] .comment-text::before {
  left: auto;
  right: -42px;
  transform: scale(-1, 1);
}
[data-user='テストユーザー'] .comment-text::after {
  left: auto;
  right: -46px;
  transform: scale(-1, 1);
}
[data-user='テストユーザー'] .comment-enter-active .avatar,
[data-user='テストユーザー'] .comment-leave-active .avatar {
  transform-origin: 50% 100%;
}
[data-user='テストユーザー'] .comment-enter-active .comment-body,
[data-user='テストユーザー'] .comment-leave-active .comment-body {
  transform-origin: 100% 100%;
}

追記です
rightをベースにしたい場合もyurucampの方を使って逆にする方が簡単です

下記はyurucampを使ってテストユーザー以外を右寄せにします

.comment:not([data-user='テストユーザー']) .avatar {
  margin-left: 20px;
  margin-right: 0;
}
.comment:not([data-user='テストユーザー']) .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
.comment:not([data-user='テストユーザー']) .comment-block {
  flex-direction: row-reverse;
}
.comment:not([data-user='テストユーザー']) .comment-body {
  margin-left: 0;
  margin-right: 24px;
  border: 3px solid var(--lcv-border-color);
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.comment:not([data-user='テストユーザー']) .comment-body::before {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 8px 0 0;
}
.comment:not([data-user='テストユーザー']) .comment-body::after {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: auto;
  right: -8px;
  border-radius: 0 0 8px 0;
}
.comment:not([data-user='テストユーザー']) .comment-text::before {
  left: auto;
  right: -42px;
  transform: scale(-1, 1);
}
.comment:not([data-user='テストユーザー']) .comment-text::after {
  left: auto;
  right: -46px;
  transform: scale(-1, 1);
}
.comment:not([data-user='テストユーザー']) .comment-enter-active .avatar,
.comment:not([data-user='テストユーザー']) .comment-leave-active .avatar {
  transform-origin: 50% 100%;
}
.comment:not([data-user='テストユーザー']) .comment-enter-active .comment-body,
.comment:not([data-user='テストユーザー']) .comment-leave-active .comment-body {
  transform-origin: 100% 100%;
}

[uu_uzuka]

ありがとうございます！！
無事できました！！