「配信サイトごとにスタイルを適用」関連：文字の縁の色分けができない

[fource_kakkoyon]

配信サイトごとにスタイルを適用する方法 からディスカッションを続行:

対象

表示画面: OBS Studio 30.2.3
利用OS: Windows 11 Home
利用バージョン: わんコメ 6.0.0-rc. 15
過去ログ: 検索した
テンプレート: slim

対象となるサービス

ニコ生
YouTube
Twitch

内容

当方slimテンプレートを用いてコメント表示しているのですが、
CSSカスタマイズが上手くいかず苦戦しているので、
お力添えのほどお願いいたします。

当方が希望する配色は、
ニコ生が白字・黒縁
YouTubeが白字・赤縁
Twitchが白字・紫縁
なのですが、

どうカスタマイズしても文字の縁取りの「色だけが」rootの設定に引っ張られてしまいます。
文字の色も縁取りの太さも配信サイトごとに設定を分けることができるのですが、
そこだけなぜかうまくいきません。
CSSの記述そのものがはじめてなので、何か基本的な記述が抜けているのかもしれません。
以下に「こうしたい」という要望のCSSとそれを適用した場合の現在のスクショ、
そして理想イメージとなる過去配信のスクショを添付しておきます。
スクショの通りですが、このCSSの記述だと文字は縁取りも含めて全て真っ白になります。

有識者の皆様、よろしくお願いします。

---

/* テンプレカスタム 前略 */

:root {
–lcv-name-color: rgba(255, 255, 255, 1);
–lcv-text-color: rgba(255, 255, 255, 1);
–lcv-background-color: rgba(255, 255, 255, 0);
–lcv-name-shadow: var(–lcv-name-shadow-3);
–lcv-name-shadow-color: rgba(255, 255, 255, 1);
–lcv-comment-shadow: var(–lcv-comment-shadow-3);
–lcv-comment-shadow-color: rgba(255, 255, 255, 1);
}

[data-service=“niconama”] {
–lcv-name-color: rgba(255, 255, 255, 1);
–lcv-text-color: rgba(255, 255, 255, 1);
–lcv-background-color: rgba(255, 255, 255, 0);
–lcv-name-shadow: var(–lcv-name-shadow-3);
–lcv-name-shadow-color: rgba(37, 37, 37, 1);
–lcv-comment-shadow: var(–lcv-comment-shadow-3);
–lcv-comment-shadow-color: rgba(37, 37, 37, 1);
}

[data-service=“twitch”] {
–lcv-text-color: rgba(255, 255, 255, 1);
–lcv-name-color: rgba(255, 255, 255, 1);
–lcv-background-color: rgba(255, 255, 255, 0);
–lcv-name-shadow: var(–lcv-name-shadow-3);
–lcv-name-shadow-color: rgba(100, 65, 165, 1);
–lcv-comment-shadow: var(–lcv-comment-shadow-3);
–lcv-comment-shadow-color: rgba(100, 65, 165, 1);
}

[data-service=“youtube”] {
–lcv-text-color: rgba(255, 255, 255, 1);
–lcv-name-color: rgba(255, 255, 255, 1);
–lcv-background-color: rgba(255, 255, 255, 0);
–lcv-name-shadow: var(–lcv-name-shadow-3);
–lcv-name-shadow-color: rgba(255, 0, 0, 1);
–lcv-comment-shadow: var(–lcv-comment-shadow-3);
–lcv-comment-shadow-color: rgba(255, 0, 0, 1);
}

/* テンプレカスタム ここまで */

[shinkunoshizuku]

あまりスマートではありませんが、こんな形にすることは可能です。

