settings

code:style.css

code:style.css

code:style.css

hr.icon

code:style.css

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

pointer-events: none;

}

code:style.css

body {

}

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-height: 1.6em !important;

}

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:has( .deco-\#) {

padding-bottom: 8px;

}

table:sample

aa ii uu

ka ki ku

code:style.css

/* テーブル装飾 */

.table-block .cell:first-child {

}

.table-block .cell {

}

.cell-text span {

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

}

強調表示

code:style.css

.deco-\! {

color: red; /* 赤文字 */

font-weight: bold;

/* 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;

}

サイドパネルのcss

code:style.css

/* サイドパネルcss */

div#scList {

position: fixed;

left: 0px;

top: 110px;

}

しおり記法

code:style.css

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

@media screen {

.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 }

こんな感じ

になるお

code:disable_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 }

codeブロックに行数表示

code:style.css

body *::before {

/* --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;

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

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);

}

code:style.css

.line span.code-block {

line-height: 1.2em;

font-size: 88%;

}

code:style.css

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

grid-column-start: 1;

}

こんなかんじ

だお

すごいね

code:style.css

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

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

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

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;

text-align: center;

/* content: "\f068"; /* minus:通常 */

content: "|"; /* minus:通常 */

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

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

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

/* content: "\f6be"; /* cat:猫 */

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

text-rendering: auto;

}

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

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

}

.indent-mark:is(

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

.indent-mark:is(

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

.indent-mark:is(

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

.indent-mark:is(

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

.indent-mark:is(

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

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

こんな感じ

code:style.css

span:has(.deco-\_) {

text-decoration: none !important;

}

.deco-\_ {

}

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

code:style.css

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

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

button#LinkList.tool-btn::before {

position: absolute;

content: '\f0c1';

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

font-weight: 501;

}

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-\% {

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%; }

}

code:style.css

.deco-\> {

margin: 0 3px;

padding: 0 5px;

border-radius: 2px;

}

code:style.css

.kamon-check-circle:before {

color: green;

}

code:style.css

.page-menu-extension {

height: 47px;

}

code:style.css

span.quote {

}

進捗

進捗

進捗

進捗

code:style.css

/*

Scrapbox用の進捗バー

*/

.deco-\%.deco-\- {

min-width: 50em;

}

.deco-\% {

display: inline-block !important;

min-width: 25em;

border-radius: .2em;

border-style: solid;

border-width: 1px;

text-align: center;

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

font-size: 14px;

line-height: 24px;

font-weight: bold;

--complete: 0%;

}

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

.deco-\% {

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

}

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

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

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;

}

┣ aaa

┃┗いいい

┗ｓｓｓ

code:css

.deco-\| + ?:marker {

content: "|";

}

.deco-\| + ?:last:marker {

content: "└";

}

code:css

.deco-\0:marker {

content: "1";

}