Project間リンクの表示を簡略化するUserCSS (Nrem)
UserCSS.icon
Project間リンクの表示を簡略化する
Nrem.iconNrem
テスト
link:primary /nrem/Aaaa
link:nrem-configs /nrem-configs/Aaaa
link:nrem-bookmarks /nrem-bookmarks/Aaaa
link:nrem-eo /nrem-eo/Aaaa
link:surluna /surluna/Aaaa
link:jibeta /jibeta/Aaaa
code:style.css
@import url("./card.css");
--indent-width
code:style.css
body {
--project-link-ellipsis-height: var(--inline-icon-height, var(--indent-width, 1.5em));
--project-link-ellipsis-width: var(--inline-icon-height, var(--indent-width, 1.5em));
--project-link-ellipsis-border-radius: 99px;
--project-link-ellipsis-bg: hsl(from var(--quote-bg-color) h s l);
--project-link-ellipsis-icon-filter: none;
--project-link-ellipsis-icon-hover-filter: brightness(0.5737);
--project-link-card-icon-filter: none;
@media (prefers-color-scheme: dark) {
--project-link-ellipsis-icon-filter: brightness(1.84);
--project-link-ellipsis-icon-hover-filter: none;
--project-link-card-icon-filter: invert(100%) opacity(80%);
}
}
:where(.page) .line:not(.cursor-line) a.page-link:not(rel="route") { /* 外部プロジェクトのページへのリンク */
/nremlink:primary
code:style.css
/* /nrem */
&href^="/nrem/" {
& > span.char-index:nth-of-type(-n + 6) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:primary/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
filter: var(--project-link-ellipsis-icon-filter);
content: ""; display: inline-block;
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
code:card.css
.related-page-list .grid li.page-list-itemdata-project-name="nrem" > ahref^="/nrem/"rel="noopener noreferrer" {
--card-border: solid 2px oklch(50% 100% 7):
/* & > .content > .header > div.title::before { */
& > .content::before {
content: ""; display: inline-block;
background-image: url("/api/pages/nrem-configs/primary/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
position: absolute;
width: 100%; height: 100%;
left: 100%;
filter: var(--project-link-card-icon-filter);
}
}
/nrem-bookmarkslink:nrem-bookmarks
code:style.css
/* /nrem-bookmarks */
&href^="/nrem-bookmarks/" {
& > span.char-index:nth-of-type(-n + 16) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:nrem-bookmarks/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
content: ""; display: inline-block;
filter: var(--project-link-ellipsis-icon-filter);
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
/nrem-eolink:nrem-eo
code:style.css
/* /nrem-eo */
&href^="/nrem-eo/" {
& > span.char-index:nth-of-type(-n + 9) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:nrem-eo/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
content: ""; display: inline-block;
filter: none;
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
/nrem-configslink:nrem-configs
code:style.css
/* /nrem-configs */
&href^="/nrem-configs/" {
& > span.char-index:nth-of-type(-n + 14) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:nrem-configs/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
content: ""; display: inline-block;
filter: var(--project-link-ellipsis-icon-filter);
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
/surlunalink:surluna
code:style.css
/* /surluna */
&href^="/surluna/" {
& > span.char-index:nth-of-type(-n + 9) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:surluna/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
content: ""; display: inline-block;
filter: none;
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
/jibetalink:jibeta
code:style.css
/* /jibeta */
&href^="/jibeta/" {
& > span.char-index:nth-of-type(-n + 8) { display: none; }
&::before {
background-image: url("/api/pages/nrem-configs/link:jibeta/icon");
background-repeat: no-repeat; background-position: center; background-size: contain;
background-color: var(--project-link-ellipsis-bg);
content: ""; display: inline-block;
filter: none;
width: var(--project-link-ellipsis-width, 1em); height: var(--project-link-ellipsis-height, 1em);
vertical-align: sub;
border-radius: var(--project-link-ellipsis-border-radius);
}
&:hover::before { filter: var(--project-link-ellipsis-icon-hover-filter, var(--project-link-ellipsis-icon-filter)); }
}
}
#Cosense_project
#UserCSS