Change directory structure (move ./nopaque/* to ./)

app/static/css/material_icons.css

@@ -0,0 +1,39 @@
+/* https://google.github.io/material-design-icons/#setup-method-2-self-hosting */
+
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+    local('MaterialIcons-Regular'),
+    url(../fonts/material_icons/MaterialIcons-Regular.ttf) format('truetype'),
+    url(../fonts/material_icons/MaterialIconsOutlined-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsRound-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsSharp-Regular.otf) format('opentype'),
+    url(../fonts/material_icons/MaterialIconsTwoTone-Regular.otf) format('opentype');
+}
+
+.material-icons {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

app/static/css/materialize_fixes.css

@@ -0,0 +1,9 @@
+/* Fix material icon vertical alignment when nested in various elements */
+h1 .nopaque-icons, h2 .nopaque-icons, h3 .nopaque-icons, h4 .nopaque-icons,
+.tab .nopaque-icons, .tab .material-icons {
+  line-height: inherit;
+}
+
+.parallax-container .parallax {
+  z-index: 0;
+}

app/static/css/nopaque.css

@@ -0,0 +1,109 @@
+/* Change navbar height bacause an extended and fixed navbar is used */
+.navbar-fixed {
+  height: 112px;
+}
+
+/* add custom bold class */
+.bold {font-weight: bold;}
+
+/* Change placholdertext color of file uplaod fields */
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}
+
+/* preloader circle in the size of a button icon */
+.button-icon-spinner {
+  bottom: -5px !important;
+  right: 55px !important;
+  margin-right: 12px !important;
+  width: 19.5px !important;
+  height: 19.5px !important;
+}
+
+/*
+ * changes preoloader size etc. to fit visually better with the chip status
+ * indicator of jobs
+ */
+.status-spinner {
+  margin-bottom: -10px;
+  width: 30px !important;
+  height: 30px !important;
+}
+
+/* flat-interaction addition to show background color */
+
+.flat-interaction {
+  background-color: #DCDCDC;
+  width: 100%;
+  margin-bottom: 3px;
+  text-transform: capitalize;
+}
+
+.flat-interaction:hover {
+  background-color: #E6E6FA !important;
+}
+
+/* CSS for clickable th elements in tables. Needed for sortable table data with
+list js. On click on th header elements will be sorted accordingly. Also a caret
+indicator will show up how the column is sorted right now.; */
+.sort {
+  cursor: pointer;
+}
+.sort:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}
+.sort.asc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:13px;
+  right:-5px;
+}
+.sort.desc:after {
+  width: 0;
+  height: 0;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-bottom: 5px solid #000000;
+  content:"";
+  position: relative;
+  top:-10px;
+  right:-5px;
+}
+
+.show-if-only-child:not(:only-child) {
+  display: none !important;
+}
+
+/* class for expert view */
+.expert-view {
+  cursor: pointer;
+}
+
+.btn-scale-x2 {
+  transform: scale(2);
+}
+
+.btn-scale-x2 .nopaque-icons.service-icon {
+  font-size: 2.5rem;
+}
+
+.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]:empty:before {content: attr(data-status);}

app/static/css/nopaque_icons.css

@@ -0,0 +1,33 @@
+@font-face {
+  font-family: 'nopaque Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('nopaque Icons'),
+    local('nopaqueIcons-Regular'),
+    url(../fonts/nopaque_icons/nopaqueIcons-Regular.otf) format('opentype');
+}
+
+.nopaque-icons {
+  font-family: 'nopaque Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px;  /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all WebKit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}

app/static/css/sidenav_fixed.css

@@ -0,0 +1,12 @@
+/*
+ * The sidenav-fixed class is used which causes the sidenav to be fixed and open
+ * on large screens and hides to the regular functionality on smaller screens.
+ * In order to prevent the sidenav to overlap the content, the content (in our
+ * case header, main and footer) gets an offset equal to the width of the
+ * sidenav.
+ */
+@media only screen and (min-width : 993px) {
+  header, main, footer {padding-left: 300px;}
+  .modal:not(.bottom-sheet) {left: 300px;}
+  .navbar-fixed > nav {width: calc(100% - 300px)}
+}

app/static/css/sticky_footer.css

@@ -0,0 +1,18 @@
+/*
+ * Sticky Footer: https://materializecss.com/footer.html#sticky-footer
+ * A sticky footer always stays on the bottom of the page regardless of how
+ * little content is on the page. However, this footer will be pushed down if
+ * there is a lot of content, so it is different from a fixed footer.
+ *
+ * Note: This may cause issues in Internet Explorer which has weak support for
+ *       flexbox.
+ */
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+main {
+  flex: 1 0 auto;
+}