mirror of
https://github.com/svemagie/indiekit-endpoint-youtube.git
synced 2026-04-02 15:54:59 +02:00
refactor: align to upstream @indiekit/frontend patterns
- 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>
This commit is contained in:
Ricardo
214
assets/styles.css
Normal file
214
assets/styles.css
Normal file
@@ -0,0 +1,214 @@
|
||||
/* 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;
|
||||
}
|
||||
Reference in New Issue
Block a user