Template:VOCALOID Songbox/card.css

/* 投稿卡片 */
.songbox_submission_container {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0 5px;
	margin-top: 10px;
}

.songbox_submission {
	display: flex;
	flex: 1 1 calc(100% / 3 - 10px);
	flex-wrap: wrap;
	row-gap: 3px;
	position: relative;
	z-index: 0;
	border: 1px solid #BBB;
	border-radius: 12px;
	padding: 5px 12px;
	background: white;
	color: #444;
	text-align: left;
	line-height: 1.5em;
	overflow: hidden;
}

/* 背景图标 */
.songbox_submission::after {
	content: '';
	opacity: .2;
	position: absolute;
	width: 60px;
	height: 60px;
	right: 5px;
	bottom: -20px;
	background-size: 100% 100%;
	z-index: -1;
}

.songbox_submission.nico::after {
	background-image: url(/images/e/e0/Niconico_Logo_%282020%29.svg);
	opacity: .1;
}

.songbox_submission.ytb::after {
	background-image: url(/images/6/60/YouTube_Icon_Red.svg);
}

.songbox_submission.bili::after {
	background-image: url(/images/9/9b/Bilibili_favicon.svg);
}

.songbox_submission.acfun::after {
	background-image: url(/images/7/7b/AcFun_icon.png);
	width: 72px;
	height: 51.2px;
	bottom: -12px;
}

.songbox_submission.sc::after {
	background-image: url(/images/2/2d/SoundCloud_icon.svg);
}

.songbox_submission.ncm::after {
	background-image: url(/images/a/a1/NeteaseCloudMusic_icon.svg);
	bottom: -24px;
}

.songbox_submission.web::after {
	background-image: url(/images/4/4e/Internet_globe_icon.svg);
}

/* 内容 */
.submission_link {
	position: absolute;
	top: 6px;
	right: 12px;
	transition-duration: .3s;
}

.songbox_submission:hover .submission_link {
	transform: scale(1.2);
	filter: drop-shadow(0 0 3px rgba(0, 153, 255, .5));
}

.submission_platform {
	font-weight: bold;
	margin-right: 16px;
}

.submission_info {
	display: flex;
	flex-wrap: wrap;
	width: max-content;
	max-width: 100%;
	column-gap: 10px;
	align-content: end;
	white-space: nowrap;
	min-width: min(100%, 180px);
}

.submission_date::before {
	content: url(https://test.voca.wiki/images/6/65/Calendar.svg);
	display: inline-block;
	transform: translateY(2px) scale(.9);
	margin-right: 4px;
}

.submission_playcount::before {
	content: url(https://test.voca.wiki/images/4/41/Play.svg);
	display: inline-block;
	transform: translateY(2.5px);
	margin-right: 4px;
}

.submission_playcount:empty {
    display: none;
}

/* 移动端适配 */
@media screen and (max-width: 400px) {
	.songbox_submission_container {
		gap: 5px;
		padding: 0;
	}

	.songbox_submission {
		padding: 5px 7px;
	}
}

/* 删稿样式 */
.songbox_submission.deleted .submission_platform {
	color: silver;
	text-decoration: line-through;
	text-decoration-color: #333;
}

.songbox_submission.deleted .submission_link a::after {
	color: #333;
}

.songbox_submission.deleted:hover .submission_link {
	transform: none;
	filter: none;
}

.songbox_submission.deleted .submission_playcount {
	text-decoration: underline;
}

.songbox_submission.deleted .submission_playcount .override-note {
	display: inline-block;
	font-size: smaller;
}

/* 指定列数 */
.two-columns ~ .songbox_submission, .songbox_submission.two-columns {
	flex: 1 1 calc(50% - 10px);
}
.one-column ~ .songbox_submission, .songbox_submission.one-column {
	flex: 1 1 100%;
}

/* [[Category:在模板命名空间下的CSS页面]] */