diff --git a/COLORS.md b/COLORS.md new file mode 100644 index 0000000..a812fbc --- /dev/null +++ b/COLORS.md @@ -0,0 +1,163 @@ + + +# Colors + +## Basics +There is a set of colors for each the light and dark theme. + +## Light theme + +### Main colors +
+ --pfl-color: +
+ #4c6e4dff +
+ +
+ --pfl-dark-green: +
+ #374139ff +
+ +
+ --pfl-grey: +
+ #93877a +
+ +
+ --pfl-brown: +
+ #dbc8baff +
+ +
+ --pfl-orange: +
+ #ed7e2cff +
+ +### Background colors +
+ --bg-pfl-color: +
+ #3f5b40ff +
+ +
+ --bg-pfl-dark-green: +
+ #2f3831ff +
+ +
+ --bg-pfl-grey: +
+ #7b7166 +
+ +
+ --bg-pfl-brown: +
+ #c4a58fff +
+ +
+ --bg-pfl-orange: +
+ #d96513ff +
+ +------------------------------------------------------------------------- + +## Dark theme + +### Main colors +
+
+ --pfl-color: +
+ #8eb57b +
+ +
+ --pfl-dark-green: +
+ #4c6e4dff +
+ +
+ --pfl-grey: +
+ #bbbbbb +
+ +
+ --pfl-brown: +
+ #8f7e6b +
+ +
+ --pfl-orange: +
+ #e1ad45 +
+
+ +### Background colors +
+
+ --bg-pfl-color: +
+ #728f64 +
+ +
+ --bg-pfl-dark-green: +
+ #3d583e +
+ +
+ --bg-pfl-grey: +
+ #9b9b9b +
+ +
+ --bg-pfl-brown: +
+ #7b7166 +
+ +
+ --bg-pfl-orange: +
+ #c98f44ff +
+
diff --git a/pflaenzli/pflaenzli/static/base.css b/pflaenzli/pflaenzli/static/base.css index 62a3e99..ca3d96e 100644 --- a/pflaenzli/pflaenzli/static/base.css +++ b/pflaenzli/pflaenzli/static/base.css @@ -1,6 +1,18 @@ :root { - --pfl-color: #188d1c; - --bg-pfl-color: #59af5c; + /* Primary */ + --pfl-color: #4c6e4dff; + --pfl-dark-green: #374139ff; + --pfl-grey: #93877a; + --pfl-brown: #dbc8baff; + --pfl-orange: #ed7e2cff; + + /* Muted */ + --bg-pfl-color: #3f5b40ff; + --bg-pfl-dark-green: #2f3831ff; + --bg-pfl-grey: #7b7166; + --bg-pfl-brown: #c4a58fff; + --bg-pfl-orange: #d96513ff; + --pfl-primary-bg-subtle: #cbf7cd; --pfl-primary-text: var(--bg-pfl-color); --pfl-primary-border-subtle: #6db770; @@ -11,8 +23,21 @@ } :root[data-bs-theme='dark'] { - --pfl-primary-bg-subtle: #183119; - --pfl-primary-text: #5aac5d; + /* Primary */ + --pfl-color: #8eb57b; + --pfl-dark-green: #4c6e4dff; + --pfl-grey: #bbbbbb; + --pfl-brown: #8f7e6b; + --pfl-orange: #d3a569ff; + + /* Muted */ + --bg-pfl-color: #728f64; + --bg-pfl-dark-green: #3d583e; + --bg-pfl-grey: #9b9b9b; + --bg-pfl-brown: #7d6e5d; + --bg-pfl-orange: #c98f44ff; + + --pfl-primary-text: var(--pfl-color); --pfl-primary-border-subtle: var(--pfl-color); --bs-heading-color: #fff; --pfl-logo: url('/static/dark.png'); @@ -20,20 +45,22 @@ } .btn-pfl { - --bs-btn-color: #fff; + --bs-btn-color: var(--bs-body-bg); + --bs-btn-hover-color: var(--bs-body-bg); --bs-btn-bg: var(--pfl-color); --bs-btn-border-color: var(--pfl-color); - --bs-btn-hover-color: #fff; - --bs-btn-hover-bg: #117314; - --bs-btn-hover-border-color: var(--pfl-color); + --bs-btn-hover-bg: var(--bg-pfl-color); + --bs-btn-hover-border-color: var(--bg-pfl-color); --bs-btn-focus-shadow-rgb: 49, 132, 253; - --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--pfl-color); - --bs-btn-active-border-color: #0a53be; --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); - --bs-btn-disabled-color: #fff; - --bs-btn-disabled-bg: var(--pfl-color); - --bs-btn-disabled-border-color: var(--pfl-color); +} + +.btn-pfl-secondary { + --bs-btn-bg: var(--pfl-brown); + --bs-btn-hover-bg: var(--bg-pfl-brown); + --bs-btn-color: var(--bs-heading-color); + --bs-btn-hover-color: var(--bs-heading-color); } .bg-pfl { @@ -98,4 +125,38 @@ a { background-repeat: no-repeat; background-position: center; background-size: contain; +} + +.pfl-plnt { + background-color: var(--pfl-color); + color: var(--bs-body-bg); +} + +.pfl-seed { + background-color: var(--pfl-dark-green); +} + +.pfl-pot { + background-color: var(--pfl-brown); + color: var(--bs-heading-color); +} + +.pfl-tool { + background-color: var(--pfl-grey); + color: var(--bs-body-bg); +} + +.pfl-othr { + background-color: var(--bs-heading-color); + color: var(--bs-body-bg); +} + +.btn-danger { + --bs-btn-color: var(--bs-body-bg); + --bs-btn-bg: var(--pfl-orange); + --bs-btn-hover-color: var(--bs-body-bg); + --bs-btn-border-color: var(--pfl-orange); + --bs-btn-hover-bg: var(--bg-pfl-orange); + --bs-btn-hover-border-color: var(--bg-pfl-orange); + --bs-btn-active-bg: var(--pfl-orange); } \ No newline at end of file diff --git a/pflaenzli/pflaenzli/templates/403.html b/pflaenzli/pflaenzli/templates/403.html index f8dafaf..6fe8c33 100644 --- a/pflaenzli/pflaenzli/templates/403.html +++ b/pflaenzli/pflaenzli/templates/403.html @@ -13,6 +13,6 @@

{% trans "What now?" %}

{% trans "Go home" %} - {% trans "Report error" %} + {% trans "Report error" %} {% endblock content %} diff --git a/pflaenzli/pflaenzli/templates/403_csrf.html b/pflaenzli/pflaenzli/templates/403_csrf.html index 752cc1f..a448edc 100644 --- a/pflaenzli/pflaenzli/templates/403_csrf.html +++ b/pflaenzli/pflaenzli/templates/403_csrf.html @@ -13,6 +13,6 @@

{% trans "What now?" %}

{% trans "Go home" %} - {% trans "Report error" %} + {% trans "Report error" %} {% endblock content %} diff --git a/pflaenzli/pflaenzli/templates/404.html b/pflaenzli/pflaenzli/templates/404.html index ab7fa5d..ed0b68f 100644 --- a/pflaenzli/pflaenzli/templates/404.html +++ b/pflaenzli/pflaenzli/templates/404.html @@ -13,6 +13,6 @@

{% trans "What now?" %}

{% trans "Go home" %} - {% trans "Report error" %} + {% trans "Report error" %} {% endblock content %} diff --git a/pflaenzli/pflaenzli/templates/500.html b/pflaenzli/pflaenzli/templates/500.html index f833ec0..03bd578 100644 --- a/pflaenzli/pflaenzli/templates/500.html +++ b/pflaenzli/pflaenzli/templates/500.html @@ -13,6 +13,6 @@

{% trans "What now?" %}

{% trans "Go home" %} - {% trans "Report error" %} + {% trans "Report error" %} {% endblock content %} diff --git a/pflaenzli/pflaenzli/templates/app/index.html b/pflaenzli/pflaenzli/templates/app/index.html index 345990f..ce5e1ab 100644 --- a/pflaenzli/pflaenzli/templates/app/index.html +++ b/pflaenzli/pflaenzli/templates/app/index.html @@ -23,7 +23,7 @@ class="btn btn-pfl btn-lg mb-3" type="button">{% trans "Show offers" %} {% trans "Register" %} diff --git a/pflaenzli/pflaenzli/templates/offer/detail.html b/pflaenzli/pflaenzli/templates/offer/detail.html index 8b6ae9e..10088bd 100644 --- a/pflaenzli/pflaenzli/templates/offer/detail.html +++ b/pflaenzli/pflaenzli/templates/offer/detail.html @@ -68,7 +68,7 @@
{% trans "Do you really want to delete this offer? This can't be undone." %}
- + {% trans "Delete" %}