Spaces:
Sleeping
Sleeping
| /** | |
| * CodeEditor Styles | |
| * | |
| * Modern, lightweight code editor with dark theme | |
| * Optimized for coding interview experience | |
| */ | |
| /* =================================== | |
| CODE EDITOR CONTAINER | |
| =================================== */ | |
| .code-editor { | |
| display: flex; | |
| flex-direction: column; | |
| background: #1e1e2e; | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| overflow: hidden; | |
| font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; | |
| box-shadow: | |
| 0 4px 20px rgba(0, 0, 0, 0.3), | |
| inset 0 1px 0 rgba(255, 255, 255, 0.05); | |
| transition: all 0.3s ease; | |
| min-height: 300px; | |
| max-height: 500px; | |
| } | |
| .code-editor.expanded { | |
| min-height: 500px; | |
| max-height: 80vh; | |
| } | |
| /* =================================== | |
| TOOLBAR | |
| =================================== */ | |
| .code-editor-toolbar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 14px; | |
| background: #252538; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| gap: 12px; | |
| } | |
| .toolbar-left, | |
| .toolbar-right { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| /* Language Selector */ | |
| .language-selector { | |
| position: relative; | |
| } | |
| .language-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 12px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 13px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .language-btn:hover { | |
| background: rgba(255, 255, 255, 0.12); | |
| border-color: rgba(255, 255, 255, 0.2); | |
| } | |
| .language-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| .language-btn .lang-icon { | |
| font-size: 16px; | |
| } | |
| .language-btn svg { | |
| transition: transform 0.2s ease; | |
| } | |
| .language-btn svg.rotated { | |
| transform: rotate(180deg); | |
| } | |
| /* Language Dropdown */ | |
| .language-dropdown { | |
| position: absolute; | |
| top: calc(100% + 6px); | |
| left: 0; | |
| min-width: 180px; | |
| background: #2a2a3e; | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 10px; | |
| padding: 6px; | |
| z-index: 100; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); | |
| animation: dropdownSlide 0.15s ease; | |
| } | |
| @keyframes dropdownSlide { | |
| from { | |
| opacity: 0; | |
| transform: translateY(-8px); | |
| } | |
| to { | |
| opacity: 1; | |
| transform: translateY(0); | |
| } | |
| } | |
| .lang-option { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| width: 100%; | |
| padding: 8px 12px; | |
| background: transparent; | |
| border: none; | |
| border-radius: 6px; | |
| color: rgba(255, 255, 255, 0.8); | |
| font-size: 13px; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .lang-option:hover { | |
| background: rgba(255, 255, 255, 0.08); | |
| color: white; | |
| } | |
| .lang-option.active { | |
| background: rgba(59, 130, 246, 0.2); | |
| color: #60a5fa; | |
| } | |
| .lang-option .lang-icon { | |
| font-size: 16px; | |
| } | |
| .lang-option .lang-name { | |
| flex: 1; | |
| text-align: left; | |
| } | |
| /* Toolbar Buttons */ | |
| .toolbar-btn { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 32px; | |
| height: 32px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border: 1px solid transparent; | |
| border-radius: 8px; | |
| color: rgba(255, 255, 255, 0.6); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .toolbar-btn:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: white; | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .toolbar-btn.active { | |
| background: rgba(59, 130, 246, 0.2); | |
| color: #60a5fa; | |
| } | |
| .toolbar-btn:disabled { | |
| opacity: 0.4; | |
| cursor: not-allowed; | |
| } | |
| /* Run Button */ | |
| .run-btn { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 8px 16px; | |
| background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); | |
| border: none; | |
| border-radius: 8px; | |
| color: white; | |
| font-size: 13px; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3); | |
| } | |
| .run-btn:hover:not(:disabled) { | |
| transform: translateY(-1px); | |
| box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4); | |
| } | |
| .run-btn:active:not(:disabled) { | |
| transform: translateY(0); | |
| } | |
| .run-btn:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .run-btn.running { | |
| background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); | |
| box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3); | |
| } | |
| .run-btn .spin { | |
| animation: spin 1s linear infinite; | |
| } | |
| @keyframes spin { | |
| from { transform: rotate(0deg); } | |
| to { transform: rotate(360deg); } | |
| } | |
| /* =================================== | |
| STDIN CONTAINER | |
| =================================== */ | |
| .stdin-container { | |
| padding: 10px 14px; | |
| background: #1a1a28; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .stdin-container label { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| margin-bottom: 8px; | |
| color: rgba(255, 255, 255, 0.6); | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .stdin-textarea { | |
| width: 100%; | |
| padding: 10px 12px; | |
| background: rgba(0, 0, 0, 0.3); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 8px; | |
| color: #e0e0e0; | |
| font-family: 'Fira Code', 'Consolas', monospace; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| resize: vertical; | |
| min-height: 60px; | |
| } | |
| .stdin-textarea:focus { | |
| outline: none; | |
| border-color: rgba(59, 130, 246, 0.5); | |
| } | |
| .stdin-textarea::placeholder { | |
| color: rgba(255, 255, 255, 0.3); | |
| } | |
| /* =================================== | |
| EDITOR BODY | |
| =================================== */ | |
| .code-editor-body { | |
| display: flex; | |
| flex: 1; | |
| min-height: 200px; | |
| overflow: hidden; | |
| } | |
| /* Line Numbers */ | |
| .line-numbers { | |
| display: flex; | |
| flex-direction: column; | |
| padding: 14px 0; | |
| background: #1a1a28; | |
| border-right: 1px solid rgba(255, 255, 255, 0.06); | |
| min-width: 48px; | |
| text-align: right; | |
| overflow-y: hidden; | |
| user-select: none; | |
| } | |
| .line-number { | |
| padding: 0 12px; | |
| color: rgba(255, 255, 255, 0.25); | |
| font-size: 13px; | |
| line-height: 1.6; | |
| font-family: 'Fira Code', 'Consolas', monospace; | |
| } | |
| /* Code Textarea */ | |
| .code-textarea { | |
| flex: 1; | |
| padding: 14px 16px; | |
| background: transparent; | |
| border: none; | |
| color: #e0e0e0; | |
| font-family: 'Fira Code', 'Consolas', 'Monaco', monospace; | |
| font-size: 14px; | |
| line-height: 1.6; | |
| resize: none; | |
| overflow-y: auto; | |
| tab-size: 4; | |
| white-space: pre; | |
| } | |
| .code-textarea:focus { | |
| outline: none; | |
| } | |
| .code-textarea::placeholder { | |
| color: rgba(255, 255, 255, 0.25); | |
| } | |
| /* =================================== | |
| OUTPUT PANEL | |
| =================================== */ | |
| .output-panel { | |
| border-top: 1px solid rgba(255, 255, 255, 0.08); | |
| background: #1a1a28; | |
| max-height: 200px; | |
| overflow: hidden; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .output-header { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 14px; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); | |
| } | |
| .output-title { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| } | |
| .output-panel.success .output-title { | |
| color: #22c55e; | |
| } | |
| .output-panel.has-error .output-title { | |
| color: #ef4444; | |
| } | |
| .execution-time { | |
| font-size: 11px; | |
| color: rgba(255, 255, 255, 0.4); | |
| font-weight: 500; | |
| } | |
| .output-content { | |
| flex: 1; | |
| padding: 12px 14px; | |
| margin: 0; | |
| font-family: 'Fira Code', 'Consolas', monospace; | |
| font-size: 13px; | |
| line-height: 1.5; | |
| color: #a0a0a0; | |
| overflow-y: auto; | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| } | |
| .output-panel.success .output-content { | |
| color: #d1d5db; | |
| } | |
| .error-text { | |
| color: #f87171; | |
| margin-bottom: 8px; | |
| } | |
| /* =================================== | |
| KEYBOARD HINT | |
| =================================== */ | |
| .keyboard-hint { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| padding: 8px; | |
| background: rgba(0, 0, 0, 0.2); | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| font-size: 11px; | |
| color: rgba(255, 255, 255, 0.35); | |
| } | |
| .keyboard-hint kbd { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2px 6px; | |
| background: rgba(255, 255, 255, 0.08); | |
| border: 1px solid rgba(255, 255, 255, 0.12); | |
| border-radius: 4px; | |
| font-family: inherit; | |
| font-size: 10px; | |
| color: rgba(255, 255, 255, 0.5); | |
| } | |
| /* =================================== | |
| LIGHT THEME ADJUSTMENTS | |
| =================================== */ | |
| [data-theme="light"] .code-editor { | |
| background: #ffffff; | |
| border-color: #e0e0e0; | |
| } | |
| [data-theme="light"] .code-editor-toolbar { | |
| background: #f5f5f5; | |
| border-color: #e0e0e0; | |
| } | |
| [data-theme="light"] .language-btn { | |
| background: #e8e8e8; | |
| border-color: #d0d0d0; | |
| color: #333; | |
| } | |
| [data-theme="light"] .language-dropdown { | |
| background: #ffffff; | |
| border-color: #e0e0e0; | |
| } | |
| [data-theme="light"] .lang-option { | |
| color: #555; | |
| } | |
| [data-theme="light"] .code-textarea { | |
| color: #333; | |
| } | |
| [data-theme="light"] .line-numbers { | |
| background: #f8f8f8; | |
| border-color: #e0e0e0; | |
| } | |
| [data-theme="light"] .line-number { | |
| color: #999; | |
| } | |
| [data-theme="light"] .output-panel { | |
| background: #f8f8f8; | |
| border-color: #e0e0e0; | |
| } | |
| [data-theme="light"] .output-content { | |
| color: #555; | |
| } | |
| /* =================================== | |
| RESPONSIVE | |
| =================================== */ | |
| @media (max-width: 768px) { | |
| .code-editor { | |
| min-height: 250px; | |
| max-height: 400px; | |
| } | |
| .code-editor-toolbar { | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .toolbar-left, | |
| .toolbar-right { | |
| flex-wrap: wrap; | |
| } | |
| .language-btn .lang-name { | |
| display: none; | |
| } | |
| .run-btn span { | |
| display: none; | |
| } | |
| .keyboard-hint { | |
| display: none; | |
| } | |
| } | |