@rashidazarang/airtable-mcp 1.6.0 → 2.1.0

package/airtable-clipper/releases/v1.0.0/styles/content.css

@@ -0,0 +1,229 @@
+/* Airtable Clipper Content Script Styles */
+
+/* Floating Action Button */
+#airtable-clipper-fab {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+}
+
+#airtable-clipper-fab .fab-main {
+  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+}
+
+#airtable-clipper-fab .fab-main:hover {
+  transform: scale(1.1) rotate(5deg);
+}
+
+#airtable-clipper-fab .fab-main:active {
+  transform: scale(0.95);
+}
+
+/* Selection Toolbar */
+#airtable-clipper-selection-toolbar {
+  animation: fadeInUp 0.2s ease;
+}
+
+#airtable-clipper-selection-toolbar .selection-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+/* Bulk Mode Overlay */
+#airtable-clipper-bulk-overlay {
+  animation: slideDown 0.3s ease;
+}
+
+#airtable-clipper-bulk-overlay .bulk-btn:hover {
+  background: rgba(255, 255, 255, 0.3);
+  transform: translateY(-1px);
+}
+
+/* Bulk Selection Highlights */
+.airtable-clipper-selected {
+  background: rgba(102, 126, 234, 0.1) !important;
+  border: 2px solid #667eea !important;
+  border-radius: 4px;
+  transition: all 0.2s ease;
+}
+
+.airtable-clipper-selectable:hover {
+  background: rgba(102, 126, 234, 0.05) !important;
+  cursor: pointer;
+}
+
+/* Notifications */
+#airtable-clipper-notification {
+  animation: slideInRight 0.3s ease;
+  backdrop-filter: blur(10px);
+}
+
+/* Animations */
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.7;
+  }
+}
+
+/* Loading States */
+.airtable-clipper-loading {
+  position: relative;
+  opacity: 0.7;
+}
+
+.airtable-clipper-loading::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 20px;
+  height: 20px;
+  margin: -10px 0 0 -10px;
+  border: 2px solid #667eea;
+  border-top: 2px solid transparent;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Site-specific enhancements */
+
+/* LinkedIn */
+body[class*="linkedin"] .airtable-clipper-selected,
+[data-test-id*="search-result"] .airtable-clipper-selected {
+  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
+}
+
+/* GitHub */
+.repository-content .airtable-clipper-selected,
+.Box .airtable-clipper-selected {
+  border-radius: 6px;
+}
+
+/* Stack Overflow */
+.question-summary .airtable-clipper-selected,
+.answer .airtable-clipper-selected {
+  border-left: 4px solid #667eea;
+  padding-left: 8px;
+}
+
+/* Medium */
+article .airtable-clipper-selected {
+  border-radius: 8px;
+  padding: 8px;
+  margin: 4px 0;
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  #airtable-clipper-fab {
+    bottom: 80px; /* Above mobile browser UI */
+    right: 16px;
+    z-index: 10000;
+  }
+  
+  #airtable-clipper-fab .fab-main {
+    width: 48px;
+    height: 48px;
+    font-size: 18px;
+  }
+  
+  #airtable-clipper-bulk-overlay {
+    font-size: 12px;
+    padding: 8px 12px;
+  }
+  
+  #airtable-clipper-bulk-overlay .bulk-header {
+    flex-direction: column;
+    gap: 8px;
+    align-items: flex-start;
+  }
+  
+  #airtable-clipper-bulk-overlay .bulk-actions {
+    display: flex;
+    gap: 8px;
+  }
+  
+  #airtable-clipper-notification {
+    top: 10px;
+    right: 10px;
+    left: 10px;
+    max-width: none;
+    font-size: 13px;
+  }
+}
+
+/* Dark Mode Support */
+@media (prefers-color-scheme: dark) {
+  .airtable-clipper-selected {
+    background: rgba(102, 126, 234, 0.2) !important;
+    border-color: #818cf8 !important;
+  }
+  
+  .airtable-clipper-selectable:hover {
+    background: rgba(102, 126, 234, 0.1) !important;
+  }
+}
+
+/* High Contrast Mode */
+@media (prefers-contrast: high) {
+  #airtable-clipper-fab .fab-main {
+    border: 2px solid #000;
+  }
+  
+  .airtable-clipper-selected {
+    border-width: 3px !important;
+    background: rgba(102, 126, 234, 0.3) !important;
+  }
+}
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  #airtable-clipper-fab .fab-main,
+  #airtable-clipper-notification,
+  #airtable-clipper-selection-toolbar,
+  #airtable-clipper-bulk-overlay,
+  .airtable-clipper-selected {
+    animation: none !important;
+    transition: none !important;
+  }
+  
+  #airtable-clipper-fab .fab-main:hover {
+    transform: none !important;
+  }
+}

package/airtable-clipper/releases/v1.0.0/styles/popup.css

