Settings untill 2021-01-07
2020-01-07まで使用していたSettings
Scrapboxに新Themeが導入された影響でうまく動かなくなった
2020-10-14 11:42:21
@import 構文を使わないようにした読み込みが遅い
本文のフォントを変更 via /motoso/Settings#5ed41648774b17000025cec7
style.css@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP");
html, body, #editor, .grid li {
font-family: helvetica, arial, "Noto Sans JP", sans-serif ;
}コードブロック記法のスタイル
何故か先頭で宣言しないと読み込んでくれない
2020-09-30 01:56:10 @importは先頭にまとめないと読み込んでもらえない？
2020-10-21 09:57:38 余白に行番号を表示するようにしたので、
@media screen and (min-width: 768px) { を消した2020-12-26 07:13:15 コードブロック行頭の空白の色を変えるCSSをつかって直した
選択範囲がずれるのを直した
2020-12-31 15:05:53 行番号を表示しないなら/yuiseki/Settings#5fe7114dd7d3c3000084fbfaでも可
↑のUserCSSと行番号表示を併用すると、選択範囲が１行以上ずれる
style.css.line span.code-block .indent-mark span[class^="c-"] {
position: relative;
top: -0.5em;
}
.line span.code-block .pad:not(.code-block-margin){
background-color: rgba(0,0,0,0.05);
height: 1.7em;
position: relative;
top: 8px;
}
.line span.code-block .code-block-margin {
background-color: #fefefe;
}コード記法の行番号を表示
style.css@media screen {
.section-title, .code-block-start { counter-reset: codeline }
.code-block .pad:not(.code-block-margin) { counter-increment: codeline }
.code-block .pad:not(.code-block-margin)::before {
content: counter(codeline);
position: relative;
display: inline-block;
left: 1px;
z-index: 10;
min-width: 50px;
text-align: left;
vertical-align: bottom;
/* ↓行番号のフォントとか色とかの指定はここ */
font-family: Cica,Consolas,Roboto,Helvetica,Arial,"Hiragino Sans",sans-serif;
color: #3f3f3f;
font-size: 11px;
}
/* カーソル行の行番号を濃く表示する */
.code-block .pad:not(.code-block-margin)::before { opacity: .5 }
.cursor-line .code-block .pad:not(.code-block-margin)::before { opacity: 1; font-weight: bolder }
}style.csshtml[data-project-theme="green"] {
--navbar-bg: rgba(41, 169, 114, 0.7);
}
html[data-project-theme="hacker1"] {
--navbar-bg: rgba(64, 69, 81, 0.7);
}
.navbar {
position: sticky;
top: 0px;
z-index: 51010;
}
.expandable-menu {
z-index: 51011;
}
.page-menu {
top: 70px;
}
.global-menu.dropdown-menu {
overflow-y: scroll;
max-height: calc(100vh - 58px);
}
.modal {
z-index: 501013;
}
.modal-backdrop {
z-index: 501012;
}style.css.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}style.css.page-list-item.pin + .page-list-item:not(.pin) {
clear: both;
}scrapboxのtitleリンクと周辺パーツを強引にnavbarに移動
mobileだとうまく動かないのをなんとかしたい
style.css@media screen and (min-width: 768px) {
.quick-launch .project-home {
position: fixed; top: 12px; left: calc((100% - 1080px)/2); z-index: 501014;}
/*.page { padding-top: 0 }*/
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 768px) and (max-width: 991px) {
.quick-launch .project-home { left: 65px;}
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 992px) and (max-width: 1260px) {
.quick-launch .project-home { left: 80px }
.quick-launch .title {font-size: 22px;}}
@media screen and (min-width: 1261px) {
.quick-launch .project-home { left: calc((100% - 1260px)/2 + 100px) }
.quick-launch .title {font-size: 22px;}}
style.css.navbar-brand img, .navbar-brand span { display: none !important }
.navbar-brand::before {
content: '\f0c9'; font-family: FontAwesome; font-size: 28px; color: #bbbbbb; }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: #1f915e; bottom: 0
}style.css.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}空リンクの色を変える
style.cssa[type="link"].empty-page-link,
a[type="hashTag"].empty-page-link {
color: #309b98 !important;
}スリムなテロメア
style.css/* スリムなテロメア */
.line .telomere .telomere-border, .line .telomere .telomere-border.unread {
transition: none;
box-sizing: content-box; border-color: #fefefe;}
.line .telomere .telomere-border:hover, .line .telomere .telomere-border.unread:hover {
box-sizing: border-box; width: auto;
border-color: #8f9899; background-color: transparent }
/* ↓新着以外のテロメアの色と太さ */
.line .telomere .telomere-border { background-color: #808b8c; width: 2px }
/* ↓新着のテロメアの色と太さ */
.line .telomere .telomere-border.unread { background-color: #52ba68; width: 5px }style.css/* 外部リンクにiconをつける */
.line span:not(.modal-image) > a.link:not(.icon)::after {
font-family:'FontAwesome';
content: ' \f08e';
display: inline-block;
}scrapboxのページカードのタイトルを2行に収める
中身がたくさん見えるようにしたい
style.cssli.page-list-item.grid-style-item div.title {
-webkit-line-clamp: 2;
}2020/8/30 03:04 やめました
常に更新を追うような姿勢になってしまってなんかやだ
style.css_disabled.navbar .navbar-menu>li.stream-btn { display: block; }引用文中の強調に使う
style.css/* 二重括弧による強調をマーカーっぽくする */
.line strong:not([class]) {
background: linear-gradient(transparent 60%, rgba(171, 255, 79, .6) 60%, rgba(171, 255, 79, .6) 100%);
}style.css.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic
}
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'FontAwesome'; content: '\f10d'; vertical-align: super
}等幅fontを使う
等幅 フォント
style.css.deco-\# {
font-family: Cica,Menlo,Monaco,Consolas,"Courier New",monospace;
}使い方：
一行に敷き詰め:
[| [画像URL][画像URL][画像URL]…] 横幅いっぱい1列並べ:
[*| [画像URL][画像URL][画像URL]…] 3列並べ :
[***| [画像URL][画像URL][画像URL]…] 5列並べ:
[*****| [画像URL][画像URL][画像URL]…] style.css /* マトリクス記法 */
.line:not(.cursor-line) .deco-\| { display: inline-flex }
.line .deco-\| img.image { object-fit: contain; margin: 0 }
/* 太字記法と組み合わせて列数を変える */
.line [class^="level"] .deco-\| { flex-wrap: wrap }
.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 }中央寄せは記法が衝突するのでなくした
defaultで左寄せされるので左寄せ記法はいらない
俺が右寄せだ！
style.css/* 中央寄せ */
/*.deco-\| { position: absolute; width: 100%; text-align: center } */
/* 右寄せ */
.deco-\> { position: absolute; width: 100%; text-align: right }
/* 左寄せ */
/*.deco-\< { position: absolute; width: 100%; text-align: left }*/箇条書きの中黒を控えめにする
style.css.line .indent-mark .dot {
top: 11px;
width: 6px;
height: 3px;
background-color: #c9c9c9;
}style.css.line .indent-mark .dot {
opacity: 0.0;
}
.line .indent-mark .c-0 + .dot {
opacity: 1.0;
}
.line .indent-mark .c-1 + .dot {
opacity: 0.8;
}
.line .indent-mark .c-2 + .dot {
opacity: 0.6;
}
.line .indent-mark .c-3 + .dot {
opacity: 0.4;
}
.line .indent-mark .c-4 + .dot {
opacity: 0.2;
}style.css.line.number-list .dot::before {
display: block;
position: absolute;
font-family: FontAwesome;
}
.line.number-list .dot {
background-color: transparent;
display: list-item;
}
.line.number-list .dot::before {
top: -11px;
content: '\f292'; /* # */
font-size: 11px;
color: #c9c9c9;
opacity: 0.0;
}
.line.number-list .c-0 + .dot::before {
opacity: 1.0;
}
.line.number-list .c-1 + .dot::before {
opacity: 0.8;
}
.line.number-list .c-2 + .dot::before {
opacity: 0.6;
}
.line.number-list .c-3 + .dot::before {
opacity: 0.4;
}
.line.number-list .c-4 + .dot::before {
opacity: 0.2;
}style.css.line .katex .mord.text { display: inline; }scrapboxのページカードで数式が改行されないようにする
style.css.grid li.page-list-item a .description .formula { display: inline; }#2021-01-07 18:16:12
#2021-01-01 10:22:42
#2020-12-31 08:32:41
#2020-12-28 10:01:45
#2020-12-26 05:41:20
#2020-12-17 06:11:10
#2020-11-10 19:49:15
#2020-11-05 21:28:14
#2020-11-04 04:53:31
#2020-10-23 05:15:15
#2020-10-22 05:38:55
#2020-10-21 09:58:48
#2020-10-14 11:41:57
#2020-10-07 13:45:30
#2020-10-05 17:18:23
#2020-10-01 14:55:10
#2020-09-30 02:08:10