◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“MediaWiki:Gadget-chibiAnimation.css”的版本间的差异
(测试) |
(更新) |
||
第1行: | 第1行: | ||
.tdoll_chibi { | .tdoll_chibi { | ||
− | + | display: flex; | |
− | + | justify-content: center; | |
− | + | align-items: center; | |
− | + | position: relative; | |
} | } | ||
.tdoll_chibi canvas,.commander-chibi canvas{ | .tdoll_chibi canvas,.commander-chibi canvas{ | ||
− | + | pointer-events: none !important; | |
} | } | ||
.tdoll_chibi .chibiAnimation { | .tdoll_chibi .chibiAnimation { | ||
− | + | flex-shrink: 0; | |
− | + | pointer-events: none; | |
− | + | position:absolute; | |
} | } | ||
.chibiAnimationClickArea { | .chibiAnimationClickArea { | ||
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | position: absolute; | |
} | } | ||
第42行: | 第42行: | ||
} | } | ||
.artTabLive2dSwitch { | .artTabLive2dSwitch { | ||
− | + | background-image: url('/images/a/a3/live2d-logo.png'); | |
− | + | background-size: 75%; | |
− | + | height: 70px; | |
− | + | left: -5px; | |
− | + | bottom: 10px; | |
} | } | ||
第54行: | 第54行: | ||
.chibiDormSwitcher input[type="checkbox"] { | .chibiDormSwitcher input[type="checkbox"] { | ||
− | + | display: none; | |
} | } | ||
.chibiDormSwitcher input[type=checkbox] + div>label { | .chibiDormSwitcher input[type=checkbox] + div>label { | ||
− | + | cursor: pointer; | |
− | + | font-size: 1em; | |
} | } | ||
.chibiDormSwitcher input[type=checkbox] + div>label { | .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 { | .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 { | .chibiDormSwitcher input[type=checkbox] + div>label:before { | ||
− | + | content: ' '; | |
− | + | ||
− | + | ||
− | + | ||
− | + | position: absolute; | |
background: #555; | 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; | margin: 2px 0px; | ||
− | + | ||
box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3); | 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 { | .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 { | .chibiDormSwitcher input[type=checkbox]:active + div>label:before { | ||
− | + | ||
− | + | width: 35px; | |
− | + | ||
} | } | ||
− | + | ||
.chibiDormSwitcher input[type=checkbox]:checked:active + div>label:before { | .chibiDormSwitcher input[type=checkbox]:checked:active + div>label:before { | ||
− | + | ||
− | + | width: 35px; | |
− | + | ||
− | + | left: 20px; | |
− | + | ||
} | } | ||
− | + | ||
.chibiDormSwitcher input[type=checkbox] + div>label:active { | .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 { | .chibiDormSwitcher input[type=checkbox]:checked + div>label:before { | ||
− | + | ||
− | + | content: ' '; | |
− | + | ||
− | + | position: absolute; | |
− | + | ||
− | + | left: 30px; | |
− | + | ||
} | } | ||
− | + | ||
.chibiDormSwitcher input[type=checkbox]:checked + div>label:after { | .chibiDormSwitcher input[type=checkbox]:checked + div>label:after { | ||
− | + | ||
− | + | content: ' '; | |
− | + | ||
− | + | font-size: 1.5em; | |
− | + | ||
− | + | position: absolute; | |
− | + | ||
− | + | background: #f4c430; | |
− | + | ||
} | } | ||
第188行: | 第188行: | ||
} | } | ||
− | .chibiScreenshotButton:hover {opacity: 1;} | + | .chibiScreenshotButton:hover { |
+ | opacity: 1; | ||
+ | } | ||
.chibiDormButton { | .chibiDormButton { | ||
第210行: | 第212行: | ||
} | } | ||
− | .chibiDormButton:hover {opacity: 1;} | + | .chibiDormButton:hover { |
+ | opacity: 1; | ||
+ | } | ||
.chibiDormButton.stateon { | .chibiDormButton.stateon { | ||
第216行: | 第220行: | ||
height: 22px; | height: 22px; | ||
filter: invert(1); | filter: invert(1); | ||
+ | } | ||
+ | |||
+ | .chibiAnimationRePlay { | ||
+ | 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/a/ae/Return_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; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationRePlay:hover { | ||
+ | opacity: 1; | ||
} | } | ||
.chibiAnimationInfo { | .chibiAnimationInfo { | ||
position: absolute; | position: absolute; | ||
− | left: | + | left: 95px; |
top: 5px; | top: 5px; | ||
width: 25px; | width: 25px; | ||
第278行: | 第306行: | ||
.chibiAnimationInfoShowClose:hover { | .chibiAnimationInfoShowClose:hover { | ||
text-shadow: 0 0 6px white; | text-shadow: 0 0 6px white; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationDownload { | ||
+ | position: absolute; | ||
+ | left: 125px; | ||
+ | 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/2/25/Download_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; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationDownload:hover { | ||
+ | opacity: 1; | ||
} | } | ||
第283行: | 第335行: | ||
position: absolute; | position: absolute; | ||
top: 5px; | top: 5px; | ||
− | left: | + | left: 155px; |
width: 80px; | width: 80px; | ||
height: 24px; | height: 24px; |
2021年5月22日 (六) 00:52的版本
.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);
}
.chibiAnimationRePlay {
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/a/ae/Return_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;
}
.chibiAnimationRePlay:hover {
opacity: 1;
}
.chibiAnimationInfo {
position: absolute;
left: 95px;
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 10px 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;
}
.chibiAnimationDownload {
position: absolute;
left: 125px;
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/2/25/Download_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;
}
.chibiAnimationDownload:hover {
opacity: 1;
}
select.chibiAnimationSelect {
position: absolute;
top: 5px;
left: 155px;
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;
}
div.chibiAnimationBlock {
width: 100%;
height: 100%;
background-color: #0008;
box-shadow: 0 0 12px 1px #fff3;
z-index: 10;
}
div.chibiAnimationBlock:after {
content: "Downloading......";
position: absolute;
bottom: 40px;
left: 20px;
font-size: 20px;
}