@feedinbox/cli/templates/react-vanilla/styles/index.css

CLI tool for installing FeedInbox components into your project

/* FeedInbox Widgets - All Styles */

/* Import all widget styles */
@import './feedback-widget.css';
@import './newsletter-widget.css';
@import './contact-widget.css';
@import './preferences-widget.css';

/* Global CSS variables for theming */
:root {
  /* Colors */
  --feedinbox-primary-color: #3b82f6;
  --feedinbox-primary-hover: #2563eb;
  --feedinbox-success-color: #10b981;
  --feedinbox-error-color: #ef4444;
  --feedinbox-warning-color: #f59e0b;
  
  /* Background colors */
  --feedinbox-bg-color: #ffffff;
  --feedinbox-card-bg: #ffffff;
  --feedinbox-input-bg: #ffffff;
  --feedinbox-hover-color: #f9fafb;
  --feedinbox-info-bg: #f3f4f6;
  
  /* Text colors */
  --feedinbox-text-color: #111827;
  --feedinbox-input-text: #111827;
  --feedinbox-muted-color: #6b7280;
  
  /* Border colors */
  --feedinbox-border-color: #e5e7eb;
  --feedinbox-input-border: #e5e7eb;
  
  /* Border radius */
  --feedinbox-border-radius: 12px;
  --feedinbox-input-radius: 6px;
  
  /* Spacing */
  --feedinbox-spacing-xs: 4px;
  --feedinbox-spacing-sm: 8px;
  --feedinbox-spacing-md: 16px;
  --feedinbox-spacing-lg: 24px;
  --feedinbox-spacing-xl: 32px;
  
  /* Typography */
  --feedinbox-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
  --feedinbox-font-size-xs: 12px;
  --feedinbox-font-size-sm: 14px;
  --feedinbox-font-size-md: 16px;
  --feedinbox-font-size-lg: 18px;
  --feedinbox-font-size-xl: 20px;
}

/* Dark theme variables */
[data-theme="dark"] {
  --feedinbox-bg-color: #1f2937;
  --feedinbox-card-bg: #1f2937;
  --feedinbox-input-bg: #374151;
  --feedinbox-hover-color: #374151;
  --feedinbox-info-bg: #374151;
  
  --feedinbox-text-color: #f3f4f6;
  --feedinbox-input-text: #f3f4f6;
  --feedinbox-muted-color: #9ca3af;
  
  --feedinbox-border-color: #4b5563;
  --feedinbox-input-border: #4b5563;
}

/* Base widget styles */
.feedinbox-overlay {
  font-family: var(--feedinbox-font-family);
  font-size: var(--feedinbox-font-size-sm);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Focus visible for accessibility */
.feedinbox-button:focus-visible,
.feedinbox-input:focus-visible,
.feedinbox-textarea:focus-visible {
  outline: 2px solid var(--feedinbox-primary-color);
  outline-offset: 2px;
}

/* Smooth transitions */
* {
  box-sizing: border-box;
}

/* Animation utilities */
@keyframes feedinbox-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedinbox-modal {
  animation: feedinbox-fade-in 0.2s ease-out;
}

/* Loading spinner */
@keyframes feedinbox-spin {
  to {
    transform: rotate(360deg);
  }
}

.feedinbox-loading {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: feedinbox-spin 1s linear infinite;
}

/* Screen reader only content */
.feedinbox-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}