©拡張機能「Stylus」のアレンジ（46）2023秋季更新に対応（続Ⅰ）

「Stylus」の Chorme/Edge版が 2023年11月にアップデートされ、現在も更新の調整が進行中です。今回の更新で「Stylus LT-800」のデザインが影響を受け、その修復対応を行っています。

〔注〕Firefox版は更新時期が異なります
「Stylus」Firefox版のアップデートは後の時期になります。従って、現在の修復対応中の「Stylus-LT800」（ver.202311.03以降）へ更新すると、逆に不適当なデザインになるので、更新は「Stylus」Firefox版の更新が行われてからにしてください。

「Stylus」Firefox版の更新は、「Stylus-LT800」（旧 ver. 202306.24）のアレンジ下でアイコン類の表示が正常でなくなる事で、判断できます。

「Stylus」の「ポップアップ」について

「ポップアップ」は、ブラウザのツールバー上の {S} アイコンを押すと表示される小型のメニューの事です。これは「Stylus」の「管理画面」のリモコンの様なもので、本来は「管理画面」を開いて行う重要な操作（スタイル適用のON/OFFなど）を、その適用先のページを開いたウインドウで遠隔操作する機能です。

スタイルの一時的なON/OFF

あるページに適用されたスタイルを、一時的に「OFF」にしたい時に便利で、スタイルの効果をチェックする時にも使います。

スタイルの設定変更や編集

あるページを閲覧中に、適用されたスタイルの「設定変更」や「修正」の必要に気付いた時、スタイル名右端の「」「」のボタンからすぐに操作ができます。

適用先を付けた編集画面

「ポップアップ」の下方にある「次のスタイルを書く」のメニューは、適用先を生成した編集画面を用意してくれます。正式に利用するスタイルに仕上げるには、適用先は手作業で清書する必要がありますが、書き始めには充分使えます。

現在のページに有効なスタイルを検索

現在表示しているページに使える、各種のスタイル投稿サイトにアップロードされた、「Stylus」ユーザーによるスタイルを、検索することができます。

例えば、「AbemaTV」のページをブラウザで開いている時に、「ポップアップ」の一番下の「スタイルを検索」のボタンを押します。下は、実際にこの操作をした結果で「AbemaTV」のサイトに使えるスタイルが3個検索されました。

どんなアレンジかは試さないとよく判りませんが、表示されたリストからスタイルを登録して試す事ができます。不要だったら登録から削除すれば良いだけです。中には、意にかなうスタイルがあるかも知れません。

「ポップアップ」の修正が完了しました

「ポップアップ」は良く使われるインターフェイスで、急ぎ修復をしました。

Chrome / Edge で「Stylus LT-800」ver. 202306.24 以前では、下の様にスタイルの適用スイッチの「チェックボタン」（左端）や、機能スイッチのアイコン類（右側）が、異常なデザインになります。

以下は、修復完了後の「Stylus LT-800」202311.04.01 を適用した表示例です。

「Stylus」の更新により、表示中のページ上にある iframe内で適用されている、あるいは適用が可能なスタイル名に、「iframe」の表示が付く様になりました。

また、<iframe>をクリックすると、ページ上の全ての「iframe」を列挙して、その中からアレンジ対象の「iframe」を適用先にした編集画面を表示できます。

CSSの修正部分の一覧

下は、「Stylus LT-800」202311.04.01 での修正箇所の一覧です。

1122　　削除
***********************************
/* 区切り線 */
#stylus-popup #installed {
    /* padding-bottom: 4px; */
    /* border-bottom: 1px solid var(--bgc6); */
}

1083  新規 追加
********************************
/* スタイルの区切り線 */
.styles-first .entry {
    border-bottom: 1px solid #00838F; }
.styles-last .entry {
    border-top: 1px solid #00838F; }


1077  変更　追加
***********************************
/* 動作しないページの表示 */
#stylus-popup .blocked-info label,
#stylus-popup .blocked-info p {
color: var(--bgc6); }

変更
************************************
/* 動作しないページの表示 */
#stylus-popup .blocked-info,
#stylus-popup .blocked-info label {
color: var(--bgc6);
background-color: var(--bgc0); }


