@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
color-scheme: dark;
}
html, body, #root {
height: 100%;
}
/* Panel container */
.panel {
@apply bg-slate-900/60 border border-slate-800 rounded-lg backdrop-blur-sm shadow-lg;
}
/* Primary button */
.btn {
@apply inline-flex items-center justify-center gap-2 rounded-md bg-sky-600 hover:bg-sky-500 text-white px-3 py-1.5 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed transition-colors duration-150;
}
.btn:focus-visible {
@apply outline-none ring-2 ring-sky-400 ring-offset-2 ring-offset-slate-900;
}
/* Input fields */
.input, .select {
@apply bg-slate-900 border border-slate-700 rounded-md px-2 py-1.5 text-sm text-slate-200 focus:outline-none focus:ring-2 focus:ring-sky-600 focus:border-transparent transition-all duration-150;
}
.input::placeholder {
@apply text-slate-500;
}
.select {
@apply cursor-pointer;
}
/* Labels */
.label {
@apply text-xs text-slate-400 font-medium;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
@apply bg-slate-900;
}
::-webkit-scrollbar-thumb {
@apply bg-slate-700 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
@apply bg-slate-600;
}
/* Details/summary animations */
details summary {
@apply transition-colors duration-150;
}
details[open] > summary {
@apply border-b border-slate-800;
}
/* Focus visible styles */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
@apply outline-none ring-2 ring-sky-500 ring-offset-2 ring-offset-slate-900;
}
/* Modal backdrop */
.modal-backdrop {
@apply fixed inset-0 z-50 flex items-center justify-center bg-slate-950/80 backdrop-blur-sm;
}
/* Animations */
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.2s ease-out;
}
.animate-slide-up {
animation: slideUp 0.2s ease-out;
}
/* Loading spinner */
.spinner {
@apply inline-block w-4 h-4 border-2 border-current border-t-transparent rounded-full animate-spin;
}
/* Badge/chip styles */
.badge {
@apply inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium;
}
.badge-success {
@apply bg-emerald-600/20 text-emerald-400 border border-emerald-600/30;
}
.badge-warning {
@apply bg-amber-600/20 text-amber-400 border border-amber-600/30;
}
.badge-error {
@apply bg-rose-600/20 text-rose-400 border border-rose-600/30;
}
.badge-info {
@apply bg-sky-600/20 text-sky-400 border border-sky-600/30;
}
/* Tooltip */
[data-tooltip] {
@apply relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
@apply absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-2 py-1 text-xs text-slate-200 bg-slate-800 rounded-md whitespace-nowrap opacity-0 pointer-events-none transition-opacity duration-150 z-50;
}
[data-tooltip]:hover::after {
@apply opacity-100;
}
/* Toolbar button */
.toolbar-btn {
@apply flex items-center gap-1 px-2 py-1.5 text-sm text-slate-300 hover:text-slate-100 hover:bg-slate-800 rounded transition-colors disabled:opacity-50 disabled:cursor-not-allowed;
}
/* Slide-in panel animation */
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.animate-slide-in-right {
animation: slideInRight 0.25s ease-out;
}
