大スリップ記法
UserCSS.icon
Letter: #*
cf. char-index型マーカー記法
#試作品
filter: invert()\invert Inverthttps://img.icons8.com/ios-glyphs/90/christmas-angel.png
white\white White
black\black Black
yellow\yellow Yellow
red\red Red
purple\purple Purple
indigo\indigo Indigo
:has()
background-color:
box-shadow:
code:style.css
:where(main) .line:not(.cursor-line) spanclass="deco-\# deco-\*" {
display: inline-block !important;
width: 100%;
box-shadow: var(--onpage-box-shadow);
&:has(img:not(.icon)) {
text-align: center !important; vertical-align: middle !important;
}
& img:not(.icon) {
max-width: 100% !important; max-height: 100% !important; filter: none !important;
}
/* \invert */
&:has(span:nth-child(1)data-char="\\"
+ data-char="i" + data-char="n" + data-char="v" + data-char="e" + data-char="r" + data-char="t"
+ data-char=" ") {
& .char-indec {
background-color: var(--page-text-color); color: var(--page-bg);
}
& img { filter: invert(1) !important; }
& :nth-child(-n + 8 of .char-index) { display: none; }
}
/* \black */
&:has(span:nth-child(1)data-char="\\"
+ data-char="b" + data-char="l" + data-char="a" + data-char="c" + data-char="k"
+ data-char=" ") {
background-color: black; color: hsl(223 15% 80%);
& :nth-child(-n + 7 of .char-index) { display: none; }
}
/* \white */
&:has(span:nth-child(1)data-char="\\"
+ data-char="w" + data-char="h" + data-char="i" + data-char="t" + data-char="e"
+ data-char=" ") {
background-color: white; color: #333;
& :nth-child(-n + 7 of .char-index) { display: none; }
}
/* \red */
&:has(span:nth-child(1)data-char="\\"
+ data-char="r" + data-char="e" + data-char="d"
+ data-char=" ") {
background-color: crimson; color: white;
& :nth-child(-n + 5 of .char-index) { display: none; }
}
/* \yellow */
&:has(span:nth-child(1)data-char="\\"
+ data-char="y" + data-char="e" + data-char="l" + data-char="l" + data-char="o" + data-char="w"
+ data-char=" ") {
background-color: var(--c-yellow-4, gold); color: black;
& :nth-child(-n + 8 of .char-index) { display: none; }
}
/* \purple */
&:has(span:nth-child(1)data-char="\\"
+ data-char="p" + data-char="u" + data-char="r" + data-char="p" + data-char="l" + data-char="e"
+ data-char=" ") {
background-color: #7c007c; color: white;
& :nth-child(-n + 8 of .char-index) { display: none; }
}
/* \purple */
&:has(span:nth-child(1)data-char="\\"
+ data-char="i" + data-char="n" + data-char="d" + data-char="i" + data-char="g" + data-char="o"
+ data-char=" ") {
background-color: indigo; color: white;
& :nth-child(-n + 8 of .char-index) { display: none; }
}
}
#記法
#UserCSS