ZenMode的ななにか
ZenModeとかフルスクリーンモードとかフォーカスモードとか呼ばれるようなものです。
ページメニューからZen Modeを選択して有効化します。
ナビバーやフッター、画面横の領域を非表示にしてエディタ領域を最大にします(厳密にはホバー用の数ピクセル分が取られますが)。
戻す場合は、画面右にマウスオーバするとページメニューが現れるので、再度Zen Modeを選択してください。リロードでも可。
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');
}
})
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%;
}