Template:Song video/styles.css

.song-video {
	display: inline-grid;
	margin: 15px 15px 0 0;
	gap: 5px;
	width: 320px;
}

.song-video .header {
	text-align: center;
	padding: 5px;
	margin-bottom: 5px;
	font-weight: bold;
	background-color: var(--theme-primary-0);
}

.song-video .video {
	height: 180px;
	flex: 1 0 320px;
	text-align: center;
}

.song-video .info {
	display: grid;
	grid-template-columns: 120px 1fr;
	grid-auto-rows: min-content;
	gap: 5px;
}

.song-video .info .ih {
	padding: 5px 10px;
	font-weight: bold;
	background-color: var(--theme-primary-0);
}

.song-video .info .id {
	padding: 5px;
}

/*
 * Citizen skin
 */
body.skin-citizen .song-video .header,
body.skin-citizen .song-video .info .ih {
	border-radius: var(--border-radius--small);
}

html.skin-citizen-dark .song-video .header,
html.skin-citizen-dark .song-video .info .ih {
	border: 1px solid var(--border-color-base);
	background-color: var(--color-surface-1) !important;
}

body.skin-citizen .song-video .video {
	border-radius: var(--border-radius--small);
	overflow: hidden;
}