© 拡張機能「Stylus」のアレンジ（3）（Chrome/Firefox）

チェックボタンは鬼門のひとつ

ブラウザ上で動作するアプリケーションのアレンジでは、チェックボタンとかセレクトボックスは扱い難い要素になりがちです。 ブラウザによってデザインや配置（他の文字との並び方）が微妙に異なったりして苦労します。 アレンジした結果がアバウトなレイアウトはいただけません。

「Stylus」自身のスキンアレンジも、そんな理由でチェックボタンは後回しにしていたのですが、なんとかクリアーしました。

下は「LT800」をOFFとしたデフォルトです。

「LT800」をONにしたところ。

この「●」のチェックボタンのアレンジは単純で、ネット上の各所にサンプルコードがあります。 下は今回のチェックボタンの基本のCSSです。

/* チェックボタン */
input[type=checkbox] {
    margin: 0.1em 0.1em 0.1em 0;
    height: 1em;
    width: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #eee;
    outline: 0;
    border: 1px solid #000;
    border-radius: 10px; }

input[type=checkbox]:checked {
    background-color: #1a94c2; }

em単位を多用したのは、同列の文字要素との配置ズレを抑えようとした跡ですが、実際は意味がないかも知れません。

「margin: 0.1em 0.1em 0.1em 0;」の部分は、ボタンの場所によって上下位置の調整が必要です。 その調整も、ブラウザ拡大率によってズレが生じ、これは常に悩ましい問題です。 上のアレンジはなんとかそれを抑えた結果ですが125%で調整していて100%では少しズレます。 今後のHTMLの向上で、こういう要素と文字の整列が環境の違いを超えて統一できる様になれば、あらゆる所で生産性が向上するでしょう。

他の追加アレンジ

チェックボタンのデザインが変わり、編集画面メニューの「保存」ボタンに手を加える必要が出来ました。 ONに切り替えた時、メニュー背景色に近い色に沈んでしまうので、周囲に白背景を付けました。

また、管理画面のメニューに、リストのフィルター選択の項目を入れました。 スタイルのインストール数が増えて来ると、このフィルターは便利だと気付いたからです。

編集枠のスタイルオプション

新たに「セクション4」を追加し、コード編集枠のスタイルを変更するオプションとしました。「Stylus」はデフォルトのオプションで編集枠のスタイルを多彩に変更出来ます。 暗背景色設定や要素内容に応じた配色など、ユーザーの好みの編集スタイルを数十の選択肢から探せます。 これは非常に素晴らしい機能ですが、どうもフォントに関しては触らない様にしている様です。

英語版をアレンジしていて気付いたのですが、「monospace」の指定は他の言語圏でどの様なフォントが指定されるか判りません。 Macユーザーは「Monaco」を指定している人も居て、ここはオプションでフォントを明示的に指定する項を造り、ユーザー指定をし易くしました。 不要なお世話かも知れませんが、その事に気付いて最適なフォントに設定するきっかけになるとも思います。

CSSコード

セクションは4個あります。

 セクション1 　管理画面

 セクション2 　スタイル編集画面

 セクション3 　ボタン配色

 セクション4 　コード編集枠のスタイルオプション

適用先はどれも同じですから、セクションをひとつに纏める事が出来ますが、整理目的で分けています。

　セクション1　（管理画面）

適用先：「正規表現に一致する URL」=「 chrome-extension://.* 」

　　　　「正規表現に一致する URL」=「 moz-extension://.* 」

コード1

/* 管理画面 */

/* 幅に無関係の基本設定 **********************************/

/* メニュー 左位置 */
#header {
    border-right: 1px solid #ccc; }


/* メニュータイトル */
#header h1 {
    font-size: 1.5em; }


/* ボタン全般 */
button {
    height: 24px;
    border: 1px solid #fff;
    border-radius: 4px;
    color: #fff;
    background: #307798;
    outline: none; }


/* チェックボタン */
input[type=checkbox] {
    margin: 0.1em 0.1em 0.1em 0;
    height: 1em;
    width: 1em;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #eee;
    outline: 0;
    border: 1px solid #000;
    border-radius: 10px; }

input[type=checkbox]:checked {
    background-color: #1a94c2; }

input:disabled {
    background-color: #eee; }


/* フィルター */
fieldset {
    border: 1px solid #aaa;
    border-radius: 4px; }

#filters.active {
    border-radius: 4px; }

fieldset select {
    padding: 2px 0 4px;
    filter: brightness(150%); }


/* フィルター選択 条件選択 */
#manage\.onlyEnabled\.invert,
#manage\.onlyLocal\.invert {
    max-width: initial; }


/* フィルター 検索 */
#search {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 3px 12px 4px;
    font-size: 12px; }


/* チェック履歴ダイアログ */
#message-box > div {
    border-radius: 4px; }

#message-box-title {
    border-radius: 4px 4px 0 0; }

#message-box-buttons {
    border-radius: 0 0 4px 4px; }


