settings
ページの色設定
code:style.css
/* 白っぽくするためのスタイル定義 */
body, .page { background-color: #fff; box-shadow: unset }
.navbar-default { background-color: rgba(255,255,255,.0); border-bottom: 1px solid rgba(0,0,0,.0) }
.navbar-default:hover { background-color: rgba(245,245,245,.7) }
.navbar .navbar-brand .icon-arrow-down { display: none }
.search-form .form-group input { border: 1px solid rgba(0,0,0,.0) }
.search-form .form-group button { color: rgba(0,0,0,.13) }
.navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.0) }
.navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }
/* 左上ページタイトル */
.title {
color: #000000;
font-size: 14px;
}
/*テキスト*/
.editor{
color: #000000;
}
/*右メニュー*/
.dropdown-menu {
border-color: #000000;
box-shadow: none;
}
/* スライダーの見た目*/
input.grid-size-range::-webkit-slider-runnable-track {
background-color: #000000 ;
height: 1px ;
}
input.grid-size-range::-moz-range-track {
background-color: #000000 ;
height: 1px
}
input.grid-size-range::-ms-track {
background-color: #000000 ;
height: 1px
}
input.grid-size-range::-webkit-slider-thumb {
background-color: #000000 ;
}
input.grid-size-range::-moz-range-thumb {
background-color: #000000 ;
}
input.grid-size-range::-ms-thumb {
background-color: #000000 ;
}
.page-sort-menu .tool-btn{
color: #000000 ;
}
code:style.css
/* 縦に長い画像でも全体が見えるようにする */
.grid li.page-list-item a .icon img {
max-width: 100%;
max-height: 100%;
width: auto !important;
}
グリッド
code:style.css
.grid li.page-list-item {
margin-bottom: 0em ;
}
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
background-color: #FFFFFFF ;
box-shadow: none ;
border-radius: 0px ;
}
.grid li.page-list-item a:hover,
.grid.grid-md li.page-list-item a:hover,
.grid.grid-lg li.page-list-item a:hover {
box-shadow: none ;
}
.grid li.page-list-item a,
.grid.grid-md li.page-list-item a,
.grid.grid-lg li.page-list-item a {
border-top: solid 0px #000000;
}
/* pinされたページの表記 */
.grid li.page-list-item a .pin {
background-image: none ;
}
.grid li.page-list-item a .pin::after {
display: none
}
フォント
code:style.css
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Yu Gothic" ;
src: local("Yu Gothic Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 100 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 200 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 300 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Medium") ;
font-weight: 400 ;
}
@font-face {
font-family: "Noto Sans CJK JP" ;
src: src("Noto Sans CJK JP Bold") ;
font-weight: bold ;
}
@font-face {
font-family: "Apple Fallback" ;
src: local("-apple-system"), local("BlinkMacSystemFont") ;
}
@font-face {
font-family: "Windows Fallback" ;
src: local("Meiryo");
}
@font-face {
font-family: "Unix Fallback" ;
src: local("TakaoPGothic"),local("VL PGothic") ;
}
html, body,
.grid li.page-list-item a .title {
font-family:
"YakuHanJP", "Noto Sans CJK JP", "Source Hans Sans Japanese", "Yu Gothic", "YuGothic",
"Noto Sans CJK", "Source Hans Sans", "Apple Fallback", "Windows Fallback", "Unix Fallback", sans-serif ;
-moz-font-feature-settings: "lnum", "pnum" ,"plat" ;
-webkit-font-feature-settings: "lnum", "pnum", "plat" ;
font-feature-settings: "lnum", "pnum", "plat" ;
}
.page-list-item .description code,
.line code,
.line span.code-block {
font-family: "MyricaM M", "Ricty Discord", "Ricty Diminished Discord", "Ricty", "Ricty Diminished", monospace ;
}
.quick-launch .project-home > .title {
font-weight: bold ;
font-family:
"YakuHanJP", "Noto Sans CJK JP", "Source Hans Sans Japanese", "Yu Gothic", "YuGothic",
"Noto Sans CJK", "Source Hans Sans", "Apple Fallback", "Windows Fallback", "Unix Fallback", sans-serif ;
}
関連ページへのリンク
code:style.css
.grid li.relation-label .arrow {
display: none ;
}
/* link */
.grid li.relation-label.links a {
color: #000000 ;
background-color: #FFFFFFF ;
border-radius: 0px ;
}
/* tag */
.grid li.relation-label.headword a {
color: #000000 ;
background-color: #FFFFFF ;
border-radius: 0px ;
}
/* empty link */
.grid li.relation-label.empty-links a {
color: #000000 ;
background-color: #FFFFFF ;
border-radius: 0px ;
}
タグをラベル風にする
code:style.css
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: #fff;
color: #000000;
font-size: 0.8em;
border: 1px solid #000000;
border-radius: 3px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
atype="hashTag":hover{
-webkit-transform: scale(1);
transform: scale(1);
color: #888888;
border: 1px solid #888888;
}
.grid li.page-list-item atype="hashTag"{
color: #fff;
}
リンク
code:style.css
a .page-list-item .description .link {
color: #000000
}
a:hover, a:active {
color: #888888;
}
.line a.empty-page-link {
color: #000000;
}
.line a.empty-page-link:hover {
color: #888888;
}
.grid li.relation-label.links a {
background-color: #ffffff;
}
ピン留めされたページを独立した段に表示する
code:style.css
.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}
トップ画
code:style.css
/*ピンしたカードの大きさを変える*/
.grid .page-list-item.pin {
width: 100% !important;
height: 100% !important;
margin-bottom: 6em;
}
/*ピンしたカードの倍率が合わないから中心からずれる。中心に見えるように調整*/
li.page-list-item.grid-style-item.pin {
margin-left: -17px;
}
scrapboxの要素を隠す
code:style.css
/* リストからsettingsを消すUserCSS */
.grid li.page-list-item > ahref^="/kanji-anima-tion/settings" {
display: none;
}
/* 上のヘッダーを隠す */
.navbar{
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.navbar-default{
border-bottom : none;
}
.page-menu{
display: none;
}
li .relation-label .empty-links{
display: none;
}
/*テロメアを隠す*/
.line .telomere .telomere-border {
border-width: 0px 0px 0px 0px !important;
width: 0;
}
.line .telomere .telomere-border .description {
display: none;
}
/*見出しを隠す（編集はしたいので白色で見えなくする）*/
.line.line-title {
color: #fff;
}
/*new linksを隠す*/
.grid li.relation-label.empty-links a {
display: none;
}
.grid li.page-list-item.empty {
display: none;
}
.page .not-persistent{
diplay: block;
}
/*リストページのタイトルを隠す */
.grid li.page-list-item a .header {
display: none;
}
/*リストページのウインドウサイズによっては出てくる#タグを隠す　*/
.page-link {
display: none;
}
.description.fix{
display: none;
}
.status-bar{
display: none;
}
ページの最大幅
code:style.css
/* ページの最大幅 */
.page-list{
max-width:840px;
margin-left:auto;
margin-right:auto
}
.page {
max-width:760px;
margin-left:auto;
margin-right:auto
}
.col-page {
max-width:760px;
margin-left:auto;
margin-right:auto
}
上部マージン
code:style.css
.app {
padding-top: 38px;
}
code:style.css
.grid li.page-list-item > ahref^="/kanji-anima-tion/fig" {
pointer-events: none;
}
画像を中央寄せするUserCSS
code:style.css
.line img.image {
display: block;
margin: 0 auto;
}