ユーザーフラッグ記法
公式のuser flagのCSSをいじって実装しました美濃佑輝
偽物のフラグだと思ったら、本物も重なってたw
めっちゃわかるｗ
ほぼ見分けつかないですｗ
これはすごいｗ
見分けつかなくて笑ってしまう
sta
元祖に褒められた！これはうれしい
ん？てことは公式も旗の棒を疑似要素
| で実装していたということ？それとも単に
<div></div> のかわりに | を使っているだけかな公式は疑似要素使ってないっすね
公式の実装はコンテナで棒を書いて中身で旗
装飾記法はそれができないから旗を作ってから棒を付け足している
先駆者に敬意を表して
from Settings
ユーザーフラッグ記法美濃佑輝
Inspired by 2021/11/16#61938d8279d3a900002df7aa
style.css:not(.cursor-line) > .text [class$="deco-\>"] {
/* display: block; */
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
color: #fff;
background-color: green;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;↑
z-index の指定は必要なのでしょうか？消すと何かと被ってしまう？
これはもともと公式のCSSからコピペして作ったのですが、そのときに考慮に入らずに残された部分ですね美濃佑輝
https://scrapbox.io/assets/css/app.cssに軽く検索をかけたところ、z-indexはざっくり10^nぐらいの粗さでまずグループ化され、さらにグループ内で序列をつけるという具合で管理されているようです
具体的にはドラッグ選択の網掛けのCSSが
z-index: 100; となっており、「選択表示よりも前面にくる」ぐらいの認識でよさそうKaTeXの空白を消す記法との衝突を回避するために適用されるクラスの範囲を狭くした
diff- :not(.cursor-line) > .text .deco-\>" {
+ :not(.cursor-line) > .text [class$="deco-\>"] {style.css opacity: .7;
}
:not(.cursor-line) > .text [class$="deco-\>"]::after {
content: "|";
width: 2px;
color: green;
background-color: green;
position: absolute;
top: 7px;
left: 0;
height: 18px;
}KaTeXの空白を消す記法との衝突を回避するために適用されるクラスの範囲を狭くした
diff- :not(.cursor-line) > .text .deco-\>::after {
+ :not(.cursor-line) > .text [class="deco-\>"]::after {緑組
はー－、おもしろいｗ
KaTeXの空白を消す記法との衝突テスト
[>< \footnotesize\overset{\tinyよい}{宵}\overset{\tinyやみ}{闇}]の中、[>< \footnotesize\overset{\tinyち}{魑}\overset{\tinyみ}{魅}\overset{\tinyもう}{魍}\overset{\tinyりょう}{魎}]が[>< \footnotesize\overset{\tinyばっ}{跋}\overset{\tinyこ}{扈}]する
旗じゃないよ