©拡張機能「Stylus」のアレンジ（47）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」の全体で使用されている「チェックボックス」のデザインを再調整しました。この修正で、コード全体の再チェックが必要になったのですが、手を抜く位ならしない方がマシなので。

「チェックボックス」は、ユーザーの指定を受け取るスイッチです。下は、デフォルトのデザインで、「12×12px」のサイズです。

このスイッチのデザインは、en-US版「Stylus」では、フォントとベストマッチですが、日本語のフォントに対しては僅かに下がってしまいます。それでも、良く整列させている方で、これは「flex」の指定を使い、多国語のフォントでも上下のズレを抑えているためです。

#header .filter-selection label {
    display: flex;
    box-sizing: border-box;
    align-items: center; }

「Stylus-LT800」では、この日本語フォントのスイッチとの位置ズレに関しては当初から対策をして、1pxのズレに拘って来ました。今回は、小サイズのスイッチを「12px径」から「13px径」に変更して、よりズレ補正の最適化を図りました。

「Stylus」はPCに熟練したユーザーを前提としているのか、スイッチのサイズが小さいと感じます。特に「インストールスタイル」は、クリック位置がズレると異なる操作になります。それを防ぐため、スイッチサイズを一回り大きくしています。

機能スイッチのホバーデザインを修復

「Stylus-LT800」ver.202311.04.01では、「管理画面」の「インストールリスト」の機能スイッチのホバーデザインが、逆表示でした。ポインタを乗せると明るくハイライトされずに暗くなり、明背景に適したホバーデザインになっています。

これは、従来のコードが「svg」の「アイコン」に対応したままだからで、この修復に手間がかかるのが判っていたので、後回しにしたものです。

今回の「Stylus-LT800」ver.202311.05.01で、なんとか正常になりました。

CSSの修正部分の一覧

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

236     変更
***********************************
/* スタイルリスト枠 文字色 アイコン色 */
.enabled .style-name-link,
.enabled .actions,
.enabled .applies-to,
.enabled i {
color: var(--bgc6); }

変更
****************************
/* スタイルリスト枠 文字色 アイコン色 */
.enabled .style-name-link,
.enabled .applies-to {
color: var(--bgc6); }

.enabled .actions,
.enabled i,
.entry:hover i {
color: var(--bgc12); }


259　　追加
*********************************
.entry:hover i:hover {
color: var(--bgc6);
opacity: 1; }


181     変更
**********************************
#injection-order-button {
height: 12px;
padding: 5px 7px 6px;
margin-left: 3px; }


167    追加
**********************************
#message-box-close-icon i {
color: #000; }


826    新規
********************************** 
#help-popup[data-type="settings"] .dismiss {
color: #000; }

#help-popup[data-type="settings"] i {
color: #666; }



****● 小型 input 全て修正**************


164   削除
**************************************
#message-box-buttons input[type="checkbox"] {
top: 2px; }


79  修正
**********************************************
/* チェックボタン */
input[type="checkbox"]:not(.slider) {
height: 13px;
width:13px;
margin-top: 2px;
border-radius: 13px;
flex: 0 0 13px; }


229  修正
********************************************
/* スタイルリスト枠 チェックボタン */
#installed .style-name input[type="checkbox"]:not(.slider) {
height: 14px;
width: 14px;
flex: 0 0 14px;
margin-bottom: 4px; }


106  追加
******************************************
#header .filter-selection label {
padding: 0 0 3px 8px; }

109  追加
******************************************
#filters #only-updates span {
padding: 3px 0 0; }


1195  変更
*******************************************
#stylus-options {
width: 650px;
color: var(--bgc6); }

1199  追加
******************************************
#stylus-options .i-close {
color: #000; }

1208　追加
*****************************************
#stylus-options .slider:checked {
filter: brightness(2); }

844   削除
******************************************
/*「設定」ポップアップ */
input#ss-updatable {
margin-top: 2px; }

840  追加
******************************************
#help-popup[data-type="settings"] .select-wrapper::after {
color: #666; }

552  修正
*********************************************
#enabled-label input[type="checkbox"],
#preview-label input[type="checkbox"] {
height: 15px;
width: 15px;
margin-top: 1px; }

946  修正
********************************************
#basic-info-enabled #enabled {
position: absolute;
top: 3px;
left: 2px; }

#basic-info-enabled #preview-label input {
position: absolute;
top: 3px;
left: 21px; }


956   修正
******************************************
#basic-info-enabled #disableAll-label {
display: none !important; }


548   削除
******************************************
#basic-info-enabled > * {
margin-top: 4px;
padding-left: 18px; }


883  削除　🔳  リントエラーの表示 追加を考慮する
******************************************
#header.sticky #basic-info-enabled > #preview-errors {
position: absolute;
top: 6px;
left: 23px; }


897　　追加
*******************************************
#basic-info-name {
display: flex; }


559　　修正
*******************************************
#stylus-edit #disableAll-label {
display: inline-block;
width: 100%;
margin: 4px 1px; }

563   削除
******************************************
#stylus-edit #disableAll {
margin: 3px 3px 0 2px; }


1115　  修正
*****************************************
/* チェックボタン */
#stylus-popup #installed input[type="checkbox"]:not(.slider) {
height: 13px;
width: 13px; }

1145  削除
******************************************
#stylus-popup #disableAll {
margin: 3px 4px 0 0; }

1146　　修正
********************************************
/* 次のスタイルを書く */
#stylus-popup #newStyleAsUsercss {
margin: 2px 6px 0 0; }


1136    削除
*********************************************
/* 除外メニュー */
#stylus-popup #menu input {
margin-top: 2px; }


177   追加
***********************************************
#message-box.config-dialog #config-autosave-wrapper {
vertical-align: -3px; }

#message-box.config-dialog #config-autosave-wrapper input {
margin-top: 0; }

1206   修正
**********************************************
#stylus-options .items a i {
vertical-align: -4px;
color: var(--bgc12); }


1187   修正
**********************************************
#stylus-popup #search-params #search-globals {
 /* margin-top: 3px; */ /* 削除 */
background-color: var(--bgc6); }


1209  追加
**********************************************
/* Chromeのみ */
label.chromium-only > :first-child::after {
color: var(--bgc12); }

***********************************

310  修正
***********************************
/* スタイルのリンクアイコン */
.style-name a.homepage {
pointer-events: auto;
margin: -2px 0.1em -3px 0.25em; }

.actions a.delete {
margin: 0 4px -1px 0; }

.actions a.check-update {
margin: -2px 0 -2px -4px; }

.actions a.configure-usercss {
margin: 0 0 -1px 2px; }


****************
#stylus-manage #newStyleAsUsercss:checked + i {
color: var(--bgc6); }