Add horizontal scroll hint (fade) to mobile menus (v0.7.6)

This commit is contained in:
2026-01-12 21:32:24 +09:00
parent 59b7715a93
commit ecc16520be
3 changed files with 40 additions and 4 deletions

View File

@@ -84,6 +84,12 @@
## 📝 변경 이력 (Changelog) ## 📝 변경 이력 (Changelog)
### v0.7.6 (2026-01-12)
- **모바일 상단 메뉴 스크롤 힌트 도입**:
- 메뉴가 가로로 길어질 때 우측에 은은한 페이드 효과를 추가하여 '더 많은 메뉴'가 있음을 직관적으로 알 수 있도록 개선했습니다.
- 아주 가늘고 투명한 스크롤바 가이드를 추가하여 모던한 감성을 더했습니다.
- CSS 구문 최적화 및 미디어 쿼리 중복을 정리했습니다.
### v0.7.5 (2026-01-12) ### v0.7.5 (2026-01-12)
- **모바일 레이아웃 가로 핏 완벽 최적화**: - **모바일 레이아웃 가로 핏 완벽 최적화**:
- 화면이 70%만 보이고 오른쪽으로 밀리던 현상을 해결하기 위해 전역적인 너비 정규화(`width: 100%`)와 오버플로우 차단을 적용했습니다. - 화면이 70%만 보이고 오른쪽으로 밀리던 현상을 해결하기 위해 전역적인 너비 정규화(`width: 100%`)와 오버플로우 차단을 적용했습니다.

View File

@@ -1,5 +1,5 @@
title: "애니 다운로더" title: "애니 다운로더"
version: 0.7.5 version: 0.7.6
package_name: "anime_downloader" package_name: "anime_downloader"
developer: "projectdx" developer: "projectdx"
description: "anime downloader" description: "anime downloader"

View File

@@ -107,7 +107,27 @@
margin: 0 !important; margin: 0 !important;
} }
/* Global Navigation Pills Fix */ /* Scroll Hint Container Fix */
#menu_module_div, #menu_page_div {
position: relative;
width: 100% !important;
overflow: hidden;
}
/* Gradient Hint to indicate more items (Scroll Hint) */
#menu_module_div::after, #menu_page_div::after {
content: '';
position: absolute;
top: 4px; bottom: 4px; right: 0;
width: 40px;
background: linear-gradient(to right, transparent, rgba(30, 41, 59, 0.9));
pointer-events: none;
z-index: 10;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
/* Navigation Pills Styling */
ul.nav.nav-pills.bg-light { ul.nav.nav-pills.bg-light {
background-color: rgba(30, 41, 59, 0.6) !important; background-color: rgba(30, 41, 59, 0.6) !important;
backdrop-filter: blur(10px); backdrop-filter: blur(10px);
@@ -123,7 +143,17 @@
max-width: 100% !important; max-width: 100% !important;
box-sizing: border-box !important; box-sizing: border-box !important;
margin-top: 2px !important; margin-top: 2px !important;
justify-content: flex-start !important; /* Critical for scrollable access */ justify-content: flex-start !important;
scrollbar-width: thin; /* Firefox */
}
/* Subtle scrollbar hint for mobile */
ul.nav.nav-pills.bg-light::-webkit-scrollbar {
height: 3px;
}
ul.nav.nav-pills.bg-light::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.15);
border-radius: 10px;
} }
ul.nav.nav-pills .nav-item { ul.nav.nav-pills .nav-item {
@@ -132,7 +162,7 @@
ul.nav.nav-pills .nav-link { ul.nav.nav-pills .nav-link {
border-radius: 6px !important; border-radius: 6px !important;
padding: 6px 12px !important; padding: 6px 14px !important;
color: #94a3b8 !important; color: #94a3b8 !important;
font-weight: 600; font-weight: 600;
transition: all 0.3s ease; transition: all 0.3s ease;