Settings
https://gyazo.com/0391d35af899b813826ba644efe0f8ea
Для імпорту css з іншого проєкту Scrapbox потрібно вказати потрібний код в style.css в Settings перед іншим кодом CSS, інакше імпортовані стилі не підключаться (див. для прикладу нижче «Позначки для Bullett Journal»).
Позначки для Bullet Journal вимкнено
code:style_off.css
@import "https://scrapbox.io/api/code/scrasobox/Bullet_Journal_をやってみる/style.css";
Відображення номерів стрічок для коду
code:style.css
@media screen and (min-width: 768px) {
.section-title, .code-block-start {
counter-reset: codeline
}
.code-block code > span:not(class) {
counter-increment: codeline
}
body:not(.presentation) .code-block code > span:not(class)::before {
content: counter(codeline);
position: absolute;
display: inline-block;
left: -2.3em;
z-index: 10;
min-width: 50px;
text-align: right;
vertical-align: bottom;
font-family: monospace; color: grey
}
.code-block code > span:not(class)::before {
opacity: .5;
}
.cursor-line .code-block code > span:not(class)::before {
opacity: 1;
font-weight: bolder;
}
}
⇐ /ebiken/Settings
Білі літери на червоному фоні
[! Приклад]
Приклад
code:___style.css
.deco-\! {
color: #fff; /* 白文字 */ /* білі літери */
background-color: #ee6666; /* 赤背景 */ /* червоний фон */
padding: 0.1em 0.2em 0.1em 0.2em;
}
⇐ /help-jp/文字装飾記法
Текстура на фоні
code:style.css
/* https://www.transparenttextures.com */
body { background-image: url(https://gyazo.com/f60fb2fbdf9dca637b3bfbe147fef817.png) }
→ Transparent Textures
⇐ /scrasobox/settings
Позначка для зовнішніх посилань вимкнено
code:___style.css
/* External links */
.line a.link:not(.icon)::after { font-family:'FontAwesome'; content: ' \f08e'; display: inline-block }
⇐ /scrasobox/settings
Вставляє текст в кінці кожної нотатки
code:___style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
/* content: url("https://images-na.ssl-images-amazon.com/images/I/51L7tTg9PML._SX350_BO1,204,203,200_.jpg"); */
content: '«Все, про що я знаю» — Віталій Бондар';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid #0003; border-width: 1px 0; font: 500 normal 1.8rem/1 sans-serif }
⇐ /rashitamemo/Settings
Тремтячі іконки
/villagepump/iconを振動させる記法
Наприклад, для виявлення емоцій vb.icon
code:style.css
@keyframes icon-shake {
0% { transform:translate(0, 0) rotate(0); }
16.66% { transform:translate(2px, -2px) rotate(-5deg); }
33.32% { transform:translate(2px, 1px) rotate(5deg); }
49.98% { transform:translate(0, 0) rotate(0); }
66.64% { transform:translate(-2px, -2px) rotate(5deg); }
83.30% { transform:translate(-2px, 3px) rotate(-5deg); }
100% { transform:translate(0, 0) rotate(0); }
}
.deco-\! img.icon {
animation: 0.15s icon-shake linear infinite;
}
Можливість виділення тексту на сторінці stream
<-- /yuta0801/ScrapboxのStreamページでの文字選択を可能にするUserCSS
code:style.css
.time-range .lines {
user-select: unset;
-webkit-user-select: unset;
}