Fix tables rows backgrounds colors on mobile

Remove useless class, do not use a variable for one call only

diff --git a/galette/templates/default/elements/ajax_members.html.twig b/galette/templates/default/elements/ajax_members.html.twig
index db2974a7782a72dbc4699bdb6e5604a5df14ec00..3ef42cef6c90e0862d3b411ede99a6e043600677 100644 (file)
--- a/galette/templates/default/elements/ajax_members.html.twig
+++ b/galette/templates/default/elements/ajax_members.html.twig
@@ -15,10 +15,9 @@
             <tbody>
 {% for member in members_list %}
     {% if excluded is not defined or excluded != member.id %}
-        {% set rclass = member.getRowClass() %}
-                <tr>
-                    <td class="{{ rclass }} right">{{ member.id }}</td>
-                    <td class="{{ rclass }} username_row">
+                <tr class="{{ member.getRowClass() }}">
+                    <td class="right">{{ member.id }}</td>
+                    <td class="username_row">
                     {% if member.isCompany() %}
                         <span>
                             <i class="ui building outline icon tooltip" aria-hidden="true"></i>
@@ -59,7 +58,7 @@
                     {% endif %}
                     <a href="{{ url_for('member', {'id': member.id}) }}" class="choice">{{ member.sfullname }}</a>
                     </td>
-                    <td class="{{ rclass }}">{{ member.zipcode }} {{ member.town }}</td>
+                    <td>{{ member.zipcode }} {{ member.town }}</td>
                 </tr>
     {% endif %}
 {% else %}

diff --git a/galette/templates/default/pages/contributions_list.html.twig b/galette/templates/default/pages/contributions_list.html.twig
index 1fb84087e1cd9b8d0169d0dbf238a16c54a85185..be5654a27e83c26fabe52e1df7a292dc19770a9f 100644 (file)
--- a/galette/templates/default/pages/contributions_list.html.twig
+++ b/galette/templates/default/pages/contributions_list.html.twig
@@ -221,15 +221,14 @@
 {% block body %}
     {% for ordre, contribution in list %}
         {% set mid = contribution.member %}
-        {% set cclass = contribution.getRowClass() %}
         {% if contribution.isFee() %}
             {% set ctype = constant('Galette\\Entity\\Contribution::TYPE_FEE') %}
         {% else %}
             {% set ctype = constant('Galette\\Entity\\Contribution::TYPE_DONATION') %}
         {% endif %}
 
-        <tr{% if mode == 'ajax' %} class="contribution_row" id="row_{{ contribution.id }}"{% endif %}>
-            <td class="{{ cclass }}" data-scope="row">
+        <tr class="{% if mode == 'ajax' %}contribution_row {% endif %}{{ contribution.getRowClass() }}" id="row_{{ contribution.id }}">
+            <td data-scope="row">
                 {% if (login.isAdmin() or login.isStaff()) or mode == 'ajax' %}
                     <input type="checkbox" name="entries_sel[]" value="{{ contribution.id }}"/>
                 {% else %}
@@ -267,11 +266,11 @@
                     <i class="ui icon">&nbsp;</i>
                 {% endif %}
             </td>
-            <td class="{{ cclass }}" data-title="{{ _T("Date") }}">{{ contribution.date }}</td>
-            <td class="{{ cclass }}" data-title="{{ _T("Begin") }}">{{ contribution.begin_date }}</td>
-            <td class="{{ cclass }}" data-title="{{ _T("End") }}">{{ contribution.end_date }}</td>
+            <td data-title="{{ _T("Date") }}">{{ contribution.date }}</td>
+            <td data-title="{{ _T("Begin") }}">{{ contribution.begin_date }}</td>
+            <td data-title="{{ _T("End") }}">{{ contribution.end_date }}</td>
             {% if ((login.isAdmin() or login.isStaff()) and member is not defined) or pmember is defined %}
