查看“模板:时光轴卡片”的源代码

<includeonly>
<div class="time-axis-card"><div class="card-title">{{{标题}}}</div><div class="card-text">{{{内容}}}</div><div class="card-pos">{{{触发}}}</div>[[File:角色对话底 装饰.png]]</div>
</includeonly>
<noinclude>
{{时光轴卡片|标题=长恒山的渊源|内容=黎深和极地的渊源比我们想象中要深黎深和极地的渊源比我们想象中要深黎深和极地的渊源比我们想象中要深黎深和极地的渊源比我们想象中要深|触发=阅读主线5-8}}
</noinclude>{{#ifeq:{{#var:时光轴卡片css防重复加载}}||{{#vardefine:时光轴卡片css防重复加载|1}}
{{#tag:bstyle|
.time-axis-card{ background-image:url({{filepath:时光轴_文章底.png}}); }
.card-title{ background-image:url({{filepath:文章_标题底.png}}); }
}}
{{#CSS:
.time-axis-card { width: 315px; height: 191px; padding: 30px; position:relative !important;}
.time-axis-card>.card-title{
    background-repeat: no-repeat;
    background-position: 50% 100%;
    text-align: center;
    margin: 10px 0;
    font-size: 16px;
    color: #54525d;
    font-weight: bold;
    font-family: sans-serif;
    letter-spacing: 1.5;
}
.time-axis-card>.card-text{
    margin: 5px 15px;
    color: #686667;
    font-size: 14px;
    font-weight: bold;
    overflow-y: scroll;
    width: calc(100% - 25px);
    height: calc(100% - 65px);
    scrollbar-width: thin;
    scrollbar-color: #e9e0dd transparent;
    padding-right: 5px;
}
<!-- 滚动条的chrome兼容 -->
.time-axis-card>.card-text::-webkit-scrollbar {
    width: 10px;
   background: transparent; <!--滚动条的背景色 -->
}
.time-axis-card>.card-text::-webkit-scrollbar-thumb {
    background: #e9e0dd; <!-- 滚动条的颜色 -->
    border-radius: 8px;
}
.time-axis-card>.card-pos {
    text-align: right;
    font-size: 13px;
    font-weight: bold;
    color: #bc6c61;
    padding-right: 10px;
}
.time-axis-card img{
    width: 34px;
    position: absolute;
    left: 16px;
    bottom: 23px;
}
}}}}