ユーザーフラッグ記法
yuki_minoh.icon
公式のuser flagのCSSをいじって実装しました美濃佑輝
偽物のフラグだと思ったら、本物も重なってたwtakker.icon
めっちゃわかるw
ほぼ見分けつかないですw
これはすごいwsta.iconyosider.icon
見分けつかなくて笑ってしまう
sta
元祖に褒められた!これはうれしいyuki_minoh.icon
ん?てことは公式も旗の棒を疑似要素|で実装していたということ?takker.icon
それとも単に<div></div>のかわりに|を使っているだけかな
公式は疑似要素使ってないっすねyuki_minoh.icon
公式の実装はコンテナで棒を書いて中身で旗
装飾記法はそれができないから旗を作ってから棒を付け足している
先駆者に敬意を表してyuki_minoh.icon
2021/11/16#61938d8279d3a900002df7aa (sta.icon)
from Settings
yuki_minoh.icon
ユーザーフラッグ記法美濃佑輝
Inspired by 2021/11/16#61938d8279d3a900002df7aa sta.icon
code:style.css
:not(.cursor-line) > .text .deco-\>class$="deco-\>" {
/* display: block; */
margin-top: -2px;
width: 50px;
height: 14px;
font-size: 10px;
line-height: 14px;
padding: 0 2px;
color: var(--user-flag-name-color, #fff);
& a:is(.page-link, .page-link.empty-page-link) {
color: var(--user-flag-name-color, #fff);
&:hover { color: var(--page-link-color, skyblue); }
}
background-color: var(--user-flag-bg, green);
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: clip;
position: absolute;
z-index: 101;
↑z-indexの指定は必要なのでしょうか?takker.icon
消すと何かと被ってしまう?
これはもともと公式のCSSからコピペして作ったのですが、そのときに考慮に入らずに残された部分ですね美濃佑輝
に軽く検索をかけたところ、z-indexはざっくり$ 10^nぐらいの粗さでまずグループ化され、さらにグループ内で序列をつけるという具合で管理されているようです
具体的にはドラッグ選択の網掛けのCSSがz-index: 100;となっており、「選択表示よりも前面にくる」ぐらいの認識でよさそう
KaTeXの空白を消す記法との衝突を回避するために適用されるクラスの範囲を狭くしたSummer498.icon
code:diff
- :not(.cursor-line) > .text .deco-\>" {
+ :not(.cursor-line) > .text class$="deco-\>" {
code:style.css
opacity: .7;
}
:not(.cursor-line) > .text .deco-\>class$="deco-\>"::after {
content: "|";
width: 2px;
color: var(--user-flag-bg, green);
background-color: var(--user-flag-bg, green);
position: absolute;
top: 7px;
left: 0;
height: 18px;
}
KaTeXの空白を消す記法との衝突を回避するために適用されるクラスの範囲を狭くしたSummer498.icon
code:diff
- :not(.cursor-line) > .text .deco-\>::after {
+ :not(.cursor-line) > .text class="deco-\>"::after {
2026-06-28 クラスセレクターを追加(互換性・挙動の変更なし)Nrem.icon
属性参照セレクターのみの暗黙的*にはパフォーマンスの問題があるため
2026-03-13 名前欄の文字色を内部リンク記法にも適用されるように変更
「自分のページ」等にリンクさせることができる
この部分の配色は明るい色のほうが望ましいため、:hover時の配色に(-hover-colorではない)通常リンク色の変数を指定した
test who
code:diff
color: var(--user-flag-name-color, #fff);
+ & a:is(.page-link, .page-link.empty-page-link) {
+ color: var(--user-flag-name-color, #fff);
+ &:hover { color: var(--page-link-color, #fff); }
+ }
background-color: var(--user-flag-bg, green);
2026-03-03 配色指定に変数を導入したwho.icon
変数未定義の場合には従来通りのカラーリングになる
var(--user-flag-name-color, #fff)
var(--user-flag-bg, green)
https://gyazo.com/99f711f1e92d8a19f8a66bb6087a4da4
緑組
はー-、おもしろいw
KaTeXの空白を消す記法との衝突テストSummer498.icon
$ \footnotesize\overset{\tinyよい}{宵}\overset{\tinyやみ}{闇}の中、$ \footnotesize\overset{\tinyち}{魑}\overset{\tinyみ}{魅}\overset{\tinyもう}{魍}\overset{\tinyりょう}{魎}が$ \footnotesize\overset{\tinyばっ}{跋}\overset{\tinyこ}{扈}する
旗じゃないよ
Settings.icon
UserCSS.icon