| :root { |
| --cli-bg: #0a0b10; |
| --cli-green: #00ff41; |
| --cli-blue: #00ccff; |
| --cli-border: rgba(0, 204, 255, 0.2); |
| --cli-font: 'Fira Code', 'JetBrains Mono', monospace; |
|
|
| --tokyo-bg: #1a1b26; |
| --tokyo-sidebar: #16161e; |
| --tokyo-fg: #a9b1d6; |
| --tokyo-comment: #565f89; |
| --tokyo-blue: #7aa2f7; |
| --tokyo-magenta: #bb9af7; |
| --tokyo-green: #9ece6a; |
| --tokyo-orange: #ff9e64; |
| --tokyo-cyan: #7dcfff; |
| } |
|
|
| .ide-layout { |
| overflow: hidden; |
| height: 100vh; |
| display: flex; |
| } |
|
|
| .editor-wrapper { |
| background: var(--tokyo-bg); |
| display: flex; |
| flex: 1; |
| position: relative; |
| overflow: hidden; |
| } |
|
|
| .peak-pre-layer { |
| margin: 0 !important; |
| padding: 20px !important; |
| position: absolute !important; |
| top: 0; left: 0; right: 0; bottom: 0; |
| overflow: hidden !important; |
| pointer-events: none; |
| white-space: pre !important; |
| font-family: var(--cli-font) !important; |
| font-size: 15px !important; |
| line-height: 1.6 !important; |
| background: transparent !important; |
| z-index: 1; |
| text-shadow: none !important; |
| } |
|
|
| .raw-editor-layer { |
| margin: 0; |
| padding: 20px; |
| width: 100%; |
| height: 100%; |
| background: transparent; |
| color: transparent; |
| caret-color: var(--tokyo-blue); |
| border: none; |
| outline: none; |
| resize: none; |
| font-family: var(--cli-font); |
| font-size: 15px; |
| line-height: 1.6; |
| white-space: pre; |
| overflow: auto; |
| position: absolute; |
| top: 0; left: 0; |
| z-index: 2; |
| tab-size: 4; |
| } |
|
|
|
|
| .cli-line-numbers { |
| width: 50px; |
| background: var(--tokyo-sidebar); |
| color: #3b4261; |
| text-align: right; |
| padding: 20px 12px; |
| font-family: var(--cli-font); |
| font-size: 14px; |
| line-height: 1.6; |
| user-select: none; |
| border-right: 1px solid rgba(0,0,0,0.3); |
| overflow: hidden; |
| } |
|
|
| .token.comment { color: var(--tokyo-comment) !important; font-style: italic !important; } |
| .token.keyword { color: var(--tokyo-magenta) !important; } |
| .token.string { color: var(--tokyo-green) !important; } |
| .token.function { color: var(--tokyo-blue) !important; } |
| .token.number, .token.boolean { color: var(--tokyo-orange) !important; } |
| .token.operator, .token.punctuation { color: #89ddff !important; } |
| .token.variable { color: var(--tokyo-fg) !important; } |
| .token.class-name, .token.builtin { color: var(--tokyo-cyan) !important; } |
|
|
| .exo-context-menu { |
| background: #16161e !important; |
| border: 1px solid var(--cli-border) !important; |
| border-radius: 6px; |
| box-shadow: 0 10px 30px rgba(0,0,0,0.7); |
| padding: 5px; |
| min-width: 190px; |
| z-index: 10000; |
| } |
|
|
| .context-item { |
| padding: 10px 14px; |
| font-size: 13px; |
| color: #cbd5e1; |
| display: flex; |
| align-items: center; |
| gap: 10px; |
| cursor: pointer; |
| border-radius: 4px; |
| transition: 0.2s; |
| } |
|
|
| .context-item:hover { |
| background: rgba(0, 204, 255, 0.1) !important; |
| color: var(--cli-blue) !important; |
| } |
|
|
| .context-item.danger { color: #f7768e; } |
|
|
| .tree-row { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| padding: 6px 15px; |
| cursor: pointer; |
| color: #787c99; |
| font-size: 13px; |
| transition: 0.2s; |
| } |
|
|
| .tree-row:hover { background: rgba(122, 162, 247, 0.05); } |
| .tree-row.active { |
| background: rgba(0, 204, 255, 0.1); |
| color: var(--cli-blue); |
| border-right: 2px solid var(--cli-blue); |
| } |
|
|
| .cli-loader-wrapper { |
| display: flex; |
| justify-content: center; |
| align-items: center; |
| height: 100vh; |
| background-color: var(--cli-bg); |
| color: var(--cli-green); |
| font-family: var(--cli-font); |
| } |
|
|
| .cli-progress-bar { |
| height: 4px; |
| background: var(--cli-green); |
| margin-top: 15px; |
| animation: cli-load 2s infinite; |
| } |
|
|
| @keyframes cli-load { |
| 0% { width: 0%; } |
| 50% { width: 70%; } |
| 100% { width: 100%; } |
| } |
|
|
| ::-webkit-scrollbar { width: 10px; height: 10px; } |
| ::-webkit-scrollbar-track { background: var(--tokyo-sidebar); } |
| ::-webkit-scrollbar-thumb { background: #2f334d; border-radius: 5px; } |
| ::-webkit-scrollbar-thumb:hover { background: #3b4261; } |
|
|
