settings
code:style.css
.page-list .grid li:not(.pin) {
display: none;
}
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
.container {
max-width: 88%
}
.col-page {
max-width: 99%
}
body {
background-color: #215566;
max-width: 88%
}
a {
color: #8f8f8f;
text-decoration: none;
}
a:hover {
color: #8f8f8f;
text-decoration: underline;
}
.navbar-default {
box-shadow: 0 0 0 1px hsla(0,0%,100%,.13);
background-color: #36465d;
}
.search-form .form-group input {
background-color: rgba(0,0,0,.13);
}
.grid li.page-list-item a {
border-radius: 3px;
}
.grid li.page-list-item a .pin {
background-color: #36465d;
background-image: linear-gradient(45deg, #aaa, #aaa 50%, #37465C 50%, #37465C);
}
.grid li.page-list-item a {
box-shadow: 0 2px 0 rgba(0,0,0,.13);
}
.grid li.page-list-item a .header {
background-color: #f2f2f2;
padding: 5px 12px 10px;
}
.quick-launch .new-btn,
.quick-launch .new-btn:hover {
background-color: #529ecc;
}
.quick-launch .new-btn .horizontal-line,
.quick-launch .new-btn .vertilcal-line {
fill: #36465d;
}
.page {
border-radius: 3px;
}
.dropdown-menu>li>a.selected {
color: #529ecc;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #e6eff7;
box-shadow: -4px 0 0 #e6eff7, 10px 0 0 #e6eff7:
}
.grid li.relation-label a {
background-color: #4AA8D8;
}
.grid li.relation-label .arrow {
border-color: transparent transparent transparent #4AA8D8;
}
.grid li.relation-label.links a {
background-color: #56bc8a;
}
.grid li.relation-label.links .arrow {
border-color: transparent transparent transparent #56bc8a;
}
.grid li.relation-label.empty-links a {
background-color: #F2992E;
}
.grid li.relation-label.empty-links .arrow {
border-color: transparent transparent transparent #F2992E;
}
.page-menu .tool-btn:hover {
background-color: hsla(0,0%,100%,.6);
}
.line a.page-link {
font-weight: 700;
}
.line a.empty-page-link {
color: #F2992E;
}
.line a.link {
text-decoration: none;
}
.line a.link:hover {
text-decoration: underline;
}
.line .meta {
border-color: #9AA2AE;
}
.line .meta.unread {
border-color: #529ecc;
}
.grid.grid-md li.page-list-item a .header {
padding: 0 14px 21px;
}
.quick-launch .project-home,
.quick-launch .project-home .icon-home {
color: #fff;
}
.quick-launch .tool-btn,
.page-sort-menu .tool-btn {
color: #848484
}
code:style.css
/* ブランドアイコンを今日の日付にするCSS */
.navbar-brand::before {
content: '';
width: 60px;
height: 60px;
position: absolute;
background-color: #252A30;
background-image: url(https://daiiz-apps.appspot.com/today/jp.svg);
background-size: cover;
background-position: center;
border-radius: 6px;
}
@media (prefers-color-scheme: dark) {
.navbar-brand::before {
background-color: #252A30;
}
}
@media (prefers-color-scheme: light) {
.navbar-brand::before {
background-color: #ccc;
}
}
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .5em; width: .5em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
background: linear-gradient(transparent 10%, #FFFF00 25%, #FFFF00 70%, transparent 90%)
}
code:style.css
/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */
@media screen {
.app:not(.presentation) .line .deco-\. { background-color: #F5FAEA }
.app:not(.presentation) .line .deco-\.::after {
position: absolute; top: 3px; left: -1.4em;
content: '\f02e'; font: 900 1.7rem/1 'Font Awesome 5 Free'; color: yellowgreen } }
@media screen and (max-width: 990px) {
.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em } }
code:style.css
/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */
a#Bookmarks.tool-btn:hover { text-decoration: none }
a#Bookmarks.tool-btn::before {
position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free' }
a#Bookmarks.tool-btn img { opacity: 0 }
button#Pinned.tool-btn:hover { text-decoration: none }
button#Pinned.tool-btn::before { position: absolute; content: '\f08d'; font: 900 22px/46px 'Font Awesome 5 Free' }
button#Pinned.tool-btn img { opacity: 0 }
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
code:style.css
button#Pinned.tool-btn:hover { text-decoration: none }
button#Pinned.tool-btn::before { position: absolute; content: '\f08d'; font: 900 22px/46px 'Font Awesome 5 Free' }
button#Pinned.tool-btn img { opacity: 0 }
code:script.js
const __bkmClass = '.deco-\\.' /* ここで記法のセレクタを設定してね。デフォルトはドットです */
const __bkmMenuTitle = 'Bookmarks'
scrapbox.PageMenu.addMenu({ title: __bkmMenuTitle, image: 'https://www.yynnss.com/hakase.png',
onClick: function() {
const __fixedHeaderHeight = ($('.navbar').css('position') == 'fixed' ? $('.navbar').height() : 0) +
($('.navbar-pagemenu').height() || 0)
scrapbox.PageMenu(__bkmMenuTitle).removeAllItems()
$(__bkmClass).closest('.line').each(function(i, e){
scrapbox.PageMenu(__bkmMenuTitle).addItem({
title: $(e).find(__bkmClass).text(),
onClick: function() {
$('html,body').animate({
scrollTop: $(e).offset().top - $('body').offset().top - __fixedHeaderHeight
}, 150)
}
})
})
}
})
code:script.js
(() => {
const menuTitle = 'Pinned'
scrapbox.PageMenu.addMenu({
title: menuTitle,
image: 'https://upload.wikimedia.org/wikipedia/commons/a/a5/OOjs_UI_icon_pushPin.svg',
onClick: () => {
scrapbox.PageMenu(menuTitle).removeAllItems()
fetch(/api/pages/${scrapbox.Project.name}, { credentials: "include" })
.then(res => res.json())
.then(data => {
const pinnedPages = Array.from(data.pages).filter(page => 0 < page.pin)
pinnedPages.forEach(page => {
scrapbox.PageMenu(menuTitle).addItem({
title: page.title,
onClick: e => { e.currentTarget.setAttribute("href", ./${page.title}) }
})
})
})
}
})
})();
code:import.js
import "/api/code/scrasobox/ピンしてるページにジャンプするメニュー/script.js"