366
个编辑
小第1行：
第1行： + + + − @import url('https://fonts.googleapis.com/css?family=Montserrat');+ − + − @import url('https://fonts.googleapis.com/css?family=Tajawal');/*阿拉伯字母字体*/+ + + + + + + + + + + + − font-family:'Montserrat','Google Sans','Noto Sans SC','Tajawal','PingFang SC',"Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Microsoft YaHei","Heiti SC",sans-serif;+ − + 第647行：
第661行： + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
无编辑摘要
/* 这里放置的CSS将影响使用移动版网站的用户 */
/* 这里放置的CSS将影响使用移动版网站的用户 */
@import url('https://fonts.googleapis.com/css?family=Montserrat'); /* 因使用顺序优先加载 */
@import url('https://fonts.googleapis.com/css?family=Jura');/*科技感包含希腊字母*/
@import url('https://fonts.googleapis.com/css?family=Jura');/*科技感包含希腊字母*/
@import url('https://fonts.googleapis.com/css?family=Tajawal');/*阿拉伯字母字体*/
@import url('https://fonts.googleapis.com/css?family=Google Sans');/*谷歌的字体*/
@import url('https://fonts.googleapis.com/css?family=Google Sans');/*谷歌的字体*/
@import url('https://fonts.googleapis.com/css?family=Noto Sans SC');/*思源黑体*/
@import url('https://fonts.googleapis.com/css?family=Noto Sans SC');
/* 暂时隐藏需要处理但还未处理的 DOM 节点，JavaScript 会在之后移除这个 class */
.template-render-cloak {
display: none !important;
visibility: hidden !important;
}
/*
根据目测覆盖范围重新安排 font-family 使用顺序：
Montserrat -> Latin
Tajawal -> Latin + Arabic
Jura -> 经测试 Jura 并不包含希腊字母字形
*/
/*全站字体*/
body * {
body * {
font-family: Montserrat, Tajawal, "Google Sans", "Noto Sans SC", "PingFang SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
}/*全站字体*/
}
/**************************/
/**************************/
text-align: center;
text-align: center;
color: black !important;
color: black !important;
}
/***********************************/
/* 标签 */
/***********************************/
/* 类似于 Fillet，但是拥有自适应宽高和略微缩小的文字大小 */
/* 默认标签样式 */
.tag {
margin-left: .5rem;
display: inline-block;
padding: .125em 1em;
border-radius: 2em;
color: #fff;
font-size: .9em;
font-weight: 700; /* Bold */
line-height: 1.414;
background-color: #777;
}
/*
* 各语言彩色标签，需要的话自己加。目前已有：
*
* fr - 法语
* es - 西班牙语
* ru - 俄语
* ko - 韩语
* ja - 日语
* de - 德语
* ar - 阿拉伯语
*/
:lang(fr) + .tag { background-color: rgb(202, 47, 143); }
:lang(es) + .tag { background-color: rgb(35, 151, 37); }
:lang(ru) + .tag { background-color: rgb(33, 150, 243); }
:lang(ko) + .tag { background-color: rgb(5, 147, 186); }
:lang(ja) + .tag { background-color: rgb(255, 0, 0); }
:lang(de) + .tag { background-color: rgb(129, 99, 192); }
:lang(ar) + .tag { background-color: rgb(188, 105, 83); }
/**************************/
/* 播放按钮和下载按钮 */
/**************************/
.audio-player {
margin-right: .5rem;
}
.audio-player button {
height: 3rem;
width: 3rem;
text-align: center;
border: 0;
border-radius: 50%;
transition: 0.3s ease-in-out;
outline: 0 none;
background-image: none, url(/w/images/a/ad/AudioPlay.svg);
}
.audio-player-playing{
transition: 0.3s ease-in-out;
background-image: none,url(/w/images/c/cd/AudioPause.svg) !important;
}
.audio-player-paused{
transition: 0.3s ease-in-out;
background-image: none,url(/w/images/a/ad/AudioPlay.svg) !important;
}
.downloadable-audio {
margin-right: .5rem;
position: relative;
display: inline-flex;
}
.downloadable-audio .audio-player {
z-index: 1;
position: relative;
margin-right: 0;
display: block;
border-radius: 50%;
box-shadow: 0 3px 8px rgb(0 0 0 / 15%);
}
.downloadable-audio .audio-player::after {
content: "<DownloadDropdown>";
display: block;
color: #000;
background-color: #e8e000;
}
.downloadable-audio .audio-player button {
display: block;
}
.downloadable-audio .audio-player.has-audio-element::after {
content: none;
}
.downloadable-audio .audio-player.has-audio-element + .downloadable-audio-dropdown {
display: flex;
}
.downloadable-audio .downloadable-audio-dropdown {
box-sizing: border-box;
display: none;
flex-flow: column nowrap;
justify-content: flex-start;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
min-height: 100%;
padding: 6px;
padding-top: 0%;
background-color: #e8e000; /* 与 #f8ef00 播放按钮颜色区分开一点 */
/* 设定一个非百分比的大数值 */
border-radius: 16rem;
box-shadow: 0 6px 12px rgb(0 0 0 / 33%);
transition: padding-top 140ms ease-out;
}
.downloadable-audio .download-button {
box-sizing: border-box;
position: relative;
margin-top: 4px;
padding-top: 100%;
width: 100%;
height: 0;
border: 1px solid rgb(0 0 0 / 15%);
border-radius: 50%;
cursor: pointer;
transition: background-color 140ms ease-in-out;
}
.downloadable-audio .download-button:focus-within,
.downloadable-audio .download-button:hover {
background-color: rgb(0 0 0 / 10%);
}
.downloadable-audio .download-link,
.downloadable-audio .download-icon {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBkPSJNOCAxdjEwTTIgNWw2IDYgNi02TTIgMTJ2M2gxMnYtMyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+");
background-repeat: no-repeat;
background-size: 50%;
background-position: center;
}
.downloadable-audio .download-link {
opacity: 0;
overflow: hidden;
}
.downloadable-audio .download-link > a {
display: block;
width: 100%;
height: 100%;
}
/* .downloadable-audio:focus-within, */
.downloadable-audio:hover {
z-index: 5;
}
/* 如果是焦点在子元素上，是否也保持张开状态？ */
/* .downloadable-audio:focus-within .downloadable-audio-dropdown, */
.downloadable-audio:hover .downloadable-audio-dropdown {
padding-top: 100%;
}
}