claude-mermaid

/** * Shared CSS - Reusable components for all pages * Following existing design system from style.css */ /* ===== CSS Variables ===== */ :root { --bg-primary: #1a1a1a; --bg-secondary: rgba(0, 0, 0, 0.9); --bg-card: #2a2a2a; --bg-hover: #3a3a3a; --text-primary: white; --text-secondary: rgba(255, 255, 255, 0.7); --text-tertiary: rgba(255, 255, 255, 0.5); --border-color: rgba(255, 255, 255, 0.1); --border-color-hover: rgba(255, 255, 255, 0.2); --accent-color: #4caf50; --accent-hover: #45a049; --danger-color: #f44336; --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --border-radius-sm: 4px; --border-radius-md: 8px; --border-radius-lg: 12px; --transition-fast: 0.2s; --transition-medium: 0.3s; } /* ===== Base Styles ===== */ * { box-sizing: border-box; } body { margin: 0; padding: 0; background: var(--bg-primary); font-family: var(--font-family); color: var(--text-primary); line-height: 1.5; } /* ===== Navigation ===== */ .nav { height: 48px; padding: 0 var(--spacing-md); background: var(--bg-secondary); display: flex; align-items: center; gap: var(--spacing-md); border-bottom: 1px solid var(--border-color); } .nav-link { color: var(--text-secondary); text-decoration: none; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); transition: all var(--transition-fast); font-size: 14px; font-weight: 500; } .nav-link:hover { color: var(--text-primary); background: var(--bg-card); } .nav-link.active { color: var(--accent-color); background: var(--bg-card); } /* ===== Buttons ===== */ .btn { background: transparent; border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; font-size: 14px; padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); transition: all var(--transition-fast); font-family: var(--font-family); } .btn:hover { border-color: var(--border-color-hover); background: var(--bg-hover); } .btn:active { transform: scale(0.98); } .btn-primary { background: var(--accent-color); border-color: var(--accent-color); color: white; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-icon { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 18px; padding: var(--spacing-sm); transition: all var(--transition-fast); } .btn-icon:hover { color: var(--text-primary); transform: scale(1.1); } /* ===== Input Fields ===== */ .input { background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); padding: var(--spacing-sm) var(--spacing-md); border-radius: var(--border-radius-sm); font-size: 14px; font-family: var(--font-family); transition: all var(--transition-fast); width: 100%; } .input:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2); } .input::placeholder { color: var(--text-tertiary); } /* ===== Search Bar ===== */ .search-bar { position: relative; width: 100%; max-width: 600px; } .search-input { padding-left: var(--spacing-xl); } .search-icon { position: absolute; left: var(--spacing-md); top: 50%; transform: translateY(-50%); color: var(--text-tertiary); pointer-events: none; } /* ===== Cards ===== */ .card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius-md); padding: var(--spacing-md); transition: all var(--transition-fast); } .card:hover { border-color: var(--border-color-hover); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .card-title { margin: 0 0 var(--spacing-sm) 0; font-size: 16px; font-weight: 600; color: var(--text-primary); } .card-description { margin: 0; font-size: 14px; color: var(--text-secondary); } /* ===== Grid Layouts ===== */ .grid { display: grid; gap: var(--spacing-lg); } .grid-2 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); } .grid-4 { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } /* ===== Container ===== */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: var(--spacing-lg); } /* ===== Status Indicators ===== */ .status-indicator { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-color); } .status-indicator.disconnected { background: var(--danger-color); } /* ===== Badges ===== */ .badge { display: inline-block; padding: 2px var(--spacing-sm); background: var(--bg-hover); border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); font-size: 12px; color: var(--text-secondary); } /* ===== Empty State ===== */ .empty-state { text-align: center; padding: var(--spacing-xl) var(--spacing-lg); color: var(--text-tertiary); } .empty-state-icon { font-size: 48px; margin-bottom: var(--spacing-md); opacity: 0.5; } .empty-state-title { font-size: 18px; font-weight: 600; margin: 0 0 var(--spacing-sm) 0; color: var(--text-secondary); } .empty-state-description { font-size: 14px; margin: 0; } /* ===== Loading State ===== */ .loading { display: flex; align-items: center; justify-content: center; padding: var(--spacing-xl); } .loading-spinner { width: 32px; height: 32px; border: 3px solid var(--border-color); border-top-color: var(--accent-color); border-radius: 50%; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ===== Footer ===== */ .footer { padding: var(--spacing-md); text-align: center; font-size: 12px; color: var(--text-tertiary); border-top: 1px solid var(--border-color); margin-top: auto; } .footer p { margin: 0; } /* ===== Utility Classes ===== */ .text-center { text-align: center; } .text-muted { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .mt-sm { margin-top: var(--spacing-sm); } .mt-md { margin-top: var(--spacing-md); } .mt-lg { margin-top: var(--spacing-lg); } .mb-sm { margin-bottom: var(--spacing-sm); } .mb-md { margin-bottom: var(--spacing-md); } .mb-lg { margin-bottom: var(--spacing-lg); } .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .gap-sm { gap: var(--spacing-sm); } .gap-md { gap: var(--spacing-md); } .gap-lg { gap: var(--spacing-lg); }