caadiq/minecraft-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 라이트 모드 추가 색상 수정

Browse source 
- zinc 색상 오버라이드 (bg-zinc-*, text-zinc-*, hover:bg-zinc-*)
- 구분선 색상 더 연하게 (6%)
- 배경색/호버 더 연하게 (3% → 6%)
- 관리자 페이지 배경 오버라이드 (bg-mc-*, bg-[#xxx])

전체 라이트 모드 가독성 개선
This commit is contained in:
caadiq 2025-12-31 19:25:54 +09:00
parent 381955fd9f
commit a6581fa27d
1 changed files with 46 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
frontend/src/index.css
View file

@ -73,32 +73,73 @@
color: #a1a1aa !important; color: #a1a1aa !important;
} }
/* zinc 색상 오버라이드 */
.light .text-zinc-300 {
color: #52525b !important;
}
.light .text-zinc-400 {
color: #71717a !important;
}
.light .bg-zinc-700,
.light .bg-zinc-800,
.light .bg-zinc-900 {
background-color: #f1f5f9 !important;
}
.light .hover\:bg-zinc-700:hover,
.light .hover\:bg-zinc-800:hover {
background-color: #e2e8f0 !important;
}
.light .border-zinc-700,
.light .border-zinc-800 {
border-color: rgba(0, 0, 0, 0.08) !important;
}
/* 배경색 오버라이드 */
.light .bg-white\/5, .light .bg-white\/5,
.light .bg-white\/10 { .light .bg-white\/10 {
background-color: rgba(0, 0, 0, 0.05) !important; background-color: rgba(0, 0, 0, 0.03) !important;
} }
.light .hover\:bg-white\/5:hover, .light .hover\:bg-white\/5:hover,
.light .hover\:bg-white\/10:hover { .light .hover\:bg-white\/10:hover {
background-color: rgba(0, 0, 0, 0.08) !important; background-color: rgba(0, 0, 0, 0.06) !important;
} }
.light .hover\:text-white:hover { .light .hover\:text-white:hover {
color: #18181b !important; color: #18181b !important;
} }
/* 구분선 오버라이드 - 더 연하게 */
.light .border-white\/5, .light .border-white\/5,
.light .border-white\/10 { .light .border-white\/10 {
border-color: rgba(0, 0, 0, 0.1) !important; border-color: rgba(0, 0, 0, 0.06) !important;
} }
.light .bg-black\/20, .light .bg-black\/20,
.light .bg-black\/30 { .light .bg-black\/30 {
background-color: rgba(0, 0, 0, 0.05) !important; background-color: rgba(0, 0, 0, 0.03) !important;
} }
.light .hover\:bg-black\/30:hover { .light .hover\:bg-black\/30:hover {
background-color: rgba(0, 0, 0, 0.08) !important; background-color: rgba(0, 0, 0, 0.06) !important;
}
/* 관리자 페이지 배경 */
.light .bg-mc-bg,
.light .bg-mc-card,
.light .bg-mc-gray {
background-color: #f8fafc !important;
}
.light .bg-\[\#1a1a1a\],
.light .bg-\[\#141414\],
.light .bg-\[\#1c1c1c\],
.light .bg-\[\#252525\] {
background-color: #ffffff !important;
} }
/* 기본 html, body 스타일 */ /* 기본 html, body 스타일 */