feat(pagination): Enhance disabled state styling for pagination links

This commit is contained in:
Warren Chen 2026-03-17 14:41:44 +09:00
parent ccb675f4bc
commit be99e5e635
2 changed files with 23 additions and 3 deletions

View File

@ -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;

View File

@ -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 %}