/* page layout */ html { height: 100%; } body { font-size: 8px; font-family: monospace; height: 100%; margin: 0; display: flex; flex-direction: row; align-items: center; & > * { flex-direction: column; align-items: center; margin: auto; & > * { margin: auto; } } } * { box-sizing: border-box; } /* diff styling */ table.diff { border-collapse: collapse; td, th { padding: 0; white-space: nowrap; } .diff-del, .diff-del a { color: red; } .diff-add, .diff-add a { color: green; } .diff-dat, .diff-dat a { color: blue; } .diff-ctx, .diff-ctx a { color: black; } } /* sortable styling */ table.sortable { border-collapse: collapse; caption p { margin: 0; } td, th { padding: 0; border: solid 1px black; white-space: nowrap; } td { background-color: #F3F3F3; } } /* generic table interaction */ table { tr.invalid td { background-color: #F30000 !important; } tr:hover a, tr.invalid:hover a { background-color: #AAAAF3; } td a { text-decoration: none; padding: 0.1em 0.25em; display: block; width: 100%; height: 100%; color: black; } } /* generic time formatting - for datetimes that we want to render as just a date, but still want to be sortable, we a construct like ``, then use this to hide the TIME part of it. */ time .time { display: none }