Settings
要は、このプロジェクトのデザインの設定をするためのページ
大抵の人にとっては関係のないページです
/icons/hr.icon
code:style.css
@import "../見出しのデザインを変えるUserCSS/style.css";
code:_style.css
@import "/api/code/Mijinko/プロジェクトタイトルと戻るボタンを上部に固定するUserCSS/only-page.css";
code:style.css
@import '/api/code/Mijinko/特定のリンクにアイコンをつけるUserCSS/style.css';
code:style.css
@import '/api/code/Mijinko-other/関連ページリストをページの横に表示するUserCSS_ver.2/style.css';
code:_style.css
@import "/api/code/Mijinko/関連ページ一覧をページの横に表示するUserCSS(最小版)/style.css";
（CSSのみ）
code:style.css
@import '/api/code/Mijinko/ScrapCalc/inline-code-like.css';
応急処置
code:style.css
html body {
--page-bg: var(--body-bg);
}
その他
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 ラベル（ホバー時） */
}
}
デフォルトのfont-familyに"Font Awesome 5 Free","Font Awesome 5 Brands"を追加しただけ。
code:style.css
/* Font Awesomeを常時使えるようにするCSS */
div.editor,
.grid li {
font-family: "Roboto",Helvetica,Arial,"Hiragino Sans","Font Awesome 5 Free","Font Awesome 5 Brands","AppIcons",sans-serif;
}
ブラケット記法追加
code:style.css
/* 警告表記を使えるようにする */
body {
--warning-text-color: #fff; --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);
}
/* <text>でスポイラー */
.line:not(.cursor-line) :is(.deco-\|, .deco-\| a.page-link):not(:hover) {
color: transparent;
background-color: var(--spoiler-bg);
}
全体的なデザイン調整
code:style.css
/* 色設定 */
body {
--new-button-bg: var(--accent-color);
--new-button-hover-bg: var(--accent-color-gray);
/*--relation-label-links-bg: rgba(191, 191, 191, 1);*/
/*--relation-label-empty-bg: rgba(183, 183, 183, 1);*/
--card-bg: rgba(61, 61, 61, 1);
--page-bg: rgba(61, 61, 61, 1);
/*--body-bg: rgba(36, 36, 36, 1);/**/
--body-bg: hsl(0deg 0% 18%);/**/
--telomere-border: rgba(91, 91, 91, 1);
--card-title-bg: rgba(49, 49, 49, 1);
--card-title-bg-pinned: rgba(49, 49, 49, 1);
--tool-light-color: rgba(100,100,100,1);
}
/* デフォルトカラー (Default Light テーマ用) */
html {
--line-title-color: #000; }
/* ピン留めアイテムとそれ以外を分ける */
.grid-style-item.pin + .grid-style-item:not(.pin) {
clear: left;
}
/* カード一覧の画面でウィンドウサイズを変更した時の動きを減らす */
/*li.grid-style-item,
.related-page-list:is(div, section) 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;
}
/* ページタイトルのテロメアの調整 */
div.line.line-title .telomere .telomere-border {
padding-bottom: var(--line-title-border-width);
}
/* アイコン画像が上寄りになるのを修正する */
.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);
}
Streamボタンを表示する
UserCSSをいじる際にStreamでの表示を想定していないことが多いので非表示にした
今まで通り、メニュー経由であれば閲覧可能
code:_style.css
/* Streamボタンを表示する */
nav.navbar ul.navbar-menu>li.stream-btn {
display: block;
}
非表示
code:style.css
.line#L62a861987838e3000072183a ~ .line span.code-block,
display: none;
}
.page-list-item:is(
) {
display: none;
}
.stream .page:is(
) {
display: none;
}
外部ソースの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);
}
border-color: var(--accent-color);
}
-webkit-transform: scale(1.05);
transform: scale(1.05);
}
外部リンクを区別するUserCSS
ソースから色やサイズの項目を追加している。
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;
padding-right: 2px;
}
コードの行番号を表示する
スタイルを変えたくてソースからあちこちいじってる。
行番号をコードブロックの中に入れるために、セレクタの指定周りを変更している。
色とかも変えてる。
code:style.css
/* コード記法の行番号を表示 -- ウィンドウ幅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-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(--accent-color);
}
}
箇条書きのバレットをFontAwesomeにするUserCSS
番号付きの箇条書きのみ改変するようにしてある。
code:style.css
.line.number-list .dot {
display: list-item; /* 表示する */
background-color: transparent;
}
.line.number-list .dot::before {
display: block;
position: absolute;
font-family: 'Font Awesome 5 Free';
font-weight: 900;
top: -11px;
content: '\f292';
font-size: 4px;
color: var(--page-text-color);
}
インデントに縦線を表示するようにした
色に関する記述は省略している。
code:style.css
.indent-mark {
height: 100% !important;
}
.indent-mark .pad {
height: 100% !important;
overflow: unset !important;
}
.indent-mark span:not(:nth-last-child(1)):not(:nth-last-child(2)) .pad {
border-right: 2px solid rgb(255,255,255,0.2); /* 色の指定 */
}
のびのびドロップダウン
code:style.css
.navbar-form .dropdown.open ul.dropdown-menu {
min-width: 100%;
max-height: calc(100vh - 130px) !important;
overflow-y: auto;
}