Settings_-20230118

そのうちCSSをがっつり作ってしまいたいけど、多分そこまで暇は取れない。

code:style.css

@import '/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css';

code:style.css

@import '/api/code/Mijinko/のびのびドロップダウン/style.css';

code:style.css

@import '/api/code/Mijinko/インデントに縦線を表示するUserCSS/style.css';

code:style.css

@import "/api/code/Mijinko/リンクにアイコンを付けるCSSを生成するスクリプト/style.css";

code:style.css

@import '/api/code/Mijinko/箇条書きのバレットをFontAwesomeにするUserCSS/style.css';

オリジナルCSS

そのうち色関係をちゃんと設定しておきたい（今の設定はかなり雑なので）

code:style.css

@import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/color.css";

@import "/api/code/Mijinko/見出しのデザインを変えるUserCSS/style.css";

code:style.css

@import "/api/code/Mijinko/プロジェクトタイトルと戻るボタンを上部に固定するUserCSS/only-page.css";

code:style.css

@import "/api/code/Mijinko/Font_Awesomeを常時使えるようにするUserCSS/style.css";

code:style.css

@import "/api/code/Mijinko/Streamボタンを表示するUserCSS/style.css";

code:style.css

@import "/api/code/Mijinko/関連ページ一覧をページの横に表示するUserCSS(最小版)/style.css";

code: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 ラベル（ホバー時） */

}

}

ブラケット記法追加

code:style.css

body {

--spoiler-bg: var(--page-text-color);

}

.deco-\! {

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);

}

.line:not(.cursor-line) :is(.deco-\|, .deco-\| a.page-link):not(:hover) {

color: transparent;

background-color: var(--spoiler-bg);

}

色設定

code:style.css

/* デフォルトカラー (Default Light テーマ用) */

html {

--code-accent-color: var(--accent-color); /* コードブロックの行番号を表示するUserCSS用 */

}

全体的なデザイン調整

code: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%);

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);

}

特定のページのみに適用

code:style.css

/* NieR:Automataのエンディング一覧と和訳 */

font-size: 15px;

font-family: var(--base-fonts);

color: var(--page-text-color);

background-color: transparent;

}

color: var(--page-text-color) !important;

}

外部ソースのCSS

このソース元のCSSは全体的に綺麗なので必見。

ここはダーク系のテーマカラーなので、黒く塗りつぶした。

カーソルを合わせたときにぴょこぴょこする動きは控えめにした。

code:style.css

/* これは上のCSSで指定済み

body {

}

*/

/* ＃で始まるタグをラベル風にする */

display: inline-block;

padding: 2px 8px;

margin: 0 8px 10px 0;

background: var(--page-bg);

font-size: 0.8em;

border: 1px solid var(--accent-color);

border-radius: 3px;

transition: .2s;

-webkit-transform: scale(1);

transform: scale(1);

}

}

-webkit-transform: scale(1.05);

transform: scale(1.05);

}

code: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);}