StableDiffusion webuiが地味だけど確実に使いやすくなるスタイルシート

追記：2023.09.01
webui 1.6 で構造が少々変わったのでそれに合わせて調整しました。
追記：2023.10.30
その5を追加しました。

プロンプト入力欄の文字が小さくて読みにくい！
と思ったことはありませんか？
StableDiffusion AUTOMATIC1111版 webui（以下webui）の見た目はスタイルシート（以下css）で変更できます。

この記事では地味だけど確実に使いやすくなるcssを紹介します。

ユーザースタイルシートとは

webuiのインストールフォルダに user.css というテキストファイルを作成すると、起動時に読み込まれ webui に反映されます。
初期状態では存在しないファイルなので新規に作成してください。

user.css に css を記述し、webuiの settings > Reload UI などで再起動すると反映されます。
テキストエディタなら何でも良いですが、個人的には VisualStudioCode（vscode）をオススメします。

便利になるCSS紹介

その1：プロンプトの文字サイズを大きくする

#txt2img_prompt textarea,
#img2img_prompt textarea {
  font-size: 1.1rem;
}

上の図のようにポジティブプロンプトだけが大きくなりました。
フォントサイズ（1.1rem）は自分の好みに調整してもOKです。
もしネガティブプロンプトも大きくしたければ下記のcssを使ってください。

#txt2img_neg_prompt textarea,
#imgimg_neg_prompt textarea,
#txt2img_prompt textarea,
#img2img_prompt textarea {
  font-size: 1.1rem;
}

その2：機能拡張の境界を見やすくする

/* ver1.5系 */
#txt2img_script_container > .gradio-group,
#img2img_script_container > .gradio-group {
  background-image: linear-gradient(to bottom, #eee, #fff);
}

/* ver1.6系 */
#txt2img_script_container > .styler > .gradio-group,
#img2img_script_container > .styler > .gradio-group {
  background-image: linear-gradient(to bottom, #eee, #fff);
}

適用前

どこからTiled VAE なのかわかりにくい

適用後

Tiled VAE のエリアがわかりやすい

txt2img だと機能拡張ごとに枠があるけど、なぜかimg2imgだと無いですよね。
この css で背景にグラデーションを付けるのでエリアが分かりやすくなります。

適用前

適用後

その3：閉じた状態でも有効状態がわかる

ver 1.5系

/* ControlNet */
#txt2img_script_container
  > .gradio-group:has(
    [id$="controlnet_enable_checkbox"] input[type="checkbox"]:checked
  ),
#img2img_script_container
  > .gradio-group:has(
    [id$="controlnet_enable_checkbox"] input[type="checkbox"]:checked
  ),
/* TiledDiffusion */
#txt2img_script_container
  > .gradio-group:has(#MD-t2i-enabled input[type="checkbox"]:checked),
#img2img_script_container
  > .gradio-group:has(#MD-i2i-enabled input[type="checkbox"]:checked),
/* TiledVAE */
#txt2img_script_container
  > .gradio-group:has(#tiledvae-t2i-enable input[type="checkbox"]:checked),
#img2img_script_container
  > .gradio-group:has(#tiledvae-i2i-enable input[type="checkbox"]:checked){
  background-image: linear-gradient(to bottom, #fee, #fff);
}

ver 1.6系

/* ControlNet */
#txt2img_script_container
  > .styler > .gradio-group:has(
    [id$="controlnet_enable_checkbox"] input[type="checkbox"]:checked
  ),
#img2img_script_container
  > .styler > .gradio-group:has(
    [id$="controlnet_enable_checkbox"] input[type="checkbox"]:checked
  ),
/* TiledDiffusion */
#txt2img_script_container
  > .styler > .gradio-group:has(#MD-t2i-enabled input[type="checkbox"]:checked),
#img2img_script_container
  > .styler > .gradio-group:has(#MD-i2i-enabled input[type="checkbox"]:checked),
/* TiledVAE */
#txt2img_script_container
  > .styler > .gradio-group:has(#tiledvae-t2i-enable input[type="checkbox"]:checked),
#img2img_script_container
  > .styler > .gradio-group:has(#tiledvae-i2i-enable input[type="checkbox"]:checked),
.dummy {
  background-image: linear-gradient(to bottom, #fee, #fff);
}

Tiled Diffusion、Tiled VAE が有効になっている

ControlNet、Tiled Diffusion、Tiled VAE が有効になっていると背景色がピンクのグラデーションになります。
自分はよくTiled VAE の on/off を忘れます（笑）

その4：i2iに送るボタンを大きくする

ver 1.6から send to i2i などのボタンがアイコンになり、サイズも小さくなって押しにくくなりました。
さすがに使いにくいので大きさを調整します。

/* ボタンを大きく */
 #image_buttons_img2img  .gradio-button.tool,
 #image_buttons_txt2img  .gradio-button.tool {
  max-width: 3.2em;
  height: 3.2em;
}

変更前

変更後

その5：ドロップダウンの選択項目を分かりやすくする

/* ドロップダウンの選択項目を見やすくする */
.item.active,
.item:hover{
  background: #ccc  !important;
}

なんでデフォルトはわかりにくい色にしてるんだ……。

おわり

ほんのちょっとの違いですが確実に使いやすくなるので、ぜひお試しください。