Fix tile selection UI persistence in /tools/check page

ivatar/tools/templates/check.html

@@ -2,6 +2,116 @@
 {% load i18n %}
 {% load static %}
 
+{% block header %}
+<style>
+/* Base tile styles - highest specificity */
+.custom-select-grid .select-option,
+.form-group .custom-select-grid .select-option,
+div.custom-select-grid div.select-option {
+  transition: all 0.3s ease !important;
+  cursor: pointer !important;
+  border: 2px solid #dee2e6 !important;
+  background-color: #fff !important;
+  color: #333 !important;
+  padding: 1rem !important;
+  border-radius: 12px !important;
+  display: flex !important;
+  flex-direction: column !important;
+  align-items: center !important;
+  gap: 0.75rem !important;
+  min-height: 100px !important;
+  justify-content: center !important;
+}
+
+/* Hover state for non-selected tiles */
+.custom-select-grid .select-option:hover:not(.selected),
+.form-group .custom-select-grid .select-option:hover:not(.selected),
+div.custom-select-grid div.select-option:hover:not(.selected) {
+  border-color: #335ecf !important;
+  background-color: #e8f0ff !important;
+  color: #335ecf !important;
+  transform: translateY(-2px) !important;
+}
+
+.custom-select-grid .select-option:hover:not(.selected) .select-option-text,
+.form-group .custom-select-grid .select-option:hover:not(.selected) .select-option-text,
+div.custom-select-grid div.select-option:hover:not(.selected) .select-option-text {
+  color: #335ecf !important;
+  font-weight: 500 !important;
+}
+
+/* Selected state - always takes priority */
+.custom-select-grid .select-option.selected,
+.form-group .custom-select-grid .select-option.selected,
+div.custom-select-grid div.select-option.selected {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+  box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
+  transform: translateY(-1px) !important;
+}
+
+.custom-select-grid .select-option.selected .select-option-text,
+.form-group .custom-select-grid .select-option.selected .select-option-text,
+div.custom-select-grid div.select-option.selected .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+.custom-select-grid .select-option.selected .select-option-preview,
+.form-group .custom-select-grid .select-option.selected .select-option-preview,
+div.custom-select-grid div.select-option.selected .select-option-preview {
+  border-color: rgba(255, 255, 255, 0.5) !important;
+}
+
+/* Selected state hover - slightly different shade */
+.custom-select-grid .select-option.selected:hover,
+.form-group .custom-select-grid .select-option.selected:hover,
+div.custom-select-grid div.select-option.selected:hover {
+  background-color: #2a4bb8 !important;
+  border-color: #2a4bb8 !important;
+  color: #fff !important;
+  transform: translateY(-2px) !important;
+  box-shadow: 0 6px 20px rgba(51, 94, 207, 0.5) !important;
+}
+
+.custom-select-grid .select-option.selected:hover .select-option-text,
+.form-group .custom-select-grid .select-option.selected:hover .select-option-text,
+div.custom-select-grid div.select-option.selected:hover .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+/* Force all child elements in selected state */
+.custom-select-grid .select-option.selected *,
+.form-group .custom-select-grid .select-option.selected *,
+div.custom-select-grid div.select-option.selected * {
+  color: #fff !important;
+}
+
+/* Ensure selected state persists even with inline styles */
+.select-option[data-selected="true"] {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+  box-shadow: 0 4px 16px rgba(51, 94, 207, 0.4) !important;
+}
+
+.select-option[data-selected="true"] .select-option-text {
+  color: #fff !important;
+  font-weight: 600 !important;
+}
+
+/* Override any potential theme conflicts */
+body .select-option.selected,
+html .select-option.selected {
+  background-color: #335ecf !important;
+  border-color: #335ecf !important;
+  color: #fff !important;
+}
+</style>
+{% endblock header %}
+
 {% block title %}{% trans 'Check e-mail or openid' %}{% endblock title %}
 
 {% block content %}
@@ -22,68 +132,89 @@
         <div class="form-group">
           <label for="id_mail" class="form-label">{% trans 'E-Mail' %}</label>
           {% if form.mail.value %}
-            <input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
+          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
+            placeholder="{% trans 'E-Mail' %}" value="{{ form.mail.value }}" id="id_mail">
           {% else %}
-            <input type="email" name="mail" maxlength="254" minlength="6" class="form-control" placeholder="{% trans 'E-Mail' %}" id="id_mail">
+          <input type="email" name="mail" maxlength="254" minlength="6" class="form-control"
+            placeholder="{% trans 'E-Mail' %}" id="id_mail">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_openid" class="form-label">{% trans 'OpenID' %}</label>
           {% if form.openid.value %}
-            <input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
+          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
+            placeholder="{% trans 'OpenID' %}" value="{{ form.openid.value }}" id="id_openid">
           {% else %}
-            <input type="text" name="openid" maxlength="255" minlength="11" class="form-control" placeholder="{% trans 'OpenID' %}" id="id_openid">
+          <input type="text" name="openid" maxlength="255" minlength="11" class="form-control"
+            placeholder="{% trans 'OpenID' %}" id="id_openid">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_size" class="form-label">{% trans 'Size' %}</label>
           {% if form.size.value %}
-            <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="{{ form.size.value }}" required id="id_size">
+          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
+            value="{{ form.size.value }}" required id="id_size">
           {% else %}
-            <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}" value="100" required id="id_size">
+          <input type="number" name="size" min="5" max="512" class="form-control" placeholder="{% trans 'Size' %}"
+            value="100" required id="id_size">
           {% endif %}
         </div>
         <div class="form-group">
           <label for="id_default_url" class="form-label">{% trans 'Default URL or special keyword' %}</label>
           {% if form.default_url.value %}
