Template:VOCALOID Songbox/styles.css：修订间差异
模板页面
更多操作
删除的内容 添加的内容
小 那我缺的:is这块 |
小无编辑摘要 |
||
| （未显示2个用户的10个中间版本） | |||
| 第16行： | 第16行： | ||
line-height: 19px; |
line-height: 19px; |
||
max-width: 900px; |
max-width: 900px; |
||
min-height: |
min-height: 24px; /* 防止空白标题 */ |
||
} |
} |
||
| 第39行： | 第39行： | ||
.songbox_th { |
.songbox_th { |
||
| ⚫ | |||
justify-content: center; |
|||
width: 100%; |
width: 100%; |
||
max-width: 450px; |
max-width: 450px; |
||
/* 固定高度，防止因Chrome令边框对齐设备像素而导致的 |
|||
动画过程中与动画结束后`.songbox_th`的高度不一致而导致的背景突变问题。 |
|||
样例见[[Special:重定向/revision/328429]] */ |
|||
| ⚫ | |||
padding: 0 12px; |
padding: 0 12px; |
||
font-size: 12px; |
font-size: 12px; |
||
line-height: |
line-height: 1; |
||
border: 2px solid; |
border: 2px solid; |
||
border-radius: 10px; |
border-radius: 10px; |
||
| 第50行： | 第56行： | ||
.songbox_td { |
.songbox_td { |
||
| ⚫ | |||
| ⚫ | |||
font-size: 13px; |
font-size: 13px; |
||
line-height: 17px; |
line-height: 17px; |
||
| 第55行： | 第63行： | ||
margin: 4px 0; |
margin: 4px 0; |
||
} |
} |
||
/* 投稿卡片 */ |
|||
.songbox_submission { |
|||
display: inline-block; |
|||
position: relative; |
|||
color: #444; |
|||
background: white; |
|||
border: 1px solid #BBB; |
|||
border-radius: 12px; |
|||
overflow: hidden; |
|||
width: 140px; |
|||
padding: 5px 12px; |
|||
margin: 12px 5px 0; |
|||
text-align: left; |
|||
line-height: 1.5em; |
|||
} |
|||
.songbox_submission::after { |
|||
content: ''; |
|||
opacity: .2; |
|||
| ⚫ | |||
position: absolute; |
|||
| ⚫ | |||
| ⚫ | |||
right: 5px; |
|||
bottom: -20px; |
|||
background-size: 100% 100%; |
|||
} |
|||
.songbox_submission.nico::after { |
|||
background-image: url(https://voca.wiki/images/e/e0/Niconico_Logo_%282020%29.svg); |
|||
} |
|||
.songbox_submission.ytb::after { |
|||
background-image: url(https://voca.wiki/images/6/60/YouTube_Icon_Red.svg); |
|||
} |
|||
.songbox_submission.bili::after { |
|||
background-image: url(https://voca.wiki/images/f/f5/Bilibili_Icon.svg); |
|||
} |
|||
.songbox_submission .submission_platform { |
|||
font-weight: bold; |
|||
margin-bottom: 3px; |
|||
} |
|||
.songbox_submission .submission_link { |
|||
position: absolute; |
|||
top: 6px; |
|||
right: 12px; |
|||
} |
|||
.songbox_submission .submission_date::before { |
|||
content: url(https://voca.wiki/images/6/65/Calendar.svg); |
|||
display: inline-block; |
|||
transform: translateY(2px) scale(.9); |
|||
margin-right: 4px; |
|||
} |
|||
.songbox_submission .submission_playcount::before { |
|||
content: url(https://voca.wiki/images/4/41/Play.svg); |
|||
display: inline-block; |
|||
transform: translateY(2.5px); |
|||
margin-right: 4px; |
|||
} |
|||
/* 投稿平台少于3时拉长 */ |
|||
/* .songbox_submission:is(:first-child:nth-last-child(2), :last-child:nth-child(2)) */ |
|||
.songbox_submission:first-child:nth-last-child(2), .songbox_submission:last-child:nth-child(2) { |
|||
width: 215px; |
|||
} |
|||
/* .songbox_submission:is(:first-child:nth-last-child(2), :last-child:nth-child(2)) :is(.submission_date, .submission_playcount) */ |
|||
.songbox_submission:first-child:nth-last-child(2) :nth-child(n+3), .songbox_submission:last-child:nth-child(2) :nth-child(n+3) { |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
} |
|||
.songbox_submission:first-child:last-child { |
|||
| ⚫ | |||
} |
|||
.songbox_submission:first-child:last-child :not(.submission_link) { |
|||
display: inline; |
|||
margin-right: 20px; |
|||
} |
|||
.songbox_submission:first-child:last-child::after { |
|||
bottom: -35px; |
|||
right: 30px; |
|||
} |
|||
/* 下面是动画 */ |
/* 下面是动画 */ |
||
2025年10月23日 (四) 20:50的最新版本
.songbox {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin: 12px auto;
}
.songbox, .songbox [class*="songbox_"] {
box-sizing: border-box;
}
.songbox_titles {
margin: 18px 0 12px;
font-size: 13px;
line-height: 19px;
max-width: 900px;
min-height: 24px; /* 防止空白标题 */
}
.songbox_main-title,
.songbox_titles.unknown::first-line {
font-size: 20px;
font-weight: 700;
line-height: 24px;
}
.songbox_note {
color: #667;
background: #f5f5f7;
border-radius: 6px;
padding: 4px 12px;
font-size: 12px;
margin-bottom: 16px;
line-height: 18px;
min-width: 340px;
max-width: 450px;
}
.songbox_th {
display: flex;
justify-content: center;
width: 100%;
max-width: 450px;
/* 固定高度，防止因Chrome令边框对齐设备像素而导致的
动画过程中与动画结束后`.songbox_th`的高度不一致而导致的背景突变问题。
样例见[[Special:重定向/revision/328429]] */
height: 24px;
padding: 0 12px;
font-size: 12px;
line-height: 1;
border: 2px solid;
border-radius: 10px;
font-weight: 700;
}
.songbox_td {
width: 100%;
max-width: 450px;
font-size: 13px;
line-height: 17px;
min-height: 17px;
margin: 4px 0;
}
/* 下面是动画 */
.songbox .ambient-image, .songbox_titles, .songbox_note, .songbox_th, .songbox_td {
animation: songbox-appear-transform backwards .9s, songbox-appear-opacity backwards .8s;
}
.songbox .ambient-image_shadow {
animation: songbox-appear-opacity backwards 1.5s .1s;
}
.songbox_titles {
animation-delay: .08s;
}
.songbox_note {
animation-delay: .18s;
}
.songbox > :nth-last-child(6) {
animation-delay: .27s;
}
.songbox > :nth-last-child(5) {
animation-delay: .33s;
}
.songbox > :nth-last-child(4) {
animation-delay: .39s;
}
.songbox > :nth-last-child(3) {
animation-delay: .45s;
}
.songbox > :nth-last-child(2) {
animation-delay: .51s;
}
.songbox > :last-child {
animation-delay: .57s;
}
@keyframes songbox-appear-transform {
from {
transform: scaleX(1.1) translateY(8px);
}
}
@keyframes songbox-appear-opacity {
from {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.songbox > *, .songbox .ambient-image_shadow {
animation: none;
}
}
/* [[Category:在模板命名空间下的CSS页面]] */