Going back to vanilla css

app/static/css/corpus-status-colors.css

@@ -0,0 +1,43 @@
+[data-corpus-status="UNPREPARED"] {
+  --corpus-status-color: #9e9e9e;
+}
+
+[data-corpus-status="QUEUED"] {
+  --corpus-status-color: #2196f3;
+}
+
+[data-corpus-status="BUILDING"] {
+  --corpus-status-color: #ffc107;
+}
+
+[data-corpus-status="BUILT"] {
+  --corpus-status-color: #4caf50;
+}
+
+[data-corpus-status="FAILED"] {
+  --corpus-status-color: #f44336;
+}
+
+[data-corpus-status="STARTING_ANALYSIS_SESSION"] {
+  --corpus-status-color: #2196f3;
+}
+
+[data-corpus-status="RUNNING_ANALYSIS_SESSION"] {
+  --corpus-status-color: #4caf50;
+}
+
+[data-corpus-status="CANCELING_ANALYSIS_SESSION"] {
+  --corpus-status-color: #ff5722;
+}
+
+.corpus-status-color {
+  background-color: var(--corpus-status-color) !important;
+}
+
+.corpus-status-color-border {
+  border-color: var(--corpus-status-color) !important;
+}
+
+.corpus-status-color-text {
+  color: var(--corpus-status-color) !important;
+}

app/static/css/corpus-status-text.css

@@ -0,0 +1,35 @@
+[data-corpus-status="UNPREPARED"] {
+  --corpus-status-content: "unprepared";
+}
+
+[data-corpus-status="QUEUED"] {
+  --corpus-status-content: "queued";
+}
+
+[data-corpus-status="BUILDING"] {
+  --corpus-status-content: "building";
+}
+
+[data-corpus-status="BUILT"] {
+  --corpus-status-content: "built";
+}
+
+[data-corpus-status="FAILED"] {
+  --corpus-status-content: "failed";
+}
+
+[data-corpus-status="STARTING_ANALYSIS_SESSION"] {
+  --corpus-status-content: "starting analysis session";
+}
+
+[data-corpus-status="RUNNING_ANALYSIS_SESSION"] {
+  --corpus-status-content: "running analysis session";
+}
+
+[data-corpus-status="CANCELING_ANALYSIS_SESSION"] {
+  --corpus-status-content: "canceling analysis session";
+}
+
+.corpus-status-text:empty::before {
+  content: var(--corpus-status-content);
+}

app/static/css/job-status-colors.css

@@ -0,0 +1,43 @@
+[data-job-status="INITIALIZING"] {
+  --job-status-color: #9e9e9e;
+}
+
+[data-job-status="SUBMITTED"] {
+  --job-status-color: #9e9e9e;
+}
+
+[data-job-status="QUEUED"] {
+  --job-status-color: #2196f3;
+}
+
+[data-job-status="RUNNING"] {
+  --job-status-color: #ffc107;
+}
+
+[data-job-status="CANCELING"] {
+  --job-status-color: #ff5722;
+}
+
+[data-job-status="CANCELED"] {
+  --job-status-color: #ff5722;
+}
+
+[data-job-status="COMPLETED"] {
+  --job-status-color: #4caf50;
+}
+
+[data-job-status="FAILED"] {
+  --job-status-color: #f44336;
+}
+
+.job-status-color {
+  background-color: var(--job-status-color) !important;
+}
+
+.job-status-color-border {
+  border-color: var(--job-status-color) !important;
+}
+
+.job-status-color-text {
+  color: var(--job-status-color) !important;
+}

app/static/css/job-status-text.css

@@ -0,0 +1,35 @@
+[data-job-status="INITIALIZING"] {
+  --job-status-content: "initializing";
+}
+
+[data-job-status="SUBMITTED"] {
+  --job-status-content: "submitted";
+}
+
+[data-job-status="QUEUED"] {
+  --job-status-content: "queued";
+}
+
+[data-job-status="RUNNING"] {
+  --job-status-content: "running";
+}
+
+[data-job-status="CANCELING"] {
+  --job-status-content: "canceling";
+}
+
+[data-job-status="CANCELED"] {
+  --job-status-content: "canceled";
+}
+
+[data-job-status="COMPLETED"] {
+  --job-status-content: "completed";
+}
+
+[data-job-status="FAILED"] {
+  --job-status-content: "failed";
+}
+
+.job-status-text:empty::before {
+  content: var(--job-status-content);
+}

