refactor: reorganize package structure and decouple framework packages (#338)
* refactor: reorganize package structure and decouple framework packages ## Package Structure Reorganization - Reorganized 55 packages into categorized subdirectories: - packages/framework/ - Generic framework (Laya/Cocos compatible) - packages/engine/ - ESEngine core modules - packages/rendering/ - Rendering modules (WASM dependent) - packages/physics/ - Physics modules - packages/streaming/ - World streaming - packages/network-ext/ - Network extensions - packages/editor/ - Editor framework and plugins - packages/rust/ - Rust WASM engine - packages/tools/ - Build tools and SDK ## Framework Package Decoupling - Decoupled behavior-tree and blueprint packages from ESEngine dependencies - Created abstracted interfaces (IBTAssetManager, IBehaviorTreeAssetContent) - ESEngine-specific code moved to esengine/ subpath exports - Framework packages now usable with Cocos/Laya without ESEngine ## CI Configuration - Updated CI to only type-check and lint framework packages - Added type-check:framework and lint:framework scripts ## Breaking Changes - Package import paths changed due to directory reorganization - ESEngine integrations now use subpath imports (e.g., '@esengine/behavior-tree/esengine') * fix: update es-engine file path after directory reorganization * docs: update README to focus on framework over engine * ci: only build framework packages, remove Rust/WASM dependencies * fix: remove esengine subpath from behavior-tree and blueprint builds ESEngine integration code will only be available in full engine builds. Framework packages are now purely engine-agnostic. * fix: move network-protocols to framework, build both in CI * fix: update workflow paths from packages/core to packages/framework/core * fix: exclude esengine folder from type-check in behavior-tree and blueprint * fix: update network tsconfig references to new paths * fix: add test:ci:framework to only test framework packages in CI * fix: only build core and math npm packages in CI * fix: exclude test files from CodeQL and fix string escaping security issue
This commit is contained in:
YHH
GitHub
290
packages/editor/editor-app/src/styles/AboutDialog.css
Normal file
290
packages/editor/editor-app/src/styles/AboutDialog.css
Normal file
@@ -0,0 +1,290 @@
|
||||
/* ============================================
|
||||
About Dialog Styles
|
||||
关于对话框样式
|
||||
============================================ */
|
||||
|
||||
/* Modal Overlay / 模态遮罩层 */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
/* Dialog Container / 对话框容器 */
|
||||
.about-dialog {
|
||||
background-color: var(--color-bg-base);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
width: 460px;
|
||||
max-width: 90vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Header / 标题栏 */
|
||||
.about-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
background-color: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.about-header h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-header .close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.about-header .close-btn:hover {
|
||||
background-color: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Content / 内容区域 */
|
||||
.about-content {
|
||||
padding: var(--spacing-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
/* Logo / Logo 区域 */
|
||||
.about-logo {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Info Section / 信息区域 */
|
||||
.about-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-info h3 {
|
||||
margin: 0 0 var(--spacing-sm) 0;
|
||||
font-size: var(--font-size-xl);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.about-version {
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.about-description {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
max-width: 360px;
|
||||
}
|
||||
|
||||
/* Update Section / 更新区域 */
|
||||
.about-update {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-md);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.update-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background-color: var(--color-bg-hover);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-primary);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.update-btn:hover:not(:disabled) {
|
||||
background-color: var(--color-bg-inset);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.update-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.update-btn.install-btn {
|
||||
background-color: var(--color-success, #22c55e);
|
||||
border-color: var(--color-success, #22c55e);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.update-btn.install-btn:hover:not(:disabled) {
|
||||
background-color: var(--color-success-hover, #16a34a);
|
||||
border-color: var(--color-success-hover, #16a34a);
|
||||
}
|
||||
|
||||
/* Update Status / 更新状态 */
|
||||
.update-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-xs);
|
||||
}
|
||||
|
||||
.update-status.status-checking {
|
||||
background-color: rgba(86, 156, 214, 0.1);
|
||||
color: #569CD6;
|
||||
}
|
||||
|
||||
.update-status.status-available {
|
||||
background-color: rgba(78, 201, 176, 0.1);
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.update-status.status-latest {
|
||||
background-color: rgba(78, 201, 176, 0.1);
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.update-status.status-error {
|
||||
background-color: rgba(206, 145, 120, 0.1);
|
||||
color: #CE9178;
|
||||
}
|
||||
|
||||
.update-status.status-installing {
|
||||
background-color: rgba(34, 197, 94, 0.1);
|
||||
color: #22c55e;
|
||||
}
|
||||
|
||||
.update-status .status-available {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.update-status .status-latest {
|
||||
color: #4EC9B0;
|
||||
}
|
||||
|
||||
.update-status .status-error {
|
||||
color: #CE9178;
|
||||
}
|
||||
|
||||
/* Links / 链接区域 */
|
||||
.about-links {
|
||||
display: flex;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.about-link {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
font-size: var(--font-size-sm);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.about-link:hover {
|
||||
color: var(--color-primary-hover);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Footer / 页脚 */
|
||||
.about-footer {
|
||||
padding-top: var(--spacing-md);
|
||||
border-top: 1px solid var(--color-border-subtle);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.about-footer p {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-xs);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* Actions / 操作区域 */
|
||||
.about-actions {
|
||||
padding: var(--spacing-lg) var(--spacing-xl);
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
background-color: var(--color-bg-elevated);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background-color: var(--color-primary);
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: background-color var(--transition-fast);
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* Animation / 动画 */
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
740
packages/editor/editor-app/src/styles/AdvancedProfiler.css
Normal file
740
packages/editor/editor-app/src/styles/AdvancedProfiler.css
Normal file
@@ -0,0 +1,740 @@
|
||||
/* ==================== Advanced Profiler ==================== */
|
||||
.advanced-profiler {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #1a1a1a;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== Top Toolbar ==================== */
|
||||
.profiler-top-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: #2d2d2d;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
gap: 12px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-thread-selector {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.profiler-thread-btn {
|
||||
padding: 2px 8px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profiler-thread-btn.active {
|
||||
background: #4a9eff;
|
||||
border-color: #4a9eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profiler-frame-time {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
margin-left: auto;
|
||||
font-family: 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.profiler-frame-time-label {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.profiler-frame-time-value {
|
||||
color: #4ade80;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profiler-frame-time-value.warning {
|
||||
color: #fbbf24;
|
||||
}
|
||||
|
||||
.profiler-frame-time-value.critical {
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
.profiler-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-control-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.profiler-control-btn:hover {
|
||||
background: #3a3a3a;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.profiler-control-btn.active {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
/* ==================== Main Layout ==================== */
|
||||
.profiler-main {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== Left Panel (Stats Groups) ==================== */
|
||||
.profiler-left-panel {
|
||||
width: 200px;
|
||||
min-width: 150px;
|
||||
max-width: 300px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #222;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-search-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.profiler-search-box input {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
padding: 4px 8px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.profiler-search-box input:focus {
|
||||
outline: none;
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
.profiler-search-box svg {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-group-controls {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 6px 8px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.profiler-group-select {
|
||||
flex: 1;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
padding: 2px 4px;
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profiler-type-filters {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
padding: 4px 8px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.profiler-type-filter {
|
||||
padding: 2px 6px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 3px;
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profiler-type-filter:hover {
|
||||
background: #3a3a3a;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.profiler-type-filter.active {
|
||||
background: #4a9eff;
|
||||
border-color: #4a9eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profiler-type-filter.hier { background: #3b82f6; border-color: #3b82f6; color: #fff; }
|
||||
.profiler-type-filter.float { background: #22c55e; border-color: #22c55e; color: #fff; }
|
||||
.profiler-type-filter.int { background: #f59e0b; border-color: #f59e0b; color: #000; }
|
||||
.profiler-type-filter.mem { background: #ef4444; border-color: #ef4444; color: #fff; }
|
||||
|
||||
.profiler-groups-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.profiler-groups-list::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.profiler-groups-list::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.profiler-groups-list::-webkit-scrollbar-thumb {
|
||||
background: #3a3a3a;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.profiler-group-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.profiler-group-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.profiler-group-item.selected {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.profiler-group-checkbox {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin-right: 6px;
|
||||
accent-color: #4a9eff;
|
||||
}
|
||||
|
||||
.profiler-group-name {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profiler-group-count {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
/* ==================== Right Content Area ==================== */
|
||||
.profiler-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* ==================== Graph View ==================== */
|
||||
.profiler-graph-section {
|
||||
height: 120px;
|
||||
min-height: 80px;
|
||||
max-height: 200px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-graph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
background: #262626;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profiler-graph-title {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.profiler-graph-stats {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
margin-left: auto;
|
||||
font-family: 'Consolas', monospace;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profiler-graph-stat {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-graph-stat-label {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.profiler-graph-stat-value {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.profiler-graph-canvas {
|
||||
flex: 1;
|
||||
background: #1e1e1e;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profiler-graph-canvas canvas {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.profiler-graph-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.profiler-graph-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
border-top: 1px dashed #333;
|
||||
}
|
||||
|
||||
.profiler-graph-line-label {
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
transform: translateY(-50%);
|
||||
font-size: 9px;
|
||||
color: #555;
|
||||
background: #1e1e1e;
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
/* ==================== Call Graph Section ==================== */
|
||||
.profiler-callgraph-section {
|
||||
height: 140px;
|
||||
min-height: 100px;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-callgraph-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
background: #262626;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.profiler-callgraph-controls {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.profiler-callgraph-type-select {
|
||||
padding: 2px 6px;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #333;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.profiler-callgraph-view-mode {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.profiler-callgraph-view-btn {
|
||||
padding: 2px 6px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 3px;
|
||||
color: #888;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profiler-callgraph-view-btn.active {
|
||||
background: #3b82f6;
|
||||
border-color: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.profiler-callgraph-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profiler-callgraph-column {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profiler-callgraph-column:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.profiler-callgraph-column-header {
|
||||
padding: 4px 8px;
|
||||
background: #222;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-align: center;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-callgraph-column-header svg {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.profiler-callgraph-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 2px 0;
|
||||
}
|
||||
|
||||
.profiler-callgraph-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 3px 8px;
|
||||
cursor: pointer;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.profiler-callgraph-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.profiler-callgraph-item.current {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
}
|
||||
|
||||
.profiler-callgraph-item-name {
|
||||
flex: 1;
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.profiler-callgraph-item-percent {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
font-family: 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.profiler-callgraph-item-time {
|
||||
font-size: 10px;
|
||||
color: #4ade80;
|
||||
font-family: 'Consolas', monospace;
|
||||
}
|
||||
|
||||
/* ==================== Data Table Section ==================== */
|
||||
.profiler-table-section {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 150px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.profiler-table-header {
|
||||
display: flex;
|
||||
background: #2d2d2d;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-table-header-cell {
|
||||
padding: 6px 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.profiler-table-header-cell:hover {
|
||||
background: #3a3a3a;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.profiler-table-header-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.profiler-table-header-cell.sorted {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.profiler-table-header-cell.sorted svg {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.profiler-table-body {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.profiler-table-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.profiler-table-body::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.profiler-table-body::-webkit-scrollbar-thumb {
|
||||
background: #3a3a3a;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.profiler-table-row {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profiler-table-row:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.profiler-table-row.selected {
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
.profiler-table-row.expanded {
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
.profiler-table-cell {
|
||||
padding: 4px 8px;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border-right: 1px solid #222;
|
||||
}
|
||||
|
||||
.profiler-table-cell:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.profiler-table-cell.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-table-cell.name .expand-icon {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.profiler-table-cell.name .expand-icon.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.profiler-table-cell.name .expand-icon.clickable:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.profiler-table-cell.name .expand-icon.placeholder {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
/* 层级行的背景色变化 */
|
||||
.profiler-table-row.depth-1 {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.profiler-table-row.depth-2 {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.profiler-table-row.depth-3 {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
}
|
||||
|
||||
.profiler-table-row.depth-4 {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.profiler-table-cell.name .category-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-table-cell.numeric {
|
||||
text-align: right;
|
||||
font-family: 'Consolas', monospace;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.profiler-table-cell.percent {
|
||||
text-align: right;
|
||||
font-family: 'Consolas', monospace;
|
||||
}
|
||||
|
||||
.profiler-table-cell .bar-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-table-cell .bar {
|
||||
height: 10px;
|
||||
background: #4a9eff;
|
||||
border-radius: 2px;
|
||||
min-width: 2px;
|
||||
}
|
||||
|
||||
.profiler-table-cell .bar.warning {
|
||||
background: #fbbf24;
|
||||
}
|
||||
|
||||
.profiler-table-cell .bar.critical {
|
||||
background: #ef4444;
|
||||
}
|
||||
|
||||
/* Column widths */
|
||||
.col-name { flex: 2; min-width: 150px; }
|
||||
.col-inc-time { width: 80px; flex-shrink: 0; }
|
||||
.col-inc-percent { width: 80px; flex-shrink: 0; }
|
||||
.col-exc-time { width: 80px; flex-shrink: 0; }
|
||||
.col-exc-percent { width: 80px; flex-shrink: 0; }
|
||||
.col-calls { width: 60px; flex-shrink: 0; }
|
||||
.col-avg-calls { width: 70px; flex-shrink: 0; }
|
||||
.col-thread-percent { width: 80px; flex-shrink: 0; }
|
||||
.col-frame-percent { width: 80px; flex-shrink: 0; }
|
||||
|
||||
/* Category colors */
|
||||
.category-ecs { background-color: #3b82f6; }
|
||||
.category-rendering { background-color: #8b5cf6; }
|
||||
.category-physics { background-color: #f59e0b; }
|
||||
.category-audio { background-color: #ec4899; }
|
||||
.category-network { background-color: #14b8a6; }
|
||||
.category-script { background-color: #84cc16; }
|
||||
.category-memory { background-color: #ef4444; }
|
||||
.category-animation { background-color: #f97316; }
|
||||
.category-ai { background-color: #6366f1; }
|
||||
.category-input { background-color: #06b6d4; }
|
||||
.category-loading { background-color: #a855f7; }
|
||||
.category-custom { background-color: #64748b; }
|
||||
|
||||
/* ==================== Empty State ==================== */
|
||||
.profiler-empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
text-align: center;
|
||||
padding: 32px;
|
||||
}
|
||||
|
||||
.profiler-empty-state svg {
|
||||
margin-bottom: 16px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.profiler-empty-state-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.profiler-empty-state-hint {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* ==================== Resize Handle ==================== */
|
||||
.profiler-resize-handle {
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
background: transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.profiler-resize-handle:hover {
|
||||
background: #4a9eff;
|
||||
}
|
||||
|
||||
.profiler-resize-handle-h {
|
||||
height: 4px;
|
||||
cursor: row-resize;
|
||||
background: transparent;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.profiler-resize-handle-h:hover {
|
||||
background: #4a9eff;
|
||||
}
|
||||
106
packages/editor/editor-app/src/styles/App.css
Normal file
106
packages/editor/editor-app/src/styles/App.css
Normal file
@@ -0,0 +1,106 @@
|
||||
.editor-loading {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.editor-loading h2 {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-top: var(--spacing-md);
|
||||
}
|
||||
|
||||
.editor-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-base);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
|
||||
.editor-content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
cursor: default;
|
||||
/* Leave space for StatusBar */
|
||||
padding-bottom: 24px;
|
||||
}
|
||||
|
||||
.viewport {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: var(--color-bg-base);
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.viewport h3 {
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
margin: 0 0 var(--spacing-md) 0;
|
||||
}
|
||||
|
||||
.viewport p {
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.editor-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: var(--layout-footer-height);
|
||||
padding: 0 8px;
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
font-size: var(--font-size-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.editor-footer span {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.loading-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(30, 30, 30, 0.95);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-overlay);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.loading-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 32px 48px;
|
||||
background-color: #252526;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.loading-message {
|
||||
font-size: 14px;
|
||||
color: #cccccc;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
}
|
||||
433
packages/editor/editor-app/src/styles/AssetBrowser.css
Normal file
433
packages/editor/editor-app/src/styles/AssetBrowser.css
Normal file
@@ -0,0 +1,433 @@
|
||||
.asset-browser {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: var(--color-bg-base);
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
container-type: inline-size;
|
||||
container-name: asset-browser;
|
||||
}
|
||||
|
||||
.asset-browser-header {
|
||||
padding: 0 8px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #333;
|
||||
height: 26px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asset-browser-header h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: 600;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.view-mode-buttons {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.view-mode-btn {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid #3e3e3e;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.view-mode-btn:first-child {
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.view-mode-btn:last-child {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.view-mode-btn:hover:not(.active) {
|
||||
background: #2a2d2e;
|
||||
}
|
||||
|
||||
.view-mode-btn.active {
|
||||
background: #0e639c;
|
||||
border-color: #0e639c;
|
||||
color: #ffffff;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 响应式：小宽度时只显示图标 - 使用容器查询 */
|
||||
@container asset-browser (max-width: 400px) {
|
||||
.view-mode-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.view-mode-btn {
|
||||
padding: 6px 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-browser-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.asset-browser-tree,
|
||||
.asset-browser-tree-only {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.asset-browser-list {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
container-type: inline-size;
|
||||
container-name: asset-list-container;
|
||||
}
|
||||
|
||||
.asset-browser-breadcrumb {
|
||||
padding: 8px 12px;
|
||||
background: #2d2d30;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
font-size: var(--font-size-sm);
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.breadcrumb-item:hover {
|
||||
background: #3e3e3e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.breadcrumb-item:active {
|
||||
background: #094771;
|
||||
}
|
||||
|
||||
.breadcrumb-separator {
|
||||
color: #858585;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.asset-browser-toolbar {
|
||||
padding: 8px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
.asset-search {
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: #3c3c3c;
|
||||
border: 1px solid #3e3e3e;
|
||||
border-radius: 3px;
|
||||
color: #cccccc;
|
||||
font-size: var(--font-size-base);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.asset-search:focus {
|
||||
border-color: #007acc;
|
||||
background: #3e3e3e;
|
||||
}
|
||||
|
||||
.asset-search::placeholder {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.asset-browser-loading,
|
||||
.asset-browser-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 200px;
|
||||
color: #858585;
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
|
||||
.asset-list {
|
||||
flex: 1;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: 8px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
align-content: start;
|
||||
}
|
||||
|
||||
/* 容器查询：根据容器宽度调整布局 */
|
||||
@container asset-list-container (max-width: 400px) {
|
||||
.asset-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@container asset-list-container (max-width: 250px) {
|
||||
.asset-list {
|
||||
grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
|
||||
gap: 4px;
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
@container asset-list-container (max-width: 150px) {
|
||||
.asset-list {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
padding: 6px 8px;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
text-align: left;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.asset-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 中等窄度优化 */
|
||||
@container asset-list-container (max-width: 250px) {
|
||||
.asset-item {
|
||||
padding: 8px 6px;
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.asset-type {
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px 8px;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
transition: all 0.2s ease;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.asset-item[draggable="true"]:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.asset-item:hover {
|
||||
background: #2a2d2e;
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.asset-item.selected {
|
||||
background: #094771;
|
||||
box-shadow: 0 0 0 1px rgba(14, 108, 170, 0.3);
|
||||
}
|
||||
|
||||
.asset-item.selected:hover {
|
||||
background: #0e6caa;
|
||||
}
|
||||
|
||||
/* 拖拽中的样式 */
|
||||
.asset-item.dragging {
|
||||
opacity: 0.5;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* 拖拽时的指示器 */
|
||||
.asset-item::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
left: -2px;
|
||||
right: -2px;
|
||||
bottom: -2px;
|
||||
border: 2px dashed transparent;
|
||||
border-radius: 6px;
|
||||
transition: border-color 0.2s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.asset-item[draggable="true"]:hover::before {
|
||||
border-color: rgba(74, 222, 128, 0.3);
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
color: #cccccc;
|
||||
margin-bottom: 8px;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.asset-icon.folder {
|
||||
color: #dcb67a;
|
||||
}
|
||||
|
||||
/* 系统文件夹特殊标记 */
|
||||
.asset-icon.system-folder {
|
||||
filter: drop-shadow(0 0 3px rgba(66, 165, 245, 0.5));
|
||||
animation: subtle-pulse 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 3px rgba(66, 165, 245, 0.5));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 6px rgba(66, 165, 245, 0.7));
|
||||
}
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
font-size: var(--font-size-sm);
|
||||
color: #cccccc;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.asset-type {
|
||||
font-size: var(--font-size-xs);
|
||||
color: #858585;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.asset-browser-list,
|
||||
.asset-list {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.asset-browser-list::-webkit-scrollbar,
|
||||
.asset-list::-webkit-scrollbar,
|
||||
.file-tree::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.asset-browser-list::-webkit-scrollbar-track,
|
||||
.asset-list::-webkit-scrollbar-track,
|
||||
.file-tree::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.asset-browser-list::-webkit-scrollbar-thumb,
|
||||
.asset-list::-webkit-scrollbar-thumb,
|
||||
.file-tree::-webkit-scrollbar-thumb {
|
||||
background: #424242;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.asset-browser-list::-webkit-scrollbar-thumb:hover,
|
||||
.asset-list::-webkit-scrollbar-thumb:hover,
|
||||
.file-tree::-webkit-scrollbar-thumb:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
/* Dialog styles */
|
||||
.dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #404040;
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.dialog-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #404040;
|
||||
}
|
||||
|
||||
.dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.dialog-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #404040;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
397
packages/editor/editor-app/src/styles/AssetPickerDialog.css
Normal file
397
packages/editor/editor-app/src/styles/AssetPickerDialog.css
Normal file
@@ -0,0 +1,397 @@
|
||||
.asset-picker-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-picker-dialog {
|
||||
background-color: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
width: 700px;
|
||||
max-width: 90vw;
|
||||
max-height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.asset-picker-header {
|
||||
padding: 15px 20px;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.asset-picker-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: #cccccc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.asset-picker-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 3px;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.asset-picker-close:hover {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
/* 工具栏 */
|
||||
.asset-picker-toolbar {
|
||||
padding: 10px 15px;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
background: none;
|
||||
border: 1px solid #444;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
padding: 6px 8px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.toolbar-button:hover:not(:disabled) {
|
||||
background-color: #3c3c3c;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.toolbar-button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.toolbar-button.active {
|
||||
background-color: #0e639c;
|
||||
border-color: #0e639c;
|
||||
}
|
||||
|
||||
.view-mode-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* 面包屑导航 */
|
||||
.asset-picker-breadcrumb {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
padding: 0 5px;
|
||||
}
|
||||
|
||||
.asset-picker-breadcrumb::-webkit-scrollbar {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.asset-picker-breadcrumb::-webkit-scrollbar-thumb {
|
||||
background-color: #555;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.asset-picker-breadcrumb .breadcrumb-item {
|
||||
cursor: pointer;
|
||||
color: #0e639c;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.asset-picker-breadcrumb .breadcrumb-item:hover {
|
||||
color: #1177bb;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.asset-picker-breadcrumb .breadcrumb-separator {
|
||||
color: #666;
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
/* 搜索框 */
|
||||
.asset-picker-search {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.asset-picker-search .search-icon {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
background-color: #1e1e1e;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
padding: 6px 10px;
|
||||
color: #cccccc;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
border-color: #0e639c;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.search-clear {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-radius: 3px;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.search-clear:hover {
|
||||
background-color: #3c3c3c;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
/* 内容区域 */
|
||||
.asset-picker-content {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
min-height: 350px;
|
||||
}
|
||||
|
||||
.asset-picker-content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.asset-picker-content::-webkit-scrollbar-track {
|
||||
background-color: #1e1e1e;
|
||||
}
|
||||
|
||||
.asset-picker-content::-webkit-scrollbar-thumb {
|
||||
background-color: #555;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.asset-picker-content::-webkit-scrollbar-thumb:hover {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.asset-picker-loading,
|
||||
.asset-picker-empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 列表视图 */
|
||||
.asset-picker-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.asset-picker-list.list {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.asset-picker-list.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
/* 资产项 */
|
||||
.asset-picker-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px 12px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: #cccccc;
|
||||
font-size: 13px;
|
||||
transition: all 0.15s;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.asset-picker-list.list .asset-picker-item {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.asset-picker-list.grid .asset-picker-item {
|
||||
flex-direction: column;
|
||||
padding: 15px 10px;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.asset-picker-item:hover {
|
||||
background-color: #2a2a2a;
|
||||
}
|
||||
|
||||
.asset-picker-item.selected {
|
||||
background-color: #0e639c;
|
||||
}
|
||||
|
||||
.asset-picker-item.selected:hover {
|
||||
background-color: #1177bb;
|
||||
}
|
||||
|
||||
.asset-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.asset-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.asset-picker-list.grid .asset-info {
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.asset-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.asset-picker-list.grid .asset-name {
|
||||
font-size: 12px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.asset-meta {
|
||||
display: flex;
|
||||
gap: 12px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.asset-size,
|
||||
.asset-date {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* 底部 */
|
||||
.asset-picker-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background-color: #252525;
|
||||
}
|
||||
|
||||
.footer-info {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.footer-buttons {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.asset-picker-cancel,
|
||||
.asset-picker-select {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.asset-picker-cancel {
|
||||
background-color: #3c3c3c;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.asset-picker-cancel:hover {
|
||||
background-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.asset-picker-select {
|
||||
background-color: #0e639c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.asset-picker-select:hover:not(:disabled) {
|
||||
background-color: #1177bb;
|
||||
}
|
||||
|
||||
.asset-picker-select:disabled {
|
||||
background-color: #555;
|
||||
color: #888;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
}
|
||||
1060
packages/editor/editor-app/src/styles/BuildSettingsPanel.css
Normal file
1060
packages/editor/editor-app/src/styles/BuildSettingsPanel.css
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,73 @@
|
||||
/**
|
||||
* Build Settings Window Styles.
|
||||
* 构建设置窗口样式。
|
||||
*/
|
||||
|
||||
.build-settings-window-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.build-settings-window {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
height: 80%;
|
||||
max-height: 600px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.build-settings-window-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
background: #2d2d2d;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.build-settings-window-header h2 {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.build-settings-window-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.build-settings-window-close:hover {
|
||||
background: #3a3a3a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.build-settings-window-content {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
176
packages/editor/editor-app/src/styles/CompileDialog.css
Normal file
176
packages/editor/editor-app/src/styles/CompileDialog.css
Normal file
@@ -0,0 +1,176 @@
|
||||
.compile-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
.compile-dialog {
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
min-width: 500px;
|
||||
max-width: 800px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.compile-dialog-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
.compile-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.compile-dialog-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.compile-dialog-close:hover {
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.compile-dialog-content {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.compile-dialog-description {
|
||||
padding: 12px;
|
||||
background: #252526;
|
||||
border-left: 3px solid #0e639c;
|
||||
margin-bottom: 20px;
|
||||
font-size: 13px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.compile-dialog-error {
|
||||
padding: 12px;
|
||||
background: rgba(244, 135, 113, 0.1);
|
||||
border-left: 3px solid #f48771;
|
||||
margin-bottom: 16px;
|
||||
font-size: 13px;
|
||||
color: #f48771;
|
||||
}
|
||||
|
||||
.compile-dialog-result {
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
margin-top: 16px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.compile-dialog-result.success {
|
||||
background: rgba(137, 209, 133, 0.1);
|
||||
border: 1px solid rgba(137, 209, 133, 0.3);
|
||||
color: #89d185;
|
||||
}
|
||||
|
||||
.compile-dialog-result.error {
|
||||
background: rgba(244, 135, 113, 0.1);
|
||||
border: 1px solid rgba(244, 135, 113, 0.3);
|
||||
color: #f48771;
|
||||
}
|
||||
|
||||
.compile-dialog-result-message {
|
||||
font-weight: 600;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.compile-dialog-output-files {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.compile-dialog-output-file {
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.compile-dialog-errors {
|
||||
margin-top: 12px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.compile-dialog-error-item {
|
||||
padding: 6px 10px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
margin-bottom: 6px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.compile-dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
.compile-dialog-btn {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.compile-dialog-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compile-dialog-btn-cancel {
|
||||
background: #3a3a3a;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.compile-dialog-btn-cancel:hover:not(:disabled) {
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
.compile-dialog-btn-primary {
|
||||
background: #0e639c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.compile-dialog-btn-primary:hover:not(:disabled) {
|
||||
background: #1177bb;
|
||||
}
|
||||
167
packages/editor/editor-app/src/styles/CompilerConfigDialog.css
Normal file
167
packages/editor/editor-app/src/styles/CompilerConfigDialog.css
Normal file
@@ -0,0 +1,167 @@
|
||||
.compiler-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
.compiler-dialog {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #404040;
|
||||
border-radius: 8px;
|
||||
min-width: 600px;
|
||||
max-width: 800px;
|
||||
max-height: 80vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.compiler-dialog-header {
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #404040;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.compiler-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.close-button {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.close-button:hover {
|
||||
background: #3a3a3a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.compiler-dialog-body {
|
||||
padding: 20px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.no-config {
|
||||
color: #888;
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.compile-result {
|
||||
margin: 0 20px;
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.compile-result.success {
|
||||
background: #1a3a1a;
|
||||
border: 1px solid #2d5a2d;
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.compile-result.error {
|
||||
background: #3a1a1a;
|
||||
border: 1px solid #5a2d2d;
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.result-message {
|
||||
font-weight: 500;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.output-files {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.error-list {
|
||||
margin-top: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.error-item {
|
||||
padding: 4px 0;
|
||||
color: #fca5a5;
|
||||
}
|
||||
|
||||
.compiler-dialog-footer {
|
||||
padding: 16px 20px;
|
||||
border-top: 1px solid #404040;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.cancel-button {
|
||||
padding: 8px 20px;
|
||||
background: #3a3a3a;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.cancel-button:hover:not(:disabled) {
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
.cancel-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.compile-button {
|
||||
padding: 8px 24px;
|
||||
background: #0e639c;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.compile-button:hover:not(:disabled) {
|
||||
background: #1177bb;
|
||||
}
|
||||
|
||||
.compile-button:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
177
packages/editor/editor-app/src/styles/ConfirmDialog.css
Normal file
177
packages/editor/editor-app/src/styles/ConfirmDialog.css
Normal file
@@ -0,0 +1,177 @@
|
||||
.confirm-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-dialog {
|
||||
background: var(--bg-secondary, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color, #404040);
|
||||
}
|
||||
|
||||
.confirm-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
}
|
||||
|
||||
.confirm-dialog-header .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary, #999);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.confirm-dialog-header .close-btn:hover {
|
||||
background: var(--bg-hover, #3a3a3a);
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
|
||||
.confirm-dialog-content {
|
||||
padding: 20px;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.confirm-dialog-content p {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.confirm-dialog-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border-color, #404040);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn {
|
||||
padding: 8px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.cancel {
|
||||
background: var(--bg-hover, #3a3a3a);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.cancel:hover {
|
||||
background: var(--bg-active, #4a4a4a);
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.confirm {
|
||||
background: #4a9eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.confirm:hover {
|
||||
background: #6bb0ff;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
/* External Modification Dialog | 外部修改对话框 */
|
||||
.external-modification-dialog .warning-icon {
|
||||
color: #f0ad4e;
|
||||
margin-right: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.external-modification-dialog .confirm-dialog-header {
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.external-modification-dialog .confirm-dialog-header h2 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.external-modification-dialog .hint-text {
|
||||
margin-top: 12px;
|
||||
color: var(--text-secondary, #999);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.external-modification-footer {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.reload {
|
||||
background: #5bc0de;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.reload:hover {
|
||||
background: #7cd0e8;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.overwrite {
|
||||
background: #f0ad4e;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.confirm-dialog-btn.overwrite:hover {
|
||||
background: #f4be6e;
|
||||
}
|
||||
1007
packages/editor/editor-app/src/styles/ContentBrowser.css
Normal file
1007
packages/editor/editor-app/src/styles/ContentBrowser.css
Normal file
File diff suppressed because it is too large
Load Diff
105
packages/editor/editor-app/src/styles/ContextMenu.css
Normal file
105
packages/editor/editor-app/src/styles/ContextMenu.css
Normal file
@@ -0,0 +1,105 @@
|
||||
.context-menu {
|
||||
position: fixed;
|
||||
background: #2d2d30;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 0;
|
||||
min-width: 200px;
|
||||
max-height: calc(100vh - 80px);
|
||||
overflow-y: auto;
|
||||
z-index: 10001;
|
||||
font-size: 13px;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.context-menu.submenu {
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
.context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
padding-right: 24px;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.1s ease;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.context-menu-item:hover:not(.disabled),
|
||||
.context-menu-item.active:not(.disabled) {
|
||||
background-color: #094771;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.context-menu-item.disabled {
|
||||
color: #666666;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.context-menu-item.has-submenu {
|
||||
padding-right: 28px;
|
||||
}
|
||||
|
||||
.context-menu-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.context-menu-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.context-menu-label {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.context-menu-shortcut {
|
||||
color: #888888;
|
||||
font-size: 11px;
|
||||
margin-left: 24px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.context-menu-item:hover:not(.disabled) .context-menu-shortcut {
|
||||
color: #aaaaaa;
|
||||
}
|
||||
|
||||
.context-menu-arrow {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
color: #888888;
|
||||
}
|
||||
|
||||
.context-menu-item:hover:not(.disabled) .context-menu-arrow {
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.context-menu-separator {
|
||||
height: 1px;
|
||||
background-color: #3e3e42;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
/* Section header in submenu */
|
||||
.context-menu-section-header {
|
||||
padding: 4px 12px;
|
||||
color: #888888;
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
cursor: default;
|
||||
}
|
||||
104
packages/editor/editor-app/src/styles/EditorViewport.css
Normal file
104
packages/editor/editor-app/src/styles/EditorViewport.css
Normal file
@@ -0,0 +1,104 @@
|
||||
/**
|
||||
* EditorViewport Styles
|
||||
* 编辑器视口样式
|
||||
*/
|
||||
|
||||
.editor-viewport {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-viewport, #1a1a1a);
|
||||
}
|
||||
|
||||
.editor-viewport-canvas {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.editor-viewport-canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
/* Overlay container */
|
||||
.editor-viewport-overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.editor-viewport-overlay > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Toolbar overlay */
|
||||
.editor-viewport-toolbar {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
padding: 4px;
|
||||
background: var(--bg-toolbar, rgba(30, 30, 30, 0.9));
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
}
|
||||
|
||||
.editor-viewport-toolbar-right {
|
||||
left: auto;
|
||||
right: 8px;
|
||||
}
|
||||
|
||||
/* Stats overlay */
|
||||
.editor-viewport-stats {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
padding: 8px;
|
||||
background: var(--bg-toolbar, rgba(30, 30, 30, 0.9));
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
.editor-viewport-stats-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.editor-viewport-stats-label {
|
||||
color: var(--text-muted, #666);
|
||||
}
|
||||
|
||||
.editor-viewport-stats-value {
|
||||
color: var(--text-primary, #ccc);
|
||||
}
|
||||
|
||||
/* Zoom indicator */
|
||||
.editor-viewport-zoom {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 8px;
|
||||
padding: 4px 8px;
|
||||
background: var(--bg-toolbar, rgba(30, 30, 30, 0.9));
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--border-color, #333);
|
||||
font-size: 11px;
|
||||
color: var(--text-secondary, #888);
|
||||
}
|
||||
|
||||
/* Crosshair cursor mode */
|
||||
.editor-viewport.crosshair .editor-viewport-canvas {
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
/* Pointer cursor mode */
|
||||
.editor-viewport.pointer .editor-viewport-canvas {
|
||||
cursor: default;
|
||||
}
|
||||
1443
packages/editor/editor-app/src/styles/EntityInspector.css
Normal file
1443
packages/editor/editor-app/src/styles/EntityInspector.css
Normal file
File diff suppressed because it is too large
Load Diff
115
packages/editor/editor-app/src/styles/ErrorDialog.css
Normal file
115
packages/editor/editor-app/src/styles/ErrorDialog.css
Normal file
@@ -0,0 +1,115 @@
|
||||
.error-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.error-dialog {
|
||||
background: var(--bg-secondary, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.error-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color, #404040);
|
||||
}
|
||||
|
||||
.error-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ff4444;
|
||||
}
|
||||
|
||||
.error-dialog-header .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary, #999);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.error-dialog-header .close-btn:hover {
|
||||
background: var(--bg-hover, #3a3a3a);
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
|
||||
.error-dialog-content {
|
||||
padding: 20px;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-dialog-content p {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.error-dialog-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border-color, #404040);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.error-dialog-btn {
|
||||
padding: 8px 24px;
|
||||
background: #ff4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.error-dialog-btn:hover {
|
||||
background: #ff6666;
|
||||
}
|
||||
|
||||
.error-dialog-btn:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
371
packages/editor/editor-app/src/styles/ExportRuntimeDialog.css
Normal file
371
packages/editor/editor-app/src/styles/ExportRuntimeDialog.css
Normal file
@@ -0,0 +1,371 @@
|
||||
.export-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.export-dialog {
|
||||
background: #1e1e1e;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
width: 90%;
|
||||
max-width: 700px;
|
||||
max-height: 90vh;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.export-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.export-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.export-dialog-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.export-dialog-close:hover {
|
||||
background: #3a3a3a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.export-dialog-content {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.export-dialog-content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.export-dialog-content::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.export-dialog-content::-webkit-scrollbar-thumb {
|
||||
background: #424242;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.export-dialog-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
.export-dialog-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(66, 153, 225, 0.1);
|
||||
border: 1px solid rgba(66, 153, 225, 0.3);
|
||||
border-radius: 8px;
|
||||
color: #4299e1;
|
||||
font-size: 14px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.export-format-options {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.export-format-option {
|
||||
flex: 1;
|
||||
padding: 20px;
|
||||
border: 2px solid #3a3a3a;
|
||||
border-radius: 12px;
|
||||
background: #252525;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.export-format-option:hover {
|
||||
border-color: #4a4a4a;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.export-format-option.selected {
|
||||
border-color: #4299e1;
|
||||
background: rgba(66, 153, 225, 0.1);
|
||||
}
|
||||
|
||||
.export-format-icon {
|
||||
color: #4299e1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: rgba(66, 153, 225, 0.1);
|
||||
border-radius: 12px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.export-format-option.selected .export-format-icon {
|
||||
background: rgba(66, 153, 225, 0.2);
|
||||
}
|
||||
|
||||
.export-format-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.export-format-info h4 {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.export-format-desc {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.export-format-features {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
justify-content: center;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.feature-tag {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
background: #3a3a3a;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.feature-tag.recommended {
|
||||
background: rgba(72, 187, 120, 0.2);
|
||||
color: #48bb78;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.export-format-option.selected .feature-tag {
|
||||
background: rgba(66, 153, 225, 0.15);
|
||||
color: #4299e1;
|
||||
}
|
||||
|
||||
.export-format-option.selected .feature-tag.recommended {
|
||||
background: rgba(72, 187, 120, 0.2);
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.export-format-extension {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 13px;
|
||||
color: #4299e1;
|
||||
padding: 6px 12px;
|
||||
background: rgba(66, 153, 225, 0.1);
|
||||
border-radius: 6px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.export-dialog-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid #3a3a3a;
|
||||
background: #252525;
|
||||
}
|
||||
|
||||
.export-dialog-btn {
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.export-dialog-btn-cancel {
|
||||
background: transparent;
|
||||
color: #999;
|
||||
border: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.export-dialog-btn-cancel:hover {
|
||||
background: #2a2a2a;
|
||||
border-color: #4a4a4a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.export-dialog-btn-primary {
|
||||
background: #4299e1;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.export-dialog-btn-primary:hover {
|
||||
background: #3182ce;
|
||||
}
|
||||
|
||||
.export-dialog-btn-primary:active {
|
||||
background: #2c5282;
|
||||
}
|
||||
|
||||
.export-mode-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
margin: -24px -24px 20px -24px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
|
||||
.export-mode-tab {
|
||||
padding: 12px 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #999;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.export-mode-tab:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.export-mode-tab.active {
|
||||
color: #4299e1;
|
||||
border-bottom-color: #4299e1;
|
||||
}
|
||||
|
||||
.export-section {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.export-section h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
color: #ccc;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.export-file-list {
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
background: #252525;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.export-file-list::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.export-file-list::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.export-file-list::-webkit-scrollbar-thumb {
|
||||
background: #424242;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.export-file-list::-webkit-scrollbar-thumb:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
.export-file-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.export-file-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.export-file-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.export-file-item.selected {
|
||||
background: rgba(66, 153, 225, 0.1);
|
||||
}
|
||||
|
||||
.export-file-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.export-file-name {
|
||||
flex: 1;
|
||||
font-size: 12px;
|
||||
color: #ccc;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.export-file-format {
|
||||
padding: 4px 8px;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.export-file-format:hover {
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.export-file-format:focus {
|
||||
border-color: #4299e1;
|
||||
}
|
||||
156
packages/editor/editor-app/src/styles/FileTree.css
Normal file
156
packages/editor/editor-app/src/styles/FileTree.css
Normal file
@@ -0,0 +1,156 @@
|
||||
.file-tree-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 8px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3e3e3e;
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.file-tree-toolbar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
color: #cccccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.file-tree-toolbar-btn:hover {
|
||||
background: #2a2d2e;
|
||||
border-color: #3e3e3e;
|
||||
}
|
||||
|
||||
.file-tree-toolbar-btn:active {
|
||||
background: #37373d;
|
||||
}
|
||||
|
||||
.file-tree {
|
||||
height: calc(100% - 32px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
background: #1e1e1e;
|
||||
color: #cccccc;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.file-tree::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.file-tree::-webkit-scrollbar-track {
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.file-tree::-webkit-scrollbar-thumb {
|
||||
background: #424242;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.file-tree::-webkit-scrollbar-thumb:hover {
|
||||
background: #4e4e4e;
|
||||
}
|
||||
|
||||
.file-tree.loading,
|
||||
.file-tree.empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #858585;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
white-space: nowrap;
|
||||
transition: all 0.15s ease;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.tree-node[draggable="true"] {
|
||||
cursor: grab;
|
||||
}
|
||||
|
||||
.tree-node[draggable="true"]:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.tree-node:hover {
|
||||
background: #2a2d2e;
|
||||
}
|
||||
|
||||
.tree-node.selected {
|
||||
background: #37373d;
|
||||
}
|
||||
|
||||
/* 拖拽时的样式 */
|
||||
.tree-node.dragging {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.tree-node[draggable="true"]:hover {
|
||||
background: #2a2d2e;
|
||||
box-shadow: inset 2px 0 0 rgba(74, 222, 128, 0.5);
|
||||
}
|
||||
|
||||
.tree-arrow {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 4px;
|
||||
font-size: var(--font-size-xs);
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.tree-icon {
|
||||
margin-right: 6px;
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
|
||||
/* 系统文件夹特殊标记 */
|
||||
.tree-icon .system-folder-icon {
|
||||
filter: drop-shadow(0 0 2px rgba(66, 165, 245, 0.5));
|
||||
animation: subtle-pulse-tree 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes subtle-pulse-tree {
|
||||
0%, 100% {
|
||||
filter: drop-shadow(0 0 2px rgba(66, 165, 245, 0.5));
|
||||
}
|
||||
50% {
|
||||
filter: drop-shadow(0 0 4px rgba(66, 165, 245, 0.7));
|
||||
}
|
||||
}
|
||||
|
||||
.tree-label {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tree-children {
|
||||
/* Children are indented via inline style */
|
||||
}
|
||||
|
||||
.tree-rename-input {
|
||||
flex: 1;
|
||||
background: #3c3c3c;
|
||||
border: 1px solid #007acc;
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
color: #cccccc;
|
||||
font-size: var(--font-size-base);
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
390
packages/editor/editor-app/src/styles/FlexLayoutDock.css
Normal file
390
packages/editor/editor-app/src/styles/FlexLayoutDock.css
Normal file
@@ -0,0 +1,390 @@
|
||||
/**
|
||||
* FlexLayout Dock Styles
|
||||
* FlexLayout 停靠布局样式
|
||||
*
|
||||
* 结构层次 | Structure hierarchy:
|
||||
* - .flexlayout-dock-container 主容器 | Main container
|
||||
* - .flexlayout__layout 布局根节点 | Layout root
|
||||
* - .flexlayout__tabset 面板组容器 | Panel group container
|
||||
* - .flexlayout__tabset_header / _tabbar_outer 标签栏 | Tab bar
|
||||
* - .flexlayout__tab_button 标签按钮 | Tab button
|
||||
* - .flexlayout__tabset_content 内容区域 | Content area
|
||||
* - .flexlayout__tab_moveable 可移动内容容器 | Moveable content
|
||||
* - .flexlayout__splitter 分割线 | Splitter
|
||||
*/
|
||||
|
||||
/* ==================== CSS Variables | CSS 变量 ==================== */
|
||||
:root {
|
||||
/* 背景色 | Background colors */
|
||||
--flexlayout-bg-base: #1a1a1a;
|
||||
--flexlayout-bg-panel: #242424;
|
||||
--flexlayout-bg-header: #2a2a2a;
|
||||
--flexlayout-bg-hover: rgba(255, 255, 255, 0.08);
|
||||
|
||||
/* 文字色 | Text colors */
|
||||
--flexlayout-text-muted: #888888;
|
||||
--flexlayout-text-normal: #cccccc;
|
||||
--flexlayout-text-active: #ffffff;
|
||||
|
||||
/* 边框色 | Border colors */
|
||||
--flexlayout-border: #1a1a1a;
|
||||
--flexlayout-border-light: #3a3a3a;
|
||||
|
||||
/* 强调色 | Accent color */
|
||||
--flexlayout-accent: #4a9eff;
|
||||
|
||||
/* 尺寸 | Dimensions */
|
||||
--flexlayout-tab-height: 26px;
|
||||
--flexlayout-font-size: 11px;
|
||||
|
||||
/* 滚动条 | Scrollbar */
|
||||
--flexlayout-scrollbar-width: 8px;
|
||||
--flexlayout-scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
||||
--flexlayout-scrollbar-thumb-hover: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
/* ==================== Main Container | 主容器 ==================== */
|
||||
.flexlayout-dock-container {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: var(--flexlayout-bg-base);
|
||||
}
|
||||
|
||||
.flexlayout__layout {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--flexlayout-bg-base);
|
||||
}
|
||||
|
||||
/* ==================== Tabset (Panel Group) | 面板组 ==================== */
|
||||
.flexlayout__tabset,
|
||||
.flexlayout__tabset-selected {
|
||||
background: var(--flexlayout-bg-panel);
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_header,
|
||||
.flexlayout__tabset_tabbar_outer {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
height: var(--flexlayout-tab-height);
|
||||
min-height: var(--flexlayout-tab-height);
|
||||
background: var(--flexlayout-bg-header);
|
||||
border-bottom: 1px solid var(--flexlayout-border);
|
||||
}
|
||||
|
||||
/* ==================== Tab Buttons | 标签按钮 ==================== */
|
||||
.flexlayout__tab,
|
||||
.flexlayout__tab_button {
|
||||
background: transparent;
|
||||
color: var(--flexlayout-text-muted);
|
||||
border: none;
|
||||
padding: 0 12px;
|
||||
height: var(--flexlayout-tab-height);
|
||||
line-height: var(--flexlayout-tab-height);
|
||||
font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
|
||||
font-size: var(--flexlayout-font-size);
|
||||
cursor: pointer;
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab::after,
|
||||
.flexlayout__tab_button::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flexlayout__tab:hover,
|
||||
.flexlayout__tab_button:hover {
|
||||
color: var(--flexlayout-text-normal);
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button--selected {
|
||||
color: var(--flexlayout-text-active);
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_leading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_content {
|
||||
max-width: 140px;
|
||||
font-size: var(--flexlayout-font-size);
|
||||
font-weight: 400;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Tab close button | 标签关闭按钮 */
|
||||
.flexlayout__tab_button_trailing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-left: 6px;
|
||||
padding: 2px;
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button:hover .flexlayout__tab_button_trailing {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing:hover {
|
||||
opacity: 1;
|
||||
background: var(--flexlayout-bg-hover);
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing svg {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.flexlayout__tab_button_trailing:hover svg {
|
||||
color: var(--flexlayout-text-active);
|
||||
}
|
||||
|
||||
/* ==================== Panel Content | 面板内容 ==================== */
|
||||
/*
|
||||
* 重要：面板内容容器不设置滚动，由各面板自己管理滚动
|
||||
* Important: Content containers don't scroll, each panel manages its own scroll
|
||||
*/
|
||||
.flexlayout__tabset_content {
|
||||
background: var(--flexlayout-bg-panel);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flexlayout__tab_moveable {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* 默认光标 | Default cursor */
|
||||
.flexlayout__tabset_content * {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* 可交互元素恢复指针光标 | Restore pointer cursor for interactive elements */
|
||||
.flexlayout__tabset_content button,
|
||||
.flexlayout__tabset_content a,
|
||||
.flexlayout__tabset_content [role="button"],
|
||||
.flexlayout__tabset_content input,
|
||||
.flexlayout__tabset_content select,
|
||||
.flexlayout__tabset_content textarea {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==================== Splitter | 分割线 ==================== */
|
||||
.flexlayout__splitter,
|
||||
.flexlayout__splitter_border {
|
||||
background: var(--flexlayout-border);
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.flexlayout__splitter:hover {
|
||||
background: var(--flexlayout-accent);
|
||||
}
|
||||
|
||||
.flexlayout__splitter_horz {
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.flexlayout__splitter_vert {
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
/* ==================== Tab Toolbar | 标签工具栏 ==================== */
|
||||
.flexlayout__tab_toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 0 4px;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
padding: 3px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #666666;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button:hover {
|
||||
background: var(--flexlayout-bg-hover);
|
||||
color: var(--flexlayout-text-normal);
|
||||
}
|
||||
|
||||
.flexlayout__tab_toolbar_button svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
/* Maximize button active state | 最大化按钮激活状态 */
|
||||
.flexlayout__tabset_maximized .flexlayout__tab_toolbar_button-max {
|
||||
color: var(--flexlayout-accent);
|
||||
}
|
||||
|
||||
.flexlayout__tabset_maximized .flexlayout__tab_toolbar_button-max:hover {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
color: var(--flexlayout-text-active);
|
||||
}
|
||||
|
||||
.flexlayout__tabset_maximized .flexlayout__tabset_header,
|
||||
.flexlayout__tabset_maximized .flexlayout__tabset_tabbar_outer {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
/* ==================== Drag & Drop | 拖放 ==================== */
|
||||
.flexlayout__outline_rect {
|
||||
border: 1px solid var(--flexlayout-accent);
|
||||
border-radius: 2px;
|
||||
background: rgba(74, 158, 255, 0.08);
|
||||
box-shadow: 0 0 12px rgba(74, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.flexlayout__edge_rect {
|
||||
border: 1px solid var(--flexlayout-accent);
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
}
|
||||
|
||||
.flexlayout__drag_rect {
|
||||
border: 1px solid var(--flexlayout-accent);
|
||||
border-radius: 2px;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
/* ==================== Popup Menu | 弹出菜单 ==================== */
|
||||
.flexlayout__popup_menu {
|
||||
padding: 4px 0;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid var(--flexlayout-border-light);
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item {
|
||||
padding: 6px 12px;
|
||||
color: var(--flexlayout-text-normal);
|
||||
font-size: var(--flexlayout-font-size);
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item:hover {
|
||||
background: var(--flexlayout-border-light);
|
||||
color: var(--flexlayout-text-active);
|
||||
}
|
||||
|
||||
.flexlayout__popup_menu_item:active {
|
||||
background: var(--flexlayout-accent);
|
||||
}
|
||||
|
||||
/* ==================== Border Panels | 边框面板 ==================== */
|
||||
.flexlayout__border {
|
||||
background: var(--flexlayout-bg-panel);
|
||||
border: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_top,
|
||||
.flexlayout__border_bottom {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_left,
|
||||
.flexlayout__border_right {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_button {
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--flexlayout-text-muted);
|
||||
font-size: var(--flexlayout-font-size);
|
||||
cursor: pointer;
|
||||
transition: color 0.1s ease;
|
||||
}
|
||||
|
||||
.flexlayout__border_button::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flexlayout__border_button:hover {
|
||||
background: transparent;
|
||||
color: var(--flexlayout-text-normal);
|
||||
}
|
||||
|
||||
.flexlayout__border_button--selected {
|
||||
background: transparent;
|
||||
color: var(--flexlayout-text-active);
|
||||
}
|
||||
|
||||
/* ==================== Error Boundary | 错误边界 ==================== */
|
||||
.flexlayout__error_boundary_container {
|
||||
padding: 16px;
|
||||
background: var(--flexlayout-bg-panel);
|
||||
color: #f48771;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.flexlayout__error_boundary_message {
|
||||
margin-bottom: 8px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ==================== Scrollbar | 滚动条 ==================== */
|
||||
.flexlayout__tabset_content::-webkit-scrollbar,
|
||||
.flexlayout__tab_moveable::-webkit-scrollbar {
|
||||
width: var(--flexlayout-scrollbar-width);
|
||||
height: var(--flexlayout-scrollbar-width);
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content::-webkit-scrollbar-track,
|
||||
.flexlayout__tab_moveable::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content::-webkit-scrollbar-thumb,
|
||||
.flexlayout__tab_moveable::-webkit-scrollbar-thumb {
|
||||
background: var(--flexlayout-scrollbar-thumb);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content::-webkit-scrollbar-thumb:hover,
|
||||
.flexlayout__tab_moveable::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--flexlayout-scrollbar-thumb-hover);
|
||||
}
|
||||
|
||||
.flexlayout__tabset_content::-webkit-scrollbar-corner,
|
||||
.flexlayout__tab_moveable::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ==================== Persistent Panels | 持久化面板 ==================== */
|
||||
.persistent-panel-placeholder {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.persistent-panel-container {
|
||||
background: var(--flexlayout-bg-panel);
|
||||
}
|
||||
265
packages/editor/editor-app/src/styles/GitHubAuth.css
Normal file
265
packages/editor/editor-app/src/styles/GitHubAuth.css
Normal file
@@ -0,0 +1,265 @@
|
||||
.github-auth {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.github-auth > p {
|
||||
margin: 0;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-tabs {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.auth-tab {
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 4px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.auth-tab:hover {
|
||||
background: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.auth-tab.active {
|
||||
background: #0366d6;
|
||||
border-color: #0366d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.oauth-auth,
|
||||
.token-auth {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.oauth-instructions {
|
||||
background: #2a2a2a;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
border-left: 3px solid #0366d6;
|
||||
}
|
||||
|
||||
.oauth-instructions p {
|
||||
margin: 8px 0;
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.oauth-instructions p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.oauth-instructions p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.oauth-pending,
|
||||
.oauth-success,
|
||||
.oauth-error {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.oauth-pending h4,
|
||||
.oauth-success h4,
|
||||
.oauth-error h4 {
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.user-code-display {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.user-code-display label {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.code-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: #2a2a2a;
|
||||
padding: 12px 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.code-text {
|
||||
flex: 1;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #0366d6;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.btn-copy {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 4px 8px;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.btn-copy:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.btn-copy:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
color: #ccc;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #3a3a3a;
|
||||
border-radius: 4px;
|
||||
padding: 10px 12px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #0366d6;
|
||||
}
|
||||
|
||||
.form-group small {
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.btn-primary,
|
||||
.btn-secondary,
|
||||
.btn-link {
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #0366d6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #0256c7;
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #2a2a2a;
|
||||
color: #fff;
|
||||
border: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.btn-link {
|
||||
background: none;
|
||||
color: #0366d6;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.btn-link:hover {
|
||||
color: #0256c7;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
border: 1px solid rgba(255, 59, 48, 0.3);
|
||||
border-radius: 4px;
|
||||
padding: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #ff3b30;
|
||||
font-size: 14px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.error-details {
|
||||
background: #2a2a2a;
|
||||
padding: 12px;
|
||||
border-radius: 4px;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.error-details pre {
|
||||
margin: 0;
|
||||
color: #ff3b30;
|
||||
font-size: 12px;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.spinning {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
70
packages/editor/editor-app/src/styles/GitHubLoginDialog.css
Normal file
70
packages/editor/editor-app/src/styles/GitHubLoginDialog.css
Normal file
@@ -0,0 +1,70 @@
|
||||
.github-login-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
.github-login-dialog {
|
||||
background: #1e1e1e;
|
||||
border-radius: 8px;
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.github-login-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid #333;
|
||||
}
|
||||
|
||||
.github-login-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.github-login-close {
|
||||
background: none;
|
||||
border: none;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: color 0.2s;
|
||||
}
|
||||
|
||||
.github-login-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.github-login-content {
|
||||
padding: 24px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
177
packages/editor/editor-app/src/styles/JsonViewer.css
Normal file
177
packages/editor/editor-app/src/styles/JsonViewer.css
Normal file
@@ -0,0 +1,177 @@
|
||||
.json-viewer-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.json-viewer-modal {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-md);
|
||||
box-shadow: var(--shadow-xl);
|
||||
width: 90%;
|
||||
max-width: 1200px;
|
||||
height: 85vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.json-viewer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.json-viewer-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.json-viewer-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.json-viewer-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.json-viewer-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.json-viewer-content {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
padding: 16px;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 12px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.json-tree-node {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.json-tree-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
cursor: pointer;
|
||||
transition: background var(--transition-fast);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.json-tree-header:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.json-tree-expander {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: var(--color-text-tertiary);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.json-tree-key {
|
||||
color: #9cdcfe;
|
||||
font-weight: 500;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.json-tree-preview {
|
||||
color: var(--color-text-tertiary);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.json-tree-children {
|
||||
margin-left: 20px;
|
||||
padding-left: 12px;
|
||||
border-left: 1px solid var(--color-border-subtle);
|
||||
}
|
||||
|
||||
.json-tree-leaf {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.json-tree-leaf:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.json-tree-value {
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.json-string {
|
||||
color: #ce9178;
|
||||
}
|
||||
|
||||
.json-number {
|
||||
color: #b5cea8;
|
||||
}
|
||||
|
||||
.json-boolean {
|
||||
color: #569cd6;
|
||||
}
|
||||
|
||||
.json-null {
|
||||
color: #569cd6;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.json-array {
|
||||
color: #4ec9b0;
|
||||
}
|
||||
|
||||
.json-object {
|
||||
color: #4ec9b0;
|
||||
}
|
||||
|
||||
.json-viewer-content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.json-viewer-content::-webkit-scrollbar-track {
|
||||
background: var(--color-bg-base);
|
||||
}
|
||||
|
||||
.json-viewer-content::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border-default);
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.json-viewer-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
260
packages/editor/editor-app/src/styles/MainToolbar.css
Normal file
260
packages/editor/editor-app/src/styles/MainToolbar.css
Normal file
@@ -0,0 +1,260 @@
|
||||
/* ==================== Main Toolbar Container ==================== */
|
||||
.main-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 36px;
|
||||
background: linear-gradient(180deg, #3a3a3f 0%, #2d2d32 100%);
|
||||
border-bottom: 1px solid #1a1a1d;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
z-index: var(--z-index-header);
|
||||
}
|
||||
|
||||
/* ==================== Toolbar Groups ==================== */
|
||||
.toolbar-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.toolbar-center {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
/* Absolutely centered play controls */
|
||||
.toolbar-center-wrapper {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toolbar-center-wrapper > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Right section for preview indicator */
|
||||
.toolbar-right {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 100px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* ==================== Toolbar Separator ==================== */
|
||||
.toolbar-separator {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 4px;
|
||||
}
|
||||
|
||||
/* ==================== Tool Buttons ==================== */
|
||||
.toolbar-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #888888;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.toolbar-button:hover:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.toolbar-button:active:not(.disabled) {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.toolbar-button.active {
|
||||
background: rgba(74, 158, 255, 0.2);
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.toolbar-button.active:hover {
|
||||
background: rgba(74, 158, 255, 0.3);
|
||||
}
|
||||
|
||||
.toolbar-button.disabled {
|
||||
color: #444444;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.toolbar-button svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Play button special styling */
|
||||
.toolbar-center .toolbar-button {
|
||||
width: 32px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.toolbar-center .toolbar-button:first-child {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.toolbar-center .toolbar-button:first-child:hover:not(.disabled) {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.toolbar-center .toolbar-button:nth-child(2) {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.toolbar-center .toolbar-button:nth-child(2):hover:not(.disabled) {
|
||||
background: rgba(248, 113, 113, 0.15);
|
||||
}
|
||||
|
||||
.toolbar-center .toolbar-button:nth-child(2).disabled {
|
||||
color: #444444;
|
||||
}
|
||||
|
||||
/* ==================== Preview Mode Indicator ==================== */
|
||||
.preview-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
border: 1px solid rgba(74, 222, 128, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #4ade80;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
animation: pulse-glow 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-glow {
|
||||
0%, 100% {
|
||||
box-shadow: 0 0 4px rgba(74, 222, 128, 0.2);
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 0 8px rgba(74, 222, 128, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-indicator svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ==================== Dropdown Menus (for future use) ==================== */
|
||||
.toolbar-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #888888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-button:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #c0c0c0;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-item:hover {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ==================== Toolbar Dropdown ==================== */
|
||||
.toolbar-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-trigger {
|
||||
display: flex !important;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
width: auto !important;
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 4px;
|
||||
min-width: 160px;
|
||||
background: #252528;
|
||||
border: 1px solid #3a3a3d;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
padding: 4px 0;
|
||||
z-index: var(--z-index-popover);
|
||||
animation: dropdown-fade-in 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes dropdown-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-dropdown-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #c0c0c0;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-menu button:hover {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.toolbar-dropdown-menu button svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
97
packages/editor/editor-app/src/styles/MenuBar.css
Normal file
97
packages/editor/editor-app/src/styles/MenuBar.css
Normal file
@@ -0,0 +1,97 @@
|
||||
.menu-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 100%;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.menu-button {
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #999;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.menu-button:hover {
|
||||
background-color: rgba(255, 255, 255, 0.06);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.menu-button.active {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 180px;
|
||||
background: #252529;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
padding: 4px 0;
|
||||
z-index: var(--z-index-dropdown);
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.menu-dropdown-item {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 5px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
transition: background-color 0.1s;
|
||||
}
|
||||
|
||||
.menu-dropdown-item:hover:not(.disabled) {
|
||||
background-color: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.menu-dropdown-item.disabled {
|
||||
color: #555;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.menu-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.menu-item-content svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.menu-shortcut {
|
||||
margin-left: 16px;
|
||||
color: #666;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.menu-separator {
|
||||
height: 1px;
|
||||
background-color: rgba(255, 255, 255, 0.08);
|
||||
margin: 4px 8px;
|
||||
}
|
||||
534
packages/editor/editor-app/src/styles/OutputLogPanel.css
Normal file
534
packages/editor/editor-app/src/styles/OutputLogPanel.css
Normal file
@@ -0,0 +1,534 @@
|
||||
.output-log-panel {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background: #1a1a1a;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ==================== Toolbar ==================== */
|
||||
.output-log-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 36px;
|
||||
padding: 0 8px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.output-log-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.output-log-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* Search Box */
|
||||
.output-log-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
max-width: 300px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
background: #3c3c3c;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.output-log-search:focus-within {
|
||||
border-color: #3b82f6;
|
||||
background: #2d2d2d;
|
||||
}
|
||||
|
||||
.output-log-search input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.output-log-search input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.output-log-search-clear {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
padding: 0;
|
||||
background: #555;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.output-log-search-clear:hover {
|
||||
background: #666;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Toolbar Buttons */
|
||||
.output-log-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
background: transparent;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.output-log-btn:hover {
|
||||
background: #3c3c3c;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.output-log-btn.active {
|
||||
background: #3c3c3c;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.output-log-btn.has-filter {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.filter-badge {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
padding: 0 4px;
|
||||
background: #3b82f6;
|
||||
border-radius: 8px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.output-log-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.output-log-icon-btn:hover {
|
||||
background: #3c3c3c;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.output-log-icon-btn.active {
|
||||
background: #3c3c3c;
|
||||
border-color: #3b82f6;
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.output-log-close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 26px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.output-log-close-btn:hover {
|
||||
background: #3c3c3c;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* ==================== Dropdown Menu ==================== */
|
||||
.output-log-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.output-log-menu {
|
||||
position: absolute;
|
||||
top: calc(100% + 4px);
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
padding: 6px 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.output-log-menu.settings-menu {
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.output-log-menu-header {
|
||||
padding: 6px 12px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.output-log-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.output-log-menu-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.output-log-menu-item input[type="checkbox"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0;
|
||||
accent-color: #3b82f6;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.output-log-menu-item span {
|
||||
flex: 1;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.output-log-menu-item .level-count {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
}
|
||||
|
||||
.level-icon {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.level-icon.debug {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.level-icon.info {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.level-icon.warn {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.level-icon.error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.level-icon.remote {
|
||||
color: #10b981;
|
||||
}
|
||||
|
||||
.output-log-menu-divider {
|
||||
height: 1px;
|
||||
background: #4a4a4a;
|
||||
margin: 6px 0;
|
||||
}
|
||||
|
||||
.output-log-menu-action {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.output-log-menu-action:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.output-log-menu-action svg {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ==================== Log Content ==================== */
|
||||
.output-log-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.output-log-content::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.output-log-content::-webkit-scrollbar-track {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.output-log-content::-webkit-scrollbar-thumb {
|
||||
background: #4a4a4a;
|
||||
border-radius: 5px;
|
||||
border: 2px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.output-log-content::-webkit-scrollbar-thumb:hover {
|
||||
background: #5a5a5a;
|
||||
}
|
||||
|
||||
/* Empty State */
|
||||
.output-log-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.output-log-empty p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ==================== Log Entry ==================== */
|
||||
.output-log-entry {
|
||||
border-bottom: 1px solid #2a2a2a;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.output-log-entry:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
.output-log-entry.expanded {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.output-log-entry-main {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
line-height: 1.4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.output-log-entry-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.output-log-entry-time {
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
padding-top: 2px;
|
||||
flex-shrink: 0;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.output-log-entry-source {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
padding-top: 2px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.output-log-entry-source.source-remote {
|
||||
color: #4a9eff;
|
||||
opacity: 1;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.output-log-entry-message {
|
||||
flex: 1;
|
||||
color: #e0e0e0;
|
||||
word-break: break-word;
|
||||
padding-top: 2px;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.output-log-entry-copy {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.15s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.output-log-entry:hover .output-log-entry-copy {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.output-log-entry-copy:hover {
|
||||
background: #3c3c3c;
|
||||
border-color: #5a5a5a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
/* Stack Trace (expanded) */
|
||||
.output-log-entry-stack {
|
||||
padding: 8px 12px 12px 42px;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-top: 1px solid #2a2a2a;
|
||||
}
|
||||
|
||||
.output-log-stack-header {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
margin-bottom: 6px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.output-log-stack-line {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
line-height: 1.6;
|
||||
white-space: pre;
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.output-log-stack-line:hover {
|
||||
color: #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Log Level Styles */
|
||||
.output-log-entry-debug {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.output-log-entry-debug .output-log-entry-icon {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.output-log-entry-debug .output-log-entry-message {
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.output-log-entry-info .output-log-entry-icon {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.output-log-entry-info .output-log-entry-message {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.output-log-entry-warn {
|
||||
background: rgba(255, 193, 7, 0.05);
|
||||
}
|
||||
|
||||
.output-log-entry-warn .output-log-entry-icon {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.output-log-entry-warn .output-log-entry-message {
|
||||
color: #ffc107;
|
||||
}
|
||||
|
||||
.output-log-entry-error {
|
||||
background: rgba(244, 67, 54, 0.08);
|
||||
}
|
||||
|
||||
.output-log-entry-error .output-log-entry-icon {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.output-log-entry-error .output-log-entry-message {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
.log-entry-remote {
|
||||
border-left: 2px solid #4a9eff;
|
||||
background: rgba(74, 158, 255, 0.03);
|
||||
}
|
||||
|
||||
/* ==================== Status Bar ==================== */
|
||||
.output-log-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
padding: 0 12px;
|
||||
background: #252526;
|
||||
border-top: 1px solid #3c3c3c;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.output-log-scroll-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.output-log-scroll-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
208
packages/editor/editor-app/src/styles/PluginGeneratorWindow.css
Normal file
208
packages/editor/editor-app/src/styles/PluginGeneratorWindow.css
Normal file
@@ -0,0 +1,208 @@
|
||||
.plugin-generator-window {
|
||||
background: var(--color-bg-elevated);
|
||||
border-radius: 8px;
|
||||
padding: 0;
|
||||
width: 600px;
|
||||
max-width: 90vw;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.plugin-generator-window .modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 24px;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.plugin-generator-window .modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.plugin-generator-window .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.plugin-generator-window .close-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.plugin-generator-window .modal-body {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.plugin-generator-window .form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plugin-generator-window .form-group label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.plugin-generator-window .form-group input[type="text"] {
|
||||
padding: 10px 12px;
|
||||
background: var(--color-bg-base);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 6px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
font-family: var(--font-family-mono);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.plugin-generator-window .form-group input[type="text"]:focus {
|
||||
outline: none;
|
||||
border-color: var(--color-primary);
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.plugin-generator-window .form-group input[type="text"]:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.plugin-generator-window .path-input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plugin-generator-window .path-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.plugin-generator-window .select-path-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 16px;
|
||||
background: var(--color-bg-overlay);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: 6px;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plugin-generator-window .select-path-btn:hover:not(:disabled) {
|
||||
background: var(--color-bg-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.plugin-generator-window .select-path-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.plugin-generator-window .checkbox-group {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.plugin-generator-window .checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.plugin-generator-window .checkbox-group input[type="checkbox"] {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.plugin-generator-window .checkbox-group input[type="checkbox"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.plugin-generator-window .checkbox-group span {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.plugin-generator-window .error-message {
|
||||
padding: 12px;
|
||||
background: rgba(206, 145, 120, 0.1);
|
||||
border: 1px solid rgba(206, 145, 120, 0.3);
|
||||
border-radius: 6px;
|
||||
color: #CE9178;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.plugin-generator-window .modal-footer {
|
||||
padding: 16px 24px;
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn {
|
||||
padding: 10px 24px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn-primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn-primary:hover:not(:disabled) {
|
||||
background: var(--color-primary-hover);
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn-secondary {
|
||||
background: var(--color-bg-overlay);
|
||||
color: var(--color-text-primary);
|
||||
border: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.plugin-generator-window .btn-secondary:hover:not(:disabled) {
|
||||
background: var(--color-bg-hover);
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
169
packages/editor/editor-app/src/styles/PluginListSetting.css
Normal file
169
packages/editor/editor-app/src/styles/PluginListSetting.css
Normal file
@@ -0,0 +1,169 @@
|
||||
.plugin-list-setting {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.plugin-list-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 12px;
|
||||
background: var(--color-warning-bg, #3d3520);
|
||||
border-radius: 4px;
|
||||
color: var(--color-warning, #ffb74d);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.plugin-category {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.plugin-category-header {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary, #999);
|
||||
padding: 4px 0;
|
||||
border-bottom: 1px solid var(--color-border, #333);
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.plugin-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.plugin-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
padding: 8px 4px;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--color-border, #2a2a2a);
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.plugin-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.plugin-item:hover {
|
||||
background: var(--color-bg-hover, rgba(255, 255, 255, 0.03));
|
||||
}
|
||||
|
||||
.plugin-item.core {
|
||||
cursor: default;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.plugin-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1.5px solid var(--color-border, #555);
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
margin-top: 2px;
|
||||
transition: all 0.1s ease;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.plugin-item:hover .plugin-checkbox {
|
||||
border-color: var(--color-text-tertiary, #777);
|
||||
}
|
||||
|
||||
.plugin-item.enabled .plugin-checkbox {
|
||||
background: var(--color-primary, #4a9eff);
|
||||
border-color: var(--color-primary, #4a9eff);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plugin-item.core .plugin-checkbox {
|
||||
background: var(--color-text-tertiary, #555);
|
||||
border-color: var(--color-text-tertiary, #555);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.plugin-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.plugin-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.plugin-name {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--color-text, #e0e0e0);
|
||||
}
|
||||
|
||||
.plugin-version {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary, #666);
|
||||
}
|
||||
|
||||
.plugin-description {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary, #888);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.plugin-modules {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.plugin-module-badge {
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 3px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.plugin-module-badge.runtime {
|
||||
background: rgba(76, 175, 80, 0.12);
|
||||
color: #81c784;
|
||||
}
|
||||
|
||||
.plugin-module-badge.editor {
|
||||
background: rgba(33, 150, 243, 0.12);
|
||||
color: #64b5f6;
|
||||
}
|
||||
|
||||
.plugin-module-badge.core {
|
||||
background: rgba(255, 193, 7, 0.12);
|
||||
color: #ffd54f;
|
||||
}
|
||||
|
||||
.plugin-module-badge.engine {
|
||||
background: rgba(156, 39, 176, 0.12);
|
||||
color: #ce93d8;
|
||||
}
|
||||
|
||||
.plugin-list-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 48px 20px;
|
||||
color: var(--color-text-secondary, #666);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.plugin-list-empty p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
251
packages/editor/editor-app/src/styles/PortManager.css
Normal file
251
packages/editor/editor-app/src/styles/PortManager.css
Normal file
@@ -0,0 +1,251 @@
|
||||
.port-manager-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
.port-manager {
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.port-manager-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
background: var(--color-bg-overlay);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.port-manager-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.port-manager-title h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.port-manager-close {
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.port-manager-close:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.port-manager-content {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.port-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.port-section h3 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-md);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.port-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
padding: 16px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.port-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.port-label {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.port-status {
|
||||
padding: 4px 12px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: var(--font-weight-semibold);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.port-status.running {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.port-status.stopped {
|
||||
background: rgba(107, 114, 128, 0.2);
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.port-value {
|
||||
font-family: var(--font-family-mono);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.port-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-medium);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.action-btn.primary {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.primary:hover:not(:disabled) {
|
||||
background: var(--color-primary-dark);
|
||||
}
|
||||
|
||||
.action-btn.danger {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.action-btn.danger:hover:not(:disabled) {
|
||||
background: var(--color-danger-dark);
|
||||
}
|
||||
|
||||
.action-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.port-hint {
|
||||
padding: 16px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: var(--radius-md);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.port-hint p {
|
||||
margin: 0;
|
||||
color: var(--color-text-secondary);
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
.port-hint p:first-child {
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.hint-text {
|
||||
font-size: 12px !important;
|
||||
color: var(--color-text-tertiary) !important;
|
||||
}
|
||||
|
||||
.port-tips {
|
||||
padding: 16px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.port-tips h4 {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: var(--font-size-sm);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.port-tips ul {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.port-tips li {
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.port-manager-overlay,
|
||||
.port-manager,
|
||||
.action-btn,
|
||||
.port-manager-close {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
145
packages/editor/editor-app/src/styles/PrefabInstanceInfo.css
Normal file
145
packages/editor/editor-app/src/styles/PrefabInstanceInfo.css
Normal file
@@ -0,0 +1,145 @@
|
||||
/**
|
||||
* 预制体实例信息样式
|
||||
* Prefab instance info styles
|
||||
*/
|
||||
|
||||
.prefab-instance-info {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.08) 0%, rgba(59, 130, 246, 0.04) 100%);
|
||||
border: 1px solid rgba(59, 130, 246, 0.2);
|
||||
border-radius: 6px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.prefab-instance-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.prefab-icon {
|
||||
font-size: 14px;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.prefab-instance-info .prefab-label {
|
||||
color: var(--text-secondary, #6b7280);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prefab-instance-info .prefab-name {
|
||||
color: var(--text-primary, #1f2937);
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.prefab-modified-badge {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
min-width: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.prefab-instance-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.prefab-action-btn {
|
||||
padding: 4px 10px;
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
border: 1px solid var(--border-color, #e5e7eb);
|
||||
border-radius: 4px;
|
||||
background: var(--bg-secondary, #f9fafb);
|
||||
color: var(--text-primary, #374151);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.prefab-action-btn:hover:not(:disabled) {
|
||||
background: var(--bg-hover, #f3f4f6);
|
||||
border-color: var(--border-hover, #d1d5db);
|
||||
}
|
||||
|
||||
.prefab-action-btn:active:not(:disabled) {
|
||||
background: var(--bg-active, #e5e7eb);
|
||||
}
|
||||
|
||||
.prefab-action-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Apply button - highlighted when there are modifications */
|
||||
.prefab-action-apply:not(:disabled) {
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
border-color: #2563eb;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.prefab-action-apply:not(:disabled):hover {
|
||||
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
||||
border-color: #1d4ed8;
|
||||
}
|
||||
|
||||
/* Revert button - subtle warning style when modifications exist */
|
||||
.prefab-action-revert:not(:disabled) {
|
||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
||||
border-color: #d97706;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.prefab-action-revert:not(:disabled):hover {
|
||||
background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
|
||||
border-color: #b45309;
|
||||
}
|
||||
|
||||
/* Unpack button - danger style */
|
||||
.prefab-action-unpack {
|
||||
min-width: 28px;
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
.prefab-action-unpack:hover:not(:disabled) {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
border-color: #ef4444;
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Dark theme support */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.prefab-instance-info {
|
||||
background: linear-gradient(135deg, rgba(59, 130, 246, 0.12) 0%, rgba(59, 130, 246, 0.06) 100%);
|
||||
border-color: rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.prefab-instance-info .prefab-label {
|
||||
color: var(--text-secondary-dark, #9ca3af);
|
||||
}
|
||||
|
||||
.prefab-instance-info .prefab-name {
|
||||
color: var(--text-primary-dark, #f3f4f6);
|
||||
}
|
||||
|
||||
.prefab-action-btn {
|
||||
background: var(--bg-secondary-dark, #374151);
|
||||
border-color: var(--border-color-dark, #4b5563);
|
||||
color: var(--text-primary-dark, #e5e7eb);
|
||||
}
|
||||
|
||||
.prefab-action-btn:hover:not(:disabled) {
|
||||
background: var(--bg-hover-dark, #4b5563);
|
||||
border-color: var(--border-hover-dark, #6b7280);
|
||||
}
|
||||
}
|
||||
903
packages/editor/editor-app/src/styles/ProfilerWindow.css
Normal file
903
packages/editor/editor-app/src/styles/ProfilerWindow.css
Normal file
@@ -0,0 +1,903 @@
|
||||
.profiler-window-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.15s ease-out;
|
||||
}
|
||||
|
||||
.profiler-window {
|
||||
width: 90%;
|
||||
max-width: 900px;
|
||||
height: 80vh;
|
||||
max-height: 700px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-xl);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: slideUp 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.profiler-window-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
background: var(--color-bg-overlay);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-window-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.profiler-window-title h2 {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
}
|
||||
|
||||
.paused-indicator {
|
||||
padding: 4px 10px;
|
||||
background: var(--color-warning);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.5px;
|
||||
border-radius: var(--radius-sm);
|
||||
animation: pulse 2s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.profiler-window-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.profiler-window-btn {
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profiler-window-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.profiler-window-close {
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.profiler-window-close:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
/* Fullscreen styles */
|
||||
.profiler-window-overlay.fullscreen {
|
||||
background: rgba(0, 0, 0, 0.95);
|
||||
}
|
||||
|
||||
.profiler-window.fullscreen {
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
max-height: none;
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.profiler-window.fullscreen .profiler-window-header {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.profiler-window-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
background: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
flex-shrink: 0;
|
||||
gap: 12px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
.profiler-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.profiler-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-mode-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: var(--color-bg-inset);
|
||||
padding: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-window .profiler-mode-switch .mode-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
white-space: nowrap;
|
||||
width: auto;
|
||||
min-width: auto;
|
||||
height: auto;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.profiler-window .profiler-mode-switch .mode-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.profiler-window .profiler-mode-switch .mode-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.profiler-connection {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.connection-port {
|
||||
width: 80px;
|
||||
padding: 6px 10px;
|
||||
background: var(--color-bg-inset);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 12px;
|
||||
font-family: var(--font-family-mono);
|
||||
outline: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.connection-port:hover:not(:disabled) {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.connection-port:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.connection-port:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.connection-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.connection-btn.connect {
|
||||
background: var(--color-success);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connection-btn.connect:hover {
|
||||
background: var(--color-success-dark);
|
||||
}
|
||||
|
||||
.connection-btn.disconnect {
|
||||
background: var(--color-danger);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.connection-btn.disconnect:hover {
|
||||
background: var(--color-danger-dark);
|
||||
}
|
||||
|
||||
.connection-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.connection-btn.connect:disabled:hover {
|
||||
background: var(--color-success);
|
||||
}
|
||||
|
||||
.connection-status {
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.connection-status.connected {
|
||||
background: rgba(34, 197, 94, 0.2);
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.connection-status.error {
|
||||
background: rgba(239, 68, 68, 0.2);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.profiler-stats-summary {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 12px;
|
||||
border-left: 1px solid var(--color-border-default);
|
||||
}
|
||||
|
||||
.summary-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.summary-item svg {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.summary-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.summary-value {
|
||||
font-family: var(--font-family-mono);
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.summary-value.over-budget {
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.summary-value.low-fps {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.profiler-sort {
|
||||
padding: 4px 8px;
|
||||
background: var(--color-bg-inset);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-primary);
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.profiler-sort:hover {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.profiler-sort:focus {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.profiler-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.profiler-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.profiler-btn.paused {
|
||||
background: var(--color-warning);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.profiler-btn.paused:hover {
|
||||
background: var(--color-warning-dark);
|
||||
}
|
||||
|
||||
.profiler-window-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.profiler-window-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.profiler-window-content::-webkit-scrollbar-track {
|
||||
background: var(--color-bg-elevated);
|
||||
}
|
||||
|
||||
.profiler-window-content::-webkit-scrollbar-thumb {
|
||||
background: var(--color-border-default);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.profiler-window-content::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.profiler-empty {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: var(--color-text-tertiary);
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.profiler-empty p {
|
||||
margin: 0;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.profiler-empty-hint {
|
||||
font-size: 11px !important;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Search */
|
||||
.profiler-search {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 12px;
|
||||
background: var(--color-bg-inset);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.profiler-search:focus-within {
|
||||
border-color: var(--color-primary);
|
||||
}
|
||||
|
||||
.profiler-search svg {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.search-input {
|
||||
border: none;
|
||||
background: transparent;
|
||||
outline: none;
|
||||
font-size: 12px;
|
||||
color: var(--color-text-primary);
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
/* View Mode Switch */
|
||||
.view-mode-switch {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
background: var(--color-bg-inset);
|
||||
padding: 2px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.view-mode-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 6px 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.view-mode-btn:hover {
|
||||
background: var(--color-bg-hover);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.view-mode-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
/* Table View */
|
||||
.profiler-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.profiler-table thead {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
background: var(--color-bg-overlay);
|
||||
z-index: var(--z-index-base);
|
||||
}
|
||||
|
||||
.profiler-table th {
|
||||
text-align: left;
|
||||
padding: 12px 16px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-secondary);
|
||||
border-bottom: 2px solid var(--color-border-default);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.profiler-table tbody tr {
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
transition: background var(--transition-fast);
|
||||
}
|
||||
|
||||
.profiler-table tbody tr:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.profiler-table tbody tr.level-0 {
|
||||
background: rgba(99, 102, 241, 0.05);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.profiler-table tbody tr.level-0:hover {
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.profiler-table td {
|
||||
padding: 10px 16px;
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.col-name {
|
||||
width: 40%;
|
||||
}
|
||||
|
||||
.col-time {
|
||||
width: 12%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-percent {
|
||||
width: 8%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.col-entities {
|
||||
width: 10%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.system-name-cell {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.time-value {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.time-value.warning {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.time-value.critical {
|
||||
color: var(--color-danger);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
/* Tree View */
|
||||
.profiler-tree {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tree-row {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 16px;
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.tree-row:hover {
|
||||
background: var(--color-bg-hover);
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
|
||||
.tree-row.level-0 {
|
||||
background: rgba(99, 102, 241, 0.05);
|
||||
border-color: rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.tree-row.level-1 {
|
||||
margin-left: 32px;
|
||||
}
|
||||
|
||||
.tree-row-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.tree-row-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.tree-row-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.percentage-badge {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
padding: 3px 8px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--color-text-secondary);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.tree-row-stats {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.profiler-systems {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.system-row {
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-md);
|
||||
padding: 16px;
|
||||
transition: all var(--transition-fast);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.system-row.level-0 {
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.05) 100%);
|
||||
border: 2px solid rgba(99, 102, 241, 0.3);
|
||||
box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.system-row.level-1 {
|
||||
margin-left: 24px;
|
||||
border-left: 3px solid rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.system-row.level-1::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
top: 50%;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
}
|
||||
|
||||
.system-row:hover {
|
||||
border-color: rgba(99, 102, 241, 0.4);
|
||||
box-shadow: 0 4px 16px rgba(99, 102, 241, 0.2);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.system-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.system-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.expand-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
border-radius: var(--radius-sm);
|
||||
color: rgb(99, 102, 241);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-fast);
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.expand-btn:hover {
|
||||
background: rgba(99, 102, 241, 0.2);
|
||||
border-color: rgba(99, 102, 241, 0.4);
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.system-rank {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 22px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: var(--radius-sm);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-family-mono);
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.system-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-primary);
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.system-row.level-0 .system-name {
|
||||
font-size: 15px;
|
||||
font-weight: 700;
|
||||
color: rgb(99, 102, 241);
|
||||
text-shadow: 0 1px 2px rgba(99, 102, 241, 0.1);
|
||||
}
|
||||
|
||||
.system-entities {
|
||||
font-size: 11px;
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.system-metrics {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.metric-time {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
font-family: var(--font-family-mono);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.system-row.level-0 .metric-time {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: rgb(99, 102, 241);
|
||||
}
|
||||
|
||||
.metric-percentage {
|
||||
font-size: 12px;
|
||||
font-family: var(--font-family-mono);
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-bg-inset);
|
||||
padding: 3px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.system-row.level-0 .metric-percentage {
|
||||
background: rgba(99, 102, 241, 0.15);
|
||||
color: rgb(99, 102, 241);
|
||||
font-size: 13px;
|
||||
padding: 4px 10px;
|
||||
}
|
||||
|
||||
.system-bar {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
background: var(--color-bg-inset);
|
||||
border-radius: 4px;
|
||||
overflow: hidden;
|
||||
margin-bottom: 8px;
|
||||
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.system-row.level-0 .system-bar {
|
||||
height: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.system-bar-fill {
|
||||
height: 100%;
|
||||
transition: width 0.3s ease, background 0.3s ease;
|
||||
border-radius: 4px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.system-bar-fill::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(90deg,
|
||||
rgba(255, 255, 255, 0) 0%,
|
||||
rgba(255, 255, 255, 0.2) 50%,
|
||||
rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.system-stats {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--color-text-tertiary);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-family: var(--font-family-mono);
|
||||
font-weight: 500;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.profiler-window-footer {
|
||||
padding: 12px 20px;
|
||||
background: var(--color-bg-overlay);
|
||||
border-top: 1px solid var(--color-border-default);
|
||||
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.profiler-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 11px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
.legend-color {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.profiler-window-overlay,
|
||||
.profiler-window,
|
||||
.system-row,
|
||||
.system-bar-fill,
|
||||
.profiler-btn,
|
||||
.profiler-window-close {
|
||||
animation: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
333
packages/editor/editor-app/src/styles/ProjectCreationWizard.css
Normal file
333
packages/editor/editor-app/src/styles/ProjectCreationWizard.css
Normal file
@@ -0,0 +1,333 @@
|
||||
.project-wizard-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.project-wizard {
|
||||
width: 1000px;
|
||||
max-width: 90vw;
|
||||
height: 650px;
|
||||
max-height: 85vh;
|
||||
background: #1e1e23;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.wizard-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
background: #252529;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.wizard-header h1 {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.wizard-close-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.wizard-close-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wizard-body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Templates grid */
|
||||
.wizard-templates {
|
||||
flex: 1;
|
||||
padding: 16px;
|
||||
overflow-y: auto;
|
||||
background: #1a1a1f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.templates-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.templates-header h3 {
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.templates-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.template-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 12px;
|
||||
background: #252529;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.template-card:hover {
|
||||
background: #2a2a2f;
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.template-card.selected {
|
||||
border-color: #3b82f6;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.template-preview {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
color: #666;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.template-card.selected .template-preview {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.template-name {
|
||||
font-size: 11px;
|
||||
color: #ccc;
|
||||
text-align: center;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.template-card.selected .template-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Details panel */
|
||||
.wizard-details {
|
||||
width: 280px;
|
||||
background: #252529;
|
||||
border-left: 1px solid rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.details-preview {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.preview-placeholder {
|
||||
width: 100%;
|
||||
height: 140px;
|
||||
background: #1a1a1f;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.details-info {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.details-info h2 {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
margin: 0 0 8px 0;
|
||||
}
|
||||
|
||||
.details-info p {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.details-settings {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.details-settings h3 {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: #666;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.setting-field {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.setting-field label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.setting-field input {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
background: #1a1a1f;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
|
||||
.setting-field input:focus {
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.setting-field input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.path-input-group {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.path-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.browse-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
|
||||
.browse-btn:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.wizard-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
padding: 16px 20px;
|
||||
background: #252529;
|
||||
border-top: 1px solid rgba(255, 255, 255, 0.08);
|
||||
}
|
||||
|
||||
.wizard-btn {
|
||||
padding: 8px 20px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.wizard-btn.secondary {
|
||||
background: transparent;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.wizard-btn.secondary:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.wizard-btn.primary {
|
||||
background: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.wizard-btn.primary:hover {
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
.wizard-btn.primary:disabled {
|
||||
background: #3b3b3f;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* Scrollbar */
|
||||
.wizard-sidebar::-webkit-scrollbar,
|
||||
.wizard-templates::-webkit-scrollbar,
|
||||
.wizard-details::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
.wizard-sidebar::-webkit-scrollbar-track,
|
||||
.wizard-templates::-webkit-scrollbar-track,
|
||||
.wizard-details::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.wizard-sidebar::-webkit-scrollbar-thumb,
|
||||
.wizard-templates::-webkit-scrollbar-thumb,
|
||||
.wizard-details::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.wizard-sidebar::-webkit-scrollbar-thumb:hover,
|
||||
.wizard-templates::-webkit-scrollbar-thumb:hover,
|
||||
.wizard-details::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
153
packages/editor/editor-app/src/styles/PromptDialog.css
Normal file
153
packages/editor/editor-app/src/styles/PromptDialog.css
Normal file
@@ -0,0 +1,153 @@
|
||||
.prompt-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog {
|
||||
background: var(--bg-secondary, #2a2a2a);
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 8px;
|
||||
min-width: 400px;
|
||||
max-width: 600px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
animation: slideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
transform: translateY(-20px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.prompt-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px 20px;
|
||||
border-bottom: 1px solid var(--border-color, #404040);
|
||||
}
|
||||
|
||||
.prompt-dialog-header h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
}
|
||||
|
||||
.prompt-dialog-header .close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-secondary, #999);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prompt-dialog-header .close-btn:hover {
|
||||
background: var(--bg-hover, #3a3a3a);
|
||||
color: var(--text-primary, #fff);
|
||||
}
|
||||
|
||||
.prompt-dialog-content {
|
||||
padding: 20px;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.prompt-dialog-content p {
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
|
||||
.prompt-dialog-input {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 4px;
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
font-size: 14px;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.prompt-dialog-input:focus {
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
.prompt-dialog-input::placeholder {
|
||||
color: var(--text-tertiary, #666);
|
||||
}
|
||||
|
||||
.prompt-dialog-footer {
|
||||
padding: 12px 20px;
|
||||
border-top: 1px solid var(--border-color, #404040);
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.prompt-dialog-btn {
|
||||
padding: 8px 24px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.prompt-dialog-btn.cancel {
|
||||
background: var(--bg-hover, #3a3a3a);
|
||||
color: var(--text-primary, #e0e0e0);
|
||||
}
|
||||
|
||||
.prompt-dialog-btn.cancel:hover {
|
||||
background: var(--bg-active, #4a4a4a);
|
||||
}
|
||||
|
||||
.prompt-dialog-btn.confirm {
|
||||
background: #4a9eff;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.prompt-dialog-btn.confirm:hover {
|
||||
background: #6bb0ff;
|
||||
}
|
||||
|
||||
.prompt-dialog-btn.confirm:disabled {
|
||||
background: #3a3a3a;
|
||||
color: #666;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.prompt-dialog-btn:active:not(:disabled) {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
1359
packages/editor/editor-app/src/styles/PropertyInspector.css
Normal file
1359
packages/editor/editor-app/src/styles/PropertyInspector.css
Normal file
File diff suppressed because it is too large
Load Diff
125
packages/editor/editor-app/src/styles/QRCodeDialog.css
Normal file
125
packages/editor/editor-app/src/styles/QRCodeDialog.css
Normal file
@@ -0,0 +1,125 @@
|
||||
.qrcode-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal);
|
||||
}
|
||||
|
||||
.qrcode-dialog {
|
||||
background: var(--panel-background, #2d2d2d);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
|
||||
width: 320px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.qrcode-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid var(--border-color, #404040);
|
||||
}
|
||||
|
||||
.qrcode-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
}
|
||||
|
||||
.qrcode-dialog-close {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary, #808080);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.qrcode-dialog-close:hover {
|
||||
background: var(--hover-background, #3d3d3d);
|
||||
color: var(--text-color, #e0e0e0);
|
||||
}
|
||||
|
||||
.qrcode-dialog-content {
|
||||
padding: 24px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.qrcode-dialog-content canvas,
|
||||
.qrcode-dialog-content img {
|
||||
background: white;
|
||||
border-radius: 4px;
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.qrcode-loading,
|
||||
.qrcode-error {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--input-background, #1e1e1e);
|
||||
border-radius: 4px;
|
||||
color: var(--text-secondary, #808080);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.qrcode-url-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.qrcode-url-input {
|
||||
flex: 1;
|
||||
padding: 8px 12px;
|
||||
background: var(--input-background, #1e1e1e);
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
font-size: 12px;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.qrcode-url-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent-color, #0078d4);
|
||||
}
|
||||
|
||||
.qrcode-copy-button {
|
||||
padding: 8px;
|
||||
background: var(--button-background, #3d3d3d);
|
||||
border: 1px solid var(--border-color, #404040);
|
||||
border-radius: 4px;
|
||||
color: var(--text-color, #e0e0e0);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrcode-copy-button:hover {
|
||||
background: var(--button-hover-background, #4d4d4d);
|
||||
}
|
||||
|
||||
.qrcode-hint {
|
||||
margin: 0;
|
||||
font-size: 12px;
|
||||
color: var(--text-secondary, #808080);
|
||||
text-align: center;
|
||||
}
|
||||
77
packages/editor/editor-app/src/styles/ResizablePanel.css
Normal file
77
packages/editor/editor-app/src/styles/ResizablePanel.css
Normal file
@@ -0,0 +1,77 @@
|
||||
.resizable-panel {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resizable-panel-horizontal {
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.resizable-panel-vertical {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.panel-section {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.resizer {
|
||||
background: var(--color-bg-elevated);
|
||||
position: relative;
|
||||
z-index: var(--z-index-base);
|
||||
transition: background-color var(--transition-fast);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.resizer:hover {
|
||||
background: var(--color-primary-subtle);
|
||||
}
|
||||
|
||||
.resizer:active {
|
||||
background: var(--color-primary);
|
||||
}
|
||||
|
||||
.resizer-horizontal {
|
||||
width: 4px;
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
.resizer-vertical {
|
||||
height: 4px;
|
||||
cursor: row-resize;
|
||||
}
|
||||
|
||||
.resizer-handle {
|
||||
position: absolute;
|
||||
background: transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.resizer-horizontal .resizer-handle {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 12px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.resizer-vertical .resizer-handle {
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 40px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
body.resizing {
|
||||
cursor: col-resize !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
|
||||
body.resizing-vertical {
|
||||
cursor: row-resize !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
843
packages/editor/editor-app/src/styles/SceneHierarchy.css
Normal file
843
packages/editor/editor-app/src/styles/SceneHierarchy.css
Normal file
@@ -0,0 +1,843 @@
|
||||
.scene-hierarchy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #2a2a2a;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.scene-hierarchy.outliner {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* ==================== Toolbar ==================== */
|
||||
.outliner-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 6px 8px;
|
||||
background: #333;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.outliner-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.outliner-filter-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 4px 8px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.outliner-filter-btn:hover {
|
||||
background: #444;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.outliner-search {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.outliner-search svg {
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.outliner-search input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
outline: none;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.outliner-search input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.outliner-search .search-dropdown {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-clear-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
border-radius: 2px;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.search-clear-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.outliner-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.outliner-action-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
color: #ccc;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.outliner-action-btn:hover {
|
||||
background: #444;
|
||||
border-color: #555;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==================== Column Header ==================== */
|
||||
.outliner-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
background: #333;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.outliner-header-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-right: 6px;
|
||||
border-right: 1px solid #444;
|
||||
margin-right: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.header-icon:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.outliner-header-label {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.outliner-header-label:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.outliner-header-label.sorted {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.outliner-header-type {
|
||||
width: 80px;
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
padding: 2px 4px;
|
||||
border-radius: 2px;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.outliner-header-type:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.outliner-header-type.sorted {
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.sort-indicator {
|
||||
font-size: 8px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ==================== Content Area ==================== */
|
||||
.outliner-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* 滚动条样式 | Scrollbar styling */
|
||||
.outliner-content::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.outliner-content::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.outliner-content::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.outliner-content::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.outliner-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* ==================== Item Styles ==================== */
|
||||
.outliner-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 8px;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
.outliner-item:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.outliner-item.selected {
|
||||
background: #3d5a80;
|
||||
}
|
||||
|
||||
.outliner-item.selected:hover {
|
||||
background: #4a6a90;
|
||||
}
|
||||
|
||||
.outliner-item.world-item {
|
||||
background: #333;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
}
|
||||
|
||||
.outliner-item.dragging {
|
||||
opacity: 0.5;
|
||||
background: rgba(74, 158, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Drop Indicators | 拖放指示器 */
|
||||
.outliner-item.drop-before {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.outliner-item.drop-before::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #4a9eff 0%, #4a9eff 50%, transparent 50%);
|
||||
background-size: 8px 2px;
|
||||
border-radius: 1px;
|
||||
animation: dropIndicatorPulse 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.outliner-item.drop-after {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.outliner-item.drop-after::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
left: 8px;
|
||||
right: 8px;
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, #4a9eff 0%, #4a9eff 50%, transparent 50%);
|
||||
background-size: 8px 2px;
|
||||
border-radius: 1px;
|
||||
animation: dropIndicatorPulse 0.8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.outliner-item.drop-inside {
|
||||
background: rgba(74, 158, 255, 0.15);
|
||||
box-shadow: inset 0 0 0 2px rgba(74, 158, 255, 0.5);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@keyframes dropIndicatorPulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.5; }
|
||||
}
|
||||
|
||||
.outliner-item.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.outliner-item-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding-right: 6px;
|
||||
margin-right: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
transition: color 0.15s ease;
|
||||
}
|
||||
|
||||
.item-icon:hover {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item-icon.visibility {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.item-icon.visibility:hover {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.item-icon.visibility.hidden {
|
||||
color: #555;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.item-icon.visibility.hidden:hover {
|
||||
color: #4a9eff;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.outliner-item-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.outliner-item-expand {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.outliner-item-expand.clickable {
|
||||
cursor: pointer;
|
||||
border-radius: 3px;
|
||||
transition: background 0.15s ease, color 0.15s ease;
|
||||
}
|
||||
|
||||
.outliner-item-expand.clickable:hover {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.outliner-item-expand:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.outliner-item-name {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.outliner-item.selected .outliner-item-name {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 内联重命名输入框 | Inline rename input */
|
||||
.outliner-item-name-input {
|
||||
flex: 1;
|
||||
min-width: 60px;
|
||||
padding: 1px 4px;
|
||||
margin: -2px 0;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #3b82f6;
|
||||
border-radius: 2px;
|
||||
color: #fff;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.outliner-item-name-input:focus {
|
||||
box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.outliner-item-type {
|
||||
width: 80px;
|
||||
min-width: 60px;
|
||||
flex-shrink: 0;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Entity Type Icons */
|
||||
.entity-type-icon {
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.entity-type-icon.world {
|
||||
color: #4a9eff;
|
||||
}
|
||||
|
||||
.entity-type-icon.folder {
|
||||
color: #dcb67a;
|
||||
}
|
||||
|
||||
.entity-type-icon.light {
|
||||
color: #ffd700;
|
||||
}
|
||||
|
||||
.entity-type-icon.atmosphere,
|
||||
.entity-type-icon.cloud,
|
||||
.entity-type-icon.fog {
|
||||
color: #87ceeb;
|
||||
}
|
||||
|
||||
.entity-type-icon.mesh {
|
||||
color: #9966ff;
|
||||
}
|
||||
|
||||
.entity-type-icon.player {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.entity-type-icon.default {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ==================== Status Bar ==================== */
|
||||
.outliner-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 22px;
|
||||
padding: 0 12px;
|
||||
background: #2d2d2d;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
/* ==================== Empty State ==================== */
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
color: #666;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
color: #444;
|
||||
margin-bottom: 12px;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.empty-hint {
|
||||
font-size: 12px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* ==================== View Mode Toggle ==================== */
|
||||
.view-mode-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
padding: 2px;
|
||||
background: #3a3a3a;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 20px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 2px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.mode-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.mode-btn.active {
|
||||
background: #4a9eff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.remote-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 6px;
|
||||
background: rgba(16, 185, 129, 0.15);
|
||||
border: 1px solid rgba(16, 185, 129, 0.5);
|
||||
border-radius: 3px;
|
||||
color: rgb(16, 185, 129);
|
||||
animation: pulse-green 1.5s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes pulse-green {
|
||||
0%, 100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Context Menu ==================== */
|
||||
.context-menu {
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
padding: 4px;
|
||||
min-width: 180px;
|
||||
}
|
||||
|
||||
.context-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.context-menu button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.context-menu-divider {
|
||||
height: 1px;
|
||||
background: #444;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.context-menu-item-with-submenu {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.context-menu-item-with-submenu .submenu-arrow {
|
||||
margin-left: auto;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.context-submenu {
|
||||
position: fixed;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
padding: 4px;
|
||||
min-width: 180px;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.context-submenu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.context-submenu button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.context-menu-danger {
|
||||
color: #f87171 !important;
|
||||
}
|
||||
|
||||
.context-menu-danger:hover {
|
||||
background: rgba(248, 113, 113, 0.15) !important;
|
||||
}
|
||||
|
||||
/* 快捷键提示 | Shortcut hints */
|
||||
.context-menu-shortcut {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
font-family: var(--font-family-mono, 'Consolas', monospace);
|
||||
}
|
||||
|
||||
/* Prefab Instance Context Menu Styles | 预制体实例右键菜单样式 */
|
||||
.context-menu-section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 4px 10px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #60a5fa;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
border-bottom: 1px solid #3b82f6;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.context-menu-section-header svg {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.context-menu-highlight {
|
||||
color: #60a5fa !important;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.context-menu-highlight:hover {
|
||||
background: rgba(59, 130, 246, 0.2) !important;
|
||||
}
|
||||
|
||||
.context-menu-warning {
|
||||
color: #fbbf24 !important;
|
||||
}
|
||||
|
||||
.context-menu-warning:hover {
|
||||
background: rgba(251, 191, 36, 0.15) !important;
|
||||
}
|
||||
|
||||
.context-menu button:disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.context-menu button:disabled:hover {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* ==================== Prefab Edit Mode | 预制体编辑模式 ==================== */
|
||||
.scene-hierarchy.prefab-edit-mode {
|
||||
border-left: 3px solid #3b82f6;
|
||||
}
|
||||
|
||||
.prefab-edit-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #1e293b 100%);
|
||||
border-bottom: 1px solid #3b82f6;
|
||||
color: #93c5fd;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.prefab-edit-header svg {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.outliner-item.prefab-root {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.outliner-item.prefab-root:hover {
|
||||
background: rgba(59, 130, 246, 0.15);
|
||||
}
|
||||
|
||||
.entity-type-icon.prefab {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
/* ==================== Prefab Instance Indicator | 预制体实例指示器 ==================== */
|
||||
.outliner-item.prefab-instance {
|
||||
background: rgba(59, 130, 246, 0.05);
|
||||
border-left: 2px solid #3b82f6;
|
||||
}
|
||||
|
||||
.outliner-item.prefab-instance:hover {
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
}
|
||||
|
||||
.outliner-item.prefab-instance.selected {
|
||||
background: rgba(59, 130, 246, 0.2);
|
||||
}
|
||||
|
||||
.entity-type-icon.prefab-instance {
|
||||
color: #60a5fa;
|
||||
}
|
||||
|
||||
.prefab-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin-left: 6px;
|
||||
font-size: 9px;
|
||||
font-weight: 700;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
|
||||
color: white;
|
||||
border-radius: 3px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.outliner-item.prefab-instance .outliner-item-name {
|
||||
color: #93c5fd;
|
||||
}
|
||||
|
||||
.outliner-item.prefab-instance .outliner-item-type {
|
||||
color: #60a5fa;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ==================== Responsive Layout | 响应式布局 ==================== */
|
||||
|
||||
/* 使用 container query 在窄面板时隐藏 Type 列 */
|
||||
/* Use container query to hide Type column in narrow panels */
|
||||
.scene-hierarchy {
|
||||
container-type: inline-size;
|
||||
container-name: scene-hierarchy;
|
||||
}
|
||||
|
||||
/* 当面板宽度小于 200px 时隐藏 Type 列和图标列 */
|
||||
/* Hide Type column and icons column when panel width < 200px */
|
||||
@container scene-hierarchy (max-width: 200px) {
|
||||
.outliner-header-type,
|
||||
.outliner-item-type,
|
||||
.outliner-header-icons,
|
||||
.outliner-item-icons {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* 当面板宽度小于 280px 时只隐藏 Type 列 */
|
||||
/* Hide only Type column when panel width < 280px */
|
||||
@container scene-hierarchy (max-width: 280px) {
|
||||
.outliner-header-type,
|
||||
.outliner-item-type {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Virtual Nodes | 虚拟节点 ==================== */
|
||||
/* Virtual nodes are read-only internal nodes from components like FGUI */
|
||||
/* 虚拟节点是来自组件（如 FGUI）的只读内部节点 */
|
||||
|
||||
.outliner-item.virtual-node {
|
||||
background: rgba(245, 158, 11, 0.05);
|
||||
border-left: 2px solid rgba(245, 158, 11, 0.4);
|
||||
}
|
||||
|
||||
.outliner-item.virtual-node:hover {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
.outliner-item.virtual-node.selected {
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border-left-color: #f59e0b;
|
||||
}
|
||||
|
||||
.outliner-item.virtual-node .outliner-item-name.virtual-name {
|
||||
color: #fbbf24;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.outliner-item.virtual-node .outliner-item-type.virtual-type {
|
||||
color: #d97706;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Hidden virtual node (invisible in UI) */
|
||||
/* 隐藏的虚拟节点（在 UI 中不可见） */
|
||||
.outliner-item.virtual-node.hidden-node {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.outliner-item.virtual-node.hidden-node .outliner-item-name {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
/* Virtual node icon colors */
|
||||
/* 虚拟节点图标颜色 */
|
||||
.outliner-item.virtual-node svg {
|
||||
color: #f59e0b;
|
||||
flex-shrink: 0;
|
||||
margin-right: 4px;
|
||||
}
|
||||
499
packages/editor/editor-app/src/styles/SettingsWindow.css
Normal file
499
packages/editor/editor-app/src/styles/SettingsWindow.css
Normal file
@@ -0,0 +1,499 @@
|
||||
/* ==================== Settings Window - 新设计 ==================== */
|
||||
|
||||
.settings-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-index-modal, 1000);
|
||||
backdrop-filter: blur(2px);
|
||||
}
|
||||
|
||||
.settings-window-new {
|
||||
display: flex;
|
||||
width: 1100px;
|
||||
max-width: 95vw;
|
||||
height: 700px;
|
||||
max-height: 90vh;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
/* ==================== Left Sidebar ==================== */
|
||||
.settings-sidebar-new {
|
||||
width: 220px;
|
||||
min-width: 220px;
|
||||
background: #252526;
|
||||
border-right: 1px solid #3c3c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.settings-sidebar-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 10px 12px;
|
||||
background: #2d2d30;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
font-size: 12px;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.settings-sidebar-header svg {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.settings-sidebar-close {
|
||||
margin-left: auto;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.settings-sidebar-close:hover {
|
||||
background: #3c3c3c;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.settings-sidebar-search {
|
||||
padding: 8px 12px;
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.settings-sidebar-categories {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.settings-main-category {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
|
||||
.settings-main-category-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.settings-main-category-header:hover {
|
||||
background: #2d2d30;
|
||||
}
|
||||
|
||||
.settings-main-category-header svg {
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-sub-categories {
|
||||
padding-left: 12px;
|
||||
}
|
||||
|
||||
.settings-sub-category {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 5px 12px 5px 18px;
|
||||
background: none;
|
||||
border: none;
|
||||
text-align: left;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.settings-sub-category:hover {
|
||||
color: #e0e0e0;
|
||||
background: #2d2d30;
|
||||
}
|
||||
|
||||
.settings-sub-category.active {
|
||||
color: #fff;
|
||||
background: #094771;
|
||||
}
|
||||
|
||||
/* ==================== Right Content ==================== */
|
||||
.settings-content-new {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.settings-content-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 8px 16px;
|
||||
background: #2d2d30;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.settings-search-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
max-width: 400px;
|
||||
padding: 6px 12px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.settings-search-bar svg {
|
||||
color: #666;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.settings-search-bar input {
|
||||
flex: 1;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #e0e0e0;
|
||||
font-size: 12px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.settings-search-bar input::placeholder {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.settings-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.settings-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.settings-icon-btn:hover {
|
||||
background: #3c3c3c;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.settings-action-btn {
|
||||
padding: 6px 12px;
|
||||
background: #3c3c3c;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 4px;
|
||||
color: #e0e0e0;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.settings-action-btn:hover {
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
/* ==================== Category Title Bar ==================== */
|
||||
.settings-category-title-bar {
|
||||
padding: 12px 16px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.settings-category-breadcrumb {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.settings-category-breadcrumb svg {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.settings-breadcrumb-separator {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.settings-category-desc {
|
||||
font-size: 11px;
|
||||
color: #888;
|
||||
margin: 4px 0 8px;
|
||||
}
|
||||
|
||||
.settings-category-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.settings-category-action-btn {
|
||||
padding: 5px 12px;
|
||||
background: #3c3c3c;
|
||||
border: 1px solid #4a4a4a;
|
||||
border-radius: 3px;
|
||||
color: #e0e0e0;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.settings-category-action-btn:hover {
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
/* ==================== Settings Sections ==================== */
|
||||
.settings-sections-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings-section-new {
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.settings-section-header-new {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: #e0e0e0;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: #2a2a2a;
|
||||
}
|
||||
|
||||
.settings-section-header-new:hover {
|
||||
background: #333;
|
||||
}
|
||||
|
||||
.settings-section-header-new svg {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.settings-section-content-new {
|
||||
padding: 4px 0;
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
/* ==================== Settings Row ==================== */
|
||||
.settings-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 6px 16px 6px 28px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.settings-row:hover {
|
||||
background: #252526;
|
||||
}
|
||||
|
||||
.settings-row-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
flex: 0 0 200px;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.settings-row-expand {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-row-value {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* ==================== Input Styles ==================== */
|
||||
.settings-checkbox {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
accent-color: #0078d4;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-number-input,
|
||||
.settings-text-input {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 2px;
|
||||
color: #e0e0e0;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.settings-number-input:focus,
|
||||
.settings-text-input:focus {
|
||||
border-color: #0078d4;
|
||||
}
|
||||
|
||||
.settings-number-input.error,
|
||||
.settings-text-input.error {
|
||||
border-color: #f48771;
|
||||
}
|
||||
|
||||
.settings-select {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
padding: 4px 8px;
|
||||
background: #1e1e1e;
|
||||
border: 1px solid #3c3c3c;
|
||||
border-radius: 2px;
|
||||
color: #e0e0e0;
|
||||
font-size: 11px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-select:focus {
|
||||
border-color: #0078d4;
|
||||
}
|
||||
|
||||
/* ==================== Range Input ==================== */
|
||||
.settings-range {
|
||||
flex: 1;
|
||||
max-width: 150px;
|
||||
height: 4px;
|
||||
background: #3c3c3c;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.settings-range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background: #0078d4;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-range-value {
|
||||
min-width: 40px;
|
||||
text-align: right;
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* ==================== Color Input ==================== */
|
||||
.settings-color-bar {
|
||||
width: 120px;
|
||||
height: 22px;
|
||||
border-radius: 2px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.settings-color-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* ==================== Special Types ==================== */
|
||||
.settings-plugin-list,
|
||||
.settings-custom-renderer,
|
||||
.settings-module-list {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
|
||||
.settings-error {
|
||||
color: #f48771;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.settings-hint {
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ==================== Empty State ==================== */
|
||||
.settings-empty-new {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
color: #666;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.settings-empty-new svg {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.settings-empty-new p {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* ==================== Scrollbar ==================== */
|
||||
.settings-sidebar-categories::-webkit-scrollbar,
|
||||
.settings-sections-container::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.settings-sidebar-categories::-webkit-scrollbar-track,
|
||||
.settings-sections-container::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.settings-sidebar-categories::-webkit-scrollbar-thumb,
|
||||
.settings-sections-container::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.settings-sidebar-categories::-webkit-scrollbar-thumb:hover,
|
||||
.settings-sections-container::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
22
packages/editor/editor-app/src/styles/StartupLogo.css
Normal file
22
packages/editor/editor-app/src/styles/StartupLogo.css
Normal file
@@ -0,0 +1,22 @@
|
||||
.startup-logo-container {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #1e1e1e;
|
||||
z-index: var(--z-index-max);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: opacity 0.5s ease-out;
|
||||
}
|
||||
|
||||
.startup-logo-container.fade-out {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.startup-logo-canvas {
|
||||
display: block;
|
||||
}
|
||||
675
packages/editor/editor-app/src/styles/StartupPage.css
Normal file
675
packages/editor/editor-app/src/styles/StartupPage.css
Normal file
@@ -0,0 +1,675 @@
|
||||
.startup-page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
background-color: #1e1e1e;
|
||||
color: #cccccc;
|
||||
}
|
||||
|
||||
.startup-header {
|
||||
padding: 60px 40px 40px;
|
||||
}
|
||||
|
||||
.startup-title {
|
||||
font-size: 32px;
|
||||
font-weight: 300;
|
||||
color: #ffffff;
|
||||
margin: 0 0 8px 0;
|
||||
letter-spacing: -0.5px;
|
||||
}
|
||||
|
||||
.startup-subtitle {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #858585;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.startup-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
gap: 60px;
|
||||
padding: 0 40px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.startup-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
min-width: 280px;
|
||||
}
|
||||
|
||||
.startup-action-btn {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background-color: #2d2d30;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 2px;
|
||||
color: #cccccc;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.startup-action-btn:hover {
|
||||
background-color: #37373d;
|
||||
border-color: #007acc;
|
||||
}
|
||||
|
||||
.startup-action-btn.primary {
|
||||
background-color: #0e639c;
|
||||
border-color: #0e639c;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.startup-action-btn.primary:hover {
|
||||
background-color: #1177bb;
|
||||
border-color: #1177bb;
|
||||
}
|
||||
|
||||
.startup-action-btn.disabled {
|
||||
background-color: #252526;
|
||||
border-color: #3e3e42;
|
||||
color: #6e6e6e;
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.startup-action-btn.disabled:hover {
|
||||
background-color: #252526;
|
||||
border-color: #3e3e42;
|
||||
}
|
||||
|
||||
.badge-coming-soon {
|
||||
margin-left: auto;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
background-color: #3e3e42;
|
||||
border-radius: 2px;
|
||||
color: #858585;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.startup-recent {
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
.recent-title {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #cccccc;
|
||||
margin: 0 0 16px 0;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.recent-empty {
|
||||
font-size: 13px;
|
||||
color: #858585;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.recent-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.recent-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 12px;
|
||||
background-color: transparent;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
transition: background-color 0.15s;
|
||||
}
|
||||
|
||||
.recent-item:hover {
|
||||
background-color: #2a2d2e;
|
||||
}
|
||||
|
||||
.recent-icon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: #858585;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recent-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.recent-name {
|
||||
font-size: 13px;
|
||||
color: #cccccc;
|
||||
margin-bottom: 2px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recent-path {
|
||||
font-size: 11px;
|
||||
color: #6e6e6e;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.recent-remove-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: #6e6e6e;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: all 0.15s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.recent-item:hover .recent-remove-btn {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.recent-remove-btn:hover {
|
||||
background: rgba(255, 80, 80, 0.15);
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.startup-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 20px 40px;
|
||||
border-top: 1px solid #2a2a2f;
|
||||
}
|
||||
|
||||
.startup-version {
|
||||
font-size: 11px;
|
||||
color: #6e6e6e;
|
||||
}
|
||||
|
||||
.startup-locale-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.startup-locale-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 3px;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.startup-locale-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-color: #555;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.startup-locale-menu {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
right: 0;
|
||||
margin-bottom: 4px;
|
||||
min-width: 120px;
|
||||
background: #252529;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
|
||||
padding: 4px 0;
|
||||
z-index: var(--z-index-dropdown);
|
||||
}
|
||||
|
||||
.startup-locale-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.startup-locale-item:hover {
|
||||
background: #3b82f6;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.startup-locale-item.active {
|
||||
color: #3b82f6;
|
||||
}
|
||||
|
||||
.startup-locale-item.active:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 更新提示条样式 */
|
||||
.startup-update-banner {
|
||||
position: fixed;
|
||||
bottom: 60px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: var(--z-index-sticky);
|
||||
}
|
||||
|
||||
.update-banner-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 10px 16px;
|
||||
background: linear-gradient(135deg, #1e5a2f 0%, #1a4a28 100%);
|
||||
border: 1px solid #2e8b4a;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
|
||||
color: #ffffff;
|
||||
font-size: 13px;
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.update-banner-content svg {
|
||||
color: #4ade80;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.update-banner-text {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.update-banner-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 14px;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.update-banner-btn.primary {
|
||||
background: #22c55e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.update-banner-btn.primary:hover:not(:disabled) {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.update-banner-btn:disabled {
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.update-banner-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.update-banner-close:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.update-banner-close:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* 右键菜单样式 | Context Menu Styles */
|
||||
.startup-context-menu-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.startup-context-menu {
|
||||
position: fixed;
|
||||
min-width: 180px;
|
||||
background: #252529;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 0;
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
.startup-context-menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
width: 100%;
|
||||
padding: 8px 14px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #cccccc;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
}
|
||||
|
||||
.startup-context-menu-item:hover {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.startup-context-menu-item.danger {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.startup-context-menu-item.danger:hover {
|
||||
background: #dc2626;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* 对话框样式 | Dialog Styles */
|
||||
.startup-dialog-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 1002;
|
||||
}
|
||||
|
||||
.startup-dialog {
|
||||
width: 400px;
|
||||
background: #2d2d30;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.startup-dialog-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 16px 20px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3e3e42;
|
||||
}
|
||||
|
||||
.startup-dialog-header h3 {
|
||||
margin: 0;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.dialog-icon-danger {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.startup-dialog-body {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.startup-dialog-body p {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 13px;
|
||||
color: #cccccc;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.startup-dialog-body p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.startup-dialog-path {
|
||||
padding: 10px 12px;
|
||||
background: #1e1e1e;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
color: #858585;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.startup-dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 16px 20px;
|
||||
background: #252526;
|
||||
border-top: 1px solid #3e3e42;
|
||||
}
|
||||
|
||||
.startup-dialog-btn {
|
||||
padding: 8px 16px;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 4px;
|
||||
background: #2d2d30;
|
||||
color: #cccccc;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.startup-dialog-btn:hover {
|
||||
background: #37373d;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.startup-dialog-btn.danger {
|
||||
background: #dc2626;
|
||||
border-color: #dc2626;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.startup-dialog-btn.danger:hover {
|
||||
background: #b91c1c;
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
|
||||
.startup-dialog-btn.primary {
|
||||
background: #0e639c;
|
||||
border-color: #0e639c;
|
||||
color: #ffffff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.startup-dialog-btn.primary:hover:not(:disabled) {
|
||||
background: #1177bb;
|
||||
border-color: #1177bb;
|
||||
}
|
||||
|
||||
.startup-dialog-btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* esbuild 安装对话框样式 | esbuild Installation Dialog Styles */
|
||||
.startup-dialog-info {
|
||||
padding: 10px 12px;
|
||||
background: #1e1e1e;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: #cccccc;
|
||||
border-left: 3px solid #0e639c;
|
||||
}
|
||||
|
||||
.startup-dialog-progress {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: #1e1e1e;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
color: #0e639c;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.startup-dialog-error {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 12px;
|
||||
background: #1e1e1e;
|
||||
border-radius: 4px;
|
||||
margin-top: 12px;
|
||||
color: #dc2626;
|
||||
font-size: 13px;
|
||||
border-left: 3px solid #dc2626;
|
||||
}
|
||||
|
||||
.dialog-icon-info {
|
||||
color: #0e639c;
|
||||
}
|
||||
|
||||
/* 环境状态指示器样式 | Environment Status Indicator Styles */
|
||||
.startup-env-status {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s;
|
||||
}
|
||||
|
||||
.startup-env-status.ready {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.startup-env-status.ready:hover {
|
||||
background: rgba(74, 222, 128, 0.1);
|
||||
}
|
||||
|
||||
.startup-env-status.warning {
|
||||
color: #f59e0b;
|
||||
animation: pulse 2s infinite;
|
||||
}
|
||||
|
||||
.startup-env-status.warning:hover {
|
||||
background: rgba(245, 158, 11, 0.1);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.startup-env-tooltip {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
margin-bottom: 8px;
|
||||
padding: 12px 16px;
|
||||
min-width: 200px;
|
||||
background: #2d2d30;
|
||||
border: 1px solid #3e3e42;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.startup-env-tooltip::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
border: 6px solid transparent;
|
||||
border-top-color: #3e3e42;
|
||||
}
|
||||
|
||||
.env-tooltip-title {
|
||||
margin-bottom: 10px;
|
||||
padding-bottom: 8px;
|
||||
border-bottom: 1px solid #3e3e42;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.env-tooltip-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.env-tooltip-item.ok {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.env-tooltip-item.error {
|
||||
color: #f87171;
|
||||
}
|
||||
|
||||
.env-source {
|
||||
opacity: 0.6;
|
||||
font-size: 11px;
|
||||
}
|
||||
323
packages/editor/editor-app/src/styles/StatusBar.css
Normal file
323
packages/editor/editor-app/src/styles/StatusBar.css
Normal file
@@ -0,0 +1,323 @@
|
||||
.status-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 24px;
|
||||
background: #2d2d2d;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
font-size: 11px;
|
||||
user-select: none;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.status-bar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-bar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-bar-divider {
|
||||
width: 1px;
|
||||
height: 14px;
|
||||
background: #444;
|
||||
margin: 0 2px;
|
||||
}
|
||||
|
||||
|
||||
/* Tab Buttons */
|
||||
.status-bar-tab {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.status-bar-tab:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.status-bar-tab.active {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-bottom: 2px solid #0078d4;
|
||||
}
|
||||
|
||||
/* Console Input */
|
||||
.status-bar-console-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.console-prompt {
|
||||
color: #666;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.status-bar-console-input input {
|
||||
flex: 1;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
font-family: 'Consolas', 'Monaco', monospace;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.status-bar-console-input input::placeholder {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
/* Right Side Indicators */
|
||||
.status-bar-indicator {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-bar-indicator:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Icon Group */
|
||||
.status-bar-icon-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.status-bar-icon-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-bar-icon-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Info Items */
|
||||
.status-bar-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.status-bar-info svg {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
/* Generic button reset */
|
||||
.status-bar-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.status-bar-btn:hover {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* ==================== Drawer Common Styles ==================== */
|
||||
|
||||
.drawer-backdrop {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 24px;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
z-index: 998;
|
||||
}
|
||||
|
||||
.drawer-panel {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 24px;
|
||||
background: #1e1e1e;
|
||||
border-top: 2px solid #3b82f6;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
|
||||
overflow: hidden;
|
||||
transition: height 0.15s ease;
|
||||
}
|
||||
|
||||
.drawer-panel:not(.open) {
|
||||
height: 0 !important;
|
||||
border-top: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.drawer-panel:not(.open) .drawer-header,
|
||||
.drawer-panel:not(.open) .drawer-body,
|
||||
.drawer-panel:not(.open) .drawer-resize-handle,
|
||||
.drawer-panel:not(.open) .output-log-toolbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drawer-resize-handle {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 8px;
|
||||
cursor: ns-resize;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.drawer-resize-handle::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 40px;
|
||||
height: 3px;
|
||||
background: #4c4c4c;
|
||||
border-radius: 2px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
.drawer-resize-handle:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.drawer-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
padding: 0 8px 0 12px;
|
||||
background: #252526;
|
||||
border-bottom: 1px solid #3c3c3c;
|
||||
}
|
||||
|
||||
.drawer-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.drawer-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-radius: 3px;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.drawer-close:hover {
|
||||
background: #3c3c3c;
|
||||
color: #e0e0e0;
|
||||
}
|
||||
|
||||
.drawer-body {
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Content Drawer Specific */
|
||||
.content-drawer-panel .drawer-body .content-browser {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.content-drawer-panel .drawer-body .content-browser.is-drawer {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Drawer Toggle Button */
|
||||
.drawer-toggle-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
height: 100%;
|
||||
padding: 0 10px;
|
||||
background: #3a3a3a;
|
||||
border: none;
|
||||
border-right: 1px solid #1a1a1a;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.drawer-toggle-btn:hover {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.drawer-toggle-btn.active {
|
||||
background: #4a4a4a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ==================== Output Log Drawer ==================== */
|
||||
|
||||
.output-log-body {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.output-log-body .output-log-panel {
|
||||
height: 100%;
|
||||
}
|
||||
213
packages/editor/editor-app/src/styles/TitleBar.css
Normal file
213
packages/editor/editor-app/src/styles/TitleBar.css
Normal file
@@ -0,0 +1,213 @@
|
||||
/* ==================== Title Bar Container ==================== */
|
||||
.titlebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 32px;
|
||||
background: linear-gradient(180deg, #3a3a3f 0%, #2d2d32 100%);
|
||||
border-bottom: 1px solid #1a1a1d;
|
||||
user-select: none;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* ==================== Left Section: Logo + Menus ==================== */
|
||||
.titlebar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.titlebar-logo-text {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
color: #4a9eff;
|
||||
text-shadow: 0 0 8px rgba(74, 158, 255, 0.8),
|
||||
0 0 16px rgba(74, 158, 255, 0.5),
|
||||
0 0 24px rgba(74, 158, 255, 0.3);
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ==================== Menu Bar ==================== */
|
||||
.titlebar-menus {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar-menu-item {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar-menu-button {
|
||||
height: 100%;
|
||||
padding: 0 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #a0a0a0;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.titlebar-menu-button:hover {
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
color: #d0d0d0;
|
||||
}
|
||||
|
||||
.titlebar-menu-button.active {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
/* ==================== Dropdown Menu ==================== */
|
||||
.titlebar-dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
min-width: 200px;
|
||||
background: #252528;
|
||||
border: 1px solid #3a3a3d;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
|
||||
padding: 4px 0;
|
||||
z-index: 10000;
|
||||
animation: dropdown-fade-in 0.1s ease;
|
||||
}
|
||||
|
||||
@keyframes dropdown-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #c0c0c0;
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item:hover:not(.disabled) {
|
||||
background: #3b82f6;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item.disabled {
|
||||
color: #505050;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item-content svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-shortcut {
|
||||
color: #606060;
|
||||
font-size: 11px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.titlebar-dropdown-item:hover:not(.disabled) .titlebar-dropdown-shortcut {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
}
|
||||
|
||||
.titlebar-dropdown-separator {
|
||||
height: 1px;
|
||||
background: #3a3a3d;
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
/* ==================== Center Section: Draggable Area ==================== */
|
||||
.titlebar-center {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
/* ==================== Right Section: Project Name + Window Controls ==================== */
|
||||
.titlebar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar-project-name {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: #707070;
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
.titlebar-window-controls {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 46px;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #808080;
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.titlebar-button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.titlebar-button:active {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.titlebar-button-close:hover {
|
||||
background: #e81123;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.titlebar-button svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
126
packages/editor/editor-app/src/styles/Toast.css
Normal file
126
packages/editor/editor-app/src/styles/Toast.css
Normal file
@@ -0,0 +1,126 @@
|
||||
.toast-container {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
right: 20px;
|
||||
z-index: var(--z-index-toast);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.toast {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
padding: 12px 16px;
|
||||
background: rgba(26, 26, 26, 0.95);
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 1px rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(8px);
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
pointer-events: auto;
|
||||
animation: toastSlideIn 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
|
||||
border-left: 3px solid var(--toast-color);
|
||||
}
|
||||
|
||||
@keyframes toastSlideIn {
|
||||
from {
|
||||
transform: translateX(calc(100% + 20px));
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
color: var(--toast-color);
|
||||
}
|
||||
|
||||
.toast-message {
|
||||
flex: 1;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: #e0e0e0;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.toast-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
.toast-close:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
}
|
||||
|
||||
.toast-close:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
|
||||
/* Toast 类型样式 */
|
||||
.toast-success {
|
||||
--toast-color: #4caf50;
|
||||
border-left-color: #4caf50;
|
||||
}
|
||||
|
||||
.toast-error {
|
||||
--toast-color: #f44336;
|
||||
border-left-color: #f44336;
|
||||
}
|
||||
|
||||
.toast-warning {
|
||||
--toast-color: #ff9800;
|
||||
border-left-color: #ff9800;
|
||||
}
|
||||
|
||||
.toast-info {
|
||||
--toast-color: #2196f3;
|
||||
border-left-color: #2196f3;
|
||||
}
|
||||
|
||||
/* 移除时的动画 */
|
||||
.toast.removing {
|
||||
animation: toastSlideOut 0.3s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
|
||||
}
|
||||
|
||||
@keyframes toastSlideOut {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
transform: translateX(calc(100% + 20px));
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式调整 */
|
||||
@media (max-width: 768px) {
|
||||
.toast-container {
|
||||
left: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
|
||||
.toast {
|
||||
min-width: unset;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
244
packages/editor/editor-app/src/styles/TransformInspector.css
Normal file
244
packages/editor/editor-app/src/styles/TransformInspector.css
Normal file
@@ -0,0 +1,244 @@
|
||||
/* Transform Component Inspector - Custom Design */
|
||||
.tf-inspector {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* Divider between rows */
|
||||
.tf-divider {
|
||||
height: 1px;
|
||||
background: #3a3a3a;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* Transform Row */
|
||||
.tf-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
min-height: 24px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tf-row:hover {
|
||||
background: rgba(255, 255, 255, 0.02);
|
||||
}
|
||||
|
||||
/* Label Button with dropdown arrow */
|
||||
.tf-label-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
padding: 0 8px;
|
||||
background: #333;
|
||||
border: 1px solid #444;
|
||||
border-radius: 2px;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.tf-label-btn:hover {
|
||||
background: #3a3a3a;
|
||||
border-color: #4a4a4a;
|
||||
}
|
||||
|
||||
.tf-label-btn svg {
|
||||
color: #888;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Inputs Container */
|
||||
.tf-inputs {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
gap: 2px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
/* Axis Input */
|
||||
.tf-axis-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
background: #1a1a1a;
|
||||
border: 1px solid #444;
|
||||
border-radius: 2px;
|
||||
height: 20px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.tf-axis-input:hover {
|
||||
border-color: #555;
|
||||
background: #1e1e1e;
|
||||
}
|
||||
|
||||
.tf-axis-input:focus-within {
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
.tf-axis-input.dragging {
|
||||
border-color: #4a9eff;
|
||||
}
|
||||
|
||||
/* Color bar */
|
||||
.tf-axis-bar {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
flex-shrink: 0;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.tf-axis-bar.tf-axis-x {
|
||||
background: #c04040;
|
||||
}
|
||||
|
||||
.tf-axis-bar.tf-axis-y {
|
||||
background: #40a040;
|
||||
}
|
||||
|
||||
.tf-axis-bar.tf-axis-z {
|
||||
background: #4060c0;
|
||||
}
|
||||
|
||||
.tf-axis-input input {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
height: 100%;
|
||||
padding: 0 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
font-size: 11px;
|
||||
font-family: 'Consolas', 'Monaco', 'Menlo', monospace;
|
||||
color: #ddd;
|
||||
text-align: left;
|
||||
-moz-appearance: textfield;
|
||||
}
|
||||
|
||||
.tf-axis-input input::-webkit-outer-spin-button,
|
||||
.tf-axis-input input::-webkit-inner-spin-button {
|
||||
-webkit-appearance: none;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.tf-axis-input input:focus {
|
||||
outline: none;
|
||||
background: rgba(74, 158, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Suffix */
|
||||
.tf-axis-suffix {
|
||||
font-size: 10px;
|
||||
color: #666;
|
||||
padding-right: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Lock Button */
|
||||
.tf-lock-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tf-lock-btn:hover {
|
||||
color: #999;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.tf-lock-btn.locked {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
/* Reset Button */
|
||||
.tf-reset-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #555;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
flex-shrink: 0;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.tf-reset-btn:hover {
|
||||
color: #999;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Mobility Row */
|
||||
.tf-mobility-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 8px;
|
||||
min-height: 24px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tf-mobility-label {
|
||||
font-size: 11px;
|
||||
color: #999;
|
||||
width: 70px;
|
||||
min-width: 70px;
|
||||
flex-shrink: 0;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.tf-mobility-buttons {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.tf-mobility-btn {
|
||||
flex: 1;
|
||||
padding: 0 8px;
|
||||
font-size: 11px;
|
||||
font-weight: 400;
|
||||
color: #999;
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #444;
|
||||
cursor: pointer;
|
||||
height: 20px;
|
||||
transition: all 0.1s ease;
|
||||
}
|
||||
|
||||
.tf-mobility-btn:first-child {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.tf-mobility-btn:last-child {
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.tf-mobility-btn:not(:first-child) {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tf-mobility-btn:hover {
|
||||
background: #333;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.tf-mobility-btn.active {
|
||||
background: #444;
|
||||
color: #fff;
|
||||
}
|
||||
523
packages/editor/editor-app/src/styles/Viewport.css
Normal file
523
packages/editor/editor-app/src/styles/Viewport.css
Normal file
@@ -0,0 +1,523 @@
|
||||
.viewport {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #1a1a1f;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Viewport Internal Toolbar */
|
||||
.viewport-internal-toolbar {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 28px;
|
||||
padding: 0 8px;
|
||||
background: rgba(30, 30, 30, 0.85);
|
||||
backdrop-filter: blur(4px);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.3);
|
||||
z-index: 20;
|
||||
}
|
||||
|
||||
.viewport-internal-toolbar-left,
|
||||
.viewport-internal-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.viewport-snap-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
color: #888;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.viewport-snap-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viewport-snap-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.viewport-snap-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Zoom display */
|
||||
.viewport-zoom-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 0 6px;
|
||||
color: #888;
|
||||
font-size: 11px;
|
||||
font-family: var(--font-family-mono);
|
||||
}
|
||||
|
||||
.viewport-view-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
border-radius: 3px;
|
||||
color: #aaa;
|
||||
font-size: 11px;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.viewport-view-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.viewport-more-btn {
|
||||
padding: 2px 4px;
|
||||
}
|
||||
|
||||
.viewport-snap-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 4px;
|
||||
min-width: 80px;
|
||||
background: #2d2d2d;
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport-snap-menu-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 140px;
|
||||
}
|
||||
|
||||
.viewport-snap-menu button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: background 0.1s ease;
|
||||
}
|
||||
|
||||
.viewport-snap-menu button:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.viewport-snap-menu button.active {
|
||||
background: rgba(0, 120, 212, 0.3);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.viewport-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 4px 6px;
|
||||
background: var(--color-bg-elevated);
|
||||
border-bottom: 1px solid var(--color-border-default);
|
||||
flex-shrink: 0;
|
||||
gap: 4px;
|
||||
z-index: var(--z-index-above);
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.viewport-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.viewport-toolbar-center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
|
||||
.viewport-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.viewport-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 3px;
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
transition: all 0.1s ease;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.viewport-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.viewport-btn.active {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
.viewport-btn:active {
|
||||
transform: scale(0.96);
|
||||
}
|
||||
|
||||
.viewport-btn:disabled {
|
||||
opacity: 0.35;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.viewport-btn:disabled:hover {
|
||||
background: transparent;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
|
||||
/* Button group styling */
|
||||
.viewport-btn-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
padding: 2px;
|
||||
gap: 1px;
|
||||
}
|
||||
|
||||
.viewport-btn-group .viewport-btn {
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Playback controls special styling */
|
||||
.viewport-playback {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
border-radius: 4px;
|
||||
padding: 2px 4px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn.play-btn {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn.play-btn:hover {
|
||||
background: rgba(74, 222, 128, 0.15);
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn.play-btn.active {
|
||||
background: #4ade80;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn.pause-btn.active {
|
||||
background: #fbbf24;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.viewport-playback .viewport-btn.stop-btn:hover {
|
||||
background: rgba(239, 68, 68, 0.15);
|
||||
color: #ef4444;
|
||||
}
|
||||
|
||||
/* Dropdown */
|
||||
.viewport-dropdown {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.viewport-dropdown .viewport-btn {
|
||||
width: auto;
|
||||
padding: 0 8px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.viewport-dropdown-menu {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
margin-top: 4px;
|
||||
min-width: 160px;
|
||||
background: var(--color-bg-elevated);
|
||||
border: 1px solid var(--color-border-default);
|
||||
border-radius: var(--radius-sm);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
z-index: var(--z-index-dropdown);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.viewport-dropdown-menu button {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-text-primary);
|
||||
font-size: 12px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.viewport-dropdown-menu button:hover {
|
||||
background: var(--color-bg-hover);
|
||||
}
|
||||
|
||||
.viewport-divider {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 6px;
|
||||
}
|
||||
|
||||
|
||||
.viewport-canvas {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
cursor: grab;
|
||||
background: #1a1a1f;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.viewport-canvas:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
.viewport-stats {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
right: 12px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
backdrop-filter: blur(8px);
|
||||
border: 1px solid var(--color-border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
padding: 8px 12px;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 11px;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-index-above);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.viewport-stat {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.viewport-stat-label {
|
||||
color: var(--color-text-secondary);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.viewport-stat-value {
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
/* Live Transform Display | 实时变换显示 */
|
||||
.viewport-live-transform {
|
||||
position: absolute;
|
||||
bottom: 12px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
background: rgba(59, 130, 246, 0.9);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 4px;
|
||||
padding: 6px 12px;
|
||||
font-family: var(--font-family-mono);
|
||||
font-size: 12px;
|
||||
pointer-events: none;
|
||||
z-index: var(--z-index-above);
|
||||
animation: slideUp 0.15s ease-out;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50%) translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.live-transform-label {
|
||||
color: rgba(255, 255, 255, 0.7);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.live-transform-value {
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
min-width: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.viewport:fullscreen {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.viewport:fullscreen .viewport-canvas {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
.viewport-canvas:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.viewport-btn {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==================== Prefab Edit Mode Toolbar | 预制体编辑模式工具栏 ==================== */
|
||||
.viewport.prefab-edit-mode {
|
||||
border: 2px solid #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.viewport-prefab-toolbar {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 8px 16px;
|
||||
background: linear-gradient(135deg, rgba(30, 58, 95, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
|
||||
border: 1px solid #3b82f6;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.viewport-prefab-toolbar-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: #e0f2fe;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.viewport-prefab-toolbar-left svg {
|
||||
color: #38bdf8;
|
||||
}
|
||||
|
||||
.viewport-prefab-toolbar-left .prefab-name {
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.viewport-prefab-toolbar-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.viewport-prefab-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
|
||||
.viewport-prefab-btn.save {
|
||||
background: #22c55e;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.viewport-prefab-btn.save:hover {
|
||||
background: #16a34a;
|
||||
}
|
||||
|
||||
.viewport-prefab-btn.exit {
|
||||
background: #475569;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
|
||||
.viewport-prefab-btn.exit:hover {
|
||||
background: #64748b;
|
||||
}
|
||||
165
packages/editor/editor-app/src/styles/VirtualNodeInspector.css
Normal file
165
packages/editor/editor-app/src/styles/VirtualNodeInspector.css
Normal file
@@ -0,0 +1,165 @@
|
||||
/**
|
||||
* 虚拟节点检查器样式
|
||||
* Virtual Node Inspector styles
|
||||
*/
|
||||
|
||||
.virtual-node-inspector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
background-color: #262626;
|
||||
color: #ccc;
|
||||
font-size: 11px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.virtual-node-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 8px 12px;
|
||||
background: linear-gradient(to right, rgba(245, 158, 11, 0.1), transparent);
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
border-left: 3px solid #f59e0b;
|
||||
}
|
||||
|
||||
.virtual-node-header .header-icon {
|
||||
color: #f59e0b;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.virtual-node-header .header-info {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.virtual-node-header .header-name {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.virtual-node-header .header-type {
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
.virtual-node-header .header-badge {
|
||||
font-size: 9px;
|
||||
padding: 2px 6px;
|
||||
background: rgba(245, 158, 11, 0.2);
|
||||
border: 1px solid rgba(245, 158, 11, 0.4);
|
||||
border-radius: 3px;
|
||||
color: #f59e0b;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Read-only notice */
|
||||
.virtual-node-notice {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
color: #60a5fa;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
/* Section */
|
||||
.virtual-node-section {
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.virtual-node-section .section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: #2d2d2d;
|
||||
border-top: 1px solid #1a1a1a;
|
||||
border-bottom: 1px solid #1a1a1a;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
color: #888;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.virtual-node-section .section-content {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
/* Property Row */
|
||||
.virtual-node-property-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
.virtual-node-property-row:hover {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
}
|
||||
|
||||
.virtual-node-property-row .property-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
width: 100px;
|
||||
flex-shrink: 0;
|
||||
color: #999;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.virtual-node-property-row .property-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.virtual-node-property-row .property-value {
|
||||
flex: 1;
|
||||
color: #ccc;
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.virtual-node-property-row .property-value svg {
|
||||
color: #4ade80;
|
||||
}
|
||||
|
||||
.virtual-node-property-row .property-value svg.disabled {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Color swatch */
|
||||
.color-swatch-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.color-swatch {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.3);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.color-value {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
font-size: 10px;
|
||||
color: #888;
|
||||
}
|
||||
141
packages/editor/editor-app/src/styles/design-tokens.css
Normal file
141
packages/editor/editor-app/src/styles/design-tokens.css
Normal file
@@ -0,0 +1,141 @@
|
||||
:root {
|
||||
/* 颜色系统 - 背景 */
|
||||
--color-bg-base: #1e1e1e;
|
||||
--color-bg-elevated: #252526;
|
||||
--color-bg-overlay: #2d2d2d;
|
||||
--color-bg-input: #3c3c3c;
|
||||
--color-bg-inset: #181818;
|
||||
--color-bg-hover: #2a2d2e;
|
||||
--color-bg-active: #37373d;
|
||||
|
||||
/* 颜色系统 - 文本 */
|
||||
--color-text-primary: #cccccc;
|
||||
--color-text-secondary: #9d9d9d;
|
||||
--color-text-tertiary: #6a6a6a;
|
||||
--color-text-disabled: #aaaaaa;
|
||||
--color-text-inverse: #ffffff;
|
||||
|
||||
/* 颜色系统 - 边框 */
|
||||
--color-border-default: #3e3e42;
|
||||
--color-border-subtle: #2b2b2b;
|
||||
--color-border-strong: #505050;
|
||||
|
||||
/* 颜色系统 - 主题色 */
|
||||
--color-primary: #007acc;
|
||||
--color-primary-hover: #1177bb;
|
||||
--color-primary-active: #0e639c;
|
||||
--color-primary-subtle: rgba(0, 122, 204, 0.1);
|
||||
|
||||
/* 颜色系统 - 功能色 */
|
||||
--color-success: #4ec9b0;
|
||||
--color-warning: #ce9178;
|
||||
--color-error: #f48771;
|
||||
--color-danger: #f14c4c;
|
||||
--color-info: #4fc1ff;
|
||||
|
||||
/* 颜色系统 - 特殊 */
|
||||
--color-selected: #094771;
|
||||
--color-selected-hover: #0e639c;
|
||||
--color-focus: #007acc;
|
||||
--color-shadow: rgba(0, 0, 0, 0.5);
|
||||
|
||||
/* 字体系统 */
|
||||
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
||||
--font-family-mono: 'Consolas', 'Monaco', 'Courier New', monospace;
|
||||
|
||||
--font-size-xs: 11px;
|
||||
--font-size-sm: 12px;
|
||||
--font-size-base: 13px;
|
||||
--font-size-md: 14px;
|
||||
--font-size-lg: 16px;
|
||||
--font-size-xl: 18px;
|
||||
|
||||
--font-weight-normal: 400;
|
||||
--font-weight-medium: 500;
|
||||
--font-weight-semibold: 600;
|
||||
--font-weight-bold: 700;
|
||||
|
||||
--line-height-tight: 1.2;
|
||||
--line-height-base: 1.5;
|
||||
--line-height-relaxed: 1.75;
|
||||
|
||||
/* 间距系统 (4px 基准) */
|
||||
--spacing-xs: 4px;
|
||||
--spacing-sm: 8px;
|
||||
--spacing-md: 12px;
|
||||
--spacing-lg: 16px;
|
||||
--spacing-xl: 20px;
|
||||
--spacing-2xl: 24px;
|
||||
--spacing-3xl: 32px;
|
||||
--spacing-4xl: 40px;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-none: 0;
|
||||
--radius-sm: 3px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
--radius-xl: 8px;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
|
||||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
|
||||
--shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.4);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 0.1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-base: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-slow: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
--transition-bounce: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* Z-index 层级 / Z-index Layers
|
||||
* 层级规范 / Layer specification:
|
||||
* - base (1): 基础元素 / Base elements
|
||||
* - above (5): 略高于基础 / Slightly above base
|
||||
* - dropdown (100): 下拉菜单 / Dropdown menus
|
||||
* - sticky (200): 固定定位元素 / Sticky positioned elements
|
||||
* - header (300): 标题栏、工具栏 / Header, toolbar
|
||||
* - overlay (500): 遮罩层 / Overlay backdrop
|
||||
* - modal (600): 模态框 / Modal dialogs
|
||||
* - popover (700): 弹出框、上下文菜单 / Popover, context menu
|
||||
* - tooltip (800): 提示框 / Tooltips
|
||||
* - toast (900): 通知提示 / Toast notifications
|
||||
* - max (1000): 最高层级（启动画面等）/ Maximum (startup screen)
|
||||
*/
|
||||
--z-index-base: 1;
|
||||
--z-index-above: 5;
|
||||
--z-index-dropdown: 100;
|
||||
--z-index-sticky: 200;
|
||||
--z-index-header: 300;
|
||||
--z-index-overlay: 500;
|
||||
--z-index-modal: 600;
|
||||
--z-index-popover: 700;
|
||||
--z-index-tooltip: 800;
|
||||
--z-index-toast: 900;
|
||||
--z-index-max: 1000;
|
||||
|
||||
/* 尺寸 */
|
||||
--size-icon-sm: 14px;
|
||||
--size-icon-md: 16px;
|
||||
--size-icon-lg: 20px;
|
||||
--size-icon-xl: 24px;
|
||||
|
||||
--size-input-sm: 28px;
|
||||
--size-input-md: 32px;
|
||||
--size-input-lg: 36px;
|
||||
|
||||
--size-button-sm: 28px;
|
||||
--size-button-md: 32px;
|
||||
--size-button-lg: 36px;
|
||||
|
||||
/* 布局 */
|
||||
--layout-sidebar-min: 180px;
|
||||
--layout-sidebar-default: 250px;
|
||||
--layout-sidebar-max: 400px;
|
||||
--layout-header-height: 40px;
|
||||
--layout-footer-height: 24px;
|
||||
--layout-panel-header: 36px;
|
||||
}
|
||||
190
packages/editor/editor-app/src/styles/global.css
Normal file
190
packages/editor/editor-app/src/styles/global.css
Normal file
@@ -0,0 +1,190 @@
|
||||
@import './design-tokens.css';
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
#root {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-family-base);
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--color-text-primary);
|
||||
background-color: var(--color-bg-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
/* 禁用全局文本选择，原生应用风格 | Disable global text selection for native app feel */
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
/* 输入框允许文本选择 | Allow text selection in inputs */
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-focus);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-inverse);
|
||||
}
|
||||
|
||||
/* 允许特定元素文本选择 | Allow text selection for specific elements */
|
||||
.selectable,
|
||||
pre,
|
||||
code,
|
||||
.code-preview-content,
|
||||
.file-preview-content,
|
||||
.output-log-content,
|
||||
.json-viewer {
|
||||
user-select: text;
|
||||
-webkit-user-select: text;
|
||||
}
|
||||
|
||||
/* 全局滚动条样式 */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 4px;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:active {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.scrollable {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
border-radius: 5px;
|
||||
border: 2px solid transparent;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.scrollable::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideDown {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(8px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scaleIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.animate-fadeIn {
|
||||
animation: fadeIn var(--transition-base);
|
||||
}
|
||||
|
||||
.animate-slideDown {
|
||||
animation: slideDown var(--transition-base);
|
||||
}
|
||||
|
||||
.animate-slideUp {
|
||||
animation: slideUp var(--transition-base);
|
||||
}
|
||||
|
||||
.animate-scaleIn {
|
||||
animation: scaleIn var(--transition-base);
|
||||
}
|
||||
|
||||
.animate-spin {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
19
packages/editor/editor-app/src/styles/index.css
Normal file
19
packages/editor/editor-app/src/styles/index.css
Normal file
@@ -0,0 +1,19 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#root {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
Reference in New Issue
Block a user