diff options
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 +} |