app/static/css/materialize.override.css

@@ -0,0 +1,63 @@
+/* #region sidenav-fixed */
+/*
+ * 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 (header, main and footer)
+ * gets an offset equal to the width of the sidenav.
+ *
+ * Read more: https://materializecss.com/sidenav.html#variations
+ */
+body[data-sidenav-fixed="true" i] header,
+body[data-sidenav-fixed="true" i] main,
+body[data-sidenav-fixed="true" i] footer {
+  padding-left: 300px;
+}
+ 
+@media only screen and (max-width : 992px) {
+  body[data-sidenav-fixed="true" i] header,
+  body[data-sidenav-fixed="true" i] main,
+  body[data-sidenav-fixed="true" i] footer {
+    padding-left: 0;
+  }
+}
+
+body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
+  width: calc(100% - 300px);
+}
+
+@media only screen and (max-width : 992px) {
+  body[data-sidenav-fixed="true" i] .navbar-fixed > nav {
+    width: 100%;
+  }
+}
+/* #endregion sidenav-fixed */
+
+/* #region sticky-footer */
+/*
+ * 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.
+ *
+ * Read more: https://materializecss.com/footer.html#sticky-footer
+ */
+ body[data-sticky-footer="true" i] {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+}
+
+body[data-sticky-footer="true" i] main {
+  flex: 1 0 auto;
+}
+/* #endregion sticky-footer */
+
+/* #region other-overrides */
+::placeholder {
+  color: #9e9e9e;
+  opacity: 1;
+}
+/* #endregion other-overrides */

app/static/css/nopaque-icons.css

@@ -0,0 +1,37 @@
+@font-face {
+  font-family: 'Nopaque Icons';
+  font-style: normal;
+  font-weight: 400;
+  /* For IE6-8 */
+  /* src: url("../font/NopaqueIcons-Regular.eot"); */
+  src: local('nopaque Icons'),
+    local('NopaqueIcons-Regular'),
+    url("../font/NopaqueIcons-Regular.woff2") format('woff2'),
+    url("../font/NopaqueIcons-Regular.woff") format('woff'),
+    url("../font/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/pages/corpora/analysis.css

@@ -0,0 +1,127 @@
+#corpus-analysis-concordance-query-builder-input-field {
+  border-bottom: #9E9E9E 1px solid;
+  min-height: 38px;
+  margin-top: 23px;
+}
+
+#corpus-analysis-concordance-query-builder-input-field-placeholder {
+  color: #9E9E9E;
+}
+
+.modal-content {
+  overflow-x: hidden;
+}
+
+#corpus-analysis-concordance-positional-attr-modal, #corpus-analysis-concordance-corpus-analysis-concordance-structural-attr-modal {
+  width: 70%;
+}
+
+#corpus-analysis-concordance-general-options-query-builder-tutorial-info-icon {
+  color: black;
+}
+
+#corpus-analysis-concordance-insert-query-button {
+  background-color: #00426f;
+  text-align: center;
+}
+
+.attr-modal-header {
+  background-color: #f2eff7;
+  padding: 15px;
+  padding-left: 25px;
+  border-top: 10px solid #6B3F89;
+  margin-left: -24px;
+  margin-top: -24px;
+  margin-right: -24px;
+}
+
+.attr-modal-header h6 {
+  margin-left: 15px;
+}
+
+#corpus-analysis-concordance-add-structural-attribute-tutorial-info-icon {
+  color: black;
+}
+
+[data-structural-attr-modal-action-button="sentence"]{
+  background-color:#FD9720 !important;
+}
+
+[data-structural-attr-modal-action-button="entity"]{
+  background-color: #A6E22D !important;
+}
+
+[data-structural-attr-modal-action-button="meta-data"]{
+  background-color: #2FBBAB !important;
+}
+
+#corpus-analysis-concordance-no-value-metadata-message {
+  padding-top: 25px;
+  margin-left: -20px;
+}
+
+.attr-modal-header.input-field {
+  margin-left: 41px;
+}
+
+#corpus-analysis-concordance-token-attr {
+  margin-left: 41px;
+}
+
+#corpus-analysis-concordance-token-tutorial-info-icon {
+  color: black;
+}
+
+#corpus-analysis-concordance-no-value-message {
+  padding-top: 25px;
+  margin-left: -20px;
+}
+
+#corpus-analysis-concordance-token-edit-options h6 {
+  margin-left: 15px;
+}
+
+#corpus-analysis-concordance-edit-options-tutorial-info-icon {
+  color: black;
+}
+
+[data-toggle-area="input-field-options"] a {
+  margin-right: 10px;
+}
+
+[data-target="corpus-analysis-concordance-character-incidence-modifiers-dropdown"], [data-target="corpus-analysis-concordance-token-incidence-modifiers-dropdown"] {
+  background-color: #2FBBAB !important;
+}
+
+#corpus-analysis-concordance-exactly-n-token-modal, #corpus-analysis-concordance-between-nm-token-modal {
+  width: 30%;
+}
+
+[data-modal-id="corpus-analysis-concordance-exactly-n-token-modal"], [data-modal-id="corpus-analysis-concordance-between-nm-token-modal"] {
+  margin-top: 15px !important;
+}
+
+[data-options-action="and"], [data-options-action="or"] {
+  background-color: #fc0 !important;
+}
+
+[data-type="start-sentence"], [data-type="end-sentence"] {
+  background-color: #FD9720;
+}
+
+[data-type="start-empty-entity"], [data-type="start-entity"], [data-type="end-entity"] {
+  background-color: #a6e22d;
+}
+
+[data-type="text-annotation"]{
+  background-color: #2FBBAB;
+}
+
+[data-type="token"] {
+  background-color: #28B3D1;
+}
+
+[data-type="token-incidence-modifier"] {
+  background-color: #4db6ac;
+  color: white;
+}

