툴바 버튼 수정

This commit is contained in:
2026-05-14 17:11:00 +09:00
parent e002e4e72d
commit d0eca5f477
2 changed files with 11 additions and 7 deletions
+2 -3
View File
@@ -14,15 +14,14 @@
<div id="toolbar"> <div id="toolbar">
<button class="btn btn-warning" id="btn-open"><span>📁</span>폴더 열기 (O)</button> <button class="btn btn-warning" id="btn-open"><span>📁</span>폴더 열기 (O)</button>
<button class="btn btn-success" id="btn-rename" disabled><span></span>이름 변경 실행 (S)</button>
<div class="separator"></div> <div class="separator"></div>
<div class="sort-group"> <div class="sort-group">
<button class="sort-btn" id="btn-sort-name">이름순</button> <button class="sort-btn" id="btn-sort-name">이름순</button>
<button class="sort-btn" id="btn-sort-date">날짜순</button> <button class="sort-btn" id="btn-sort-date">날짜순</button>
</div> </div>
<div class="separator"></div> <div class="separator"></div>
<button class="btn btn-success" id="btn-rename" disabled><span></span>이름 변경 실행 (S)</button> <button class="btn btn-info active" id="btn-preview-toggle">🔍 미리보기</button>
<div class="separator"></div>
<button class="btn btn-ghost active" id="btn-preview-toggle">🔍 미리보기</button>
<div style="margin-left:auto; display:flex; align-items:center; gap:8px;"> <div style="margin-left:auto; display:flex; align-items:center; gap:8px;">
<span class="dir-path" id="dir-path">폴더를 선택하세요</span> <span class="dir-path" id="dir-path">폴더를 선택하세요</span>
<button class="btn btn-warning" id="btn-reveal" disabled>Finder에서 열기</button> <button class="btn btn-warning" id="btn-reveal" disabled>Finder에서 열기</button>
+9 -4
View File
@@ -9,6 +9,7 @@
--accent2: #e96af7; --accent2: #e96af7;
--success: #6af7a0; --success: #6af7a0;
--warning: #f7c26a; --warning: #f7c26a;
--info: #6ac8f7;
--text: #e8e8f0; --text: #e8e8f0;
--muted: #6b6b8a; --muted: #6b6b8a;
--drag-over: #3a2e70; --drag-over: #3a2e70;
@@ -83,10 +84,14 @@ body.fullscreen #titlebar {
.btn-ghost:hover { background: var(--card); } .btn-ghost:hover { background: var(--card); }
.btn-ghost:disabled { color: var(--muted); border-color: var(--border); opacity: .4; cursor: not-allowed; } .btn-ghost:disabled { color: var(--muted); border-color: var(--border); opacity: .4; cursor: not-allowed; }
.btn-ghost.active { border-color: var(--accent); color: var(--accent); } .btn-ghost.active { border-color: var(--accent); color: var(--accent); }
.btn-info { background: #0d2535; color: var(--info); border: 1px solid #1a4060; }
.btn-info:hover { background: #132e42; }
.btn-info:disabled { opacity: .4; cursor: not-allowed; }
.btn-info:not(.active) { opacity: .4; }
.sort-group { .sort-group {
display: flex; display: flex;
background: var(--card); background: #0d2535;
border: 1px solid var(--border); border: 1px solid #1a4060;
border-radius: 8px; border-radius: 8px;
padding: 3px; padding: 3px;
gap: 2px; gap: 2px;
@@ -99,8 +104,8 @@ body.fullscreen #titlebar {
background: transparent; color: var(--muted); background: transparent; color: var(--muted);
transition: background .15s, color .15s; transition: background .15s, color .15s;
} }
.sort-btn:hover { background: var(--surface); color: var(--text); } .sort-btn:hover { background: #132e42; color: var(--info); }
.sort-btn.active { background: var(--accent); color: #fff; } .sort-btn.active { background: #1a3a4a; color: var(--info); }
.btn-success { background: #1a4a2e; color: var(--success); border: 1px solid #2a6a40; } .btn-success { background: #1a4a2e; color: var(--success); border: 1px solid #2a6a40; }
.btn-success:hover { background: #204a34; } .btn-success:hover { background: #204a34; }
.btn-success:disabled { opacity: .4; cursor: not-allowed; transform: none; } .btn-success:disabled { opacity: .4; cursor: not-allowed; transform: none; }