MediaWiki:Common.css
来自Amon个人分享
注意：在发布之后，您可能需要清除浏览器缓存才能看到所作出的变更的影响。
- Firefox或Safari：按住Shift的同时单击刷新，或按Ctrl-F5或Ctrl-R（Mac为⌘-R）
- Google Chrome：按Ctrl-Shift-R（Mac为⌘-Shift-R）
- Internet Explorer或Edge：按住Ctrl的同时单击刷新，或按Ctrl-F5
- Opera：按 Ctrl-F5。
/* 这里放置的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=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://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css'); /* FA 字体图标 */
@import url('https://voicewiki.cn/w/extrafiles/font-awesome-animation.min.css'); /* FA 字体动画 */
@import url("https://fonts.googleapis.com/css?family=Lilita+One|Berkshire+Swash");
/*全站字体*/
body,.mw-body h1, #personal h2,#p-logo-text a,.mw-body h3, .mw-body h4{
font-family: Montserrat, Tajawal, "Google Sans", "Noto Sans SC", "Helvetica Neue", Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "Heiti SC", sans-serif;
}
#p-logo-text {
font-weight: bold;
display: none;
}
/*图片下载*/
.download-button {
box-sizing: border-box;
position: relative;
width: 50px;
height: 50px;
cursor: pointer;
transition: background-color 140ms ease-in-out;
}
.download-link {
position: absolute;
display: block;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.download-link > a {
display: block;
color: transparent !important;
width: 100%;
height: 100%;
outline: 0;
overflow: hidden;
user-select: none !important;
}
/*隐藏目录*/
#toc {
display:none;
}
.mw-body h2 {
background-color: #383d44;
margin: 0px 0px 10px 0px;
display: inline-block;
width: 100%;
height: 40px;
font-size: 20px;
/*font-weight: bold;*/
line-height: 40px;
text-align: center;
box-shadow: inset 0 -6px 0 rgb(0 0 0 / 15%), inset 0 6px 0 rgb(255 255 255 / 5%);
border: 0px solid rgba(0,0,0,0.4);
font-family:'Lilita One', "PingFang SC", "Google Sans", "Noto Sans SC", sans-serif;
color: #ffffff;
}
.mw-editsection {
display: none;
}
.ace_content {
font-family:monospace !important;
}
.brawler_rarity{
border-radius: 30px;
display: inline-block;
height: 30px;
font-size: 17px;
line-height: 30px;
text-align: center;
color: #1d1d1f !important;
border: 1px solid #1d1d1f;
width: 90px;
box-shadow: 0px 3px black;
}
.indexbg_upper {
width: 100%;
height: 100%;
margin: 0px;
-webkit-animation: bs-bg-move 40s infinite linear;
/* Chrome, Safari, Opera */
animation: bs-bg-move 40s infinite linear;
overflow: hidden;
}
.bg-el-brawler{background: url(/w/images/d/d8/BS_bgElement_brawler.png) repeat 0% 0%, transparent; }
.bg-el-football{background: url(/w/images/1/1e/BS_bgElement_Football.png) repeat 0% 0%, transparent; }
.bg-el-make{background: url(/w/images/1/11/BS_bgElement_scmake.png) repeat 0% 0%, transparent; }
.bg-el-ghost{background: url(/w/images/0/03/BS_bgElement_ghost.png) repeat 0% 0%, transparent; }
.bg-el-star{background: url(/w/images/3/3f/BS_bgElement_star.png) repeat 0% 0%, transparent; }
.bg-el-coin{background: url(/w/images/5/5f/BS_bgElement_coin.png) repeat 0% 0%, transparent; }
.bg-el-pig{background: url(/w/images/6/65/BS_bgElement_pig.png) repeat 0% 0%, transparent; }
.bg-el-rat{background: url(/w/images/5/5a/BS_bgElement_rat.png) repeat 0% 0%, transparent; }
.bg-el-bull{background: url(/w/images/5/5e/BS_bgElement_bull.png) repeat 0% 0%, transparent; }
.bg-el-snow{background: url(/w/images/e/e2/BS_bgElement_snow.png) repeat 0% 0%, transparent; }
.bg-el-pass{background: url(/w/images/2/2a/BS_bgElement_BrawlPass.png) repeat 0% 0%, transparent; }
.bg-el-brawlywood{background: url(/w/images/1/14/BS_bgElement_Brawlywood.png) repeat 0% 0%, transparent; }
.bg-el-powerleague{background: url(/w/images/8/8e/BS_bgElement_powerLeague.png) repeat 0% 0%, transparent; }
.bg-el-worldfinal{background: url(/w/images/7/79/BS_bgElement_worldFinal.png) repeat 0% 0%, transparent; }
.bg-el-pirate{background: url(/w/images/e/ea/BS_bgElement_pirate.png) repeat 0% 0%, transparent; }
.bg-el-brawlentine{background: url(/w/images/8/8c/BS_bgElement_Brawlentine.png) repeat 0% 0%, transparent; }
.bg-el-tiger{background: url(/w/images/c/ca/BS_bgElement_tiger.png) repeat 0% 0%, transparent; }
.bg-el-clubleague{background: url(/w/images/2/2b/BS_bgElement_ClubLeague.png) repeat 0% 0%, transparent; }
.bg-el-biodome{background: url(/w/images/9/98/BS_bgElement_biodome.png) repeat 0% 0%, transparent; }
.bg-el-badrandom{background: url(/w/images/a/a8/BS_bgElement_BadRandoms.png) repeat 0% 0%, transparent; }
.bg-el-line{background: url(/w/images/d/db/BS_bgElement_line.png) repeat 0% 0%, transparent; }
.bg-el-legendary{background: url(/w/images/7/71/BS_bgElement_LegendarySkin.png) repeat 0% 0%, transparent; }
.bg-el-retro{background: url(/w/images/f/f8/BS_bgElement_Retropolis.png) repeat 0% 0%, transparent; }
.bg-el-stuntshow{background: url(/w/images/b/bc/BS_bgElement_stuntshow.png) repeat 0% 0%, transparent; }
.bg-el-theworstbunch{background: url(/w/images/9/98/BS_bgElement_theworstbunch.png) repeat 0% 0%, transparent; }
.bg-el-lantern{background: url(/w/images/d/db/BS_bgElement_lantern.png) repeat 0% 0%, transparent; }
.bg-el-goldenweek{background: url(/w/images/1/13/BS_bgElement_goldenweek.png) repeat 0% 0%, transparent; }
.bg-el-deepsea{background: url(/w/images/e/ef/BS_bgElement_deepsea.png) repeat 0% 0%, transparent; }
.bg-el-mecha{background: url(/w/images/2/2d/BS_bgElement_mecha.png) repeat 0% 0%, transparent; }
.bg-el-outlaw{background: url(/w/images/4/4d/BS_bgElement_outlaw.png) repeat 0% 0%, transparent; }
.bg-el-action{background: url(/w/images/0/01/BS_bgElement_action.png) repeat 0% 0%, transparent; }
.bg-el-omegabox{background: url(/w/images/1/15/BS_bgElement_omegabox.png) repeat 0% 0%, transparent; }
.bg-el-candy{background: url(/w/images/f/f4/BS_bgElement_candy.png) repeat 0% 0%, transparent; }
.bg-el-rabbit{background: url(/w/images/b/b6/BS_bgElement_rabbit.png) repeat 0% 0%, transparent; }
.bg-el-darkxmas{background: url(/w/images/a/ae/BS_bgElement_darkXmas.png) repeat 0% 0%, transparent; }
.bg-el-heartlock{background: url(/w/images/8/8b/BS_bgElement_heartLock.png) repeat 0% 0%, transparent; }
.bg-el-hub{background: url(/w/images/7/76/BS_bgElement_hub.png) repeat 0% 0%, transparent; }
.bg-el-easter{background: url(/w/images/c/cc/BS_bgElement_easteregg.png) repeat 0% 0%, transparent; }
.bg-el-bunny{background: url(/w/images/c/ce/BS_bgElement_bunny.png) repeat 0% 0%, transparent; }
.bg-el-mask{background: url(/w/images/a/a0/BS_bgElement_mask.png) repeat 0% 0%, transparent; }
.bg-el-max{background: url(/w/images/8/80/BS_bgElement_max.png) repeat 0% 0%, transparent; }
.bg-el-frog{background: url(/w/images/1/14/BS_bgElement_frog.png) repeat 0% 0%, transparent; }
.bg-el-castle{background: url(/w/images/f/f0/BS_bgElement_castle.png) repeat 0% 0%, transparent; }
.bg-el-god{background: url(/w/images/7/71/BS_bgElement_god.png) repeat 0% 0%, transparent; }
.bg-el-jungle{background: url(/w/images/a/a4/BS_bgElement_jungle.png) repeat 0% 0%, transparent; }
.indexbg_below {
position: absolute;
width: 100%;
height: 100%;
margin: 0px;
}
/* 金色渐变文本 (Webkit only!) */
.text-golden {
background-image: -webkit-gradient(linear,left top,right top,color-stop(0,#ffffad),color-stop(0.5,#946d21),color-stop(1,#d3ab60));
background-image: -webkit-linear-gradient(left,#ffffad 0%,#946d21 50%,#d3ab60 100%);
background-size: 1000% 1000%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: Text-Golden 6s linear infinite;
color: #fff400; /* Fallback color for non-webkit browsers */
white-space: nowrap;
}
@keyframes Text-Golden {
0% {background-position: 0% 50%}
50% {background-position: 100% 50%}
100% {background-position: 0% 50%}
}/**/
/* Chrome, Safari, Opera */
@-webkit-keyframes bs-bg-move {
0% {
background-position-x: 0px, 0%;
background-position-y: 0px, 0%;
}
100% {
background-position-x: 600px, 0%;
background-position-y: -1085px, 0%;
}
}
/* Standard syntax */
@keyframes mymove {
0% {
background-position-x: 0px, 0%;
background-position-y: 0px, 0%;
}
100% {
background-position-x: 600px, 0%;
background-position-y: -1085px, 0%;
}
}
/*neon effect*/
.neon-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin: auto;
background: #1d1d1f;
}
.neon-effect-purple {
margin: 0 !important;
font-weight: 900;
font-family: 'Jura';
text-align: center;
display: block;
letter-spacing: 0.1em;
color: #88e;
text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
animation: neonpurple 300ms ease infinite alternate;
}
.neon-effect-pink {
margin: 0 !important;
font-weight: 900;
font-family: 'Jura';
text-align: center;
display: block;
letter-spacing: 0.1em;
color: #f99;
text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
animation: neonpink 300ms ease infinite alternate;
}
@keyframes neonpurple {
0% {
text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #aaf;
}
50% {
text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #aaf, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
}
75% {
text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #aaf, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
}
100% {
text-shadow: 0 0 0.3em rgba(200, 200, 255, 0.4), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #88e, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #66c, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #44a;
}
}
@keyframes neonpink {
0% {
text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #faa;
}
50% {
text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #faa, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
}
75% {
text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #faa, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
}
100% {
text-shadow: 0 0 0.3em rgba(255, 100, 200, 0.3), 0.04em 0.04em 0 #112, 0.045em 0.045em 0 #f99, 0.09em 0.09em 0 #112, 0.095em 0.095em 0 #b66, 0.14em 0.14em 0 #112, 0.145em 0.145em 0 #a44;
}
}
/*new version of card*/
.char-two{
position: absolute;
left: 500px;
top: 95px;
}
.char-image{
position: relative;
/*pointer-events: none; */
}
/*main portrait*/
.char-text-name-zh {
font-size: 48px;
font-weight: bold;
font-family: "Lilita One", sans-serif;
}
.char-text-name-en {
font-family: "Lilita One", sans-serif;
font-size: 24px;
}
.char-text-price {
font-family: "Lilita One", sans-serif;
font-size: 30px;
}
.row {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.text-stroke {
color: #fff;
text-shadow:
-1px 1px 0px #000,
-1px -1px 0px #000,
1px -1px 0px #000,
1px 1px 0px #000,
-1px 0px 0px #000,
0px -1px 0px #000,
1px 0px 0px #000,
0px 1px 0px #000,
0px 3px 0px #000;
}
.char-name-badge {
z-index: 1;
position: absolute;
left: 0;
top: 0;
padding: 25px 40px;
line-height:1.1;
}
.char-skin-price {
position: absolute;
left: 0;
bottom: 0;
padding: 25px 40px;
}
.char-right {
position: absolute;
right: 45px;
top: 0;
padding-right: 0px;
padding-top: 25px;
z-index:1;
}
.char-image-box {
position: relative;
top: 43px;
left: 53px;
}
.char-logo-desp {
text-align: center;
color: #fff;
font-size: 15px;
background-color: #1e1e1e;
padding: 7px 10px;
margin: -4px 7px;
border-radius: 30px;
border: 2px solid #787878;
display: none;
white-space: nowrap;
}
.char-info-desp{
text-align:right;
position: absolute;
color: #fff;
font-size: 15px;
background-color: #1e1e1e;
padding: 8px 14px;
border-radius: 30px;
border: 2px solid #787878;
top: 36px;
right: 115px;
display: none;
white-space: nowrap;
}
.char-dl-desp{
text-align:center;
position: absolute;
color: #fff;
font-size: 15px;
background-color: #1e1e1e;
padding: 8px 14px;
border-radius: 30px;
border: 2px solid #787878;
top: 88px;
right: -19px;
display: none;
}
.char-logo-button:hover .char-logo-desp{
display: initial;
}
.char-info-button:hover .char-info-desp{
display: block;
}
.char-dl-button:hover .char-dl-desp{
display: block;
}
.char-skin-pin{
position: absolute;
bottom: 25px;
right: 55px;
}
/**************************/
/* 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;
width: 100%;
text-align: center;
vertical-align: middle;
padding: 0.8em 2.5em 0.8em 1em;
}
.infoBoxContent {
border: 1px solid black;
border-radius: 7px;
margin-bottom: 0.6em;
}
.infoBoxBelow {
margin: 0 auto;
padding: 0;
text-align: center;
}
/* BS ICON */
.bs-portrait {
position: relative;
display: inline-block;
}
.bs-portrait img {
margin: -7px -9px;
}
.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 #525252;
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 #858585;
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 BANNER */
.bs-banner {
position: relative;
display: inline-block;
}
.bs-banner img {
margin: -7px -9px;
}
.bs-banner > a::before,
.bs-banner > a::after {
content: " ";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.bs-banner > a {
overflow: hidden;
display: block;
border-radius: 1.5em 0 1.5em 0;
border: 2px solid #525252;
background: #f3f7fc;
transform: scale(0.95);
transition: all .14s cubic-bezier(0.33, 1, 0.68, 1);
}
.bs-banner > a:hover,
.bs-banner > a:focus {
border-radius: 1.5em 0 1.5em 0;
border: 2px solid #858585;
background: #f3f7fc;
transform: scale(1);
}