app/static/css/pages/corpora/corpus.css

@@ -0,0 +1,4 @@
+#invite-user-modal-search .dropdown-content {
+  width: 100% !important;
+  left: 0 !important;
+}

app/static/css/pagination.css

@@ -0,0 +1,3 @@
+.pagination > li:only-child {
+  display: none;
+}

app/static/css/s-attr-color.css

@@ -0,0 +1,231 @@
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="PERSON"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="PERSON"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="PERSON"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="PER"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="PER"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="PER"] {
+  background-color: #a6e22d !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="NORP"] {
+  background-color: #ef60b4 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="NORP"] {
+  background-color: #ef60b4 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="NORP"] {
+  background-color: #ef60b4 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="FACILITY"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="FACILITY"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="FACILITY"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="ORG"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="ORG"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="ORG"] {
+  background-color: #43c6fc !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="GPE"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="GPE"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="GPE"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="LOC"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="LOC"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="LOC"] {
+  background-color: #fd9720 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="PRODUCT"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="PRODUCT"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="PRODUCT"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="MISC"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="MISC"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="MISC"] {
+  background-color: #a99dfb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="EVENT"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="EVENT"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="EVENT"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="WORK_OF_ART"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="WORK_OF_ART"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="WORK_OF_ART"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="LANGUAGE"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="LANGUAGE"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="LANGUAGE"] {
+  background-color: #fc0 !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="DATE"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="DATE"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="DATE"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="TIME"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="TIME"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="TIME"] {
+  background-color: #2fbbab !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="PERCENT"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="PERCENT"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="PERCENT"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="MONEY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="MONEY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="MONEY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="QUANTITY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="QUANTITY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="QUANTITY"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="ORDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="ORDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="ORDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color[data-s-attr="ent_type"][data-s-attr-value="CARDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-text[data-s-attr="ent_type"][data-s-attr-value="CARDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr-color-border[data-s-attr="ent_type"][data-s-attr-value="CARDINAL"] {
+  background-color: #bbb !important;
+}
+
+.s-attr .p-attr {
+  background-color: inherit;
+}

app/static/css/s-attr-colors.css

