Settings_-20230118
そのうちCSSをがっつり作ってしまいたいけど、多分そこまで暇は取れない。
style.css@import '/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css';
style.css@import '/api/code/Mijinko/のびのびドロップダウン/style.css';
style.css@import '/api/code/Mijinko/インデントに縦線を表示するUserCSS/style.css';
style.css@import "/api/code/Mijinko/リンクにアイコンを付けるCSSを生成するスクリプト/style.css";
style.css@import '/api/code/Mijinko/箇条書きのバレットをFontAwesomeにするUserCSS/style.css';
オリジナルCSS
雑多に書いた自作CSS。名前はない。
そのうち色関係をちゃんと設定しておきたい（今の設定はかなり雑なので）
style.css@import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/color.css";
@import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/style.css";
style.css@import "/api/code/Mijinko/プロジェクトタイトルと戻るボタンを上部に固定するUserCSS/only-page.css";
style.css@import "/api/code/Mijinko/Font_Awesomeを常時使えるようにするUserCSS/style.css";
style.css@import "/api/code/Mijinko/Streamボタンを表示するUserCSS/style.css";
style.css@import "/api/code/Mijinko/関連ページ一覧をページの横に表示するUserCSS(最小版)/style.css";
style.css@media (min-width: 768px) {
.related-page-list div.links-2-hop ul.grid li.relation-label a {
/* 関連リンク 2 hops link ラベル */
background-color: var(--relation-label-bg);
}
.related-page-list div.links-2-hop ul.grid:hover li.relation-label a {
/* 関連リンク 2 hops link ラベル（ホバー時） */
background-color: #4D5263;
color: #eee;
}
}
ブラケット記法追加
style.css/* [! 警告表記を使えるようにする] */
body {
--warning-text-color: #fff;
--warning-bg: #e33;
--warning-bg-border: #ee6000;
--spoiler-bg: var(--page-text-color);
}
.deco-\! {
--page-link-color: #80c9fe;
--empty-page-link-color: #000; /*#ffb7b8;*/
color: var(--warning-text-color);
background-color: var(--warning-bg);
font-weight: bold;
padding: 1px 2px;
/* border: 1.1px solid var(--warning-bg-border); */
border-radius: 1px;
background: repeating-linear-gradient(-45deg, var(--warning-bg), var(--warning-bg) 17px, var(--warning-bg-border) 3px, var(--warning-bg-border) 20px);
}
/* [| <text>]でスポイラー */
.line:not(.cursor-line) :is(.deco-\|, .deco-\| a.page-link):not(:hover) {
color: transparent;
background-color: var(--spoiler-bg);
}
色設定
style.css/* デフォルトカラー (Default Light テーマ用) */
html {
--line-title-color: #000;
--accent-color: #3d95c9;
--code-accent-color: var(--accent-color); /* コードブロックの行番号を表示するUserCSS用 */
}
全体的なデザイン調整
style.css/* ピン留めアイテムとそれ以外を分ける */
.page-list .grid-style-item.pin + .grid-style-item:not(.pin):not(#foo) {
clear: left;
}
/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */
/*li.grid-style-item,
div.related-page-list ul.grid li.relation-label {
width: 154px;
height: 169px;
margin: 0 16.8px 16.8px 0;
}*/
/* ページタイトルのスタイル */
div.line-title .text {
font-size: 28px;
border-bottom: 2px solid var(--line-title-color);
padding-left: 0.25em;
padding-bottom: 9px !important;
margin-bottom: 21px;
}
/* アイコン画像が上寄りになるのを修正する */
.line img.icon {
vertical-align: middle;
}
/* コードブロックのタイトル行のスタイル */
.line span.code-block .code-block-start {
display: inline-block;
font-size: 14px;
margin-left: 0.5px;
padding: 2px 4px;
color: var(--page-text-color);
background-color: var(--accent-color);
filter: brightness(90%);
--code-start-border: solid 1px #7f7f7f;
border-right: var(--code-start-border);
border-bottom: var(--code-start-border);
}
.line span.code-block .code-block-start a {
color: var(--page-text-color);
}
特定のページのみに適用
style.css#L62eadeb2845465001f1df494 ~ .line code.code {
/* NieR:Automataのエンディング一覧と和訳 */
font-size: 15px;
font-family: var(--base-fonts);
color: var(--page-text-color);
background-color: transparent;
}
#L62eadeb2845465001f1df494 ~ .line code.code [class^="hljs-"] {
color: var(--page-text-color) !important;
}
外部ソースのCSS
このソース元のCSSは全体的に綺麗なので必見。
いつも通り勝手に改造しました。
ここはダーク系のテーマカラーなので、黒く塗りつぶした。
カーソルを合わせたときにぴょこぴょこする動きは控えめにした。
style.css/* これは上のCSSで指定済み
body {
--accent-color: #3d95c9;
}
*/
/* ＃で始まるタグをラベル風にする */
a[type="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 var(--accent-color);
border-radius: 3px;
transition: .2s;
-webkit-transform: scale(1);
transform: scale(1);
}
a.empty-page-link[type="hashTag"]{
color: #fb7476 !important;
border-color: #fb7476;
}
a[type="hashTag"]:hover{
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
style.css.grid li.page-list-item a .pin { background-color: transparent; background-image: none }
.grid li.page-list-item a .pin::after {
content: '\f08d'; font-family: 'Font Awesome 5 Free'; font-weight: 900;
font-size: 20px; color: var(--card-title-color); bottom: 0; display: inline-block; transform: rotate(35deg);}