@@ -0,0 +1,477 @@
+/* Airtable Clipper Popup Styles */
+
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  width: 320px;
+  min-height: 400px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #1f2937;
+  background-color: #ffffff;
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px;
+  border-bottom: 1px solid #e5e7eb;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.logo-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.logo h1 {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.connection-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #ef4444;
+}
+
+.status-dot.connected {
+  background-color: #10b981;
+}
+
+.status-dot.connecting {
+  background-color: #f59e0b;
+  animation: pulse 2s infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Quick Actions */
+.quick-actions {
+  padding: 16px;
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 12px;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 14px;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.action-btn.primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+}
+
+.action-btn.primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(102, 126, 234, 0.4);
+}
+
+.action-btn.secondary {
+  background-color: #f3f4f6;
+  color: #374151;
+  border: 1px solid #d1d5db;
+}
+
+.action-btn.secondary:hover {
+  background-color: #e5e7eb;
+}
+
+.action-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn-icon {
+  font-size: 18px;
+  margin-right: 10px;
+}
+
+.btn-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  flex: 1;
+}
+
+.btn-text {
+  font-weight: 500;
+}
+
+.btn-subtext {
+  font-size: 12px;
+  opacity: 0.8;
+  margin-top: 2px;
+}
+
+.action-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.action-row .action-btn {
+  margin-bottom: 0;
+  padding: 10px 8px;
+  font-size: 13px;
+}
+
+.action-row .btn-text {
+  font-size: 12px;
+}
+
+/* Configuration */
+.configuration {
+  padding: 16px;
+}
+
+.config-section h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+  color: #111827;
+}
+
+.help-text {
+  font-size: 13px;
+  color: #6b7280;
+  margin-bottom: 16px;
+}
+
+.form-group {
+  margin-bottom: 16px;
+}
+
+.form-group label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #374151;
+}
+
+.form-group input,
+.form-group select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #d1d5db;
+  border-radius: 6px;
+  font-size: 14px;
+  transition: border-color 0.2s ease;
+}
+
+.form-group input:focus,
+.form-group select:focus {
+  outline: none;
+  border-color: #667eea;
+  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+}
+
+.help-link {
+  display: inline-block;
+  font-size: 12px;
+  color: #667eea;
+  text-decoration: none;
+  margin-top: 4px;
+}
+
+.help-link:hover {
+  text-decoration: underline;
+}
+
+.btn {
+  padding: 10px 16px;
+  border: none;
+  border-radius: 6px;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.btn.primary {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+}
+
+.btn.primary:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);
+}
+
+.btn.full-width {
+  width: 100%;
+}
+
+.btn-loading {
+  margin-right: 8px;
+}
+
+/* Settings */
+.settings {
+  padding: 16px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.setting-item {
+  margin-bottom: 16px;
+}
+
+.setting-item label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  margin-bottom: 4px;
+  color: #374151;
+}
+
+.setting-item select {
+  width: 100%;
+  padding: 6px 10px;
+  border: 1px solid #d1d5db;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+/* Checkbox styling */
+.checkbox-label {
+  display: flex !important;
+  align-items: center;
+  cursor: pointer;
+  font-size: 13px !important;
+  margin-bottom: 0 !important;
+}
+
+.checkbox-label input[type="checkbox"] {
+  display: none;
+}
+
+.checkmark {
+  width: 16px;
+  height: 16px;
+  border: 2px solid #d1d5db;
+  border-radius: 3px;
+  margin-right: 8px;
+  position: relative;
+  transition: all 0.2s ease;
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark {
+  background-color: #667eea;
+  border-color: #667eea;
+}
+
+.checkbox-label input[type="checkbox"]:checked + .checkmark::after {
+  content: '✓';
+  position: absolute;
+  top: -2px;
+  left: 2px;
+  color: white;
+  font-size: 12px;
+  font-weight: bold;
+}
+
+/* Status Messages */
+.status-message {
+  position: absolute;
+  top: 60px;
+  left: 16px;
+  right: 16px;
+  background-color: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 6px;
+  padding: 12px;
+  z-index: 1000;
+  animation: slideIn 0.3s ease;
+}
+
+.status-message.error {
+  background-color: #fef2f2;
+  border-color: #fecaca;
+}
+
+.status-content {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.status-icon {
+  font-size: 16px;
+}
+
+.status-text {
+  flex: 1;
+  font-size: 13px;
+  font-weight: 500;
+}
+
+.status-close {
+  background: none;
+  border: none;
+  font-size: 16px;
+  cursor: pointer;
+  color: #6b7280;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+/* Footer */
+.footer {
+  border-top: 1px solid #e5e7eb;
+  padding: 12px 16px;
+  background-color: #f9fafb;
+}
+
+.footer-links {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.footer-link {
+  background: none;
+  border: none;
+  color: #667eea;
+  font-size: 12px;
+  cursor: pointer;
+  text-decoration: none;
+}
+
+.footer-link:hover {
+  text-decoration: underline;
+}
+
+.usage-info {
+  text-align: center;
+}
+
+.usage-text {
+  font-size: 11px;
+  color: #6b7280;
+}
+
+/* Loading Overlay */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(255, 255, 255, 0.9);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  z-index: 2000;
+}
+
+.loading-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid #e5e7eb;
+  border-top: 3px solid #667eea;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 12px;
+}
+
+.loading-text {
+  font-size: 14px;
+  color: #6b7280;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive adjustments */
+@media (max-width: 350px) {
+  body {
+    width: 300px;
+  }
+  
+  .action-row {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* Dark mode support */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1f2937;
+    color: #f3f4f6;
+  }
+  
+  .header {
+    border-bottom-color: #374151;
+  }
+  
+  .action-btn.secondary {
+    background-color: #374151;
+    color: #f3f4f6;
+    border-color: #4b5563;
+  }
+  
+  .action-btn.secondary:hover {
+    background-color: #4b5563;
+  }
+  
+  .form-group input,
+  .form-group select,
+  .setting-item select {
+    background-color: #374151;
+    border-color: #4b5563;
+    color: #f3f4f6;
+  }
+  
+  .footer {
+    background-color: #374151;
+    border-top-color: #4b5563;
+  }
+}