◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“MediaWiki:Gadget-chibiAnimation.css”的版本间的差异
Mikumikuer(讨论 | 贡献) 小 (导入1个版本) |
Mikumikuer(讨论 | 贡献) |
||
第3行: | 第3行: | ||
width: 240px; | width: 240px; | ||
height: 180px; | height: 180px; | ||
− | |||
− | |||
justify-content: center; | justify-content: center; | ||
align-items: center; | align-items: center; |
2018年12月12日 (三) 23:17的版本
.tdoll_chibi {
display: flex;
width: 240px;
height: 180px;
justify-content: center;
align-items: center;
position: relative;
}
.tdoll_chibi .chibiAnimation {
flex-shrink: 0;
pointer-events: none;
}
.chibiAnimationClickArea {
width: 240px;
height: 180px;
position: absolute;
}
.chibiDormSwitcher {
height: 60px;
width: 70px;
position: absolute;
left: -10px;
bottom: 3px;
overflow: visible;
opacity: 0.5;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
text-shadow: none;
z-index: 50;
background-image: url('/images/1/12/Dorm.png');
background-size: 60%;
background-position: center top;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: center;
}
.artTabLive2dSwitch {
background-image: url('/images/a/a3/live2d-logo.png');
background-size: 75%;
height: 70px;
left: -5px;
bottom: 10px;
}
.chibiDormSwitcher:hover {
opacity:1;
}
.chibiDormSwitcher .slideButton {
display:flex;
-webkit-box-align: center; -moz-box-align: center; /* OLD… */
-ms-flex-align: center; /* You know the drill now… */
-webkit-align-items: center;
align-items: center;
width: 36px;
height: 12px;
background: #777;
border: 2px solid #666;
position: absolute;
border-radius: 50px;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
}
.chibiDormSwitcher input[type=checkbox] {
visibility: hidden;
}
.chibiDormSwitcher input[type=checkbox]:checked ~ div>label {
left: 22px;
}
.chibiDormSwitcher input[type=checkbox]:checked ~ .slideButton {
background: #ff6225;
border: 2px solid #ff4215;
}
.chibiDormSwitcher input[type=checkbox]:checked ~ div>.texton {
display: block;
position: absolute;
}
.chibiDormSwitcher input[type=checkbox]:checked ~ div>.textoff {
display: none;
}
.chibiDormSwitcher .slideButton label {
display: block;
width: 16px;
height: 16px;
position: absolute;
top: -3px;
left: -3px;
cursor: pointer;
background: #fcfff4;
border-radius: 50px;
border: 1px solid lightgray;
transition: all 0.4s ease;
}
.chibiDormSwitcher .texton, .chibiDormSwitcher .textoff {
color: white;
pointer-events: none;
display: none;
font-size: 10px;
font-weight: 500;
}
.chibiDormSwitcher .title {
background-color: #833b0f;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
height: 14px;
display: block;
color: white;
font-size: 0.7em;
text-align: center;
}
.chibiDormSwitcher .slideButton .textoff {
display: block;
position: absolute;
letter-spacing: 0px;
left: 16px;
}
.chibiDormSwitcher .slideButton .texton {
left: 2px;
}
.chibiDormSwitcher img {
position: absolute;
height: auto;
width: 40px;
margin: -20px 0 0 12px;
}