Added/Cleanup coloured css elements
All checks were successful
buildbot/django-dav-events--test Build done.

This commit is contained in:
2023-03-05 18:22:10 +01:00
parent 3cd82a30b5
commit 8c36b86cbc
3 changed files with 103 additions and 103 deletions

View File

@@ -1,18 +1,20 @@
/*
* Colors
* color text focus bg focus btn focus border focus active function
* orange #f07d00 #bd6200 #f07d00 #bd6200 #f07d00 #bd6200 #d77000 #572d00 #995000 primary
* green #3c763d #2b542c #dff0d8 #c1e2b3 #58ab27 #43811e #4d9622 #182e0b #346417 success
* blue #31708f #245269 #d9edf7 #afd9ee #1d70b7 #16558b #1a63a1 #081f33 #11426c info
* yellow #8a6d3b #66512c #fcf8e3 #f7ecb5 #f9b000 #c68c00 #e09e00 #604400 #a27300 warning, Klettern
* red #a94442 #843534 #f2dede #e4b9b9 #be1621 #901119 #a7131d #350609 #700d14 danger
* mandarin #b43a12 #902c0e #f0ded8 #e1bcb0 #e84e1b #b43a12 #aa3711 #3c1306 #78250c
* lime #859201 #656e01 #eef0d8 #dde1b0 #bccf07 #859201 #7c8801 #2e3200 #4f5601 Bergsteigen
* cyan #54bbd9 #469db5 #d8ebf0 #a7d5e1 #86cfe4 #54bbd9 #4cb8d7 #17343c #3a8ea5 Ski
* caramel #9c5b22 #78461a #f0e3d8 #e1c6b0 #ce792d #9c5b22 #935720 #3c230d #613915 Wanderung
* purple #866dac #566088 #e1d8f0 #c2b0e1 #a694c2 #866dac #8067a8 #2f263c #5a4876 Mountainbike
* plum #a068a0 #784e78 #ebd4eb #dcb1dc #be91be #906e90 #a780a7 #352935 #705670 family
* brown #??? #??? #??? #??? #925f36 #??? #??? #??? #???
* color text focus bg focus btn focus border focus active function sport level status
* orange #f07d00 #bd6200 #f07d00 #bd6200 #f07d00 #bd6200 #d77000 #572d00 #995000 primary ----- ----- ------
* green #3c763d #2b542c #dff0d8 #c1e2b3 #58ab27 #43811e #4d9622 #182e0b #346417 success ----- ----- publis
* blue #31708f #245269 #d9edf7 #afd9ee #1d70b7 #16558b #1a63a1 #081f33 #11426c info -- ----- ----- draft
* yellow #8a6d3b #66512c #fcf8e3 #f7ecb5 #f9b000 #c68c00 #e09e00 #604400 #a27300 warning Klett ----- accept
* red #a94442 #843534 #f2dede #e4b9b9 #be1621 #901119 #a7131d #350609 #700d14 danger ----- ----- submit
* mandarin #b43a12 #902c0e #f0ded8 #e1bcb0 #e84e1b #b43a12 #aa3711 #3c1306 #78250c -------- ----- advan cancel
* lime #859201 #656e01 #eef0d8 #dde1b0 #bccf07 #859201 #7c8801 #2e3200 #4f5601 -------- Bergs ----- done -
* cyan #54bbd9 #469db5 #d8ebf0 #a7d5e1 #86cfe4 #54bbd9 #4cb8d7 #17343c #3a8ea5 -------- Ski - ----- ------
* caramel #9c5b22 #78461a #f0e3d8 #e1c6b0 #ce792d #9c5b22 #935720 #3c230d #613915 -------- Wande ----- ------
* purple #866dac #566088 #e1d8f0 #c2b0e1 #a694c2 #866dac #8067a8 #2f263c #5a4876 -------- MTB - ----- ------
* plum #a068a0 #784e78 #ebd4eb #dcb1dc #be91be #906e90 #a780a7 #352935 #705670 -------- ----- famil ------
* brown #??? #??? #??? #??? #925f36 #??? #??? #??? #??? -------- ----- ----- ------
* black #??? #??? #??? #??? #??? #??? #??? #??? #??? -------- ----- ----- clear
* white #??? #??? #??? #??? #??? #??? #??? #??? #??? -------- ----- ----- ------
*/
/*
@@ -178,111 +180,25 @@ a.text-default:hover, a.text-default:focus {
/*
* We need more text colors (for event stati)
* TODO: we try to replace this with dedicated status elements
*/
.text-dav-purple {
color: #866dac;
}
.text-dav-lime {
color: #859201;
}
.text-dav-cyan {
color: #54bbd9;
}
.text-dav-caramel {
color: #9c5b22;
}
.text-dav-mandarin {
color: #b43a12;
}
/*
* We need more label colors (for event stati)
* TODO: we try to replace this with dedicated status elements
*/
.label-black {
background-color: #333;
}
.label-dav-purple {
background-color: #a694c2;
}
.label-dav-lime {
background-color: #bccf07;
}
.label-dav-cyan {
background-color: #86cfe4;
}
.label-dav-caramel {
background-color: #ce792d;
}
.label-dav-mandarin {
background-color: #e84e1b;
}
.label-dav-brown {
background-color: #925f36;
}
/*
* We need more button colors (for event stati)
*/
.btn-black {
background-color: #333;
border-color: #ccc;
color: #fff;
}
.btn-black.focus, .btn-black:focus, .btn-black:hover {
background-color: #555;
border-color: #ccc;
color: #fff;
}
.btn-dav-purple {
background-color: #a694c2;
border-color: #8067a8;
color: #fff;
}
.btn-dav-purple.focus, .btn-dav-purple:focus, .btn-dav-purple:hover {
background-color: #866dac;
border-color: #8067a8;
color: #fff;
}
.btn-dav-lime {
background-color: #bccf07;
border-color: #7c8801;
color: #fff;
}
.btn-dav-lime.focus, .btn-dav-lime:focus, .btn-dav-lime:hover {
background-color: #859201;
border-color: #7c8801;
color: #fff;
}
.btn-dav-cyan {
background-color: #86cfe4;
border-color: #4cb8d7;
color: #fff;
}
.btn-dav-cyan.focus, .btn-dav-cyan:focus, .btn-dav-cyan:hover {
background-color: #54bbd9;
border-color: #4cb8d7;
color: #fff;
}
.btn-dav-caramel {
background-color: #ce792d;
border-color: #935720;
color: #fff;
}
.btn-dav-caramel.focus, .btn-dav-caramel:focus, .btn-dav-caramel:hover {
background-color: #9c5b22;
border-color: #935720;
color: #fff;
}
.btn-dav-mandarin {
background-color: #e84e1b;
border-color: #aa3711;
color: #fff;
}
.btn-dav-mandarin.focus, .btn-dav-mandarin:focus, .btn-dav-mandarin:hover {
background-color: #b43a12;
border-color: #aa3711;
color: #fff;
}
/*
* Elements for sport choices
@@ -392,6 +308,13 @@ a.text-default:hover, a.text-default:focus {
/*
* Coloured Elements (Buttons, Labels) for universal use
*/
.text-orange {
color: #f07d00;
}
.bg-orange {
color: #fff;
background-color: #f07d00;
}
.label-orange {
background-color: #f07d00;
}
@@ -405,6 +328,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #572d00;
color: #fff;
}
.text-green {
color: #3c763d;
}
.bg-green {
background-color: #dff0d8;
}
.label-green {
background-color: #58ab27;
}
@@ -418,6 +347,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #182e0b;
color: #fff;
}
.text-blue {
color: #31708f;
}
.bg-blue {
background-color: #d9edf7;
}
.label-blue {
background-color: #1d70b7;
}
@@ -431,6 +366,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #081f33;
color: #fff;
}
.text-yellow {
color: #8a6d3b;
}
.bg-yellow {
background-color: #fcf8e3;
}
.label-yellow {
background-color: #f9b000;
}
@@ -444,6 +385,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #604400;
color: #fff;
}
.text-red {
color: #a94442;
}
.bg-red {
background-color: #f2dede;
}
.label-red {
background-color: #be1621;
}
@@ -457,6 +404,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #350609;
color: #fff;
}
.text-mandarin {
color: #b43a12;
}
.bg-mandarin {
background-color: #f0ded8;
}
.label-mandarin {
background-color: #e84e1b;
}
@@ -470,6 +423,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #3c1306;
color: #fff;
}
.text-lime {
color: #859201;
}
.bg-lime {
background-color: #eef0d8;
}
.label-lime {
background-color: #bccf07;
}
@@ -483,6 +442,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #2e3200;
color: #fff;
}
.text-cyan {
color: #54bbd9;
}
.bg-cyan {
background-color: #d8ebf0;
}
.label-cyan {
background-color: #86cfe4;
}
@@ -496,6 +461,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #17343c;
color: #fff;
}
.text-caramel {
color: #9c5b22;
}
.bg-caramel {
background-color: #f0e3d8;
}
.label-caramel {
background-color: #ce792d;
}
@@ -509,6 +480,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #3c230d;
color: #fff;
}
.text-purple {
color: #866dac;
}
.bg-purple {
background-color: #e1d8f0;
}
.label-purple {
background-color: #a694c2;
}
@@ -522,6 +499,12 @@ a.text-default:hover, a.text-default:focus {
border-color: #2f263c;
color: #fff;
}
.text-plum {
color: #a068a0;
}
.bg-plum {
background-color: #ebd4eb;
}
.label-plum {
background-color: #be91be;
}
@@ -536,6 +519,22 @@ a.text-default:hover, a.text-default:focus {
color: #fff;
}
.text-black {
color: #333;
}
.label-black {
background-color: #333;
}
.btn-black {
background-color: #333;
border-color: #ccc;
color: #fff;
}
.btn-black.focus, .btn-black:focus, .btn-black:hover {
background-color: #555;
border-color: #ccc;
color: #fff;
}
.btn-white {
background-color: #fff;
border-color: #ccc;

View File

@@ -81,6 +81,7 @@
<p class="text-blue"><span class="label label-blue">text-blue</span> {% lorem %}</p>
<p class="text-yellow"><span class="label label-yellow">text-yellow</span> {% lorem %}</p>
<p class="text-red"><span class="label label-red">text-red</span> {% lorem %}</p>
<p class="text-black"><span class="label label-black">text-black</span> {% lorem %}</p>
<p class="text-mandarin"><span class="label label-mandarin">text-mandarin</span> {% lorem %}</p>
<p class="text-lime"><span class="label label-lime">text-lime</span> {% lorem %}</p>
<p class="text-cyan"><span class="label label-cyan">text-cyan</span> {% lorem %}</p>

View File

@@ -147,7 +147,7 @@
</a>
{% endif %}
{% if has_permission_realize and is_started and not is_canceled %}
<a id="btn-realize" class="btn btn-sm {% if not is_realized %}btn-dav-lime{% else %}btn-default disabled{% endif %}"
<a id="btn-realize" class="btn btn-sm {% if not is_realized %}btn-lime{% else %}btn-default disabled{% endif %}"
href="{% url 'dav_events:updatestatus' event.pk 'realized' %}">
{% if is_realized %}
{% bootstrap_icon 'check' %}&thinsp;
@@ -158,7 +158,7 @@
</a>
{% endif %}
{% if has_permission_cancel and is_submitted and not is_realized %}
<a id="btn-cancel" class="btn btn-sm {% if not is_canceled %}btn-dav-mandarin{% else %}btn-default disabled{% endif %}"
<a id="btn-cancel" class="btn btn-sm {% if not is_canceled %}btn-mandarin{% else %}btn-default disabled{% endif %}"
href="{% url 'dav_events:updatestatus' event.pk 'canceled' %}">
{% if is_canceled %}
{% bootstrap_icon 'check' %}&thinsp;