koriweb
d73e11f0fd
- keyboard-first culling in the library grid: cursor nav (arrows), 1-5 rating, P/X pick/reject labels, [ ] cycle color, Space preview, Delete trash - toast + in-app confirm/prompt overlays replace all native alert/confirm/prompt; delete is now Gmail-style deferred trash with Undo - smart quick-filter chips (today / this week / this year / best 4+ / videos), backed by a new mtime date-range filter in AssetQuery - selection gestures: shift-click range, Ctrl/Cmd+A select-all, Esc clear - mosaic: grid lines, lower default density/blend, click tile to view source - user guide updated: library, culling, shortcuts, search/map/groups, mosaic Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
98 lines
2.2 KiB
CSS
98 lines
2.2 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
}
|
|
|
|
/* darktable 톤: 밀도 높은 프로 도구 느낌.
|
|
창 너비에 따라 rem 기준값을 자동 보간 → 폰트·아이콘·사이드바(rem 기반)가 함께 스케일되어
|
|
해상도가 달라져도 버튼 라벨이 줄바꿈 없이 들어맞는다. (쉬운 모드는 고정 20px) */
|
|
html {
|
|
font-size: clamp(13px, 0.45vw + 10px, 17px);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
|
|
background: #e6e5e3; /* light: 중성 회색 */
|
|
color: #2a2926;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* 다크(기본) 테마 = darktable 다크 */
|
|
html.dark body {
|
|
background: #1a1918;
|
|
color: #cfceca;
|
|
}
|
|
|
|
/* 파일 목록 가독성용 모노 폰트 */
|
|
.mono {
|
|
font-family: 'Cascadia Code', 'Consolas', monospace;
|
|
}
|
|
|
|
/* 토스트 등장 */
|
|
@keyframes fadeIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(6px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* darktable식 얇은 스크롤바 */
|
|
::-webkit-scrollbar {
|
|
width: 10px;
|
|
height: 10px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: transparent;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: #4a4a48;
|
|
border-radius: 2px;
|
|
border: 2px solid transparent;
|
|
background-clip: content-box;
|
|
}
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: #5e5e5b;
|
|
background-clip: content-box;
|
|
}
|
|
html:not(.dark) ::-webkit-scrollbar-thumb {
|
|
background: #bdbcb8;
|
|
background-clip: content-box;
|
|
}
|
|
|
|
/* 입력 요소 포커스 링을 앰버로 */
|
|
input:focus-visible,
|
|
select:focus-visible,
|
|
button:focus-visible {
|
|
outline: 1px solid #d98c3f;
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
/* 슬라이더/체크박스 강조색을 앰버로 (제너릭 파랑 제거) */
|
|
input[type='range'],
|
|
input[type='checkbox'],
|
|
input[type='radio'] {
|
|
accent-color: #d98c3f;
|
|
}
|
|
|
|
/* 4050 쉬운 모드: <html class="easy"> — rem 기준 전체 확대 + 큰 썸네일 */
|
|
html.easy {
|
|
font-size: 20px; /* 기본 16px → rem 기반 Tailwind 유틸 전반 확대 */
|
|
}
|
|
/* 썸네일 그리드를 더 크게 (열 수 축소) */
|
|
html.easy .grid-cols-6 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
html.easy .grid-cols-5 {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|