446 lines
9.3 KiB
CSS
446 lines
9.3 KiB
CSS
@import "tailwindcss";
|
|
@import "tw-animate-css";
|
|
|
|
@custom-variant dark (&:is(.dark *));
|
|
|
|
@theme inline {
|
|
--font-sans: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
|
|
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
|
|
/* Core Colors - Modern Hanwoo Design System */
|
|
--color-background: #ffffff;
|
|
--color-foreground: #0f172a;
|
|
--color-card: #ffffff;
|
|
--color-card-foreground: #0f172a;
|
|
--color-popover: #ffffff;
|
|
--color-popover-foreground: #0f172a;
|
|
--color-primary: #1F3A8F;
|
|
--color-primary-foreground: #ffffff;
|
|
--color-secondary: #f1f5f9;
|
|
--color-secondary-foreground: #0f172a;
|
|
--color-muted: #f8fafc;
|
|
--color-muted-foreground: #64748b;
|
|
--color-accent: #f59e0b;
|
|
--color-accent-foreground: #ffffff;
|
|
--color-destructive: #ef4444;
|
|
--color-destructive-foreground: #ffffff;
|
|
--color-border: #e2e8f0;
|
|
--color-input: #e2e8f0;
|
|
--color-ring: #1F3A8F;
|
|
|
|
/* Chart Colors */
|
|
--color-chart-1: #2563eb;
|
|
--color-chart-2: #f59e0b;
|
|
--color-chart-3: #10b981;
|
|
--color-chart-4: #ef4444;
|
|
--color-chart-5: #8b5cf6;
|
|
|
|
/* Sidebar Colors - Modern White Theme */
|
|
--color-sidebar: #ffffff;
|
|
--color-sidebar-foreground: #0f172a;
|
|
--color-sidebar-primary: #1F3A8F;
|
|
--color-sidebar-primary-foreground: #ffffff;
|
|
--color-sidebar-accent: #f1f5f9;
|
|
--color-sidebar-accent-foreground: #0f172a;
|
|
--color-sidebar-border: #e2e8f0;
|
|
--color-sidebar-ring: #1F3A8F;
|
|
|
|
--radius-sm: 0.375rem;
|
|
--radius-md: 0.5rem;
|
|
--radius-lg: 0.75rem;
|
|
--radius-xl: 1rem;
|
|
}
|
|
.dark {
|
|
--background: oklch(0.145 0 0);
|
|
--foreground: oklch(0.985 0 0);
|
|
--card: oklch(0.205 0 0);
|
|
--card-foreground: oklch(0.985 0 0);
|
|
--popover: oklch(0.205 0 0);
|
|
--popover-foreground: oklch(0.985 0 0);
|
|
--primary: oklch(0.922 0 0);
|
|
--primary-foreground: oklch(0.205 0 0);
|
|
--secondary: oklch(0.269 0 0);
|
|
--secondary-foreground: oklch(0.985 0 0);
|
|
--muted: oklch(0.269 0 0);
|
|
--muted-foreground: oklch(0.708 0 0);
|
|
--accent: oklch(0.269 0 0);
|
|
--accent-foreground: oklch(0.985 0 0);
|
|
--destructive: oklch(0.704 0.191 22.216);
|
|
--border: oklch(1 0 0 / 10%);
|
|
--input: oklch(1 0 0 / 15%);
|
|
--ring: oklch(0.556 0 0);
|
|
--chart-1: oklch(0.488 0.243 264.376);
|
|
--chart-2: oklch(0.696 0.17 162.48);
|
|
--chart-3: oklch(0.769 0.188 70.08);
|
|
--chart-4: oklch(0.627 0.265 303.9);
|
|
--chart-5: oklch(0.645 0.246 16.439);
|
|
--sidebar: oklch(0.205 0 0);
|
|
--sidebar-foreground: oklch(0.985 0 0);
|
|
--sidebar-primary: oklch(0.488 0.243 264.376);
|
|
--sidebar-primary-foreground: oklch(0.985 0 0);
|
|
--sidebar-accent: oklch(0.269 0 0);
|
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
|
--sidebar-border: oklch(1 0 0 / 10%);
|
|
--sidebar-ring: oklch(0.556 0 0);
|
|
}
|
|
|
|
@layer base {
|
|
* {
|
|
@apply border-border outline-ring/50;
|
|
}
|
|
html {
|
|
font-size: 16px;
|
|
}
|
|
body {
|
|
@apply bg-background text-foreground;
|
|
font-size: 1rem;
|
|
line-height: 1.6;
|
|
}
|
|
}
|
|
|
|
/* 전체적인 글씨 크기 확대 - 반응형 클래스와 충돌 방지를 위해 !important 제거 */
|
|
.text-sm {
|
|
font-size: 0.9375rem; /* 15px */
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.text-xs {
|
|
font-size: 0.8125rem; /* 13px */
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.text-base {
|
|
font-size: 1rem; /* 16px */
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.text-lg {
|
|
font-size: 1.125rem; /* 18px */
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.text-xl {
|
|
font-size: 1.25rem; /* 20px */
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.text-2xl {
|
|
font-size: 1.5rem; /* 24px */
|
|
line-height: 1.3;
|
|
}
|
|
|
|
.text-3xl {
|
|
font-size: 1.875rem; /* 30px */
|
|
line-height: 1.25;
|
|
}
|
|
|
|
/* Custom Animations */
|
|
@keyframes slide-up {
|
|
from {
|
|
transform: translateY(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-down {
|
|
from {
|
|
transform: translateY(-100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slide-in-right {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fade-in {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
.animate-slide-up {
|
|
animation: slide-up 0.3s ease-out;
|
|
}
|
|
|
|
.animate-slide-down {
|
|
animation: slide-down 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
.animate-slide-in-right {
|
|
animation: slide-in-right 0.3s ease-out;
|
|
}
|
|
|
|
.animate-fade-in {
|
|
animation: fade-in 0.2s ease-out;
|
|
}
|
|
|
|
/* Grade Badge Classes (등급별 배지) - 도메인 특화 스타일 유지 */
|
|
.badge-grade-a {
|
|
background-color: rgba(34, 197, 94, 0.1);
|
|
color: rgb(34, 197, 94);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-grade-b {
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
color: rgb(59, 130, 246);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-grade-c {
|
|
background-color: rgba(251, 191, 36, 0.1);
|
|
color: rgb(251, 191, 36);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-grade-d {
|
|
background-color: rgba(249, 115, 22, 0.1);
|
|
color: rgb(249, 115, 22);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-grade-e {
|
|
background-color: rgba(239, 68, 68, 0.1);
|
|
color: rgb(239, 68, 68);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
/* Gene Marker Classes (유전자 마커) */
|
|
.badge-gene-positive {
|
|
background-color: rgba(34, 197, 94, 0.1);
|
|
color: rgb(34, 197, 94);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-gene-negative {
|
|
background-color: rgba(239, 68, 68, 0.1);
|
|
color: rgb(239, 68, 68);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
.badge-gene-neutral {
|
|
background-color: rgba(107, 114, 128, 0.1);
|
|
color: rgb(107, 114, 128);
|
|
padding: 0.375rem 0.75rem;
|
|
border-radius: 0.375rem;
|
|
font-weight: 500;
|
|
font-size: 0.875rem; /* 14px */
|
|
}
|
|
|
|
/* Text Color Classes (등급별 텍스트 색상) */
|
|
.text-grade-a {
|
|
color: rgb(34, 197, 94);
|
|
}
|
|
|
|
.text-grade-b {
|
|
color: rgb(59, 130, 246);
|
|
}
|
|
|
|
.text-grade-c {
|
|
color: rgb(251, 191, 36);
|
|
}
|
|
|
|
.text-grade-d {
|
|
color: rgb(249, 115, 22);
|
|
}
|
|
|
|
.text-grade-e {
|
|
color: rgb(239, 68, 68);
|
|
}
|
|
|
|
.text-gene-positive {
|
|
color: rgb(34, 197, 94);
|
|
}
|
|
|
|
.text-gene-negative {
|
|
color: rgb(239, 68, 68);
|
|
}
|
|
|
|
/* Background Color Classes */
|
|
.bg-grade-a {
|
|
background-color: rgba(34, 197, 94, 0.1);
|
|
}
|
|
|
|
.bg-grade-b {
|
|
background-color: rgba(59, 130, 246, 0.1);
|
|
}
|
|
|
|
.bg-grade-c {
|
|
background-color: rgba(251, 191, 36, 0.1);
|
|
}
|
|
|
|
.bg-grade-d {
|
|
background-color: rgba(249, 115, 22, 0.1);
|
|
}
|
|
|
|
.bg-grade-e {
|
|
background-color: rgba(239, 68, 68, 0.1);
|
|
}
|
|
|
|
/* Progress Indicator Colors (등급별 프로그레스 바 색상) */
|
|
[data-slot="indicator"].bg-grade-a {
|
|
background-color: rgb(34, 197, 94) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-grade-b {
|
|
background-color: rgb(59, 130, 246) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-grade-c {
|
|
background-color: rgb(251, 191, 36) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-grade-d {
|
|
background-color: rgb(249, 115, 22) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-grade-e {
|
|
background-color: rgb(239, 68, 68) !important;
|
|
}
|
|
|
|
/* Gene Progress Indicator Colors (유전자 마커 프로그레스 바) */
|
|
[data-slot="indicator"].bg-gene-positive {
|
|
background-color: rgb(34, 197, 94) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-gene-negative {
|
|
background-color: rgb(239, 68, 68) !important;
|
|
}
|
|
|
|
[data-slot="indicator"].bg-gene-neutral {
|
|
background-color: rgb(107, 114, 128) !important;
|
|
}
|
|
|
|
/* Scrollbar Hide Utility */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Line Clamp Utilities */
|
|
.line-clamp-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.line-clamp-3 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* ============================================
|
|
개체목록 테이블 (Cow List Table)
|
|
============================================ */
|
|
:root {
|
|
/* 컬럼 너비 */
|
|
--cow-col-w-rank: 50px;
|
|
--cow-col-w-cowNo: 220px;
|
|
--cow-col-w-birth: 90px;
|
|
--cow-col-w-age: 70px;
|
|
--cow-col-w-sex: 60px;
|
|
--cow-col-w-dam: 100px;
|
|
--cow-col-w-sire: 90px;
|
|
--cow-col-w-inbreeding: 60px;
|
|
--cow-col-w-genomeScore: 100px;
|
|
--cow-col-w-dynamic: 140px;
|
|
}
|
|
|
|
/* 테이블 헤더 셀 */
|
|
.cow-table-header {
|
|
@apply text-center font-bold;
|
|
padding: 0.5rem 0.5rem; /* py-2 px-2 */
|
|
font-size: 1.25rem; /* 20px */
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.cow-table-header {
|
|
padding: 0.625rem 0.625rem; /* py-2.5 px-2.5 */
|
|
font-size: 1.375rem; /* 22px */
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.cow-table-header {
|
|
padding: 0.75rem 0.75rem; /* py-3 px-3 */
|
|
font-size: 1.5rem; /* 24px */
|
|
}
|
|
}
|
|
|
|
/* 테이블 바디 셀 */
|
|
.cow-table-cell {
|
|
@apply text-center;
|
|
padding: 0.5rem 0.375rem; /* py-2 px-1.5 */
|
|
font-size: 1.35rem; /* 21.6px */
|
|
}
|
|
|
|
/* 분석불가 행 - 각 td에 오버레이 */
|
|
.cow-row-unavailable td {
|
|
@apply relative;
|
|
}
|
|
|
|
.cow-row-unavailable td::after {
|
|
content: '';
|
|
@apply absolute inset-0 bg-black/40 pointer-events-none;
|
|
}
|
|
|
|
.cow-row-unavailable:hover {
|
|
@apply bg-transparent;
|
|
}
|