From 7086a1769bf6c02a894cca1be6927cefbe5381d0 Mon Sep 17 00:00:00 2001
From: dgtlmoon <dgtlmoon@gmail.com>
Date: Sun, 20 Sep 2026 08:10:30 +0200
Subject: [PATCH] UI - LLM - Tidy up styling

---
 .../blueprint/settings/templates/settings.html   |  4 ++--
 .../settings/templates/settings_llm_tab.html     | 16 ++++++++--------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/changedetectionio/blueprint/settings/templates/settings.html b/changedetectionio/blueprint/settings/templates/settings.html
index c0650617c..d2dcf9606 100644
--- a/changedetectionio/blueprint/settings/templates/settings.html
+++ b/changedetectionio/blueprint/settings/templates/settings.html
@@ -77,7 +77,7 @@
                         {% endif %}
                     </div>
                     <div class="pure-control-group">
-                      <a href="{{url_for('ui.clear_all_history')}}" class="pure-button button-error">{{ _('Clear Snapshot History') }}</a>
+                      <a href="{{url_for('ui.clear_all_history')}}" class="cdio-btn button-error">{{ _('Clear Snapshot History') }}</a>
                     </div>
                     <div class="pure-control-group">
                         {{ render_checkbox_field(form.application.form.shared_diff_access, class="shared_diff_access") }}
@@ -212,7 +212,7 @@ nav
                     </div>
                 </div>
                 <div class="pure-control-group">
-                    <button type="submit" formmethod="post" formnovalidate formaction="{{url_for('settings.settings_reset_api_key')}}" class="pure-button button-small button-cancel">{{ _('Regenerate API key') }}</button>
+                    <button type="submit" formmethod="post" formnovalidate formaction="{{url_for('settings.settings_reset_api_key')}}" class="cdio-btn button-small button-cancel">{{ _('Regenerate API key') }}</button>
                 </div>
                 <div class="pure-control-group">
                     <h4>{{ _('Chrome Extension') }}</h4>
diff --git a/changedetectionio/blueprint/settings/templates/settings_llm_tab.html b/changedetectionio/blueprint/settings/templates/settings_llm_tab.html
index 5d02a269f..36a76997d 100644
--- a/changedetectionio/blueprint/settings/templates/settings_llm_tab.html
+++ b/changedetectionio/blueprint/settings/templates/settings_llm_tab.html
@@ -58,12 +58,12 @@
     {% if llm_config and llm_config.get('model') %}
     <span class="stab-configured-badge">&#10003; {{ _('AI / LLM configured:') }} {{ llm_config.get('model') }}</span>
     {% if not llm_env_configured %}
-    <button type="button" class="pure-button" data-stab-goto="provider">
+    <button type="button" class="cdio-btn" data-stab-goto="provider">
       <i data-feather="settings"></i> {{ _('Edit provider') }} &rarr;
     </button>
     {% endif %}
     {% else %}
-    <button type="button" class="pure-button pure-button-primary" data-stab-goto="provider">
+    <button type="button" class="cdio-btn pure-button-primary" data-stab-goto="provider">
       <i data-feather="settings"></i> {{ _('Configure AI Provider') }} &rarr;
     </button>
     {% endif %}
@@ -153,7 +153,7 @@
 
   <div class="pure-control-group" id="llm-fetch-group" style="display:none">
     <label></label>
-    <button type="button" id="llm-fetch-btn" class="pure-button button-xsmall" onclick="llmFetchModels()"
+    <button type="button" id="llm-fetch-btn" class="cdio-btn button-xsmall" onclick="llmFetchModels()"
             style="background:#27ae60;color:#fff;border:none;">
       &#8635; {{ _('Load available models') }}
     </button>
@@ -183,7 +183,7 @@
       &#10003; {{ _('AI / LLM configured:') }} {{ llm_config.get('model') }}
     </span>
     &nbsp;
-    <button type="button" class="pure-button button-xsmall"
+    <button type="button" class="cdio-btn button-xsmall"
             onclick="const field = document.getElementById('{{ form.llm.form.model.id }}'); field.focus(); field.select();">
       {{ _('Change model') }}
     </button>
@@ -193,7 +193,7 @@
        Stays as <a> because we're inside the outer settings <form> — nested forms are
        invalid HTML, so modal.js builds a body-level hidden form for the POST. #}
     <a href="{{ url_for('settings.llm.llm_clear') }}"
-       class="pure-button button-xsmall"
+       class="cdio-btn button-xsmall"
        style="background:#c0392b;color:#fff;"
        data-method="POST"
        data-requires-confirm
@@ -205,7 +205,7 @@
       &#10005; {{ _('Remove') }}
     </a>
     &nbsp;
-    <button type="button" id="llm-test-btn" class="pure-button button-xsmall" onclick="llmRunTest()"
+    <button type="button" id="llm-test-btn" class="cdio-btn button-xsmall" onclick="llmRunTest()"
             style="background:#2980b9;color:#fff;border:none;">
       &#9654; {{ _('Test connection') }}
     </button>
@@ -221,7 +221,7 @@
     <label style="color:#888; font-size:0.85em;">{{ _('Cache') }}</label>
     {# See comment above on data-method="POST"+modal.js (GHSA-g36r-fm2p-87xm). #}
     <a href="{{ url_for('settings.llm.llm_clear_summary_cache') }}"
-       class="pure-button button-xsmall"
+       class="cdio-btn button-xsmall"
        style="background:#7f8c8d;color:#fff;"
        data-method="POST"
        data-requires-confirm
@@ -260,7 +260,7 @@
     {{ render_field(form.llm.form.change_summary_default) }}
     <span class="pure-form-message-inline">
       {{ _('Used for all watches unless overridden by the watch or its tag/group.') }}
-      &nbsp;<a href="#" class="pure-button button-small" onclick="var t=document.getElementById('llm-change_summary_default'); if(!t.value && t.placeholder) t.value=t.placeholder; return false;">{{ _('Modify default prompt') }}</a>
+      &nbsp;<a href="#" class="cdio-btn button-small" onclick="var t=document.getElementById('llm-change_summary_default'); if(!t.value && t.placeholder) t.value=t.placeholder; return false;">{{ _('Modify default prompt') }}</a>
     </span>
   </div>