ZenMode的ななにか

ZenModeとかフルスクリーンモードとかフォーカスモードとか呼ばれるようなものです。

ナビバーやフッター、画面横の領域を非表示にしてエディタ領域を最大にします（厳密にはホバー用の数ピクセル分が取られますが）。

戻す場合は、画面右にマウスオーバするとページメニューが現れるので、再度Zen Modeを選択してください。リロードでも可。

code:script.js

scrapbox.PageMenu.addItem({

title: 'Zen Mode',

onClick: () => {

$('div .page-menu').toggleClass("page-menu-zen-mode");

$('.col-page').toggleClass("col-page-zen-mode");

$('.col-page').toggleClass("full-height");

$('.col-page-side').toggleClass("col-page-side-zen-mode");

$('.col-page-side').toggleClass("opacity-zero");

$('nav').toggleClass("opacity-zero");

$('nav').toggleClass("thin");

$('.related-page-list').toggleClass('opacity-zero');

$('.related-page-list').toggleClass('thin');

$('.quick-launch').toggleClass('opacity-zero');

$('.quick-launch').toggleClass('thin');

$('.telomere').toggleClass('opacity-zero');

}

})

code:style.css

.full-height {

height:100% !important;

}

.opacity-zero:not(:hover) {

opacity:0;

}

.thin:not(:hover) {

max-height:3px;

min-height:0px !important;

margin:0px !important;

}

.col-page-side-zen-mode {

width:3px;

}

.col-page-side-zen-mode:hover {

width:66px;

}

.page-menu-zen-mode {

overflow:visible;

}

.col-page-zen-mode {

width: 100% !important;

max-width:100%;

}

UserScript.icon