Template:Character Icon/styles.css
Jump to navigation
Jump to search
.icon-box {
width: 140px;
border: 4px solid var(--color-main);
border-radius: 15px;
background-color: #fff;
}
.img-box > span {
display: block;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.img-box img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.img-box {
position: relative;
text-align: center;
overflow: hidden;
padding-bottom: 5px;
}
.img-box:before {
content: "";
width: 100%;
height: 10px;
position: absolute;
bottom: 0;
left: 0;
background: var(--color-main);
transform: skewY(-5deg) translateY(6px);
z-index: 20;
}
.img-box:after {
content: "";
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
left: 0;
background: var(--color-sub);
transform: skewY(6deg) translateY(12px);
z-index: 10;
}
.capt-box {
width: 136px;
height: 24px;
border-top: 3px solid var(--color-main);
padding: 4px 2px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
}
.capt-box div {
font-weight: bold;
color: #334;
max-width: 100%;
overflow: hidden;
white-space: nowrap;
}
.capt-box .overflow {
text-overflow: ellipsis;
}