colors from template

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`

code/static/css/styles.css

@@ -4,18 +4,18 @@ html {
 }
 
 body {
-  color: #0E6251;
+  color: var(--text-color);
-  background-color: #FDF2E9;
+  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 {
@@ -27,14 +27,33 @@ a:link {
   left: 9vw;
   width: 80vw;
   height: 23px;
-   background-color: #FAE5D3;
   text-align: center;
   padding-top: 7px;
-   background: #fdf2e9; /* Old browsers */
+  background-color: var(--background-dark-color);
-   background: -moz-linear-gradient(left, #fdf2e9 0%, #fae5d3 50%, #fdf2e9 100%); /* FF3.6-15 */
+  background: var(--background-dark-color); /* Old browsers */
-   background: -webkit-linear-gradient(left, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* Chrome10-25,Safari5.1-6 */
+  background: -moz-linear-gradient(
-   background: linear-gradient(to right, #fdf2e9 0%,#fae5d3 50%,#fdf2e9 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+       left,
-   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdf2e9', endColorstr='#fdf2e9',GradientType=1 ); /* IE6-9 */
+       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-color: var(--background-dark-color);
-  background: -moz-linear-gradient(left, #fae5d3 0%, #fae5d3 95%, #fdf2e9 100%);
+  background: linear-gradient(
-  background: -webkit-linear-gradient(left, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%);
+      to right,
-  background: linear-gradient(to right, #fae5d3 0%,#fae5d3 95%,#fdf2e9 100%);
+      var(--background-dark-color) 0%,
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fae5d3', endColorstr='#fdf2e9',GradientType=1 );
+      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;
+  border: 4px solid var(--border-color);
-  background-color: #FAE5D3;
+  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;
+  border: 4px solid var(--border-color);
-  background-color: #FAE5D3;
+  background-color: var(--background-dark-color);
   line-height: 2em;
   -webkit-border-bottom-left-radius: 15px;
   -moz-border-radius-bottomleft: 15px;

code/templates/layout.html

@@ -1,7 +1,9 @@
 <!doctype html>
 <head>
   <title>Flees</title>
+  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/colors.css') }}">
   <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/styles.css') }}">
+  <link rel=stylesheet type=text/css href="{{ url_for('static', filename='css/user.css') }}">
   <link rel="icon" href="{{ url_for('static', filename='css/flees.ico') }}" type="image/x-icon" />
   <script src="{{ url_for('static', filename='js/tablesort.js') }}" type="text/javascript"></script>
   <script src="{{ url_for('static', filename='js/scripts.js') }}" type="text/javascript"></script>

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
+