hehihoho3/h-lab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): collection page readable in light theme

Browse Source 
Tokenized dark-assuming inline colors (white title/dropdown text, translucent
white surfaces, #1e1e2d modal) so the collection table renders correctly in the
light theme; header uses shared page-header.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
hehihoho3@gmail.com 2026-06-12 22:39:45 +09:00
parent adb51943a3
commit 7497cb08ce
1 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/main/resources/templates/collection.html
View File

@ -8,10 +8,12 @@
<body> <body>
<div layout:fragment="content"> <div layout:fragment="content">
<header class="mb-4"> <div class="page-header">
<h1 class="text-2xl font-bold mb-2">수집함 (Collection)</h1> <div>
<p class="text-muted">수집한 영상을 분류·발굴하고 재가공 대상을 관리합니다.</p> <h1>수집함</h1>
</header> <p class="sub">수집한 영상을 분류·발굴하고 재가공 대상을 관리합니다.</p>
</div>
</div>
<!-- 카테고리 관리 --> <!-- 카테고리 관리 -->
<div class="card mb-4"> <div class="card mb-4">
@ -28,12 +30,12 @@
<div style="display:flex; flex-direction:column; gap:4px;"> <div style="display:flex; flex-direction:column; gap:4px;">
<label class="text-sm text-muted">이름</label> <label class="text-sm text-muted">이름</label>
<input id="catName" type="text" placeholder="예: 동물 썰" <input id="catName" type="text" placeholder="예: 동물 썰"
style="padding:8px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:white; outline:none;"> style="padding:8px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md); color:var(--text); outline:none;">
</div> </div>
<div style="display:flex; flex-direction:column; gap:4px;"> <div style="display:flex; flex-direction:column; gap:4px;">
<label class="text-sm text-muted">색상</label> <label class="text-sm text-muted">색상</label>
<input id="catColor" type="color" value="#7C3AED" <input id="catColor" type="color" value="#7C3AED"
style="padding:2px; height:42px; width:56px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:var(--radius-md);"> style="padding:2px; height:42px; width:56px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:var(--radius-md);">
</div> </div>
<button class="btn btn-primary px-4 py-2" onclick="addCategory()">추가</button> <button class="btn btn-primary px-4 py-2" onclick="addCategory()">추가</button>
</div> </div>
@ -96,7 +98,7 @@
<!-- 결과 테이블 --> <!-- 결과 테이블 -->
<div class="card p-0" style="overflow-x:auto;"> <div class="card p-0" style="overflow-x:auto;">
<table class="w-full" style="border-collapse:collapse; text-align:left;"> <table class="w-full" style="border-collapse:collapse; text-align:left;">
<thead style="background:rgba(255,255,255,0.02); border-bottom:1px solid var(--glass-border);"> <thead style="background:var(--surface-2); border-bottom:1px solid var(--glass-border);">
<tr> <tr>
<th class="p-3 text-sm font-bold text-muted">썸네일</th> <th class="p-3 text-sm font-bold text-muted">썸네일</th>
<th class="p-3 text-sm font-bold text-muted">제목</th> <th class="p-3 text-sm font-bold text-muted">제목</th>
@ -118,7 +120,7 @@
<!-- 영상 모달 --> <!-- 영상 모달 -->
<div id="videoModal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;" onclick="if(event.target===this) closeVideoModal()"> <div id="videoModal" style="display:none; position:fixed; z-index:1000; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.85); align-items:center; justify-content:center;" onclick="if(event.target===this) closeVideoModal()">
<div style="position:relative; width:95%; max-width:900px; background:var(--glass-bg,#1e1e2d); border-radius:12px; padding:16px; border:1px solid var(--glass-border);"> <div style="position:relative; width:95%; max-width:900px; background:var(--glass-bg,var(--surface)); border-radius:12px; padding:16px; border:1px solid var(--glass-border);">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;"> <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
<h3 class="text-lg font-bold truncate pr-4" id="modalTitle">Video</h3> <h3 class="text-lg font-bold truncate pr-4" id="modalTitle">Video</h3>
<button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:28px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button> <button onclick="closeVideoModal()" class="text-muted hover:text-white" style="font-size:28px; line-height:1; background:none; border:none; cursor:pointer;">&times;</button>
@ -129,8 +131,8 @@
<style> <style>
.hidden { display:none !important; } .hidden { display:none !important; }
.row-sel { padding:4px 6px; background:rgba(255,255,255,0.05); border:1px solid var(--glass-border); border-radius:6px; color:white; font-size:0.8rem; outline:none; } .row-sel { padding:4px 6px; background:var(--surface-2); border:1px solid var(--glass-border); border-radius:6px; color:var(--text); font-size:0.8rem; outline:none; }
.row-sel option { background:#1e1e2d; color:white; } .row-sel option { background:var(--surface); color:var(--text); }
.cat-chip { padding:4px 10px; border-radius:999px; font-size:0.8rem; display:inline-flex; align-items:center; gap:6px; } .cat-chip { padding:4px 10px; border-radius:999px; font-size:0.8rem; display:inline-flex; align-items:center; gap:6px; }
</style> </style>
@ -257,11 +259,11 @@
</td> </td>
<td class="p-3" style="max-width:280px;"> <td class="p-3" style="max-width:280px;">
<div class="font-bold text-sm" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;"> <div class="font-bold text-sm" style="display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;">
<a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline text-white">${esc(v.title)}</a>${shortsBadge} <a href="https://www.youtube.com/watch?v=${v.videoId}" target="_blank" class="hover:underline">${esc(v.title)}</a>${shortsBadge}
</div> </div>
</td> </td>
<td class="p-3 text-sm text-muted" style="max-width:130px;"> <td class="p-3 text-sm text-muted" style="max-width:130px;">
<a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:#e2e8f0;">${esc(v.channelTitle||'-')}</a> <a href="${v.ytChannelId?('https://www.youtube.com/channel/'+v.ytChannelId):'#'}" target="_blank" class="hover:underline truncate" style="color:var(--text-2);">${esc(v.channelTitle||'-')}</a>
</td> </td>
<td class="p-3 text-sm">${fmt(v.subscriberCount)}</td> <td class="p-3 text-sm">${fmt(v.subscriberCount)}</td>
<td class="p-3 text-sm">${fmt(v.viewCount)}</td> <td class="p-3 text-sm">${fmt(v.viewCount)}</td>