From be99e5e6351534f673190248b04a2755d4cc22de Mon Sep 17 00:00:00 2001
From: Warren Chen <warrenchen@innovedus.com>
Date: Tue, 17 Mar 2026 14:41:44 +0900
Subject: [PATCH] feat(pagination): Enhance disabled state styling for
 pagination links

---
 innovedus_cms/home/static/css/article_list.css  |  9 +++++++++
 .../home/includes/page-article-list.html        | 17 ++++++++++++++---
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/innovedus_cms/home/static/css/article_list.css b/innovedus_cms/home/static/css/article_list.css
index 5a54ab3..dae7827 100644
--- a/innovedus_cms/home/static/css/article_list.css
+++ b/innovedus_cms/home/static/css/article_list.css
@@ -152,6 +152,15 @@
   height: 44px;
 }
 
+.pagination a.disabled {
+  pointer-events: none;
+  color: #0e1b4266;
+}
+
+.pagination a.disabled button {
+  color: inherit;
+}
+
 .pagination .prev-page span,
 .pagination .next-page span {
   height: 44px;
diff --git a/innovedus_cms/home/templates/home/includes/page-article-list.html b/innovedus_cms/home/templates/home/includes/page-article-list.html
index 564061e..4e2c221 100644
--- a/innovedus_cms/home/templates/home/includes/page-article-list.html
+++ b/innovedus_cms/home/templates/home/includes/page-article-list.html
@@ -12,18 +12,20 @@
         <a class="prev-page" href="?page={{ category.items.previous_page_number }}">
           <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
             <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
-              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
             </svg>
           </button>
           <span>BACK</span>
         </a>
       {% else %}
+        <a class="prev-page disabled" aria-disabled="true">
           <button class="left-arrow" type="button" data-dir="left" aria-label="更多文章">
             <svg class="left-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
-              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
             </svg>
           </button>
           <span>BACK</span>
+        </a>
       {% endif %}
       <div class="pagination-pages">
         {% for page_num in category.page_range %}
@@ -41,10 +43,19 @@
           <span>NEXT</span>
           <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
             <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
-              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="var(--stroke-0, #0E1B42)" stroke-width="2"/>
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
             </svg>
           </button>
         </a>
+      {% else %}
+        <a class="next-page disabled" aria-disabled="true">
+          <span>NEXT</span>
+          <button class="right-arrow" type="button" data-dir="right" aria-label="更多文章">
+            <svg class="right-arrow-icon" xmlns="http://www.w3.org/2000/svg" fill="none" overflow="visible" preserveAspectRatio="none" viewBox="0 0 18.1213 33.4142">
+              <path d="M17.4142 0.707107L1.41421 16.7071L17.4142 32.7071" id="Vector 3" stroke="currentColor" stroke-width="2"/>
+            </svg>
+          </button>
+        </a> 
       {% endif %}
     </div>
   {% endif %}