◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“MediaWiki:Gadget-chibiAnimation.css”的版本间的差异
(更新) |
(更新) |
||
第245行: | 第245行: | ||
position: fixed; | position: fixed; | ||
top: 80px; | top: 80px; | ||
− | width: | + | width: 300px; |
− | padding: 30px | + | padding: 30px 15px; |
background-color: #222; | background-color: #222; | ||
border: 1px solid #aaa; | border: 1px solid #aaa; |
2021年5月16日 (日) 01:17的版本
.tdoll_chibi {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.tdoll_chibi canvas,.commander-chibi canvas{
pointer-events: none !important;
}
.tdoll_chibi .chibiAnimation {
flex-shrink: 0;
pointer-events: none;
position:absolute;
}
.chibiAnimationClickArea {
width: 100%;
height: 100%;
position: absolute;
}
.chibiDormSwitcher {
position: absolute;
left: 3px;
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: 0;
background-image: url(//www.gfwiki.org/images/1/12/Dorm.png);
background-size: 100%;
background-position: center top;
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: center;
height: 90px;
}
.artTabLive2dSwitch {
background-image: url('/images/a/a3/live2d-logo.png');
background-size: 75%;
height: 70px;
left: -5px;
bottom: 10px;
}
.chibiDormSwitcher:hover {
opacity:1;
}
.chibiDormSwitcher input[type="checkbox"] {
display: none;
}
.chibiDormSwitcher input[type=checkbox] + div>label {
cursor: pointer;
font-size: 1em;
}
.chibiDormSwitcher input[type=checkbox] + div>label {
background-color: #fafbfa;
padding: 9px;
display: inline-block;
position: relative;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
width: 40px;
height: 5px;
}
.chibiDormSwitcher input[type=checkbox] + div>label:after {
content: ' ';
position: absolute;
top: 0;
-webkit-transition: box-shadow 0.1s ease-in;
transition: box-shadow 0.1s ease-in;
left: 0;
width: 100%;
height: 100%;
box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);
}
.chibiDormSwitcher input[type=checkbox] + div>label:before {
content: ' ';
position: absolute;
background: #555;
top: 1px;
left: 3px;
z-index: 100;
width: 25px;
-webkit-transition: all 0.1s ease-in;
transition: all 0.1s ease-in;
height: 17px;
margin: 2px 0px;
box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);
}
.chibiDormSwitcher input[type=checkbox]:active + div>label:after {
box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
}
.chibiDormSwitcher input[type=checkbox]:active + div>label:before {
width: 35px;
}
.chibiDormSwitcher input[type=checkbox]:checked:active + div>label:before {
width: 35px;
left: 20px;
}
.chibiDormSwitcher input[type=checkbox] + div>label:active {
box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}
.chibiDormSwitcher input[type=checkbox]:checked + div>label:before {
content: ' ';
position: absolute;
left: 30px;
}
.chibiDormSwitcher input[type=checkbox]:checked + div>label:after {
content: ' ';
font-size: 1.5em;
position: absolute;
background: #f4c430;
}
.chibiScreenshotButton {
position: absolute;
top: 5px;
left: 5px;
width: 25px;
height: 23px;
border-bottom: 1px solid #eaeaea;
display: inline-block;
text-align: center;
color:white;
background-color: #222;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
opacity: 0.5;
}
.chibiScreenshotButton::after {
content: "\f030";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
font-variant: normal;
text-rendering: auto;
line-height: 100%;
font-size: 1rem;
padding-top: 2%;
}
.chibiScreenshotButton:hover {opacity: 1;}
.chibiDormButton {
position: absolute;
left: 35px;
top: 5px;
width: 25px;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background-image: url(http://www.gfwiki.org/images/4/49/Dorm2.png);
background-position-x: center;
background-position-y: 2px;
background-repeat: no-repeat;
height: 23px;
border-bottom: 1px solid #eaeaea;
background-color: #222;
cursor: pointer;
opacity: 0.5;
}
.chibiDormButton:hover {opacity: 1;}
.chibiDormButton.stateon {
border-bottom: 3px double #fff;
height: 22px;
filter: invert(1);
}
.chibiAnimationInfo {
position: absolute;
left: 65px;
top: 5px;
width: 25px;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background-image: url(http://www.gfwiki.org/images/7/7d/Infomation_icon.png);
background-position-x: center;
background-position-y: 2px;
background-repeat: no-repeat;
height: 23px;
border-bottom: 1px solid #eaeaea;
background-color: #222;
cursor: pointer;
opacity: 0.5;
}
.chibiAnimationInfo:hover {
opacity: 1;
}
.chibiAnimationInfoShow {
position: fixed;
top: 80px;
width: 300px;
padding: 30px 15px;
background-color: #222;
border: 1px solid #aaa;
border-radius: 3px;
z-index: 100;
}
.chibiAnimationInfoShowLine {
padding: 20px 5px;
border-bottom: 1px solid #555;
text-align: center;
}
.chibiAnimationInfoShowLine div {
display: inline-block;
width: 33%;
}
.chibiAnimationInfoShowClose {
position: absolute;
top: 4px;
right: 12px;
text-align: center;
font-size: 25px;
font-weight: bold;
color: #eaeaea;
cursor: pointer;
user-select: none;
}
.chibiAnimationInfoShowClose:hover {
text-shadow: 0 0 6px white;
}
select.chibiAnimationSelect {
position: absolute;
top: 5px;
left: 95px;
width: 80px;
height: 24px;
background-color: #222;
color: #eaeaea;
font-size: 15px;
font-family: 'Linux Libertine','Georgia','Times',serif;
text-transform: capitalize;
border: none;
border-bottom: 1px solid #eaeaea;
cursor: pointer;
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;
}
select.chibiAnimationSelect:hover {
opacity: 1;
}
select.chibiAnimationSelect:focus-visible {
outline: none;
}