Template:首页/navigation/style.css

.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%;
    }
}
*/