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