sanbuphy
653 lines
18 KiB
Vue
653 lines
18 KiB
Vue
<template>
|
||
<div class="terminal-hands-on">
|
||
<div class="lab-container">
|
||
<!-- Left Panel: Task Guide -->
|
||
<div class="task-panel">
|
||
<div class="panel-header">
|
||
<span class="panel-title">🎯 实操任务 ({{ currentTaskIndex + 1 }}/{{ tasks.length }})</span>
|
||
<div class="os-selector">
|
||
<select v-model="currentOS" @change="resetCurrentTask">
|
||
<option value="mac">macOS</option>
|
||
<option value="win-ps">Windows PowerShell</option>
|
||
<option value="win-cmd">Windows CMD</option>
|
||
<option value="linux">Linux</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="task-content">
|
||
<h3>{{ currentTask.title }}</h3>
|
||
<p class="task-desc">{{ currentTask.description }}</p>
|
||
|
||
<div class="ai-helper">
|
||
<div class="ai-header" @click="toggleAi" :class="{ active: isAiOpen }">
|
||
<span class="ai-icon">🤖</span>
|
||
<span class="ai-title">不知道怎么写？问问 AI</span>
|
||
<span class="ai-arrow">▼</span>
|
||
</div>
|
||
<div class="ai-chat" v-if="isAiOpen">
|
||
<div class="chat-bubble user">
|
||
{{ currentTask.aiQuery }}
|
||
</div>
|
||
<div class="chat-bubble ai">
|
||
<p>{{ currentTask.aiResponse[currentOS] || currentTask.aiResponse.common }}</p>
|
||
<button class="copy-btn" @click="copyCommand(currentTask.expectedCmd[currentOS] || currentTask.expectedCmd.common)">
|
||
复制命令
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="expected-result" v-if="!isTaskCompleted">
|
||
<span class="label">预期目标：</span>
|
||
<span class="value">{{ currentTask.goal }}</span>
|
||
</div>
|
||
|
||
<div class="success-message" v-if="isTaskCompleted">
|
||
<span class="icon">🎉</span>
|
||
<span>太棒了！任务完成！</span>
|
||
<button class="next-btn" @click="nextTask" v-if="currentTaskIndex < tasks.length - 1">下一关</button>
|
||
<button class="reset-btn" @click="resetAll" v-else>重新开始</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Right Panel: Terminal Emulator -->
|
||
<div class="terminal-panel" :class="currentOS">
|
||
<div class="terminal-header">
|
||
<div class="dots">
|
||
<span class="dot red"></span>
|
||
<span class="dot yellow"></span>
|
||
<span class="dot green"></span>
|
||
</div>
|
||
<div class="title">{{ terminalTitle }}</div>
|
||
</div>
|
||
<div class="terminal-body" ref="terminalBody" @click="focusInput">
|
||
<div v-for="(line, index) in history" :key="index" class="line">
|
||
<span v-if="line.type === 'input'" class="prompt">{{ line.prompt }}</span>
|
||
<span :class="line.type">{{ line.content }}</span>
|
||
</div>
|
||
|
||
<div class="line input-line" v-if="!isTaskCompleted || currentTaskIndex < tasks.length - 1">
|
||
<span class="prompt">{{ prompt }}</span>
|
||
<input
|
||
ref="cmdInput"
|
||
v-model="inputCmd"
|
||
@keydown.enter="executeCommand"
|
||
@keydown.tab.prevent
|
||
type="text"
|
||
spellcheck="false"
|
||
autocomplete="off"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, nextTick, watch } from 'vue'
|
||
|
||
const currentOS = ref('win-cmd')
|
||
const currentTaskIndex = ref(0)
|
||
const isAiOpen = ref(false)
|
||
const inputCmd = ref('')
|
||
const history = ref([])
|
||
const cmdInput = ref(null)
|
||
const terminalBody = ref(null)
|
||
|
||
// System Configurations
|
||
const osConfig = {
|
||
'mac': { prompt: 'user@MacBook ~ % ', title: 'user — -zsh' },
|
||
'win-ps': { prompt: 'PS C:\\Users\\User> ', title: 'Windows PowerShell' },
|
||
'win-cmd': { prompt: 'C:\\Users\\User> ', title: 'Command Prompt' },
|
||
'linux': { prompt: 'user@localhost:~$ ', title: 'user@localhost: ~' }
|
||
}
|
||
|
||
const prompt = computed(() => osConfig[currentOS.value].prompt)
|
||
const terminalTitle = computed(() => osConfig[currentOS.value].title)
|
||
|
||
// Tasks Definition
|
||
const tasks = [
|
||
{
|
||
title: '第一步：看看这里有什么',
|
||
description: '在对文件进行操作之前，我们首先需要知道当前目录下有哪些文件。',
|
||
goal: '列出当前目录下的所有文件。',
|
||
aiQuery: '我想查看当前目录下的文件，应该用什么命令？',
|
||
aiResponse: {
|
||
'mac': '在 macOS 和 Linux 中，查看文件列表使用 `ls` 命令 (List)。',
|
||
'linux': '在 macOS 和 Linux 中，查看文件列表使用 `ls` 命令 (List)。',
|
||
'win-ps': '在 PowerShell 中，你可以使用 `ls` 或 `dir` 命令。',
|
||
'win-cmd': '在 Windows CMD 中，查看文件列表使用 `dir` 命令 (Directory)。',
|
||
'common': '通常使用 ls 或 dir。'
|
||
},
|
||
expectedCmd: {
|
||
'mac': 'ls', 'linux': 'ls', 'win-ps': 'ls', 'win-cmd': 'dir'
|
||
},
|
||
validate: (cmd, os) => {
|
||
const valid = os === 'win-cmd' ? ['dir'] : ['ls', 'dir', 'll']
|
||
return valid.includes(cmd.trim().toLowerCase())
|
||
},
|
||
output: (os) => {
|
||
if (os === 'win-cmd' || os === 'win-ps') {
|
||
return `
|
||
Directory: C:\\Users\\User
|
||
|
||
Mode LastWriteTime Length Name
|
||
---- ------------- ------ ----
|
||
d---- 1/15/2026 9:00 AM Documents
|
||
d---- 1/15/2026 9:00 AM Downloads
|
||
-a--- 1/15/2026 9:00 AM 128 todo.txt`
|
||
}
|
||
return `Documents Downloads todo.txt`
|
||
}
|
||
},
|
||
{
|
||
title: '第二步：创建一个新家',
|
||
description: '文件太多会很乱，我们创建一个专门的文件夹来存放今天的练习文件。',
|
||
goal: '创建一个名为 "demo" 的文件夹。',
|
||
aiQuery: '怎么创建一个新的文件夹？名字叫 demo。',
|
||
aiResponse: {
|
||
'common': '创建文件夹（目录）的命令是 `mkdir` (Make Directory)。你可以输入 `mkdir demo`。'
|
||
},
|
||
expectedCmd: {
|
||
'common': 'mkdir demo'
|
||
},
|
||
validate: (cmd) => cmd.trim() === 'mkdir demo',
|
||
output: () => '' // mkdir usually has no output on success
|
||
},
|
||
{
|
||
title: '第三步：进入新家',
|
||
description: '文件夹建好了，但我们现在还在外面。我们需要“走”进去。',
|
||
goal: '进入 "demo" 文件夹。',
|
||
aiQuery: '怎么进入刚才建好的 demo 文件夹？',
|
||
aiResponse: {
|
||
'common': '切换目录使用 `cd` 命令 (Change Directory)。输入 `cd demo` 即可。'
|
||
},
|
||
expectedCmd: {
|
||
'common': 'cd demo'
|
||
},
|
||
validate: (cmd) => cmd.trim() === 'cd demo',
|
||
output: () => '' // cd usually has no output, but prompt changes
|
||
},
|
||
{
|
||
title: '第四步：新建一个文件',
|
||
description: '现在我们在 demo 文件夹里了。来创建一个简单的文本文件吧。',
|
||
goal: '创建一个名为 "hello.txt" 的文件。',
|
||
aiQuery: '我想新建一个空文件叫 hello.txt，怎么做？',
|
||
aiResponse: {
|
||
'mac': '在 Mac/Linux 上，使用 `touch hello.txt` 可以快速创建一个空文件。',
|
||
'linux': '在 Mac/Linux 上，使用 `touch hello.txt` 可以快速创建一个空文件。',
|
||
'win-ps': '在 PowerShell 中，可以使用 `ni hello.txt` 或 `echo "" > hello.txt`。',
|
||
'win-cmd': '在 CMD 中，可以使用 `type nul > hello.txt` 或 `echo. > hello.txt`。',
|
||
},
|
||
expectedCmd: {
|
||
'mac': 'touch hello.txt',
|
||
'linux': 'touch hello.txt',
|
||
'win-ps': 'ni hello.txt',
|
||
'win-cmd': 'type nul > hello.txt'
|
||
},
|
||
validate: (cmd, os) => {
|
||
if (cmd.includes('touch') || cmd.includes('echo') || cmd.includes('ni') || cmd.includes('type')) {
|
||
return cmd.includes('hello.txt')
|
||
}
|
||
return false
|
||
},
|
||
output: () => ''
|
||
},
|
||
{
|
||
title: '第五步：安装程序',
|
||
description: '终端不仅能管理文件，还能安装软件。比如我们想安装一个 Python 库 "requests"。',
|
||
goal: '使用 pip 安装 requests 库。',
|
||
aiQuery: '怎么用命令行安装 python 的 requests 库？',
|
||
aiResponse: {
|
||
'common': '安装 Python 库通常使用 `pip` (Python Package Installer)。命令是 `pip install requests`。'
|
||
},
|
||
expectedCmd: {
|
||
'common': 'pip install requests'
|
||
},
|
||
validate: (cmd) => cmd.trim() === 'pip install requests',
|
||
output: () => `
|
||
Downloading/unpacking requests
|
||
Downloading requests-2.31.0-py3-none-any.whl (62kB): 62kB downloaded
|
||
Installing collected packages: requests
|
||
Successfully installed requests
|
||
Cleaning up...`
|
||
},
|
||
{
|
||
title: '第六步：打扫战场',
|
||
description: '练习结束了，我们把刚才创建的文件删除掉，保持环境整洁。',
|
||
goal: '删除 "hello.txt" 文件。',
|
||
aiQuery: '我不想要 hello.txt 了，怎么删除它？',
|
||
aiResponse: {
|
||
'mac': '删除文件使用 `rm` 命令 (Remove)。小心，这个操作通常不可撤销！输入 `rm hello.txt`。',
|
||
'linux': '删除文件使用 `rm` 命令 (Remove)。小心，这个操作通常不可撤销！输入 `rm hello.txt`。',
|
||
'win-ps': '在 PowerShell 中使用 `rm` 或 `del`。输入 `rm hello.txt`。',
|
||
'win-cmd': '在 CMD 中使用 `del` 命令 (Delete)。输入 `del hello.txt`。',
|
||
},
|
||
expectedCmd: {
|
||
'mac': 'rm hello.txt',
|
||
'linux': 'rm hello.txt',
|
||
'win-ps': 'rm hello.txt',
|
||
'win-cmd': 'del hello.txt'
|
||
},
|
||
validate: (cmd, os) => {
|
||
const c = cmd.trim()
|
||
return c === 'rm hello.txt' || c === 'del hello.txt'
|
||
},
|
||
output: () => ''
|
||
}
|
||
]
|
||
|
||
const currentTask = computed(() => tasks[currentTaskIndex.value])
|
||
const isTaskCompleted = ref(false)
|
||
|
||
const toggleAi = () => {
|
||
isAiOpen.value = !isAiOpen.value
|
||
}
|
||
|
||
const copyCommand = (cmd) => {
|
||
inputCmd.value = cmd
|
||
focusInput()
|
||
}
|
||
|
||
const focusInput = () => {
|
||
if (cmdInput.value) {
|
||
cmdInput.value.focus()
|
||
}
|
||
}
|
||
|
||
const scrollToBottom = () => {
|
||
nextTick(() => {
|
||
if (terminalBody.value) {
|
||
terminalBody.value.scrollTop = terminalBody.value.scrollHeight
|
||
}
|
||
})
|
||
}
|
||
|
||
const executeCommand = () => {
|
||
const cmd = inputCmd.value
|
||
if (!cmd.trim()) return
|
||
|
||
// 1. Add to history
|
||
let currentPrompt = prompt.value
|
||
// Special handling for prompt update simulation (hacky way)
|
||
if (currentTaskIndex.value >= 2 && currentTaskIndex.value < 6 && history.value.length > 0) {
|
||
// If we are inside demo folder
|
||
if (currentOS.value === 'mac') currentPrompt = 'user@MacBook demo % '
|
||
else if (currentOS.value === 'linux') currentPrompt = 'user@localhost:~/demo$ '
|
||
else if (currentOS.value === 'win-ps') currentPrompt = 'PS C:\\Users\\User\\demo> '
|
||
else currentPrompt = 'C:\\Users\\User\\demo> '
|
||
}
|
||
|
||
history.value.push({ type: 'input', prompt: currentPrompt, content: cmd })
|
||
inputCmd.value = ''
|
||
|
||
// 2. Process Command
|
||
// Check if it matches current task requirement
|
||
if (!isTaskCompleted.value && currentTask.value.validate(cmd, currentOS.value)) {
|
||
// Success
|
||
const out = currentTask.value.output(currentOS.value)
|
||
if (out) {
|
||
history.value.push({ type: 'output', content: out })
|
||
}
|
||
isTaskCompleted.value = true
|
||
} else {
|
||
// Failure or just random command
|
||
// Simple mock responses for common commands if not matching task
|
||
if (cmd.trim() === 'ls' || cmd.trim() === 'dir') {
|
||
if (currentTaskIndex.value < 2) {
|
||
// Initial state
|
||
history.value.push({ type: 'output', content: tasks[0].output(currentOS.value) })
|
||
} else if (currentTaskIndex.value >= 2) {
|
||
// Inside demo
|
||
if (currentTaskIndex.value === 3) history.value.push({ type: 'output', content: '' }) // empty
|
||
else history.value.push({ type: 'output', content: 'hello.txt' })
|
||
}
|
||
} else if (cmd.trim() === 'clear' || cmd.trim() === 'cls') {
|
||
history.value = []
|
||
} else if (!isTaskCompleted.value) {
|
||
history.value.push({ type: 'error', content: `Command not found or not matching task: ${cmd}` })
|
||
history.value.push({ type: 'info', content: `💡 提示：试试点击左侧的“问问 AI”？` })
|
||
}
|
||
}
|
||
|
||
scrollToBottom()
|
||
}
|
||
|
||
const nextTask = () => {
|
||
if (currentTaskIndex.value < tasks.length - 1) {
|
||
currentTaskIndex.value++
|
||
isTaskCompleted.value = false
|
||
isAiOpen.value = false
|
||
// Clear history to keep it clean? Or keep it? Let's keep it but maybe add a separator
|
||
history.value.push({ type: 'info', content: `--- 进入下一关: ${currentTask.value.title} ---` })
|
||
scrollToBottom()
|
||
}
|
||
}
|
||
|
||
const resetCurrentTask = () => {
|
||
isTaskCompleted.value = false
|
||
inputCmd.value = ''
|
||
isAiOpen.value = false
|
||
history.value = []
|
||
}
|
||
|
||
const resetAll = () => {
|
||
currentTaskIndex.value = 0
|
||
resetCurrentTask()
|
||
}
|
||
|
||
watch(currentOS, () => {
|
||
// When OS changes, prompt changes, reset history to look consistent
|
||
resetCurrentTask()
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.terminal-hands-on {
|
||
margin: 2rem 0;
|
||
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
|
||
}
|
||
|
||
.lab-container {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 20px;
|
||
background: var(--vp-c-bg-soft);
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 12px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.lab-container {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
}
|
||
|
||
/* Left Panel */
|
||
.task-panel {
|
||
padding: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
border-right: 1px solid var(--vp-c-divider);
|
||
}
|
||
|
||
.panel-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.panel-title {
|
||
font-weight: bold;
|
||
color: var(--vp-c-brand);
|
||
font-size: 0.9rem;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
|
||
.os-selector select {
|
||
padding: 4px 8px;
|
||
border-radius: 6px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg);
|
||
color: var(--vp-c-text-1);
|
||
font-size: 0.9rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.task-content h3 {
|
||
margin: 0 0 10px 0;
|
||
font-size: 1.2rem;
|
||
color: var(--vp-c-text-1);
|
||
}
|
||
|
||
.task-desc {
|
||
color: var(--vp-c-text-2);
|
||
font-size: 0.95rem;
|
||
line-height: 1.5;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* AI Helper */
|
||
.ai-helper {
|
||
margin-bottom: 20px;
|
||
border: 1px solid var(--vp-c-divider);
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
background: var(--vp-c-bg);
|
||
}
|
||
|
||
.ai-header {
|
||
padding: 10px 15px;
|
||
background: linear-gradient(to right, rgba(16, 185, 129, 0.1), transparent);
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
font-size: 0.9rem;
|
||
font-weight: 500;
|
||
color: var(--vp-c-text-1);
|
||
transition: background 0.2s;
|
||
}
|
||
|
||
.ai-header:hover {
|
||
background: linear-gradient(to right, rgba(16, 185, 129, 0.2), transparent);
|
||
}
|
||
|
||
.ai-header.active .ai-arrow {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
.ai-arrow {
|
||
margin-left: auto;
|
||
font-size: 0.8rem;
|
||
transition: transform 0.2s;
|
||
}
|
||
|
||
.ai-chat {
|
||
padding: 15px;
|
||
border-top: 1px solid var(--vp-c-divider);
|
||
background: var(--vp-c-bg-alt);
|
||
}
|
||
|
||
.chat-bubble {
|
||
padding: 8px 12px;
|
||
border-radius: 8px;
|
||
font-size: 0.9rem;
|
||
margin-bottom: 10px;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.chat-bubble.user {
|
||
background: var(--vp-c-bg-mute);
|
||
color: var(--vp-c-text-2);
|
||
margin-left: auto;
|
||
border-bottom-right-radius: 2px;
|
||
}
|
||
|
||
.chat-bubble.ai {
|
||
background: var(--vp-c-brand-soft);
|
||
color: var(--vp-c-brand-dark);
|
||
margin-right: auto;
|
||
border-bottom-left-radius: 2px;
|
||
}
|
||
|
||
.copy-btn {
|
||
margin-top: 5px;
|
||
font-size: 0.8rem;
|
||
padding: 2px 8px;
|
||
border: 1px solid var(--vp-c-brand);
|
||
color: var(--vp-c-brand);
|
||
background: transparent;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
background: var(--vp-c-brand);
|
||
color: white;
|
||
}
|
||
|
||
/* Result & Success */
|
||
.expected-result {
|
||
margin-top: auto;
|
||
padding: 10px;
|
||
background: var(--vp-c-bg-mute);
|
||
border-radius: 6px;
|
||
font-size: 0.9rem;
|
||
}
|
||
|
||
.expected-result .label {
|
||
font-weight: bold;
|
||
color: var(--vp-c-text-2);
|
||
}
|
||
|
||
.success-message {
|
||
margin-top: auto;
|
||
padding: 15px;
|
||
background: rgba(16, 185, 129, 0.1);
|
||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||
border-radius: 8px;
|
||
color: #10b981;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
animation: slideIn 0.3s ease;
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from { opacity: 0; transform: translateY(10px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.next-btn, .reset-btn {
|
||
margin-left: auto;
|
||
padding: 6px 16px;
|
||
background: #10b981;
|
||
color: white;
|
||
border: none;
|
||
border-radius: 20px;
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
transition: transform 0.1s;
|
||
}
|
||
|
||
.next-btn:hover, .reset-btn:hover {
|
||
transform: scale(1.05);
|
||
background: #059669;
|
||
}
|
||
|
||
/* Right Panel: Terminal */
|
||
.terminal-panel {
|
||
background: #1e1e1e;
|
||
color: #f0f0f0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 400px;
|
||
}
|
||
|
||
.terminal-panel.win-cmd { background: #0c0c0c; color: #cccccc; font-family: 'Consolas', monospace; }
|
||
.terminal-panel.win-ps { background: #012456; color: #ffffff; font-family: 'Consolas', monospace; }
|
||
.terminal-panel.mac, .terminal-panel.linux { background: #2b2b2b; color: #f0f0f0; }
|
||
|
||
.terminal-header {
|
||
padding: 8px 12px;
|
||
background: rgba(255, 255, 255, 0.1);
|
||
display: flex;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.dots {
|
||
display: flex;
|
||
gap: 6px;
|
||
}
|
||
|
||
.dot {
|
||
width: 12px;
|
||
height: 12px;
|
||
border-radius: 50%;
|
||
}
|
||
.dot.red { background: #ff5f56; }
|
||
.dot.yellow { background: #ffbd2e; }
|
||
.dot.green { background: #27c93f; }
|
||
|
||
.terminal-panel.win-cmd .dot, .terminal-panel.win-ps .dot { border-radius: 0; background: #ccc; }
|
||
|
||
.terminal-header .title {
|
||
position: absolute;
|
||
left: 0;
|
||
right: 0;
|
||
text-align: center;
|
||
font-size: 12px;
|
||
color: rgba(255, 255, 255, 0.6);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.terminal-body {
|
||
flex: 1;
|
||
padding: 10px;
|
||
overflow-y: auto;
|
||
cursor: text;
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.line {
|
||
white-space: pre-wrap;
|
||
word-break: break-all;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.prompt {
|
||
margin-right: 8px;
|
||
color: #87d700;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.terminal-panel.win-cmd .prompt { color: #cccccc; }
|
||
.terminal-panel.win-ps .prompt { color: #ffffff; }
|
||
|
||
.input-line {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.input-line input {
|
||
background: transparent;
|
||
border: none;
|
||
color: inherit;
|
||
font-family: inherit;
|
||
font-size: inherit;
|
||
flex: 1;
|
||
outline: none;
|
||
padding: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
.line.output {
|
||
color: inherit;
|
||
opacity: 0.9;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.line.error {
|
||
color: #ff5f56;
|
||
}
|
||
|
||
.line.info {
|
||
color: #27c93f;
|
||
margin: 8px 0;
|
||
font-style: italic;
|
||
opacity: 0.7;
|
||
}
|
||
</style>
|