Settings
code:style.css
/* ⌦以降の文字列を非表示 (デバッグ不十分なので保証しない) */
.line:not(.cursor-line) {
span.text > span > span:has(spandata-char="⌦")
{
spandata-char="⌦" {
visibility: hidden;
}
~ span {
visibility: hidden;
}
}
}
code:style.css
.deco-\#{ /* 記法のキーとして#を使ったけど何でもいいと思う */
background-color: var(--page-text-color, #4a4a4a); /* 背景色をテキスト色と同じにする */
}
.line.cursor-line .deco-\#, .deco-\#:hover { /* カーソルがある行とマウスホバー時だけ背景を戻す */
background-color: inherit;
}
code:style.css
.page-list-itemdata-page-links*="'随筆'":not(.pin) > a
{
background-image: url("https://scrapbox.io/files/67f913dcb20b4706bc8d8110.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
}
.page-list-itemdata-page-links*="'知見'":not(.pin) > a
{
background-image: url("https://scrapbox.io/files/67f913e193dff6b548d48c5f.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
}
.page-list-itemdata-page-links*="'記録'":not(.pin) > a
{
background-image: url("https://scrapbox.io/files/67f913e6541d4dbc351cec06.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
}
.page-list-itemdata-page-links*="'bookmarks'":not(.pin) > a
{
background-image: url("https://scrapbox.io/files/67f9160d8e0f416e33add9e9.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
}
.page-list-itemdata-page-links*="'良い音楽'":not(.pin):not(data-page-title="Bookmarks") > a
{
background-image: url("https://scrapbox.io/files/67fdc2c305a4bbcdb7929dc2.png");
background-repeat: no-repeat;
background-size: 40%;
background-position: center;
}
code:style.css
/* Settingsを非表示 */
.page-list-itemdata-page-title="Settings" {
display: none;
}
.page-list .grid li.page-list-item a .pin {
background: none;
}
/* リンクの下線削除 */
.line a.link .image {
padding-bottom: 0px;
border: none;
border-width: 0px;
}
/* #hidden で表示を隠す */
.page-list>.grid>.page-list-itemdata-page-links*="'hidden'"
{
display: none;
}
/* グリッドの設定を初期化する */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: auto;
}
/* display: noneを使用してもレイアウトが崩れないように */
.page-list>.grid>.page-list-itemdata-page-links*="'hidden'"
+ .page-list-item:not(data-page-links*="'hidden'")
{
grid-column-start: 1;
}
.page-list>.grid>.page-list-itemdata-page-links*="'hidden'"
+ .page-list-item:not(data-page-links*="'hidden'")
~ .page-list-item:not(data-page-links*="'hidden'")
{
grid-column-start: auto;
}
/* #hidden のrelatedを非表示 */
div.links-2-hop:has(lidata-page-links="'hidden'"),
.links-container .page-list-itemdata-page-title="hidden"
{
display: none;
}
/* お試しで日報を薄く表示させてみる←モチベの変化確認が目的 */
.page-list>.grid>.page-list-itemdata-page-links*="'日報'":not(.pin)
{
opacity: 0.25;
}
/* Chromeでアプリ化したときに戻るボタンを表示しない */
.history-back-button {
width: 1em !important;
visibility: hidden !important;
}
/* 関連リンクをコンパクトにする */
.relation-label .kamon::before {
display: none;
}
.grid li.relation-label a .icon-lg {
height: auto;
}
.grid li.relation-label a .kamon {
margin: 0;
}
.related-page-list .links-container {
gap: 1em;
}
/* 特定のページのタイトルにアイコンを表示する */
.page-list ahref="/zxc/Gattxxa" .title {
background-image: url("https://scrapbox.io/files/67bff23b3fc7d6ca46d68e5f.png?type=thumbnail&size=small");
background-size: contain; /* 画像サイズ指定 */
background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
background-position: left center; /* 画像を左寄せ中央配置 */
padding-left: 2em; /* 画像の分だけ左側に余白を作る */
}
.page-list ahref="/zxc/%E3%81%8A%E3%81%99%E3%81%99%E3%82%81%E3%83%9A%E3%83%BC%E3%82%B8" .title {
background-image: url("https://scrapbox.io/files/67ef7fcbc331f23abf635313.png?type=thumbnail&size=small");
background-size: contain; /* 画像サイズ指定 */
background-repeat: no-repeat; /* 画像の繰り返しを無効化 */
background-position: left center; /* 画像を左寄せ中央配置 */
padding-left: 2em; /* 画像の分だけ左側に余白を作る */
}
/* タイトルのみ表示する */
.content > div:nth-of-type(2) {
display: none;
}
.grid li.page-list-item a {
height: auto;
}
.grid li {
aspect-ratio: auto;
}
/* タイトルを三行に収める */
.grid li.page-list-item:not(.pin) a .title {
height: 60px;
-webkit-line-clamp: 3;
}
/* 最後のピン留め付箋で改行 */
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/* ホバー時に付箋を拡大させる */
divclass="page-list" .page-list-item:hover {
opacity: 1;
transform: scale(1.1, 1.1);
}
divclass="page-list" .page-list-item {
transition: 0.3s;
}
/* サムネイル画像を枠内に収める */
.grid li.page-list-item a .icon {
position: relative;
padding: 0;
margin: auto;
}
.grid li.page-list-item a .icon img {
display: table-cell;
width: auto;
max-height: 100px;
max-width: 90%;
vertical-align: middle;
border-radius: 3px;
}
/* 動画の最大サイズを95%に
.video-player video {
max-width: 95%;
} */
/* 画像の縮小表示を可能にする */
.level-1 img {
width: 16.7%; max-height: none;
}
.level-2 img {
width: 33.3%; max-height: none;
}
.level-3 img {
width: 50%; max-height: none;
}
.level-4 img {
width: 66.7%; max-height: none;
}
.level-5 img {
width: 83.3%; max-height: none;
}
.level-6 img {
width: 100%; max-height: none;
}
/* スクロールバーの見た目変更 */
::-webkit-scrollbar{
width: 10px;
height: 5px;
}
::-webkit-scrollbar-track{
background: rgba(255, 255, 255,0.4);
border: none;
border-radius: 10px;
}
::-webkit-scrollbar-thumb{
background: rgba(0,0,0,0.2);
border-radius: 10px;
box-shadow: none;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(0,0,0,0.4);
}
* {
scrollbar-width: thin;
scrollbar-color: rgba(0, 0, 0, 0.2) rgba(255, 255, 255, 0.4);
}
/* YTvideoをデフォで小さく*/
.iframe-video-player:not(.floating) {
iframe {
width: 99%;
max-width: 640px;
height: auto;
max-height: 360px;
aspect-ratio: 16 / 9;
}
&:hover .control {
right: unset;
left: min(99% - 24px, 616px); /* calc(min(99%, 640px) - 24px) */
}
}
strong .iframe-video-player:not(.floating) {
iframe {
max-width: 99%;
max-height: none;
}
&:hover .control {
left: calc(99% - 24px);
}
}
/* 画像やYouTube埋め込みの場合にドットを表示しない */
.app:not(.presentation) .indent-mark:has(+.indent .modal-image) span.dot {
position: absolute;
height: calc(100% - 24px);
border-radius: 0px;
width:2px;
top:2;
margin: 2px 2px 0px;
bottom: 2px;
padding: 3px 0 12px 0;
background-color: #d6d7d8;
}
.app:not(.presentation) .indent-mark:has(+.indent .iframe-video-player) span.dot {
position: absolute;
height: calc(100% - 24px);
border-radius: 0px;
width:2px;
top:2;
margin: 2px 2px 0px;
bottom: 2px;
padding: 3px 0 12px 0;
background-color: #d6d7d8;
}
.app:not(.presentation) .indent-mark:has(+.indent a.link img.image) span.dot {
position: absolute;
height: calc(100% - 24px);
border-radius: 0px;
width:2px;
top:2;
margin: 2px 2px 0px;
bottom: 2px;
padding: 3px 0 12px 0;
background-color: #d6d7d8;
}
/* 丸ではなく三角にする*/
.app:not(.presentation) .indent-mark:has(+.indent .iframe-video-player, +.indent .modal-image, +.indent a.link img.image) span.dot:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: -2.5px;
width: 0;
height: 0;
border-left: 7px solid var(--page-text-color, #555); /* 三角形の色 */
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.app:not(.presentation) .indent-mark:has(+.indent .iframe-video-player, +.indent .modal-image) span.dot:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: -2.5px;
width: 0;
height: 0;
border-left: 7px solid var(--page-text-color, #555); /* 三角形の色 */
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.dot {
z-index: 1;
}
.indent-mark span:nth-child(10n+1):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 4px solid #d6d7d8;
position: absolute;
left: -10.0px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+2):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 11.5px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+3):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 34.0px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+4):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 56.5px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+5):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 79.0px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+6):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 101.5px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+7):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 124.0px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+8):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 146.5px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+9):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 169.0px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
.indent-mark span:nth-child(10n+10):not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid #d6d7d8;
position: absolute;
left: 191.5px;
bottom: 12px;
padding: 8px 0 24px 0;
z-index: 0;
}
code:style.css
/* アイコンの位置を少し下げる */
span.text > span > span > a.link.icon > img.icon {
margin-top: 0.5em;
}
/* 編集時はプレーンテキストになるように */
.line:not(.cursor-line) {
/* ふきだし本体 */
.deco-\{, .deco-\} {
display: inline-block;
max-width: calc(100% - 70px);
margin: auto 0;
margin-bottom: 1em;
font-size: 1em;
color: #222;
vertical-align: top;
border-radius: 0.4em;
word-break: break-all;
a, a:hover {
color: #0d4ff3 !important;
text-decoration: underline !important;
}
}
.deco-\{ {
padding: 0.25em 0.5em 0.25em 0.6em;
background-color: #eaeaea;
margin-left: 0.7em;
}
.deco-\} {
padding: 0.25em 0.3em 0.25em 0.5em;
background-color: #8de055;
text-align: left;
}
/* 右側ふきだしの右寄せ */
span:has(span.deco > span.deco-\}) {
text-align: right;
max-width: 500px;
}
/* 左側ふきだしの尻尾 */
span:has(+ span > span.deco > span.deco-\{) > a.icon::after {
content: "";
visibility: hidden !important;
margin-left: 0.25em;
}
span:has(+ span > span.deco > span.deco-\{):has(a.icon > img.icon)::after {
content: " ";
clip-path: polygon(0 50%, 100% 0, 100% 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
background: #eaeaea;
}
/* 右側ふきだしの尻尾 */
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon) > a.icon::before {
content: "";
margin-left: 1em;
visibility: hidden !important;
}
span:has(span.deco > span.deco-\}) + span:has(a.icon > img.icon)::before {
content: " ";
clip-path: polygon(0 0, 100% 50%, 0 100%);
position: absolute;
height: 1em;
margin-top: 0.75rem;
background: #8de055;
}
/* 共通特定サイズ以上の時にメッセージサイズを制限*/
@media(min-width: 440px) {
span > span.deco > span.deco-\{,
span:has(span.deco > span.deco-\}) > span.deco > span.deco-\} {
max-width: 320px;
}
}
/* メッセージを改行可能にする */
span.text spandata-char="\\":has(+ spandata-char="n"),
span.text spandata-char="\\":has(+ spandata-char="n") + spandata-char="n" {
visibility: hidden;
}
span.text spandata-char="\\":has(+ spandata-char="n") + spandata-char="n"::after {
content: "\A";
white-space: pre;
}
}