visualifyjs 2.5.3-2.dev → 3.0.0

package/src/editor/styles/editor.css

@@ -0,0 +1,637 @@
+/**
+ * Visualify Editor Styles
+ */
+
+/* ===== Base Styles ===== */
+.visualify-editor {
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+	background-color: #f5f5f5;
+}
+
+.editor-loading {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 100vh;
+}
+
+/* ===== Toolbar Styles ===== */
+.editor-toolbar {
+	background-color: #fff;
+	border-bottom: 1px solid #dee2e6;
+	padding: 0.5rem 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 1rem;
+	flex-shrink: 0;
+}
+
+.editor-toolbar .btn-group {
+	gap: 0.25rem;
+}
+
+.editor-toolbar .btn {
+	padding: 0.375rem 0.75rem;
+	font-size: 0.875rem;
+}
+
+.editor-toolbar .btn svg {
+	margin-right: 0.25rem;
+}
+
+.editor-toolbar-title {
+	font-weight: 600;
+	font-size: 1.125rem;
+	color: #333;
+}
+
+/* ===== Main Layout ===== */
+.editor-main {
+	display: flex;
+	flex: 1;
+	overflow: hidden;
+}
+
+/* ===== Sidebar Styles ===== */
+.editor-sidebar {
+	width: 240px;
+	background-color: #fff;
+	border-right: 1px solid #dee2e6;
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	flex-shrink: 0;
+}
+
+.editor-sidebar-header {
+	padding: 1rem;
+	border-bottom: 1px solid #dee2e6;
+	font-weight: 600;
+	font-size: 0.875rem;
+	color: #495057;
+	text-transform: uppercase;
+	letter-spacing: 0.025em;
+}
+
+.chart-types-list {
+	padding: 0.5rem;
+}
+
+.chart-type-item {
+	display: flex;
+	align-items: center;
+	gap: 0.75rem;
+	padding: 0.75rem;
+	margin-bottom: 0.25rem;
+	border-radius: 0.375rem;
+	cursor: grab;
+	transition: all 0.15s ease;
+	background-color: #f8f9fa;
+	border: 1px solid transparent;
+}
+
+.chart-type-item:hover {
+	background-color: #e9ecef;
+	border-color: #dee2e6;
+}
+
+.chart-type-item:active {
+	cursor: grabbing;
+}
+
+.chart-type-item.dragging {
+	opacity: 0.5;
+}
+
+.chart-type-icon {
+	width: 24px;
+	height: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-size: 1rem;
+}
+
+.chart-type-label {
+	font-size: 0.875rem;
+	color: #333;
+}
+
+/* ===== Canvas Styles ===== */
+.editor-canvas {
+	flex: 1;
+	background-color: #e9ecef;
+	overflow: auto;
+	padding: 1.5rem;
+}
+
+.editor-canvas-content {
+	background-color: #fff;
+	border-radius: 0.5rem;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	min-height: 100%;
+	padding: 1.5rem;
+}
+
+.editor-canvas-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	min-height: 400px;
+	color: #6c757d;
+	text-align: center;
+}
+
+.editor-canvas-empty svg {
+	margin-bottom: 1rem;
+	opacity: 0.5;
+}
+
+.editor-canvas-empty h4 {
+	font-weight: 400;
+	margin-bottom: 0.5rem;
+}
+
+.editor-canvas-empty p {
+	font-size: 0.875rem;
+}
+
+/* ===== Chart Canvas Item ===== */
+.chart-canvas-item {
+	position: relative;
+	background-color: #fff;
+	border: 2px solid #dee2e6;
+	border-radius: 0.5rem;
+	padding: 1rem;
+	margin-bottom: 1rem;
+	transition: all 0.15s ease;
+}
+
+.chart-canvas-item:hover {
+	border-color: #adb5bd;
+}
+
+.chart-canvas-item.selected {
+	border-color: #0d6efd;
+	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
+}
+
+.chart-canvas-item.drag-over {
+	border-color: #198754;
+	background-color: rgba(25, 135, 84, 0.05);
+}
+
+.chart-canvas-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 0.75rem;
+	padding-bottom: 0.5rem;
+	border-bottom: 1px solid #e9ecef;
+}
+
+.chart-canvas-title {
+	font-weight: 600;
+	font-size: 0.875rem;
+	color: #333;
+}
+
+.chart-canvas-actions {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.chart-canvas-actions .btn {
+	padding: 0.25rem 0.5rem;
+	font-size: 0.75rem;
+}
+
+.chart-canvas-preview {
+	background-color: #f8f9fa;
+	border-radius: 0.375rem;
+	min-height: 200px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+/* ===== Property Panel Styles ===== */
+.editor-property-panel {
+	width: 320px;
+	background-color: #fff;
+	border-left: 1px solid #dee2e6;
+	display: flex;
+	flex-direction: column;
+	overflow-y: auto;
+	flex-shrink: 0;
+}
+
+.property-panel-header {
+	padding: 1rem;
+	border-bottom: 1px solid #dee2e6;
+	font-weight: 600;
+	font-size: 0.875rem;
+	color: #495057;
+}
+
+.property-panel-content {
+	padding: 1rem;
+	flex: 1;
+}
+
+.property-panel-empty {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 2rem;
+	color: #6c757d;
+	text-align: center;
+}
+
+.property-group {
+	margin-bottom: 1.5rem;
+}
+
+.property-group-title {
+	font-weight: 600;
+	font-size: 0.75rem;
+	color: #6c757d;
+	text-transform: uppercase;
+	letter-spacing: 0.05em;
+	margin-bottom: 0.75rem;
+}
+
+.property-field {
+	margin-bottom: 1rem;
+}
+
+.property-field label {
+	display: block;
+	font-size: 0.875rem;
+	font-weight: 500;
+	color: #333;
+	margin-bottom: 0.375rem;
+}
+
+.property-field input,
+.property-field select,
+.property-field textarea {
+	width: 100%;
+	padding: 0.5rem 0.75rem;
+	font-size: 0.875rem;
+	border: 1px solid #ced4da;
+	border-radius: 0.375rem;
+	transition: border-color 0.15s ease, box-shadow 0.15s ease;
+}
+
+.property-field input:focus,
+.property-field select:focus,
+.property-field textarea:focus {
+	outline: none;
+	border-color: #86b7fe;
+	box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
+}
+
+.property-field .form-text {
+	font-size: 0.75rem;
+	color: #6c757d;
+	margin-top: 0.25rem;
+}
+
+/* ===== Data Editor Styles ===== */
+.data-editor {
+	border: 1px solid #dee2e6;
+	border-radius: 0.375rem;
+	overflow: hidden;
+}
+
+.data-editor-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.5rem 0.75rem;
+	background-color: #f8f9fa;
+	border-bottom: 1px solid #dee2e6;
+}
+
+.data-editor-tabs {
+	display: flex;
+	gap: 0.25rem;
+}
+
+.data-editor-tab {
+	padding: 0.25rem 0.75rem;
+	font-size: 0.75rem;
+	border: none;
+	background: none;
+	color: #6c757d;
+	cursor: pointer;
+	border-radius: 0.25rem;
+	transition: all 0.15s ease;
+}
+
+.data-editor-tab:hover {
+	background-color: #e9ecef;
+	color: #333;
+}
+
+.data-editor-tab.active {
+	background-color: #0d6efd;
+	color: #fff;
+}
+
+.data-editor-content {
+	padding: 0.75rem;
+}
+
+.data-editor-textarea {
+	width: 100%;
+	min-height: 150px;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	padding: 0.75rem;
+	border: 1px solid #ced4da;
+	border-radius: 0.375rem;
+	resize: vertical;
+}
+
+/* ===== Preview Styles ===== */
+.preview-container {
+	background-color: #fff;
+	border-radius: 0.5rem;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	overflow: hidden;
+}
+
+.preview-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0.75rem 1rem;
+	background-color: #f8f9fa;
+	border-bottom: 1px solid #dee2e6;
+}
+
+.preview-title {
+	font-weight: 600;
+	font-size: 0.875rem;
+}
+
+.preview-actions {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.preview-content {
+	padding: 1rem;
+	min-height: 300px;
+}
+
+.preview-error {
+	background-color: #f8d7da;
+	color: #842029;
+	padding: 1rem;
+	border-radius: 0.375rem;
+	margin: 1rem;
+}
+
+.preview-error-title {
+	font-weight: 600;
+	margin-bottom: 0.5rem;
+}
+
+.preview-error-message {
+	font-family: monospace;
+	font-size: 0.75rem;
+	white-space: pre-wrap;
+}
+
+/* ===== Status Bar Styles ===== */
+.editor-status-bar {
+	background-color: #fff;
+	border-top: 1px solid #dee2e6;
+	padding: 0.375rem 1rem;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	font-size: 0.75rem;
+	color: #6c757d;
+	flex-shrink: 0;
+}
+
+.status-bar-left,
+.status-bar-right {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.status-indicator {
+	display: flex;
+	align-items: center;
+	gap: 0.375rem;
+}
+
+.status-indicator-dot {
+	width: 8px;
+	height: 8px;
+	border-radius: 50%;
+}
+
+.status-indicator-dot.success {
+	background-color: #198754;
+}
+
+.status-indicator-dot.warning {
+	background-color: #ffc107;
+}
+
+.status-indicator-dot.error {
+	background-color: #dc3545;
+}
+
+/* ===== Modal Styles ===== */
+.editor-modal .modal-header {
+	background-color: #f8f9fa;
+}
+
+.editor-modal .modal-title {
+	font-size: 1rem;
+	font-weight: 600;
+}
+
+/* ===== JSON Viewer Styles ===== */
+.json-viewer {
+	background-color: #f8f9fa;
+	border: 1px solid #dee2e6;
+	border-radius: 0.375rem;
+	padding: 1rem;
+	font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
+	font-size: 0.75rem;
+	line-height: 1.5;
+	overflow-x: auto;
+	white-space: pre-wrap;
+	word-break: break-word;
+}
+
+.json-key {
+	color: #d73a49;
+}
+
+.json-string {
+	color: #032f62;
+}
+
+.json-number {
+	color: #005cc5;
+}
+
+.json-boolean {
+	color: #005cc5;
+}
+
+.json-null {
+	color: #6f42c1;
+}
+
+/* ===== Responsive Styles ===== */
+@media (max-width: 1200px) {
+	.editor-sidebar {
+		width: 200px;
+	}
+
+	.editor-property-panel {
+		width: 280px;
+	}
+}
+
+@media (max-width: 992px) {
+	.editor-sidebar {
+		width: 180px;
+	}
+
+	.editor-property-panel {
+		width: 260px;
+	}
+
+	.chart-type-label {
+		font-size: 0.75rem;
+	}
+}
+
+@media (max-width: 768px) {
+	.editor-main {
+		flex-direction: column;
+	}
+
+	.editor-sidebar,
+	.editor-property-panel {
+		width: 100%;
+		height: auto;
+		max-height: 200px;
+	}
+
+	.editor-canvas {
+		order: 2;
+	}
+
+	.editor-sidebar {
+		order: 1;
+		border-right: none;
+		border-bottom: 1px solid #dee2e6;
+	}
+
+	.editor-property-panel {
+		order: 3;
+		border-left: none;
+		border-top: 1px solid #dee2e6;
+	}
+}
+
+/* ===== Drag and Drop Styles ===== */
+.drag-preview {
+	position: fixed;
+	pointer-events: none;
+	z-index: 9999;
+	opacity: 0.8;
+	transform: rotate(-5deg);
+}
+
+.drop-zone {
+	border: 2px dashed #dee2e6;
+	border-radius: 0.5rem;
+	padding: 2rem;
+	text-align: center;
+	transition: all 0.15s ease;
+}
+
+.drop-zone.drag-over {
+	border-color: #0d6efd;
+	background-color: rgba(13, 110, 253, 0.05);
+}
+
+/* ===== Animation Styles ===== */
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes slideIn {
+	from {
+		transform: translateX(-10px);
+		opacity: 0;
+	}
+
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
+
+.chart-canvas-item {
+	animation: slideIn 0.2s ease;
+}
+
+.toast {
+	animation: fadeIn 0.2s ease;
+}
+
+/* ===== Scrollbar Styles ===== */
+.editor-sidebar::-webkit-scrollbar,
+.editor-property-panel::-webkit-scrollbar,
+.editor-canvas::-webkit-scrollbar {
+	width: 6px;
+	height: 6px;
+}
+
+.editor-sidebar::-webkit-scrollbar-track,
+.editor-property-panel::-webkit-scrollbar-track,
+.editor-canvas::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+.editor-sidebar::-webkit-scrollbar-thumb,
+.editor-property-panel::-webkit-scrollbar-thumb,
+.editor-canvas::-webkit-scrollbar-thumb {
+	background-color: #adb5bd;
+	border-radius: 3px;
+}
+
+.editor-sidebar::-webkit-scrollbar-thumb:hover,
+.editor-property-panel::-webkit-scrollbar-thumb:hover,
+.editor-canvas::-webkit-scrollbar-thumb:hover {
+	background-color: #6c757d;
+}