インデントが深くなったときにクオリアさんが警告するCSS
ただの思いつきだけど、実現できるだろうか？
いきなり右下にキャラ表示して喋らせる風にするとか？
これより過激な感じですかね？
yes
たとえばレベル6以上が出た途端「おおおおおおい！」とか表示するイメージです
Just Monikaが参考になりそう
レベル6以上のときに画像を表示させる
style指定で判定しているので若干不安定
span.indent[style="margin-left: 9em;"]::after で指定していたレベル6以上はまだ手つけてない
列挙すれば可能
レベルごとに表情変えると面白そう
〜以上みたいな指定できるんだっけ？
.indent-mark:has(.c-6) でそれ以上にも反応するハズなるほど
.indent-mark のほうは空白分c-nを持ってるんですね画像にクオリアさんがブチギレたやつを使った
いいねw
文字もつけたいな…
NHK風()
怒られてる行ももっと赤くするとかしても良いかも
何で怒られてるかわからない
ほんわかレス推奨です！みたいなイメージで吹き出しをつける？
こういうの使ってた
tmp.css .indent-mark span:nth-child(8n) .pad {
background: #f8e8e8; !important
}style.css@media only screen and (min-width: 768px) {
.indent-mark:has(.c-6)::after {
content: "";
background-image: url('https://i.gyazo.com/fc012ac8801e846c3485d9b7f621f28b.png');
background-size: 200px 200px;
display: block;
width: 200px;
height: 200px;
position: fixed;
right: -25px;
bottom: -25px;
z-index: 10;
}
.indent-mark:has(.c-6)::before {
content: "";
background-image: url('https://i.gyazo.com/ca25abc101c1635ee89a5b4e70886d94.png');
background-size: 256px 71px;
display: block;
width: 256px;
height: 71px;
position: fixed;
right: 0px;
bottom: 150px;
z-index: 10;
transform: rotate(-5deg);
}
}test
テスト
ウケる
スマホユーザに強烈に圧を掛けてくるけど、圧をかけるべきはPCユーザですよ！ww
max-width: 10vwとかする？
あーなるほど、メディアクエリーでスマホを除外するのか
768px以上のときにして、吹き出しも出した
縦長スマホだと占有領域が大きすぎて死ぬ
スマホが見ずらくなることも踏まえて出してるのにスマホが一番見づらくなるの笑う
注意報からどんどんでかくなっていくと面白いかも
最初は小さく…
井戸端ユーザーでない人からはどう見えるのだろう
謎の注意報を出すキャラクターを横目にプロジェクトをうろつくのだろうか
編集権限がないので修正できない
遠回しに井戸端ジョインを促している……？
カーソルを置いてるときだけ表示させる？
$ .lines:has(.cursor-line) .indent-mark:has(.c-6)::afterカーソルを置くこと自体は編集権限を持っていない人でもできてしまうので、余計に混乱を招くかも
そもそも若干邪魔くさいので、必要だと思う各個人で有効化するのでもいいのではと感じています
+1
必要性を感じて作ったわけでなく、遊んでいるだけなので消しちゃっていいと思うｗ
マイルドにした
注意報が出てもどの行に問題があるのかがわかりにくいので、やっぱりインデントが深すぎると色が変わる箇条書きのバレットも一緒に欲しいかも
テロメアを赤くするとかでも良さそう
:has()が必須なのが辛いけれど
+1
書いた瞬間ににゅっと出てくると今変えたところだってわかるけど、他の人が書いたページを開いて出てきてもどうするか困る
カーソルとテロメアの状態で判定できる？
これだ！
昔のページで出てるとわからんですね
Just Do itおじさんが出てくるのもよい
style.css@media only screen and (min-width: 768px) {
/* 該当部に警告ライン */
.lines:has(.telomere-border.updated-after-load) .line:has(.indent-mark .c-6)::before{
content:"";
position: absolute;
top: 0;
width: 100vw;
height: 100%;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
background-color: #eb9a9a;
opacity: 1;
z-index: -1;
}
.lines:has(.telomere-border.updated-after-load) .line:has(.indent-mark .c-6)::after{
content:"";
position: absolute;
top: 0;
width: 100vw;
height: 100%;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
background-color: #eb9a9a;
opacity: 0.1;
pointer-events: none;
}
}多人数が編集されてる場面に出くわすとやかましすぎたのでクオリアさんが動く部分を停止
quoria-san /* c-6以上で出てくるクオリアさん */
.lines:has(.telomere-border.updated-after-load) .indent-mark:has(.c-6)::after {
content: "";
background-image: url('https://i.gyazo.com/fc012ac8801e846c3485d9b7f621f28b.png');
background-size: 200px 200px;
display: block;
width: 200px;
height: 200px;
position: fixed;
bottom: -25px;
right: -200px;
z-index: 10;
animation: quoria-san-attention 10s cubic-bezier(0.33, 1, 0.68, 1);
}
@keyframes quoria-san-attention{
0%{right:-200px;}
8%{right:-25px ;}
92%{right:-25px ;}
100%{right:-200px ;}
}
/* c-6で注意報 c-7で警報 c-8で特別警報 */
.lines:has(.telomere-border.updated-after-load) .indent-mark::before {
content: "";
background-size: 256px 71px;
display: block;
width: 256px;
height: 71px;
position: fixed;
bottom: 0;
z-index: 10;
right: -220px;
transform: rotate(15deg) translateY(-150px);
}
.lines:has(.telomere-border.updated-after-load) .indent-mark:has(.c-6)::before {
background-image: url('https://i.gyazo.com/ca25abc101c1635ee89a5b4e70886d94.png');
animation: text-attention 10s cubic-bezier(0.33, 1, 0.68, 1);
}
.lines:has(.telomere-border.updated-after-load) .indent-mark:has(.c-7)::before {
background-image: url('https://i.gyazo.com/be013ec64aa2fa1f2d07bceeaba71af2.png');
animation: text-attention 10s cubic-bezier(0.33, 1, 0.68, 1);
}
.lines:has(.telomere-border.updated-after-load) .indent-mark:has(.c-8)::before {
background-image: url('https://i.gyazo.com/c32bda10dbaba67a7ffe2e7be6060c34.png');
animation: text-attention 10s cubic-bezier(0.33, 1, 0.68, 1);
}
@keyframes text-attention{
0%{right: -220px; transform: rotate(15deg) translateY(-150px);}
8%{right: 0px; transform: rotate(-5deg) translateY(-150px);}
92%{right: 0px; transform: rotate(-5deg) translateY(-150px);}
100%{right: -220px; transform: rotate(15deg) translateY(-150px);}
}