settings - 0_my-knowledge

settings

このプロジェクトに適用中のCSS

addMenuToMove1stTo15thOneByOne

code:style.css

@import "https://scrapbox.io/api/code/my-knowledge/addMenuToMove1stTo15thOneByOne/style.css";

/scrasobox/チェックボックスになるタグ_2 [o]⇒o、[v]⇒v

code:style.css

@import "https://scrapbox.io/api/code/scrasobox/チェックボックスになるタグ_2/style.css";

Popupメニュー関連

code:style.css

@import "https://scrapbox.io/api/code/my-knowledge/Popupメニュー関連/style.css";

code:style.css

.telomere-border {

/*margin: -20px;*/

}

水平線（hr.icon）を押せなくする（by /progfay-pub/settings）

hr.icon

code:style.css

/* /hr リンクの無効化 */

.line:not(.cursor-line) a.iconhref$="/hr" { pointer-events: none; }

.line img.icontitle="hr" { top: 0; }

背景変更

code:style.css

/* https://www.transparenttextures.com */

body { background-image: url(https://gyazo.com/890e30b79544c117b443f1d0675fd269.png); }

外部リンクにアイコン追加

code:style.css

/* External links icon */

.line a.link:not(.icon)::after {

font-family:'Font Awesome 5 Free';

font-weight: 900;

content: ' \f35d';

display: inline-block

}

特定外部リンクにアイコン追加（）

code:style.css

.line span:not(.deco-\.) > span > a.link:is(

href$=".pdf",

[href^="https://github.com"],

[href^="https://raw.githubusercontent.com"],

[href^="https://gist.github.com"],

href*=".wikipedia.org",

[href^="https://www.amazon.co.jp"],

[href^="https://amazon.co.jp"],

[href^="https://youtube.com/"],

[href^="https://www.youtube.com/"],

[href^="https://archlinux.org"],

[href^="https://aur.archlinux.org"],

[href^="https://wiki.archlinux.org"],

[href^="https://wiki.archlinux.jp"]

):before {

display: inline-block;

/*width: 1em;*/

height: 1em;

vertical-align: -1px;

text-align: center;

background-size: contain;

background-repeat: no-repeat;

}

:is(.line,.line .deco) a.link:is(href*=".wikipedia.org"):before {

content: "\f266";

font-weight: 400;

margin-right: 3px;

}

ahref$="pdf"::before {

content: "PDF";

position: absolute;

left: -20px;

font-size: x-small;

}

行間を狭める

code:style.css

/* 行間を狭める */

class*="section-"class~="line" {

line-height: 1.6em !important;

}

「#」で見出し（参考元：/foldrr/scrapbox-editor-text）

code:style.css

/* 見出し */

.deco-\# {

--midasi-color: rgb(255 67 0);

border-left: 4px var(--midasi-color) solid;

border-bottom: 1px var(--midasi-color) solid;

padding-top: 6px;

padding-bottom: 4px;

padding-left: 4px;

font-size: 120%;

font-weight: 700;

}

div.line:has( .deco-\#) {

padding-top: 6px;

padding-bottom: 8px;

}

テーブル装飾（参考元：/foldrr/scrapbox-editor-table）

table:sample

aa ii uu

ka ki ku

code:style.css

/* テーブル装飾 */

/* 参考元：https://scrapbox.io/api/code/foldrr/scrapbox-editor-table/style.css */

.table-block .cell:first-child {

border-left: solid 1px #cccccc;

}

.table-block .cell {

border-top: solid 1px #cccccc;

border-right: solid 1px #cccccc;

border-bottom: solid 1px #cccccc;

}

.cell-text span {

font-family: 'Kosugi', 'Ricty' !important;

}

強調表示

見本　見本　見本2　a

code:style.css

.deco-\! {

color: red; /* 赤文字 */

font-weight: bold;

background-color: #29f31b;/* 蛍光緑 */

/* background-color: #1bdff3;/* 水色 */

/* background-color: darkred; /* 赤背景 */

padding: 0.1em 0.2em 0.1em 0.2em;

}

/* 強調中のリンクの見づらさ解消 */

.deco-\! a.page-link.empty-page-link {

text-decoration: underline;

text-underline-offset: 2px;

}

以下は強調表示を緑背景赤文字に統一するときのリンク、未リンクの書き分け

code:!style.css

.deco-\! > a.page-link.empty-page-link {

color: unset;

text-decoration: underline;

text-decoration-style: dotted;

text-underline-offset: 2px;

}

.deco-\! > a.page-link:not(.empty-page-link) {

color: unset;

text-decoration: underline;

text-underline-offset: 2px;

}

しおり記法 ◀▶❖❖❖

code:style.css

/* しおり記法 -- 栞箇所のマークやハイライトが不要な場合はこのブロックは消してね */

@media screen {

/* .app:not(.presentation) .line .deco-\. { background-color: #F5FAEA } */

.app:not(.presentation) .line .deco-\.::after {

position: absolute; top: 3px; left: -1.4em;

content: '\f02e'; font: 900 1.7rem/1 'Font Awesome 5 Free'; color: yellowgreen }

}

/* @media screen and (max-width: 990px) { 990pxだと、ウィンドウを二つ横に並べた際に左側に表示されない */

/* @media screen and (max-width: 950px) { */

@media screen and (max-width: 767px) {

.app:not(.presentation) .line .deco-\.::after { position: static; padding-left: .3em }

}

/* 栞一覧を出すページメニューボタンのスタイル -- ここは必要 */

button#Bookmarks.tool-btn:hover { text-decoration: none }

button#Bookmarks.tool-btn::before {

position: absolute; content: '\f02e'; font: 400 20px/46px 'Font Awesome 5 Free'

}

