style modularize

dash/assets/style1.css

+/* define colours */
+
+:root {
+  --active_fg: #077;
+  --active_bg: #BFDEE0;
+  --passive_bg0: #eee;
+  --passive_bg1: #bbb;
+  --passive_bg2: #ccc;
+  --main_bg: #f1f1f1;
+  --text_active: #f1f1f1;
+  --text_passive: #666666;
+}
+
+
 /* Style the header */
 .header {
-  background-color: #BFDEE0;
+  background-color: var(--active_bg);
   padding: 4px;
   text-align: center;
   font-size: 20px;
-  color: #666666;
+  color: var(--text_passive);
 }
 
 .header a{
   text-decoration: none;
-  color: #666666;
+  color: var(--text_passive);
 }
 
 .header h1{
@@ -30,7 +44,7 @@
   position: fixed;
   float: left;
   z-index: 1;
-  background-color: #ccc;
+  background-color: var(--passive_bg2);
   overflow-x: hidden;
   text-align: center;
   font-size: 18px;
@@ -42,7 +56,7 @@
   height: auto;
   width: 15%;
   z-index: 1;
-  background-color: #eee;
+  background-color: var(--passive_bg0);
   display: block;
 }
 
@@ -53,14 +67,14 @@
   border-radius: 4px;
   text-decoration: none;
   font-size: 20px;
-  color: #666;
-  background-color: #bbb;
+  color: var(--text_active);
+  background-color: var(--passive_bg1);
 }
 
 /* Style links on mouse-over */
 .sidebar a:hover {
-  background-color: #BFDEE0;
-  color: #f1f1f1;
+  background-color: var(--active_bg);
+  color: var(--main_bg);
 }
 
 
@@ -72,7 +86,7 @@
 .main {
   float: right;
   width: 80%;
-  background-color: #f1f1f1;
+  background-color: var(--main_bg);
   font-size: 14px;
   padding: 1%;
 }
@@ -100,8 +114,38 @@
 }
 
 .table td, .table th {
-  border: 1px solid #ddd;
+  border: 1px solid var(--passive_bg1);
   padding: 8px;
 }
 
-.table tr:nth-child(even){background-color: #f2f2f2;}
+.table tr:nth-child(even){background-color: var(--passive_bg0);}
+
+.rc-slider {
+  width: 55%;
+}
+
+.rc-slider-track {
+  background-color: var(--active_fg);
+}
+
+.rc-slider-rail {
+  background-color: var(--passive_bg1);
+}
+
+.rc-slider-dot-active {
+  border-color: var(--active_fg);
+  border: solid 2px var(--active_fg);
+}
+
+.rc-slider-handle {
+  background-color: var(--active_fg);
+  border-color: var(--active_fg);
+}
+
+.rc-slider-handle:hover {
+  border-color: var(--active_fg);
+}
+
+.rc-slider-handle-active:active {
+  border-color: var(--active_fg);
+}

dash/index.py

@@ -30,7 +30,7 @@ sidebar_back = html.Nav(className='sidebar_back',children='')
 
 
 menu_items=['convert',
-            'mipmaps',
+            # 'mipmaps',
             'tilepairs',
             'pointmatch',
             'solve',
@@ -39,7 +39,7 @@ menu_items=['convert',
             ]
 
 menu_text=['Convert & upload',
-            'Generate MipMaps',
+            # 'Generate MipMaps',
             'Find Tile Pairs',
             'Find Point Matches',
             'Solve Positions',