Atomっぽい色合いにしたい!-表編
Atomっぽい色合いにしたい!-表編
だいたいこんな感じ。
table:abc
関数名 仕様 入力 --> 出力
searchRecordsWith タグを用いて検索する機能 タグID集合 記録集合
fetch 記録の詳細を返す機能。 記録ID集合 記録集合
register 記録を書き込む機能。 記録 void
うお〜〜スマホから見るのに全然向いてね〜〜〜
まあスクロールすれば見れるから致命的というわけでもない
今の今まで表に対応していなかったので、表にも対応してみる。
とはいっても、もともとのAtomにも表はなかった。
どう言うデザインにしよう...?
コードブロックの延長っぽくありたい
枠線をわかりやすく。
UserScriptをつかわないと最初の行だけ強調するみたいなことは難しそうか?
そうでもなさそう。
表の始まりにはsection-titleがある
その後の要素を調べるためには+セレクタが使える。
これを使えばいける?
表の行頭は、section-title行の次に存在する。
無理だ....
/customize/テーブルの見た目をカスタマイズ#6348c319296a330000dcbe4b
:has() 擬似クラスが使えるブラウザなら、テーブルのひとつ上の行が空行じゃなくても指定できるようになりました。.line:has( .table-block-start ) + .line .table-block .cell { /* 1行目のセル */ }
なるほど?
なぜか背景色はimportantをつけないと反応しない
code: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;
}