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

feat: 라이트 모드 전면 재설계 - 배경/카드 대비 강화

Browse source 
- 배경색을 더 어둡게 (#e5e7eb) 변경하여 흰색 카드와 대비 확보
- 30개 이상 하드코딩 색상 클래스 오버라이드
- Admin 페이지: 콘솔/로그/모드팩 영역 밝은 색상 적용
- Modpack 페이지: 모든 아이템 카드 흰색 배경+테두리
- 구분선/테두리 진하게 조정
- 콘솔 터미널은 가독성을 위해 어두운 배경 유지
This commit is contained in:
caadiq 2025-12-31 19:30:32 +09:00
parent a6581fa27d
commit 48d49d303b
1 changed files with 69 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

99
frontend/src/index.css
View file

@ -24,32 +24,31 @@
/* 라이트 테마 */ /* 라이트 테마 */
.light { .light {
--bg-primary: #f8fafc; /* 배경 - 약간 어두운 회색 계열로 카드와 대비 */
--bg-secondary: #ffffff; --bg-primary: #e5e7eb;
--bg-tertiary: #f1f5f9; --bg-secondary: #f3f4f6;
--bg-tertiary: #d1d5db;
--bg-card: #ffffff; --bg-card: #ffffff;
--bg-hover: rgba(0, 0, 0, 0.05); --bg-hover: rgba(0, 0, 0, 0.08);
--text-primary: #18181b; /* 텍스트 */
--text-secondary: #52525b; --text-primary: #111827;
--text-tertiary: #71717a; --text-secondary: #374151;
--text-muted: #a1a1aa; --text-tertiary: #6b7280;
--text-muted: #9ca3af;
--border-color: rgba(0, 0, 0, 0.1); /* 테두리 - 더 진하게 */
--border-subtle: rgba(0, 0, 0, 0.05); --border-color: rgba(0, 0, 0, 0.15);
--border-subtle: rgba(0, 0, 0, 0.08);
--shadow-color: rgba(0, 0, 0, 0.1); --shadow-color: rgba(0, 0, 0, 0.15);
/* 글래스 및 카드 */ /* 글래스 및 카드 - 흰색 배경 + 그림자로 대비 */
--glass-bg: rgba(255, 255, 255, 0.9); --glass-bg: rgba(255, 255, 255, 0.95);
--glass-border: rgba(0, 0, 0, 0.1); --glass-border: rgba(0, 0, 0, 0.12);
--glass-dark-bg: rgba(248, 250, 252, 0.95); --glass-dark-bg: rgba(255, 255, 255, 0.98);
--card-bg: linear-gradient( --card-bg: #ffffff;
135deg, --card-border: rgba(0, 0, 0, 0.12);
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.98) 100%
);
--card-border: rgba(0, 0, 0, 0.1);
} }
/* 라이트 모드 Tailwind 색상 오버라이드 */ /* 라이트 모드 Tailwind 색상 오버라이드 */
@ -113,33 +112,73 @@
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.06) !important; border-color: rgba(0, 0, 0, 0.1) !important;
} }
.light .bg-black\/20, .light .bg-black\/20,
.light .bg-black\/30 { .light .bg-black\/30,
background-color: rgba(0, 0, 0, 0.03) !important; .light .bg-black\/40,
.light .bg-black\/50,
.light .bg-black\/60 {
background-color: rgba(0, 0, 0, 0.05) !important;
} }
.light .hover\:bg-black\/30:hover { .light .hover\:bg-black\/30:hover {
background-color: rgba(0, 0, 0, 0.06) !important; background-color: rgba(0, 0, 0, 0.08) !important;
} }
/* 관리자 페이지 배경 */ /* 관리자/모드팩 페이지 배경 - 밝은 색상으로 */
.light .bg-mc-bg, .light .bg-mc-bg,
.light .bg-mc-card, .light .bg-mc-card,
.light .bg-mc-gray { .light .bg-mc-gray,
background-color: #f8fafc !important; .light .bg-mc-gray-light {
background-color: #f3f4f6 !important;
} }
/* 하드코딩된 어두운 배경색 오버라이드 */
.light .bg-\[\#1a1a1a\], .light .bg-\[\#1a1a1a\],
.light .bg-\[\#141414\], .light .bg-\[\#141414\],
.light .bg-\[\#1c1c1c\], .light .bg-\[\#1c1c1c\],
.light .bg-\[\#252525\] { .light .bg-\[\#252525\],
.light .bg-\[\#2a2a2a\],
.light .bg-\[\#333333\],
.light .bg-\[\#0a0a0a\],
.light .bg-\[\#111\],
.light .bg-\[\#18181b\],
.light .bg-\[\#1f1f1f\] {
background-color: #ffffff !important; background-color: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* 모드팩 아이템 카드 */
.light .bg-gradient-to-br.from-zinc-800,
.light .bg-zinc-800\/50,
.light .bg-zinc-800\/80,
.light .bg-zinc-900\/50,
.light .bg-zinc-900\/80 {
background: #ffffff !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
/* 콘솔/터미널 스타일 - 라이트 모드에서도 어두운 배경 유지 (가독성) */
.light .font-mono.bg-black,
.light .bg-black.text-green-400 {
background-color: #1e1e1e !important;
color: #d4d4d4 !important;
}
/* 텍스트 색상 추가 오버라이드 */
.light .text-zinc-100,
.light .text-zinc-200 {
color: #111827 !important;
}
.light .text-zinc-500,
.light .text-zinc-600 {
color: #6b7280 !important;
} }
/* 기본 html, body 스타일 */ /* 기본 html, body 스타일 */