⭕「Tampermonkey」ダッシュボードのスキン（8）/ JavaScript

「Tampermonkey」を使い易くするスタイル 

拡張機能「Tampermonkey」のダッシュボードやポップアップメニューは、概ね使い易くデザインされていますが、少しデザインに手を加えるとより使い易くなります。 この「Tampermonkey」自体のデザインは、「カスタムCSS」をダッシュボードの「設定」タブの画面で登録することで、ユーザーの好みにアレンジできます。

このページではその「カスタムCSS」と、その登録方法を紹介します。 

Windows絵文字による影響を軽減する 

Win10の絵文字は縁取りがあり、背景の明暗にかかわらず明瞭なものが多いのですが、Win11の絵文字は縁取りが無いデザインが主です。「Tampermonkey」のダッシュボードのタブで、Win10絵文字をマークに使っていましたが、Win11絵文字では不適当で、却ってマークが見えなくなる場合が出て来ました。

下の「❌」のマークは、コード編集画面のタブを閉じるボタンです。 コードを加筆して編集すると、それを保存せずにタブを閉じてしまう間違いを防ぐために、このマークは「🟠」に変わります。 これは非常に大事な役目を持ったマークです。

下は Win10の場合の従来のタブの表示で、文字の縁取りでマークが目だちます。

しかし、Win11絵文字には縁取りが無く、特に「❌」は見え難くなります。 このため、このタブのマークに Win絵文字を使わずに、通常フォントの「×」「●」を使うコードに改めました。

下は、変更後のデザインです。 これは、Wim10 Win11 の両方の環境で同じデザインになります。

 「Tampermonkey」の スキンCSS

「ダッシュボード」の ❶「設定」タブを開くと、下の ❷「外観」の項に「カスタムCSS」の登録枠があります。 ここにCSSコードをペーストし「保存」を押すと、スキンCSSが「ダッシュボード」や「ポップアップのメニュー」に反映します。

●「カスタムCSS」の登録枠内に前バージョンのコードを記入している場合は、枠内をいったん空白にしてから、以下の対策済コードをペーストしてください。

〔コピー方法〕　軽量シンプルなツール「PreBox Button   」を使うと

　　コード枠内を「Ctrl+左Click」➔「Copy code 」を「左Click」

　　の操作で、掲載コードのコピーが可能になります。

〔 Tampermonkey のスキンCSS 〕 2024.05.02

/* Tampermonkey Setup CSS 2024.05.02 */
/*  Dashboard & Popup Menu **** */
.enabler.enabler_enabled .far.on {
    color: #f00 !important; }

/* Dashboard Header ******* */
img.banner {
    width: 1.8em;
    height: 1.8em; }

.head {
    display: flex;
    align-items: flex-end; }

.version {
    margin-left: 20px;
    font-size: 0.6em; }

.tv_container_fit {
    top: 2.8em; }

.default .tv_selected {
    z-index: 0; }

/* Installed List Table ******* */
table.scripttable td:last-child .far.fa-edit {
    display: none; }

table.scripttable td:last-child {
    padding-right: 2.5em; }

/* Edit Tab Header ******* */
.tv_tab_close {
    vertical-align: 2px;
    overflow: visible; }

.modified .tv_tab_close::before {
    content: "●";
    font-size: 32px;
    color: #e13d14; }

.modified .tv_tab_close:hover::before {
    color: red; }

.tv_tab_close::before {
    content: "×";
    font-size: 27px;
    line-height: 0;
    vertical-align: -5px; }

.script_tab_head {
    position: absolute; }

.nameNicon64 {
    width: 300px; }

.heading tr td:nth-child(2) {
    display: flex; }

.nameNname64 {
    line-height: 36px; }

.nameNicon64 > img {
    margin: 0;
    width: 40px;
    height: 32px; }

.heading .author,
.heading .nameNname64 {
    width: fit-content; }

.author {
    margin-top: 14px; }

.editormenu::before {
    content: "▶";
    position: fixed;
    top: 120px;
    left: 990px;
    color: #888; }

/* CodeMirror ******* */
.CodeMirror {
    font-family: Meiryo;
    font-size: 1.4em; }

.CodeMirror span.CodeMirror-matchingbracket {
    color: #000 !important;
    background: rgba(255, 153, 0, 0.4); }

.CodeMirror-search-match {
    background: none;
    border-top: 2px solid #f00;
    border-bottom: none;
    opacity: 1; }

.CodeMirror-dialog-bottom {
    border: 1px solid #aaa;
    right: 1em;
    left: 10em; }

.CodeMirror-dialog-bottom .CodeMirror-search-field {
    margin-right: -20em; }

/* Popup Menu ******* */
#action .fa-check:before {
    content: "\1F4A2"; }

#action #td_aG9yX3dlc3RfdW5kZWZpbmVk {
    display: flex;
    flex-direction: column; }

#action #table_Ym90dG9tX3VuZGVmaW5lZA {
    order: -1;
    margin-top: 1px; }

#action #tr_dW5kZWZpbmVkX2Fib3V0_outer {
    display: none; }

#action #tr_Y29tbWFuZHNfY29tbWFuZHM_outer {
    display: none; }

.actiontable {
    border-color: #ccc;
    border-width: 1px 0 0 0; }

.actiontable tr {
    line-height: 28px;
    height: 2em; }

アレンジの要点 

上記コードの主要な部分を紹介します。

▪「Tampermonkey」のロゴマーク部をコンパクトにしています。

▪ 登録スクリプトON / OFF の切替ボタンを「ON=赤色」に変更。

▪ 編集画面のタブの編集の有無を示すマーク「●」「×」を明瞭化。

▪ 検索ヒット文字列の縦スクロールバー上の位置表示を明瞭化。

▪ ブラウザのポップアップメニューを「💢 有効」「✖ 無効」に変更。

編集画面のフォントサイズは、ユーザー環境で最適サイズが異なるかも知れません。

▪ 編集画面のフォントサイズは 19.04px メイリオで、少し大き目です。

▪ スクリプト編集枠の「フォント種」「フォントサイズ」は、上記コードの以下の項を書き変えると変更できます。

/* CodeMirror ******* */
.CodeMirror {
    font-family: Meiryo;
    font-size: 1.4em; }