ScrapboxのUserCSSで、半透明ページのコードブロックのインデント部に背景色がつかないように調整する。
がんばりました........(4時間)appbird.icon
記入途中入力し終わりました。
感想としては、かなりめちゃくちゃしたのでいつこの仕組みが壊れるかわかんなくてコワい
1. .code-block要素でコードブロック色に背景を染める
2. .code-block-margin要素をさらに上に載せる
3. コードブロックのインデントを白く見せる。
2.におけるcode-block-margin要素がこれ
https://gyazo.com/eb0e7ac9ec7f412e9f2668b41b3019f4
この方法でコードブロックをCSSで着彩すると
同じ方法を使うと、その.code-block.margin部分だけ色が重なってしまう
---> その部分だけ不透明度が変わって見えてしまう。 なんか不自然....。
https://gyazo.com/1a5bc013a9c2eb417955d012a238eaf2
これわかるか....？
ちょっと赤枠で囲った部分が不透明じゃなくなっている
code:同じ方法を使った場合.css
.line span.code-block{
}
.line span.code-block .code-block-margin{
background-color: rgba(40, 44, 52,0.92); /* ページ色 */
}
classの説明
.code-block: コードブロックに渡る行全体を表す要素; 今回着彩すべきコードブロック領域とは必ずしも一致しない。 インデントがついたコードブロックであるときには特にそうなる。
.indent: 文字が記述できる、字下げされた本文を含む要素 .pad: インデントを作る空白に使う。(縦幅は行の幅と一致しない
code-block-margin: 同じくインデントを作る空白に使われているクラス
ただし、コードブロック領域でない部分のインデントに付与されている
ここに色は着彩されない
遠回りに、かつ愚直に。
というわけで、重ねて塗るのではなく、元から忠実にコードブロック領域を塗りつぶす方法を取る。
(1) 元のapp.cssで.code-blockに対して設定されているbackground-colorの宣言を引き剥がす。
(2) 実際に入力できる部分(.indent)だけ着彩する。
これだけだと足りない。
下を見てみればわかる通り、この要素で塗れる範囲は青の部分だけ。
橙の部分はmarginを表すので、要素が及ぶ範囲ではない。
https://gyazo.com/1acb3777cc7f9aeb791dfff77bb2b1cd
ここから、この塗り足りていない範囲を塗るために奮闘する。
あと塗る範囲は、行頭のインデント部のうち最後の要素だけである。
それは.line span.code-block .pad:not(.code-block-margin)と表せる。
コードブロック着彩域に含まれていないインデント要素(span.pad)だけに.code-block-marginが指定されている。
前述した.line span.code-block .pad:not(.code-block-margin)にコードブロック色を塗る。
このままでは、塗りに穴が空いてしまうことがわかる
そこで……。
(4) その塗った要素を、その行の高さにまで広げる .padの祖先要素であって、行と同じ長さを持つcode-block要素から、.pad要素まで行の高さを伝播させればいいことがわかる
実際には祖先要素だけを行のheightに揃えればよかった。 なぜ親要素でなくても良いのかは謎
というわけで、その祖先要素である.line span.code-block .pad:not(.code-block-margin)をheight:100%にして行の高さへ揃える。
最後に、.pad本体もその高さに揃えるべく、height:100%に。
(5) 元のapp.cssで.line span.code-block .code-block-marginに対して設定されているbackground-colorの宣言を引き剥がす。
code:改良版.css
/* コードブロック全体の背景色設定 */
/* 1.元のapp.cssによる背景色を無効化してしまう。 */
.line span.code-block{
background-color: unset;
}
/* 2.実際に入力できる部分に背景色を追記する。(これだけではまだ足りない)*/
.line span.code-block span.indent{
}
/* 3. 4. コードブロック部に属する一番最後のインデントにだけ着彩する。祖父母要素の高さがcode-block長ぴったりなので、これも親要素と同じ高さに揃えればいい。(height:100%)*/
.line span.code-block .pad:not(.code-block-margin){
height: 100%;
}
/* 4.コードブロック部に属する一番最後のインデントの要素Iを適切に着彩するべく、code-block要素の子でありIの親であるindent-mark要素に注目し、それをcode-blockと同じ高さに引き延ばす。 */
.line span.code-block .indent-mark{
height: 100%;
}
/* 5.最後に、code-block-marginにあるbackground-colorの設定を引き剥がしておく。*/
.line span.code-block .code-block-margin{
background-color: unset;
}