miao-plugin/resources/character/profile-list.less

185 lines
2.8 KiB
Plaintext
Raw Normal View History

body, .container {
width: 650px;
}
.container > .cont {
margin-left: 15px;
}
.head-box {
margin-top: 10px;
.label {
font-size: 14px;
}
}
.char-list {
display: flex;
flex-wrap: wrap;
padding: 10px;
}
.char-item {
margin: 5px 0;
2022-11-07 20:08:24 +00:00
position: relative;
.name {
margin-top: 5px;
display: block;
font-size: 14px;
color: #fff;
text-align: center;
text-shadow: 0 0 1px #000;
.cons {
padding: 1px 4px;
font-size: 12px;
transform: scale(.8);
margin: -2px 0 0 1px;
vertical-align: middle;
opacity: .9;
}
}
&.new-char {
.name:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: #90e800;
border-radius: 50%;
margin-right: 3px;
}
}
2022-11-07 20:08:24 +00:00
.group-rank {
position: absolute;
background: url('./imgs/dmg-rank-bg.png') left top no-repeat;
2022-11-07 20:08:24 +00:00
background-size: auto 100%;
left: 0;
top: 0;
margin-top: -5px;
width: 74px;
height: 74px;
&.rank-type-mark {
background-image: url('./imgs/mark-rank-bg.png');
}
2022-11-07 20:08:24 +00:00
span {
position: absolute;
font-size: 12px;
width: 16px;
height: 16px;
bottom: 0;
left: 50%;
margin-left: -7px;
text-align: center;
transform: scale(.8);
display: none;
text-shadow: 0 0 2px #b26f08;
}
&.rank-1 {
background-position: 25% 0;
}
&.rank-2 {
background-position: 50% 0;
}
&.rank-3 {
background-position: 75% 0;
}
&.rank-4 {
background-position: 100% 0;
span {
display: block;
}
}
}
}
.char-icon {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 1px 1px 3px 0 #000;
overflow: visible;
margin: 0 5px 0 6px;
.img {
background-size: auto 100%;
background-position: top center;
overflow: hidden;
border-radius: 50%;
}
}
.cont-footer {
display: flex;
background: rgba(0, 0, 0, .4);
span {
width: 50%;
}
.serv {
text-align: right;
}
.new-tip:before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: #90e800;
border-radius: 50%;
margin-right: 3px;
}
2022-11-07 20:08:24 +00:00
}
.group-rank-icon {
width: 16px;
height: 16px;
background: url("./imgs/mark-icon.png");
background-size: auto 100%;
display: inline-block;
vertical-align: bottom;
margin: -1px 3px -1px 0;
&.mark-icon {
background-position: 100% 0;
}
}
.cont-title {
padding: 8px 5px 10px;
background: rgba(0, 0, 0, .4);
span {
color: #fff;
width: 50%;
}
.rank-time {
font-size: 12px;
color: #aaa;
display: inline-block;
transform: scale(.85);
transform-origin: 0 50%;
white-space: nowrap;
}
}
.no-rank .group-rank,
.no-rank.group-rank-tip {
2022-11-07 20:08:24 +00:00
display: none;
}