indiekit-endpoint-youtube/assets/styles.css

/* YouTube endpoint styles */

/* Channel header */
.youtube-channel {
  align-items: center;
  background: var(--color-offset);
  border-radius: var(--radius-m);
  display: flex;
  gap: var(--space-m);
  margin-block-end: var(--space-l);
  padding: var(--space-m);
}

.youtube-channel__avatar {
  border-radius: 50%;
  flex-shrink: 0;
  height: 64px;
  object-fit: cover;
  width: 64px;
}

.youtube-channel__info {
  flex: 1;
}

.youtube-channel__name {
  font-size: var(--step-1);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3xs) 0;
}

.youtube-channel__stats {
  color: var(--color-text-secondary);
  display: flex;
  font-size: var(--step--1);
  gap: var(--space-m);
}

/* Live status badge */
.youtube-live-badge {
  align-items: center;
  border-radius: 2rem;
  display: inline-flex;
  font-size: var(--step--2);
  font-weight: var(--font-weight-semibold);
  gap: var(--space-xs);
  padding: var(--space-3xs) var(--space-s);
  text-transform: uppercase;
}

.youtube-live-badge--live {
  animation: youtube-pulse 2s infinite;
  background: #ff0000;
  color: white;
}

.youtube-live-badge--upcoming {
  background: #065fd4;
  color: white;
}

.youtube-live-badge--offline {
  background: var(--color-offset);
  color: var(--color-text-secondary);
}

@keyframes youtube-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.youtube-live-dot {
  background: currentColor;
  border-radius: 50%;
  height: 8px;
  width: 8px;
}

/* Live stream card */
.youtube-live-stream {
  background: linear-gradient(135deg, #ff000010, #ff000005);
  border: 1px solid #ff000030;
  border-radius: var(--radius-m);
  display: flex;
  gap: var(--space-m);
  margin-block-end: var(--space-l);
  padding: var(--space-m);
}

.youtube-live-stream__thumb {
  border-radius: var(--radius-s);
  flex-shrink: 0;
  height: 90px;
  object-fit: cover;
  width: 160px;
}

.youtube-live-stream__info {
  flex: 1;
}

.youtube-live-stream__title {
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-xs) 0;
}

.youtube-live-stream__title a {
  color: inherit;
  text-decoration: none;
}

.youtube-live-stream__title a:hover {
  text-decoration: underline;
}

/* Video grid */
.youtube-video-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

.youtube-video {
  background: var(--color-offset);
  border-radius: var(--radius-m);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.youtube-video__thumb-wrapper {
  aspect-ratio: 16/9;
  position: relative;
}

.youtube-video__thumb {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.youtube-video__duration {
  background: rgba(0, 0, 0, 0.8);
  border-radius: var(--radius-s);
  bottom: var(--space-2xs);
  color: white;
  font-size: var(--step--2);
  font-weight: var(--font-weight-medium);
  padding: var(--space-3xs) var(--space-2xs);
  position: absolute;
  right: var(--space-2xs);
}

.youtube-video__duration--live {
  background: #ff0000;
}

.youtube-video__info {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--space-s);
}

.youtube-video__title {
  display: -webkit-box;
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-xs) 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.youtube-video__title a {
  color: inherit;
  text-decoration: none;
}

.youtube-video__title a:hover {
  text-decoration: underline;
}

.youtube-video__meta {
  color: var(--color-text-secondary);
  font-size: var(--step--2);
  margin-top: auto;
}

/* Multi-channel separator */
.youtube-channel-section + .youtube-channel-section {
  border-block-start: 1px solid var(--color-border);
  margin-block-start: var(--space-xl);
  padding-block-start: var(--space-xl);
}

/* ── Likes dashboard ── */

/* Connection status */
.youtube-likes-connection {
  align-items: center;
  display: flex;
  gap: var(--space-m);
}

.youtube-likes-badge {
  align-items: center;
  border-radius: 2rem;
  display: inline-flex;
  font-size: var(--step--1);
  font-weight: var(--font-weight-semibold);
  padding: var(--space-3xs) var(--space-s);
}

.youtube-likes-badge--connected {
  background: #1a7f37;
  color: white;
}

.youtube-likes-badge--disconnected {
  background: var(--color-offset);
  color: var(--color-text-secondary);
}

.youtube-likes-connection__action {
  display: inline;
}

/* Sync result text */
.youtube-likes-sync-result {
  color: var(--color-text-secondary);
  font-size: var(--step--1);
  margin-block-start: var(--space-xs);
}

/* Recent likes list */
.youtube-likes-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
  list-style: none;
  margin: 0;
  padding: 0;
}

.youtube-likes-item {
  align-items: center;
  background: var(--color-offset);
  border-radius: var(--radius-m);
  display: flex;
  gap: var(--space-m);
  padding: var(--space-s);
}

.youtube-likes-item__thumb-link {
  flex-shrink: 0;
}

.youtube-likes-item__thumb {
  border-radius: var(--radius-s);
  height: 54px;
  object-fit: cover;
  width: 96px;
}

.youtube-likes-item__info {
  flex: 1;
  min-width: 0;
}

.youtube-likes-item__title {
  display: -webkit-box;
  font-size: var(--step--1);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-3xs) 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.youtube-likes-item__title a {
  color: inherit;
  text-decoration: none;
}

.youtube-likes-item__title a:hover {
  text-decoration: underline;
}

.youtube-likes-item__meta {
  color: var(--color-text-secondary);
  display: flex;
  font-size: var(--step--2);
  gap: var(--space-m);
}

.youtube-likes-more {
  margin-block-start: var(--space-m);
}

/* API endpoints list */
.youtube-api-list {
  font-size: var(--step--1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.youtube-api-list li {
  border-block-end: 1px solid var(--color-border);
  padding: var(--space-2xs) 0;
}

.youtube-api-list li:last-child {
  border-block-end: none;
}

.youtube-api-list code {
  background: var(--color-offset);
  border-radius: var(--radius-s);
  font-size: var(--step--2);
  padding: var(--space-3xs) var(--space-2xs);
}

/* Public link banner */
.youtube-public-link {
  align-items: center;
  background: var(--color-offset);
  border-radius: var(--radius-m);
  display: flex;
  justify-content: space-between;
  margin-block-start: var(--space-xl);
  padding: var(--space-m);
}

.youtube-public-link p {
  color: var(--color-text-secondary);
  margin: 0;
}