First commit

public/css/config.css

@@ -0,0 +1,157 @@
+/**
+ * CSS Configuration - Theme Variables
+ * Central configuration for all colors, sizes, and design tokens
+ */
+
+:root {
+  /* === Colors === */
+  /* Primary */
+  --color-primary: #4A90E2;
+  --color-primary-dark: #357ABD;
+  --color-primary-light: #e3f2fd;
+  --color-primary-hover: #f0f7ff;
+
+  /* Secondary */
+  --color-secondary: #f5f5f5;
+  --color-secondary-dark: #e0e0e0;
+
+  /* Success, Danger, Warning */
+  --color-success: #4CAF50;
+  --color-success-dark: #45a049;
+  --color-danger: #d32f2f;
+  --color-danger-hover: #b71c1c;
+  --color-warning: #ff9800;
+
+  /* Grays */
+  --color-gray-100: #f9f9f9;
+  --color-gray-200: #f5f5f5;
+  --color-gray-300: #e0e0e0;
+  --color-gray-400: #d0d0d0;
+  --color-gray-500: #999;
+  --color-gray-600: #666;
+  --color-gray-700: #333;
+
+  /* Text */
+  --color-text-primary: #333;
+  --color-text-secondary: #666;
+  --color-text-tertiary: #999;
+  --color-text-inverse: #fff;
+
+  /* Backgrounds */
+  --color-bg-canvas: #f5f5f5;
+  --color-bg-white: #fff;
+  --color-bg-modal-overlay: rgba(0, 0, 0, 0.5);
+  --color-bg-hover: #f5f5f5;
+  --color-bg-selection: #e3f2fd;
+
+  /* Borders */
+  --color-border: #e0e0e0;
+  --color-border-dark: #d0d0d0;
+  --color-border-light: #f0f0f0;
+
+  /* === Spacing === */
+  --spacing-xs: 4px;
+  --spacing-sm: 8px;
+  --spacing-md: 12px;
+  --spacing-lg: 16px;
+  --spacing-xl: 20px;
+  --spacing-2xl: 24px;
+  --spacing-3xl: 32px;
+
+  /* === Typography === */
+  --font-family-primary: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+  --font-family-mono: 'Courier New', monospace;
+
+  --font-size-xs: 11px;
+  --font-size-sm: 13px;
+  --font-size-md: 14px;
+  --font-size-lg: 16px;
+  --font-size-xl: 18px;
+  --font-size-2xl: 24px;
+
+  --font-weight-normal: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+
+  --line-height-tight: 1.2;
+  --line-height-normal: 1.5;
+  --line-height-relaxed: 1.75;
+
+  /* === Border Radius === */
+  --radius-sm: 3px;
+  --radius-md: 4px;
+  --radius-lg: 5px;
+  --radius-xl: 6px;
+  --radius-2xl: 8px;
+  --radius-full: 9999px;
+
+  /* === Shadows === */
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.1);
+  --shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
+  --shadow-xl: 0 8px 24px rgba(0, 0, 0, 0.2);
+
+  /* === Transitions === */
+  --transition-fast: 0.15s ease;
+  --transition-normal: 0.2s ease;
+  --transition-slow: 0.3s ease;
+
+  /* === Z-Index === */
+  --z-base: 1;
+  --z-dropdown: 100;
+  --z-sticky: 200;
+  --z-fixed: 300;
+  --z-modal-backdrop: 1000;
+  --z-modal: 2000;
+  --z-popover: 3000;
+  --z-tooltip: 4000;
+
+  /* === Layout === */
+  --toolbar-height: 50px;
+  --table-pane-height: 300px;
+  --table-pane-min-height: 150px;
+  --resize-handle-height: 6px;
+
+  /* === Component Specific === */
+  /* Buttons */
+  --btn-padding-sm: 6px 12px;
+  --btn-padding-md: 10px 20px;
+  --btn-padding-lg: 12px 24px;
+
+  /* Inputs */
+  --input-padding: 10px 12px;
+  --input-border-width: 1px;
+  --input-height: 38px;
+
+  /* Modal */
+  --modal-width: 600px;
+  --modal-width-lg: 800px;
+  --modal-padding: 20px;
+
+  /* Context Menu */
+  --context-menu-width: 200px;
+  --context-menu-item-padding: 10px 20px;
+
+  /* Table */
+  --table-header-height: 40px;
+  --table-row-height: 35px;
+}
+
+/* === Dark Mode Support (Future) === */
+/* @media (prefers-color-scheme: dark) {
+  :root {
+    --color-primary: #64B5F6;
+    --color-bg-canvas: #1a1a1a;
+    --color-bg-white: #2a2a2a;
+    --color-text-primary: #e0e0e0;
+    --color-border: #444;
+  }
+} */
+
+/* === Responsive Breakpoints === */
+:root {
+  --breakpoint-mobile: 768px;
+  --breakpoint-tablet: 1024px;
+  --breakpoint-desktop: 1280px;
+}

