We are searching for editors to complete gameplay topics in all games. You can contribute without an account. Learn how to contribute and join our Discord server.
MediaWiki:Gadget-chibiAnimation.css
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.tdoll_chibi {
display: flex;
width: 240px;
height: 180px;
max-width: 240px;
max-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;
}
.tdoll_chibi.loading {
background-image: url('/images/8/88/gfloading.gif');
background-repeat: no-repeat;
background-attachment: local;
background-position: bottom right;
background-size: 50px;
}
.chibiDormSwitcher {
background-color: none;
height: 45px;
width: 70px;
position: absolute;
left: -8px;
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;
}
.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;
top: 22px;
left: 12px;
-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: inline-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;
}