diff --git a/app/templates/_colors.html.j2 b/app/templates/_colors.html.j2 index 04301c86bb0dfc5293c11bb3b9c2f326854c9f21..84715cbe5268de1e0c788b8aa67b1ea6dfe97bfe 100644 --- a/app/templates/_colors.html.j2 +++ b/app/templates/_colors.html.j2 @@ -1,31 +1,45 @@ -{% set primary = '#00426f' %} -{% set primary_variant = '#1A5C89' %} -{% set secondary = '#00426f' %} -{% set secondary_variant = '#1A5C89' %} -{% set background = '#ffffff' %} -{% set surface = '#ffffff' %} -{% set error = '#b00020' %} +{% set baseline = { + 'primary': '#00426f', + 'primary_variant': '#1A5C89', + 'secondary': '#00426f', + 'secondary_variant': '#1A5C89', + 'background': '#ffffff', + 'surface': '#ffffff', + 'error': '#b00020' +} %} -{% set service_corpus_analysis = '#aa9cc9' %} -{% set service_corpus_analysis_darken = '#6b3f89' %} -{% set service_corpus_analysis_lighten = '#ebe8f6' %} -{% set service_file_setup = '#d5dc95' %} -{% set service_file_setup_darken = '#a1b300' %} -{% set service_file_setup_lighten = '#f2f3e1' %} -{% set service_nlp = '#98acd2' %} -{% set service_nlp_darken = '#0064a3' %} -{% set service_nlp_lighten = '#e5e8f5' %} -{% set service_ocr = '#a9d8c8' %} -{% set service_ocr_darken = '#00a58b' %} -{% set service_ocr_lighten = '#e7f4f1' %} +{% set services = { + 'corpus-analysis': { + 'base': '#aa9cc9', + 'darken': '#6b3f89', + 'lighten': '#ebe8f6' + }, + 'file-setup': { + 'base': '#d5dc95', + 'darken': '#a1b300', + 'lighten': '#f2f3e1' + }, + 'nlp': { + 'base': '#98acd2', + 'darken': '#0064a3', + 'lighten': '#e5e8f5' + }, + 'ocr': { + 'base': '#a9d8c8', + 'darken': '#00a58b', + 'lighten': '#e7f4f1' + } +} %} -{% set status_unprepared = '#9e9e9e' %} -{% set status_submitted = '#9e9e9e' %} -{% set status_queued = '#2196f3' %} -{% set status_running = '#ffc107' %} -{% set status_complete = '#4caf50' %} -{% set status_failed = '#f44336' %} -{% set status_prepared = '#4caf50' %} -{% set status_start_analysis = '#2196f3' %} -{% set status_analysing = '#4caf50' %} -{% set status_stop_analysis = '#ff5722' %} +{% set status = { + 'unprepared': '#9e9e9e', + 'submitted': '#9e9e9e', + 'queued': '#2196f3', + 'running': '#ffc107', + 'complete': '#4caf50', + 'failed': '#f44336', + 'prepared': '#4caf50', + 'start analysis': '#2196f3', + 'analysing': '#4caf50', + 'stop analysis': '#ff5722' +} %} diff --git a/app/templates/_styles.html.j2 b/app/templates/_styles.html.j2 index 54466a47f21dfbdceaa89e5dd47180413de9b15d..d94765decb4642636621d2badc61b5d567d965fc 100644 --- a/app/templates/_styles.html.j2 +++ b/app/templates/_styles.html.j2 @@ -8,76 +8,66 @@ <link href="{{ url_for('static', filename='css/materialize_fixes.css') }}" media="screen,projection" rel="stylesheet"> <link href="{{ url_for('static', filename='css/nopaque.css') }}" media="screen,projection" rel="stylesheet"> <style> - .primary-color {background-color: {{ colors['primary'] }} !important;} - .primary-color-border {border-color: {{ colors['primary'] }} !important;} - .primary-color-text {color: {{ colors['primary'] }} !important;} - .primary-variant-color {background-color: {{ colors['primary_variant'] }} !important;} - .primary-variant-color-border {border-color: {{ colors['primary_variant'] }} !important;} - .primary-variant-color-text {color: {{ colors['primary_variant'] }} !important;} + .primary-color {background-color: {{ colors['baseline']['primary'] }} !important;} + .primary-color-border {border-color: {{ colors['baseline']['primary'] }} !important;} + .primary-color-text {color: {{ colors['baseline']['primary'] }} !important;} + .primary-variant-color {background-color: {{ colors['baseline']['primary_variant'] }} !important;} + .primary-variant-color-border {border-color: {{ colors['baseline']['primary_variant'] }} !important;} + .primary-variant-color-text {color: {{ colors['baseline']['primary_variant'] }} !important;} - .secondary-color {background-color: {{ colors['secondary'] }} !important;} - .secondary-color-border {border-color: {{ colors['secondary'] }} !important;} - .secondary-color-text {color: {{ colors['secondary'] }} !important;} - .secondary-variant-color {background-color: {{ colors['secondary_variant'] }} !important;} - .secondary-variant-color-border {border-color: {{ colors['secondary_variant'] }} !important;} - .secondary-variant-color-text {color: {{ colors['secondary_variant'] }} !important;} + .secondary-color {background-color: {{ colors['baseline']['secondary'] }} !important;} + .secondary-color-border {border-color: {{ colors['baseline']['secondary'] }} !important;} + .secondary-color-text {color: {{ colors['baseline']['secondary'] }} !important;} + .secondary-variant-color {background-color: {{ colors['baseline']['secondary_variant'] }} !important;} + .secondary-variant-color-border {border-color: {{ colors['baseline']['secondary_variant'] }} !important;} + .secondary-variant-color-text {color: {{ colors['baseline']['secondary_variant'] }} !important;} - .background-color {background-color: {{ colors['background'] }} !important;} - .background-color-border {border-color: {{ colors['background'] }} !important;} - .background-color-text {color: {{ colors['background'] }} !important;} + .background-color {background-color: {{ colors['baseline']['background'] }} !important;} + .background-color-border {border-color: {{ colors['baseline']['background'] }} !important;} + .background-color-text {color: {{ colors['baseline']['background'] }} !important;} - .surface-color {background-color: {{ colors['surface'] }} !important;} - .surface-color-border {border-color: {{ colors['surface'] }} !important;} - .surface-color-text {color: {{ colors['surface'] }} !important;} + .surface-color {background-color: {{ colors['baseline']['surface'] }} !important;} + .surface-color-border {border-color: {{ colors['baseline']['surface'] }} !important;} + .surface-color-text {color: {{ colors['baseline']['surface'] }} !important;} - .error-color {background-color: {{ colors['error'] }} !important;} - .error-color-border {border-color: {{ colors['error'] }} !important;} - .error-color-text {color: {{ colors['error'] }} !important;} + .error-color {background-color: {{ colors['baseline']['error'] }} !important;} + .error-color-border {border-color: {{ colors['baseline']['error'] }} !important;} + .error-color-text {color: {{ colors['baseline']['error'] }} !important;} - main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ colors['secondary'] }};} - main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ colors['secondary_variant'] }};} - main .pagination li.active {background-color: {{ colors['secondary'] }};} - main .table-of-contents a.active {border-color: {{ colors['secondary'] }};} + main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ colors['baseline']['secondary'] }};} + main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ colors['baseline']['secondary_variant'] }};} + main .pagination li.active {background-color: {{ colors['baseline']['secondary'] }};} + main .table-of-contents a.active {border-color: {{ colors['baseline']['secondary'] }};} main .tabs .tab a {color: inherit;} - main .tabs .tab.disabled a, main .tabs .tab.disabled a:hover {color: {{ colors['secondary'] }}28;} - main .tabs .tab a:hover {color: {{ colors['secondary'] }};} - main .tabs .tab a.active, main .tabs .tab a:focus.active {color: {{ colors['secondary'] }}; background-color: {{ colors['secondary'] }}28;} - main .tabs .indicator {background-color: {{ colors['secondary'] }};} + main .tabs .tab.disabled a, main .tabs .tab.disabled a:hover {color: {{ colors['baseline']['secondary'] }}28;} + main .tabs .tab a:hover {color: {{ colors['baseline']['secondary'] }};} + main .tabs .tab a.active, main .tabs .tab a:focus.active {color: {{ colors['baseline']['secondary'] }}; background-color: {{ colors['baseline']['secondary'] }}28;} + main .tabs .indicator {background-color: {{ colors['baseline']['secondary'] }};} - {% for service in ['file-setup', 'ocr', 'nlp', 'corpus-analysis'] %} - {% set service_color = colors['service_' + service.replace('-', '_')] %} - {% set service_color_darken = colors['service_' + service.replace('-', '_') + '_darken'] %} - {% set service_color_lighten = colors['service_' + service.replace('-', '_') + '_lighten'] %} - .service-scheme[data-service="{{ service }}"] {background-color: {{ service_color_lighten }};} - .service-scheme[data-service="{{ service }}"] .btn, .service-scheme[data-service="{{ service }}"] .btn-small, .service-scheme[data-service="{{ service }}"] .btn-large, .service-scheme[data-service="{{ service }}"] .btn-floating {background-color: {{ service_color_darken }};} - .service-scheme[data-service="{{ service }}"] .btn:hover, .service-scheme[data-service="{{ service }}"] .btn-large:hover, .service-scheme[data-service="{{ service }}"] .btn-small:hover, .service-scheme[data-service="{{ service }}"] .btn-floating:hover {background-color: {{ service_color }};} - .service-scheme[data-service="{{ service }}"] .pagination li.active {background-color: {{ service_color_darken }};} - .service-scheme[data-service="{{ service }}"] .table-of-contents a.active {border-color: {{ service_color_darken }};} + {% for service in colors['services'] %} + .service-scheme[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['lighten'] }};} + .service-scheme[data-service="{{ service }}"] .btn, .service-scheme[data-service="{{ service }}"] .btn-small, .service-scheme[data-service="{{ service }}"] .btn-large, .service-scheme[data-service="{{ service }}"] .btn-floating {background-color: {{ colors['services'][service]['darken'] }};} + .service-scheme[data-service="{{ service }}"] .btn:hover, .service-scheme[data-service="{{ service }}"] .btn-large:hover, .service-scheme[data-service="{{ service }}"] .btn-small:hover, .service-scheme[data-service="{{ service }}"] .btn-floating:hover {background-color: {{ colors['services'][service]['base'] }};} + .service-scheme[data-service="{{ service }}"] .pagination li.active {background-color: {{ colors['services'][service]['darken'] }};} + .service-scheme[data-service="{{ service }}"] .table-of-contents a.active {border-color: {{ colors['services'][service]['darken'] }};} .service-scheme[data-service="{{ service }}"] .tabs .tab a {color: inherit;} - .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a, .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a:hover {color: {{ service_color_darken }}28;} - .service-scheme[data-service="{{ service }}"] .tabs .tab a:hover {color: {{ service_color_darken }};} - .service-scheme[data-service="{{ service }}"] .tabs .tab a.active, .service-scheme[data-service="{{ service }}"] .tabs .tab a:focus.active {color: {{ service_color_darken }}; background-color: {{ service_color_darken }}28;} - .service-scheme[data-service="{{ service }}"] .tabs .indicator {background-color: {{ service_color_darken }};} + .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a, .service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a:hover {color: {{ colors['services'][service]['darken'] }}28;} + .service-scheme[data-service="{{ service }}"] .tabs .tab a:hover {color: {{ colors['services'][service]['darken'] }};} + .service-scheme[data-service="{{ service }}"] .tabs .tab a.active, .service-scheme[data-service="{{ service }}"] .tabs .tab a:focus.active {color: {{ colors['services'][service]['darken'] }}; background-color: {{ colors['services'][service]['darken'] }}28;} + .service-scheme[data-service="{{ service }}"] .tabs .indicator {background-color: {{ colors['services'][service]['darken'] }};} - .service-color[data-service="{{ service }}"] {background-color: {{ service_color }} !important;} - .service-color-text[data-service="{{ service }}"] {color: {{ service_color }} !important;} - .service-color-border[data-service="{{ service }}"] {border-color: {{ service_color }} !important;} - .service-color[data-service="{{ service }}"].darken {background-color: {{ service_color_darken }} !important;} - .service-color-text[data-service="{{ service }}"].text-darken {color: {{ service_color_darken }} !important;} - .service-color-border[data-service="{{ service }}"].border-darken {border-color: {{ service_color_darken }} !important;} - .service-color[data-service="{{ service }}"].lighten {background-color: {{ service_color_lighten }} !important;} - .service-color-text[data-service="{{ service }}"].text-lighten {color: {{ service_color_lighten }} !important;} - .service-color-border[data-service="{{ service }}"].border-lighten {border-color: {{ service_color_lighten }} !important;} + .service-color[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['base'] }} !important;} + .service-color-text[data-service="{{ service }}"] {color: {{ colors['services'][service]['base'] }} !important;} + .service-color-border[data-service="{{ service }}"] {border-color: {{ colors['services'][service]['base'] }} !important;} + .service-color[data-service="{{ service }}"].darken {background-color: {{ colors['services'][service]['darken'] }} !important;} + .service-color-text[data-service="{{ service }}"].text-darken {color: {{ colors['services'][service]['darken'] }} !important;} + .service-color-border[data-service="{{ service }}"].border-darken {border-color: {{ colors['services'][service]['darken'] }} !important;} + .service-color[data-service="{{ service }}"].lighten {background-color: {{ colors['services'][service]['lighten'] }} !important;} + .service-color-text[data-service="{{ service }}"].text-lighten {color: {{ colors['services'][service]['lighten'] }} !important;} + .service-color-border[data-service="{{ service }}"].border-lighten {border-color: {{ colors['services'][service]['lighten'] }} !important;} {% endfor %} - .status-color[data-status="unprepared"] {background-color: {{ colors.status_unprepared }} !important;} - .status-color[data-status="submitted"] {background-color: {{ colors.status_submitted }} !important;} - .status-color[data-status="queued"] {background-color: {{ colors.status_queued }} !important;} - .status-color[data-status="running"] {background-color: {{ colors.status_running }} !important;} - .status-color[data-status="complete"] {background-color: {{ colors.status_complete }} !important;} - .status-color[data-status="failed"] {background-color: {{ colors.status_failed }} !important;} - .status-color[data-status="prepared"] {background-color: {{ colors.status_prepared }} !important;} - .status-color[data-status="start analysis"] {background-color: {{ colors.status_start_analysis }} !important;} - .status-color[data-status="analysing"] {background-color: {{ colors.status_analysing }} !important;} - .status-color[data-status="stop analysis"] {background-color: {{ colors.status_stop_analysis }} !important;} + {% for status in colors['status'] %} + .status-color[data-status="{{ status }}"] {background-color: {{ colors['status'][status] }} !important;} + {% endfor %} </style> diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2 index 747f7dfb4e01655da05ca780516cf266278e0b2f..123d7eb60bbe2f96728e5daa43d489bf928ab6f4 100644 --- a/app/templates/base.html.j2 +++ b/app/templates/base.html.j2 @@ -1,5 +1,4 @@ {% extends "materialize/base.html.j2" %} -{% import "_colors.html.j2" as colors %} {% block html_attribs %} lang="en"{% endblock html_attribs %}