Template:VOCALOID Songbox/styles.css：修订间差异
模板页面
更多操作
删除的内容 添加的内容
小 使应用了“文字样式”参数的模板和改版前的外观保持一致 |
小无编辑摘要 |
||
| （未显示2个用户的14个中间版本） | |||
| 第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; |
||
| 第50行： | 第56行： | ||
.songbox_td { |
.songbox_td { |
||
width: 100%; |
|||
max-width: 450px; |
|||
font-size: 13px; |
font-size: 13px; |
||
line-height: 17px; |
line-height: 17px; |
||
| 第58行： | 第66行： | ||
/* 下面是动画 */ |
/* 下面是动画 */ |
||
.songbox .ambient-image, .songbox_titles, .songbox_note, .songbox_th, .songbox_td { |
.songbox .ambient-image, .songbox_titles, .songbox_note, .songbox_th, .songbox_td { |
||
animation: songbox-appear-transform backwards |
animation: songbox-appear-transform backwards .9s, songbox-appear-opacity backwards .8s; |
||
} |
} |
||
.songbox .ambient-image_shadow { |
.songbox .ambient-image_shadow { |
||
| 第64行： | 第72行： | ||
} |
} |
||
.songbox_titles { |
.songbox_titles { |
||
animation-delay: . |
animation-delay: .08s; |
||
} |
} |
||
.songbox_note { |
.songbox_note { |
||
animation-delay: . |
animation-delay: .18s; |
||
} |
} |
||
.songbox > :nth-last-child(6) { |
.songbox > :nth-last-child(6) { |
||
animation-delay: . |
animation-delay: .27s; |
||
} |
} |
||
.songbox > :nth-last-child(5) { |
.songbox > :nth-last-child(5) { |
||
animation-delay: . |
animation-delay: .33s; |
||
} |
} |
||
.songbox > :nth-last-child(4) { |
.songbox > :nth-last-child(4) { |
||
animation-delay: . |
animation-delay: .39s; |
||
} |
} |
||
.songbox > :nth-last-child(3) { |
.songbox > :nth-last-child(3) { |
||
animation-delay: . |
animation-delay: .45s; |
||
} |
} |
||
.songbox > :nth-last-child(2) { |
.songbox > :nth-last-child(2) { |
||
animation-delay: . |
animation-delay: .51s; |
||
} |
} |
||
.songbox > :last-child { |
.songbox > :last-child { |
||
animation-delay: . |
animation-delay: .57s; |
||
} |
} |
||
@keyframes songbox-appear-transform { |
@keyframes songbox-appear-transform { |
||
| 第98行： | 第106行： | ||
} |
} |
||
@media (prefers-reduced-motion: reduce) { |
@media (prefers-reduced-motion: reduce) { |
||
.songbox |
.songbox > *, .songbox .ambient-image_shadow { |
||
animation: none; |
animation: none; |
||
} |
} |
||