fix: Color agenda table row based on AD position (#6192)

Fixes #6184

ietf/static/css/ietf.scss

@@ -12,8 +12,28 @@ $popover-max-width: 100%;
 
 // Override default fonts
 
-$font-family-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-sans-serif: "Inter",
-$font-family-monospace: "Noto Sans Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+system-ui,
+-apple-system,
+"Segoe UI",
+Roboto,
+"Helvetica Neue",
+"Noto Sans",
+"Liberation Sans",
+Arial,
+sans-serif,
+"Apple Color Emoji",
+"Segoe UI Emoji",
+"Segoe UI Symbol",
+"Noto Color Emoji";
+$font-family-monospace: "Noto Sans Mono",
+SFMono-Regular,
+Menlo,
+Monaco,
+Consolas,
+"Liberation Mono",
+"Courier New",
+monospace;
 
 // Enable color modes
 $color-mode-type: data;
@@ -506,29 +526,57 @@ td.position-empty {
     border: none !important;
 }
 
-tr.position-moretime-row,
+[data-bs-theme="light"] {
-tr.position-notready-row,
+
-tr.position-discuss-row,
+    tr.position-moretime-row,
-tr.position-block-row {
+    tr.position-notready-row,
-    background-color: tint-color($color-discuss, 85%);
+    tr.position-discuss-row,
+    tr.position-block-row {
+        background-color: tint-color($color-discuss, 85%);
+    }
+
+    tr.position-yes-row {
+        background-color: tint-color($color-yes, 75%);
+    }
+
+    tr.position-noobj-row {
+        background-color: tint-color($color-noobj, 50%);
+    }
+
+    tr.position-abstain-row {
+        background-color: tint-color($color-abstain, 85%);
+    }
+
+    tr.position-recuse-row {
+        background-color: tint-color($color-recuse, 85%);
+    }
 }
 
-tr.position-yes-row {
+[data-bs-theme="dark"] {
-    background-color: tint-color($color-yes, 75%);
-}
 
-tr.position-noobj-row {
+    tr.position-moretime-row,
-    background-color: tint-color($color-noobj, 50%);
+    tr.position-notready-row,
-}
+    tr.position-discuss-row,
+    tr.position-block-row {
+        background-color: shade-color($color-discuss, 85%);
+    }
 
-tr.position-abstain-row {
+    tr.position-yes-row {
-    background-color: tint-color($color-abstain, 85%);
+        background-color: shade-color($color-yes, 75%);
-}
+    }
 
-tr.position-recuse-row {
+    tr.position-noobj-row {
-    background-color: tint-color($color-recuse, 85%);
+        background-color: shade-color($color-noobj, 75%);
-}
+    }
 
+    tr.position-abstain-row {
+        background-color: shade-color($color-abstain, 85%);
+    }
+
+    tr.position-recuse-row {
+        background-color: shade-color($color-recuse, 85%);
+    }
+}
 
 /* === Edit Meeting Schedule ====================================== */
 

ietf/templates/doc/search/search_result_row.html

@@ -7,7 +7,7 @@
 {% load person_filters %}
 {% load django_bootstrap5 %}
 <tr {% if color_ad_position %}{% with doc|ballotposition:user as pos %}{% if pos %}class="position-{{ pos.slug }}-row"{% endif %}{% endwith %}{% endif %}>
-    <td>
+    <td class="bg-transparent">
         {% if user.is_authenticated %}
             <a href="{% url "ietf.community.views.untrack_document" username=request.user.username name=doc.name %}"
                class="track-untrack-doc {% if not doc.tracked_in_personal_community_list %}d-none{% endif %}"
@@ -45,7 +45,7 @@
             </a>
         {% endfor %}
     </td>
-    <td class="doc">
+    <td class="doc bg-transparent">
         {% if doc.pages %}<small class="float-end text-body-secondary d-none d-sm-block">{{ doc.pages }} page{{ doc.pages|pluralize }}</small>{% endif %}
         <div>
             <a href="{{ doc.get_absolute_url }}">
@@ -105,50 +105,50 @@
             </div>
         {% endif %}
     </td>
-    <td>
+    <td class="bg-transparent">
-            {% if doc.latest_revision_date|timesince_days|new_enough:request and doc.get_state_slug != "rfc" %}
+        {% if doc.latest_revision_date|timesince_days|new_enough:request and doc.get_state_slug != "rfc" %}
-                {% if doc.rev != "00" %}
+            {% if doc.rev != "00" %}
-                    <a href="{{ rfcdiff_base_url }}?url2={{ doc.name }}-{{ doc.rev }}">
+                <a href="{{ rfcdiff_base_url }}?url2={{ doc.name }}-{{ doc.rev }}">
-                    {% elif doc.replaces %}
+            {% elif doc.replaces %}
-                        <a href="{{ rfcdiff_base_url }}?url1={{ doc.replaces_canonical_name }}&amp;url2={{ doc.name }}-{{ doc.rev }}">
+                <a href="{{ rfcdiff_base_url }}?url1={{ doc.replaces_canonical_name }}&amp;url2={{ doc.name }}-{{ doc.rev }}">
-                        {% endif %}
-                    {% endif %}
-                    {% if doc.get_state_slug == "rfc" %}
-                        {{ doc.latest_revision_date|date:"Y-m" }}
-                    {% else %}
-                        {{ doc.latest_revision_date|date:"Y-m-d" }}
-                    {% endif %}
-                    {% if doc.latest_revision_date|timesince_days|new_enough:request and doc.get_state_slug != "rfc" %}
-                        {% if doc.rev != "00" or doc.replaces %}</a>{% endif %}
-                    {% endif %}
-                {% if doc.latest_revision_date|timesince_days|new_enough:request %}
-                    <br>
-                    <div class="float-end">
-                        <span class="badge rounded-pill text-bg-success">New</span>
-                    </div>
-                {% endif %}
-                {% if doc.get_state_slug == "active" and doc.expirable and doc.expires|timesince_days|expires_soon:request %}
-                    <br>
-                    <span class="badge rounded-pill text-bg-warning">Expires soon</span>
-                {% endif %}
-            </td>
-            {% include "doc/search/status_columns.html" %}
-            <td class="text-center d-none d-sm-table-cell">
-                {% if doc.related_ipr %}
-                    <a href="{% url "ietf.ipr.views.search" %}?submit=draft&amp;id={{ doc.name }}">
-                        <span class="badge rounded-pill text-bg-info">{{ doc.related_ipr|length }}</span>
-                    </a>
-                {% endif %}
-            </td>
-            {% if ad_name == None or ad_name != doc.ad.plain_name %}
-                <td class="d-none d-sm-table-cell">
-                    {% if doc.ad %}
-                        {% person_link doc.ad title="Area Director" %}
-                    {% endif %}
-                    <br>
-                    {% if doc.shepherd %}
-                        {% email_person_link doc.shepherd title="Shepherd" class="small text-body-secondary" %}
-                    {% endif %}
-                </td>
             {% endif %}
-        </tr>
+        {% endif %}
+        {% if doc.get_state_slug == "rfc" %}
+            {{ doc.latest_revision_date|date:"Y-m" }}
+        {% else %}
+            {{ doc.latest_revision_date|date:"Y-m-d" }}
+        {% endif %}
+        {% if doc.latest_revision_date|timesince_days|new_enough:request and doc.get_state_slug != "rfc" %}
+            {% if doc.rev != "00" or doc.replaces %}</a>{% endif %}
+        {% endif %}
+        {% if doc.latest_revision_date|timesince_days|new_enough:request %}
+            <br>
+            <div class="float-end">
+                <span class="badge rounded-pill text-bg-success">New</span>
+            </div>
+        {% endif %}
+        {% if doc.get_state_slug == "active" and doc.expirable and doc.expires|timesince_days|expires_soon:request %}
+            <br>
+            <span class="badge rounded-pill text-bg-warning">Expires soon</span>
+        {% endif %}
+    </td>
+    {% include "doc/search/status_columns.html" %}
+    <td class="text-center d-none d-sm-table-cell bg-transparent">
+        {% if doc.related_ipr %}
+            <a href="{% url "ietf.ipr.views.search" %}?submit=draft&amp;id={{ doc.name }}">
+                <span class="badge rounded-pill text-bg-info">{{ doc.related_ipr|length }}</span>
+            </a>
+        {% endif %}
+    </td>
+    {% if ad_name == None or ad_name != doc.ad.plain_name %}
+        <td class="d-none d-sm-table-cell bg-transparent">
+            {% if doc.ad %}
+                {% person_link doc.ad title="Area Director" %}
+            {% endif %}
+            <br>
+            {% if doc.shepherd %}
+                {% email_person_link doc.shepherd title="Shepherd" class="small text-body-secondary" %}
+            {% endif %}
+        </td>
+    {% endif %}
+</tr>

ietf/templates/doc/search/status_columns.html

@@ -2,7 +2,7 @@
 {% load origin %}
 {% origin %}
 {% load ietf_filters ballot_icon person_filters %}
-<td class="status">
+<td class="status bg-transparent">
     <div class="float-end ms-1 mb-1" id="ballot-icon-{{ doc.name }}">{% ballot_icon doc %}</div>
     {% if not doc.get_state_slug == "rfc" %}
         {% if '::' in doc.friendly_state %}