settings
ここのコードは全体に適用されます
気をつけて書いてね
hr.icon
code: style.css
@import url('https://fonts.googleapis.com/css2?family=Mochiy+Pop+One&family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Zen+Old+Mincho:wght@400;500;600;700;900&display=swap');
@import '/api/code/Mijinko/コードブロックの行番号を表示するUserCSS/style.css';
@import '/api/code/Mijinko/ピン留めアイテムとそれ以外を分けるUserCSS/style.css';
/* タグアイコンの共通スタイル (1) */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon) span,
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon) span {
display: inline-block; width: 0; text-indent: -9999px }
/* タグアイコンの共通スタイル (2) */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon)::after,
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon)::after {
display: inline-block; min-width: 1.15em; padding-left: 1px;
font: normal 110%/normal "Font Awesome 5 Free"; text-align: center }
/* ここから各アイコンの設定 */
.line:not(.cursor-line) ahref$='/!'type='link':not(.icon)::after { content: '\f06a'; color: #F6AE2D; font-weight:bold; }
/* ? */
.line:not(.cursor-line) ahref$='/%3F'type='link':not(.icon)::after { content: '\f059'; color: #758E4F; font-weight:bold; }
.line:not(.cursor-line) ahref$='/*'type='link':not(.icon)::after { content: '\f069'; color: #F26419; font-weight:bold; }
.line:not(.cursor-line) ahref$='/_'type='link':not(.icon)::after { content: '\f0c8'; color: #666; font-weight: 400; }
.line:not(.cursor-line) ahref$='/x'type='link':not(.icon)::after { content: '\f14a'; color: #069; font-weight:400; }
.line:not(.cursor-line) ahref$='/o'type='link':not(.icon)::after { content: '\f111'; color: #F26419; font-weight: 400; }
/* > */
.line:not(.cursor-line) ahref$='/%3E'type='link':not(.icon)::after { content: '\f14d'; color: lightgrey; font-weight: 400; }
/* < */
.line:not(.cursor-line) ahref$='/%3C'type='link':not(.icon)::after { content: '\f274'; color: lightgrey; font-weight: 400; }
/* インデントの装飾 */
.line .indent-mark .dot {
}
.line .indent-mark .c-1 + .dot {
background-color: #fc034a;
}
.line .indent-mark .c-2 + .dot {
background-color: #00c96f;
}
.line .indent-mark .c-3 + .dot {
background-color: #fcc603;
}
/* 外部リンクにアイコンを付加する */
.line span:not(.modal-image):not(.pointing-device-map) > a.link:not(.icon)::after {
font-family: 'Font Awesome 5 Free';
content: ' \f35d';
font-weight: 900;
display: inline-block;
}
/* 背景色調整関係 */
.deco-\! {
color: #fff;
background-color: #e66;
}
.deco-\% {
color: #fff;
background-color: #ea2;
}
.deco-\# {
color: #fff;
background-color: #6a6;
}
.deco-\~ {
color: #fff;
background-color: #6ae;
}
/* タグを四角で囲む */
atype="hashTag" {
padding: 2px 4px;
border-radius: 2px;
margin: 0 4px;
border: 1px solid #000000;
}
.line atype="hashTag".empty-page-link {
color: #bf7254;
}
/* hr.icon の誤クリックを防ぐ */
.line a.iconhref$="/hr" {
pointer-events: none;
}
/*ピン留め済みのページを独立させる*/
.page-list-item.pin + .page-list-item:not(.pin) {
grid-column-start: 1;
}
/*吹き出しを作る*/
.deco-\{, .deco-\} {
font-size: 1em;
color: #fff;
background-color: #b2bcba;
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: #b2bcba transparent;
}
/*吹き出し内のリンクカラーを調整*/
.deco-\{ a,
.deco-\} a {
color: #66F;
}