@@ -0,0 +1,87 @@
+[data-s-attr="ent_type"][data-s-attr-value="PERSON"] {
+  --s-attr-color: #a6e22d;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="PER"] {
+  --s-attr-color: #a6e22d;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="NORP"] {
+  --s-attr-color: #ef60b4;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="FACILITY"] {
+  --s-attr-color: #43c6fc;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="ORG"] {
+  --s-attr-color: #43c6fc;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="GPE"] {
+  --s-attr-color: #fd9720;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="LOC"] {
+  --s-attr-color: #fd9720;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="PRODUCT"] {
+  --s-attr-color: #a99dfb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="MISC"] {
+  --s-attr-color: #a99dfb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="EVENT"] {
+  --s-attr-color: #fc0;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="WORK_OF_ART"] {
+  --s-attr-color: #fc0;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="LANGUAGE"] {
+  --s-attr-color: #fc0;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="DATE"] {
+  --s-attr-color: #2fbbab;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="TIME"] {
+  --s-attr-color: #2fbbab;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="PERCENT"] {
+  --s-attr-color: #bbb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="MONEY"] {
+  --s-attr-color: #bbb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="QUANTITY"] {
+  --s-attr-color: #bbb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="ORDINAL"] {
+  --s-attr-color: #bbb;
+}
+
+[data-s-attr="ent_type"][data-s-attr-value="CARDINAL"] {
+  --s-attr-color: #bbb;
+}
+
+.s-attr-color {
+  background-color: var(--s-attr-color) !important;
+}
+
+.s-attr-color-border {
+  border-color: var(--s-attr-color) !important;
+}
+
+.s-attr-color-text {
+  color: var(--s-attr-color) !important;
+}

app/static/css/service-colors.css

@@ -0,0 +1,65 @@
+[data-service="file-setup-pipeline"] {
+  --service-color:          #d5dc95;
+  --service-color-lighten:  #f2f3e1;
+  --service-color-darken:   #a1b300;
+}
+
+[data-service="tesseract-ocr-pipeline"] {
+  --service-color:          #a9d8c8;
+  --service-color-lighten:  #e7f4f1;
+  --service-color-darken:   #00a58b;
+}
+
+[data-service="transkribus-htr-pipeline"] {
+  --service-color:          #607d8b;
+  --service-color-lighten:  #cfd8dc;
+  --service-color-darken:   #37474f;
+}
+
+[data-service="spacy-nlp-pipeline"] {
+  --service-color:          #98acd2;
+  --service-color-lighten:  #e5e8f5;
+  --service-color-darken:   #0064a3;
+}
+
+[data-service="corpus-analysis"] {
+  --service-color:          #aa9cc9;
+  --service-color-lighten:  #ebe8f6;
+  --service-color-darken:   #6b3f89;
+}
+
+.service-color {
+  background-color: var(--service-color) !important;
+
+  &.lighten {
+    background-color: var(--service-color-lighten) !important;
+  }
+
+  &.darken {
+    background-color: var(--service-color-darken) !important;
+  }
+}
+
+.service-color-border {
+  border-color: var(--service-color) !important;
+
+  &.border-lighten {
+    border-color: var(--service-color-lighten) !important;
+  }
+
+  &.border-darken {
+    border-color: var(--service-color-darken) !important;
+  }
+}
+
+.service-color-text {
+  color: var(--service-color) !important;
+
+  &.text-lighten {
+    color: var(--service-color-lighten) !important;
+  }
+
+  &.text-darken {
+    color: var(--service-color-darken) !important;
+  }
+}

app/static/css/service-icons.css

@@ -0,0 +1,25 @@
+[data-service="file-setup-pipeline"] {
+  --service-icon-content: "E";
+}
+
+[data-service="tesseract-ocr-pipeline"] {
+  --service-icon-content: "F";
+}
+
+[data-service="transkribus-htr-pipeline"] {
+  --service-icon-content: "F";
+}
+
+[data-service="spacy-nlp-pipeline"] {
+  --service-icon-content: "G";
+}
+
+[data-service="corpus-analysis"] {
+  --service-icon-content: "H";
+}
+
+.nopaque-icons {
+  &.service-icons:empty::before {
+    content: var(--service-icon-content);
+  }
+}

app/static/css/spacing.css

