「飲食店検索」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 701行目: | 701行目: | ||
<a data-role="next-page" href="#">次へ →</a> | <a data-role="next-page" href="#">次へ →</a> | ||
</div> | </div> | ||
<style> | <style> | ||
.pagination { | .pagination { | ||
| 710行目: | 711行目: | ||
} | } | ||
/* 共通 */ | |||
.pagination a { | .pagination a { | ||
display: inline-flex; | display: inline-flex; | ||
| 717行目: | 719行目: | ||
min-width: 90px; | min-width: 90px; | ||
text-decoration: none; | text-decoration: none; | ||
border-radius: 6px; | border-radius: 6px; | ||
border: 1px solid; | |||
transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; | transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; | ||
} | } | ||
/* | /* ========= | ||
ライトテーマ | |||
========= */ | |||
.pagination a { | |||
background: #f9fafb; | |||
color: #1f2937; | |||
border-color: #d1d5db; | |||
} | |||
.pagination a:hover { | .pagination a:hover { | ||
background: # | background: #eef2f7; | ||
box-shadow: 0 1px 4px rgba(0,0,0,0. | box-shadow: 0 1px 4px rgba(0,0,0,0.08); | ||
} | } | ||
/* | /* ライト・非活性 */ | ||
.pagination a.disabled { | .pagination a.disabled { | ||
background: #f1f5f9; | |||
color: #94a3b8; | |||
border-color: #e2e8f0; | |||
pointer-events: none; | pointer-events: none; | ||
box-shadow: none; | box-shadow: none; | ||
} | } | ||
/* | /* ========= | ||
ダークテーマ | |||
========= */ | |||
body.dark .pagination a { | |||
background: #374151; | |||
color: #f9fafb; | |||
border-color: #4b5563; | |||
} | |||
body.dark .pagination a:hover { | |||
background: #4b5563; | |||
} | |||
/* ダーク・非活性 */ | |||
body.dark .pagination a.disabled { | |||
background: #1f2937; | |||
color: #6b7280; | |||
border-color: #374151; | |||
} | } | ||
</style> | </style> | ||