settings
code:style.css
.cursor {
width: 3px;
background-color: rgba(255, 255, 255,.6);
animation: blink 1s infinite;
}
@keyframes blink {
0% { opacity: 0; }
50% { opacity: 0; }
51% { opacity: 1; }
100% { opacity: 1;}
}
.cursor-line.with-image {
animation-name: none;
}
code:style.css
@media (max-width: 420px) {
.page-list .grid {
padding-left: 0;
}
li.page-list-item.grid-style-item {
margin: 0 0 10px 0;
}
li.page-list-item.grid-style-item:nth-child(2n+1) {
margin-right: 10px;
}
}
code:style.css
.cursor-line {
border-right: 3px solid var(--default);
border-bottom: 0.5px dashed var(--default);
box-sizing: border-box;
}
code:style.css
/* 二重括弧による強調をマーカーっぽくする */
.line strong:not(class) {
display: inline;
margin: 0 3px;
text-decoration: underline;
}
code:style.css
body { background-color: var(--bg-color) !important }
code:style.css
.page {
background-color: rgba(230, 235, 255, 0.05);
box-shadow: none;
border: var(--default) solid 0.5px;
border-radius: 5px;
}
code:style.css
:root {
--bg-color: #FFFFFF;
--fg-color: #252525;
--highlight: #6BA6DE;
--default: #999999;
}
code:style.css
.line .telomere .telomere-border {
border-width: 0px 0px 0px 3px !important;
border-color: var(--default);
width: 0;
}
.line .telomere .telomere-border.unread { border-color: var(--highlight) !important }
code:style.css
.grid li.page-list-item > ahref^="/kyoyo-ds2019-051/settings" {
display: none;
}
code:style.css
div.related-page-list li.grid-style-item, div.related-page-list li.relation-label{
width:190px !important; /* 横幅を190pxにする */
height:280px !important; /* 縦の長さを280pxにする */
}
code:style.css
.line strong {
display: inline-block;
}
.line strong.level-3 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 2.5px #BFBFBF;
color: #C5C8CA;
}
.line strong.level-5 {
width: 100%;
margin: 0.25em 0;
padding: 0.25em 0.05em 0.05em 0.5em;
border-left: solid 4.5px #BBB;
}
.line.line-title .text {
width: 100%;
margin: 0.25em 0 0.75em 0;
padding: 0.25em 0.5em 0.25em 0.5em;
border-left: solid 7.5px #999;
border-bottom: solid 2px #BBB !important;
font-weight: bold;
font-size: 35px;
position: relative; left: -15px;
}
code:style.css
.grid li.relation-label.links .arrow {
border-left-color: #fff;
}
.grid li.relation-label.links a {
background-color: #FFF;
}
.grid li.relation-label.links a .title {
color: #333;
}
.grid li.relation-label a {
color: #333
}
code:style.css
/* code blockのフォントを小さくする設定 */
.line span.code-block {
line-height: 20px;
font-size: 90%;
background-color: rgba(30, 20, 10, 0.05);
filter: invert();
}
/* code blockの頭を静かな色にする */
.line span.code-block .code-block-start {
border: solid 1px #66667F;
background-color: rgb(39, 40, 34);
padding: 2px 5px 2px 5px !important;
}
.line span.code-block .code-block-start a { font-size: 110%; color: #FFF }
code:style.css
input.grid-size-range { display: none }
a#dropdownMenuSort.tool-btn.dropdown-toggle { display: none }
code:style.css
.status-bar {
background-color: rgba(255, 255, 255, 0);
color: #a9aaaf;
border-top-left-radius: 15px;
border-top-color: #888;
border-left-color: #888;
}
code:style.css
/* 箇条書きを控えめにする */
.line .indent-mark .dot { height: 3px; top: 11px; background-color: #AAA }
code:style.css
/* External links */
.line a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}
code:style.css
/* 吹き出し本体 */
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #b2bcba;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
/* 左吹き出しの角 */
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #b2bcba transparent;
}
/* 右吹き出しの角 */
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #b2bcba transparent;
}
/* 強調吹き出しの角 */
.deco-\!:before, .deco-\!:after { border-color: #ee6666 transparent; }
/* 吹き出し内のリンク色の調整 */
.deco-\{ a, .deco-\} a { color: #66F; }
code:style.css
/* はりつくメニューバー */
/* @media screen and (min-height: 600px) and (min-width: 768px) { */
body:not(.presentation) {
padding-top: 90px;
padding-right: 0 !important
}
body:not(.presentation) .page-menu {
position: fixed;
top: 90px
}
.navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 990;
overflow: unset;
border-bottom: solid #666 0.5px;
background-color: rgba(34, 37, 45, 0.8);
}
.dropdown.open .dropdown-menu {
position: absolute;
max-height: calc(100vh - 100px);
overflow-y: auto
}
.page-menu .dropdown.open .dropdown-menu {
position: absolute;
top: 0
}
/* } */
.search-form .form-group input {
background-color: rgba(70, 70, 70, 0.5);
border: solid #333 0.5px;
}
.new-button {
background-color: rgb(70, 70, 70);
border: solid #333 0.5px;
}
.new-button div {
background-color: #CCC !important;
}
a.mobile-pagemenu-toggle {
display: none !important
}
a.mobile-search-toggle {
color: black !important
}
code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {content: '\f0d3'; font-family: 'FontAwesome'; font-size: 20px; color: #A45AFF; bottom: 0}
code:style.css
.editor, .stream {
font-family: 'ヒラギノ明朝 ProN','Hiragino Mincho ProN','ヒラギノ明朝 Pro','Hiragino Mincho Pro','游明朝体','YuMincho','游明朝','Yu Mincho',serif;
}
code:import.css
@import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/style.css";
code:import.js
import "/api/code/scrasobox/ヘッダーメニューをカスタマイズ/script.js"
code:style.css
/* 1. Scrapboxアイコンをバーガーアイコンに置き換え */
.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px }
/* 2. ページ追加ボタンを検索ボックスの右に移動 */
.navbar-form { flex-flow: row-reverse }
.new-button { margin-left: 10px; margin-right: 0 }
/* 3-a. ヘッダー内のプロジェクトのページへのリンク ※要UserScript */
.col-brand .project-home {
color: #F8F8FF; /* リンクの色 */
margin: 16px 0 0 28px; font-size: 18px;
display: inline-block; max-width: calc(100% - 80px);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.col-brand .project-home:hover, .col-brand .project-home:focus,
.col-brand .project-home:active { text-decoration: none; opacity: .6 }
.col-brand .project-home .icon { margin-right: 10px; font-size:.9em }
code:script.js
(()=>{
// 3-b. メニューバーの下にあるプロジェクトへのリンクをコピーして、メニューバーの中に配置してます
const project = document.querySelector('.quick-launch .project-home').cloneNode(true)
document.querySelector('.col-brand').appendChild(project)
})()
code:style.css
.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'FontAwesome'; font-size: 20px; color: #A45AFF; bottom: 0 }
code:script.js
function getHtml (dateString) {
return '<span class="page-created-date" style="position: absolute; bottom: -28px; right: 0; color: #888;">Last updated on: ' + dateString + '</span>'
}
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(0).attr('title')
if ($('.page-created-date').length > 0) {
$('.page-created-date').text('Last updated on: ' + dateString)
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime()
code:script.js
function getHtml (dateString) {
return '<span class="page-last-update" style="position: absolute; bottom: -28px; right: 0; color: #888;">Last updated on: ' + dateString + '</span>'
}
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(1).attr('title')
if ($('.page-last-update').length > 0) {
$('.page-last-update').text('Last updated on: ' + dateString)
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime()
code:script.js
function getHtml (dateString) {
return '<span class="page-last-update" style="position: absolute; bottom: -28px; right: 0; color: #888;">Last updated on: ' + dateString + '</span>'
}
function setOrUpdateTime () {
if (scrapbox.Layout !== 'page') return
let dateString = $('.page-menu .date-label').eq(1).attr('title')
if ($('.page-last-update').length > 0) {
$('.page-last-update').text('Last updated on: ' + dateString)
} else {
$('.editor').append(getHtml(dateString))
}
}
new MutationObserver(setOrUpdateTime)
.observe(document.querySelector('title'), { childList: true })
setOrUpdateTime()
code:style.css
.page-wrapper{
width:100%;
position: absolute;
left: 0px;
}
.col-page-side{
position: absolute;
right: 0px;
}
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag" {
display: inline-block;
padding: 0px 10px;
margin: 0 8px 10px 0;
color: #6b5723;
font-size: 80%;
border: 2px solid red;
border-radius: 18px;
transition: .1s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag".empty-page-link{
color: #888888;
border: 2px solid #c3c3c3;
}
.line.number-list .indent-mark {
display: none;
}
code:style.css
.page-list .grid {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
padding-left: 3%;
}
.page-list .grid li {
margin: 20px 15px;
}
.grid li.page-list-item a {
background-color: var(--bg-color);
box-shadow: none !important;
}
.grid li.page-list-item a .content {
border: solid var(--default) 1px;
border-radius: 5px;
height: 100%;
justify-content: center;
}
.grid li.page-list-item a .header {
padding-bottom: 0;
margin-bottom: 1%;
overflow: hidden;
padding: 7px 5px !important;
border: none;
display: flex;
justify-content: center;
align-items: center;
}
.page-list .grid li.page-list-item a .header {
height: 35%;
}
.related-page-list .grid li.page-list-item a .header {
height: auto;
}
.grid li.page-list-item a .header .title {
font-size: 16px;
font-weight: bold;
color: var(--fg-color);
text-align: center;
}
.grid li.page-list-item a .icon {
display: flex;
justify-content: center;
align-items: center;
padding-bottom: 5px;
}
.page-list .grid li.page-list-item a .icon {
height: 65%;
}
@media (max-width: 1050px) {
.related-page-list .grid li.page-list-item a .icon {
height: 65%;
}
}
.grid li.page-list-item a .icon img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: 3px;
}