separate divs and add css for exceeded
This commit is contained in:
parent
c586ffb383
commit
7a49bf08d6
2 changed files with 11 additions and 2 deletions
|
@ -302,6 +302,9 @@ body > header {
|
||||||
#siteprogressbar .soFarText {
|
#siteprogressbar .soFarText {
|
||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
#siteprogressbar .exceeded {
|
||||||
|
color: var(--khaki-green);
|
||||||
|
}
|
||||||
#siteprogressbar .progress {
|
#siteprogressbar .progress {
|
||||||
background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green));
|
background: linear-gradient(var(--khaki-green), #84a377, var(--khaki-green));
|
||||||
padding-left: 0.5rem;
|
padding-left: 0.5rem;
|
||||||
|
@ -320,6 +323,11 @@ body > header {
|
||||||
border-top-right-radius: 16px;
|
border-top-right-radius: 16px;
|
||||||
border-bottom-right-radius: 16px;
|
border-bottom-right-radius: 16px;
|
||||||
}
|
}
|
||||||
|
#siteprogressbar .progress.exceeded {
|
||||||
|
border-top-right-radius: 16px;
|
||||||
|
border-bottom-right-radius: 16px;
|
||||||
|
background: linear-gradient(#84a377, var(--washed-green), #84a377);
|
||||||
|
}
|
||||||
#siteprogressbar {
|
#siteprogressbar {
|
||||||
background: linear-gradient(var(--washed-green), white, var(--washed-green));
|
background: linear-gradient(var(--washed-green), white, var(--washed-green));
|
||||||
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
box-shadow: 1px 1px 1px rgba(0,0,0,0.2);
|
||||||
|
|
|
@ -138,8 +138,9 @@
|
||||||
{% if this_match_remaining <= 0 %}
|
{% if this_match_remaining <= 0 %}
|
||||||
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px">
|
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_so_far }}px">
|
||||||
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span>
|
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{ this_match_goal|floatformat:0|intcomma }} matched!</span>
|
||||||
<div class="progress matched pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px">
|
</div>
|
||||||
<span id="site-fundraiser-match-count" class="soFarText tc w-100">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span>
|
<div class="progress exceeded pv1 b flex" style="flex-basis: {{ this_match_exceeded }}px">
|
||||||
|
<span id="site-fundraiser-match-count" class="soFarText tc w-100 exceeded">${{this_match_exceeded|floatformat:0|intcomma }} extra given!</span>
|
||||||
</div>
|
</div>
|
||||||
{% else %}
|
{% else %}
|
||||||
<div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">
|
<div class="progress pv1 b flex items-center" style="flex-basis: {{ this_match_so_far }}px">
|
||||||
|
|
Loading…
Reference in a new issue