nuxt-supabase-team-auth/src/runtime/assets/css/components.css

Drop-in Nuxt 3 module for team-based authentication with Supabase

/* Team Auth Module Components Styles */

.team-auth-container {
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}

.team-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.team-auth-input {
  width: 100%;
}

.team-auth-button {
  width: 100%;
}

.team-auth-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.team-auth-success {
  color: #10b981;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}

.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background-color: #eab308;
  color: #713f12;
  padding: 0.75rem;
  text-align: center;
  font-weight: 500;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.impersonation-countdown {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875rem;
}

.team-members-table {
  width: 100%;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 500;
}

.role-badge-owner {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.role-badge-admin {
  background-color: #dbeafe;
  color: #1e40af;
}

.role-badge-member {
  background-color: #f3f4f6;
  color: #374151;
}

.role-badge-super-admin {
  background-color: #fee2e2;
  color: #991b1b;
}