/* オプションのチェックボタン */
#options input {
    margin: 0 0.3em -0.1em 0; }

#newUIoptions input {
    margin: 0.2em 0.3em 0.4em 0; }


/* 適用先欄の表示件数 */
#options [type="number"] {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding-left: 7px;
    outline: none; }


/* 右リスト枠 チェックボタン */
#installed input {
    margin: 0 0.5em 0 0; }


/* Sアイコンのポップアップ */
.left-gutter {
    width: 20px; }

.left-gutter input {
    display: inherit; }


/* 幅800px以下の場合 ************************************/
@media screen and (max-width: 800px) {

/* 管理画面のヘッダー拡張 */
#stylus-manage #header:hover {
    height: 105px; }


/* リストフィルター */
fieldset {
    position: absolute;
    top: 57px;
    left: 20px;
    border: none; }

fieldset select {
    -moz-appearance: none;
    filter: none; }

legend {
    display: none; }


/* フィルター選択 ボタン */
fieldset > label:nth-child(2) {
    position: absolute;
    top: 0px;
    left: 0px;
    display: flex !important; }

fieldset > label:nth-child(3) {
    position: absolute;
    top: 19px;
    left: 0px;
    display: flex !important; }

fieldset > *:nth-child(n+4) {
    display: none; }


/* 主メニュー */
#header > p {
    margin: 0 !important; }

#header > p:nth-child(-n+4) {
    display: none !important; }


/* オプション */
#options {
    display: none !important; }


/* バックアップ */
#backup {
    position: absolute;
    top: 15px;
    left: 180px; }

#backup > p {
    margin: 0 !important;
    width: 340px !important; }


/* スタイルを取得 */
#manage-text {
    position: absolute;
    top: 60px;
    left: 270px; }


/* 右枠 スタイルのリスト */
.newUI #installed {
    margin-top: 68px; } }

　セクション2　（スタイル編集画面）

適用先：「正規表現に一致する URL」=「 chrome-extension://.* 」

　　　　「正規表現に一致する URL」=「 moz-extension://.* 」

コード2

/*スタイル編集画面 */

/* 幅に無関係の基本設定 **********************************/

/* 全体構成 */
body#stylus-edit {
    min-width: 840px; }


/* スタイル名 */
#name {
    height: 24px;
    padding: 4px 0 2px 5px;
    border: 1px solid #aaa;
    border-radius: 4px; }


/* 有効ボタン */
#basic-info-enabled {
    margin-top: 10px; }


/* 保存ボタン */
#save-button {
    margin-right: 10px; }

.dirty #save-button {
    background: red; }


/* オプション */
.option input {
    margin: 0.6em 0 -0.1em !important; }

#options .aligned input[type="number"] {
    margin-top: 5px; }

#options select {
    border: 1px solid #aaa;
    border-radius: 4px; }


/* コード番号 */
#sections > div {
    border-top: none !important; }

#sections > div > label {
    font-weight: bold;
    background: #cfd8dc;
    border: 1px solid #ccc;
    margin: 30px 0 0;
    padding: 2px 5px 0;
    display: inherit; }


/* 下側コード枠 */
.resize-grip {
    height: 12px;
    background-color: #cfd8dc; }

.resize-grip:after {
    border-top: none; }


/* 適用先 */
.applies-to {
    margin-top: 0;
    margin-bottom: 4px; }

.applies-to label {
    margin-right: 5px; }

select.applies-type,
input.applies-value {
    height: 22px;
    border: 1px solid #aaa;
    border-radius: 4px;
    outline: none;
    margin: 0 0.2rem 0 0 !important; }


/* セクション削除ボタン */
.remove-section {
    position: relative;
    left: calc(100% - 121px);
    opacity: 0.3; }

.remove-section:hover {
    background: red;
    opacity: 1; }


/* セクション追加ボタン */
.add-section {
    position: relative;
    left: calc(100% - 400px); }


/* 書式整形ボタン */
.beautify-section {
    position: relative;
    left: calc(100% - 630px); }


/* 正規表現テストボタン */
.test-regexp {
    position: relative;
    left: calc(100% - 834px); }


/* 書式整形 ダイアログ */
.beautify-options input {
    margin: 1em 0.5em -0.2em 0; }


/* 幅800px以下の場合 ************************************/
@media screen and (max-width: 800px) {

/* 全体構成 */
body#stylus-edit {
    min-width: 550px !important; }


/* メニュー ヘッダー位置 */
#header {
    position: fixed;
    background: #cfd8dc;
    border-bottom: 1px solid #aaa;
    z-index: 12;
    width: 100%;
    min-width: 550px;
    height: 60px;
    overflow: hidden; }


/* 編集画面のヘッダー拡張 */
#stylus-edit #header:hover {
    height: auto; }

#heading,
h2 {
    display: none; }

#header section {
    margin-bottom: 0 !important; }


/* スタイル名 */
#basic-info {
    display: flex;
    align-items: baseline; }

