/* Editor / File Viewer app styles */ .app-editor { display: flex; flex-direction: column; height: 100%; } .editor-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--bg-titlebar); border-bottom: 1px solid var(--border-structural); min-height: 44px; } .editor-title-wrap { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1; } .editor-title { font-family: var(--font-mono); font-size: 13px; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-dirty { color: var(--status-amber); font-size: 12px; flex-shrink: 0; } .editor-save-btn { height: 32px; padding: 0 16px; background: var(--accent); border: none; border-radius: var(--radius-sm); color: #fff; font-family: var(--font-ui); font-size: 13px; font-weight: 500; cursor: pointer; flex-shrink: 0; } .editor-save-btn:hover { opacity: 0.9; } .editor-save-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Main content area */ .editor-content { flex: 1; display: flex; overflow: hidden; } /* Text editor body */ .editor-body { display: flex; flex: 1; overflow: hidden; } .editor-lines { width: 48px; padding: 12px 8px 12px 4px; background: var(--bg-dock); border-right: 1px solid var(--border-structural); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; color: var(--text-muted); text-align: right; overflow: hidden; white-space: pre; user-select: none; -webkit-user-select: none; } .editor-textarea { flex: 1; padding: 12px; background: var(--bg-stage); border: none; outline: none; color: var(--text-primary); font-family: var(--font-mono); font-size: 13px; line-height: 1.5; resize: none; tab-size: 4; -moz-tab-size: 4; white-space: pre; overflow: auto; -webkit-overflow-scrolling: touch; } .editor-textarea::selection { background: var(--accent-dim); } /* Image preview */ .editor-preview { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; overflow: auto; -webkit-overflow-scrolling: touch; background: var(--bg-stage); } .editor-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 4px 24px rgba(0,0,0,0.3); } /* Binary file info */ .editor-binary-info { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 48px; background: var(--bg-stage); } .binary-icon { font-size: 48px; } .binary-name { font-family: var(--font-mono); font-size: 16px; font-weight: 500; color: var(--text-primary); } .binary-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .editor-download-btn { margin-top: 12px; height: 40px; padding: 0 24px; background: var(--accent); border: none; border-radius: var(--radius-md); color: #fff; font-family: var(--font-ui); font-size: 14px; font-weight: 500; cursor: pointer; } .editor-download-btn:hover { opacity: 0.9; } /* Status bar */ .editor-status { padding: 4px 12px; background: var(--bg-titlebar); border-top: 1px solid var(--border-structural); font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); min-height: 24px; display: flex; align-items: center; }