.command-preview {
font-family: monospace;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
white-space: pre-wrap;
word-break: break-all;
max-height: 150px;
overflow-y: auto;
}
.output-preview {
font-family: monospace;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
white-space: pre-wrap;
word-break: break-all;
max-height: 300px;
overflow-y: auto;
resize: vertical;
// Styling for readonly textarea to look more like a text display
&[readonly] {
cursor: text;
// Remove focus outline for readonly textarea
&:focus {
outline: none;
box-shadow: none;
border-color: inherit;
}
}
}
.instruction-preview {
font-family: monospace;
background-color: #f5f5f5;
padding: 10px;
border-radius: 4px;
white-space: pre-wrap;
word-break: break-all;
max-height: 150px;
overflow-y: auto;
}
// Dialog focus styles
.modal-content {
// Default state with subtle border
border: 2px solid rgba(0, 0, 0, 0.2) !important;
transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
outline: none;
// Focused state with glowing border
&.focused {
border-color: #4fadff !important;
box-shadow: 0 0 8px rgba(79, 173, 255, 0.5) !important;
}
}
// Make modal backdrop darker and prevent clicks
.modal-backdrop {
opacity: 0.7 !important;
pointer-events: all !important;
}
// Prevent interaction with elements behind the modal
.modal {
pointer-events: all !important;
}
