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_ohli24_list.html
+++ b/templates/anime_downloader_ohli24_list.html
@@ -1071,5 +1071,118 @@ $(document).ready(function(){
        overflow: auto !important;
        font-size: 12px !important;
    }
+
+    /* ========== Mobile Video Modal Fix ========== */
+    @media (max-width: 768px) {
+        /* 모달 크기 조정 - 비디오 모달만 */
+        #videoModal .modal-dialog {
+            margin: 10px auto !important;
+            max-width: calc(100vw - 20px) !important;
+            width: auto !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;
+        }
+        
+        /* 아이템 액션 버튼 스크롤 */
+        .item-actions {
+            flex-wrap: nowrap !important;
+            overflow-x: auto !important;
+            -webkit-overflow-scrolling: touch;
+            padding-bottom: 4px;
+        }
+        .action-btn {
+            flex-shrink: 0;
+        }
+    }
+
+    /* 초소형 모바일 (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;
+        }
+    }
+    
+    /* 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 (Slate Blue 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(15, 23, 42, 0.95) !important;
+        backdrop-filter: blur(10px) !important;
+        border: 1px solid rgba(59, 130, 246, 0.3) !important;
+        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4) !important;
+        color: #e2e8f0 !important;
+        font-size: 13px !important;
+        z-index: 10000 !important;
+    }
+    [data-notify="container"].alert-success {
+        border-color: rgba(34, 197, 94, 0.4) !important;
+        background: rgba(21, 128, 61, 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: #e2e8f0 !important;
+    }
+    [data-notify="title"] {
+        color: #fff !important;
+        font-weight: 600 !important;
+    }
 </style>
 {% endblock %}