Atomっぽい色合いにしたい!-表編
だいたいこんな感じ。
table:abc
関数名 仕様 入力 --> 出力
searchRecordsWith タグを用いて検索する機能 タグID集合 記録集合
fetch 記録の詳細を返す機能。 記録ID集合 記録集合
register 記録を書き込む機能。 記録 void
うお〜〜スマホから見るのに全然向いてね〜〜〜
まあスクロールすれば見れるから致命的というわけでもない
今の今まで表に対応していなかったので、表にも対応してみる。
とはいっても、もともとのAtomにも表はなかった。 どう言うデザインにしよう...?
枠線をわかりやすく。
そうでもなさそう。
表の始まりにはsection-titleがある
その後の要素を調べるためには+セレクタが使える。
これを使えばいける?
表の行頭は、section-title行の次に存在する。
無理だ....
:has() 擬似クラスが使えるブラウザなら、テーブルのひとつ上の行が空行じゃなくても指定できるようになりました。.line:has( .table-block-start ) + .line .table-block .cell { /* 1行目のセル */ } なるほど?
なぜか背景色はimportantをつけないと反応しない
code:style.css
/** ファイル名表示欄について */
.table-block .table-block-start {
padding: 0.3em 1em;
}
/** リンクの色指定 */
.table-block .table-block-start a {
}
/* テーブルのセルについて */
.table-block .cell{
padding: 0.2em 1.1em;
}
.table-block .cell:first-child{
border-left: none;
}
/** 第一行を強調する。ヘッダ行に下線もつける。 */
.line:has( .table-block-start ) + .line .table-block .cell {
background-color: #15181c !important; font-weight: bold;
text-align: center;
}