sporada/nopaque
1
0
Fork 0
mirror of https://gitlab.ub.uni-bielefeld.de/sfb1288inf/nopaque.git synced 2024-11-14 16:55:42 +00:00
Code Issues Projects Releases Wiki Activity

Simplify color setup in templates

Browse Source
This commit is contained in:
Patrick Jentsch 2021-08-04 09:07:18 +02:00
parent 468b079d63
commit ec7a88f36e
3 changed files with 94 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
app/templates/_colors.html.j2
View File

@ -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'
} %}

112
app/templates/_styles.html.j2
View File

@ -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>

1
app/templates/base.html.j2
View File

@ -1,5 +1,4 @@
{% extends "materialize/base.html.j2" %}
{% import "_colors.html.j2" as colors %}
{% block html_attribs %} lang="en"{% endblock html_attribs %}