diff --git a/links/templates/links/tag_detail.html b/links/templates/links/tag_detail.html index 7c1b744..96f82c5 100644 --- a/links/templates/links/tag_detail.html +++ b/links/templates/links/tag_detail.html @@ -44,18 +44,20 @@ } .apple-btn-secondary { background: #fff; color: var(--apple-text); border: 1px solid rgba(0, 0, 0, 0.12); } .apple-btn-secondary:hover { background: #f0f0f3; } - .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 8px 22px rgba(255, 59, 48, 0.3); } + .apple-btn-danger { background: var(--apple-red); color: #fff; box-shadow: 0 4px 14px rgba(255, 59, 48, 0.18); } .apple-btn-danger:hover { background: #ff5147; } .apple-btn:active { transform: scale(0.96); } /* ── Segmented tabs ── */ .seg-tabs { - display: inline-flex; padding: 3px; gap: 2px; - background: rgba(0, 0, 0, 0.055); border-radius: 12px; - margin-bottom: 1.4rem; flex-wrap: wrap; + display: flex; align-items: center; gap: 2px; + padding: 3px; background: rgba(0, 0, 0, 0.055); border-radius: 12px; + margin-bottom: 1.4rem; + overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } + .seg-tabs::-webkit-scrollbar { display: none; } .seg-tab { - display: inline-flex; align-items: center; gap: 0.4rem; + display: inline-flex; align-items: center; gap: 0.4rem; flex: none; white-space: nowrap; padding: 0.45rem 0.95rem; border-radius: 9px; border: none; cursor: pointer; background: transparent; font-size: 0.82rem; font-weight: 600; color: var(--apple-text); transition: background 0.2s ease, box-shadow 0.2s ease; @@ -89,14 +91,18 @@ .res-card .res-meta { font-size: 0.72rem; color: var(--apple-gray); display: flex; align-items: center; gap: 0.3rem; } .res-card .res-meta svg { width: 0.85rem; height: 0.85rem; flex: none; } .res-empty { - padding: 2.5rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.9rem; - background: #fff; border: 1px dashed rgba(0, 0, 0, 0.12); border-radius: 16px; + display: flex; flex-direction: column; align-items: center; gap: 0.6rem; + padding: 2.2rem 1rem; text-align: center; color: var(--apple-gray); font-size: 0.88rem; + background: rgba(0, 0, 0, 0.022); border-radius: 14px; } + .res-empty svg { width: 1.9rem; height: 1.9rem; color: rgba(0, 0, 0, 0.18); } @media (max-width: 640px) { .tags-page { padding: 1.35rem 1rem 2.5rem; } .tag-header h1 { font-size: 1.6rem; } .res-grid { grid-template-columns: 1fr; } + .seg-tab { padding: 0.38rem 0.45rem; font-size: 0.76rem; gap: 0.3rem; } + .seg-tab .tab-count { min-width: 1.1rem; height: 1rem; padding: 0 0.28rem; font-size: 0.62rem; } } @@ -166,7 +172,12 @@ {% endfor %} {% else %} -