From 3d35abbb504ce11e0158623484416bbf9d6238dd Mon Sep 17 00:00:00 2001 From: ville rantanen Date: Sun, 1 Jul 2018 21:26:59 +0300 Subject: [PATCH] colors from template --- README.md | 1 + code/static/css/styles.css | 91 +++++++++++++++++++++++--------------- code/templates/layout.html | 2 + create_config.sh | 23 ++++++++++ 4 files changed, 82 insertions(+), 35 deletions(-) create mode 100755 create_config.sh diff --git a/README.md b/README.md index 9b4a970..d4adf4f 100644 --- a/README.md +++ b/README.md @@ -11,6 +11,7 @@ The name comes from mispronouncing "files" very badly. - `cp data/config.json.example data/config.json` - `cp data/shares.json.example data/shares.json` - `touch code/notifier.py` +- `touch code/static/css/user.css` - `docker-compose up --build` - open URL: http://localhost:8136/list/test - `pip install code/manager-requirements.txt` diff --git a/code/static/css/styles.css b/code/static/css/styles.css index 279d4a4..c9a4d86 100644 --- a/code/static/css/styles.css +++ b/code/static/css/styles.css @@ -4,37 +4,56 @@ html { } body { - color: #0E6251; - background-color: #FDF2E9; + color: var(--text-color); + background-color: var(--background-light-color); min-height: 600px; font: 14px/1.3 'Segoe UI',Arial, sans-serif; margin: 8px; } a:visited { - color: #0E3221; + color: var(--text-color); } a:link { - color: #0E6251; + color: var(--text-color); } #page { - padding-bottom: 60px; + padding-bottom: 60px; } #footer { - position: absolute; - bottom: 0; - left: 9vw; - width: 80vw; - height: 23px; - background-color: #FAE5D3; - text-align: center; - padding-top: 7px; - background: #fdf2e9; /* Old browsers */ - background: -moz-linear-gradient(left, #fdf2e9 0%, #fae5d3 50%, #fdf2e9 100%); /* FF3.6-15 */ - background: -webkit-linear-gradient(left, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* Chrome10-25,Safari5.1-6 */ - background: linear-gradient(to right, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e9', endColorstr='#fdf2e9',GradientType=1 ); /* IE6-9 */ + position: absolute; + bottom: 0; + left: 9vw; + width: 80vw; + height: 23px; + text-align: center; + padding-top: 7px; + background-color: var(--background-dark-color); + background: var(--background-dark-color); /* Old browsers */ + background: -moz-linear-gradient( + left, + var(--background-light-color) 0%, + var(--background-dark-color) 50%, + var(--background-light-color) 100% + ); /* FF3.6-15 */ + background: -webkit-linear-gradient( + left, + var(--background-light-color) 0%, + var(--background-dark-color) 50%, + var(--background-light-color) 100% + ); /* Chrome10-25,Safari5.1-6 */ + background: linear-gradient( + to right, + var(--background-light-color) 0%, + var(--background-dark-color) 50%, + var(--background-light-color) 100% + ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ + filter: progid:DXImageTransform.Microsoft.gradient( + startColorstr='var(--background-light-color)', + endColorstr='var(--background-dark-color)', + GradientType=1 + ); /* IE6-9 */ } .version_number { font-size: xx-small; @@ -54,15 +73,17 @@ td,th { } th { cursor: pointer; - background: #FDF2E9; + background: var(--background-light-color); } tr:nth-child(odd) { - background-color: #FAE5D3; - background: -moz-linear-gradient(left, #fae5d3 0%, #fae5d3 95%, #fdf2e9 100%); - background: -webkit-linear-gradient(left, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%); - background: linear-gradient(to right, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae5d3', endColorstr='#fdf2e9',GradientType=1 ); + background-color: var(--background-dark-color); + background: linear-gradient( + to right, + var(--background-dark-color) 0%, + var(--background-dark-color) 95%, + var(--background-light-color) 100% + ); } .td_right { @@ -88,8 +109,8 @@ tr:nth-child(odd) { } #list_menu, #list_script { padding: 8px; - border: 4px solid #148F77; - background-color: #FAE5D3; + border: 4px solid var(--border-color); + background-color: var(--background-dark-color); line-height: 1.5em; position: absolute; width: 20em; @@ -144,11 +165,11 @@ tr:nth-child(odd) { background: linear-gradient( to bottom, transparent, transparent 5%, - #148F77 5%, #148F77 25%, + var(--text-color) 5%, var(--text-color) 25%, transparent 25%, transparent 40%, - #148F77 40%, #148F77 60%, + var(--text-color) 40%, var(--text-color) 60%, transparent 60%, transparent 75%, - #148F77 75%, #148F77 95%, + var(--text-color) 75%, var(--text-color) 95%, transparent 95%, transparent 100% ); } @@ -191,7 +212,7 @@ tr:nth-child(odd) { } .code { - background-color: #FDF2E9; + background-color: var(--background-light-color); font-family: monospace; margin-right: 2em; margin-bottom: 1em; @@ -208,8 +229,8 @@ tr:nth-child(odd) { #index_menu { float:right; padding: 12px; - border: 4px solid #148F77; - background-color: #FAE5D3; + border: 4px solid var(--border-color); + background-color: var(--background-dark-color); line-height: 2em; -webkit-border-bottom-left-radius: 15px; -moz-border-radius-bottomleft: 15px; @@ -223,14 +244,14 @@ tr:nth-child(odd) { } #progress { - margin: 4px 4px 4px 4px; + margin: 4px 4px 4px 4px; } #progress.success { - color: green; + color: green; } #progress.failure { - color: red; + color: red; } .sortarrow { diff --git a/code/templates/layout.html b/code/templates/layout.html index 3108835..eb799ab 100644 --- a/code/templates/layout.html +++ b/code/templates/layout.html @@ -1,7 +1,9 @@ Flees + + diff --git a/create_config.sh b/create_config.sh new file mode 100755 index 0000000..cd98f04 --- /dev/null +++ b/create_config.sh @@ -0,0 +1,23 @@ +#!/bin/bash + +set -x +test -f .env || cp env.example .env +test -f data/config.json || cp data/config.json.example data/config.json +test -f data/shares.json || cp data/shares.json.example data/shares.json +test -f code/notifier.py || touch code/notifier.py +test -f code/static/css/colors.css || { +echo ' +:root { + --background-light-color: #FDF2E9; + --background-dark-color: #FAE5D3; + --text-color: #0E6251; + --border-color: #0E6251; +} +' > code/static/css/colors.css +} +test -f code/static/css/user.css || touch code/static/css/user.css +set +x + +echo Now edit data/config.json +echo See README.md +