add terminal input handling and styling to CodeChallenge component

This commit is contained in:
2025-11-03 15:30:58 +05:30
parent 2508731ec7
commit 356d532beb
3 changed files with 227 additions and 12 deletions

View File

@@ -1686,6 +1686,52 @@ body {
color: #212529;
}
.console-line.input {
color: #28a745;
font-weight: 500;
}
/* Console Input Line - makes it look like terminal output */
.console-line.console-input-line {
display: flex;
align-items: center;
margin-bottom: 0;
}
.console-cursor {
color: #6c757d;
margin-right: 4px;
}
.console-input-form {
display: flex;
align-items: center;
width: 100%;
margin: 0;
}
.console-input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: #212529;
font-family: 'Consolas', 'Monaco', monospace;
font-size: 12px;
padding: 0;
line-height: 1.5;
min-width: 200px;
}
.console-input::placeholder {
color: transparent;
}
/* Add blinking cursor effect */
.console-input:focus {
caret-color: #212529;
}
/* Action Bar */
.action-bar {
position: absolute;