@@ -0,0 +1,489 @@
+:root {
+  --spacing-0: 0;
+  --spacing-1: 0.25rem;
+  --spacing-2: 0.5rem;
+  --spacing-3: 0.75rem;
+  --spacing-4: 1rem;
+  --spacing-5: 1.5rem;
+  --spacing-6: 3rem;
+}
+
+.m-0 {
+  margin: var(--spacing-0) !important;
+}
+
+.mx-0 {
+  margin-left: var(--spacing-0) !important;
+  margin-right: var(--spacing-0) !important;
+}
+
+.my-0 {
+  margin-top: var(--spacing-0) !important;
+  margin-bottom: var(--spacing-0) !important;
+}
+
+.mt-0 {
+  margin-top: var(--spacing-0) !important;
+}
+
+.mr-0 {
+  margin-right: var(--spacing-0) !important;
+}
+
+.mb-0 {
+  margin-bottom: var(--spacing-0) !important;
+}
+
+.ml-0 {
+  margin-left: var(--spacing-0) !important;
+}
+
+.m-1 {
+  margin: var(--spacing-1) !important;
+}
+
+.mx-1 {
+  margin-left: var(--spacing-1) !important;
+  margin-right: var(--spacing-1) !important;
+}
+
+.my-1 {
+  margin-top: var(--spacing-1) !important;
+  margin-bottom: var(--spacing-1) !important;
+}
+
+.mt-1 {
+  margin-top: var(--spacing-1) !important;
+}
+
+.mr-1 {
+  margin-right: var(--spacing-1) !important;
+}
+
+.mb-1 {
+  margin-bottom: var(--spacing-1) !important;
+}
+
+.ml-1 {
+  margin-left: var(--spacing-1) !important;
+}
+
+.m-2 {
+  margin: var(--spacing-2) !important;
+}
+
+.mx-2 {
+  margin-left: var(--spacing-2) !important;
+  margin-right: var(--spacing-2) !important;
+}
+
+.my-2 {
+  margin-top: var(--spacing-2) !important;
+  margin-bottom: var(--spacing-2) !important;
+}
+
+.mt-2 {
+  margin-top: var(--spacing-2) !important;
+}
+
+.mr-2 {
+  margin-right: var(--spacing-2) !important;
+}
+
+.mb-2 {
+  margin-bottom: var(--spacing-2) !important;
+}
+
+.ml-2 {
+  margin-left: var(--spacing-2) !important;
+}
+
+.m-3 {
+  margin: var(--spacing-3) !important;
+}
+
+.mx-3 {
+  margin-left: var(--spacing-3) !important;
+  margin-right: var(--spacing-3) !important;
+}
+
+.my-3 {
+  margin-top: var(--spacing-3) !important;
+  margin-bottom: var(--spacing-3) !important;
+}
+
+.mt-3 {
+  margin-top: var(--spacing-3) !important;
+}
+
+.mr-3 {
+  margin-right: var(--spacing-3) !important;
+}
+
+.mb-3 {
+  margin-bottom: var(--spacing-3) !important;
+}
+
+.ml-3 {
+  margin-left: var(--spacing-3) !important;
+}
+
+.m-4 {
+  margin: var(--spacing-4) !important;
+}
+
+.mx-4 {
+  margin-left: var(--spacing-4) !important;
+  margin-right: var(--spacing-4) !important;
+}
+
+.my-4 {
+  margin-top: var(--spacing-4) !important;
+  margin-bottom: var(--spacing-4) !important;
+}
+
+.mt-4 {
+  margin-top: var(--spacing-4) !important;
+}
+
+.mr-4 {
+  margin-right: var(--spacing-4) !important;
+}
+
+.mb-4 {
+  margin-bottom: var(--spacing-4) !important;
+}
+
+.ml-4 {
+  margin-left: var(--spacing-4) !important;
+}
+
+.m-5 {
+  margin: var(--spacing-5) !important;
+}
+
+.mx-5 {
+  margin-left: var(--spacing-5) !important;
+  margin-right: var(--spacing-5) !important;
+}
+
+.my-5 {
+  margin-top: var(--spacing-5) !important;
+  margin-bottom: var(--spacing-5) !important;
+}
+
+.mt-5 {
+  margin-top: var(--spacing-5) !important;
+}
+
+.mr-5 {
+  margin-right: var(--spacing-5) !important;
+}
+
+.mb-5 {
+  margin-bottom: var(--spacing-5) !important;
+}
+
+.ml-5 {
+  margin-left: var(--spacing-5) !important;
+}
+
+.m-6 {
+  margin: var(--spacing-6) !important;
+}
+
+.mx-6 {
+  margin-left: var(--spacing-6) !important;
+  margin-right: var(--spacing-6) !important;
+}
+
+.my-6 {
+  margin-top: var(--spacing-6) !important;
+  margin-bottom: var(--spacing-6) !important;
+}
+
+.mt-6 {
+  margin-top: var(--spacing-6) !important;
+}
+
+.mr-6 {
+  margin-right: var(--spacing-6) !important;
+}
+
+.mb-6 {
+  margin-bottom: var(--spacing-6) !important;
+}
+
+.ml-6 {
+  margin-left: var(--spacing-6) !important;
+}
+
+.m-auto {
+  margin: auto !important;
+}
+
+.mx-auto {
+  margin-left: auto !important;
+  margin-right: auto !important;
+}
+
+.my-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+.mt-auto {
+  margin-top: auto !important;
+}
+
+.mr-auto {
+  margin-right: auto !important;
+}
+
+.mb-auto {
+  margin-bottom: auto !important;
+}
+
+.ml-auto {
+  margin-left: auto !important;
+}
+
+.p-0 {
+  padding: var(--spacing-0) !important;
+}
+
+.px-0 {
+  padding-left: var(--spacing-0) !important;
+  padding-right: var(--spacing-0) !important;
+}
+
+.py-0 {
+  padding-top: var(--spacing-0) !important;
+  padding-bottom: var(--spacing-0) !important;
+}
+
+.pt-0 {
+  padding-top: var(--spacing-0) !important;
+}
+
+.pr-0 {
+  padding-right: var(--spacing-0) !important;
+}
+
+.pb-0 {
+  padding-bottom: var(--spacing-0) !important;
+}
+
+.pl-0 {
+  padding-left: var(--spacing-0) !important;
+}
+
+.p-1 {
+  padding: var(--spacing-1) !important;
+}
+
+.px-1 {
+  padding-left: var(--spacing-1) !important;
+  padding-right: var(--spacing-1) !important;
+}
+
+.py-1 {
+  padding-top: var(--spacing-1) !important;
+  padding-bottom: var(--spacing-1) !important;
+}
+
+.pt-1 {
+  padding-top: var(--spacing-1) !important;
+}
+
+.pr-1 {
+  padding-right: var(--spacing-1) !important;
+}
+
+.pb-1 {
+  padding-bottom: var(--spacing-1) !important;
+}
+
+.pl-1 {
+  padding-left: var(--spacing-1) !important;
+}
+
+.p-2 {
+  padding: var(--spacing-2) !important;
+}
+
+.px-2 {
+  padding-left: var(--spacing-2) !important;
+  padding-right: var(--spacing-2) !important;
+}
+
+.py-2 {
+  padding-top: var(--spacing-2) !important;
+  padding-bottom: var(--spacing-2) !important;
+}
+
+.pt-2 {
+  padding-top: var(--spacing-2) !important;
+}
+
+.pr-2 {
+  padding-right: var(--spacing-2) !important;
+}
+
+.pb-2 {
+  padding-bottom: var(--spacing-2) !important;
+}
+
+.pl-2 {
+  padding-left: var(--spacing-2) !important;
+}
+
+.p-3 {
+  padding: var(--spacing-3) !important;
+}
+
+.px-3 {
+  padding-left: var(--spacing-3) !important;
+  padding-right: var(--spacing-3) !important;
+}
+
+.py-3 {
+  padding-top: var(--spacing-3) !important;
+  padding-bottom: var(--spacing-3) !important;
+}
+
+.pt-3 {
+  padding-top: var(--spacing-3) !important;
+}
+
+.pr-3 {
+  padding-right: var(--spacing-3) !important;
+}
+
+.pb-3 {
+  padding-bottom: var(--spacing-3) !important;
+}
+
+.pl-3 {
+  padding-left: var(--spacing-3) !important;
+}
+
+.p-4 {
+  padding: var(--spacing-4) !important;
+}
+
+.px-4 {
+  padding-left: var(--spacing-4) !important;
+  padding-right: var(--spacing-4) !important;
+}
+
+.py-4 {
+  padding-top: var(--spacing-4) !important;
+  padding-bottom: var(--spacing-4) !important;
+}
+
+.pt-4 {
+  padding-top: var(--spacing-4) !important;
+}
+
+.pr-4 {
+  padding-right: var(--spacing-4) !important;
+}
+
+.pb-4 {
+  padding-bottom: var(--spacing-4) !important;
+}
+
+.pl-4 {
+  padding-left: var(--spacing-4) !important;
+}
+
+.p-5 {
+  padding: var(--spacing-5) !important;
+}
+
+.px-5 {
+  padding-left: var(--spacing-5) !important;
+  padding-right: var(--spacing-5) !important;
+}
+
+.py-5 {
+  padding-top: var(--spacing-5) !important;
+  padding-bottom: var(--spacing-5) !important;
+}
+
+.pt-5 {
+  padding-top: var(--spacing-5) !important;
+}
+
+.pr-5 {
+  padding-right: var(--spacing-5) !important;
+}
+
+.pb-5 {
+  padding-bottom: var(--spacing-5) !important;
+}
+
+.pl-5 {
+  padding-left: var(--spacing-5) !important;
+}
+
+.p-6 {
+  padding: var(--spacing-6) !important;
+}
+
+.px-6 {
+  padding-left: var(--spacing-6) !important;
+  padding-right: var(--spacing-6) !important;
+}
+
+.py-6 {
+  padding-top: var(--spacing-6) !important;
+  padding-bottom: var(--spacing-6) !important;
+}
+
+.pt-6 {
+  padding-top: var(--spacing-6) !important;
+}
+
+.pr-6 {
+  padding-right: var(--spacing-6) !important;
+}
+
+.pb-6 {
+  padding-bottom: var(--spacing-6) !important;
+}
+
+.pl-6 {
+  padding-left: var(--spacing-6) !important;
+}
+
+.p-auto {
+  padding: auto !important;
+}
+
+.px-auto {
+  padding-left: auto !important;
+  padding-right: auto !important;
+}
+
+.py-auto {
+  padding-top: auto !important;
+  padding-bottom: auto !important;
+}
+
+.pt-auto {
+  padding-top: auto !important;
+}
+
+.pr-auto {
+  padding-right: auto !important;
+}
+
+.pb-auto {
+  padding-bottom: auto !important;
+}
+
+.pl-auto {
+  padding-left: auto !important;
+}

