From 1e10c43fef380574c521879d83fc69188af5e476 Mon Sep 17 00:00:00 2001
From: projectdx <com114@gmail.com>
Date: Fri, 2 Jan 2026 23:33:45 +0900
Subject: [PATCH] v0.4.17: Modernize Ohli24 action buttons UI

---
 README.md                                   |  7 +++
 info.yaml                                   |  2 +-
 static/css/ohli24.css                       | 52 ++++++++++++++++++++-
 templates/anime_downloader_ohli24_list.html | 10 ++--
 4 files changed, 63 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 59801f8..283eade 100644
--- a/README.md
+++ b/README.md
@@ -71,6 +71,13 @@
 
 ## 📝 변경 이력 (Changelog)
 
+### v0.4.17 (2026-01-02)
+- **Ohli24 액션 버튼 디자인 고도화**:
+    - 목록 페이지의 버튼들("작품보기", "보기", "삭제" 등)을 더 심플하고 미니멀한 `.btn-minimal` 디자인으로 개편
+    - "보기" 버튼에 세련된 블루 그래디언트와 강조 효과 적용
+    - 호버 시 자연스러운 애니메이션 및 상호작용 피드백 추가
+    - 삭제 버튼의 시각적 강조를 줄여 전반적인 인터페이스 정돈
+
 ### v0.4.15 (2026-01-02)
 - **Ohli24 날짜 표시 및 디자인 개선**:
     - 요청일(시작) 및 완료일 배지에 색상 구분 적용 (Slate/Green) 및 "시작:", "완료:" 라벨 추가
diff --git a/info.yaml b/info.yaml
index 912da34..f7dbb13 100644
--- a/info.yaml
+++ b/info.yaml
@@ -1,5 +1,5 @@
 title: "애니 다운로더"
-version: "0.4.16"
+version: "0.4.17"
 package_name: "anime_downloader"
 developer: "projectdx"
 description: "anime downloader"
diff --git a/static/css/ohli24.css b/static/css/ohli24.css
index cc30059..3ed7c7f 100644
--- a/static/css/ohli24.css
+++ b/static/css/ohli24.css
@@ -256,8 +256,56 @@ ul.nav.nav-pills .nav-link.active {
         min-width: 320px;
     }
     
-    .ohli24-list-page .episode-actions { display: flex; flex-wrap: nowrap; gap: 6px; }
-    .ohli24-list-page .episode-actions .btn { flex: none; width: auto; min-width: 80px; font-size: 11px !important; }
+    .ohli24-list-page .episode-actions { 
+        display: flex; 
+        flex-wrap: wrap; 
+        gap: 8px; 
+    }
+
+    .ohli24-list-page .btn-minimal {
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        color: #cbd5e1 !important;
+        font-size: 11px !important;
+        padding: 5px 12px !important;
+        border-radius: 8px !important;
+        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        font-weight: 500 !important;
+        white-space: nowrap;
+    }
+
+    .ohli24-list-page .btn-minimal i { font-size: 12px; opacity: 0.8; }
+
+    .ohli24-list-page .btn-minimal:hover {
+        background: rgba(255, 255, 255, 0.12);
+        border-color: rgba(255, 255, 255, 0.2);
+        transform: translateY(-1px);
+        color: #fff !important;
+    }
+
+    /* Primary Watch Button */
+    .ohli24-list-page .btn-watch-primary {
+        background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
+        border: none !important;
+        color: white !important;
+        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
+    }
+
+    .ohli24-list-page .btn-watch-primary:hover {
+        background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%) !important;
+        box-shadow: 0 6px 15px rgba(37, 99, 235, 0.4);
+        transform: translateY(-2px);
+    }
+
+    /* Danger Hover for Remove */
+    .ohli24-list-page .btn-remove-alt:hover {
+        background: rgba(239, 68, 68, 0.15) !important;
+        border-color: rgba(239, 68, 68, 0.3) !important;
+        color: #f87171 !important;
+    }
 }
 
 /* Queue Specific Styles - Scoped to Queue Page */
diff --git a/templates/anime_downloader_ohli24_list.html b/templates/anime_downloader_ohli24_list.html
index ec4a299..09e4445 100644
--- a/templates/anime_downloader_ohli24_list.html
+++ b/templates/anime_downloader_ohli24_list.html
@@ -491,19 +491,19 @@
                         <div class="episode-right-col">
                             <div class="date-info">${dateHtml}</div>
                             <div class="episode-actions">
-                                <button data-content_code="${item.content_code}" class="btn btn-outline-info btn-request">
+                                <button data-content_code="${item.content_code}" class="btn-minimal btn-request">
                                     <i class="fa fa-search"></i> 작품보기
                                 </button>
-                                <button data-title="${item.title}" class="btn btn-outline-secondary btn-self-search">
+                                <button data-title="${item.title}" class="btn-minimal btn-self-search">
                                     <i class="fa fa-list"></i> 목록검색
                                 </button>
-                                <button data-id="${item.id}" class="btn btn-outline-dark btn-json">
+                                <button data-id="${item.id}" class="btn-minimal btn-json">
                                     <i class="fa fa-code"></i> JSON
                                 </button>
-                                <button data-id="${item.id}" class="btn btn-outline-danger btn-remove">
+                                <button data-id="${item.id}" class="btn-minimal btn-remove btn-remove-alt">
                                     <i class="fa fa-trash"></i> 삭제
                                 </button>
-                                ${item.status == 'completed' ? `<button data-path="${item.savepath}/${item.filename}" class="btn btn-outline-success btn-watch"><i class="fa fa-play"></i> 보기</button>` : ''}
+                                ${item.status == 'completed' ? `<button data-path="${item.savepath}/${item.filename}" class="btn-minimal btn-watch btn-watch-primary"><i class="fa fa-play"></i> 보기</button>` : ''}
                             </div>
                         </div>
                     </div>