-                <td class="{{ cclass }}" data-title="{{ _T("Member") }}">
+                <td data-title="{{ _T("Member") }}">
                     {% if member is defined %}
                         {% set mname = member.sname %}
                     {% else %}
@@ -294,12 +293,12 @@
                     </a>
                 </td>
             {% endif %}
-            <td class="{{ cclass }}" data-title="{{ _T("Type") }}">{{ contribution.type.libelle }}</td>
-            <td class="{{ cclass }}" data-title="{{ _T("Amount") }}">{{ contribution.amount }}</td>
-            <td class="{{ cclass }}" data-title="{{ _T("Payment type") }}">{{ contribution.spayment_type }}</td>
-            <td class="{{ cclass }}" data-title="{{ _T("Duration") }}">{{ contribution.duration }}</td>
+            <td data-title="{{ _T("Type") }}">{{ contribution.type.libelle }}</td>
+            <td data-title="{{ _T("Amount") }}">{{ contribution.amount }}</td>
+            <td data-title="{{ _T("Payment type") }}">{{ contribution.spayment_type }}</td>
+            <td data-title="{{ _T("Duration") }}">{{ contribution.duration }}</td>
             {% if mode != 'ajax' %}
-                <td class="actions_row {{ cclass }} center">
+                <td class="actions_row center">
                     <a
                             href="{{ url_for("printContribution", {"id": contribution.id}) }}"
                     >

diff --git a/galette/templates/default/pages/members_list.html.twig b/galette/templates/default/pages/members_list.html.twig
index c3ed3b15b7d0b7369cdd34172f10beafb6729736..262eea0ff073942e167b5d44325b3d68250f3966 100644 (file)
--- a/galette/templates/default/pages/members_list.html.twig
+++ b/galette/templates/default/pages/members_list.html.twig
@@ -15,8 +15,8 @@
     }
 } %}
 
-{% macro draw_actions(rclass, member, login) %}
-                    <td class="{{ rclass }} center actions_row">
+{% macro draw_actions(member, login) %}
+                    <td class="center actions_row">
     {% set actions = callstatic('\\Galette\\Core\\Galette', 'getListActions', member) %}
     {% for action in actions %}
         {{ macros.drawListAction(action.label, action.route, action.icon, action.extra_class ?? null) }}
@@ -287,11 +287,10 @@
 
 {% block body %}
 {% for ordre, member in members %}
-    {% set rclass = member.getRowClass() %}
-                    <tr>
+                    <tr class="{{ member.getRowClass() }}">
     {% for column in galette_list %}
         {% if column.field_id == 'id_adh' %}
-                        <td class="{{ rclass }} right" data-scope="id">
+                        <td class="right" data-scope="id">
             {% if preferences.pref_show_id %}
                         {{ member.id }}
             {% else %}
@@ -299,7 +298,7 @@
             {% endif %}
                         </td>
         {% elseif column.field_id == 'list_adh_name' %}
-                        <td class="{{ rclass }} username_row" data-scope="row">
+                        <td class="username_row" data-scope="row">
                             <input type="checkbox" name="entries_sel[]" value="{{ member.__get('id') }}"/>
             {% if member.isCompany() %}
                             <span>
@@ -350,19 +349,15 @@
                             <a href="{{ url_for("member", {"id": member.id}) }}">{{ member.sname }}{% if member.company_name %} ({{ member.company_name }}){% endif %}</a>
                         </td>
         {% else %}
-            {% set lrclass = rclass %}
             {% set propname = column.propname %}
             {% set value = null %}
 
             {% if column.field_id == 'nom_adh' %}
                 {% set value = member.sfullname %}
             {% elseif column.field_id == 'pseudo_adh' %}
-                {% set lrclass = rclass %}
                 {% set value = attribute(member, propname) %}
             {% elseif column.field_id == 'tel_adh' or column.field_id == 'gsm_adh' %}
-                {% set lrclass = rclass %}
             {% elseif column.field_id == 'id_statut' %}
-                {% set lrclass = rclass %}
                 {% set value = member.sstatus %}
             {% elseif column.field_id == 'titre_adh' %}
                 {% if member.title is iterable %}
