< Template:首页 | navigation
.navigation-btns {
display: grid;
flex-wrap: wrap;
justify-content: center;
justify-items: center;
}
.navigation-btns p {
display: none;
}
.character {
display: flex;
height: 4em;
width: 15em;
align-items: center;
border: 1px #d9d9d9 solid;
border-radius: 1em;
background-color: rgba(255, 255, 255, .5);
margin: 1em;
box-shadow: 0 2px 0 rgba(0, 0, 0, .02);
transition: border-color .2s;
overflow: hidden;
}
.character:hover {
border-color: #4096ff;
box-shadow: 0 2px 0 rgba(64, 150, 255, .02);
}
.character-avatar-comic {
transition: transform .2s;
}
.character-avatar-comic img {
height: 4em;
width: 4em;
margin-right: 1em;
transition-property: height, width;
transition-duration: .2s;
border-radius: 1em 0 0 1em;
}
.character:hover .character-avatar-comic img {
height: 6em;
width: 6em;
}
.character-name-comic {
font-family: var(--fonts-sans);
white-space: nowrap;
opacity: 1;
transition: opacity .2s;
font-size: 1.2em;
}
.character-bg {
width: 15em;
z-index: 2;
position: absolute;
opacity: 0;
margin-left: 0;
height: 4em;
}
.character-bg a {
display: block;
width: 100%;
height: 100%;
}
/*
@media screen and (max-width: 768px) {
.character:hover .character-avatar-comic,
.character:hover .character-avatar-anime {
transform: translateX(2em);
}
.character:hover .character-name-comic,
.character:hover .character-name-anime {
opacity: 0;
}
}
@media screen and (max-width: 360px) {
.character {
width: 100%;
}
}
*/