nopaque/app/templates/_styles.html.j2

76 lines
6.9 KiB
Django/Jinja

{% import "_colors.html.j2" as colors %}
{% if current_user.is_authenticated %}
<link href="{{ url_for('static', filename='css/sidenav_fixed.css') }}" media="screen,projection" rel="stylesheet">
{% endif %}
<link href="{{ url_for('static', filename='css/nopaque_icons.css') }}" media="screen,projection" rel="stylesheet">
<link href="{{ url_for('static', filename='css/sticky_footer.css') }}" media="screen,projection" rel="stylesheet">
<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['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['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['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['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['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['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['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 colors['services'] %}
.nopaque-service-scheme[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['lighten'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .btn, .nopaque-service-scheme[data-service="{{ service }}"] .btn-small, .nopaque-service-scheme[data-service="{{ service }}"] .btn-large, .nopaque-service-scheme[data-service="{{ service }}"] .btn-floating {background-color: {{ colors['services'][service]['darken'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .btn:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-large:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-small:hover, .nopaque-service-scheme[data-service="{{ service }}"] .btn-floating:hover {background-color: {{ colors['services'][service]['base'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .pagination li.active {background-color: {{ colors['services'][service]['darken'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .table-of-contents a.active {border-color: {{ colors['services'][service]['darken'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a {color: inherit;}
.nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a, .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab.disabled a:hover {color: {{ colors['services'][service]['darken'] }}28;}
.nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a:hover {color: {{ colors['services'][service]['darken'] }};}
.nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a.active, .nopaque-service-scheme[data-service="{{ service }}"] .tabs .tab a:focus.active {color: {{ colors['services'][service]['darken'] }}; background-color: {{ colors['services'][service]['darken'] }}28;}
.nopaque-service-scheme[data-service="{{ service }}"] .tabs .indicator {background-color: {{ colors['services'][service]['darken'] }};}
.nopaque-service-color[data-service="{{ service }}"] {background-color: {{ colors['services'][service]['base'] }} !important;}
.nopaque-service-color-text[data-service="{{ service }}"] {color: {{ colors['services'][service]['base'] }} !important;}
.nopaque-service-color-border[data-service="{{ service }}"] {border-color: {{ colors['services'][service]['base'] }} !important;}
.nopaque-service-color[data-service="{{ service }}"].darken {background-color: {{ colors['services'][service]['darken'] }} !important;}
.nopaque-service-color-text[data-service="{{ service }}"].text-darken {color: {{ colors['services'][service]['darken'] }} !important;}
.nopaque-service-color-border[data-service="{{ service }}"].border-darken {border-color: {{ colors['services'][service]['darken'] }} !important;}
.nopaque-service-color[data-service="{{ service }}"].lighten {background-color: {{ colors['services'][service]['lighten'] }} !important;}
.nopaque-service-color-text[data-service="{{ service }}"].text-lighten {color: {{ colors['services'][service]['lighten'] }} !important;}
.nopaque-service-color-border[data-service="{{ service }}"].border-lighten {border-color: {{ colors['services'][service]['lighten'] }} !important;}
{% endfor %}
{% for status_type in colors['status'] %}
{% for status in colors['status'][status_type] %}
.nopaque-{{ status_type }}-status-color[data-{{status_type}}-status="{{ status }}"] {background-color: {{ colors['status'][status_type][status] }} !important;}
{% endfor %}
{% endfor %}
</style>