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