Template:VOCALOID Songbox/styles.css：修订间差异
模板页面
更多操作
删除的内容 添加的内容
小无编辑摘要 |
小无编辑摘要 |
||
| （未显示2个用户的6个中间版本） | |||
| 第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 { |
||
display: flex; |
|||
justify-content: center; |
|||
width: 100%; |
width: 100%; |
||
max-width: 450px; |
max-width: 450px; |
||
/* 固定高度，防止因Chrome令边框对齐设备像素而导致的 |
|||
动画过程中与动画结束后`.songbox_th`的高度不一致而导致的背景突变问题。 |
|||
样例见[[Special:重定向/revision/328429]] */ |
|||
height: 24px; |
|||
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; |
||
| 第57行： | 第63行： | ||
margin: 4px 0; |
margin: 4px 0; |
||
} |
} |
||
/* 投稿卡片 */ |
|||
.songbox_submission_container { |
|||
display: flex; |
|||
justify-content: center; |
|||
flex-wrap: wrap; |
|||
gap: 10px; |
|||
padding: 0 5px; |
|||
margin-top: 10px; |
|||
} |
|||
.songbox_submission { |
|||
flex: 1 1 calc((100% - 30px) / 3); |
|||
display: inline-block; |
|||
position: relative; |
|||
color: #444; |
|||
background: white; |
|||
border: 1px solid #BBB; |
|||
border-radius: 12px; |
|||
overflow: hidden; |
|||
padding: 5px 12px; |
|||
text-align: left; |
|||
line-height: 1.5em; |
|||
z-index: 0; |
|||
} |
|||
.songbox_submission::after { |
|||
content: ''; |
|||
opacity: .2; |
|||
display: block; |
|||
position: absolute; |
|||
width: 60px; |
|||
height: 60px; |
|||
right: 5px; |
|||
bottom: -20px; |
|||
background-size: 100% 100%; |
|||
z-index: -1; |
|||
} |
|||
.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); |
|||
} |
|||
.submission_platform { |
|||
font-weight: bold; |
|||
margin-bottom: 3px; |
|||
} |
|||
.submission_link { |
|||
position: absolute; |
|||
top: 6px; |
|||
right: 12px; |
|||
} |
|||
.submission_date, .submission_playcount { |
|||
display: inline-block; |
|||
white-space: nowrap; |
|||
margin-right: 10px; |
|||
} |
|||
.submission_date::before { |
|||
content: url(https://voca.wiki/images/6/65/Calendar.svg); |
|||
display: inline-block; |
|||
transform: translateY(2px) scale(.9); |
|||
margin-right: 4px; |
|||
} |
|||
.submission_playcount::before { |
|||
content: url(https://voca.wiki/images/4/41/Play.svg); |
|||
display: inline-block; |
|||
transform: translateY(2.5px); |
|||
margin-right: 4px; |
|||
} |
|||
/* 只有一个投稿平台时拉长 */ |
|||
.songbox_submission:nth-child(3n+1):last-child > :not(.submission_link) { |
|||
display: inline; |
|||
margin-right: 20px; |
|||
} |
|||
.songbox_submission:nth-child(3n+1):last-child::after { |
|||
bottom: -35px; |
|||
right: 30px; |
|||
} |
|||
@media screen and (max-width: 400px) { |
|||
.songbox_submission_container { |
|||
gap: 5px; |
|||
padding: 0; |
|||
} |
|||
.songbox_submission { |
|||
flex: 1 1 calc((100% - 10px) / 3); |
|||
padding: 5px 7px; |
|||
} |
|||
} |
|||
/* 下面是动画 */ |
/* 下面是动画 */ |
||