プリザンターのアナウンス機能のプチ改善【Ver. 1.4.16.0対応】

はじめに

プリザンターのVer. 1.4.16.0から内部のCSSの実装が整理されよりスマートなスタイルや配色に一部変更されました。その影響で以前の記事で紹介したプリザンターのアナウンス機能のプチ改善で使用しているスタイルがちょっと浮いてしまっている状態になってしまったので、今回はその部分をさらにフィックスしてデザインをマッチさせていきます。

変更してみた

前回のCSSをベースに変更を加えていきます。もとにするCSSはこちらです。

Announce.css

[class^="announce-"] {
+   display: block;
-   margin-top: 4px;
    padding: 5px;
-   border-radius: 20px;
+   min-height: 32px;
+   border-bottom: 1px solid var(--base-border);
}

.announce-default {
-   color: #000;
+   color: black;
-   background-color: #fff;
+   background-color: white;
-   border: solid 1px #000;
}

.announce-info {
-   color: #fff;
+   color: white;
-   background-color: #00f;
+   background-color: blue;
-   border: solid 1px #00f;
}

.announce-success {
-   color: #fff;
+   color: white;
-   background-color: #008000;
+   background-color: rgba(0, 128, 0, 0.9);
-   border: solid 1px #008000;
}

.announce-warning {
-   color: #000;
+   color: black;
-   background-color: #ff0;
+   background-color: yellow;
-   border: solid 1px #ff0;
}

.announce-error {
-   color: #000;
+   color: white;
-   background-color: #f00;
+   background-color: rgba(255, 0, 0, 0.9);
-   border: solid 1px #f00;
}

色名の指定がHEXコードから色名指定に、successとerrorの濃色の場合に透過率が設定されているところが際になります。また、表示枠につけられている角丸めもなくなっています。

まとめ

今回は、アナウンス機能の表示スタイルを最新版のDesignに合わせる方法を紹介しました。Ceruleanモードが追加されてモダンなデザインになりましたが、バージョンアップに従って細かく修正が入っていることがあります。自作の部分もこうやって最新バージョンに追従させると全体的なバランスが取れるので、皆さんが作っている自作スタイルもブラッシュアップしてみてください