MediaWiki:Gadget-chibiAnimation.css
Jump to navigation
Jump to search
Note: After saving, 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: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
.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;
}
.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;
}
