AurLemonCN(讨论 | 贡献) (创建页面,内容为“.infobox-card { border-radius: 12px; background-color: var(--color-surface-2); box-shadow: var(--box-shadow-card); width: 100%; max-width: 300px; float: right; padding: 16px; margin: 0 0 var(--space-lg) var(--space-lg); } .infobox-card ul { margin: 0; padding: 0; } .infobox-card li { margin: 0; padding: 0; list-style: none; } .infobox-card .station-list .line { position: absolute; top: 0; left:…”) |
AurLemonCN(讨论 | 贡献) 小无编辑摘要 |
||
| 第33行: | 第33行: | ||
.infobox-card .station-list { | .infobox-card .station-list { | ||
position: relative; | position: relative; | ||
} | } | ||
| 第70行: | 第69行: | ||
letter-spacing: 3px; | letter-spacing: 3px; | ||
color: var(--color-base--emphasized); | color: var(--color-base--emphasized); | ||
} | |||
.infobox-card .station-list .direction { | |||
position: absolute; | |||
right: 0; | |||
letter-spacing: 2px; | |||
font-size: 14px; | |||
max-width: 130px; | |||
top: -3px; | |||
color: var(--color-base--subtle); | |||
z-index: 1; | |||
} | } | ||
| 第85行: | 第95行: | ||
.infobox-card .header .time { | .infobox-card .header .time { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | |||
font-size: 12px; | font-size: 12px; | ||
justify-content: center; | justify-content: center; | ||
2023年9月10日 (日) 20:47的版本
.infobox-card {
border-radius: 12px;
background-color: var(--color-surface-2);
box-shadow: var(--box-shadow-card);
width: 100%;
max-width: 300px;
float: right;
padding: 16px;
margin: 0 0 var(--space-lg) var(--space-lg);
}
.infobox-card ul {
margin: 0;
padding: 0;
}
.infobox-card li {
margin: 0;
padding: 0;
list-style: none;
}
.infobox-card .station-list .line {
position: absolute;
top: 0;
left: 0;
width: 8px;
height: 100%;
border-radius: 10px;
margin: 0 4px;
}
.infobox-card .station-list {
position: relative;
}
.infobox-card .station-list li {
padding-left: 22px;
position: relative;
display: flex;
align-items: center;
}
.infobox-card .station-list .transfer {
display: flex;
gap: 5px;
margin-left: 15px;
}
.infobox-card .station-list .transfer div {
border-radius: 7px;
padding: 2px;
color: white;
font-size: 12px;
}
.infobox-card .station-list li .name .circle {
position: absolute;
left: 0;
transform: translate(-5%,25%);
width: 10px;
height: 10px;
background-color: var(--color-surface-0);
border-radius: 50%;
}
.infobox-card .station-list li .name {
padding: 10px 0;
letter-spacing: 3px;
color: var(--color-base--emphasized);
}
.infobox-card .station-list .direction {
position: absolute;
right: 0;
letter-spacing: 2px;
font-size: 14px;
max-width: 130px;
top: -3px;
color: var(--color-base--subtle);
z-index: 1;
}
.infobox-card .header .line-name {
text-align: center;
font-weight: bold;
font-size: 24px;
}
.infobox-card .header .detail .company {
text-align: center;
font-size: 13px;
}
.infobox-card .header .time {
display: flex;
flex-wrap: wrap;
font-size: 12px;
justify-content: center;
margin: 10px 0;
padding-bottom: 15px;
border-bottom: 1px solid var(--color-surface-3);
}
.infobox-card .header .time .last-train,
.infobox-card .header .time .ticket {
margin-left: 10px;
}
.infobox-card .header .time .first-train::before {
content: "首";
padding: 2px;
color: white;
background-color: green;
border-radius: 2px;
margin-right: 2px;
transform: scale(0.8);
display: inline-block;
}
.infobox-card .header .time .last-train::before {
content: "末";
padding: 2px;
color: white;
background-color: orange;
border-radius: 2px;
margin-right: 2px;
transform: scale(0.8);
display: inline-block;
}
.infobox-card .header .time .ticket::before {
content: "票";
padding: 2px;
color: white;
background-color: cadetblue;
border-radius: 2px;
margin-right: 2px;
transform: scale(0.8);
display: inline-block;
}
@media (max-width: 720px) {
.infobox-card {
float: unset;
margin: 0 auto;
}
}