バージョン5.0 - beta.90以降のpop-chatで一部だけ逆サイドに表示するCSS

カスタマイズ
1

beta.90でpop-chatの一部でカスタマイズ項目を増やすために変更が入りました
そのため過去一部コメントのみ左右逆側に出すCSSが動作しなくなっている可能性があります

ここでは一部コメントのみ左右逆に表示するCSSを掲載します

[data-service="youtube"] .avatar {
  margin-left: 20px;
  margin-right: 0;
}
[data-service="youtube"] .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
[data-service="youtube"] .comment-block {
  flex-direction: row-reverse;
}
[data-service="youtube"] .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-service="youtube"] .comment-body::before {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  right: auto;
  left: 100%;
  border-radius: 0 8px 0 0;
}
[data-service="youtube"] .comment-body::after {
  border-left: none;
  border-right: 3px solid var(--lcv-border-color);
  left: 100%;
  right: auto;
  border-radius: 0 0 8px 0;
}
[data-service="youtube"] .comment-text::before {
  left: auto;
  right: -42px;
  -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMCwxNGwwLC0xNGw4LjAzMSwtMGwxOC44ODgsMTRsLTI2LjkxOSwtMFoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvc3ZnPg==') no-repeat 50% 50%;
  mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMCwxNGwwLC0xNGw4LjAzMSwtMGwxOC44ODgsMTRsLTI2LjkxOSwtMFoiIHN0eWxlPSJmaWxsLXJ1bGU6bm9uemVybzsiLz48L2c+PC9nPjwvc3ZnPg==') no-repeat 50% 50%;
}
[data-service="youtube"] .comment-text::after {
  left: auto;
  right: -46px;
  -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOCAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMS43NDMsMS41NzFsMi45MiwtMGMtMCwtMCAxMC4wODEsNi45MiAxMy41ODgsOS41MjNjMi40MzcsMS44MDggOC4zNCw1LjgxIDcuNzAzLDYuMjE3Yy0wLjY2OCwwLjQyOCAtMy44NzIsMC4zNiAtNS41MDYsMC4zNmMtMS4xNCwwIC0xOC42OCwtMC4xIC0xOC42OCwtMC4xIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDozcHg7Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
  mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOCAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNMS43NDMsMS41NzFsMi45MiwtMGMtMCwtMCAxMC4wODEsNi45MiAxMy41ODgsOS41MjNjMi40MzcsMS44MDggOC4zNCw1LjgxIDcuNzAzLDYuMjE3Yy0wLjY2OCwwLjQyOCAtMy44NzIsMC4zNiAtNS41MDYsMC4zNmMtMS4xNCwwIC0xOC42OCwtMC4xIC0xOC42OCwtMC4xIiBzdHlsZT0iZmlsbDpub25lO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTojMDAwO3N0cm9rZS13aWR0aDozcHg7Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
}

上記の例では [data-service="youtube"] としてYouTubeのコメントだけ右側に表示するようにしています

その他の条件例

[data-service="youtube"] の部分をすべて例のように置き換えることで条件を変更できます

特定のユーザーだけ

[data-service="わんコメ犬アスティ"]

配信者だけ（一部配信サイトでは非対応）

[data-owner="true"]

特定の枠名だけ（わんコメでつけている枠の名前）

[data-service-name="コラボ相手枠"]

ギフトだけ

[data-gift="true"]
「いいね！」 1
2

こんにちは、現在わんコメPRO版 5.2.0-beta.50 で pop-chat を使用しています。

視聴者のチャットをそのまま左側に、配信者のチャットを右側に反転させるために、上記 CSS [data-service=“youtube”] の部分を [data-owner=“true”] に置き換えています。

今まで使用していた pop-chat を pop-chat right ベースにして、視聴者のチャットを左側に反転させ、配信者のチャットをそのまま右側に表示させたいと思っています。

CSS を触ってみたのですが上手くいかなかったので、pop-chat right をベースにする場合は、CSS の部分をどの様に置き換えればよろしいでしょうか？

よろしくお願いいたします。