Valence Tips 描画設定を変更する方法

Valenceの表示を変えたい場合、Valenceではoverride.cssと呼ばれる、描画設定を上書きするcssが準備されています。
具体的にどのように設定すればよいのかを本記事ではご紹介します。

Valenceの描画設定　override.cssについて

Valence上の描画設定を変更するには、override.cssに描画設定を追記します。

override.cssは/valence-X/resources/desktop/themes/css/Portal/overrides.css

に配置されています。　　

※valence-Xの箇所は利用中のValenceのバージョンに合わせて置き換えてください。
例) /valence-6/resources/desktop/themes/css/Portal/overrides.css

Override.cssはValenceの各アプリ実行時の最後に読み込まれます。

そのため、各アプリの描画設定を上書きすることが可能です。

Portalのアプリケーションタイル表示設定を変更する方法

Valence Portalのアプリケーション一覧の表示は通常フラットな表示です。

override.cssの定義を設定することで、アプリケーションのタイル表示へ立体的に影をつけるようなことが可能です。

override.cssの設定方法

Valenceのポータルのアプリケーションタイルはclass属性vv-lpad-appが設定されています。

描画設定を変更するには、override.cssにvv-lpad-appの描画設定を追加するだけです。

要素に影をつける描画設定はbox-shadowで実現できます。

以下のようなcss定義を追加すると、タイルに影が設定されます。

また、vv-lpad-app-overクラスはアプリケーションタイルにマウスカーソルが当たった場合に設定される描画設定です。

     .vv-lpad-app{
         border:none;
         box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     }
     .vv-lpad-app-over{
         transition:all .3s;
         background-color:#DFDFDF;
         box-shadow:0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
     }

Gridのカーソル設定を変更する方法

ValenceのApp BuilderやFile EditorではGrid(一覧)形式でデータが表示されます。

選択行や、マウスカーソルが設定されている行は色が設定されて強調されます。
Valenceのデフォルト設定では選択行がグレーで表示されます。

Tipsではグレーのカーソルをピンク色で強調表示するように変更します。

override.cssの設定方法

選択行は、.x-grid-item-selected で設定します。

マウスオーバーは.x-grid-item-overで設定します。

カラーはbackground-colorを設定するだけです。

マウスオーバーの.x-grid-item-overについては、設定を適用するために!importantを記述してください。

.x-grid-with-row-lines .x-grid-item {
    border-style: solid;
    border-width: 1px 0px 0px 0px; 
    border-color: #e9e9e9;
}

.x-grid-with-row-lines .x-grid-item-selected {
    border-style: solid;
    background-color: #FFEEEE;
}

.x-grid-item-over {
    background-color: rgb(255,220,220) !important ;
}     

もちろん、他の描画設定も自由に変更することができます。

Valenceで表示されている描画設定はoverride.cssに記述することで上書きできますので

独自の描画を自由に記述ください。