150 lines
5.1 KiB
CSS
150 lines
5.1 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--ce-page: #f9fafb;
|
|
--ce-surface: #ffffff;
|
|
--ce-surface-muted: #f9fafb;
|
|
--ce-surface-elevated: #ffffff;
|
|
--ce-text: #111827;
|
|
--ce-text-muted: #6b7280;
|
|
--ce-border: #d1d5db;
|
|
--ce-teal: #0f766e;
|
|
--ce-teal-surface: #f0fdfa;
|
|
--ce-focus: #14b8a6;
|
|
--ce-skeleton: #e5e7eb;
|
|
}
|
|
|
|
html[data-theme="dark"] {
|
|
--ce-page: #172128;
|
|
--ce-surface: #202c34;
|
|
--ce-surface-muted: #1b262e;
|
|
--ce-surface-elevated: #293740;
|
|
--ce-text: #edf2f3;
|
|
--ce-text-muted: #b4c0c5;
|
|
--ce-border: #40515a;
|
|
--ce-teal: #62d3c5;
|
|
--ce-teal-surface: #203a3c;
|
|
--ce-focus: #78ded2;
|
|
--ce-skeleton: #3a4a53;
|
|
}
|
|
|
|
html[data-theme="dark"] body { background-color: var(--ce-page) !important; color: var(--ce-text) !important; }
|
|
html[data-theme="dark"] .app-chrome { background-color: var(--ce-surface-muted); border-color: var(--ce-border); }
|
|
html[data-theme="dark"] .theme-toggle { background-color: var(--ce-surface-elevated); border-color: var(--ce-border); color: var(--ce-text); }
|
|
html[data-theme="dark"] .theme-toggle:hover { background-color: #33444d; }
|
|
html[data-theme="dark"] .bg-white,
|
|
html[data-theme="dark"] [class*="bg-white"] { background-color: var(--ce-surface) !important; }
|
|
html[data-theme="dark"] [class*="bg-gray-50"],
|
|
html[data-theme="dark"] [class*="bg-gray-100"] { background-color: var(--ce-surface-muted) !important; }
|
|
html[data-theme="dark"] [class*="bg-gradient-to"] { background-image: none !important; background-color: var(--ce-surface) !important; }
|
|
html[data-theme="dark"] [class*="bg-teal-50"] { background-color: var(--ce-teal-surface) !important; }
|
|
html[data-theme="dark"] [class*="bg-amber-50"],
|
|
html[data-theme="dark"] [class*="bg-orange-50"],
|
|
html[data-theme="dark"] [class*="bg-yellow-50"] { background-color: #3a3324 !important; }
|
|
html[data-theme="dark"] [class*="bg-green-50"] { background-color: #20392f !important; }
|
|
html[data-theme="dark"] [class*="bg-blue-50"] { background-color: #243540 !important; }
|
|
html[data-theme="dark"] [class*="border-gray"],
|
|
html[data-theme="dark"] [class*="border-teal"],
|
|
html[data-theme="dark"] [class*="border-amber"],
|
|
html[data-theme="dark"] [class*="border-orange"],
|
|
html[data-theme="dark"] [class*="border-green"],
|
|
html[data-theme="dark"] [class*="border-blue"] { border-color: var(--ce-border) !important; }
|
|
html[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) { color: var(--ce-text) !important; }
|
|
html[data-theme="dark"] :is(.text-gray-500, .text-gray-400) { color: var(--ce-text-muted) !important; }
|
|
html[data-theme="dark"] :is(.text-teal-700, .text-teal-800) { color: var(--ce-teal) !important; }
|
|
html[data-theme="dark"] :is(.text-amber-700, .text-amber-800, .text-orange-700, .text-orange-800, .text-yellow-700, .text-yellow-800) { color: #f2c879 !important; }
|
|
html[data-theme="dark"] :is(.text-green-700, .text-green-800) { color: #8bd8a8 !important; }
|
|
html[data-theme="dark"] input,
|
|
html[data-theme="dark"] textarea,
|
|
html[data-theme="dark"] select { background-color: var(--ce-surface-elevated); color: var(--ce-text); border-color: var(--ce-border); }
|
|
html[data-theme="dark"] input::placeholder,
|
|
html[data-theme="dark"] textarea::placeholder { color: #94a3ab; }
|
|
html[data-theme="dark"] details { background-color: var(--ce-surface-muted) !important; }
|
|
html[data-theme="dark"] button:focus-visible,
|
|
html[data-theme="dark"] a:focus-visible,
|
|
html[data-theme="dark"] input:focus-visible,
|
|
html[data-theme="dark"] textarea:focus-visible,
|
|
html[data-theme="dark"] select:focus-visible { outline: 2px solid var(--ce-focus); outline-offset: 2px; }
|
|
|
|
@keyframes spin {
|
|
from { transform: rotate(0deg); }
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(4px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.investigation-card {
|
|
animation: fadeIn 0.4s ease-out both;
|
|
}
|
|
|
|
.investigation-card:nth-child(2) {
|
|
animation-delay: 0.08s;
|
|
}
|
|
|
|
.investigation-card:nth-child(3) {
|
|
animation-delay: 0.16s;
|
|
}
|
|
|
|
/* ── CU skeleton overlay during synthesis refresh ─────────────── */
|
|
|
|
.cu-skeleton-overlay {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.cu-skeleton-lines {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-top: auto;
|
|
}
|
|
|
|
.cu-skeleton-line {
|
|
height: 16px;
|
|
border-radius: 8px;
|
|
background-color: var(--ce-skeleton);
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Striped shimmer that travels left → right through each bar */
|
|
.cu-skeleton-line::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: repeating-linear-gradient(
|
|
105deg,
|
|
transparent 0%,
|
|
transparent 8px,
|
|
rgba(255, 255, 255, 0.45) 8px,
|
|
rgba(255, 255, 255, 0.45) 16px,
|
|
transparent 16px,
|
|
transparent 24px
|
|
);
|
|
animation: cuSkeletonShimmer 1.6s linear infinite;
|
|
}
|
|
|
|
@keyframes cuSkeletonShimmer {
|
|
0% { transform: translateX(-100%); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[style*="animation:spin"] {
|
|
animation: none !important;
|
|
}
|
|
|
|
.investigation-card {
|
|
animation: none;
|
|
}
|
|
|
|
.cu-skeleton-line::after {
|
|
animation: none !important;
|
|
}
|
|
}
|