CoolFace
Apppublic

DataScope26/WEB

sourceHugging Faceupdated 7d agoView on Hugging Face
0likes
InviteCard.css119 linesDownload Raw Back to components
1.invite-card {2  display: flex;3  align-items: center;4  gap: 1rem;5  background: var(--surface-3);6  border: 0.0625rem solid rgba(255, 255, 255, 0.05);7  border-radius: 1rem;8  padding: 1.125rem 1.25rem;9}10 11.invite-card__badge {12  width: 2.375rem;13  height: 2.375rem;14  border-radius: 50%;15  flex-shrink: 0;16  display: flex;17  align-items: center;18  justify-content: center;19  font-weight: 700;20  color: #0e0e0e;21}22 23.invite-card__badge--accepted { background: var(--green); }24.invite-card__badge--pending { background: #c9b98a; }25.invite-card__badge--declined { background: var(--color-danger); }26 27.invite-card__body {28  flex: 1;29  min-width: 0;30}31 32.invite-card__name {33  font-weight: 700;34  font-size: 1.2rem;35  color: var(--color-text);36}37 38.invite-card__meta {39  font-size: 0.82rem;40  color: var(--muted);41  margin-top: 0.25rem;42}43 44.invite-card__pill {45  font-size: 0.8rem;46  text-transform: uppercase;47  letter-spacing: 0.06em;48  font-weight: 700;49  padding: 0.5rem 0.75rem;50  border-radius: 62.4375rem;51  flex-shrink: 0;52  min-width: 6.875rem;53  display: inline-flex;54  align-items: center;55  justify-content: center;56}57 58.invite-card__pill--accepted { color: var(--green); background: rgba(46, 232, 138, 0.15); }59.invite-card__pill--pending { color: #c9b98a; background: rgba(201, 185, 138, 0.15); }60.invite-card__pill--declined { color: #ffffff; background: var(--color-danger); }61 62html[data-theme='light'] .invite-card__pill--pending {63  color: #b8860b;64  background: rgba(201, 185, 138, 0.25);65}66 67.invite-card__dots {68  display: flex;69  align-items: center;70  gap: 0.1875rem;71}72 73.invite-card__dots span {74  width: 0.25rem;75  height: 0.25rem;76  border-radius: 50%;77  background: #0e0e0e;78}79 80html[data-theme='light'] .invite-card__dots span {81  background: #6b7280;82}83 84.invite-card__actions {85  display: flex;86  align-items: center;87  gap: 0.625rem;88  flex-shrink: 0;89}90 91.invite-card__delete {92  padding: 0.4375rem 0.75rem;93  min-width: 6.25rem;94  display: inline-flex;95  align-items: center;96  justify-content: center;97}98 99.invite-card__delete:disabled {100  opacity: 0.8;101  cursor: wait;102}103 104.invite-card__delete-spinner {105  animation: invite-card-spin 0.9s linear infinite;106}107 108@keyframes invite-card-spin {109  from {110    transform: rotate(0deg);111  }112  to {113    transform: rotate(360deg);114  }115}116 117.invite-card__delete:hover {118  transform: translateY(-0.0625rem);119}