.ake,
.ake * {
transition: all 250ms;
}
.ake {
position: relative;
vertical-align: top;
display: inline-grid;
grid-template-rows: auto 1fr auto;
grid-gap: 0.5em;
box-sizing: border-box;
margin: 0.5em;
border-top: 0.25em solid #c0392b;
padding: 0.5em;
width: 410px;
min-height: 410px;
background-color: #000;
background: radial-gradient(circle at left top, #333, #000);
color: #aaa;
}
/* {{链入文件|整合运动精英.png|整合运动boss.png}} */
.akeLeader {
background: url("https://img.moegirl.org.cn/common/0/02/%E6%95%B4%E5%90%88%E8%BF%90%E5%8A%A8%E7%B2%BE%E8%8B%B1.png")
no-repeat calc(100% - 1.25em) 2.5em / 90px 90px,
radial-gradient(circle at left top, #333, #000);
}
.akeBoss {
background: url("https://img.moegirl.org.cn/common/2/28/%E6%95%B4%E5%90%88%E8%BF%90%E5%8A%A8boss.png")
no-repeat calc(100% - 1.25em) 2.5em / 90px 90px,
radial-gradient(circle at left top, #333, #000);
}
.ake p {
margin: 0 0.5em;
}
.akeHead {
display: grid;
grid-gap: 0.5em;
grid-template-columns: auto auto 1fr;
grid-template-areas:
"Type projectLife"
"index name"
"tags tags";
}
.akeType {
grid-area: Type;
color: #008080;
}
.akeLifePoint {
grid-area: projectLife;
}
.akeIndex {
grid-area: index;
display: flex;
align-items: center;
justify-content: center;
min-width: 4em;
background-color: rgba(0, 0, 0, 0.8);
text-align: center;
text-transform: uppercase;
}
.akeName {
grid-area: name;
font-weight: bold;
font-size: x-large;
color: #fff;
}
.akeTags {
grid-area: tags;
}
.akeBody {
display: grid;
grid-gap: 0.5em;
grid-template-columns: auto 1fr;
grid-template-areas:
"bodyLeft bodyRight"
"bodyInfo bodyInfo"
"bodyBottom bodyBottom";
}
.akeBodyLeft {
grid-area: bodyLeft;
display: grid;
grid-gap: 0.5em;
margin: 0.25em;
padding: 0.25em;
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
}
.akeBodyLeft > p {
box-sizing: border-box;
display: flex;
justify-content: space-around;
align-items: center;
margin: 0;
padding: 0 0.5em;
background-color: rgba(0, 0, 0, 0.8);
}
.akeBodyRight > p > span {
text-transform: uppercase;
}
.akeBodyLeft > p > span,
.akeBodyRight > p > span {
font-weight: bold;
color: #fff;
}
.akeBodyLeft > p > span:empty::after,
.akeBodyRight > p > span:empty::after {
color: #aaa;
content: "-";
}
.akeBodyRight {
grid-area: bodyRight;
display: grid;
grid-gap: 0.5em;
grid-template-columns: 1fr 1fr;
margin: 0.25em;
padding: 0.25em;
}
.akeBodyRight > p {
display: flex;
justify-content: space-around;
align-items: center;
margin: 0.25em;
border-radius: 0.25em;
background-color: rgba(255, 255, 255, 0.05);
}
.akeBodyBottom {
grid-area: bodyBottom;
display: grid;
grid-gap: 0.5em;
grid-template-columns: 1fr;
}
.akeBody > .akeText {
grid-area: bodyInfo;
color: #ccc;
font-style: italic;
}
.akeBodyBottom > .akeText:empty::after {
content: "暂无资料";
}
.akeAbility > .akeTitle,
.akeResistance > .akeTitle {
background-color: rgba(255, 255, 255, 0.15);
padding: 0.25em 0.75em;
}
.akeAbility > .akeText {
color: #fff;
}
.akeBodyBottom > a {
color: #fff;
text-decoration: none;
}
.akeResistance > .akeText {
margin: 1em;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
}
.akeResistance > .akeText > span {
flex: 1 auto;
display: inline-block;
padding: 0 0.5em;
margin: 0.125em;
border-radius: 0.25em;
background-color: rgba(255, 255, 255, 0.15);
color: #fff;
text-align: center;
}
.akeRelEnemy {
position: relative;
z-index: 2;
display: flex;
align-items: stretch;
min-height: 90px;
background-color: rgba(255, 255, 255, 0.1);
background: radial-gradient(
ellipse at 35% 150%,
rgba(192, 57, 43, 0.55),
rgba(255, 255, 255, 0.125) 75%
);
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 0 3px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease-in-out;
}
.akeBodyBottom > .akeText + .akeRelEnemy,
.akeAbilit + .akeRelEnemy,
.akeResistance + .akeRelEnemy {
margin-top: 2em;
}
.akeRelEnemy:hover {
z-index: 3;
box-shadow: 0 8px 9px rgba(0, 0, 0, 0.08), 0 0 6px rgba(0, 0, 0, 0.1);
}
.akeRelEnemy:active {
z-index: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 1px 0 rgba(0, 0, 0, 0.15);
transition: all 0.04s ease-in;
}
.akeRelEnemyImgBox {
flex: 0 0 110px;
position: relative;
z-index: 1;
overflow: hidden;
mask-image: linear-gradient(90deg, black 90px, transparent);
}
.akeRelEnemyImgBox > img {
position: absolute;
left: 0;
top: 0;
width: 100% !important;
height: 100% !important;
object-fit: cover;
transition: transform 0.4s cubic-bezier(0.32, 0, 0.4, 1);
}
.akeRelEnemy:hover > .akeRelEnemyImgBox > * {
transform: scale(1.1);
}
.akeRelEnemyText {
flex-grow: 1;
display: flex;
flex-flow: column nowrap;
justify-content: center;
margin-left: -20px;
padding: 7px 10px 7px 27px;
z-index: 2;
}
.akeRelEnemyText > .akeTitle {
color: #666;
}
.akeRelEnemyText > .akeText {
font-size: larger;
color: #fff;
}
.akeRelEnemyLinkCover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 3;
}
@keyframes flashTopBorder {
0% {
border-top-color: #c0392b;
}
25% {
border-top-color: transparent;
}
50% {
border-top-color: #c0392b;
}
75% {
border-top-color: transparent;
}
100% {
border-top-color: #c0392b;
}
}
.ake:target {
animation: flashTopBorder 750ms ease-in-out;
}
/* [[Category:在模板名字空间下的CSS页面]] */