#basic-info > * {
    flex: auto;
    margin-right: 0.8rem; }

#basic-info > *:first-child {
    display: flex;
    flex-grow: 99; }

#basic-info #name {
    height: 30px;
    padding-left: 15px;
    border: 1px solid #aaa;
    border-radius: 4px;
    background: #fff;
    width: auto;
    flex-grow: 99;
    position: relative;
    z-index: 1; }

#actions > * {
    display: inline-block; }


/* 有効ボタン */
#basic-info-enabled {
    position: absolute;
    left: 18px;
    top: 52px;
    border-radius: 10px;
    padding: 2px 3px 0;
    background: #fff;
    overflow: hidden; }

#toggle-style-help {
    display: none; }


/* 機能ボタン列 */
#actions {
    margin-top: 1rem;
    margin-left: 3.7rem; }


/* 保存ボタン */
.dirty #save-button {
    box-shadow: 0px 0px 0px 100vw #2196F3; }


/* メニューの書式整形ボタン */
#actions #beautify {
    margin-right: 8px; }


/* オプション */
#options {
    display: none; }


/* コードエラー警告 */
#lint > div {
    margin-top: 1em; }


/*  全セクション（メニュー下 スクロール部分）  */
#sections {
    padding-left: 0;
    padding-top: 68px;
    padding-right: 20px; }

#sections > div {
    padding: 0; }


/* 編集枠初期高さ */
.cm-s-default {
    height: 38px; }


/* クリック時 高さ拡張時の制限 */
.CodeMirror {
    max-height: 70vh; }


/* 適用先help */
.info.applies-to-help {
    width: 0; } }

　セクション3　（ボタン配色）

適用先：「正規表現に一致する URL」=「 chrome-extension://.* 」

　　　　「正規表現に一致する URL」=「 moz-extension://.* 」

コード3

/* ボタン配色 */

/* 通常ボタン */
button {
    color: #fff;
    border-color: #fff;
    background: linear-gradient(#3d9fcc 0%, #03608c 100%); }

button:hover {
    background: linear-gradient(#51acd6 0%, #307798 100%); }

button:active {
    background: linear-gradient(#3d9fcc 0%, #03608c 100%);
    box-shadow: 0 0 1px 1px #cfd8dc; }


/* 加筆有りの保存ボタン */
.dirty #save-button {
    background: linear-gradient(#f00 0%, #ac0000 100%); }

.dirty #save-button:hover {
    background: linear-gradient(#f56262 0%, #e22e2e 100%); }

.dirty #save-button:active {
    background: linear-gradient(#f00 0%, #ac0000 100%);
    box-shadow: 0 0 1px 1px #cfd8dc; }


/* セクション削除ボタン */
.remove-section:hover {
    background: linear-gradient(#f00 0%, #ac0000 100%);
    opacity: 1; }

.remove-section:active {
    box-shadow: 0 0 1px 1px #cfd8dc; }


/* チェックボタン */
input[type=checkbox] {
    background-color: #eee; }

input[type=checkbox]:checked {
    background-color: #1a94c2; }

　セクション4　（コード編集枠のスタイルオプション）

適用先：「正規表現に一致する URL」=「 chrome-extension://.* 」

　　　　「正規表現に一致する URL」=「 moz-extension://.* 」

コード4

/* コード編集枠のスタイルオプション */

/* フォント メイリオ small */
.CodeMirror pre {
    font-family: meiryo;
    font-size: small; }


/* 編集枠内のカーソル */
.CodeMirror-cursor {
    border-left: 2px solid black; }


/* 対応する{} の表示 */
div.CodeMirror span.CodeMirror-matchingbracket {
    color: black;
    font-weight: bold; }

div.CodeMirror span.CodeMirror-nonmatchingbracket {
    color: red;
    font-weight: bold; }

再アレンジに関して

◎「セクション2」の末尾の以下の項で、800px以下でスタイル編集画面を開いた時の「コード編集枠の初期値」を指定しています。

/* 編集枠初期高さ */
.cm-s-default {
    height: 38px; }

デフォルトの編集枠の表示の仕方に戻したい場合は、この項を削除ください。 また、初期値（セクションが多い場合のみ）を変更したい場合は、その height値 に書き直します。

◎「セクション3」は、ボタン配色に関する殆どの指定が纏められています。 このセクションの値を変更する事で、好みのボタン配色に変更出来ます。

◎「セクション4」は、スタイル編集のコード枠内のスタイルに関する指定です。 好ましくない場合は、このセクションを再アレンジしてください。

◎「セクション4」の以下の項は、編集枠内のカーソルの幅を指定するものです。 デフォルトの1pxを2pxに変えて明瞭化しています。

/* 編集枠内のカーソル */
.CodeMirror-cursor {
    border-left: 2px solid black; }

◎セクションの指定先の設定を「URL」等に変えて「保存」すると、セクション単位で無効化が出来ます。 特に「セクション4」はオプションの内容なので、まとめて無効化する事が出来ます。