diff options
author | Luke Shumaker <lukeshu@lukeshu.com> | 2018-03-14 18:18:31 -0400 |
---|---|---|
committer | Luke Shumaker <lukeshu@lukeshu.com> | 2018-03-17 13:49:41 -0400 |
commit | b54a1c9686eec3c1114e9b58cb67679ba59c45bd (patch) | |
tree | 0bdb2f3ed51ff077a8c3e337e4bc556aacec108e /public-src/style.scss | |
parent | 54feeb027d6e5a760b49769dfe695ea2591dc6fe (diff) |
directories
Diffstat (limited to 'public-src/style.scss')
-rw-r--r-- | public-src/style.scss | 76 |
1 files changed, 76 insertions, 0 deletions
diff --git a/public-src/style.scss b/public-src/style.scss new file mode 100644 index 0000000..70747bd --- /dev/null +++ b/public-src/style.scss @@ -0,0 +1,76 @@ +/* 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 + `<time>DATE<span class=time>TIME</span></time>`, then use this to + hide the TIME part of it. */ +time .time { + display: none +} |