settings
https://gyazo.com/34cf53375f840ece721fc985de40d881
背景
code:style.css
body{
background-image: URL('https://i.gyazo.com/c20103a3779a0f19b9b40d7a757b8668.jpg');
}
kyoyo-ds2019-015を白く
code:style.css
.quick-launch .project-home{
color: white;
}
蛍光ライン
code:style.css
/* * <ーこれに蛍光のラインを足す */
.level-1{
background: linear-gradient(transparent 60%, rgb(105, 251, 170) 60%);
}
表示スタイル
code:style.css
@media (min-width: 1050px) {
.row-flex .col-page {
max-width: 960px;
}
.col-page .page-wrapper {
display: flex;
flex-direction: row-reverse;
justify-content: center;
}
.page-wrapper .page {
width: 700px;
}
.page-wrapper .related-page-list {
max-width: 260px;
}
.related-page-list .grid .splitter:first-child {
display: none;
}
.related-page-list .splitter {
height: 10px!important;
}
.related-page-list .realtion-label {
/* "realtion-label"，これはtypo？ */
height: 50px!important;
}
.related-page-list .page-list-item {
height: 50px!important;
}
.related-page-list .grid li {
width: 200px!important;
padding: 0 0 0 0!important;
margin: 0 0 5px 0!important;
}
.related-page-list .grid .page-list-item .content .title{
font-size: 14px;
}
.related-page-list .icon {
display: none!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: '\f08d'; font-family: 'FontAwesome'; font-size: 28px; color: #5882FA; bottom: 0;
display: inline-block; transform: rotate(35deg) }
＃をラベル風にする
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
/* 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:style.css
.grid li.page-list-item:hover
{
box-shadow: 0 0 0 3px #37b2dc;
border-radius: 5px;
transition: box-shadow .1s;
}
.grid li.page-list-item:active {
box-shadow: 0 0 0 0px #37b2dc;
transition: box-shadow .3s;
transition-delay: .3s;
}
.grid li.page-list-item a .hover {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-color: aquamarine;
transition: background-color .5s;
}
.grid li.page-list-item a:active .hover{
background-color: rgba(242, 126, 72,0);}
画像を大きく表示
code:style.css
.line img.image {
max-height: none !important;
max-width: 95% !important;
}