From afea79adf95ceabb3c82725e8db743c726431ff2 Mon Sep 17 00:00:00 2001 From: dgtlmoon Date: Mon, 14 Jun 2021 21:04:06 +1000 Subject: [PATCH] Sassify the diff page --- backend/static/styles/.gitignore | 1 + backend/static/styles/diff.css | 97 +++++++++++++----------------- backend/static/styles/diff.scss | 67 +++++++++++++++++++++ backend/static/styles/package.json | 2 +- 4 files changed, 112 insertions(+), 55 deletions(-) create mode 100644 backend/static/styles/.gitignore create mode 100644 backend/static/styles/diff.scss diff --git a/backend/static/styles/.gitignore b/backend/static/styles/.gitignore new file mode 100644 index 00000000..3c3629e6 --- /dev/null +++ b/backend/static/styles/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/backend/static/styles/diff.css b/backend/static/styles/diff.css index 491581d1..d5c920c3 100644 --- a/backend/static/styles/diff.css +++ b/backend/static/styles/diff.css @@ -1,66 +1,55 @@ -table { - table-layout: fixed; - width: 100%; -} -td { - width: 33%; - padding: 3px 4px; - border: 1px solid transparent; - vertical-align: top; - font: 1em monospace; - text-align: left; - white-space: pre-wrap; -} +#diff-ui { + background: #fff; + padding: 2em; + margin: 1em; + border-radius: 5px; + font-size: 9px; } + #diff-ui table { + table-layout: fixed; + width: 100%; } + #diff-ui td { + padding: 3px 4px; + border: 1px solid transparent; + vertical-align: top; + font: 1em monospace; + text-align: left; + white-space: pre-wrap; } + h1 { - display: inline; - font-size: 100%; -} + display: inline; + font-size: 100%; } + del { - text-decoration: none; - color: #b30000; - background: #fadad7; -} + text-decoration: none; + color: #b30000; + background: #fadad7; } ins { - background: #eaf2c2; - color: #406619; - text-decoration: none; -} + background: #eaf2c2; + color: #406619; + text-decoration: none; } #result { - white-space: pre-wrap; -} + white-space: pre-wrap; } #settings { - background: rgba(0,0,0,.05); - padding: 1em; - border-radius: 10px; - margin-bottom: 1em; - color: #fff; - font-size: 80%; -} -#settings label { - margin-left: 1em; - display: inline-block; - font-weight: normal; -} + background: rgba(0, 0, 0, 0.05); + padding: 1em; + border-radius: 10px; + margin-bottom: 1em; + color: #fff; + font-size: 80%; } + #settings label { + margin-left: 1em; + display: inline-block; + font-weight: normal; } .source { - position: absolute; - right: 1%; - top: .2em; -} + position: absolute; + right: 1%; + top: .2em; } @-moz-document url-prefix() { - body { - height: 99%; /* Hide scroll bar in Firefox */ - } -} - -#diff-ui { - background: #fff; - padding: 2em; - margin: 1em; - border-radius: 5px; - font-size: 9px; -} \ No newline at end of file + body { + height: 99%; + /* Hide scroll bar in Firefox */ } } diff --git a/backend/static/styles/diff.scss b/backend/static/styles/diff.scss new file mode 100644 index 00000000..203f6a77 --- /dev/null +++ b/backend/static/styles/diff.scss @@ -0,0 +1,67 @@ +#diff-ui { + + background: #fff; + padding: 2em; + margin: 1em; + border-radius: 5px; + font-size: 9px; + + table { + table-layout: fixed; + width: 100%; + } + td { + padding: 3px 4px; + border: 1px solid transparent; + vertical-align: top; + font: 1em monospace; + text-align: left; + white-space: pre-wrap; + } + +} +h1 { + display: inline; + font-size: 100%; +} +del { + text-decoration: none; + color: #b30000; + background: #fadad7; +} + +ins { + background: #eaf2c2; + color: #406619; + text-decoration: none; +} + +#result { + white-space: pre-wrap; +} + +#settings { + background: rgba(0,0,0,.05); + padding: 1em; + border-radius: 10px; + margin-bottom: 1em; + color: #fff; + font-size: 80%; + label { + margin-left: 1em; + display: inline-block; + font-weight: normal; + } +} + +.source { + position: absolute; + right: 1%; + top: .2em; +} + +@-moz-document url-prefix() { + body { + height: 99%; /* Hide scroll bar in Firefox */ + } +} \ No newline at end of file diff --git a/backend/static/styles/package.json b/backend/static/styles/package.json index 57a5580b..9ca29121 100644 --- a/backend/static/styles/package.json +++ b/backend/static/styles/package.json @@ -5,7 +5,7 @@ "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "scss": "node-sass --watch styles.scss -o ." + "scss": "node-sass --watch *.scss -o ." }, "author": "", "license": "ISC",