◆少前百科是非盈利性、非官方的少女前线维基百科。 ◆如果您发现某些内容错误/空缺,请勇于修正/添加!参与进来其实很容易!点这里 加入少前百科。 ◆有任何意见、建议、纠错,欢迎在 GFwiki:反馈与建议 提出和讨论。编辑事务讨论QQ群:597764980,微博@GFwiki少前百科 ◆To foreigners,You can use twitter to contact us. |
“MediaWiki:Gadget-chibiAnimation.css”的版本间的差异
Mikumikuer(讨论 | 贡献) |
|||
(未显示2个用户的19个中间版本) | |||
第1行: | 第1行: | ||
.tdoll_chibi { | .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 { | .tdoll_chibi .chibiAnimation { | ||
− | + | flex-shrink: 0; | |
− | + | pointer-events: none; | |
+ | position:absolute; | ||
} | } | ||
.chibiAnimationClickArea { | .chibiAnimationClickArea { | ||
− | + | width: 100%; | |
− | + | height: 100%; | |
− | + | position: absolute; | |
} | } | ||
.chibiDormSwitcher { | .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 { | .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] | + | .chibiDormSwitcher input[type=checkbox] + div>label { |
− | + | cursor: pointer; | |
− | + | font-size: 1em; | |
} | } | ||
− | .chibiDormSwitcher input[type=checkbox] | + | .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] | + | .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] | + | .chibiDormSwitcher input[type=checkbox] + div>label:before { |
− | + | content: ' '; | |
+ | |||
+ | |||
+ | |||
position: absolute; | position: absolute; | ||
background: #555; | background: #555; | ||
top: 1px; | top: 1px; | ||
left: 3px; | left: 3px; | ||
− | z-index: | + | z-index: 100; |
width: 25px; | width: 25px; | ||
-webkit-transition: all 0.1s ease-in; | -webkit-transition: all 0.1s ease-in; | ||
transition: all 0.1s ease-in; | transition: all 0.1s ease-in; | ||
height: 17px; | 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 { | ||
+ | |||
+ | 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; | ||
+ | |||
+ | } | ||
+ | |||
+ | .chibiAnimationControlDiv { | ||
+ | position: absolute; | ||
+ | top: 5px; | ||
+ | left: 5px; | ||
} | } | ||
− | . | + | |
− | + | .chibiButton { | |
+ | width: 25px; | ||
+ | height: 23px; | ||
+ | border-bottom: 1px solid #eaeaea; | ||
+ | display: inline-block; | ||
+ | color: white; | ||
+ | -moz-transition: all .2s ease-in; | ||
+ | -o-transition: all .2s ease-in; | ||
+ | -webkit-transition: all .2s ease-in; | ||
+ | transition: all .2s ease-in; | ||
+ | background-color: #222; | ||
+ | background-position-x: center; | ||
+ | background-position-y: 2px; | ||
+ | background-repeat: no-repeat; | ||
+ | vertical-align: top; | ||
+ | margin-right: 5px; | ||
+ | opacity: 0.5; | ||
+ | cursor: pointer; | ||
+ | user-select: none; | ||
} | } | ||
− | . | + | |
− | + | .chibiButton:hover { | |
+ | opacity: 1; | ||
} | } | ||
− | . | + | |
− | + | .chibiScreenshotButton { | |
− | + | text-align: center; | |
} | } | ||
− | . | + | |
− | + | .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%; | ||
} | } | ||
− | . | + | |
− | + | .chibiDormButton { | |
− | + | background-image: url(http://www.gfwiki.org/images/4/49/Dorm2.png); | |
− | |||
} | } | ||
− | . | + | |
− | + | .chibiDormButton.stateon { | |
− | + | border-bottom: 3px double #fff; | |
− | + | height: 22px; | |
− | + | filter: invert(1); | |
} | } | ||
− | . | + | .chibiAnimationRePlay { |
− | + | background-image: url(http://www.gfwiki.org/images/a/ae/Return_icon.png); | |
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | . | + | |
− | background-color: # | + | .chibiAnimationInfo { |
+ | background-image: url(http://www.gfwiki.org/images/7/7d/Infomation_icon.png); | ||
+ | } | ||
+ | |||
+ | .chibiAnimationInfoShow { | ||
+ | position: fixed; | ||
+ | top: 80px; | ||
+ | width: 300px; | ||
+ | padding: 30px 15px 10px 15px; | ||
+ | background-color: #222; | ||
+ | border: 1px solid #aaa; | ||
+ | font-size: 14px; | ||
+ | text-transform: capitalize; | ||
+ | border-radius: 3px; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationInfoShowLine { | ||
+ | padding: 20px 5px; | ||
+ | border-bottom: 1px solid #555; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationInfoShowLine div { | ||
+ | display: inline-block; | ||
+ | width: 33%; | ||
+ | } | ||
+ | |||
+ | .chibiAnimationInfoShowClose { | ||
position: absolute; | position: absolute; | ||
top: 4px; | top: 4px; | ||
− | + | right: 12px; | |
− | right: | ||
− | |||
− | |||
− | |||
− | |||
text-align: center; | 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 { |
− | + | background-image: url(http://www.gfwiki.org/images/2/25/Download_icon.png); | |
} | } | ||
− | . | + | select.chibiAnimationSelect { |
− | + | width: 80px; | |
− | + | font-size: 15px; | |
− | + | text-align: left; | |
− | + | font-family: 'Linux Libertine','Georgia','Times',serif; | |
+ | text-transform: capitalize; | ||
+ | border: none; | ||
+ | border-bottom: 1px solid #eaeaea; | ||
+ | } | ||
+ | |||
+ | select.chibiAnimationSelect:focus-visible { | ||
+ | outline: none; | ||
+ | } | ||
+ | |||
+ | div.chibiAnimationBlock { | ||
+ | position: absolute; | ||
+ | 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: 30px; | ||
+ | font-family: fantasy; | ||
+ | letter-spacing: 4px; | ||
} | } |
2021年10月27日 (三) 12:43的最新版本
.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;
}
.chibiAnimationControlDiv {
position: absolute;
top: 5px;
left: 5px;
}
.chibiButton {
width: 25px;
height: 23px;
border-bottom: 1px solid #eaeaea;
display: inline-block;
color: white;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
background-color: #222;
background-position-x: center;
background-position-y: 2px;
background-repeat: no-repeat;
vertical-align: top;
margin-right: 5px;
opacity: 0.5;
cursor: pointer;
user-select: none;
}
.chibiButton:hover {
opacity: 1;
}
.chibiScreenshotButton {
text-align: center;
}
.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%;
}
.chibiDormButton {
background-image: url(http://www.gfwiki.org/images/4/49/Dorm2.png);
}
.chibiDormButton.stateon {
border-bottom: 3px double #fff;
height: 22px;
filter: invert(1);
}
.chibiAnimationRePlay {
background-image: url(http://www.gfwiki.org/images/a/ae/Return_icon.png);
}
.chibiAnimationInfo {
background-image: url(http://www.gfwiki.org/images/7/7d/Infomation_icon.png);
}
.chibiAnimationInfoShow {
position: fixed;
top: 80px;
width: 300px;
padding: 30px 15px 10px 15px;
background-color: #222;
border: 1px solid #aaa;
font-size: 14px;
text-transform: capitalize;
border-radius: 3px;
z-index: 1000;
}
.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 {
background-image: url(http://www.gfwiki.org/images/2/25/Download_icon.png);
}
select.chibiAnimationSelect {
width: 80px;
font-size: 15px;
text-align: left;
font-family: 'Linux Libertine','Georgia','Times',serif;
text-transform: capitalize;
border: none;
border-bottom: 1px solid #eaeaea;
}
select.chibiAnimationSelect:focus-visible {
outline: none;
}
div.chibiAnimationBlock {
position: absolute;
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: 30px;
font-family: fantasy;
letter-spacing: 4px;
}