Update color scheme definition and some codestyle enhancements

web/app/static/css/material_icons.css

@@ -4,7 +4,6 @@
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
-  src: url(../fonts/material_icons/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
     local('MaterialIcons-Regular'),
     url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),

web/app/static/css/materialize.sticky-footer.css

@@ -1,13 +0,0 @@
-/*
- * Force the footer to always stay on the bottom of the page regardless of how
- * little content is on the page.
- */
-body {
-  display: flex;
-  min-height: 100vh;
-  flex-direction: column;
-}
-
-main {
-  flex: 1 0 auto;
-}

web/app/static/css/nopaque.css

@@ -1,6 +1,6 @@
 /* Fix material icon vertical alignment when nested in various elements */
-h1 .material-icons, h2 .material-icons, h3 .material-icons, h4 .material-icons,
-.tab .material-icons {
+h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
+.tab .nopaque-icons, .tab .material-icons {
   line-height: inherit;
 }
 
@@ -8,12 +8,27 @@ main {
   margin-top: 48px;
 }
 
+/*
+ * Force the footer to always stay on the bottom of the page regardless of how
+ * little content is on the page.
+ */
+body {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+main {
+  flex: 1 0 auto;
+}
+
+
 table.ressource-list tr {
   cursor: pointer;
 }
 
 .parallax-container .parallax {
-  z-index: auto;
+  z-index: 0;
 }
 
 /* add custom bold class */
@@ -117,66 +132,19 @@ indicator will show up how the column is sorted right now.; */
   cursor: pointer;
 }
 
-/* styles for resource lists */
-.analyse-link[href=""] {
-  display: none;
-}
-
 .btn-scale-x2 {
   transform: scale(2);
 }
 
-.btn-scale-x2 .service-icon {
+.btn-scale-x2 .nopaque-icons.service-icon {
   font-size: 2.5rem;
 }
 
-.service-icon[data-service]:before {
-  content: "help";
-}
-.service-icon[data-service="corpus-analysis"]:before {
-  content: "H";
-}
-.service-icon[data-service="file-setup"]:before {
-  content: "E";
-}
-.service-icon[data-service="nlp"]:before {
-  content: "G";
-}
-.service-icon[data-service="ocr"]:before {
-  content: "F";
-}
+.nopaque-icons.service-icon[data-service="corpus-analysis"]:empty:before {content: "H";}
+.nopaque-icons.service-icon[data-service="file-setup"]:empty:before {content: "E";}
+.nopaque-icons.service-icon[data-service="nlp"]:empty:before {content: "G";}
+.nopaque-icons.service-icon[data-service="ocr"]:empty:before {content: "F";}
 
 .status-text[data-status]:before {
   content: attr(data-status);
 }
-
-.status-color[data-status] {
-  background-color: #f44336 !important; /* ~materialize "red" */
-}
-.status-color[data-status="unprepared"] {
-  background-color: #9e9e9e !important; /* ~materialize grey */
-}
-.status-color[data-status="submitted"] {
-  background-color: #9e9e9e !important; /* ~materialize grey */
-}
-.status-color[data-status="queued"] {
-  background-color: #2196f3 !important; /* ~materialize blue */
-}
-.status-color[data-status="running"] {
-  background-color: #ffc107 !important; /* ~materialize amber */
-}
-.status-color[data-status="complete"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="prepared"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="start analysis"] {
-  background-color: #2196f3 !important; /* ~materialize blue */
-}
-.status-color[data-status="analysing"] {
-  background-color: #4caf50 !important; /* ~materialize green */
-}
-.status-color[data-status="stop analysis"] {
-  background-color: #ff5722 !important; /* ~materialize deep-orange */
-}

web/app/static/css/nopaque_icons.css

@@ -1,5 +1,3 @@
-/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
-
 @font-face {
   font-family: 'nopaque Icons';
   font-style: normal;
@@ -33,57 +31,3 @@
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
-
-.breadcrumb i.nopaque-icons {
-  display: inline-block;
-  float: left;
-  font-size: 24px;
-}
-
-.nopaque-icons {
-  text-rendering: optimizeLegibility;
-  -webkit-font-feature-settings: 'liga';
-     -moz-font-feature-settings: 'liga';
-          font-feature-settings: 'liga';
-}
-
-nav i.nopaque-icons {
-  display: block;
-  font-size: 24px;
-  height: 56px;
-  line-height: 56px;
-}
-
-nav .brand-logo i.nopaque-icons {
-  float: left;
-  margin-right: 15px;
-}
-
-nav ul a.btn > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-small > .nopaque-icons, nav ul a.btn-large > .nopaque-icons, nav ul a.btn-flat > .nopaque-icons, nav ul a.btn-floating > .nopaque-icons {
-  height: inherit;
-  line-height: inherit;
-}
-
-.input-field input[type=search]:focus:not(.browser-default) ~ .nopaque-icons {
-  color: #444;
-}
-
-.input-field input[type=search] ~ .nopaque-icons {
-  position: absolute;
-  top: 0;
-  right: 1rem;
-  color: transparent;
-  cursor: pointer;
-  font-size: 2rem;
-  -webkit-transition: .3s color;
-  transition: .3s color;
-}
-
-.sidenav li > a > i.nopaque-icons {
-  float: left;
-  height: 48px;
-  line-height: 48px;
-  margin: 0 32px 0 0;
-  width: 24px;
-  color: rgba(0, 0, 0, 0.54);
-}

web/app/static/js/nopaque/RessourceLists/CorpusList.js

@@ -81,7 +81,7 @@ class CorpusList extends RessourceList {
 }
 CorpusList.options = {
   item: `<tr>
-           <td><a class="btn-floating disabled"><i class="material-icons service-color" data-service="corpus-analysis">book</i></a></td>
+           <td><a class="btn-floating disabled"><i class="material-icons service-color darken" data-service="corpus-analysis">book</i></a></td>
            <td><b class="title"></b><br><i class="description"></i></td>
            <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
            <td class="right-align">

web/app/static/js/nopaque/RessourceLists/JobList.js

@@ -82,7 +82,7 @@ class JobList extends RessourceList {
 }
 JobList.options = {
   item: `<tr>
-           <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color service-icon"></i></a></td>
+           <td><a class="btn-floating disabled"><i class="nopaque-icons service service-color darken service-icon"></i></a></td>
            <td><b class="title"></b><br><i class="description"></i></td>
            <td><span class="badge new status status-color status-text" data-badge-caption=""></span></td>
            <td class="right-align">