settings

https://scrapbox.io/files/63aa10e2331501001dcc2742.png

table:套用範圍

寫於記事頁面 只套用該記事

只對自己有效

會於重新載入頁面後生效

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_-_勾選框/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 {

--s: 30px;

/*

background:

0 0/calc(5*var(--s)/2) calc(5*var(--s)/2),

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

}

}

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

}

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

/*只在內文不為空時縮小關聯記事*/

.page-wrapper:not(:has(main.not-persistent)) .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;

}

.page-wrapper:not(:has(main.not-persistent)) .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;

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: .75em;

z-index: -2;

white-space: nowrap;

color: transparent;

-webkit-text-stroke: 1px white;

text-stroke: 1px white;

font-size: 24px;

font-weight: bold;

/* writing-mode: vertical-rl; */

animation: blink 4s steps(2, start) infinite;

}

@keyframes blink {

0% { opacity: 0%; }

100% { opacity: 100%; }

}

在筆記正文最後加入固定內容

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;

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;

}