button#Bookmarks.tool-btn img { opacity: 0 }

/* 栞一覧の位置を上昇 */

#Bookmarks + .dropdown-menu.dropdown-menu-right { top: var(--bookmark-top); }

.col-page {

/* デフォルトはボタン非表示 */

~ .page-menu > .page-menu-extension:has(#Bookmarks) { display: none; }

/* 栞が存在するときのみ表示 */

&:has( .lines .deco-\. )

~ .page-menu > .page-menu-extension:has(#Bookmarks) { display: block; }

}

code:css

/* デフォルトはボタンを非表示 */

.page-menu .page-menu-extension:has(#Bookmarks) {

display: none;

}

/* 栞がある時のみ表示 */

.col-page:has( .lines .deco-\. ) + .page-menu .page-menu-extension:has(#Bookmarks) {

display: block;

}

コードブロックに行数表示

code:style.css

body *::before {

--code-number-color: var(--code-color, #342d9c);

/* --accent-color: ; */

}

/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */

/* ↑無効化した */

.section-title {

counter-reset: codeline;

}

.code-block span.indent code.code-body {

counter-increment: codeline;

margin-left: -1.5em;

padding-left: 2.3em;

}

.code-block span.indent code.code-body::before {

content: counter(codeline);

position: absolute;

display: inline-block;

z-index: 10;

margin-left: -2.4em;

width: 2em;

padding-right: 0.2em;

text-align: right;

vertical-align: bottom;

border-right: solid 1px #fff;

/* ↓行番号の色の指定はここ */

color: var(--code-number-color);

}

/* カーソル行の行番号を濃く表示する */

.code-block span.indent code.code-body::before {

opacity: .5;

}

.cursor-line .code-block span.indent code.code-body::before {

opacity: 1;

font-weight: bolder;

/* ↓カーソル行の背景色の色はここ */

background-color: var(--accent-color);

}

コードのフォントを小さく、色変更（参考元：/masui/settings#61373e0d8ee92a0000ed3220）

code:style.css

.line span.code-block {

line-height: 1.2em;

font-size: 88%;

}

.line code {

color: #656567;

}

ピン留めページの独立表示（参考元：/villagepump/settingsの置換を図るページ#65d854b7ffff360000e4476b）

code:style.css

.page-list-item.pin + .page-list-item:not(.pin) {

grid-column-start: 1;

}

インデント深度でdotの色を変更（参考元：/villagepump/settingsの置換を図るページ#65e0149affff360000fc2d19）

こんなかんじ

だお

すごいね

code:style.css

/* インデント深度でdotの色を変更 */

.line .indent-mark .dot { display: none; }

:root {

/* --dot: "\f068"; /* minus:通常 */

/* --dot: "|"; /* minus:通常 */

/* --dot: "\f1b0"; /* paw:猫の日用 */

/* --dot: "\f005"; /* star:クリスマス用 */

/* --dot: "\f1fd"; /* birthday-cake */

/* --dot: "\f6be"; /* cat:猫 */

/* --dot: "|"; */

--dot: "＼";

}

.indent-mark:not(style="width: 0em;"):has(.dot)::after {

/* --size: var(--dot-size, 6px); */

--size: 10px;

position: absolute;

top: calc(13px - var(--size) / 2);

right: calc(12px - var(--size) / 2);

display: inline-block;

width: var(--size);

font-family: "Font Awesome 5 Free";

font-size: var(--size);

font-style: normal;

font-weight: 900; /* Solid */

font-variant: normal;

line-height: 1;

color: var(--dot-color, var(--page-text-color, #555));

text-align: center;

content: var(--dot);

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: auto;

}

.number-list .indent-mark:not(style="width: 0em;"):has(.dot)::after {

content: "\f292"; /* hashtag:通常 */

/* content: "\f2dc"; /* snowflake:クリスマス用 */

}

.indent-markstyle="width: 1.5em;" { --dot-size: 10px; }

.indent-markstyle="width: 3em;" { --dot-size: 9px; }

.indent-markstyle="width: 4.5em;" { --dot-size: 8px; }

.indent-markstyle="width: 6em;" { --dot-size: 7px; }

.indent-mark { --dot-color: #edad0b; }

.indent-mark:is(

style="width: 3em;",

:has(.dot:nth-child(6n + 3))

) { --dot-color: #c7243a; }

.indent-mark:is(

style="width: 4.5em;",

:has(.dot:nth-child(6n + 4))

) { --dot-color: #932674; }

.indent-mark:is(

style="width: 6em;",

:has(.dot:nth-child(6n + 5))

) { --dot-color: #3261ab; }

.indent-mark:is(

style="width: 7.5em;",

:has(.dot:nth-child(6n + 6))

) { --dot-color: #009f8c; }

.indent-mark:is(

style="width: 9em;",

:has(.dot:nth-child(6n + 7))

) { --dot-color: #c9c9c9; }

_のアンダーラインを蛍光に変更

こんな感じ

code:style.css

/* _ <ーこれのアンダーラインを消し、蛍光のラインを足す */

span:has(.deco-\_) { text-decoration: none !important; }

.deco-\_ { background: linear-gradient(transparent 60%, #ffeb36 60%); }

リンクリストアイコン設定

code:style.css

/* リンクリストを表示するページメニューボタンのスタイル */

button#createContents.tool-btn:hover,

button#LinkList.tool-btn:hover { text-decoration: none }

button#createContents.tool-btn::before,

button#LinkList.tool-btn::before {

position: absolute;

content: '\f0c1';

font: 400 20px/46px 'Font Awesome 5 Free';

font-weight: 501;

}

button#createContents.tool-btn img,

button#LinkList.tool-btn img { opacity: 0; }

強調表示時のリンクの扱い

code:style.css!

.deco-\! > a.page-link.empty-page-link {

color: unset;

text-decoration: underline;

text-decoration-style: dotted;

text-underline-offset: 2px;

}

.deco-\! > a.page-link:not(.empty-page-link) {

color: unset;

text-decoration: underline;

text-underline-offset: 2px;

}

レインボー記法（プログレスバーに移行）

こんな感じになるヨ！

code:style.css

/*.deco-\! {*/

.deco-\% {

color: #fff; /* 白文字 */

font-weight: bold;

background: linear-gradient( to right,

red,

orange,

yellow,

green,

aqua,

blue,

purple,

red

) 0% center / 200% auto ; /* グラデーション */

padding: 0.1em 0.2em 0.1em 0.2em;

animation: rainbow 4s linear infinite;

}

@keyframes rainbow {

to { background-position-x: 200%; }

}

キーボードのキー

Ctrlこんな風にキーボードのキーのように表示できるようになる！

code:style.css

.deco-\> {

margin: 0 3px;

padding: 0 5px;

border: 1px solid #999;

border-radius: 2px;

box-shadow:1px 2px 2px #ddd;

background-color: #F5F5F5;

}

右下のステータスアイコンの色変更

code:style.css

.kamon-check-circle:before {

color: green;

}

追加した右メニューの隙間調整

code:style.css

.page-menu-extension {

height: 47px;

}

引用の背景をダークモードでも灰色にする

code:style.css

span.quote {

background-color: #e1dddd !important;

}

プログレスバー（参考：/pon-no-blog/Progress Bar for Scrapbox）

進捗

達成率

code:style.css

Scrapbox用の進捗バー

https://scrapbox.io/pon-no-blog/Progress_Bar_for_Scrapbox

.deco-\%.deco-\- {

min-width: 50em;

}

.deco-\% {

display: inline-block !important;

min-width: 25em;

border-radius: .2em;

border-style: solid;

border-width: 1px;

border-color: #888;

text-align: center;

font: bolder 100%/normal Futura, Arial, sans-serif;

color: #222;

font-size: 14px;

line-height: 24px;

font-weight: bold;

--bar-bgcolor: #fff;

--bar-color: #000;

--complete: 0%;

}

.line strong:has(.deco-\%) { line-height:100% !important; font-size: 16px !important; }

.line .level-1 .deco-\% { --bar-color: #FC446F; --complete: 10%; }

.line .level-2 .deco-\% { --bar-color: #FC446F; --complete: 20%; }

.line .level-3 .deco-\% { --bar-color: #FC446F; --complete: 30%; }

.line .level-4 .deco-\% { --bar-color: #FF9A42; --complete: 40%; }

.line .level-5 .deco-\% { --bar-color: #FF9A42; --complete: 50%; }

.line .level-6 .deco-\% { --bar-color: #FF9A42; --complete: 60%; }

.line .level-7 .deco-\% { --bar-color: #FF9A42; --complete: 70%; }

.line .level-8 .deco-\% { --bar-color: #38ff3e; --complete: 80%; color: gray; }

.line .level-9 .deco-\% { --bar-color: #38ff3e; --complete: 90%; color: gray; }

.line .level-10 .deco-\% { --bar-color: #38ff3e; --complete: 100%; color: gray; }

.deco-\% {

background: linear-gradient(to right, var(--bar-color) var(--complete), var(--bar-bgcolor) var(--complete), var(--bar-bgcolor)) !important;

}

インデントにボーダー追加

こんな

感じ

だよ

code:style.css

span:not(.table-block) .indent-mark .char-index:has( + .char-index) {

border-right: 1px solid black;

margin-right: -1px;

border-color: #c7c7c7;/* 黒すぎてカーソルが見えないから薄いグレーに変更。これが良ければ上記のblackをこれに変更 */

}

入力可能域以外に色付け

code:style.css

/* html:not(data-display-style="presentation window-has-focus") main.page { background-color: #edffed; } */

html:not(data-display-style~="presentation") main.page { background-color: #edffed; }

.lines > .line { background-color: white; }

カーソル行の色変更

code:style.css

div.line.cursor-line {

background-color: #f8f8f8;

}

Mermaidの背景色変更

code:style.css

.mermaid-preview {

/* quadrant での背景変更（SWOT分析などの図） */

.quadrants .quadrant rect { fill: gray; }

}

中央揃え

code:style.css

.line:not(.cursor-line) .deco-\':not(.deco-_) {

display: inline-block;

width: 100%;

text-align: center;

}

------以下は試験中------

インデントの色変更

code:css

.indent-mark .char-index:has( + .char-index) {

background-color: aliceblue;

}

トップページにて、空のページを非表示化

code:css

li:has( div.description:empty):not(:has(.pin)) {

display: none;

}

インデントの右側にラインを引く

code:css

:not(:is(.code-block, .table-block)) > .indent-mark > span:not(.dot) {

border-left: solid 1px black;

}

1) 見出しの数字

1.1) 見出し

1.2) 見出し

2) 見出し

上記のようにする方法

code:css

.line .level-1 .deco-\# {

}

ol化試作段階

code:css

/* [0 ああ]みたいにすると、それ以降の隣接するタブされた文字列のマーカーが1.みたいに<ol>みたいになる */

.deco-\0:marker {

content: "1";

}

以下サンプル

code:style.css

/* これが現状最適解 */

.line:has( .deco-\..deco-\| ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

.line:has( .deco-\..deco-\| ) +

.line:has( .dot ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

.line:has( .deco-\..deco-\| ) +

.line:has( .dot ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

.line:has( .deco-\..deco-\| ) +

.line:has( .dot ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

.line:has( .deco-\..deco-\| ) +

.line:has( .dot ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

.line:has( .deco-\..deco-\| ) +

.line:has( .dot ) +

.line:has(style="width: 1.5em;") {

background-color: green

}

code:css

/* これが現状最適解パート2 */

.line:has( .deco-\..deco-\| ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

.line:has( .deco-\..deco-\| ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ) + .line:has(style="width: 1.5em;"),

background-color: green

}

code:css

.line:has( .deco-\..deco-\| ) ~

.line:has(style="width: 1.5em;"):not(:has( + .line .empty-char-index)) {

background-color: green

}

.line:has( .deco-\..deco-\| ) ~

.line:has(style="width: 1.5em;"):has( + .line :not(.indent-mark)) {

background-color: green

}

code:css

/* 本当はこんな風にしたいが、:is()内部で「+」は使用不可能なので現状は無理 */

.line:has( .deco-\..deco-\| ) +

:is(

.line:has( .dot ),

.line:has( .dot ) + .line:has( .dot ),

.line:has( .dot ) + .line:has( .dot ) + .line:has( .dot ),

) +

.line:has(style="width: 1.5em;") {

background-color: green

}

あいうえお

かきくけこ

あいうえお

かきくけこ

#Scrapbox #settings #CSS #JavaScript