settings
https://gyazo.com/0854d99544ac89ebb59fd3f235c59670
大和ノ求聞史box用の設定ファイル
装飾等から必要に応じて記述
昔使っていたcssは旧settingsを参照
カスタムテーマ
code:style.css
@import url("https://fonts.googleapis.com/css2?family=DotGothic16");
/* 文字色は白に */
.text {
color: white;
}
.page {
background-color: var(--page-bg, #000000);
border: 1px solid rgb(255 255 255);
box-shadow: none;
border-radius: 0px;
}
.table-block .cell {
white-space: pre;
color: #cbcbcb;
border-color: white;
border: 1px;
}
.table-block .cell:nth-child(odd) {
background-color: rgb(255 255 255 / 8%);
border-color: white;
border: 1px;
}
.table-block .cell:nth-child(2n + 1) {
background-color: rgba(255, 255 255, .09);
border-color: white;
border: 1px;
}
.table-block .cell:nth-child(2n) {
background-color: rgba(255, 255, 255, .15);
border-color: white;
border: 1px;
}
.line a.link {
color: var(--page-link-color, #a1b7ec);
}
data-hover-visible .line a.link:hover {
color: var(--page-link-hover-color, #0d4ff3);
}
data-hover-visible .line a.page-link:hover {
color: var(--page-link-hover-color, #0d4ff3);
}
.line a.page-link {
color: var(--page-link-color, #a1b7ec);
}
.line code {
color: var(--code-color, #a1b7ec);
}
.line code {
color: var(--code-color, #a1b7ec);
background-color: var(--code-bg, rgba(0, 0, 0, .18));
}
.cursor svg rect {
fill: var(--cursor-color, #fff);
}
.app:not(.presentation) .page::after {
content: '文章はここで途切れている';
display: block;
margin-top: 5rem;
padding: 1rem 0;
text-align: center;
border: solid rgba(255, 254, 254, 0.4);
border-width: 1px 0;
color: white;
}
.grid li.page-list-item a .header.pinned {
border-color: var(--card-title-bg-pinned, #b1b1b1);
}
.grid li.page-list-item a .header {
border-top: #b1b1b1 solid 0px;
}
.grid li.page-list-item a {
background-color: #000000;
border: 1px solid rgb(255, 255, 255);
box-shadow: none;
border-radius: 0px;
}
.grid li.page-list-item a .title {
color: #ccc;
}
.grid li.page-list-item a .description {
color: #b9b9b9;
}
.line .quote { font-style: normal; background: #ffffff; }
.editor, .stream, li.page-list-item {font-family: unset; color: #000; !important;}
.grid li.page-list-item a:has(.page-link span:contains("WIP")) {
background-color: rgba(255, 0, 0);
}
.line .quote {
background: #5d5d5d;
}
.line img.icon {
height: 1.6em;
position: relative;
top: 0;
}
.navbar-default {
background-color: rgb(49 0 47);
}
.line span.code-block .code-block-margin {
background-color: #000000;
}
/*上部のメニュー関連*/
.page-filter-menu .tool-btn, .page-list-translation-menu .tool-btn, .page-list-mode-menu .tool-btn,.page-list-translation-menu .fas {
color: #ffffff;
}
/*フォルダのようなデザインに*/
/*ページタイトルにフォルダ当の文字が入っているものはフォルダのデザインにする*/
li.page-list-item:has(ahref*="folder")::before,
li.page-list-item:has(ahref*="フォルダ")::before,
li.page-list-item:has(ahref*="dir")::before,
li.page-list-item:has(ahref*="ディレクトリ")::before {
content: "";
position: absolute;
top: -15px;
left: 0px;
width: 80px;
height: 32px;
background: #000000;
border-radius: 6px 6px 0 0;
border: 1px solid #ffffff;
}
.grid li.page-list-item ahref="/yamato3010/settings" {
border: 1px solid rgb(255 0 0);
}
li.page-list-item {
margin-top: 10px;
}
特殊ページ
code:style.css
/*WIPページ*/
.page:has(.page-linkhref="/yamato3010/WIP") {
background-color: rgba(0, 0, 0);
}
.page:has(.page-linkhref="/yamato3010/WIP")::before {
content: "警告！：このファイルにはWIPタグが含まれており、ファイルの内容が完全でない可能性があります。";
color: red;
display: block;
margin-top: 5rem;
padding: 1rem 0;
text-align: center;
border: solid rgba(255, 254, 254, 0.4);
border-width: 1px 0;
}
/*settingsページ*/
.page:has(img[src="https://gyazo.com/0854d99544ac89ebb59fd3f235c59670/max_size/1000"]) {
background-color: rgba(43, 0, 0);
}
.page:has(img[src="https://gyazo.com/0854d99544ac89ebb59fd3f235c59670/max_size/1000"])::before {
content: "警告！：このファイルは設定ファイルです。管理者(yamato3010)の承認なく更新することはできません。";
color: red;
display: block;
margin-top: 5rem;
padding: 1rem 0;
text-align: center;
border: solid rgba(255, 254, 254, 0.4);
border-width: 1px 0;
}
画面上部のメッセージ
code:style.css
.quick-launch::after {
content: "アクセス承認。\Aようこそ、大和ノ求聞史boxへ。\A閲覧したいファイルを選択してください。";
display: block;
color: white;
white-space: pre-line;
}
アイコン大きく
yamato3010_big.icon←こんな感じでアイコンは大きく
code:style.css
img.icontitle="yamato3010_big" {
height: 3.3em;
border-radius: 50%;
object-fit: cover;
}
カスタムカーソル
code:style.css
html {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
.text {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
.title {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
a {
cursor: url(https://cdn-ak.f.st-hatena.com/images/fotolife/y/yamato3010/20230331/20230331180505.png)1 1,auto;
}
フェイクユーザーカーソル
フェイクユーザーカーソル
code:style.css
:not(.cursor-line) > .text .deco-\> {
/* display: block; */
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
color: #fff;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
opacity: .7;
}
:not(.cursor-line) > .text .deco-\>::after {
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
@keyframes cursor_move {
20% {
left: 0px;
}
20.1% {
left: 15px;
}
40% {
left: 15px;
}
40.1% {
left: 30px;
}
60% {
top: 0px;
}
60.1% {
top: 28px;
}
80% {
left: 30px;
}
80.1% {
left: 120px;
}
100% {
left: 120px;
}
100.1% {
left: 300px;
}
}
.deco-\>.deco-\| {
animation-name: cursor_move;
animation-duration: 5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
固定ページを別の行に
code:style.css
.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {
clear: both;
}
ネタばれ防止記法
[~ このようにかく]
code:style.css
.deco-\~:not(:hover) {
filter: blur(3px);
}
.cursor-line .deco-\~:not(:hover) {
filter: none;
}
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open .dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}
form /scrasobox/のびのびドロップダウン
背景
code:style.css
body{
background-color: black;
/*background-image: URL('https://i.gyazo.com/98afc387cf5e0b40d890331087bfb292.png');*/
/*background-attachment: fixed; /* 背景を固定 */*/
}
.quick-launch .project-home, .quick-launch .history-back-button {
color: #ffffff!important;
}
.page-menu .tool-btn {
color: #fff!important;
}
.page-sort-menu .tool-btn {
color: #fff!important;
}
吹き出し
code:style.css
.deco-\{, .deco-\} {
font-size: 1em;
color: #FFF;
background-color: #5d6966;
padding: 0.1em 0.2em 0.1em 0.2em;
border-radius: 0.4em;
margin: auto 0.3em;
display: inline-block;
max-width: calc(100% - 100px);
vertical-align: top;
}
.deco-\{:before {
position: absolute;
margin: 0;
padding: 0;
transform: translateX(-100%) translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0 0.6em 0.6em;
border-style: solid;
border-color: #5d6966 transparent;
}
.deco-\}:after {
position: absolute;
margin: 0;
padding: 0;
transform: translateY(calc(1em - 80%));
width: 0;
content: "";
border-width: 0 0.6em 0.6em 0;
border-style: solid;
border-color: #5d6966 transparent;
}
.deco-\!:before, .deco-\!:after {
border-color: #ee6666 transparent;
}
.deco-\{ a,
.deco-\} a {
color: #66F;
}
.deco-\! {
color: #fff; /* 白文字 */
background-color: #ee6666; /* 赤背景 */
padding: 0.1em 0.2em 0.1em 0.2em;
}
/* マーカー */
.line strong:not(class) {
background: linear-gradient(transparent 60%, #646400 60%) }
外部リンクと区別する
code:style.css
/* 外部リンクにiconをつける */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: bold;
display: inline-block;
font-size: .5em;
color: #888;
padding-right: 2px;
}
# で始まるタグをラベル風に
code:style.css
/* これは上のCSSで指定済み
body {
--accent-color: #3d95c9;
}
*/
/* ＃で始まるタグをラベル風にする */
atype="hashTag"{
display: inline-block;
padding: 2px 8px;
margin: 0 8px 10px 0;
background: var(--page-bg);
color: #72cafd !important;
font-size: 0.8em;
border: 1px solid #72cafd;
border-radius: 3px;
transition: .2s;
-webkit-transform: scale(1);
transform: scale(1);
}
a.empty-page-linktype="hashTag"{
color: #fb7476 !important;
border-color: #fb7476;
}
atype="hashTag":hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
フォント関連
code:style.css
html,
body,
code,
kbd,
pre,
samp,
.tooltip,
.editor,
.grid li,
.list li.page-list-item,
.popup-menu,
.stream {
font-family: 'Font Awesome 5 Free','DotGothic16';
}
コードブロックに行番号を表示
code:style.css
body *::before {
--code-number-color: var(--code-color);
/* --code-accent-color: ; */
}
/* コード記法の行番号を表示 -- ウィンドウ幅768px以上で適用 */
@media screen and (min-width: 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;
border-right: solid 1px #fff;
/* ↓行番号の色の指定はここ */
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(--code-accent-color);
}
}
フッター
code:style.css
/* 本文の最後にテキスト挿入 */
.app:not(.presentation) .page::after {
content: '文章はここで途切れている';
display: block; margin-top: 5rem; padding: 1rem 0; text-align: center;
border: solid rgba(255, 254, 254, 0.4); border-width: 1px 0;}
color: white;
.app:not(.presentation) .page.not-persistent::after {
content: 'ここには何も書かれていない' }
color: white;
.drag-and-drop-enter {
padding-bottom: 100px;
background-image: url("https://profile-counter.glitch.me/yamato3010-scrapbox/count.svg");
background-position: center bottom 20px;
background-repeat: no-repeat;
background-size: 224px 30px;
}
センタリング用の記法 [' から始めるとセンタリング可能
code:style.css
.line:not(.cursor-line) .deco-\' {
position: absolute;
width: 100%;
text-align: center;
}
スクロールバー
code:style.css
body {
--sb-track-color: #b5b5b5;
--sb-thumb-color: #ffffff;
--sb-size: 14px;
}
body::-webkit-scrollbar {
width: var(--sb-size)
}
body::-webkit-scrollbar-track {
background: var(--sb-track-color);
border-radius: 1px;
}
body::-webkit-scrollbar-thumb {
background: var(--sb-thumb-color);
border-radius: 1px;
border: 1px solid #000000;
}
@supports not selector(::-webkit-scrollbar) {
body {
scrollbar-color: var(--sb-thumb-color)
var(--sb-track-color);
}
}
テンプレートからページ作成
テンプレートはtemplateにあります。
スクリプトはyamato3010に
code:style.css
a#Templates.tool-btn:hover { text-decoration: none }
a#Templates.tool-btn::before { position: absolute; content: '\f067'; font: 900 21px/46px 'Font Awesome 5 Free' }
a#Templates.tool-btn img { opacity: 0 }
箇条書きの記号の変更
code: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:style.css
/* 挿入 */
.deco-\+ { color: blue }
/* 挿入取り消し */
.deco-\+.deco-- { color: lightgrey }
.deco-\+.deco--::before {
content: 'ｲｷ'; display: inline-block;
color: blue; font-size: smaller; text-decoration: none !important; vertical-align: super }
.deco-\# { color: green; font-size: smaller; padding: 0 .2em }
.deco-\" {
border-radius: .2em; padding: 0 .4em; background-color: rgba(128,128,128,0.1);
font-size:95%; font-style: italic }
.deco-\"::before {
color: #a0a0a0; font-size:85%; font-family: 'Font Awesome 5 Free'; font-weight: 900;
content: '\f10d'; vertical-align: super }
ピン止めしたページのアイコン変更
code:style.css
.grid li.page-list-item a .pin {
position: absolute;
height: 14px;
width: 14px;
top: -7px;
right: 0px;
border-radius: 0 0 0 4px;
z-index: 2;
background: none;
}
.grid li.page-list-item a .pin::after {
content: '固';
/*font-weight: bold;*/
font-size: 13px;
color: #FFFFFF;
bottom: 0;
display: inline-block;
position: absolute;
top: 7px;
}
スリムなテロメア
form customize/スリムなテロメア
code:style.css
参考
/Mijinko/settings
/madobes/settings
Scrapboxにテンプレート
/scrasobox/settings