UserCSS:ブランドアイコンを変更する
右上のアイコンのことを仮にブランドアイコンと呼びます
ブランドアイコンは --logo-url というカスタムプロパティの値を使って変更可能です
--logo-urlには画像ファイルのURLを指定します
--logo-urlにはページのアイコンを取ってくる Web API （api/pages/:projectname/:pagetitle/icon）を指定できます
code:style.css
:root {
--logo-url: url('/api/pages/res/brand-icon/icon'); /* */
/*　--logo-url: url("https://daiiz-apps.appspot.com/today/jp.svg");　/* */
}
この例では、brand-icon ページのトップ画像（アイコン）をブランドアイコンに設定します
brand-icon ページのトップ画像を変えると、ブランドアイコンも変化します
code:style.css
:root{
--brand-icon-background-color : transparent; /* */
/* --brand-icon-background-color : pink; /* */
--brand-icon-hover-image : url('https://daiiz-apps.appspot.com/today/jp.svg'); /* */
}
code:style.css
.brand-icon {
display: block;
flex-shrink: 0;
height: 36px;
aspect-ratio: 1; /* */
background-image: var(--logo-url); /* */
background-repeat: no-repeat;
background-size: contain;
background-position: right bottom;
background-color: var(--brand-icon-background-color); /* */
border-radius: 4px; /* 角丸 */
}
.brand-icon svg { display: none; } /* */
.brand-icon:hover {
height: 48px; /* */
background-image: var(--brand-icon-hover-image); /* */
}
CSS:カスタムプロパティ
UserCSS.icon