UserScript:禅モード

code:script.js

scrapbox.PageMenu.addItem({

title: '禅 (Zen mode)',

onClick: (e) => {

var style = document.getElementById('__zen__')

if (style)

{

style.remove();

e.currentTarget.innerText = '禅 : そこに直れ'

return;

} else {

e.currentTarget.innerText = '✅' + choice([

'心頭滅却すれば火もまた涼し',

'且緩々',

'閑坐聴松風',

'時時勤払拭',

'脚下照顧',

'柔軟心',

'日日是好日',

'明珠在掌',

'随所作主　立処皆真',

'也太奇',

'知足',

'弘法は筆を選ばず' // end

]);

}

var css =

'.page:not(:hover) {'

+ ' opacity: 1;' // 1だと透過されない

//+ ' opacity: 0.8;' // 0 だと全く表示されない

//+ ' transition: opacity 3s;' // ゆっくり消えていく

+ '}'

+ '.navbar:not(:hover),' // ナビゲーションバー

+ '.line .telomere:not(:hover),' // テロメア

+ '.page-menu:not(:hover),'　　　　 // ページメニュー

+ '.flex-box:not(:hover),' // プロジェクトの名称が表示されるとこ

+ '.page-list:not(:hover),' // ページリスト

+ '.related-page-list:not(:hover),' // 関連ページリスト

+ '.status-bar:not(:hover)' // ステータスバー

+ '{'

+ ' opacity:0;' // 0 だと全く表示されない

+ ' transition: opacity 3s;' // ゆっくり消えていく

+ ' filter: blur(1px);'

+ '}'

+ '.navbar:hover,' // ナビゲーションバー

+ '.page:hover,' // ページ

+ '.page-list:hover,' // ページリスト

+ '.status-bar:hover' // ステータスバー

+ '{'

+ ' opacity: 1;' // 1

+ ' transition: opacity 1s;' // ゆっくり

+ '}'

+ '.line .telomere:hover,' // テロメア

+ '.page-menu:hover,' // ページメニュー

+ '.flex-box:hover,' // プロジェクトの名称が表示されるとこ

+ '.related-page-list:hover' // 関連ページリスト

+ '{'

+ ' opacity:0.6;' 　　　　　　 　　 　 // Hover の状態でも、すこしぼやけた表示

+ ' transition: opacity 1s;' // ゆっくり

+ ' filter: none;'

+ '}'

style = document.createElement('style')

style.setAttribute('id', '__zen__')

style.appendChild(document.createTextNode(css))

document.head.appendChild(style)

}

})

CSSの書式を、整理、修正して、変更しやすくした

パッと切り替わらずに、ゆっくり表示／非表示を切り替えるようにした

関連ページリストも消すようにした

消す項目は、デフォルトの状態でも、すこしぼやけた表示にした

坊主のありがたい箴言を表示するようにした

ステータスバーも消すようにした

元ネタ

参考:

UserScript.icon

https://img.shields.io/badge/JavaScript-UserScript_禅モード-F7DF1E.svg?logo=javascript&style=for-the-badge