pop-chatについて

質問
1

対象

わんコメ / WordParty / テンプレート / その他

利用OS

Windows

利用バージョン: Windows、わんコメやOBSのバージョン

Windows: 10
わんコメ： 5.0.0-beta.86
OBS: 29.1.3（64bit）

PRO版を利用

していない

過去ログ確認 (検索はこちらから)

した

ドキュメント確認 (公式サイト)

した

内容

始めました。
このようなところに書くことが初めてなので、つたないかもしれませんがご容赦を

昨日、アップデートをした際一部の表示がおかしくなっていることを視聴者から指摘されて、確認しました。

SnapCrab_NoName_2023-8-16_20-26-6_No-00
SnapCrab_NoName_2023-8-16_20-26-6_No-00399×556 39.9 KB

pop-chatをニコ生とYouTubeで片方を反転させて表示させています。
過去にyurucampのｃｓｓを反転させる記事をみてそれを使っています。
.comment:not([data-service=‘niconama’]) .avatar {
margin-left: 20px;
margin-right: 0;
}
.comment:not([data-service=‘niconama’]) .name {
text-align: right;
margin-left: 0;
padding: 4px 0 0 16px;
}
.comment:not([data-service=‘niconama’]) .comment-block {
flex-direction: row-reverse;
}
.comment:not([data-service=‘niconama’]) .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-service=‘niconama’]) .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-service=‘niconama’]) .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-service=‘niconama’]) .comment-text::before {
left: auto;
right: -42px;
transform: scale(-1, 1);
}
.comment:not([data-service=‘niconama’]) .comment-text::after {
left: auto;
right: -46px;
transform: scale(-1, 1);
}
.comment:not([data-service=‘niconama’]) .comment-enter-active .avatar,
.comment:not([data-service=‘niconama’]) .comment-leave-active .avatar {
transform-origin: 100% 100%;
}
.comment:not([data-service=‘niconama’]) .comment-enter-active .comment-body,
.comment:not([data-service=‘niconama’]) .comment-leave-active .comment-body {
transform-origin: 100% 100%;
}

Discord内の雑談にて、少しご質問をさせていただいたらこちら再度ご質問とさせていただきます。

2

こんばんわん！
改めての投稿ありがとうございます

本件は5.0でpop-chatの継ぎ目部分の調整とカスタマイズ項目追加に伴う構造の変更を受けたことによるものです

そのため新しい構造に合わせたCSSが必要になります
最新のバージョンでも反転が正しくされるように調整したものを共有いたします

.comment:not([data-service="niconama"]) .avatar {
  margin-left: 20px;
  margin-right: 0;
}
.comment:not([data-service="niconama"]) .name {
  text-align: right;
  margin-left: 0;
  padding: 4px 0 0 16px;
}
.comment:not([data-service="niconama"]) .comment-block {
  flex-direction: row-reverse;
}
.comment:not([data-service="niconama"]) .comment-body {
  margin-left: 0;
  margin-right: 24px;
  border: 4px solid var(--lcv-border-color);
  border-right: none;
  border-radius: 8px 0 0 8px;
}
.comment:not([data-service="niconama"]) .comment-body::before {
  border-left: none;
  border-right: 4px solid var(--lcv-border-color);
  left: auto;
  right: -9px;
  border-radius: 0 8px 0 0;
}
.comment:not([data-service="niconama"]) .comment-body::after {
  border-left: none;
  border-right: 4px solid var(--lcv-border-color);
  left: auto;
  right: -9px;
  border-radius: 0 0 8px 0;
}
.comment:not([data-service="niconama"]) .arrow {
  left: auto;
  right: 0;
}
.comment:not([data-service="niconama"]) .arrow::before {
  left: auto;
  right: -27px;
  -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyNyAxNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVqb2luOnJvdW5kO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48Zz48cGF0aCBkPSJNLTAsMTRsLTAsLTE0bDguMDU1LC0wbDE4Ljk0NSwxNGwtMjcsLTBaIiBzdHlsZT0iZmlsbC1ydWxlOm5vbnplcm87Ii8+PC9nPjwvZz48L3N2Zz4=') no-repeat 50% 50%;
  
}
.comment:not([data-service="niconama"]) .arrow::after {
  left: auto;
  right: -33px;
  -webkit-mask: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAyOSAyMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxuczpzZXJpZj0iaHR0cDovL3d3dy5zZXJpZi5jb20vIiBzdHlsZT0iZmlsbC1ydWxlOmV2ZW5vZGQ7Y2xpcC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlLWxpbmVjYXA6cm91bmQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1taXRlcmxpbWl0OjI7Ij48Zz48cGF0aCBkPSJNMiwyLjAwNGwxLjkxOSwwYzAsMCAxMS4wODIsNi45MjEgMTQuNTg5LDkuNTI0YzIuNDM2LDEuODA4IDguMzM5LDUuODEgNy43MDIsNi4yMTdjLTAuNjY3LDAuNDI3IC0zLjg3MiwwLjM2IC01LjUwNiwwLjM2Yy0xLjE0LC0wIC0xOC42OTgsLTAuMSAtMTguNjk4LC0wLjEiIHN0eWxlPSJmaWxsOm5vbmU7ZmlsbC1ydWxlOm5vbnplcm87c3Ryb2tlOiMwMDA7c3Ryb2tlLXdpZHRoOjRweDsiLz48L2c+PC9zdmc+') no-repeat 50% 50%;
}

image
image722×836 43 KB

こちらでこのように正常に表示されるかと思いますので、お試し頂けますでしょうか

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

「いいね！」 2
3

素早い対応ありがとうございます。

こちらの環境でも無事に反転が確認できました。

改めてありがとうございます。

「いいね！」 1