feat: add Dark Professional theme CSS with animations
Phase 7-8 complete - added exceptions.css with wizard step transitions, modal animations, skeleton loading pulse, dark scrollbar styling, and indigo/emerald accent colors for form elements. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -2,6 +2,7 @@ import React from 'react';
|
|||||||
import ReactDOM from 'react-dom/client';
|
import ReactDOM from 'react-dom/client';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
import './index.css';
|
import './index.css';
|
||||||
|
import './styles/exceptions.css';
|
||||||
|
|
||||||
ReactDOM.createRoot(document.getElementById('root')).render(
|
ReactDOM.createRoot(document.getElementById('root')).render(
|
||||||
<React.StrictMode>
|
<React.StrictMode>
|
||||||
|
|||||||
@@ -0,0 +1,49 @@
|
|||||||
|
/* Dark Professional theme animations for exception center */
|
||||||
|
|
||||||
|
/* Wizard step transition */
|
||||||
|
@keyframes exception-fade-in {
|
||||||
|
from { opacity: 0; transform: translateX(8px); }
|
||||||
|
to { opacity: 1; transform: translateX(0); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Modal animations */
|
||||||
|
@keyframes exception-modal-fade {
|
||||||
|
from { opacity: 0; }
|
||||||
|
to { opacity: 1; }
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes exception-modal-scale {
|
||||||
|
from { opacity: 0; transform: scale(0.95); }
|
||||||
|
to { opacity: 1; transform: scale(1); }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Skeleton loading pulse */
|
||||||
|
@keyframes exception-skeleton-pulse {
|
||||||
|
0%, 100% { opacity: 1; }
|
||||||
|
50% { opacity: 0.4; }
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Dark scrollbar for exception panels */
|
||||||
|
.exception-scrollbar::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
.exception-scrollbar::-webkit-scrollbar-track {
|
||||||
|
background: #0f172a;
|
||||||
|
}
|
||||||
|
.exception-scrollbar::-webkit-scrollbar-thumb {
|
||||||
|
background: #334155;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
.exception-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #475569;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Smooth checkbox accent */
|
||||||
|
input[type="checkbox"] {
|
||||||
|
accent-color: #6366f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Range input accent for audio player */
|
||||||
|
input[type="range"] {
|
||||||
|
accent-color: #34d399;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user