wordpressのプラグイン「Content Warning v2」で、背景が黒くならない。

Question

wordpressのプラグイン Content Warning v2 を使っています。

年齢確認のポップアップが出てきたときに、サイトの内容を見せないように背景を黒くしたいのですができません。

問題のサイトはこちら

※少しアダルトな内容ですが、決して広告ではありません。

CSSいじらないといけないのかな？とも思ったのですが、

こちらの動画を見るとそうではないようです。

この動画と同じように設定にしてみても背景がでません。

詳しい方、アドバイス下さい。

プラグインの編集を見ると、CSSファイルは２つあります。

1つ目

content-warning-v2/css/cwv3.min.css

２つ目

content-warning-v2/css/cwv3.css

.cwv3.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99998;
}


/* Main CWV3 Dialog */
.cwv3_dialog {
  border: 3px solid #CCCCCC;
  background: #FFFFFF;
  max-width: 60%;
  max-height: 90%;
  position: fixed;
  top: 25%;
  left: 25%;
  -webkit-box-shadow: 2px 11px 48px #000;
  -moz-box-shadow: 2px 11px 48px #000;
  box-shadow: 2px 11px 48px #000;
  overflow: hidden;
  z-index: 99999;
}
.cwv3_dialog div {
  padding: 0.25em;
}
.cwv3_dialog .cwv3.auth, .cwv3_dialog .cwv3.denied {
  height: 100%;
}
.cwv3_dialog .cwv3_title {
  color: #FFFFFF;
  font-weight: bold;
  text-align: center;
  background: #FF0000;
  margin-bottom: 0.25em;
}
.cwv3_dialog .cwv3_content {
  height: 80%;
  max-height: 700px;
  padding: 0 .75em;
  overflow: auto;
  margin-bottom: 0.25em;
  color: #000000;
}
.cwv3_dialog .cwv3_content p {
  color: #000000;
}
.cwv3_dialog .cwv3_btns {
  background: rgba(50, 50, 50, 0.5);
  bottom: 0;
  overflow: hidden;
  padding: .45em .75em;
}
.cwv3_dialog .cwv3_btns a {
  display: block;
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  font-weight: bold;
  text-decoration: none;
  padding: .35em 0;
}
.cwv3_dialog .cwv3_btns div {
  width: 30%;
  display: inline-block;
}
.cwv3_dialog .cwv3_btns .cwv3_exit {
  float: right;
}
.cwv3_dialog .cwv3_btns .cwv3_exit a {
  background-color: #FF0000;
}
.cwv3_dialog .cwv3_btns .cwv3_enter {
  float: left;
}
.cwv3_dialog .cwv3_btns .cwv3_enter a {
  background-color: #00CC33;
}

/*# sourceMappingURL=cwv3.css.map */

Answer 1

プラグインの仕様はわかりませんが、原因だけ挙げておきます。

.cwv3.dialog-overlay {
    background-color: hsv(0, 54%, 71%); // HSV以外にする必要がある
    opacity: 0.8;
    -moz-opacity: 0.8;
    -webkit-opacity: 0.8;
}

background-color: hsv(0, 54%, 71%); を rgba や hsla などにすればいけるはずです。

Comments

[mokopi]

アドバイスありがとうございます。

それは、設定画面のカスタムＣＳＳのところに記入するわけではないのですよね？
（試しましたが、変化なしでした。）

content-warning-v2のＣＳＳファイルをいじるのでしょうか？
その場合、質問に追加したファイルのどちらををどのようにいじればよいでしょうか？
※まったく同じような箇所が見当たらなかったもので・・

[rok6]

設定内 Custom CSS の箇所にスタイル記述で良いはずです。
ただ、hsla で入れているようですが、記述が違います。

background-color: hsv(0, 54%, 71%) → background-color: hsla(0, 54%, 71%)
ではなく
background-color: hsla(0, 40%, 52%, 1)
になります。
rgba の場合は rgba(181, 83, 83, 1) です。（）内の数値も引数も違います。

あと、追加するスタイルは背景色のみでいいです。
.cwv3.dialog-overlay {
background-color: カラーコード;
}

[mokopi]

なるほどですね。解決しました。
色々とありがとうございます。