インデントが深くなったときにクオリアさんが警告するCSS
ただの思いつきだけど、実現できるだろうか？
いきなり右下にキャラ表示して喋らせる風にするとか？
これより過激な感じですかね？
インデントが深すぎると色が変わる箇条書きのバレット
yes
たとえばレベル6以上が出た途端「おおおおおおい！」とか表示するイメージです
Just Monikaが参考になりそう
レベル6以上のときに画像を表示させるmtane0412.icon
style指定で判定しているので若干不安定
span.indent[style="margin-left: 9em;"]::afterで指定していた
レベル6以上はまだ手つけてない
列挙すれば可能
レベルごとに表情変えると面白そう
クオリアさん.icon頼んだ
〜以上みたいな指定できるんだっけ？
.indent-mark:has(.c-6)でそれ以上にも反応するハズnomadoor.icon
なるほど.indent-markのほうは空白分c-nを持ってるんですねmtane0412.icon
画像にクオリアさんがブチギレたやつを使った
https://gyazo.com/fc012ac8801e846c3485d9b7f621f28b
いいねwnishio.icon
文字もつけたいな…
NHK風()nomadoor.icon
https://gyazo.com/ca25abc101c1635ee89a5b4e70886d94
#インデント注意報
https://gyazo.com/be013ec64aa2fa1f2d07bceeaba71af2
https://gyazo.com/c32bda10dbaba67a7ffe2e7be6060c34
怒られてる行ももっと赤くするとかしても良いかもinajob.icon
何で怒られてるかわからない
ほんわかレス推奨です！みたいなイメージで吹き出しをつける？hatori.icon
こういうの使ってたnishio.icon
code:tmp.css
.indent-mark span:nth-child(8n) .pad {
background: #f8e8e8; !important
}
code: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
テスト
https://gyazo.com/578b63d5573eff1145b70d8bebe9fd5e
ウケるnishio.icon
スマホユーザに強烈に圧を掛けてくるけど、圧をかけるべきはPCユーザですよ！ww
max-width: 10vwとかする？
あーなるほど、メディアクエリーでスマホを除外するのか
768px以上のときにして、吹き出しも出したmtane0412.icon
https://gyazo.com/10fb5b9d8eedd656820568b99c455ff9
縦長スマホだと占有領域が大きすぎて死ぬtakker.icon
しょうがないね
https://gyazo.com/877c5c980ca2a6d35ace5a3a93b552cc
スマホが見ずらくなることも踏まえて出してるのにスマホが一番見づらくなるの笑うmtane0412.icon
cf. インデントを深くしすぎるとスマホでの表示が死ぬ
注意報からどんどんでかくなっていくと面白いかもmtane0412.icon
最初は小さく…
井戸端ユーザーでない人からはどう見えるのだろうcFQ2f7LRuLYP.icon
謎の注意報を出すキャラクターを横目にプロジェクトをうろつくのだろうか
編集権限がないので修正できない
遠回しに井戸端ジョインを促している……？
カーソルを置いてるときだけ表示させる？nomadoor.icon
$ .lines:has(.cursor-line) .indent-mark:has(.c-6)::after
カーソルを置くこと自体は編集権限を持っていない人でもできてしまうので、余計に混乱を招くかもMijinko_SD.icon
そもそも若干邪魔くさいので、必要だと思う各個人で有効化するのでもいいのではと感じていますMijinko_SD.icon
+1blu3mo.icon
必要性を感じて作ったわけでなく、遊んでいるだけなので消しちゃっていいと思うｗmtane0412.icon
インデントが深くなったときにそっと警告するCSSの機運nishio.icon
マイルドにしたmtane0412.icon
注意報が出てもどの行に問題があるのかがわかりにくいので、やっぱりインデントが深すぎると色が変わる箇条書きのバレットも一緒に欲しいかもMijinko_SD.icon
テロメアを赤くするとかでも良さそう
:has()が必須なのが辛いけれど
+1inajob.icon
書いた瞬間ににゅっと出てくると今変えたところだってわかるけど、他の人が書いたページを開いて出てきてもどうするか困るnishio.icon
カーソルとテロメアの状態で判定できる？mtane0412.icon
これだ！nomadoor.icon
昔のページで出てるとわからんですねinajob.icon
Just Do itおじさんが出てくるのもよい
code: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;
}
}
多人数が編集されてる場面に出くわすとやかましすぎたのでクオリアさんが動く部分を停止nomadoor.icon
code: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);}
}
Settings.icon
UserCSS.icon