1099　　変更　新規追加
************************************
#stylus-popup .style-name {
color: var(--bgc6);
max-width: unset; }

1124  以下削除
***********************************
/* 適合スタイルリストのスタイル名 */
#stylus-popup .style-name {
color: var(--bgc6); }

 

1102　　　新規追加
************************************
/* iframe内スタイルの表示 */
#stylus-popup .frame-url::before {
color: #00bcd4; }


1106　　新規追加
************************************
#stylus-popup .actions {
flex: 0 0 auto;
min-width: unset; }


1124   以下削除
************************************
/* スタイル検索 */
#stylus-popup #find-styles-inline-group input {
margin: 2px 0 0; }

1128   以下削除
***********************************
/* 該当するスタイルはありません */
#stylus-popup #no-styles {
color: var(--bgc6); }


1115   1125から移動するだけ
************************************
/* スタイルリスト 番号 */
#stylus-popup .entry:nth-child(-n+10):before,
#stylus-popup .entry:nth-child(11):before {
color: var(--bgc6); }


1130    変更
********************************************
/* 全てのスタイルをオフにする・次のスタイルを書く */
#stylus-popup #disableAll-label,
#stylus-popup #write-style-for,
#stylus-popup .write-style-link,
#stylus-popup #write-for-frames {
color: var(--bgc6); }


1137   　1162より移動　
***************************************
#stylus-popup #write-style .match {
margin-left: 12px; }

#stylus-popup #write-for-frames {
margin: 2px 0 0 20px; } 


1143　　　追加　
**************************************
#stylus-popup #write-for-frames:hover {
color: #00bcd4; }


1140    以下削除
*****************************************
#stylus-popup .breadcrumbs > .write-style-link:hover,
#stylus-popup .breadcrumbs > .write-style-link:hover ~ .write-style-link[subdomain] {
color: var(--bgc6); }


1140    以下削除
*****************************************
/* コントロールメニュー */
#stylus-popup .main-controls,
#stylus-popup .main-controls a {
color: var(--bgc6); }


1140　　削除
*****************************************
/* スタイル検索 */
#search-results:not([data-empty]):before {
background: none; }



1146　追加
*****************************************
/* スタイル検索 */
#search-results {
    background: transparent; }

1150　変更　追加
*********************************
#stylus-popup .search-results-nav {
color: var(--bgc6);
background: var(--bgc3); }


1151　　　以下削除
***********************************
/* 検索オプション */
#stylus-popup #search-params .select-resizer {
background: #fff; }


1154   以下　削除
*************************************
#stylus-popup #search-params input[type="checkbox"] {
top: 3px; }

1161  追加
*************************************
#stylus-popup #search-params #search-globals {
margin-top: 3px;
background-color: var(--bgc6); }

#stylus-popup #search-params #search-globals:checked {
background-color: #1a94c2; }


1401　　新規追加
************************************
/* ポップアップのスクロールバー非表示 */
#stylus-popup::-webkit-scrollbar {
width: 0; }

1429      変更
********************************
* Firefox スクロールバー配色 */
.firefox.newUI,
.firefox.sectioned,
.firefox #stylus-manage #installed,
.firefox #stylus-edit .CodeMirror-vscrollbar,
.firefox .options-wrapper {
scrollbar-color: var(--bgc3) var(--bgc1); }

変更
*******************************
/* Firefox スクロールバー配色 */
.firefox.newUI,
.firefox.usercss,
.firefox.sectioned,
.firefox .options-wrapper {
scrollbar-width: auto;
scrollbar-color: var(--bgc3) var(--bgc1); }

/* ポップアップのみスクロールバーを非表示 */
.firefox:not(.newUI):not(.usercss):not(.sectioned) {
scrollbar-width: none; }