app/static/css/status-spinner.css

@@ -0,0 +1,9 @@
+/*
+ * changes preloader size etc. to fit visually better with the chip status
+ * indicator of jobs
+ */
+.status-spinner {
+  margin-bottom: -10px;
+  width: 30px !important;
+  height: 30px !important;
+}

app/static/css/theme-colors.css

@@ -0,0 +1,93 @@
+:root {
+  --primary-color:        #00426f;
+  --primary-color-light:  #006fbc;
+  --primary-color-dark:   #001523;
+  --secondary-color:      #00426f;  /* old value: #1a5c89 */
+  --success-color:        #4caf50;
+  --error-color:          #f44336;
+  --link-color:           #039be5;
+}
+
+.primary-color {
+  background-color: var(--primary-color) !important;
+}
+
+.primary-color-border {
+  border-color: var(--primary-color) !important;
+}
+
+.primary-color-text {
+  color: var(--primary-color) !important;
+}
+
+.primary-color.lighten {
+  background-color: var(--primary-color-light) !important;
+}
+
+.primary-color-border.border-lighten {
+  border-color: var(--primary-color-light) !important;
+}
+
+.primary-color-text.text-lighten {
+  color: var(--primary-color-light) !important;
+}
+
+.primary-color.darken {
+  background-color: var(--primary-color-dark) !important;
+}
+
+.primary-color-border.border-darken {
+  border-color: var(--primary-color-dark) !important;
+}
+
+.primary-color-text.text-darken {
+  color: var(--primary-color-dark) !important;
+}
+
+.secondary-color {
+  background-color: var(--primary-color) !important;
+}
+
+.secondary-color-border {
+  border-color: var(--primary-color) !important;
+}
+
+.secondary-color-text {
+  color: var(--primary-color) !important;
+}
+
+.success-color {
+  background-color: var(--success-color) !important;
+}
+
+.success-color-border {
+  border-color: var(--success-color) !important;
+}
+
+.success-color-text {
+  color: var(--success-color) !important;
+}
+
+.error-color {
+  background-color: var(--error-color) !important;
+}
+
+.error-color-border {
+  border-color: var(--error-color) !important;
+}
+
+.error-color-text {
+  color: var(--error-color) !important;
+}
+
+.link-color {
+  background-color: var(--link-color) !important;
+}
+
+.link-color-border {
+  border-color: var(--link-color) !important;
+}
+
+.link-color-text {
+  color: var(--link-color) !important;
+}

app/static/css/utils.css

@@ -0,0 +1,21 @@
+.clearfix::after {
+  clear: both;
+  content: "";
+  display: block;
+}
+
+.clickable {
+  cursor: pointer !important;
+}
+
+.fixed {
+  position: fixed;
+}
+
+.show-if-only-child:not(:only-child) {
+  display: none !important;
+}
+
+[draggable="true"] {
+  cursor: move !important;
+}