Use two scheme colors instead of one

This commit is contained in:
Patrick Jentsch 2020-10-28 12:25:36 +01:00
parent 51110529e2
commit c305c01e55
6 changed files with 27 additions and 17 deletions

View File

@ -1,5 +1,6 @@
{% set COLORS = {'primary': '#00426f', {% set COLORS = {'primary': '#00426f',
'secondary': '#b1b3b4', 'secondary': '#1A5C89',
'footer': '#b1b3b4',
'corpus_analysis': '#aa9cc9', 'corpus_analysis': '#aa9cc9',
'corpus_analysis_darken': '#6b3f89', 'corpus_analysis_darken': '#6b3f89',
'corpus_analysis_lighten': '#ebe8f6', 'corpus_analysis_lighten': '#ebe8f6',

View File

@ -27,6 +27,8 @@
.primary-color-text {color: {{ COLORS.primary }} !important;} .primary-color-text {color: {{ COLORS.primary }} !important;}
.secondary-color {background-color: {{ COLORS.secondary }} !important;} .secondary-color {background-color: {{ COLORS.secondary }} !important;}
.secondary-color-text {color: {{ COLORS.secondary }} !important;} .secondary-color-text {color: {{ COLORS.secondary }} !important;}
.footer-color {background-color: {{ COLORS.footer }} !important;}
.footer-color-text {color: {{ COLORS.footer }} !important;}
.corpus-analysis-color {background-color: {{ COLORS.corpus_analysis }} !important;} .corpus-analysis-color {background-color: {{ COLORS.corpus_analysis }} !important;}
.corpus-analysis-color-text {color: {{ COLORS.corpus_analysis }} !important;} .corpus-analysis-color-text {color: {{ COLORS.corpus_analysis }} !important;}
@ -56,20 +58,23 @@
.nlp-color.lighten {background-color: {{ COLORS.nlp_lighten }} !important;} .nlp-color.lighten {background-color: {{ COLORS.nlp_lighten }} !important;}
.nlp-color-text.text-lighten {color: {{ COLORS.nlp_lighten }} !important;} .nlp-color-text.text-lighten {color: {{ COLORS.nlp_lighten }} !important;}
{% if scheme_color is not defined %} {% if scheme_primary_color is not defined %}
{% set scheme_color = COLORS.primary %} {% set scheme_primary_color = COLORS.primary %}
{% endif %} {% endif %}
main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ scheme_color }};} {% if scheme_secondary_color is not defined %}
main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ scheme_color }}; filter: brightness(133%);} {% set scheme_secondary_color = COLORS.secondary %}
main .pagination li.active {background-color: {{ scheme_color }};} {% endif %}
main .table-of-contents a.active {border-color: {{ scheme_color }};} main .btn, main .btn-small, main .btn-large, main .btn-floating {background-color: {{ scheme_primary_color }};}
main .btn:hover, main .btn-large:hover, main .btn-small:hover, main .btn-floating:hover {background-color: {{ scheme_secondary_color }};}
main .pagination li.active {background-color: {{ scheme_primary_color }};}
main .table-of-contents a.active {border-color: {{ scheme_primary_color }};}
main .tabs .tab a {color: inherit;} main .tabs .tab a {color: inherit;}
main .tabs .tab a:hover {color: {{ scheme_color }};} main .tabs .tab a:hover {color: {{ scheme_primary_color }};}
main .tabs .tab a.active, .tabs .tab a:focus.active { main .tabs .tab a.active, .tabs .tab a:focus.active {
color: {{ scheme_color }}; color: {{ scheme_primary_color }};
background-color: {{ scheme_color }}28; background-color: {{ scheme_primary_color }}28;
} }
main .tabs .indicator {background-color: {{ scheme_color }};} main .tabs .indicator {background-color: {{ scheme_primary_color }};}
</style> </style>
{% endblock styles %} {% endblock styles %}
@ -93,7 +98,7 @@
{% endif %} {% endif %}
</ul> </ul>
</div> </div>
<div class="nav-content primary-color" style="filter: brightness(120%);"> <div class="nav-content secondary-color">
{% block nav_content %}{% endblock nav_content %} {% block nav_content %}{% endblock nav_content %}
</div> </div>
</nav> </nav>
@ -149,7 +154,7 @@
{% block page_content %}{% endblock page_content %} {% block page_content %}{% endblock page_content %}
{% endblock main %} {% endblock main %}
{% block footer_attribs %} class="page-footer secondary-color"{% endblock footer_attribs %} {% block footer_attribs %} class="page-footer footer-color"{% endblock footer_attribs %}
{% block footer %} {% block footer %}
<div class="container"> <div class="container">

View File

@ -1,7 +1,8 @@
{% extends "nopaque.html.j2" %} {% extends "nopaque.html.j2" %}
{% from '_constants.html.j2' import COLORS %} {% from '_constants.html.j2' import COLORS %}
{% set scheme_color = COLORS.corpus_analysis_darken %} {% set scheme_primary_color = COLORS.corpus_analysis_darken %}
{% set scheme_secondary_color = COLORS.corpus_analysis %}
{% block nav_content %} {% block nav_content %}
{% include 'services/_nav_content.html.j2' %} {% include 'services/_nav_content.html.j2' %}

View File

@ -2,7 +2,8 @@
{% import 'materialize/wtf.html.j2' as wtf %} {% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %} {% from '_constants.html.j2' import COLORS %}
{% set scheme_color = COLORS.file_setup_darken %} {% set scheme_primary_color = COLORS.file_setup_darken %}
{% set scheme_secondary_color = COLORS.file_setup %}
{% block nav_content %} {% block nav_content %}
{% include 'services/_nav_content.html.j2' %} {% include 'services/_nav_content.html.j2' %}

View File

@ -2,7 +2,8 @@
{% import 'materialize/wtf.html.j2' as wtf %} {% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %} {% from '_constants.html.j2' import COLORS %}
{% set scheme_color = COLORS.nlp_darken %} {% set scheme_primary_color = COLORS.nlp_darken %}
{% set scheme_secondary_color = COLORS.nlp %}
{% block nav_content %} {% block nav_content %}
{% include 'services/_nav_content.html.j2' %} {% include 'services/_nav_content.html.j2' %}

View File

@ -2,7 +2,8 @@
{% import 'materialize/wtf.html.j2' as wtf %} {% import 'materialize/wtf.html.j2' as wtf %}
{% from '_constants.html.j2' import COLORS %} {% from '_constants.html.j2' import COLORS %}
{% set scheme_color = COLORS.ocr_darken %} {% set scheme_primary_color = COLORS.ocr_darken %}
{% set scheme_secondary_color = COLORS.ocr %}
{% block nav_content %} {% block nav_content %}
{% include 'services/_nav_content.html.j2' %} {% include 'services/_nav_content.html.j2' %}