sonic-coder/CPU-LLM-Inference

1/* Custom CSS for LLM Inference Interface */2 3/* Header styling */4.markdown h1 {5    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);6    -webkit-background-clip: text;7    -webkit-text-fill-color: transparent;8    background-clip: text;9    font-weight: 800;10    margin-bottom: 0.5rem;11}12 13.markdown h3 {14    color: #4a5568;15    font-weight: 600;16    margin-top: 0.25rem;17}18 19/* Duration estimate styling */20.duration-estimate {21    background: linear-gradient(135deg, #667eea15 0%, #764ba215 100%);22    border-left: 4px solid #667eea;23    padding: 12px;24    border-radius: 8px;25    margin: 16px 0;26    font-size: 0.9em;27}28 29/* Group styling for better visual separation */30.gradio-group {31    border: 1px solid #e2e8f0;32    border-radius: 12px;33    padding: 16px;34    background: #f8fafc;35    margin-bottom: 16px;36}37 38/* Accordion styling */39.gradio-accordion {40    border: 1px solid #e2e8f0;41    border-radius: 8px;42    margin-bottom: 12px;43}44 45.gradio-accordion .label-wrap {46    background: #f1f5f9;47    font-weight: 600;48}49 50/* Chat interface improvements */51.chatbot {52    border-radius: 12px;53    border: 1px solid #e2e8f0;54    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);55}56 57/* Input area styling */58.textbox-container {59    border-radius: 24px;60    border: 2px solid #e2e8f0;61    transition: border-color 0.2s;62}63 64.textbox-container:focus-within {65    border-color: #667eea;66    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);67}68 69/* Button improvements */70.gradio-button {71    border-radius: 8px;72    font-weight: 600;73    transition: all 0.2s;74}75 76.gradio-button.primary {77    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);78    border: none;79}80 81.gradio-button.primary:hover {82    transform: translateY(-2px);83    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);84}85 86.gradio-button.secondary {87    border: 2px solid #e2e8f0;88    background: white;89}90 91.gradio-button.secondary:hover {92    border-color: #cbd5e0;93    background: #f7fafc;94}95 96/* Slider styling */97.gradio-slider {98    margin: 8px 0;99}100 101.gradio-slider input[type="range"] {102    accent-color: #667eea;103}104 105/* Info text styling */106.info {107    color: #718096;108    font-size: 0.85em;109    font-style: italic;110}111 112/* Footer styling */113.footer .markdown {114    text-align: center;115    color: #718096;116    font-size: 0.9em;117    padding: 16px;118    background: #f8fafc;119    border-radius: 8px;120}121 122/* Responsive adjustments */123@media (max-width: 768px) {124    .gradio-row {125        flex-direction: column;126    }127    128    .chatbot {129        height: 400px !important;130    }131}132 133/* Loading animation */134@keyframes pulse {135    0%, 100% {136        opacity: 1;137    }138    50% {139        opacity: 0.5;140    }141}142 143.generating {144    animation: pulse 1.5s ease-in-out infinite;145}146 147/* Smooth transitions */148* {149    transition: background-color 0.2s, border-color 0.2s;150}151