settings
https://scrapbox.io/files/63aa10e2331501001dcc2742.png
table:套用範圍
寫於記事頁面 只套用該記事
須於右上角的圖示→User settings→Extensions裡啟用User Script
只對自己有效
會於重新載入頁面後生效
code:style.css
@import "../UserCSS_-_擴充語法/style.css";
code:style.css
@import "../UserCSS_-_修改字體/style.css";
粗體字 1 [* 粗體字 1]
code:style.css
/* @import "../UserCSS_-_粗體字加上標記線/style.css"; */
行內引用 [" 行內引用]
code:style.css
@import "../UserCSS_-_行內引用/style.css";
文字讀音ㄉㄨˊㄧㄣ 文字[# 讀音[ㄉㄨˊㄧㄣ]] code:style.css
@import "../UserCSS_-_文字讀音/style.css";
code:style.css
@import "../UserCSS_-_勾選框/style.css";
顯示
code:style.css
@import "../UserCSS_-_顯示縮排深度/style.css";
code:style.css
@import "../UserCSS_-_將列表的標記改成FontAwesome圖示/style.css";
code:style.css
@import "../UserCSS_-_獨立顯示釘選記事區塊/style.css";
code:style.css
@import "../UserCSS_-_縮小釘選記事/style.css";
code:style.css
@import "../UserCSS_-_於行動版時移動新增文章鍵至右下角/style.css";
code:style.css
@import "../UserCSS_-_修改程式區塊的檔案名稱顯示/style.css";
code:style.css
@import "../UserCSS_-_替特定外部連結加上favicon/style.css";
code:style.css
@import "../UserCSS_-_顯示行數/style.css";
code:style.css
@import "../UserCSS_-_可捲動表格/style.css";
code:style.css
@import "../UserCSS_-_縮減端粒/style.css";
code:style.css
@import "../UserCSS_-_隱藏筆記的瀏覽數/style.css";
code:style.css
@import "../UserCSS_-_使排序清單保持展開/style.css";
code:style.css
@import "../UserCSS_-_縮小YouTube嵌入尺寸/style.css";
code:style.css
/* @import "../UserCSS_-_將關聯連結區塊移至側邊/style.css"; */
code:style.css
/* @import "../UserCSS_-_加上開新頁面連結的icon/style.css"; */
code:style.css
/* @import "../UserCSS_-_固定project標題於上方/style.css"; */
外觀微調
code:style.css
body {
/* background-color: #333; */ --s: 30px;
background:
conic-gradient(at 60% 60%, var(--c1) 75%, #0000 0) 0 0/calc(5*var(--s)/2) calc(5*var(--s)/2),
repeating-conic-gradient(var(--c1) 0 25%, #0000 0 50%) 0 0/calc(5*var(--s)) calc(5*var(--s)),
repeating-conic-gradient(var(--c2) 0 25%, var(--c1) 0 50%)
0 0/var(--s) var(--s);
}
.line a.link, .page-list-item .description .link {
}
}
/* 加入project名稱副標 */
.project-home > .title {
line-height: 1em;
text-align: center;
}
.project-home > .title:after {
content: "\A 1 Coin Clear";
padding: 5px;
white-space: pre;
font-size: 0.5em;
line-height: 0.5em;
}
/* 更改上方project名稱顏色 */
.quick-launch .project-home {
--tool-text-color: white;
}
/* 加入動態閃爍 */
@keyframes glow {
0%,
100% {
filter: drop-shadow(0 0 12px white);
}
50% {
filter: drop-shadow(0 0 8px #eee); }
}
.project-home {
filter: drop-shadow(0 0 12px white);
animation: glow 2s infinite ease;
}
/* 省略超過2行的筆記卡片標題 */
li.page-list-item.grid-style-item div.title {
-webkit-line-clamp: 2;
}
/* 對齊表格圖片 */
span.table-block img {
vertical-align: bottom;
}
/* 隱藏新增鍵 */
a.new-button { display: none; }
/* 替mermaid區塊預覽加上邊框 */
.mermaid-preview svg,
.page .image,
.page .iframe-video-player iframe.youtube,
.page .video-player {
border-radius: 6px;
}
更改一覽頁面和關聯頁面上未觀看與已觀看的筆記卡顏色
code:style.css
.grid li.page-list-item a:not(:visited) .content .header {
}
.grid li.page-list-item a:not(:visited) .content .header {
border-color: var(--telomere-unread, #52ba68); }
code:style.css
/*枠線の設定*/
.grid li.page-list-item a {
border-radius: 6px;
border: solid 1px;
/*影をなくす*/
box-shadow: none;
}
.grid li.page-list-item a:hover {
box-shadow: none;
}
hover卡片時放大與加上邊框
code:style.css
.grid li.page-list-item:hover {
border-radius: 6px;
transition: box-shadow 0.1s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.grid li.page-list-item:active {
transition: box-shadow 0.3s;
transition-delay: 0.3s;
}
.grid li.page-list-item a .hover {
opacity: 0;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 1;
background-color: rgba(116, 206, 133, 0.31);
transition: background-color 0.5s;
}
.grid li.page-list-item a:active .hover {
background-color: rgba(242, 126, 72, 0);
}
縮小關聯記事
code:style.css
.links-container .grid li {
height: 32px;
aspect-ratio: auto;
}
.links-container .grid li.relation-label a .kamon {
display: none;
}
.links-container .grid li.page-list-item a {
border-radius: 7px;
margin: none;
box-shadow: none;
}
.links-container .grid li.page-list-item a .header {
padding-top: 3px;
z-index: 1;
}
.links-container .grid li.page-list-item a .title {
font-size: 12px;
text-align: center;
text-shadow: 0 0 4px white;
}
.links-container .grid li.page-list-item a .content {
position: relative;
}
.links-container .grid li.page-list-item a .icon {
position: absolute;
top: -50%;
left: 0;
z-index: 0;
filter: opacity(0.15);
}
背景裝飾
code:style
.page-list::before, .page-list::after {
content: '1 COIN CLEAR 1 COIN CLEAR 1 COIN CLEAR 1 COIN CLEAR';
position: fixed;
z-index: -1;
white-space: nowrap;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;
color: transparent;
font-size: 120px;
font-weight: bold;
font-style: italic;
}
.page-list::before {
top: .5em;
animation: marquee 48s linear infinite;
}
.page-list::after {
bottom: .5em;
animation: marquee-reverse 48s linear infinite;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes marquee-reverse {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
code:style.css
.page-list::before, .app:not(.presentation) .col-page::before {
content: '1 COIN CLEAR 1 COIN CLEAR 1 COIN CLEAR 1 COIN CLEAR';
position: fixed;
top: .5em;
right: -5%;
z-index: -1;
white-space: nowrap;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;
filter: drop-shadow(2px 2px var(--card-title-bg, #f2f2f3)); color: transparent;
font-size: 120px;
font-weight: bold;
font-style: italic;
}
.page-list::after, .app:not(.presentation) .col-page::after {
position: fixed;
bottom: .75em;
right: .25em;
z-index: -2;
white-space: nowrap;
color: transparent;
-webkit-text-stroke: 1px white;
text-stroke: 1px white;
filter: drop-shadow(2px 2px var(--card-title-bg, #f2f2f3)); font-size: 64px;
font-weight: bold;
writing-mode: vertical-rl;
}
在筆記正文最後加入固定內容
https://gyazo.com/a434e42fef9b74be5a28a0ce9c84f2ec
900x120
code:style.css
/* 在正文最後加入固定內容 */
.app:not(.presentation) .page:not(.not-persistent)::after {
content: '';
text-align: center;
display: block; margin-top: 2rem ; padding: 1rem 0;
border: solid #0003; border-width: 1px 0; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAJCAIAAABxOqH0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MUEzNDdGMzdDMDhEMTFFQUFEOEY4Qjc0NEI0MzEwRTMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MUEzNDdGMzhDMDhEMTFFQUFEOEY4Qjc0NEI0MzEwRTMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDoxQTM0N0YzNUMwOEQxMUVBQUQ4RjhCNzQ0QjQzMTBFMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDoxQTM0N0YzNkMwOEQxMUVBQUQ4RjhCNzQ0QjQzMTBFMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PkNk148AAABlSURBVHjaXMo9DkAREEbRiVZiBxoShdl/aROUoqEStWaa94fkcatvTgaulXMu5zw2g6/ee2tNSjnOqc+XUgpWU7331tpNa61CCM75pjFGYwz8YkSUUtJab1pKOejVEAIiHnoLMADo6zHZNScGtAAAAABJRU5ErkJggg==) repeat-x;
background-size: 7px 9px;
background-position: center; min-height: 1em }
fix: navbar寬度
code:style.css
.app .navbar .row {
max-width: 1200px;
margin: 0 auto;
}