ff_plugins/anime_downloader
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

v0.4.17: Modernize Ohli24 action buttons UI

Browse Source
This commit is contained in:
projectdx
2026-01-02 23:33:45 +09:00
parent c42c7b756f
commit 1e10c43fef
4 changed files with 63 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@@ -71,6 +71,13 @@
## 📝 변경 이력 (Changelog)
### v0.4.17 (2026-01-02)
- **Ohli24 액션 버튼 디자인 고도화**:
- 목록 페이지의 버튼들("작품보기", "보기", "삭제" 등)을 더 심플하고 미니멀한 `.btn-minimal` 디자인으로 개편
- "보기" 버튼에 세련된 블루 그래디언트와 강조 효과 적용
- 호버 시 자연스러운 애니메이션 및 상호작용 피드백 추가
- 삭제 버튼의 시각적 강조를 줄여 전반적인 인터페이스 정돈
### v0.4.15 (2026-01-02)
- **Ohli24 날짜 표시 및 디자인 개선**:
- 요청일(시작) 및 완료일 배지에 색상 구분 적용 (Slate/Green) 및 "시작:", "완료:" 라벨 추가

2
info.yaml
View File

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

52
static/css/ohli24.css
View File

@@ -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 */

10
templates/anime_downloader_ohli24_list.html
View File

@@ -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>