-            <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" value="{{ form.default_url.value }}" id="id_default_url">
+          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
+            value="{{ form.default_url.value }}" id="id_default_url">
           {% else %}
-            <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}" id="id_default_url">
+          <input type="text" name="default_url" class="form-control" placeholder="{% trans 'Default' %}"
+            id="id_default_url">
           {% endif %}
         </div>
         <div class="form-group">
           <label class="form-label">{% trans 'Default (special keyword)' %}</label>
-          <input type="hidden" name="default_opt" id="id_default_opt" value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
+          <input type="hidden" name="default_opt" id="id_default_opt"
+            value="{% if form.default_opt.value %}{{ form.default_opt.value }}{% endif %}">
           <div class="custom-select-grid">
             <div class="select-option {% if form.default_opt.value == 'retro' %}selected{% endif %}" data-value="retro">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=retro&forcedefault=y" alt="Retro preview"
+                class="select-option-preview">
               <span class="select-option-text">Retro (d=retro)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}" data-value="robohash">
+            <div class="select-option {% if form.default_opt.value == 'robohash' %}selected{% endif %}"
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview" class="select-option-preview">
+              data-value="robohash">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=robohash&forcedefault=y" alt="Roboter preview"
+                class="select-option-preview">
               <span class="select-option-text">Roboter (d=robohash)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}" data-value="wavatar">
+            <div class="select-option {% if form.default_opt.value == 'wavatar' %}selected{% endif %}"
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview" class="select-option-preview">
+              data-value="wavatar">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=wavatar&forcedefault=y" alt="Wavatar preview"
+                class="select-option-preview">
               <span class="select-option-text">Wavatar (d=wavatar)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}" data-value="monsterid">
+            <div class="select-option {% if form.default_opt.value == 'monsterid' %}selected{% endif %}"
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview" class="select-option-preview">
+              data-value="monsterid">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=monsterid&forcedefault=y" alt="Monster preview"
+                class="select-option-preview">
               <span class="select-option-text">Monster (d=monsterid)</span>
             </div>
-            <div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}" data-value="identicon">
+            <div class="select-option {% if form.default_opt.value == 'identicon' %}selected{% endif %}"
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y" alt="Identicon preview" class="select-option-preview">
+              data-value="identicon">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=identicon&forcedefault=y"
+                alt="Identicon preview" class="select-option-preview">
               <span class="select-option-text">Identicon (d=identicon)</span>
             </div>
             <div class="select-option {% if form.default_opt.value == 'mm' %}selected{% endif %}" data-value="mm">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mm&forcedefault=y" alt="Mystery man preview"
+                class="select-option-preview">
               <span class="select-option-text">Mystery man (d=mm)</span>
             </div>
             <div class="select-option {% if form.default_opt.value == 'mmng' %}selected{% endif %}" data-value="mmng">
-              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y" alt="Mystery man NG preview" class="select-option-preview">
+              <img src="/avatar/05b393e2a6942f3796524d634dcd8c0d?s=32&d=mmng&forcedefault=y"
+                alt="Mystery man NG preview" class="select-option-preview">
               <span class="select-option-text">Mystery man NG (d=mmng)</span>
             </div>
-            <div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}" data-value="none">
+            <div class="select-option select-option-none {% if form.default_opt.value == 'none' %}selected{% endif %}"
+              data-value="none">
               <span class="select-option-text">None</span>
             </div>
           </div>
@@ -191,43 +322,62 @@
 
 {% if mailurl or openidurl %}
 <script>
-// Auto-scroll to results on mobile after form submission
+  // Auto-scroll to results on mobile after form submission
-document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', function () {
     // Check if we're on mobile and have results
     if (window.innerWidth <= 768 && document.getElementById('avatar-results')) {
       // Small delay to ensure page is fully rendered
-    setTimeout(function() {
+      setTimeout(function () {
         document.getElementById('avatar-results').scrollIntoView({
           behavior: 'smooth',
           block: 'start'
         });
       }, 100);
     }
-});
+  });
 </script>
 {% endif %}
 
 <script>
-// Custom select box functionality
+  // Custom select box functionality
-document.addEventListener('DOMContentLoaded', function() {
+  document.addEventListener('DOMContentLoaded', function () {
     const selectOptions = document.querySelectorAll('.select-option');
     const hiddenInput = document.getElementById('id_default_opt');
 
-  selectOptions.forEach(function(option) {
+    selectOptions.forEach(function (option) {
-    option.addEventListener('click', function() {
+      option.addEventListener('click', function () {
         // Remove selected class from all options
-      selectOptions.forEach(function(opt) {
+        selectOptions.forEach(function (opt) {
           opt.classList.remove('selected');
+          opt.removeAttribute('data-selected');
+
+          // Clear any inline styles that might interfere with CSS
+          opt.style.backgroundColor = '';
+          opt.style.borderColor = '';
+          opt.style.color = '';
+          opt.style.fontWeight = '';
+          opt.style.transform = '';
+          opt.style.boxShadow = '';
+
+          const textElement = opt.querySelector('.select-option-text');
+          if (textElement) {
+            textElement.style.color = '';
+            textElement.style.fontWeight = '';
+          }
         });
 
         // Add selected class to clicked option
         this.classList.add('selected');
+        this.setAttribute('data-selected', 'true');
 
         // Update hidden input value
         hiddenInput.value = this.getAttribute('data-value');
+
+        // Force a reflow to ensure CSS is applied immediately
+        this.offsetHeight;
+      });
     });
   });
-});
 </script>
 
 {% endblock content %}