Merge branch 'main' of https://g.wace.me/jskim/vexplor_dev into jskim-node
This commit is contained in:
kjs
+384
-129
@@ -410,7 +410,9 @@ select {
|
||||
border-radius: 4px !important;
|
||||
color: hsl(210 15% 55%) !important;
|
||||
opacity: 0.6;
|
||||
transition: opacity 0.15s, background 0.15s;
|
||||
transition:
|
||||
opacity 0.15s,
|
||||
background 0.15s;
|
||||
}
|
||||
[data-sonner-toaster] [data-sonner-toast] [data-close-button]:hover {
|
||||
background: hsl(220 20% 24%) !important;
|
||||
@@ -508,10 +510,10 @@ select {
|
||||
font-family: "Gaegu", cursive;
|
||||
}
|
||||
|
||||
/* ===== 전체 폰트 사이즈 16px 통일 (버튼 제외) ===== */
|
||||
/* ===== 전체 폰트 사이즈 16px 통일 (버튼 제외) =====
|
||||
body *:not(button, [role="button"], .kpi-dynamic-font) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
} */
|
||||
|
||||
body button *,
|
||||
body [role="button"] * {
|
||||
@@ -545,11 +547,18 @@ body span.messenger-time {
|
||||
|
||||
/* ===== 카드 펄스 도트 애니메이션 ===== */
|
||||
@keyframes screen-card-pulse {
|
||||
0%, 100% { opacity: 0; transform: scale(1); }
|
||||
50% { opacity: 0.35; transform: scale(2); }
|
||||
0%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1);
|
||||
}
|
||||
50% {
|
||||
opacity: 0.35;
|
||||
transform: scale(2);
|
||||
}
|
||||
}
|
||||
.screen-card-pulse-dot::after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -3px;
|
||||
border-radius: 50%;
|
||||
@@ -574,9 +583,18 @@ body span.messenger-time {
|
||||
|
||||
/* ===== 모달 필수 입력 검증 ===== */
|
||||
@keyframes validationShake {
|
||||
0%, 100% { transform: translateX(0); }
|
||||
20%, 60% { transform: translateX(-4px); }
|
||||
40%, 80% { transform: translateX(4px); }
|
||||
0%,
|
||||
100% {
|
||||
transform: translateX(0);
|
||||
}
|
||||
20%,
|
||||
60% {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
40%,
|
||||
80% {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* 흔들림 애니메이션 (일회성) */
|
||||
@@ -589,7 +607,6 @@ body span.messenger-time {
|
||||
border-color: hsl(var(--destructive)) !important;
|
||||
}
|
||||
|
||||
|
||||
/* 채번 세그먼트 포커스 스타일 (shadcn Input과 동일한 3단 구조) */
|
||||
.numbering-segment:focus-within {
|
||||
box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
|
||||
@@ -621,160 +638,398 @@ body span.messenger-time {
|
||||
/* 개별 컴포넌트 수정 없이, 이 한 곳에서 전체 프로젝트 커버 */
|
||||
|
||||
/* --- 1. 배경색: white/gray → 시맨틱 토큰 --- */
|
||||
.dark .bg-white { background-color: hsl(var(--card)) !important; }
|
||||
.dark .bg-gray-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-gray-200 { background-color: hsl(var(--accent)) !important; }
|
||||
.dark .bg-white {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
}
|
||||
.dark .bg-gray-50 {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
.dark .bg-gray-100 {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
.dark .bg-gray-200 {
|
||||
background-color: hsl(var(--accent)) !important;
|
||||
}
|
||||
|
||||
/* --- 2. 텍스트: gray → 시맨틱 토큰 --- */
|
||||
.dark .text-gray-400 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-gray-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-gray-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .text-gray-800 { color: hsl(var(--foreground) / 0.9) !important; }
|
||||
.dark .text-gray-900 { color: hsl(var(--foreground)) !important; }
|
||||
.dark .text-gray-400 {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
.dark .text-gray-500 {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
.dark .text-gray-600 {
|
||||
color: hsl(var(--foreground) / 0.7) !important;
|
||||
}
|
||||
.dark .text-gray-700 {
|
||||
color: hsl(var(--foreground) / 0.8) !important;
|
||||
}
|
||||
.dark .text-gray-800 {
|
||||
color: hsl(var(--foreground) / 0.9) !important;
|
||||
}
|
||||
.dark .text-gray-900 {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
/* --- 3. 보더: gray → 시맨틱 토큰 --- */
|
||||
.dark .border-gray-100 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-200 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-300 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .divide-gray-200 > * + * { border-color: hsl(var(--border)) !important; }
|
||||
.dark .border-gray-100 {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
.dark .border-gray-200 {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
.dark .border-gray-300 {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
.dark .divide-gray-200 > * + * {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
|
||||
/* --- 4. 호버: gray → 시맨틱 토큰 --- */
|
||||
.dark .hover\:bg-gray-50:hover { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .hover\:bg-gray-100:hover { background-color: hsl(var(--accent)) !important; }
|
||||
.dark .hover\:bg-gray-200:hover { background-color: hsl(var(--accent)) !important; }
|
||||
.dark .hover\:bg-gray-50:hover {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
.dark .hover\:bg-gray-100:hover {
|
||||
background-color: hsl(var(--accent)) !important;
|
||||
}
|
||||
.dark .hover\:bg-gray-200:hover {
|
||||
background-color: hsl(var(--accent)) !important;
|
||||
}
|
||||
|
||||
/* --- 5. Emerald (성공/완료 상태) --- */
|
||||
.dark .bg-emerald-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-emerald-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-emerald-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-emerald-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .text-emerald-800 { color: hsl(142 70% 60%) !important; }
|
||||
.dark .text-emerald-900 { color: hsl(142 70% 65%) !important; }
|
||||
.dark .border-emerald-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
.dark .border-emerald-300 { border-color: hsl(142 40% 30%) !important; }
|
||||
.dark .ring-emerald-200 { --tw-ring-color: hsl(142 40% 25%) !important; }
|
||||
.dark .bg-emerald-50 {
|
||||
background-color: hsl(142 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-emerald-100 {
|
||||
background-color: hsl(142 40% 15%) !important;
|
||||
}
|
||||
.dark .text-emerald-600 {
|
||||
color: hsl(142 70% 55%) !important;
|
||||
}
|
||||
.dark .text-emerald-700 {
|
||||
color: hsl(142 70% 50%) !important;
|
||||
}
|
||||
.dark .text-emerald-800 {
|
||||
color: hsl(142 70% 60%) !important;
|
||||
}
|
||||
.dark .text-emerald-900 {
|
||||
color: hsl(142 70% 65%) !important;
|
||||
}
|
||||
.dark .border-emerald-200 {
|
||||
border-color: hsl(142 40% 25%) !important;
|
||||
}
|
||||
.dark .border-emerald-300 {
|
||||
border-color: hsl(142 40% 30%) !important;
|
||||
}
|
||||
.dark .ring-emerald-200 {
|
||||
--tw-ring-color: hsl(142 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 6. Amber/Yellow (경고/주의 상태) --- */
|
||||
.dark .bg-amber-50 { background-color: hsl(38 40% 12%) !important; }
|
||||
.dark .bg-amber-100 { background-color: hsl(38 40% 15%) !important; }
|
||||
.dark .bg-yellow-50 { background-color: hsl(48 40% 12%) !important; }
|
||||
.dark .bg-yellow-100 { background-color: hsl(48 40% 15%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 58%) !important; }
|
||||
.dark .text-amber-700 { color: hsl(38 90% 55%) !important; }
|
||||
.dark .text-amber-800 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-900 { color: hsl(38 90% 65%) !important; }
|
||||
.dark .text-yellow-600 { color: hsl(48 90% 55%) !important; }
|
||||
.dark .text-yellow-700 { color: hsl(48 90% 50%) !important; }
|
||||
.dark .text-yellow-800 { color: hsl(48 90% 60%) !important; }
|
||||
.dark .border-amber-200 { border-color: hsl(38 40% 25%) !important; }
|
||||
.dark .border-amber-300 { border-color: hsl(38 40% 30%) !important; }
|
||||
.dark .border-yellow-200 { border-color: hsl(48 40% 25%) !important; }
|
||||
.dark .ring-amber-200 { --tw-ring-color: hsl(38 40% 25%) !important; }
|
||||
.dark .bg-amber-50 {
|
||||
background-color: hsl(38 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-amber-100 {
|
||||
background-color: hsl(38 40% 15%) !important;
|
||||
}
|
||||
.dark .bg-yellow-50 {
|
||||
background-color: hsl(48 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-yellow-100 {
|
||||
background-color: hsl(48 40% 15%) !important;
|
||||
}
|
||||
.dark .text-amber-600 {
|
||||
color: hsl(38 90% 58%) !important;
|
||||
}
|
||||
.dark .text-amber-700 {
|
||||
color: hsl(38 90% 55%) !important;
|
||||
}
|
||||
.dark .text-amber-800 {
|
||||
color: hsl(38 90% 60%) !important;
|
||||
}
|
||||
.dark .text-amber-900 {
|
||||
color: hsl(38 90% 65%) !important;
|
||||
}
|
||||
.dark .text-yellow-600 {
|
||||
color: hsl(48 90% 55%) !important;
|
||||
}
|
||||
.dark .text-yellow-700 {
|
||||
color: hsl(48 90% 50%) !important;
|
||||
}
|
||||
.dark .text-yellow-800 {
|
||||
color: hsl(48 90% 60%) !important;
|
||||
}
|
||||
.dark .border-amber-200 {
|
||||
border-color: hsl(38 40% 25%) !important;
|
||||
}
|
||||
.dark .border-amber-300 {
|
||||
border-color: hsl(38 40% 30%) !important;
|
||||
}
|
||||
.dark .border-yellow-200 {
|
||||
border-color: hsl(48 40% 25%) !important;
|
||||
}
|
||||
.dark .ring-amber-200 {
|
||||
--tw-ring-color: hsl(38 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 7. Blue (정보/프라이머리 상태) --- */
|
||||
.dark .bg-blue-50 { background-color: hsl(217 40% 12%) !important; }
|
||||
.dark .bg-blue-100 { background-color: hsl(217 40% 15%) !important; }
|
||||
.dark .text-blue-600 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .text-blue-700 { color: hsl(217 90% 60%) !important; }
|
||||
.dark .text-blue-800 { color: hsl(217 90% 65%) !important; }
|
||||
.dark .border-blue-200 { border-color: hsl(217 40% 25%) !important; }
|
||||
.dark .ring-blue-200 { --tw-ring-color: hsl(217 40% 25%) !important; }
|
||||
.dark .bg-blue-50 {
|
||||
background-color: hsl(217 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-blue-100 {
|
||||
background-color: hsl(217 40% 15%) !important;
|
||||
}
|
||||
.dark .text-blue-600 {
|
||||
color: hsl(217 90% 65%) !important;
|
||||
}
|
||||
.dark .text-blue-700 {
|
||||
color: hsl(217 90% 60%) !important;
|
||||
}
|
||||
.dark .text-blue-800 {
|
||||
color: hsl(217 90% 65%) !important;
|
||||
}
|
||||
.dark .border-blue-200 {
|
||||
border-color: hsl(217 40% 25%) !important;
|
||||
}
|
||||
.dark .ring-blue-200 {
|
||||
--tw-ring-color: hsl(217 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 8. Red (에러/삭제 상태) --- */
|
||||
.dark .bg-red-50 { background-color: hsl(0 40% 12%) !important; }
|
||||
.dark .bg-red-100 { background-color: hsl(0 40% 15%) !important; }
|
||||
.dark .text-red-600 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .text-red-700 { color: hsl(0 75% 55%) !important; }
|
||||
.dark .text-red-800 { color: hsl(0 75% 60%) !important; }
|
||||
.dark .border-red-200 { border-color: hsl(0 40% 25%) !important; }
|
||||
.dark .ring-red-200 { --tw-ring-color: hsl(0 40% 25%) !important; }
|
||||
.dark .bg-red-50 {
|
||||
background-color: hsl(0 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-red-100 {
|
||||
background-color: hsl(0 40% 15%) !important;
|
||||
}
|
||||
.dark .text-red-600 {
|
||||
color: hsl(0 75% 60%) !important;
|
||||
}
|
||||
.dark .text-red-700 {
|
||||
color: hsl(0 75% 55%) !important;
|
||||
}
|
||||
.dark .text-red-800 {
|
||||
color: hsl(0 75% 60%) !important;
|
||||
}
|
||||
.dark .border-red-200 {
|
||||
border-color: hsl(0 40% 25%) !important;
|
||||
}
|
||||
.dark .ring-red-200 {
|
||||
--tw-ring-color: hsl(0 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 9. Green (성공 - emerald 변형) --- */
|
||||
.dark .bg-green-50 { background-color: hsl(142 40% 12%) !important; }
|
||||
.dark .bg-green-100 { background-color: hsl(142 40% 15%) !important; }
|
||||
.dark .text-green-600 { color: hsl(142 70% 55%) !important; }
|
||||
.dark .text-green-700 { color: hsl(142 70% 50%) !important; }
|
||||
.dark .border-green-200 { border-color: hsl(142 40% 25%) !important; }
|
||||
.dark .bg-green-50 {
|
||||
background-color: hsl(142 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-green-100 {
|
||||
background-color: hsl(142 40% 15%) !important;
|
||||
}
|
||||
.dark .text-green-600 {
|
||||
color: hsl(142 70% 55%) !important;
|
||||
}
|
||||
.dark .text-green-700 {
|
||||
color: hsl(142 70% 50%) !important;
|
||||
}
|
||||
.dark .border-green-200 {
|
||||
border-color: hsl(142 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 10. Slate (gray 변형) --- */
|
||||
.dark .bg-slate-50 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .bg-slate-100 { background-color: hsl(var(--muted)) !important; }
|
||||
.dark .text-slate-500 { color: hsl(var(--muted-foreground)) !important; }
|
||||
.dark .text-slate-600 { color: hsl(var(--foreground) / 0.7) !important; }
|
||||
.dark .text-slate-700 { color: hsl(var(--foreground) / 0.8) !important; }
|
||||
.dark .border-slate-200 { border-color: hsl(var(--border)) !important; }
|
||||
.dark .bg-slate-50 {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
.dark .bg-slate-100 {
|
||||
background-color: hsl(var(--muted)) !important;
|
||||
}
|
||||
.dark .text-slate-500 {
|
||||
color: hsl(var(--muted-foreground)) !important;
|
||||
}
|
||||
.dark .text-slate-600 {
|
||||
color: hsl(var(--foreground) / 0.7) !important;
|
||||
}
|
||||
.dark .text-slate-700 {
|
||||
color: hsl(var(--foreground) / 0.8) !important;
|
||||
}
|
||||
.dark .border-slate-200 {
|
||||
border-color: hsl(var(--border)) !important;
|
||||
}
|
||||
|
||||
/* --- 11. bg-white opacity 변형 --- */
|
||||
.dark .bg-white\/30 { background-color: hsl(var(--card) / 0.3) !important; }
|
||||
.dark .bg-white\/50 { background-color: hsl(var(--card) / 0.5) !important; }
|
||||
.dark .bg-white\/80 { background-color: hsl(var(--card) / 0.8) !important; }
|
||||
.dark .bg-white\/90 { background-color: hsl(var(--card) / 0.9) !important; }
|
||||
.dark .hover\:bg-white:hover { background-color: hsl(var(--card)) !important; }
|
||||
.dark .bg-white\/30 {
|
||||
background-color: hsl(var(--card) / 0.3) !important;
|
||||
}
|
||||
.dark .bg-white\/50 {
|
||||
background-color: hsl(var(--card) / 0.5) !important;
|
||||
}
|
||||
.dark .bg-white\/80 {
|
||||
background-color: hsl(var(--card) / 0.8) !important;
|
||||
}
|
||||
.dark .bg-white\/90 {
|
||||
background-color: hsl(var(--card) / 0.9) !important;
|
||||
}
|
||||
.dark .hover\:bg-white:hover {
|
||||
background-color: hsl(var(--card)) !important;
|
||||
}
|
||||
|
||||
/* --- 12. text-black → foreground --- */
|
||||
.dark .text-black { color: hsl(var(--foreground)) !important; }
|
||||
.dark .text-black {
|
||||
color: hsl(var(--foreground)) !important;
|
||||
}
|
||||
|
||||
/* --- 13. bg/text/border - purple (관리 UI) --- */
|
||||
.dark .bg-purple-50 { background-color: hsl(270 40% 12%) !important; }
|
||||
.dark .bg-purple-100 { background-color: hsl(270 40% 15%) !important; }
|
||||
.dark .bg-purple-200 { background-color: hsl(270 40% 20%) !important; }
|
||||
.dark .text-purple-500 { color: hsl(270 70% 60%) !important; }
|
||||
.dark .text-purple-600 { color: hsl(270 70% 55%) !important; }
|
||||
.dark .text-purple-700 { color: hsl(270 70% 50%) !important; }
|
||||
.dark .border-purple-200 { border-color: hsl(270 40% 25%) !important; }
|
||||
.dark .border-purple-300 { border-color: hsl(270 40% 30%) !important; }
|
||||
.dark .bg-purple-50 {
|
||||
background-color: hsl(270 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-purple-100 {
|
||||
background-color: hsl(270 40% 15%) !important;
|
||||
}
|
||||
.dark .bg-purple-200 {
|
||||
background-color: hsl(270 40% 20%) !important;
|
||||
}
|
||||
.dark .text-purple-500 {
|
||||
color: hsl(270 70% 60%) !important;
|
||||
}
|
||||
.dark .text-purple-600 {
|
||||
color: hsl(270 70% 55%) !important;
|
||||
}
|
||||
.dark .text-purple-700 {
|
||||
color: hsl(270 70% 50%) !important;
|
||||
}
|
||||
.dark .border-purple-200 {
|
||||
border-color: hsl(270 40% 25%) !important;
|
||||
}
|
||||
.dark .border-purple-300 {
|
||||
border-color: hsl(270 40% 30%) !important;
|
||||
}
|
||||
|
||||
/* --- 14. bg/text/border - indigo --- */
|
||||
.dark .bg-indigo-50 { background-color: hsl(231 40% 12%) !important; }
|
||||
.dark .bg-indigo-100 { background-color: hsl(231 40% 15%) !important; }
|
||||
.dark .text-indigo-600 { color: hsl(231 70% 60%) !important; }
|
||||
.dark .text-indigo-700 { color: hsl(231 70% 55%) !important; }
|
||||
.dark .border-indigo-200 { border-color: hsl(231 40% 25%) !important; }
|
||||
.dark .bg-indigo-50 {
|
||||
background-color: hsl(231 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-indigo-100 {
|
||||
background-color: hsl(231 40% 15%) !important;
|
||||
}
|
||||
.dark .text-indigo-600 {
|
||||
color: hsl(231 70% 60%) !important;
|
||||
}
|
||||
.dark .text-indigo-700 {
|
||||
color: hsl(231 70% 55%) !important;
|
||||
}
|
||||
.dark .border-indigo-200 {
|
||||
border-color: hsl(231 40% 25%) !important;
|
||||
}
|
||||
|
||||
/* --- 15. bg/text - pink/rose (상태 뱃지) --- */
|
||||
.dark .bg-pink-50 { background-color: hsl(330 40% 12%) !important; }
|
||||
.dark .bg-pink-100 { background-color: hsl(330 40% 15%) !important; }
|
||||
.dark .text-pink-600 { color: hsl(330 70% 60%) !important; }
|
||||
.dark .text-pink-700 { color: hsl(330 70% 55%) !important; }
|
||||
.dark .bg-rose-50 { background-color: hsl(350 40% 12%) !important; }
|
||||
.dark .bg-rose-100 { background-color: hsl(350 40% 15%) !important; }
|
||||
.dark .text-rose-600 { color: hsl(350 70% 60%) !important; }
|
||||
.dark .text-rose-700 { color: hsl(350 70% 55%) !important; }
|
||||
.dark .bg-pink-50 {
|
||||
background-color: hsl(330 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-pink-100 {
|
||||
background-color: hsl(330 40% 15%) !important;
|
||||
}
|
||||
.dark .text-pink-600 {
|
||||
color: hsl(330 70% 60%) !important;
|
||||
}
|
||||
.dark .text-pink-700 {
|
||||
color: hsl(330 70% 55%) !important;
|
||||
}
|
||||
.dark .bg-rose-50 {
|
||||
background-color: hsl(350 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-rose-100 {
|
||||
background-color: hsl(350 40% 15%) !important;
|
||||
}
|
||||
.dark .text-rose-600 {
|
||||
color: hsl(350 70% 60%) !important;
|
||||
}
|
||||
.dark .text-rose-700 {
|
||||
color: hsl(350 70% 55%) !important;
|
||||
}
|
||||
|
||||
/* --- 16. bg/text - cyan/teal (정보/상태) --- */
|
||||
.dark .bg-cyan-50 { background-color: hsl(187 40% 12%) !important; }
|
||||
.dark .bg-cyan-100 { background-color: hsl(187 40% 15%) !important; }
|
||||
.dark .text-cyan-600 { color: hsl(187 70% 55%) !important; }
|
||||
.dark .text-cyan-700 { color: hsl(187 70% 50%) !important; }
|
||||
.dark .bg-teal-50 { background-color: hsl(162 40% 12%) !important; }
|
||||
.dark .bg-teal-100 { background-color: hsl(162 40% 15%) !important; }
|
||||
.dark .text-teal-600 { color: hsl(162 70% 55%) !important; }
|
||||
.dark .text-teal-700 { color: hsl(162 70% 50%) !important; }
|
||||
.dark .bg-cyan-50 {
|
||||
background-color: hsl(187 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-cyan-100 {
|
||||
background-color: hsl(187 40% 15%) !important;
|
||||
}
|
||||
.dark .text-cyan-600 {
|
||||
color: hsl(187 70% 55%) !important;
|
||||
}
|
||||
.dark .text-cyan-700 {
|
||||
color: hsl(187 70% 50%) !important;
|
||||
}
|
||||
.dark .bg-teal-50 {
|
||||
background-color: hsl(162 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-teal-100 {
|
||||
background-color: hsl(162 40% 15%) !important;
|
||||
}
|
||||
.dark .text-teal-600 {
|
||||
color: hsl(162 70% 55%) !important;
|
||||
}
|
||||
.dark .text-teal-700 {
|
||||
color: hsl(162 70% 50%) !important;
|
||||
}
|
||||
|
||||
/* --- 17. bg/text - orange (경고 변형) --- */
|
||||
.dark .bg-orange-50 { background-color: hsl(25 40% 12%) !important; }
|
||||
.dark .bg-orange-100 { background-color: hsl(25 40% 15%) !important; }
|
||||
.dark .bg-orange-200 { background-color: hsl(25 40% 20%) !important; }
|
||||
.dark .text-orange-600 { color: hsl(25 90% 65%) !important; }
|
||||
.dark .text-orange-700 { color: hsl(25 90% 70%) !important; }
|
||||
.dark .border-orange-200 { border-color: hsl(25 40% 25%) !important; }
|
||||
.dark .border-orange-300 { border-color: hsl(25 40% 30%) !important; }
|
||||
.dark .bg-orange-50 {
|
||||
background-color: hsl(25 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-orange-100 {
|
||||
background-color: hsl(25 40% 15%) !important;
|
||||
}
|
||||
.dark .bg-orange-200 {
|
||||
background-color: hsl(25 40% 20%) !important;
|
||||
}
|
||||
.dark .text-orange-600 {
|
||||
color: hsl(25 90% 65%) !important;
|
||||
}
|
||||
.dark .text-orange-700 {
|
||||
color: hsl(25 90% 70%) !important;
|
||||
}
|
||||
.dark .border-orange-200 {
|
||||
border-color: hsl(25 40% 25%) !important;
|
||||
}
|
||||
.dark .border-orange-300 {
|
||||
border-color: hsl(25 40% 30%) !important;
|
||||
}
|
||||
|
||||
/* --- 18. bg/text/border - violet (필터/관계 표시) --- */
|
||||
.dark .bg-violet-50 { background-color: hsl(263 40% 12%) !important; }
|
||||
.dark .bg-violet-100 { background-color: hsl(263 40% 18%) !important; }
|
||||
.dark .bg-violet-200 { background-color: hsl(263 40% 22%) !important; }
|
||||
.dark .text-violet-500 { color: hsl(263 80% 70%) !important; }
|
||||
.dark .text-violet-600 { color: hsl(263 80% 65%) !important; }
|
||||
.dark .text-violet-700 { color: hsl(263 80% 72%) !important; }
|
||||
.dark .border-violet-200 { border-color: hsl(263 40% 30%) !important; }
|
||||
.dark .border-violet-300 { border-color: hsl(263 40% 35%) !important; }
|
||||
.dark .bg-violet-50 {
|
||||
background-color: hsl(263 40% 12%) !important;
|
||||
}
|
||||
.dark .bg-violet-100 {
|
||||
background-color: hsl(263 40% 18%) !important;
|
||||
}
|
||||
.dark .bg-violet-200 {
|
||||
background-color: hsl(263 40% 22%) !important;
|
||||
}
|
||||
.dark .text-violet-500 {
|
||||
color: hsl(263 80% 70%) !important;
|
||||
}
|
||||
.dark .text-violet-600 {
|
||||
color: hsl(263 80% 65%) !important;
|
||||
}
|
||||
.dark .text-violet-700 {
|
||||
color: hsl(263 80% 72%) !important;
|
||||
}
|
||||
.dark .border-violet-200 {
|
||||
border-color: hsl(263 40% 30%) !important;
|
||||
}
|
||||
.dark .border-violet-300 {
|
||||
border-color: hsl(263 40% 35%) !important;
|
||||
}
|
||||
|
||||
/* --- 19. bg/text/border - amber (조인/경고) --- */
|
||||
.dark .bg-amber-200 { background-color: hsl(38 40% 20%) !important; }
|
||||
.dark .text-amber-500 { color: hsl(38 90% 60%) !important; }
|
||||
.dark .text-amber-600 { color: hsl(38 90% 65%) !important; }
|
||||
.dark .bg-amber-200 {
|
||||
background-color: hsl(38 40% 20%) !important;
|
||||
}
|
||||
.dark .text-amber-500 {
|
||||
color: hsl(38 90% 60%) !important;
|
||||
}
|
||||
.dark .text-amber-600 {
|
||||
color: hsl(38 90% 65%) !important;
|
||||
}
|
||||
|
||||
/* ===== End Dark Mode Compatibility Layer ===== */
|
||||
|
||||
Reference in New Issue
Block a user