Template:YouTubeCard/styles.css - Revision history

JacksonTheMaster at 12:56, 12 March 2026

2026-03-12T12:56:17Z

@@ Line 105: / Line 105: @@
 .yt-card-btn a:hover {
      opacity: 0.85;
+}

JacksonTheMaster at 01:36, 12 March 2026

2026-03-12T01:36:25Z

← Older revision		Revision as of 01:36, 12 March 2026
Line 50:		Line 50:
	width: 48px;		width: 48px;
	height: 48px;		height: 48px;
	background: ~~var(--accent-color-base)~~;		background: #CD201F;
	border-radius: 50%;		border-radius: 50%;
	display: flex;		display: flex;
Line 94:		Line 94:
	margin-top: var(--space-xs);		margin-top: var(--space-xs);
	padding: 0.3em 0.9em;		padding: 0.3em 0.9em;
	background: ~~var(--accent-color-base)~~;		background: #CD201F;
	color: #fff !important;		color: #fff !important;
	border-radius: var(--border-radius-medium);		border-radius: var(--border-radius-medium);

JacksonTheMaster at 01:34, 12 March 2026

2026-03-12T01:34:32Z

← Older revision		Revision as of 01:34, 12 March 2026
Line 4:		Line 4:
	max-width: 700px;		max-width: 700px;
	margin: 1.5em auto;		margin: 1.5em auto;
	~~background: var(--color-surface-2);~~
	border-radius: var(--border-radius-large);		border-radius: var(--border-radius-large);
	overflow: hidden;		overflow: hidden;
	~~border: 1px solid var(--border-color-base);~~
	transition: transform 0.2s ease, box-shadow 0.2s ease;		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}		}

JacksonTheMaster at 01:30, 12 March 2026

2026-03-12T01:30:52Z

← Older revision		Revision as of 01:30, 12 March 2026
Line 1:		Line 1:
	.yt-card-outer {		.yt-card-outer {
	display: flex;		display: flex;
	align-items: ~~stretch~~;		align-items: center;
	max-width: 700px;		max-width: 700px;
	margin: 1.5em auto;		margin: 1.5em auto;

JacksonTheMaster at 01:27, 12 March 2026

2026-03-12T01:27:09Z

← Older revision		Revision as of 01:27, 12 March 2026
Line 24:		Line 24:
	}		}

	~~/* Override MediaWiki's thumb wrappers */~~		.yt-card-thumb span,
	.yt-card-thumb ~~div~~,		.yt-card-thumb a {
	.yt-card-thumb ~~figure,~~		display: block !important;
	~~.yt-card-thumb .thumb,~~		width: 100% !important;
	~~.yt-card-thumb .thumbinner {~~		height: 100% !important;
	margin: 0 !important;		margin: 0 !important;
	padding: 0 !important;		padding: 0 !important;
	~~border: none !important;~~
	~~background: none !important;~~
	~~width: 100% !important;~~
	~~height: 100% !important;~~
	}		}

JacksonTheMaster at 01:24, 12 March 2026

2026-03-12T01:24:29Z

← Older revision		Revision as of 01:24, 12 March 2026
Line 19:		Line 19:
	position: relative;		position: relative;
	flex-shrink: 0;		flex-shrink: 0;
	width: ~~200px~~;		width: 240px;
	~~aspect-ratio~~: ~~16/9~~;		height: 135px;
	overflow: hidden;		overflow: hidden;
			}

			/* Override MediaWiki's thumb wrappers */
			.yt-card-thumb div,
			.yt-card-thumb figure,
			.yt-card-thumb .thumb,
			.yt-card-thumb .thumbinner {
			margin: 0 !important;
			padding: 0 !important;
			border: none !important;
			background: none !important;
			width: 100% !important;
			height: 100% !important;
	}		}

	.yt-card-thumb img {		.yt-card-thumb img {
	width: 100%;		width: 100% !important;
	height: 100%;		height: 100% !important;
	object-fit: cover;		object-fit: cover;
	display: block;		display: block;

JacksonTheMaster at 01:20, 12 March 2026

2026-03-12T01:20:28Z

← Older revision		Revision as of 01:20, 12 March 2026
Line 20:		Line 20:
	flex-shrink: 0;		flex-shrink: 0;
	width: 200px;		width: 200px;
			aspect-ratio: 16/9;
	overflow: hidden;		overflow: hidden;
	}		}

JacksonTheMaster: Created page with ".yt-card-outer { display: flex; align-items: stretch; max-width: 700px; margin: 1.5em auto; background: var(--color-surface-2); border-radius: var(--border-radius-large); overflow: hidden; border: 1px solid var(--border-color-base); transition: transform 0.2s ease, box-shadow 0.2s ease; } .yt-card-outer:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } .yt-card-thumb { position: relative;..."

2026-03-12T00:56:39Z

Created page with ".yt-card-outer { display: flex; align-items: stretch; max-width: 700px; margin: 1.5em auto; background: var(--color-surface-2); border-radius: var(--border-radius-large); overflow: hidden; border: 1px solid var(--border-color-base); transition: transform 0.2s ease, box-shadow 0.2s ease; } .yt-card-outer:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.4); } .yt-card-thumb { position: relative;..."

New page

.yt-card-outer {
display: flex;
align-items: stretch;
max-width: 700px;
margin: 1.5em auto;
background: var(--color-surface-2);
border-radius: var(--border-radius-large);
overflow: hidden;
border: 1px solid var(--border-color-base);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.yt-card-outer:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(0,0,0,0.4);
}

.yt-card-thumb {
position: relative;
flex-shrink: 0;
width: 200px;
overflow: hidden;
}

.yt-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}

.yt-card-outer:hover .yt-card-thumb img {
transform: scale(1.05);
}

.yt-card-play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 48px;
height: 48px;
background: var(--accent-color-base);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: #fff;
z-index: 2;
opacity: 0.9;
transition: transform 0.2s ease, opacity 0.2s ease;
line-height: 48px;
text-align: center;
pointer-events: none;
}

.yt-card-outer:hover .yt-card-play {
transform: translate(-50%, -50%) scale(1.15);
opacity: 1;
}

.yt-card-info {
padding: var(--space-md);
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-xs);
}

.yt-card-title {
font-size: 1.1rem;
font-weight: bold;
color: var(--color-base);
}

.yt-card-desc {
font-size: 0.9rem;
color: var(--color-base--subtle);
line-height: 1.5;
}

.yt-card-btn a {
display: inline-block;
margin-top: var(--space-xs);
padding: 0.3em 0.9em;
background: var(--accent-color-base);
color: #fff !important;
border-radius: var(--border-radius-medium);
text-decoration: none !important;
font-size: 0.9rem;
font-weight: bold;
transition: opacity 0.2s ease;
}

.yt-card-btn a:hover {
opacity: 0.85;
}