settings
設定ファイル類
Scrapboxにしか関係ないので見なくて大丈夫
https://gyazo.com/2eb777b026a4fb7a702ccd5aaac6854a
/niseoukagaka/hr.icon
code:style.css
/* 白っぽくするためのスタイル定義 */
body,.page { background-color: #ffffff; box-shadow: unset } .navbar-default { background-color: rgba(246,191,188,.7); border-bottom: 1px solid rgba(0,0,0,.067) }
.navbar-default:hover { background-color: rgba(246,191,188,.9) }
.navbar .navbar-brand .icon-arrow-down { display: none }
.search-form .form-group input { border: 1px solid rgba(0,0,0,.13) }
.search-form .form-group button { color: rgba(0,0,0,.13) }
.navbar-default .visible-xs .navbar-form { border-color: rgba(0,0,0,.067) }
.navbar .navbar-menu>li>a.mobile-search-toggle { color: rgba(0,0,0,.33) }
/* 検索ボックスを右寄せにする仕掛け */
.navbar .row .col-menu { width: unset }
/scrasobox/白いテーマ
code:style.css
/* ポップアップメニューの修飾ボタンをアイコン化 */
.popup-menu .button-container .button.strong-button > strong,
.popup-menu .button-container .button.italic-button > i,
.popup-menu .button-container .button.strike-button > strike {
display: inline-block; width: 0; text-indent: -9999px }
.popup-menu .button-container .button.link-button::after,
.popup-menu .button-container .button.strong-button::after,
.popup-menu .button-container .button.italic-button::after,
.popup-menu .button-container .button.strike-button::after {
font: normal 100%/normal FontAwesome;
display: inline-block; min-width: 16px; text-align: center }
.popup-menu .button-container .button.strong-button::after { content: '\f032' }
.popup-menu .button-container .button.italic-button::after { content: '\f033' }
.popup-menu .button-container .button.strike-button::after { content: '\f0cc' }
カードの表示
code:style.css
/* カード型ページリンクの枠 */
.grid li.page-list-item a { border: 0px solid rgba(0,0,0,.14) }
.grid li.page-list-item a .header { border-top: unset }
.grid li.page-list-item a {
border-radius: 5px;
box-shadow: 3px 3px 10px rgba(150, 150, 150, .5);
}
文字を小さくする
code:style.css
.deco-\~ {
font-size: 100%;
font-weight: 100;
}
code:style.css
span.deco strong.level-1 span.modal-image a img.image{
height: 5em;
/*display:none;*/
}
code:style.css
/* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line .level-1 .deco-\| > span { width: calc(100%/1) }
.line .level-2 .deco-\| > span { width: calc(100%/2) }
.line .level-3 .deco-\| > span { width: calc(100%/3) }
.line .level-4 .deco-\| > span { width: calc(100%/4) }
.line .level-5 .deco-\| > span { width: calc(100%/5) }
.line class^="level" .deco-\| img.image { object-fit: cover; width: 100%; height: 100% } /* 並べた画像の間にスキマが欲しい場合はこの2行を追加・ぴっちり敷き詰めたい場合はこの2行は不要 */
.line .deco-\| > span, .line class^="level" .deco-\| > span { overflow: hidden } .line .deco-\| img.image, .line class^="level" .deco-\| img.image { margin: .2em } 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: 13px; color: #f0f0f0; bottom: 0; diplay: inline-block; transform: rotate(35deg) }
code:style.css
/* アイコンサイズを大きくする */
.line img.icon { height: 1.5em }
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%; max-height: calc(100vh - 130px) !important; overflow-y: auto }
/scrasobox/ナビバーをヘッダーへ
code:style.css
/* プロジェクトTOPへのリンクと周辺パーツを強引にヘッダーエリアに移動 */
/* ※次のヘッダー固定と同時に使う必要がある */
@media screen and (min-width: 768px) {
.quick-launch {
position: fixed; top: 5px; left: calc((100% - 1080px)/2); z-index: 990 }
.page { padding-top: 0 } }
@media screen and (min-width: 768px) and (max-width: 1200px) {
.quick-launch { left: 80px } }
code:style.css
/* はりつくメニューバー */
@media screen and (min-height: 600px) and (min-width: 768px) {
.app:not(.presentation) { padding-top: 90px; padding-right: 0 !important }
.app:not(.presentation) .page-menu { position: fixed; top: 90px }
.navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 990; overflow: unset }
.dropdown.open .dropdown-menu {
position: absolute; left: auto; top: auto;
max-height: calc(100vh - 100px); overflow-y: auto }
.dropdown.open .dropdown-menu.global-menu { left: 0; top: 54px }
.page-menu .dropdown.open .dropdown-menu { position: absolute; top: 0 } }
/scrasobox/テロメアの存在感を薄くする]
code:style.css
/* テロメアとページメニューを脇に寄せて本文を広く見せる */
@media screen and (min-width: 1200px) {
.line .telomere .telomere-border { left: calc((100% - 1160px)/2 - 4px) }
.app:not(.presentation) .page-menu { right: calc((100% - 1160px)/2 - 4px) } }
/* テロメアの存在感を薄くする */
.line .telomere .telomere-border:not(:hover) { opacity: .1 }
.line .telomere .telomere-border.unread:not(:hover) { opacity: .3 }
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: 'Link';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid rgba(0,0,0,.2); border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
.app:not(.presentation) .page.not-persistent::after {
content: 'none' }
@media screen {
/* 本文のフォント設定: 文字サイズ */
.app:not(.presentation) .editor { font-size: 130% }
/* 本文のフォント設定: 文字詰め */
.line .text:not(.code-block) { font-feature-settings: "pkna" }
/* 本文のフォント設定: 行間 */
.app:not(.presentation) .line .text:not(.code-block) { line-height: 2.1 }
.line .indent-mark .dot { top: calc(100% - .2em) }
/* ページタイトルのフォント設定と罫線 */
.app:not(.presentation) .line.line-title .text {
font-size: calc(1.2vw + 2rem); font-weight: 600; line-height: 1.2 !important;
border-bottom: 1px solid rgba(0,0,0,.2); padding-bottom: 1rem; } }
code:style.css
/* 箇条書きを控えめにする */
.app .line .indent-mark .dot {
height: .2em; width: .4em; border-radius: 25%;
background-color: rgba(173,173,173,.55) }
.app:not(.presentation) .line .indent-mark .dot { top: auto; bottom: 0 }
/memooooo/bodyの設定を変更する
code:style.css
body,
.editor{
color: #373942 !important; /* 全体のフォントカラーを変える */ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif !important; /* フォントを游ゴシック優先にする */
}
/memooooo/見出し風にする
code:style.css
.line strong.level-3{
display: block;
position: relative;
font-size: 200%;
line-height: 160%;
text-align: center;
margin: auto;
font-weight: 100;
}
code:style.css
.level-1{
background: linear-gradient(transparent 60%, #e5f0ff 60%); }
/memooooo/imgをセンタリングする
code:style.css
/* imgをセンタリング */
.line img.image,
.line img.strong-image{
display: block;
margin: 0 auto;
}
code:style.css
/* 動画をセンタリング */
.video-player,
.video{
display: block;
margin: 0 auto;
}
/memooooo/#で始まるタグをラベル風にする
code:style.css
/* #で始まるタグをラベル風にする */
display: inline-block;
padding: 0px 10px;
margin: 0 8px 10px 0;
font-size: 0.8em;
border-radius: 5px;
transition: .3s;
-webkit-transform: scale(1);
transform: scale(1);
}
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
code:style.css
/* バッヂ風 */
display: inline-block; border-radius: .2em;
margin:0em 0.5em;
padding:0em 0.5em;
text-align: center; font: bolder 100%/normal Futura, Arial, sans-serif; color: #FFF } /* 色 */
code:style.css
pointer-events: none;
}
code:style.css
display: none;
}