【WebUI 1111】メニューをスリムにするuser.css をインストール【Stable diffusion】

エクステンションやクイック設定が増えてくると画面が狭くなるので、user.cssを設定して改善しました。

ついでに、エクステンションが探しにくいのも改善しました。

Contents

1. インストール
2. 使い方

インストール

user.cssをダウンロードして、WebUIのフォルダーに移動してWebUIを再起動してください。

user.cssがすでにある場合は、内容をコピーして貼り付けて、保存してからリロードしてください。

user.css
/* CompactMenuCSS ver 1.2 (C)yukitoki.blogspot.com 1.2 Loraとかのカードサイズを小さくしました。 1.1 開くとき0.3秒待つようにしました。 */ #quicksettings { max-height: 60px; overflow: hidden; z-index: 100; width: max(410px,20%); position: absolute; right: 0px; border: 2px solid white; transition:0s; } #quicksettings:hover { max-height: 80vh; overflow: auto; background-color: snow !important; border: 2px solid; position: absolute; z-index: 1000; border: 2px solid bisque; transition-delay: 0.3s; } #tabs > .tab-nav{ width: calc( 100% - max(410px,20%) - 5px) ; max-height: 60px; overflow: auto; /*scrollbar-width: auto;*/ position: absolute; top: -70px; border: 2px solid white; transition:0s; } #tabs > .tab-nav:hover{ max-height: 50vh; z-index: 1000; background-color: snow !important; border: 2px solid bisque; transition-delay: 0.3s; } /* #tabs > .tab-nav::-webkit-scrollbar { display: auto; } */ #tabs{ top:70px; } #footer{ top:70px; } @media screen and (max-width: 728px) { #quicksettings { width: max(200px,20%); } #tabs > .tab-nav{ width: calc( 100% - max(200px,20%) - 5px) ; } } .label-wrap { background-color: aliceblue; } .extra-network-cards .card, .standalone-card-preview.card { width: 10rem !important; height: 15rem !important; }

 

使い方

マウスを持って行くとポップアップします。

縦幅が狭い時はスクロールしてください。

ついでに、エクステンションのタイトルの色も変わるので探しやすくなります。