public/css/style.css

@@ -0,0 +1,642 @@
+/**
+ * Datacenter Designer - Main Styles
+ * Using CSS variables from config.css for maintainability
+ */
+
+@import url('config.css');
+
+/* === Base Styles === */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family-primary);
+  overflow: hidden;
+  background-color: var(--color-bg-canvas);
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* === Toolbar === */
+.toolbar {
+  background-color: var(--color-gray-200);
+  border-bottom: 1px solid var(--color-border);
+  padding: var(--spacing-md) var(--spacing-xl);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-lg);
+  height: var(--toolbar-height);
+  flex-shrink: 0;
+}
+
+.toolbar-spacer {
+  flex: 1;
+}
+
+.toolbar-info, .toolbar-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+.project-selector {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+  margin-right: var(--spacing-xl);
+}
+
+/* === View Switchers === */
+.view-switcher-group {
+  display: flex;
+  gap: var(--spacing-lg);
+  align-items: center;
+}
+
+.view-switcher {
+  display: flex;
+  gap: 0;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  background-color: var(--color-bg-white);
+}
+
+.btn-view {
+  padding: var(--spacing-xs) var(--spacing-lg);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background-color: var(--color-bg-white);
+  color: var(--color-text-secondary);
+  border: none;
+  border-right: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.btn-view:last-child {
+  border-right: none;
+}
+
+.btn-view:hover:not(.active) {
+  background-color: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.btn-view.active {
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* === Buttons === */
+.btn {
+  padding: var(--btn-padding-md);
+  border: none;
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.btn-primary {
+  background-color: var(--color-primary);
+  color: var(--color-text-inverse);
+}
+
+.btn-primary:hover {
+  background-color: var(--color-primary-dark);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-secondary {
+  background-color: var(--color-gray-200);
+  color: var(--color-text-primary);
+}
+
+.btn-secondary:hover {
+  background-color: var(--color-border);
+}
+
+.btn-sm {
+  padding: var(--btn-padding-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background-color: var(--color-bg-white);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-normal);
+}
+
+.btn-sm:hover {
+  background-color: var(--color-bg-hover);
+  border-color: var(--color-primary);
+}
+
+.btn-danger {
+  background-color: var(--color-bg-white);
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.btn-danger:hover {
+  background-color: var(--color-danger);
+  color: var(--color-text-inverse);
+}
+
+.btn-success {
+  background-color: var(--color-success);
+  color: var(--color-text-inverse);
+  border-color: var(--color-success);
+}
+
+.btn-success:hover {
+  background-color: var(--color-success-dark);
+}
+
+/* === Forms === */
+.form-select {
+  padding: var(--spacing-xs) var(--spacing-md);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-sm);
+  background-color: var(--color-bg-white);
+  cursor: pointer;
+  min-width: 200px;
+}
+
+.form-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+.form-group {
+  margin-bottom: var(--spacing-xl);
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: var(--spacing-sm);
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-primary);
+}
+
+.form-input {
+  width: 100%;
+  padding: var(--input-padding);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  font-size: var(--font-size-md);
+  transition: border-color var(--transition-fast);
+  font-family: inherit;
+}
+
+.form-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+}
+
+textarea.form-input {
+  resize: vertical;
+  min-height: 80px;
+}
+
+.zoom-input {
+  width: 60px;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background-color: var(--color-bg-white);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  text-align: center;
+  transition: all var(--transition-fast);
+}
+
+.zoom-input:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  background-color: var(--color-primary-hover);
+}
+
+.zoom-unit {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  margin-left: -8px;
+}
+
+/* === Main Content Layout === */
+.main-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+
+.canvas-pane {
+  flex: 1;
+  overflow: hidden;
+  position: relative;
+}
+
+#canvasWrapper {
+  width: 100%;
+  height: 100%;
+}
+
+.resize-handle {
+  height: var(--resize-handle-height);
+  background-color: var(--color-border);
+  cursor: ns-resize;
+  position: relative;
+  flex-shrink: 0;
+  transition: background-color var(--transition-fast);
+}
+
+.resize-handle:hover {
+  background-color: var(--color-primary);
+}
+
+.resize-handle.hidden {
+  display: none;
+}
+
+.table-pane {
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-white);
+  overflow: hidden;
+  height: var(--table-pane-height);
+}
+
+.table-pane.hidden {
+  display: none;
+}
+
+.table-toolbar {
+  padding: var(--spacing-md) var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  background-color: var(--color-gray-100);
+  display: flex;
+  gap: var(--spacing-md);
+  align-items: center;
+  flex-shrink: 0;
+}
+
+#tableContent {
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+}
+
+/* === Context Menu === */
+.context-menu {
+  position: fixed;
+  background-color: var(--color-bg-white);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-lg);
+  min-width: var(--context-menu-width);
+  z-index: var(--z-modal-backdrop);
+  overflow: hidden;
+}
+
+.context-menu.hidden {
+  display: none;
+}
+
+.context-menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 4px 0;
+}
+
+.context-menu li {
+  padding: 6px 16px;
+  cursor: pointer;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-primary);
+  transition: background-color var(--transition-fast);
+}
+
+.context-menu li:hover {
+  background-color: var(--color-bg-hover);
+}
+
+.context-menu .menu-header {
+  cursor: default;
+  pointer-events: none;
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-tertiary);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 8px 16px 4px 16px;
+}
+
+.context-menu .menu-header:hover {
+  background-color: transparent;
+}
+
+.context-menu .divider {
+  height: 1px;
+  background-color: var(--color-border);
+  margin: 4px 0;
+  padding: 0;
+  cursor: default;
+  pointer-events: none;
+}
+
+.context-menu .divider:hover {
+  background-color: var(--color-border);
+}
+
+/* === Modals === */
+.modal {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--color-bg-modal-overlay);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+}
+
+.modal.hidden {
+  display: none;
+}
+
+.modal-content {
+  background-color: var(--color-bg-white);
+  border-radius: var(--radius-2xl);
+  min-width: 400px;
+  max-width: var(--modal-width);
+  max-height: 80vh;
+  display: flex;
+  flex-direction: column;
+  box-shadow: var(--shadow-xl);
+}
+
+.modal-content.modal-large {
+  max-width: var(--modal-width-lg);
+  min-width: 600px;
+}
+
+.modal-header {
+  padding: var(--modal-padding);
+  border-bottom: 1px solid var(--color-border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-header h3 {
+  font-size: var(--font-size-xl);
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.modal-close {
+  background: none;
+  border: none;
+  font-size: var(--font-size-2xl);
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+}
+
+.modal-close:hover {
+  background-color: var(--color-bg-hover);
+  color: var(--color-text-primary);
+}
+
+.modal-body {
+  padding: var(--modal-padding);
+  overflow-y: auto;
+}
+
+.modal-footer {
+  margin-top: var(--spacing-xl);
+  display: flex;
+  gap: var(--spacing-md);
+  justify-content: flex-end;
+}
+
+/* === Scrollbars === */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: var(--color-gray-100);
+}
+
+::-webkit-scrollbar-thumb {
+  background: var(--color-gray-400);
+  border-radius: var(--radius-md);
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: var(--color-gray-500);
+}
+
+/* === Projects Modal === */
+.projects-toolbar {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+  padding-bottom: var(--spacing-lg);
+  border-bottom: 1px solid var(--color-border);
+  margin-bottom: var(--spacing-lg);
+}
+
+.projects-toolbar .btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.projects-toolbar .btn svg {
+  flex-shrink: 0;
+}
+
+.projects-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  max-height: 50vh;
+  overflow-y: auto;
+}
+
+.project-card {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-lg);
+  background-color: var(--color-bg-white);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  transition: all var(--transition-fast);
+  gap: var(--spacing-lg);
+}
+
+.project-card:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--shadow-sm);
+}
+
+.project-card.active {
+  background-color: var(--color-primary-hover);
+  border-color: var(--color-primary);
+}
+
+.project-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.project-name {
+  font-size: var(--font-size-md);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
+  margin-bottom: 4px;
+}
+
+.project-description {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  margin-bottom: 4px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.project-meta {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+.project-actions {
+  display: flex;
+  gap: var(--spacing-sm);
+  flex-shrink: 0;
+}
+
+.btn-icon {
+  padding: 6px 12px;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  background-color: var(--color-bg-white);
+  color: var(--color-text-primary);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  white-space: nowrap;
+}
+
+.btn-icon:hover:not(:disabled) {
+  background-color: var(--color-bg-hover);
+  border-color: var(--color-primary);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-sm);
+}
+
+.btn-icon:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: var(--color-gray-200);
+}
+
+.btn-icon.btn-success {
+  background-color: var(--color-success);
+  color: var(--color-text-inverse);
+  border-color: var(--color-success);
+}
+
+.btn-icon.btn-success:hover {
+  background-color: var(--color-success-dark);
+  border-color: var(--color-success-dark);
+}
+
+.btn-icon.btn-danger {
+  background-color: var(--color-bg-white);
+  color: var(--color-danger);
+  border-color: var(--color-danger);
+}
+
+.btn-icon.btn-danger:hover {
+  background-color: var(--color-danger);
+  color: var(--color-text-inverse);
+}
+
+/* === Utility Classes === */
+.hidden {
+  display: none !important;
+}
+
+/* === Responsive Design === */
+@media (max-width: 768px) {
+  .toolbar {
+    flex-wrap: wrap;
+    height: auto;
+    padding: var(--spacing-sm);
+  }
+
+  .view-switcher-group {
+    width: 100%;
+    justify-content: space-between;
+  }
+
+  .modal-content {
+    min-width: 90%;
+    max-width: 90%;
+  }
+
+  .btn-sm {
+    font-size: var(--font-size-xs);
+    padding: var(--spacing-xs) var(--spacing-sm);
+  }
+}
+
+@media (max-width: 1024px) {
+  .table-pane {
+    height: 250px;
+  }
+}
+
+/* === ag-Grid Customization === */
+.ag-theme-alpine {
+  --ag-header-height: var(--table-header-height);
+  --ag-row-height: var(--table-row-height);
+  --ag-font-size: var(--font-size-sm);
+  --ag-header-foreground-color: var(--color-text-primary);
+  --ag-header-background-color: var(--color-gray-200);
+  --ag-odd-row-background-color: var(--color-gray-100);
+  --ag-row-hover-color: var(--color-primary-hover);
+  --ag-selected-row-background-color: var(--color-bg-selection);
+}