mirror of
https://github.com/svemagie/indiekit-endpoint-youtube.git
synced 2026-04-02 15:54:59 +02:00
4119391ef3
- Extract 177 lines inline CSS to assets/styles.css - Create intermediate layout (views/layouts/youtube.njk) - Use section() macro for dashboard sections - Rename CSS prefix from yt-* to youtube-* - Replace inline style for LIVE duration badge with CSS class - Use upstream CSS custom properties without fallbacks - Keep animation CSS (@keyframes youtube-pulse) - Add assets to package.json files array - Bump version to 1.2.2 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
215 lines
4.1 KiB
CSS
215 lines
4.1 KiB
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);
|
|
}
|
|
|
|
/* 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;
|
|
}
|