标签:移动网页编辑 移动版编辑 |
|||
第7行: | 第7行: | ||
@import url("https://fonts.googleapis.com/css?family=Kalam"); /*较窄的字体*/ | @import url("https://fonts.googleapis.com/css?family=Kalam"); /*较窄的字体*/ | ||
@import url("https://fonts.googleapis.com/css?family=JetBrains Mono"); /*等宽字体用作目录*/ | @import url("https://fonts.googleapis.com/css?family=JetBrains Mono"); /*等宽字体用作目录*/ | ||
− | @import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/ | + | @import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css"); /* FA 字体图标 */ |
@import url("https://voicewiki.cn/w/extrafiles/font-awesome-animation.min.css"); /* FA 字体动画 */ | @import url("https://voicewiki.cn/w/extrafiles/font-awesome-animation.min.css"); /* FA 字体动画 */ | ||
2023年12月12日 (二) 17:38的版本
@import url("https://fonts.googleapis.com/css?family=Exo 2"); /* 因使用顺序优先加载 */ @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=Noto Sans SC"); /*思源黑体*/ @import url("https://fonts.googleapis.com/css?family=Fira Code"); /*等宽字体常规*/ @import url("https://fonts.googleapis.com/css?family=Kalam"); /*较窄的字体*/ @import url("https://fonts.googleapis.com/css?family=JetBrains Mono"); /*等宽字体用作目录*/ @import url("https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.2/css/all.min.css"); /* FA 字体图标 */ @import url("https://voicewiki.cn/w/extrafiles/font-awesome-animation.min.css"); /* FA 字体动画 */ @font-face { font-family: "Pricedown"; src: url("https://voicewiki.cn/w/extrafiles/Pricedown.ttf") format("truetype"); font-style: normal; font-stretch: normal; font-weight: normal; } @font-face { font-family: "Big Noodle Too"; src: url("https://voicewiki.cn/w/extrafiles/big-noodle-too-oblique.woff") format("woff"); font-style: oblique; font-stretch: normal; font-weight: normal; } @font-face { font-family: "YSGoodBody"; src: url("https://voicewiki.cn/w/extrafiles/YSGoodBody.ttf") format("truetype"); font-style: normal; font-stretch: normal; font-weight: normal; } /* 暂时隐藏需要处理但还未处理的 DOM 节点,JavaScript 会在之后移除这个 class */ .template-render-cloak { display: none !important; visibility: hidden !important; } /* 使用占位图代替受损图像 */ .unresolved-image { display: inline-block !important; position: relative; box-sizing: border-box; color: transparent !important; border: 8px solid #242d38; background-color: #1a1f25; } .unresolved-image::after { content: "?"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: #fff !important; font-size: 1.5em; font-weight: 700; } /* 根据目测覆盖范围重新安排 font-family 使用顺序: "Exo 2" -> Latin Tajawal -> Latin + Arabic Jura -> 经测试 Jura 并不包含希腊字母字形 */ body * { font-family: "Exo 2", Tajawal, "Google Sans", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif; }/*全站字体*/ /**************************/ /* 样式统一修复与重置 */ /**************************/ body pre, body code { font-family: "Cascadia Code", "Ubuntu Mono", "Menlo", "Consolas", "Monaco", "Noto Mono", "Nimbus Mono L", monospace; } .color-display { display: inline-block; width: 1em; height: 1em; border-radius: 2px; vertical-align: middle; } .color-display.wide { width: 2.5em; } /**************************/ /* 顶部导航栏 */ /**************************/ body > #mw-content-container { margin-top: 4%; } /* 导航栏背景颜色 */ #cosmos-banner { background-color: #111032; } /* 图标颜色:无填充,只改描边 */ .cosmos-bannerOption-icon { fill: none; stroke: #41A5EE; } /* 旁边小箭头颜色 */ .cosmos-bannerOption-dropdownIcon { stroke: #39B54A; fill: #39B54A; } /* 旁边小箭头颜色 hover */ .cosmos-bannerOption:hover .cosmos-bannerOption-dropdownIcon { fill: #39B54A; stroke: #39B54A; } /* 图标颜色hover */ .cosmos-bannerOption:hover .cosmos-bannerOption-icon { stroke: #ffffff !important; } /* 搜索框文本和下划线颜色 */ #searchInput { color: #41A5EE !important; border-bottom: 2px solid #41A5EE; } /* 搜索框下划线颜色 */ #searchInput:enabled { border-bottom: 2px solid #41A5EE; } input[type="search"]::-webkit-input-placeholder { /* WebKit browsers */ color: #41A5EE !important; } input[type="search"]:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #41A5EE !important; } input[type="search"]::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #41A5EE !important; } input[type="search"]:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #41A5EE !important; }/*搜索框文本颜色*/ #cosmos-search-buttonContainer:hover #cosmos-search-buttonIcon { stroke: #ffffff !important; }/*搜索框放大镜hover颜色*/ .cosmos-userButton-label { color: #41A5EE; }/*用户名颜色*/ .cosmos-userOptions-personalTools:hover .cosmos-userButton-label { color: #ffffff; }/*用户名颜色hover*/ #cosmos-actionsList-list a:hover { background-color: transparent; } /* Echo */ .oo-ui-popupWidget-head { overflow: hidden; /*去除滚动条*/ } /* 表格展开和折叠文字 */ .mw-collapsible-text { text-shadow: 1px 1px #000000bd; } /**************************/ /* 主页面 */ /**************************/ body { background-image: url(/w/images/0/0e/BackgroundImage.jpg); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; }/*网站背景*/ body pre { background-color: rgba(17,17,17,0.91); color: #ffffff; border: 1px solid #cccccc; overflow: auto; padding: 12px; word-break: break-all; line-height: normal; font-family: monospace; font-size: 16px; } #cosmos-actionsList-list { background-color: #292929; border-color: #888888; color: #e6e6e6; border-bottom: none !important; } .cosmos-header { background-color: #111111; } .cosmos-header__sitename a:-webkit-any-link { color: #ffffff; font-size: 1.1em; }/*VoiceWiki的字体属性*/ .cosmos-header .wds-tabs .wds-tabs__tab-label a { color: #ffffff; } .cosmos-header .wds-tabs .wds-tabs__tab:hover .wds-tabs__tab-label a { color: #ffffff; } .cosmos-header::before{ background: #1d1d1f; background-image: #1d1d1f; } .cosmos-header .cosmos-header__counter { color: #ffffff; } .cosmos-header .wds-dropdown__content .wds-list.wds-is-linked li:hover > a:not(.wds-button) { background-color: rgba(0,108,176,0.1); color: #1d1d1f; } /**************************/ .mw-body h1.firstHeading{ border-bottom: none !important; color:#ffffff; } body h1 { border-bottom: none !important; color:#27d1f4; } #mw-content-text h2 { color: #27d1f4; padding-bottom: 2px !important; border: 0em; margin-top: 0em; margin-bottom: 0.5em; } #mw-content-text h2::after { content: " "; width: 100%; height: 6px; display: block; background-color: #ffef00; clip-path: polygon(0 0, 0 100%, 12% 100%, calc(12% + 8px) 1px, 100% 1px, 100% 0); margin-top: 0.2em; } #mw-content-text h3 { border: 0em; margin-top: 0em; margin-bottom: 0.5em; border-bottom: none !important; color:#27d1f4; } /* 目录标题 */ #mw-toc-heading { border-bottom: 0px !important; } #mw-toc-heading::after { display:none !important; } .mw-body h4 { color: #27d1f4 ; } .mw-body h5 { color: #27d1f4 ; } /**************************/ #mw-content .toctitle h2 { font-size: 20px; background-image: none !important; font-weight: 900; }/*目录的目录二字*/ .toc { background-color: transparent; border: 1px solid yellow; display: table; margin: 1em 0; max-width: 300px; padding: 10px; border-radius: 10px; }/*目录*/ #mw-content .toggleSymbol, .toctogglelabel { color: #FFF039; }/*目录编辑*/ .tocnumber { color: #27d1f4; font-family: "JetBrains Mono", monospace; } body #mw-content-text { color: #ffffff !important; }/*普通文本*/ #mw-content { background-color: rgba(17,17,17,0.91); border: 0 !important; } #mw-content a:not(.new){ color: #FFF039; }/*普通超链接*/ .mw-warning { background-color: #1d1d1f;} #filetoc { background-color: #1d1d1f;} .cosmos-button-primary { color: #000000; background-color: #27d1f4; stroke: #000000; stroke-width: 2px; } .cosmos-button.cosmos-button-secondary { color: #ffffff; stroke: #ffffff; stroke-width: 2px; } #cosmos-footer { background-color: rgba(17,17,17,0.91);} .cosmos-footerLinks-list { color: #ffffff;} .cosmos-footerLinks-list li a { color: #FFF039; } .cosmos-articleContainer{ color: #ffffff; } }/*监视列表*/ } .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend { background-color: darkgray;}/*监视列表*/ table.mw-datatable{ color:#ffffff;} .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive > .oo-ui-buttonElement-button { background-color: transparent; border-color: #447ff5;} #pagehistory li.selected { color: #27d1f4;} .mw-plusminus-pos { color: #00c100; } .mw-plusminus-neg { color: #e10000; } /* 注释 */ ol.references li:target, sup.reference:target { background-color: #eaf3ff69; } /* 搜索页面 */ .mw-search-profile-tabs { background-color: #444; margin-top: 1em; border: 1px solid #666; border-radius: 2px; } li.gallerybox div.thumb { border: 1px solid #c8ccd1; background-color: #202122; } /* 上传文件图片格子的背景 */ /**************************/ /* SM2的播放按钮 */ /**************************/ a.sm2_button, a.sm2_button.sm2_paused:hover { position: relative; display: inline-block; background-color: #ffef00; background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iPjxwYXRoIGQ9Ik05MTIuNzI0ODg0IDQyOS4zNTU2ODFMMjA4Ljc5NzU0NSAxMy4xOTg2MzhDMTUxLjYwMzQ0OS0yMC41OTc4NzQgNjQuMDEyNDkgMTIuMTk4NzQxIDY0LjAxMjQ5IDk1Ljc5MDExMlY5MjcuOTA0MjE5YzAgNzQuOTkyMjU5IDgxLjM5MTU5OSAxMjAuMTg3NTk0IDE0NC43ODUwNTUgODIuNTkxNDc1bDcwMy45MjczMzktNDE1Ljk1NzA2NGM2Mi43OTM1MTgtMzYuOTk2MTgxIDYyLjk5MzQ5OC0xMjguMTg2NzY4IDAtMTY1LjE4Mjk0OXoiIHAtaWQ9IjEzODQiPjwvcGF0aD48L3N2Zz4=); background-repeat: no-repeat; background-size: 40% 40%; background-position: 55% 50%; height: 3rem; width: 3rem; border-radius: 50%; margin: 2px 4px 2px 0px; } a.sm2_button:hover, a.sm2_button.sm2_playing, a.sm2_button.sm2_playing:hover { background-color: #d9cb00; } a.sm2_button.sm2_paused, a.sm2_button.sm2_paused:hover { background-color: #aca753; } /**************************/ /* 编辑界面 */ /**************************/ .mw-editform #wpTextbox1 { background-color: #1d1d1f; color: #ffffff; overflow: auto; } div.editOptions { padding: 1.25em 1.75em; border: solid #ffffff; border-width: 0 1px 0.2em; background: #1d1d1f; color: #ffffff; } .editOptions p { color: #ffffff; } .editOptions .oo-ui-fieldLayout-body .oo-ui-labelElement-label { color: #27d1f4; } #catlinks{ background-color:#1d1d1f; } /*其他*/ table.mw-enhanced-rc th, table.mw-enhanced-rc td { color: #ffffff; }/*监视列表*/ #pagehistory li.selected { background-color: transparent;} .oo-ui-fieldLayout-header { color: #ffffff;} .oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { background-color: transparent;} .diff-context { color: #ffffff;} html .thumbcaption { color: #1d1d1f;} /***********/ /*datatable*/ /***********/ .mw-datatable td { background-color: #1d1d1f; color: deepskyblue; }/*数据库表格*/ .mw-datatable th { background-color: transparent; }/*数据库表头*/ .mw-datatable tr:hover td { background-color: transparent; }/*文件hover*/ .oo-ui-labelElement { color: rgb(57,181,74) !important; } .oo-ui-labelElement .oo-ui-labelElement-label{ color: dodgerblue;} /* 黑幕模板配合CSS */ /* 把这几行单独拎出来写,否则会被Firefox合并到“.heimu a”这条规则,然后又被上面的“点过外链不变色”规则override */ .heimu, .heimu rt { background-color: #FFF039; } span.heimu a.external, span.heimu a.external:visited, span.heimu a.extiw, span.heimu a.extiw:visited { color: #FFF039; } .heimu, .heimu a, a .heimu, .heimu a.new { color: #FFF039; text-shadow: none; } body:not(.heimu_toggle_on) .heimu:hover, body:not(.heimu_toggle_on) .heimu:active, body:not(.heimu_toggle_on) .heimu.off { transition: color .13s linear; color: #1d1d1f; } body:not(.heimu_toggle_on) .heimu:hover a, body:not(.heimu_toggle_on) a:hover .heimu, body:not(.heimu_toggle_on) .heimu.off a, body:not(.heimu_toggle_on) a:hover .heimu.off { transition: color .13s linear; color: lightblue; } body:not(.heimu_toggle_on) .heimu.off .new, body:not(.heimu_toggle_on) .heimu.off .new:hover, body:not(.heimu_toggle_on) .new:hover .heimu.off, body:not(.heimu_toggle_on) .heimu:hover .new { transition: color .13s linear; color: #FCC; } /* 流彩英雄渐变文本 (Webkit only!) */ .text-chromatic { background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#b116ec),color-stop(0.5,#ff0021),color-stop(1,#fff11e)); background-image: -webkit-linear-gradient(left,#b116ec 0%,#ff0021 50%,#fff11e 100%); background-size: 1000% 1000%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; -webkit-animation: Text-Chromatic 6s linear infinite; color: #f88f25; /* Fallback color for non-webkit browsers */ white-space: nowrap; } @keyframes Text-Chromatic { 0% {background-position: 0% 50%} 50% {background-position: 100% 50%} 100% {background-position: 0% 50%} }/**/ /* 编辑器 */ .wikiEditor-ui-text .ace_scroller * { font-family: monospace; /* 修复光标错位 */ } /**************************/ /* 用户页面 */ /**************************/ .profile-on { color: #1d1d1f; } .profile-tab { font-size: smaller; } .profile-update-title { color: #27d1f4;} .wikitable{ background: dimgray; } .user-board-message-from { background-color: transparent; } .board-blast-message-form h2 { color: #27d1f4;} .blast-nav h2{ color: #27d1f4;} /**************************/ /* 全是关于MsUpload */ /**************************/ #msupload-list .green { background: silver; } #msupload-list .file { background: #1d1d1f; } #msupload-bottom { background-color: slategrey; } } ul#filetoc { text-align: center; border: 0px; background-color: transparent; } .wikitable:not([style*="background-color"]) > * > tr > td { background: content-box; } .mw-warning-with-logexcerpt { background-color: steelblue; border: none;} .wikiEditor-ui-toolbar .tabs span.tab a { color: #41A5EE !important;} /**************************/ /* 哔哩哔哩视频插入 */ /**************************/ .bilibili{ border: 0; padding: 0; width: 100%; height: 50vh; } .bilibili iframe{ border: 0; padding: 0; width: 100%; height: 100%; } /**************************/ /* 大家族模板 */ /**************************/ .sr-navbox { width: 100%; background: #111; border: 1px solid #444; } .sr-navbox-title { background: #444; padding: 10px 5px; text-align: left; } .sr-navbox-before, .sr-navbox-after { background: #333; padding: 5px; } .sr-navbox-content { width: 100%; border-collapse: separate; border-spacing: 3px; } .sr-navbox-subgroup-content { background: #111; margin: -13px; width: calc(100% + 26px); } .sr-navbox-group { padding: 10px 15px; background: #3A3A3A; #ffffff-space: nowrap; font-weight: bold; } .sr-navbox-subgroup-group { background: #2A2A2A; font-weight: bold; } .sr-navbox-list { padding: 10px; width: 100%; } .sr-navbox-list-even { background: #222; } .sr-navbox-collapsible .sr-navbox-list { padding: 0; } .sr-navbox-collapsible-content { width: 100%; background: #111; } .sr-navbox-collapsible-group { background: #3A3A3A; padding: 5px; } /**************************/ /* info类模板 */ /**************************/ .infoBox { margin: 0 auto; width: 100%; } .infoBoxTitle { margin: 3px auto; padding: 0; text-align: center; font-weight: 700; } .infoBoxIcon { display: table-cell; padding: 5px 0 5px 1.2em; vertical-align: middle; color:#14a0d3; font-size: 1.3em; } .infoBoxText { display: table-cell; padding: 0.8em 2.5em 0.8em 1em; width: 100%; text-align: center; vertical-align: middle; } .infoBoxContent { background: rgb(59 59 59 / 65%); border-radius: 7px; } .infoBoxBelow { margin: 0 auto; padding: 0; text-align: center; } /**************************/ /* 评论区 */ /**************************/ .comment-body { padding-top: 2rem; } .c-form-title { color: #fff; font-size: 1.75rem; margin-bottom: .5em; } .comments-body .c-form-button .site-button { margin: 0; padding: .25em .5em; line-height: 1.5; color: #f8ef00; border: 1px solid #f8ef00; background-color: transparent; transition: all 140ms ease-in-out; } .comments-body .c-form-button .site-button:focus, .comments-body .c-form-button .site-button:hover { background-color: #f8ef00; color: #000; } .comments-body .c-form-button .site-button + .site-button { margin-left: .25rem; } #comment { width: 100% !important; min-height: 100px; padding: .25rem .5rem; overflow: auto; color: #fff; background-color: transparent; #ffffff-space: pre; border: 1px solid #fff; outline: 0 !important; transition: border-color 140ms ease-in-out; } #comment:focus { border-color: #f8ef00; } .c-avatar img { border-radius: 50px; } .c-item { padding: 0; border-bottom: 1px solid #fff; } /* .c-item.c-layout { display: flex; flex-flow: row nowrap; } .c-item.c-layout .c-score, .c-item.c-layout .c-avatar { flex: 0 0 auto; position: static !important; } .c-item.c-layout .c-container { flex: 1 1 0; width: 0; } .c-item.c-layout .visualClear { display: none; } */ .c-item.reply { width: 90%; margin-left: 10% !important; } .c-item.full { width: 100%; } .r-message { width: 100%; } .f-message { width: 100%; } .fillet{ border-radius: 30px; display: inline-block; height: 30px; font-size: 17px; line-height: 30px; text-align: center; color: #1d1d1f !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 - 阿拉伯语 * it - 意大利语 */ :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); } :lang(it) + .tag { background-color: rgb(123, 148, 8); } /**************************/ /* 播放按钮和下载按钮 */ /**************************/ .audio-player { margin-right: .5rem; } .audio-player .audio-player-button { height: 3rem; width: 3rem; text-align: center; border: 1px solid rgb(0 0 0 / 15%); background-color: #f8ef00; border-radius: 50%; transition: all 140ms ease-in-out; outline: 0; background-size: 40% 40%; background-position: 56% 50%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iPjxwYXRoIGQ9Ik05MTIuNzI0ODg0IDQyOS4zNTU2ODFMMjA4Ljc5NzU0NSAxMy4xOTg2MzhDMTUxLjYwMzQ0OS0yMC41OTc4NzQgNjQuMDEyNDkgMTIuMTk4NzQxIDY0LjAxMjQ5IDk1Ljc5MDExMlY5MjcuOTA0MjE5YzAgNzQuOTkyMjU5IDgxLjM5MTU5OSAxMjAuMTg3NTk0IDE0NC43ODUwNTUgODIuNTkxNDc1bDcwMy45MjczMzktNDE1Ljk1NzA2NGM2Mi43OTM1MTgtMzYuOTk2MTgxIDYyLjk5MzQ5OC0xMjguMTg2NzY4IDAtMTY1LjE4Mjk0OXoiIHAtaWQ9IjEzODQiPjwvcGF0aD48L3N2Zz4="); } .audio-player .audio-player-button:hover, .audio-player .audio-player-button:focus { background-color: #c1ba00; } .audio-player .audio-player-button.audio-player-playing { /* 暂停图标好像有点往左歪了,微调一下 */ background-position: 51% 50%; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iPjxwYXRoIGQ9Ik0yMDIuNjA4IDBoMC41OTRxMTI5LjM4MyAwIDEyOS4zODMgMTI5LjM4MnY3NjUuMjM2cTAgMTI5LjM4Mi0xMjkuMzgzIDEyOS4zODJoLTAuNTk0cS0xMjkuMzgyIDAtMTI5LjM4Mi0xMjkuMzgyVjEyOS4zODJRNzMuMjI2IDAgMjAyLjYwOCAwek03ODQuNjI0IDBoMC41OTRROTE0LjYgMCA5MTQuNiAxMjkuMzgydjc2NS4yMzZROTE0LjYgMTAyNCA3ODUuMjE4IDEwMjRoLTAuNTk0cS0xMjkuMzgzIDAtMTI5LjM4My0xMjkuMzgyVjEyOS4zODJRNjU1LjI0MSAwIDc4NC42MjQgMHoiIHAtaWQ9IjIxMjEiPjwvcGF0aD48L3N2Zz4="); } .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: "<>" display: block; color: #000; background-color: #e8e000; } :lang(en) .downloadable-audio .audio-player::after { content: "<DropdownMenu>"; } :lang(zh) .downloadable-audio .audio-player::after { content: "<下拉菜单>"; } .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%; } .downloadable-audio .download-icon { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBkPSJNOCAxdjEwTTIgNWw2IDYgNi02TTIgMTJ2M2gxMnYtMyIgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMiIgZmlsbD0ibm9uZSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+PC9zdmc+"); background-repeat: no-repeat; background-size: 50%; background-position: center; } .downloadable-audio .download-link > a { display: block; color: transparent !important; width: 100%; height: 100%; outline: 0; overflow: hidden; user-select: none !important; } .downloadable-audio:focus-within, .downloadable-audio:hover { z-index: 5; } /* 在下载按钮被聚焦时保持下拉菜单张开状态? */ .downloadable-audio-dropdown:focus-within, .downloadable-audio:hover .downloadable-audio-dropdown { padding-top: 100%; } /* OverWatch Portrait */ .owportrait { position: relative; display: inline-block; } .owportrait > a { overflow: hidden; display: block; border: 3px solid #fff; border-left: 0; border-right: 0; border-radius: 10px; background-color: #777; transform: scale(0.92) skewX(-7.5deg); transition: all .14s cubic-bezier(0.33, 1, 0.68, 1); } .owportrait > a::before, .owportrait > a::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .owportrait > a:hover, .owportrait > a:focus { background-color: rgb(238,120,74); transform: scale(1) skewX(-7.5deg); } .owportrait img { margin: 0 -14px; transform: skewX(7.5deg); } .owportrait-name { display: none; /* Not useful for now */ position: absolute; left: 0; bottom: 0; } /* Kingdom Rush Chart */ .kr-table { border:2px solid #FFF039; border-collapse: collapse; margin: 10px; } .kr-table th { border:1px solid #FFF039; padding: 6px 12px; background-color: rgba(0,0,0,0.5); } .kr-table td { border:1px solid #FFF039; padding: 6px 12px; } /* 守望先锋职业 */ .ow-role { display: inline-block; background-color: #f0edf2; width: auto; padding: 0px 17px; border-radius: 3px; transform: skewX(-15deg); color:black; height:30px; line-height: 30px; font-size:17px; margin-left: 8px; } /* Quote模板 */ td.Quote_Left { line-height: 0.7em; vertical-align: top; text-align: right; } td.Quote_Right { line-height: 0.1em; vertical-align: bottom; text-align: left; } td.Quote_Left, td.Quote_Right { color: #0D9BE3; font-size: 40px; font-family: "Arial Black","Times New Roman",serif; font-weight: bold; width: 0px; } /* OW2 ICON */ .ow2-portrait { position: relative; display: inline-block; } .ow2-portrait img { margin: 0 -10px; } .ow2-portrait > a::before, .ow2-portrait > a::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .ow2-portrait > a { overflow: hidden; display: block; border-radius: 0.3em; border: 2px solid #b3b3b3; background: #f3f7fc; transform: scale(0.95); transition: all .14s cubic-bezier(0.33, 1, 0.68, 1); } .ow2-portrait > a:hover, .ow2-portrait > a:focus { border-radius: 0.3em; border: 2px solid #fff; background: #f3f7fc; transform: scale(1); } /* HOI FLAG ICON */ .hoi-flag { position: relative; display: inline-block; } .hoi-flag > a::before, .hoi-flag > a::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .hoi-flag > a { overflow: hidden; display: block; border-radius: 0.3em; border: 2px solid transparent; transform: scale(0.90); transition: all .14s cubic-bezier(0.33, 1, 0.68, 1); } .hoi-flag > a:hover, .hoi-flag > a:focus { border-radius: 0.3em; border: 2px solid transparent; transform: scale(1); } /* 投票Style */ .ajaxpoll-id-info { display: none; } .ajaxpoll { width: 100%; background: rgb(59 59 59 / 65%); border-radius: 10px; border: 1px solid #FFF039; } .ajaxpoll .ajaxpoll-our-vote div { border: 2px solid #121215; top: -2px; left: -2px; } .ajaxpoll .ajaxpoll-answer-vote div { background: #0075ff; position: absolute; top: 0; left: 0; height: 15px; font-size: 1px; line-height: 12px; z-index: 2; border-radius: 10px; box-shadow: 0px 0px 0px 1px inset #ffffff; top: -2px; left: -2px; } .ajaxpoll .ajaxpoll-answer-vote span { position: absolute; top: 0px; left: 3%; z-index: 4; } .ajaxpoll .ajaxpoll-answer-vote { border: 2px solid #121215; width: 100%; margin-left: 0; height: 15px; font-size: 10px; position: relative; border-radius: 10px; margin: 1em 0px; box-shadow: 1px 1px 4px 0px inset #080808; background: #121215; } .ajaxpoll .ajaxpoll-ajax { background: #0075ff; padding: 4px 11px; border-radius: 0.5em; margin-bottom: 1em; } .krhero img { border: 3px solid #ffef00; border-radius: 0.4em; } /* GTA Vice City */ .gtavcp { font-family: pricedown; color: #f8a5e3; font-size: 1.3em; } .gtavcp-image img { border: 5px solid #f8a5e3; border-radius: 0.5em; margin: 0 0.5em; } .gtavcr-image img { filter: drop-shadow(1px 1px white); margin: 1em 0.5em; } .gtavcr a { font-family: pricedown; color: #5ac0ef !important; font-size: 1.3em; } /*悬浮文本*/ .hover-text { text-align: center; color: #000; font-size: 0.85em; background-color: #f8ef00; padding: 2px 5px; margin: 0px 3px; border-radius: 2px; display: none; white-space: nowrap; } .pic-hover-text:hover .hover-text{ display: initial; } .ow2-small-icon img{ border:1px solid white; display: inline-block; padding: 2px; margin:0px 3px; border-radius: 2px; } /* BS ICON */ .bs-portrait { position: relative; display: inline-block; } .bs-portrait img { margin: 0 -6px; } .bs-portrait > a::before, .bs-portrait > a::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .bs-portrait > a { overflow: hidden; display: block; border-radius: 0.3em; border: 2px solid #b3b3b3; background: #f3f7fc; transform: scale(0.9); transition: all .14s cubic-bezier(0.33, 1, 0.68, 1); } .bs-portrait > a:hover, .bs-portrait > a:focus { border-radius: 0.3em; border: 2px solid #fff; background: #f3f7fc; transform: scale(1); } .bs-quality-bar { text-align: center; border-radius: 3px; padding: 0.5em 0; box-shadow: inset 0px -5px 0 rgb(0 0 0 / 15%), inset 0px 5px 0 rgb(255 255 255 / 15%); font-size: 1.2em; color: black; width: 100%; margin: 1em 0px; } .bs-pin-header { height: 40px; font-size: 17px; font-weight: 900; line-height: 40px; border: 0 none #87a4bf; color: black; box-shadow: inset 0 -6px 0 rgba(0,0,0,0.15), inset 0 6px 0 rgba(255,255,255,0.05); border-collapse: collapse; } /* 王者荣耀ICON */ .hok-hero-icon { position: relative; display: inline-block; } .hok-hero-icon > a::before, .hok-hero-icon > a::after { content: " "; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .hok-hero-icon > a { overflow: hidden; display: block; border: 2px solid #e4c289; border-radius: 10px 0 10px 0; transform: scale(0.90); transition: all .14s cubic-bezier(0.33, 1, 0.68, 1); } .hok-hero-icon > a:hover, .hhok-hero-icon > a:focus { transform: scale(1); } /*小型可变色按钮*/ .audio-player-s { margin-right: .5rem; } .audio-player-s .audio-player-button-s { height: 1rem; width: 1rem; text-align: center; border: 1px solid rgb(0 0 0 / 15%); background-color: #f8a5e3; border-radius: 2px; transition: all 140ms ease-in-out; outline: 0; background-size: 40% 40%; background-position: 56% 50%; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iPjxwYXRoIGQ9Ik05MTIuNzI0ODg0IDQyOS4zNTU2ODFMMjA4Ljc5NzU0NSAxMy4xOTg2MzhDMTUxLjYwMzQ0OS0yMC41OTc4NzQgNjQuMDEyNDkgMTIuMTk4NzQxIDY0LjAxMjQ5IDk1Ljc5MDExMlY5MjcuOTA0MjE5YzAgNzQuOTkyMjU5IDgxLjM5MTU5OSAxMjAuMTg3NTk0IDE0NC43ODUwNTUgODIuNTkxNDc1bDcwMy45MjczMzktNDE1Ljk1NzA2NGM2Mi43OTM1MTgtMzYuOTk2MTgxIDYyLjk5MzQ5OC0xMjguMTg2NzY4IDAtMTY1LjE4Mjk0OXoiIHAtaWQ9IjEzODQiPjwvcGF0aD48L3N2Zz4="); } .audio-player-s .audio-player-button-s:hover, .audio-player-s .audio-player-button-s:focus { background-color: #d55fb7; } .audio-player-s .audio-player-button-s.audio-player-playing-s { /* 暂停图标好像有点往左歪了,微调一下 */ background-position: 51% 50%; background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjFlbSIgaGVpZ2h0PSIxZW0iPjxwYXRoIGQ9Ik0yMDIuNjA4IDBoMC41OTRxMTI5LjM4MyAwIDEyOS4zODMgMTI5LjM4MnY3NjUuMjM2cTAgMTI5LjM4Mi0xMjkuMzgzIDEyOS4zODJoLTAuNTk0cS0xMjkuMzgyIDAtMTI5LjM4Mi0xMjkuMzgyVjEyOS4zODJRNzMuMjI2IDAgMjAyLjYwOCAwek03ODQuNjI0IDBoMC41OTRROTE0LjYgMCA5MTQuNiAxMjkuMzgydjc2NS4yMzZROTE0LjYgMTAyNCA3ODUuMjE4IDEwMjRoLTAuNTk0cS0xMjkuMzgzIDAtMTI5LjM4My0xMjkuMzgyVjEyOS4zODJRNjU1LjI0MSAwIDc4NC42MjQgMHoiIHAtaWQ9IjIxMjEiPjwvcGF0aD48L3N2Zz4="); }