@@ -386,7 +381,7 @@
             {% elseif column.field_id == 'sexe_adh' %}
                 {% set value = member.sgender %}
             {% elseif column.field_id == 'ddn_adh' %}
-                {% set lrclass = lrclass ~ ' collapsing' %}
+                {% set lrclass = 'collapsing' %}
             {% endif %}
 
             {# If value has not been set, take the generic value #}
@@ -401,7 +396,7 @@
                 {% set value = value|e('html') %}
             {% endif %}
 
-                        <td class="{{ lrclass }}" data-title="{{ column.label }}">
+                        <td{% if lrclass is defined %} class="{{ lrclass }}"{% endif %} data-title="{{ column.label }}">
             {# Display column.
                 A check is done here to adapt display, this is may not the best way to go
                 but for now, that works as expected.
@@ -422,7 +417,7 @@
                         </td>
         {% endif %}
     {% endfor %}
-                    {{ _self.draw_actions(rclass, member, login) }}
+                    {{ _self.draw_actions(member, login) }}
                     </tr>
 {% else %}
                     <tr><td colspan="{{ galette_list|length + 1 }}" class="emptylist">{{ _T('No member has been found') }}</td></tr>

diff --git a/galette/templates/default/pages/plugins.html.twig b/galette/templates/default/pages/plugins.html.twig
index 72e1b5b8c88681dc19f25eb340cb6a460d0c5ec0..0ee61e6c1fff790aaadc12a78fcd8ad75eda6c5a 100644 (file)
--- a/galette/templates/default/pages/plugins.html.twig
+++ b/galette/templates/default/pages/plugins.html.twig
@@ -14,8 +14,8 @@
             </tr>
         </thead>
         <tbody>
-            <tr>
-                <th colspan="6" class="center aligned plugins"><strong>{{ _T('Active plugins') }}</strong></th>
+            <tr class="plugins">
+                <th colspan="6" class="center aligned"><strong>{{ _T('Active plugins') }}</strong></th>
             </tr>
 {% for name, plugin in plugins_list %}
             <tr class="{% if loop.index0 % 2 == 0 %}even{% else %}odd{% endif %}">
@@ -51,8 +51,8 @@
                 <td colspan="6">{{ _T('No active plugin.') }}</td>
             </tr>
 {% endfor %}
-            <tr>
-                <th colspan="6" class="center aligned inactives plugins"><strong>{{ _T('Inactive plugins') }}</strong></th>
+            <tr class="inactives plugins">
+                <th colspan="6" class="center aligned"><strong>{{ _T('Inactive plugins') }}</strong></th>
             </tr>
             <thead>
             <tr>

diff --git a/galette/templates/default/pages/transaction_form.html.twig b/galette/templates/default/pages/transaction_form.html.twig
index 69766079d77e7d3bb424375c68f9ccab38283214..f1bcf27d414fbeea8e54821b638e1c7f07559d6a 100644 (file)
--- a/galette/templates/default/pages/transaction_form.html.twig
+++ b/galette/templates/default/pages/transaction_form.html.twig
@@ -123,22 +123,21 @@
                             <tbody>
             {% for ordre, contrib in contribs %}
                 {% set mid = contrib.member %}
-                {% set cclass = contrib.getRowClass() %}
-                                <tr>
-                                    <td class="{{ cclass }} center">
+                                <tr class="{{ contrib.getRowClass() }}">
+                                    <td class="center">
                                         {{ ordre + 1 }}
                                     </td>
-                                    <td class="{{ cclass }} center">{{ contrib.date }}</td>
-                                    <td class="{{ cclass }} center">{{ contrib.begin_date }}</td>
-                                    <td class="{{ cclass }} center">{{ contrib.end_date }}</td>
-                                    <td class="{{ cclass }}">{{ contrib.duration }}</td>
+                                    <td class="center">{{ contrib.date }}</td>
+                                    <td class="center">{{ contrib.begin_date }}</td>
+                                    <td class="center">{{ contrib.end_date }}</td>
+                                    <td>{{ contrib.duration }}</td>
                 {% if login.isAdmin() or login.isStaff() %}
-                                    <td class="{{ cclass }}">{{ memberName({'id': mid}) }}</td>
+                                    <td>{{ memberName({'id': mid}) }}</td>
                 {% endif %}
-                                    <td class="{{ cclass }}">{{ contrib.type.libelle }}</td>
-                                    <td class="{{ cclass }} right">{{ contrib.amount }}</td>
+                                    <td>{{ contrib.type.libelle }}</td>
+                                    <td class="right">{{ contrib.amount }}</td>
                 {% if login.isAdmin() or login.isStaff() %}
-                                    <td class="{{ cclass }} actions_row">
+                                    <td class="actions_row">
                                         <a
                                             href="{{ url_for("detach_contribution", {"id": transaction.id, "cid": contrib.id}) }}"
                                             class="delete"

diff --git a/galette/templates/default/pages/transactions_list.html.twig b/galette/templates/default/pages/transactions_list.html.twig
index 5752fef8dec5ce31da141bef21aad0b44e421943..57bcc3cbd843535b2ccf44433258babfe693c688 100644 (file)
--- a/galette/templates/default/pages/transactions_list.html.twig
+++ b/galette/templates/default/pages/transactions_list.html.twig
@@ -139,15 +139,14 @@
 {% block body %}
     {% for ordre, transaction in list %}
         {% set mid = transaction.member %}
-        {% set cclass = transaction.getRowClass() %}
         {% if member is defined %}
             {% set mname = member.sname %}
         {% else %}
             {% set mname = memberName({id: mid}) %}
         {% endif %}
 
-        <tr>
-            <td class="{{ cclass }}" data-scope="row">
+        <tr class="{{ transaction.getRowClass() }}">
+            <td data-scope="row">
                 {% if preferences.pref_show_id %}
                     {{ transaction.id }}
                 {% else %}
@@ -159,45 +158,45 @@
                             </a>
                         </span>
             </td>
-            <td class="{{ cclass }}" data-title="{{ _T("Date") }}">{{ transaction.date }}</td>
-            {% if ((login.isAdmin() or login.isStaff()) and member is not defined) or pmember is defined %}
-                <td class="{{ cclass }}" data-title="{{ _T("Member") }}">
-                    {% if filters.filtre_cotis_adh == "" or filters.filtre_cotis_adh == null %}
-                        <a
-                                href="{{ url_for("contributions", {"type": "transactions", "option": "member", "value": mid}) }}"
-                                title="{{ _T("Show only '%name' transactions")|replace({"%name": mname}) }}"
-                        >
-                            <i class="filter grey small icon" aria-hidden="true"></i>
-                        </a>
-                    {% endif %}
-                    <a
-                            href="{{ url_for("member", {"id": mid}) }}"
-                            title="{{ _T("Show '%name' card")|replace({"%name": mname}) }}"
-                    >
-                        {{ mname }}
-                    </a>
-                </td>
-            {% endif %}
-            <td class="{{ cclass }}" data-title="{{ _T("Description") }}">{{ transaction.description|escape }}</td>
-            <td class="actions_row {{ cclass }}" data-title="{{ _T("Amount") }}">{{ transaction.amount }}</td>
-            {% if login.isAdmin() or login.isStaff() %}
-                <td class="{{ cclass }} center">
-                    <a
-                            href="{{ url_for("editTransaction", {"id": transaction.id}) }}"
-                            class="action"
-                    >
-                        <i class="ui edit icon tooltip" aria-hidden="true"></i>
-                        <span class="ui special popup">{{ _T("Edit transaction #%id")|replace({"%id": transaction.id}) }}</span>
-                    </a>
-                    <a
-                            href="{{ url_for("removeContribution", {"type": "transactions", "id": transaction.id}) }}"
-                            class="delete"
-                    >
-                        <i class="ui trash red icon tooltip" aria-hidden="true"></i>
-                        <span class="ui special popup">{{ _T("Remove transaction #%id")|replace({"%id": transaction.id}) }}</span>
-                    </a>
-                </td>
+            <td data-title="{{ _T("Date") }}">{{ transaction.date }}</td>
+        {% if ((login.isAdmin() or login.isStaff()) and member is not defined) or pmember is defined %}
+            <td data-title="{{ _T("Member") }}">
+            {% if filters.filtre_cotis_adh == "" or filters.filtre_cotis_adh == null %}
+                <a
+                    href="{{ url_for("contributions", {"type": "transactions", "option": "member", "value": mid}) }}"
+                    title="{{ _T("Show only '%name' transactions")|replace({"%name": mname}) }}"
+                >
+                    <i class="filter grey small icon" aria-hidden="true"></i>
+                </a>
             {% endif %}
+                <a
+                    href="{{ url_for("member", {"id": mid}) }}"
+                    title="{{ _T("Show '%name' card")|replace({"%name": mname}) }}"
+                >
+                    {{ mname }}
+                </a>
+            </td>
+        {% endif %}
+            <td data-title="{{ _T("Description") }}">{{ transaction.description|escape }}</td>
+            <td class="actions_row data-title="{{ _T("Amount") }}">{{ transaction.amount }}</td>
+        {% if login.isAdmin() or login.isStaff() %}
+            <td class="center">
+                <a
+                    href="{{ url_for("editTransaction", {"id": transaction.id}) }}"
+                    class="action"
+                >
+                    <i class="ui edit icon tooltip" aria-hidden="true"></i>
+                    <span class="ui special popup">{{ _T("Edit transaction #%id")|replace({"%id": transaction.id}) }}</span>
+                </a>
+                <a
+                    href="{{ url_for("removeContribution", {"type": "transactions", "id": transaction.id}) }}"
+                    class="delete"
+                >
+                    <i class="ui trash red icon tooltip" aria-hidden="true"></i>
+                    <span class="ui special popup">{{ _T("Remove transaction #%id")|replace({"%id": transaction.id}) }}</span>
+                </a>
+            </td>
+        {% endif %}
         </tr>
     {% else %}
         <tr><td colspan="{% if login.isAdmin() or login.isStaff() %}7{% else %}5{% endif %}" class="emptylist">{{ _T("no transaction") }}</td></tr>

diff --git a/ui/semantic/galette/collections/table.overrides b/ui/semantic/galette/collections/table.overrides
index 913d32de5eab9c8eb39de89d28f0b37b263619d0..042894a8a1c1a3b4f0f6d6529d8362d874ebdb94 100644 (file)
--- a/ui/semantic/galette/collections/table.overrides
+++ b/ui/semantic/galette/collections/table.overrides
@@ -31,46 +31,90 @@ td.emptylist {
     text-align: center;
     font-style: italic;
 }
+@media only screen and (max-width: @largestMobileScreen) {
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr:hover > td {
+        background: @activeLineBackgroundColor !important;
+    }
+}
 
 /*-------------------------
      Membership status
 --------------------------*/
 #legende .table th.cotis-ok,
-.ui.ui.table.listing tbody tr > td.cotis-ok {
+.ui.ui.table.listing tbody tr.cotis-ok > td {
     background-color: @cotisOkBackgroundColor;
 }
 #legende .table th.cotis-never,
-.ui.ui.table.listing tbody tr > td.cotis-never {
+.ui.ui.table.listing tbody tr.cotis-never > td {
     background-color: @cotisNeverBackgroundColor;
 }
 #legende .table th.cotis-exempt,
-.ui.ui.table.listing tbody tr > td.cotis-exempt {
+.ui.ui.table.listing tbody tr.cotis-exempt > td {
     background-color: @cotisExemptBackgroundColor;
 }
 #legende .table th.cotis-soon,
-.ui.ui.table.listing tbody tr > td.cotis-soon {
+.ui.ui.table.listing tbody tr.cotis-soon > td {
     background-color: @cotisSoonBackgroundColor;
 }
 #legende .table th.cotis-late,
 #legende .table th.transaction-uncomplete,
-.ui.ui.table.listing tbody tr > td.cotis-late,
-.ui.ui.table.listing tbody tr > td.transaction-uncomplete {
+.ui.ui.table.listing tbody tr.cotis-late > td,
+.ui.ui.table.listing tbody tr.transaction-uncomplete > td {
     background-color: @cotisLateBackgroundColor;
 }
 #legende .table th.cotis-lastday,
-.ui.ui.table.listing tbody tr > td.cotis-lastday {
+.ui.ui.table.listing tbody tr.cotis-lastday > td {
     background-color: @cotisLastdayBackgroundColor;
 }
 #legende .table th.cotis-normal,
 #legende .table th.transaction-normal,
-.ui.ui.table.listing tbody tr > td.cotis-normal,
-.ui.ui.table.listing tbody tr > td.transaction-normal {
+.ui.ui.table.listing tbody tr.cotis-normal > td,
+.ui.ui.table.listing tbody tr.transaction-normal > td {
     background-color: @cotisOkBackgroundColor;
 }
 #legende .table th.cotis-give,
-.ui.ui.table.listing tbody tr > td.cotis-give {
+.ui.ui.table.listing tbody tr.cotis-give > td {
     background-color: @cotisLateBackgroundColor;
 }
+@media only screen and (max-width: @largestMobileScreen) {
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-ok,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-ok > td {
+        background-color: @cotisOkBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-never,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-never > td {
+        background-color: @cotisNeverBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-exempt,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-exempt > td {
+        background-color: @cotisExemptBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-soon,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-soon > td {
+        background-color: @cotisSoonBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-late,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-late > td,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-uncomplete,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-uncomplete > td {
+        background-color: @cotisLateBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-lastday,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-lastday > td {
+        background-color: @cotisLastdayBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-normal,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-normal > td,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-normal,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.transaction-normal > td {
+        background-color: @cotisOkBackgroundColor;
+    }
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-give,
+    .ui.ui.ui.ui.table.listing:not(.unstackable) > tbody > tr.cotis-give > td {
+        background-color: @cotisLateBackgroundColor;
+    }
+}
 
 /*-------------------------
      Legends display
@@ -87,14 +131,24 @@ td.emptylist {
 /*------------------
      Plugins list
 -------------------*/
-th.plugins {
+tr.plugins th {
    padding-top: 1rem;
    padding-bottom: 1rem;
-   background: #d9f7d8;
+   background: @pluginsActiveBackground;
 }
 
-th.inactives.plugins {
-    background: #ffead8;
+tr.inactives.plugins th {
+    background: @pluginsInactiveBackground;
     border-top: @rowBorder;
     border-bottom: @rowBorder;
 }
+@media only screen and (max-width: @largestMobileScreen) {
+    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.plugins,
+    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.plugins > th {
+        background: @pluginsActiveBackground;
+    }
+    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.inactives.plugins,
+    .ui.ui.ui.ui.table:not(.unstackable) > tbody > tr.inactives.plugins > th {
+        background: @pluginsInactiveBackground;
+    }
+}

diff --git a/ui/semantic/galette/globals/site.variables b/ui/semantic/galette/globals/site.variables
index af86620cf932adc5ecfe4ae39c91b0903a9ba609..6e786e4ed8dabb535963996930cf0eedeabe6cee 100644 (file)
--- a/ui/semantic/galette/globals/site.variables
+++ b/ui/semantic/galette/globals/site.variables
@@ -54,3 +54,6 @@
 @cotisSoonBackgroundColor   : #ffe9ab;
 @cotisLateBackgroundColor   : #ffe9e9;
 @cotisLastdayBackgroundColor: #ffebd3;
+
+@pluginsActiveBackground    : #d9f7d8;
+@pluginsInactiveBackground  : #ffead8;