v0.5.1: Mobile UX improvements - Custom notify styling, nav margin fixes, search button optimization

2026-01-02 15:37:55 +09:00
parent 4e9203ed00
commit c662d2dadc
16 changed files with 2215 additions and 592 deletions
--- a/templates/anime_downloader_linkkf_list.html
+++ b/templates/anime_downloader_linkkf_list.html
@@ -546,6 +546,143 @@ $(document).ready(function(){
        }
        .playlist-item:hover { background: rgba(16, 185, 129, 0.1); color: #fff; }
        .playlist-item.active { background: rgba(16, 185, 129, 0.2); color: #10b981; font-weight: 600; border-left: 3px solid #10b981; }
+
+        /* ========== Mobile Video Modal Fix ========== */
+        @media (max-width: 768px) {
+            /* 모달 크기 조정 */
+            .modal-dialog.modal-xl {
+                margin: 10px auto !important;
+                max-width: calc(100vw - 20px) !important;
+            }
+            
+            /* 비디오 높이 제한 */
+            #video-player, .video-js {
+                max-height: 45vh !important;
+            }
+            
+            /* 플레이리스트 높이 제한 */
+            #playlist-list-container {
+                max-height: 25vh !important;
+            }
+            
+            /* 플레이리스트 컨트롤 간소화 */
+            .playlist-controls {
+                padding: 8px 12px !important;
+            }
+            .playlist-controls > div {
+                gap: 8px !important;
+            }
+            #current-video-title {
+                font-size: 12px !important;
+                min-width: auto !important;
+            }
+            #playlist-progress {
+                font-size: 10px !important;
+            }
+            
+            /* 네비게이션 z-index 보장 */
+            ul.nav.nav-pills {
+                position: relative;
+                z-index: 1000;
+            }
+            
+            /* 콘텐츠 상단 여백 */
+            .content-cloak {
+                padding-top: 10px !important;
+            }
+            
+            /* 아이템 액션 버튼 스크롤 */
+            .item-actions {
+                flex-wrap: nowrap !important;
+                overflow-x: auto !important;
+                -webkit-overflow-scrolling: touch;
+                padding-bottom: 4px;
+            }
+            .action-btn {
+                flex-shrink: 0;
+            }
+            
+            /* 전체 레이아웃 */
+            body { overflow-x: hidden !important; }
+            .container, .container-fluid, #main_container {
+                width: 100% !important; max-width: 100% !important;
+                padding-left: 4px !important; padding-right: 4px !important;
+            }
+        }
+
+        /* 초소형 모바일 (400px 미만) */
+        @media (max-width: 400px) {
+            #video-player, .video-js {
+                max-height: 35vh !important;
+            }
+            
+            #playlist-list-container {
+                max-height: 20vh !important;
+            }
+            
+            .playlist-nav-btn {
+                width: 32px !important;
+                height: 32px !important;
+                font-size: 12px !important;
+            }
+            
+            .playlist-toggle-btn {
+                padding: 6px 10px !important;
+                font-size: 11px !important;
+            }
+            
+            .item-title {
+                font-size: 13px !important;
+            }
+            .item-meta {
+                font-size: 11px !important;
+            }
+        }
+        
+        /* Mobile Nav Pills Fix */
+        @media (max-width: 768px) {
+            ul.nav.nav-pills.bg-light {
+                margin-top: 50px !important;
+                margin-bottom: 10px !important;
+            }
+        }
+        
+        /* Custom Notify Styling (Forest Theme) */
+        .bootstrap-notify-container,
+        [data-notify="container"] {
+            max-width: 90vw !important;
+            width: auto !important;
+            right: 5vw !important;
+            left: 5vw !important;
+            padding: 12px 16px !important;
+            border-radius: 10px !important;
+            background: rgba(2, 44, 34, 0.95) !important;
+            backdrop-filter: blur(10px) !important;
+            border: 1px solid rgba(16, 185, 129, 0.3) !important;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
+            color: #ecfdf5 !important;
+            font-size: 13px !important;
+            z-index: 10000 !important;
+        }
+        [data-notify="container"].alert-success {
+            border-color: rgba(52, 211, 153, 0.4) !important;
+            background: rgba(6, 78, 59, 0.95) !important;
+        }
+        [data-notify="container"].alert-warning {
+            border-color: rgba(251, 191, 36, 0.4) !important;
+            background: rgba(120, 53, 15, 0.95) !important;
+        }
+        [data-notify="container"].alert-danger {
+            border-color: rgba(239, 68, 68, 0.4) !important;
+            background: rgba(127, 29, 29, 0.95) !important;
+        }
+        [data-notify="message"] {
+            color: #ecfdf5 !important;
+        }
+        [data-notify="title"] {
+            color: #fff !important;
+            font-weight: 600 !important;
+        }
    </style>

    <script type="text/javascript">