:root {
    --lcv-name-color: rgba(255,255,255,1);
    --lcv-text-color: rgba(255,255,255,1);
    --lcv-background-color: rgba(255,255,255,0);
    --lcv-name-shadow: var(--lcv-name-shadow-3);
    --lcv-name-shadow-color: rgba(255,255,255,1);
    --lcv-comment-shadow: var(--lcv-comment-shadow-3);
    --lcv-comment-shadow-color: rgba(255,255,255,1);
}
[data-service="niconama"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(37,37,37,1), 2.83745px 0.974098px 0.5px rgba(37,37,37,1), 2.36742px 1.84264px 0.5px rgba(37,37,37,1), 1.64084px 2.5115px 0.5px rgba(37,37,37,1), 0.736456px 2.9082px 0.5px rgba(37,37,37,1), -0.247738px 2.98975px 0.5px rgba(37,37,37,1), -1.20509px 2.74732px 0.5px rgba(37,37,37,1), -2.03184px 2.20717px 0.5px rgba(37,37,37,1), -2.63842px 1.42784px 0.5px rgba(37,37,37,1), -2.95908px 0.493784px 0.5px rgba(37,37,37,1), -2.95908px -0.493784px 0.5px rgba(37,37,37,1), -2.63842px -1.42784px 0.5px rgba(37,37,37,1), -2.03184px -2.20717px 0.5px rgba(37,37,37,1), -1.20509px -2.74732px 0.5px rgba(37,37,37,1), -0.247738px -2.98975px 0.5px rgba(37,37,37,1), 0.736456px -2.9082px 0.5px rgba(37,37,37,1), 1.64084px -2.5115px 0.5px rgba(37,37,37,1), 2.36742px -1.84264px 0.5px rgba(37,37,37,1), 2.83745px -0.974098px 0.5px rgba(37,37,37,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(37,37,37,1), 2.83745px 0.974098px 0.5px rgba(37,37,37,1), 2.36742px 1.84264px 0.5px rgba(37,37,37,1), 1.64084px 2.5115px 0.5px rgba(37,37,37,1), 0.736456px 2.9082px 0.5px rgba(37,37,37,1), -0.247738px 2.98975px 0.5px rgba(37,37,37,1), -1.20509px 2.74732px 0.5px rgba(37,37,37,1), -2.03184px 2.20717px 0.5px rgba(37,37,37,1), -2.63842px 1.42784px 0.5px rgba(37,37,37,1), -2.95908px 0.493784px 0.5px rgba(37,37,37,1), -2.95908px -0.493784px 0.5px rgba(37,37,37,1), -2.63842px -1.42784px 0.5px rgba(37,37,37,1), -2.03184px -2.20717px 0.5px rgba(37,37,37,1), -1.20509px -2.74732px 0.5px rgba(37,37,37,1), -0.247738px -2.98975px 0.5px rgba(37,37,37,1), 0.736456px -2.9082px 0.5px rgba(37,37,37,1), 1.64084px -2.5115px 0.5px rgba(37,37,37,1), 2.36742px -1.84264px 0.5px rgba(37,37,37,1), 2.83745px -0.974098px 0.5px rgba(37,37,37,1);
}

[data-service="twitch"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(100,65,165,1), 2.83745px 0.974098px 0.5px rgba(100,65,165,1), 2.36742px 1.84264px 0.5px rgba(100,65,165,1), 1.64084px 2.5115px 0.5px rgba(100,65,165,1), 0.736456px 2.9082px 0.5px rgba(100,65,165,1), -0.247738px 2.98975px 0.5px rgba(100,65,165,1), -1.20509px 2.74732px 0.5px rgba(100,65,165,1), -2.03184px 2.20717px 0.5px rgba(100,65,165,1), -2.63842px 1.42784px 0.5px rgba(100,65,165,1), -2.95908px 0.493784px 0.5px rgba(100,65,165,1), -2.95908px -0.493784px 0.5px rgba(100,65,165,1), -2.63842px -1.42784px 0.5px rgba(100,65,165,1), -2.03184px -2.20717px 0.5px rgba(100,65,165,1), -1.20509px -2.74732px 0.5px rgba(100,65,165,1), -0.247738px -2.98975px 0.5px rgba(100,65,165,1), 0.736456px -2.9082px 0.5px rgba(100,65,165,1), 1.64084px -2.5115px 0.5px rgba(100,65,165,1), 2.36742px -1.84264px 0.5px rgba(100,65,165,1), 2.83745px -0.974098px 0.5px rgba(100,65,165,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(100,65,165,1), 2.83745px 0.974098px 0.5px rgba(100,65,165,1), 2.36742px 1.84264px 0.5px rgba(100,65,165,1), 1.64084px 2.5115px 0.5px rgba(100,65,165,1), 0.736456px 2.9082px 0.5px rgba(100,65,165,1), -0.247738px 2.98975px 0.5px rgba(100,65,165,1), -1.20509px 2.74732px 0.5px rgba(100,65,165,1), -2.03184px 2.20717px 0.5px rgba(100,65,165,1), -2.63842px 1.42784px 0.5px rgba(100,65,165,1), -2.95908px 0.493784px 0.5px rgba(100,65,165,1), -2.95908px -0.493784px 0.5px rgba(100,65,165,1), -2.63842px -1.42784px 0.5px rgba(100,65,165,1), -2.03184px -2.20717px 0.5px rgba(100,65,165,1), -1.20509px -2.74732px 0.5px rgba(100,65,165,1), -0.247738px -2.98975px 0.5px rgba(100,65,165,1), 0.736456px -2.9082px 0.5px rgba(100,65,165,1), 1.64084px -2.5115px 0.5px rgba(100,65,165,1), 2.36742px -1.84264px 0.5px rgba(100,65,165,1), 2.83745px -0.974098px 0.5px rgba(100,65,165,1);
}
[data-service="youtube"] {
    --lcv-name-shadow: 3px 0px 0.5px rgba(255,0,0,1), 2.83745px 0.974098px 0.5px rgba(255,0,0,1), 2.36742px 1.84264px 0.5px rgba(255,0,0,1), 1.64084px 2.5115px 0.5px rgba(255,0,0,1), 0.736456px 2.9082px 0.5px rgba(255,0,0,1), -0.247738px 2.98975px 0.5px rgba(255,0,0,1), -1.20509px 2.74732px 0.5px rgba(255,0,0,1), -2.03184px 2.20717px 0.5px rgba(255,0,0,1), -2.63842px 1.42784px 0.5px rgba(255,0,0,1), -2.95908px 0.493784px 0.5px rgba(255,0,0,1), -2.95908px -0.493784px 0.5px rgba(255,0,0,1), -2.63842px -1.42784px 0.5px rgba(255,0,0,1), -2.03184px -2.20717px 0.5px rgba(255,0,0,1), -1.20509px -2.74732px 0.5px rgba(255,0,0,1), -0.247738px -2.98975px 0.5px rgba(255,0,0,1), 0.736456px -2.9082px 0.5px rgba(255,0,0,1), 1.64084px -2.5115px 0.5px rgba(255,0,0,1), 2.36742px -1.84264px 0.5px rgba(255,0,0,1), 2.83745px -0.974098px 0.5px rgba(255,0,0,1);
    --lcv-comment-shadow: 3px 0px 0.5px rgba(255,0,0,1), 2.83745px 0.974098px 0.5px rgba(255,0,0,1), 2.36742px 1.84264px 0.5px rgba(255,0,0,1), 1.64084px 2.5115px 0.5px rgba(255,0,0,1), 0.736456px 2.9082px 0.5px rgba(255,0,0,1), -0.247738px 2.98975px 0.5px rgba(255,0,0,1), -1.20509px 2.74732px 0.5px rgba(255,0,0,1), -2.03184px 2.20717px 0.5px rgba(255,0,0,1), -2.63842px 1.42784px 0.5px rgba(255,0,0,1), -2.95908px 0.493784px 0.5px rgba(255,0,0,1), -2.95908px -0.493784px 0.5px rgba(255,0,0,1), -2.63842px -1.42784px 0.5px rgba(255,0,0,1), -2.03184px -2.20717px 0.5px rgba(255,0,0,1), -1.20509px -2.74732px 0.5px rgba(255,0,0,1), -0.247738px -2.98975px 0.5px rgba(255,0,0,1), 0.736456px -2.9082px 0.5px rgba(255,0,0,1), 1.64084px -2.5115px 0.5px rgba(255,0,0,1), 2.36742px -1.84264px 0.5px rgba(255,0,0,1), 2.83745px -0.974098px 0.5px rgba(255,0,0,1);
}

この例ではrootで指定されているshadow-3の太さに合わせているため、別の太さにする場合は調整が必須です。

[fource_kakkoyon]

shadowの座標をそれぞれ8方向指定した感じでしょうか。この座標を導き出すのは骨が折れそうです。8方向×(名前+コメ)×配信サイト数3＝48座標ともなると凄まじい記述量ですね。
shadowの太さは３が理想だったのでこれでバッチリです。
早速テストしてみたところうまくいきました！ありがとうございます！