ROSS09/codejudge-pro-competitive-programming-platform-1ggln

1/* Custom Styles for CodeJudge Pro */2 3@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');4 5/* Scrollbar Styling */6::-webkit-scrollbar {7    width: 8px;8    height: 8px;9}10 11::-webkit-scrollbar-track {12    background: #1f2937;13}14 15::-webkit-scrollbar-thumb {16    background: #4b5563;17    border-radius: 4px;18}19 20::-webkit-scrollbar-thumb:hover {21    background: #6b7280;22}23 24/* Monaco Editor Customization */25.monaco-editor {26    border-radius: 0.5rem;27}28 29.monaco-editor .margin {30    background-color: #111827 !important;31}32 33/* Code Highlighting */34code {35    font-family: 'JetBrains Mono', monospace;36    font-size: 0.875rem;37}38 39/* Progress Animations */40.progress-animation {41    width: 30%;42    animation: progress 1.5s ease-in-out infinite alternate;43}44 45.progress-animation-wide {46    width: 60%;47    animation: progress-wide 2s ease-in-out infinite alternate;48}49 50@keyframes progress {51    0% {52        transform: translateX(-100%);53    }54    100% {55        transform: translateX(300%);56    }57}58 59@keyframes progress-wide {60    0% {61        transform: translateX(-60%);62    }63    100% {64        transform: translateX(160%);65    }66}67 68/* Tab Transitions */69.tab-content {70    transition: opacity 0.2s ease;71}72 73/* Status Colors */74.status-accepted {75    background-color: rgba(34, 197, 94, 0.1);76    border-color: rgba(34, 197, 94, 0.3);77}78 79.status-wrong-answer {80    background-color: rgba(239, 68, 68, 0.1);81    border-color: rgba(239, 68, 68, 0.3);82}83 84.status-compilation-error {85    background-color: rgba(245, 158, 11, 0.1);86    border-color: rgba(245, 158, 11, 0.3);87}88 89.status-runtime-error {90    background-color: rgba(249, 115, 22, 0.1);91    border-color: rgba(249, 115, 22, 0.3);92}93 94.status-time-limit {95    background-color: rgba(168, 85, 247, 0.1);96    border-color: rgba(168, 85, 247, 0.3);97}98 99.status-memory-limit {100    background-color: rgba(139, 92, 246, 0.1);101    border-color: rgba(139, 92, 246, 0.3);102}103 104/* Test Case Result Cards */105.test-case-card {106    transition: all 0.2s ease;107}108 109.test-case-card:hover {110    transform: translateY(-2px);111    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.3);112}113 114/* Custom Checkbox */115.custom-checkbox {116    appearance: none;117    width: 18px;118    height: 18px;119    border: 2px solid #4b5563;120    border-radius: 4px;121    background-color: #111827;122    cursor: pointer;123    position: relative;124}125 126.custom-checkbox:checked {127    background-color: #3b82f6;128    border-color: #3b82f6;129}130 131.custom-checkbox:checked::after {132    content: '✓';133    position: absolute;134    color: white;135    font-size: 12px;136    font-weight: bold;137    top: 50%;138    left: 50%;139    transform: translate(-50%, -50%);140}141 142/* Editor Theme Variables */143:root {144    --editor-bg: #111827;145    --editor-border: #374151;146    --editor-text: #e5e7eb;147}148 149.light-theme {150    --editor-bg: #f9fafb;151    --editor-border: #d1d5db;152    --editor-text: #111827;153}154 155/* Animation for new submissions */156@keyframes pulse-submission {157    0%, 100% {158        opacity: 1;159    }160    50% {161        opacity: 0.7;162    }163}164 165.pulse-submission {166    animation: pulse-submission 1.5s ease-in-out infinite;167}168 169/* Result Badge Animation */170@keyframes badge-pop {171    0% {172        transform: scale(0.8);173        opacity: 0;174    }175    70% {176        transform: scale(1.1);177    }178    100% {179        transform: scale(1);180        opacity: 1;181    }182}183 184.badge-pop {185    animation: badge-pop 0.3s ease-out;186}187 188/* Modal Styles */189.modal-backdrop {190    backdrop-filter: blur(4px);191}192 193/* Submission Item Hover */194.submission-item {195    transition: all 0.2s ease;196}197 198.submission-item:hover {199    transform: translateX(4px);200}201 202/* Custom Test Case Styles */203.custom-test-case {204    border-left: 4px solid #3b82f6;205}206 207/* Responsive Adjustments */208@media (max-width: 1024px) {209    .editor-container {210        height: 400px;211    }212    213    .grid-cols-1.md\\:grid-cols-2 {214        grid-template-columns: 1fr;215    }216}217 218@media (max-width: 768px) {219    .editor-container {220        height: 350px;221    }222    223    .flex-col-on-mobile {224        flex-direction: column;225    }226    227    .text-right-on-mobile {228        text-align: right;229    }230}231 232/* Smooth Transitions */233.tab-content, .output-tab, .modal-content {234    transition: all 0.3s ease;235}236 237/* Code Editor Improvements */238.monaco-editor .scroll-decoration {239    box-shadow: none !important;240}241 242/* Loading Animation */243@keyframes fade-in-out {244    0%, 100% { opacity: 0.5; }245    50% { opacity: 1; }246}247 248.fade-in-out {249    animation: fade-in-out 1.5s ease-in-out infinite;250}