156 lines
3.2 KiB
CSS
156 lines
3.2 KiB
CSS
.legend {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
gap: 24px;
|
||
margin-bottom: 20px;
|
||
font-size: 18px;
|
||
color: var(--jx3-text-secondary);
|
||
}
|
||
|
||
.legend-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 7px;
|
||
}
|
||
|
||
.legend-color {
|
||
width: 15px;
|
||
height: 15px;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.legend-color.finished {
|
||
background: #60788f;
|
||
}
|
||
|
||
.legend-color.unfinished {
|
||
background: var(--jx3-green);
|
||
}
|
||
|
||
.map-name {
|
||
color: var(--jx3-text);
|
||
font-size: 20px;
|
||
font-weight: 700;
|
||
line-height: 1.5;
|
||
}
|
||
|
||
.map-progress {
|
||
margin-top: 7px;
|
||
color: var(--jx3-text-muted);
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.boss-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.boss-item {
|
||
position: relative;
|
||
min-width: 145px;
|
||
flex: 1 1 145px;
|
||
max-width: 210px;
|
||
min-height: 64px;
|
||
padding: 11px 13px;
|
||
border-radius: 9px;
|
||
transition:
|
||
transform 0.2s ease,
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
.boss-item:hover {
|
||
transform: translateY(-2px);
|
||
}
|
||
|
||
/*
|
||
* finished 为 true：
|
||
* 奖励已经获取，显示灰色
|
||
*/
|
||
.boss-item.finished {
|
||
color: #3f5263;
|
||
background: #e5eaee;
|
||
border: 1px solid #8696a4;
|
||
}
|
||
|
||
.boss-item.finished:hover {
|
||
box-shadow: 0 4px 12px rgba(75, 85, 99, 0.15);
|
||
}
|
||
|
||
/*
|
||
* finished 为 false：
|
||
* 奖励尚未获取，显示绿色
|
||
*/
|
||
.boss-item.unfinished {
|
||
color: #165b3b;
|
||
background: #e1f2e9;
|
||
border: 1px solid #438d68;
|
||
}
|
||
|
||
.boss-item.unfinished:hover {
|
||
box-shadow: 0 4px 12px rgba(45, 189, 120, 0.25);
|
||
}
|
||
|
||
.boss-index {
|
||
position: absolute;
|
||
top: 6px;
|
||
right: 8px;
|
||
font-size: 17px;
|
||
font-weight: 700;
|
||
opacity: 0.65;
|
||
}
|
||
|
||
.boss-name {
|
||
padding-right: 18px;
|
||
overflow: hidden;
|
||
font-size: 19px;
|
||
font-weight: 700;
|
||
line-height: 1.4;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.boss-status {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 5px;
|
||
margin-top: 6px;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 16px;
|
||
height: 16px;
|
||
border-radius: 50%;
|
||
font-size: 17px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.boss-item.finished .status-icon {
|
||
color: #304352;
|
||
background: #d2dbe2;
|
||
}
|
||
|
||
.boss-item.unfinished .status-icon {
|
||
color: #155b3a;
|
||
background: #c8e7d7;
|
||
}
|
||
|
||
.empty-data {
|
||
padding: 50px 20px;
|
||
color: var(--jx3-text-muted);
|
||
text-align: center;
|
||
background: var(--jx3-surface);
|
||
border: 1px solid var(--jx3-border-faint);
|
||
border-radius: 12px;
|
||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||
}
|