貯蔵庫のCSS案

[kujirahand]

#1786 で、貯蔵庫のCSSを直そうとIssuesが上がっているのですが、
CSSに詳しくなく、どうしたら良いのか分からず、そのままになっています。
ただ、すぐ着手できなかったのは、これまでの作品が壊れてしまうのが問題と思っていたからです。

そこで、なでしこ3側で作成するテーブルに、新たにclassを割り振って、それに対応するCSSを
新規追加するのではないかと考えていますが、どうなんでしょうか。

あるいは、貯蔵庫側で、基本となるCSSファイルを差し替えることができる設定を追加しても良いのかもしれません。
この問題、できるだけ、シンプルに解決したいと思っています。

詳しい方( @snowdrops89 さんとか😆) 、上手な解決方法を教えてください！

[snowdrops89]

　CSS、詳しくないですうぅ～😭
　とりあえずなんとかしたいのは、#nako3_div table、#nako3_div th, #nako3_div td、.showblock table tr:nth-child(2n+1) tdのあたり。
　詳細度が強くてヨソのCSSを取り込んでも打ち負かしてしまうため、テーブルタグが使われている系の外部ライブラリが使いにくいんです。

そこで、なでしこ3側で作成するテーブルに、新たにclassを割り振って、それに対応するCSSを新規追加する

　というのは、テーブル作成時にクラスを付けることにして、#nako3_div tableや#nako3_div th, #nako3_div tdの設定を、そのクラスのほうに設定するという意味でしょうか。
　それは、一般的に正しい道な気はするのですが、それこそ過去の作品の見た目に影響するのではないですか？
　テーブル作成が無かった頃に、テーブルタグをHTML設定して作られたテーブルや、クラスを振っていないバージョンのテーブル作成のテーブルには設定が付かないことになってしまいますよね？
　それで、まるっと:where()で括って詳細度を０にしたらどうかな？　と思ったんです。
　詳細度が０でも他のCSSで上書きされない限り設定は生きるので過去の作品の見た目は基本変わりませんが、優先度が最低なので後から取り込んだCSSを邪魔することもありません。

　ここで一番問題を難しくしているのは、

.showblock table tr:nth-child(2n+1) td {
  background-color: #f0f0ff;
}

の存在だと思うんですよねー。

　これは、詳細度が(0,2,3)と結構高いので、ちょっとしたCSS（「.クラス名 td」とか）は敗北してしまいます。
　そして、仮に:where()で括って詳細度を０にしたとしても、tdに背景色の設定がなければ当然有効になるので、外部ライブラリのテーブル類がだいたい意図せずシマシマになってしまうんです。
　テーブル作成でも、要素に直接設定されていて一番強いはずなのですが、背景色はtrに設定されていてtdには設定が無いのでtdに色が入り、trの色が隠されてしまうというのが本来の状況でした。

　ワタクシ、テーブル作成のことだけ考えてinitialを提案してしまいましたが～💧
　その結果、テーブル作成が出来る以前の、HTML設定とかで作られていたテーブルが、元はシマシマで表示されていたのに真っ白ということになってしまい、外部ライブラリのCSSまでも崩壊させてしまいました～orz
　テーブル作成時にクラスを振ってbackground-color: initialだけ付けることも考えられますが、これは、貯蔵庫エディタでだけのことなので、そのためにあんまりなでしこのプログラム自体をどうこうするのもどうかなという。
　ちなみにこのシマシマ、tdではなくtrに付くように変更するわけにはいかないものでしょうか？

.showblock tr:nth-child(2n+1){
  background-color: #f0f0ff;
}

　trならテーブル作成は別になーんにもしなくても問題ないし、過去作品の見た目が変わることも無いハズなのですが。
（テーブル部品の背景色はtrのほうが望ましいです。セルの色を変更したり戻したりする時、背景色のことを気にしなくてもよいので）
　そして結局外部ライブラリのテーブルがシマシマになる問題はどうしたものか🤔

　もしかすると、

貯蔵庫側で、基本となるCSSファイルを差し替えることができる設定

が出来ると解決するかもですが！✨
　これ、#nako3_divではなくもっと上位の部分に付いている設定ですが差し替えられる対象に含められるものでしょうか。

[kujirahand]

@snowdrops89 さん、ありがとうございます！道筋が見えてきました！

[kujirahand]

v.0.8.7 で :where をつけるのと、 .showblock table tr...の部分を修正しました。
CSSの差し替え機能を付けようかと思っていましたが、貯蔵庫の大幅な修正で、
相当大変な作業が必要になるので、今回は断念しました😭

[snowdrops89]

　いまこうなっていて、これだとシマシマがｔｄのほうに付いてしまうので、再びDOM部品オプションの設定が（見た目上）反映されなくなってしまっています～。

.showblock tr:nth-child(2n+1) td {
  background-color: #f0f0ff;
}

　　↓ 　ｔｄをけす

.showblock tr:nth-child(2n+1){
  background-color: #f0f0ff;
}

　これでいけるはず。

[kujirahand]

@snowdrops89 わ、ありがとうございます！下記で微修正しました。
kujirahand/nako3storage@d8a05e4

[snowdrops89]

確認しました。ありがとうございます✨