1070 lines
12 KiB
CSS
1070 lines
12 KiB
CSS
/* Canonical CSS owner: cards. Historical layers consolidated 2026-08-02. */
|
|
|
|
.stock-name {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.stock-code {
|
|
color: var(--text-muted);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.trend-hot {
|
|
background: var(--coral-soft);
|
|
|
|
color: var(--coral);
|
|
}
|
|
|
|
.trend-flat {
|
|
background: var(--amber-soft);
|
|
|
|
color: var(--amber);
|
|
}
|
|
|
|
.trend-cool {
|
|
background: var(--green-soft);
|
|
|
|
color: var(--green);
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
|
|
width: 1px;
|
|
|
|
height: 1px;
|
|
|
|
padding: 0px;
|
|
|
|
margin: -1px;
|
|
|
|
overflow: hidden;
|
|
|
|
clip: rect(0px, 0px, 0px, 0px);
|
|
|
|
white-space: nowrap;
|
|
|
|
border: 0px;
|
|
}
|
|
|
|
.streak-pill {
|
|
background: var(--coral-soft);
|
|
|
|
color: var(--coral);
|
|
|
|
font-weight: 700;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 24px;
|
|
|
|
padding: 2px 8px;
|
|
|
|
border-radius: 4px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.outcome-tag {
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 24px;
|
|
|
|
padding: 2px 8px;
|
|
|
|
border-radius: 4px;
|
|
|
|
font-size: 12px;
|
|
|
|
font-weight: 700;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.number {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.inline-notice {
|
|
padding: 9px 14px;
|
|
|
|
border-bottom: 1px solid rgb(236, 210, 141);
|
|
|
|
background: var(--amber-soft);
|
|
|
|
color: rgb(118, 83, 20);
|
|
|
|
border-radius: 7px;
|
|
|
|
font-size: 11.5px;
|
|
}
|
|
|
|
.insight-card {
|
|
border-radius: 10px;
|
|
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
.redesigned-page-head {
|
|
min-height: 34px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 12px;
|
|
|
|
margin: 0px 0px 12px;
|
|
|
|
padding: 0px;
|
|
|
|
border: 0px;
|
|
|
|
background: transparent;
|
|
}
|
|
|
|
.redesigned-card {
|
|
overflow: hidden;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-card);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.redesigned-card-head {
|
|
min-height: 42px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 11px 14px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
}
|
|
|
|
.redesigned-card-head h3 {
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
.redesigned-card-head > span {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
@media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) {
|
|
.redesigned-page-head {
|
|
align-items: flex-start;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 721px) {
|
|
:is(.redesigned-auction-view, .redesigned-theme-view, .redesigned-popularity-view, .redesigned-dragon-view) {
|
|
width: min(100%, 2200px);
|
|
|
|
margin: 14px auto 0px;
|
|
|
|
padding: 0px;
|
|
}
|
|
}
|
|
|
|
.avatar {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 6px;
|
|
|
|
color: var(--sub);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
border-radius: var(--radius);
|
|
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.card-h {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 11px 14px;
|
|
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.card-h h3 {
|
|
font-size: 14px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
.card-h .sub {
|
|
font-size: 11px;
|
|
|
|
color: var(--faint);
|
|
}
|
|
|
|
.card-h .right {
|
|
margin-left: auto;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.btn.ghost {
|
|
border-color: transparent;
|
|
|
|
color: var(--blue);
|
|
}
|
|
|
|
.sname {
|
|
font-weight: 700;
|
|
|
|
font-size: 13px;
|
|
}
|
|
|
|
.scode {
|
|
font-size: 11px;
|
|
|
|
color: var(--faint);
|
|
|
|
margin-left: 6px;
|
|
|
|
font-weight: 400;
|
|
}
|
|
|
|
.muted {
|
|
color: var(--faint);
|
|
}
|
|
|
|
.tag {
|
|
display: inline-block;
|
|
|
|
border-radius: 5px;
|
|
|
|
padding: 1.5px 7px;
|
|
|
|
font-size: 11px;
|
|
|
|
line-height: 1.6;
|
|
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.tag.neu {
|
|
background: rgb(243, 244, 246);
|
|
|
|
color: rgb(75, 85, 99);
|
|
|
|
border-color: rgb(229, 231, 235);
|
|
}
|
|
|
|
.tag.red {
|
|
background: var(--up-soft);
|
|
|
|
color: var(--up);
|
|
}
|
|
|
|
.tag.b1 {
|
|
background: rgb(227, 236, 253);
|
|
|
|
color: rgb(59, 98, 196);
|
|
}
|
|
|
|
.tag.b2 {
|
|
background: rgb(194, 213, 250);
|
|
|
|
color: rgb(43, 86, 189);
|
|
}
|
|
|
|
.tag.b3 {
|
|
background: var(--blue);
|
|
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
.field {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.field label {
|
|
display: block;
|
|
|
|
font-size: 12px;
|
|
|
|
color: var(--sub);
|
|
|
|
margin-bottom: 5px;
|
|
|
|
font-weight: 600;
|
|
}
|
|
|
|
.src {
|
|
display: inline-block;
|
|
|
|
background: rgb(243, 244, 246);
|
|
|
|
color: rgb(107, 114, 128);
|
|
|
|
border-radius: 4px;
|
|
|
|
padding: 0px 5px;
|
|
|
|
font-size: 10.5px;
|
|
|
|
margin-right: 3px;
|
|
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.src.hot {
|
|
background: rgb(253, 240, 230);
|
|
|
|
color: rgb(194, 105, 26);
|
|
}
|
|
|
|
.sector {
|
|
padding: 6px 14px;
|
|
}
|
|
|
|
.sector .row {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 8px 0px;
|
|
|
|
border-bottom: 1px dashed var(--line-soft);
|
|
}
|
|
|
|
.sector .row:last-child {
|
|
border-bottom-width: medium;
|
|
|
|
border-bottom-style: none;
|
|
|
|
border-bottom-color: currentcolor;
|
|
}
|
|
|
|
.sector .nm {
|
|
font-weight: 700;
|
|
|
|
font-size: 13px;
|
|
|
|
width: 64px;
|
|
}
|
|
|
|
.sector .info {
|
|
flex: 1 1 0%;
|
|
|
|
min-width: 0px;
|
|
}
|
|
|
|
.sector .info .lead {
|
|
font-size: 11.5px;
|
|
|
|
color: var(--sub);
|
|
|
|
white-space: nowrap;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sector .stat {
|
|
text-align: right;
|
|
}
|
|
|
|
.sector .stat .pct {
|
|
font-size: 12.5px;
|
|
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.phase-b {
|
|
display: flex;
|
|
|
|
gap: 16px;
|
|
|
|
padding: 14px 16px;
|
|
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.phase-badge {
|
|
flex-shrink: 0;
|
|
|
|
text-align: center;
|
|
|
|
background: var(--up-soft);
|
|
|
|
border: 1px solid rgb(245, 207, 201);
|
|
|
|
border-radius: 10px;
|
|
|
|
padding: 10px 18px;
|
|
}
|
|
|
|
.phase-badge .p {
|
|
font-size: 19px;
|
|
|
|
font-weight: 800;
|
|
|
|
color: var(--up);
|
|
}
|
|
|
|
.phase-badge .c {
|
|
font-size: 11px;
|
|
|
|
color: var(--sub);
|
|
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.phase-info {
|
|
flex: 1 1 0%;
|
|
|
|
min-width: 0px;
|
|
}
|
|
|
|
.phase-info .sum {
|
|
font-size: 12.5px;
|
|
|
|
color: rgb(55, 65, 81);
|
|
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.phase-info .adv {
|
|
font-size: 12px;
|
|
|
|
color: var(--amber);
|
|
|
|
background: var(--amber-soft);
|
|
|
|
border-radius: 6px;
|
|
|
|
padding: 5px 9px;
|
|
|
|
margin-top: 8px;
|
|
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.phase-pick {
|
|
display: flex;
|
|
|
|
gap: 5px;
|
|
|
|
margin-top: 10px;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
}
|
|
|
|
.phase-pick .pp {
|
|
border: 1px solid var(--line);
|
|
|
|
border-radius: 6px;
|
|
|
|
padding: 3px 11px;
|
|
|
|
font-size: 12px;
|
|
|
|
color: var(--sub);
|
|
}
|
|
|
|
.factor {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 10px;
|
|
|
|
padding: 9px 14px;
|
|
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.factor:last-child {
|
|
border-bottom-width: medium;
|
|
|
|
border-bottom-style: none;
|
|
|
|
border-bottom-color: currentcolor;
|
|
}
|
|
|
|
.factor .wv {
|
|
width: 38px;
|
|
|
|
text-align: right;
|
|
|
|
font-size: 12px;
|
|
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.cond {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 7px 0px;
|
|
|
|
font-size: 12.5px;
|
|
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lad-head {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 12px;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.lad-head h2 {
|
|
font-size: 17px;
|
|
|
|
font-weight: 800;
|
|
}
|
|
|
|
.lad-head .sub {
|
|
font-size: 12px;
|
|
|
|
color: var(--faint);
|
|
}
|
|
|
|
.lad-head .right {
|
|
margin-left: auto;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.tier {
|
|
display: flex;
|
|
|
|
border-bottom: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.tier:last-child {
|
|
border-bottom-width: medium;
|
|
|
|
border-bottom-style: none;
|
|
|
|
border-bottom-color: currentcolor;
|
|
}
|
|
|
|
.tier .lab {
|
|
width: 118px;
|
|
|
|
flex-shrink: 0;
|
|
|
|
padding: 14px 0px 14px 16px;
|
|
|
|
border-right: 1px solid var(--line-soft);
|
|
}
|
|
|
|
.tier .lab .lv {
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 6px;
|
|
|
|
font-size: 15px;
|
|
|
|
font-weight: 800;
|
|
}
|
|
|
|
.tier .lab .lv .dot {
|
|
width: 9px;
|
|
|
|
height: 9px;
|
|
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.tier .cards {
|
|
flex: 1 1 0%;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 12px 14px;
|
|
|
|
align-content: flex-start;
|
|
}
|
|
|
|
.tier.t4 .lab {
|
|
background: linear-gradient(90deg, rgb(253, 241, 239), rgb(255, 255, 255));
|
|
}
|
|
|
|
.tier.t3 .lab {
|
|
background: linear-gradient(90deg, rgb(253, 246, 236), rgb(255, 255, 255));
|
|
}
|
|
|
|
.tier.t2 .lab {
|
|
background: linear-gradient(90deg, rgb(236, 247, 241), rgb(255, 255, 255));
|
|
}
|
|
|
|
.tier.t1 .lab {
|
|
background: linear-gradient(90deg, rgb(238, 244, 253), rgb(255, 255, 255));
|
|
}
|
|
|
|
.tier.gap .cards {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
color: var(--faint);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.tag.lb {
|
|
background: var(--amber-soft);
|
|
|
|
color: var(--amber);
|
|
}
|
|
|
|
.apex {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.apex .h {
|
|
display: flex;
|
|
|
|
align-items: baseline;
|
|
|
|
gap: 10px;
|
|
}
|
|
|
|
.apex .h .chg {
|
|
font-size: 11.5px;
|
|
|
|
color: var(--amber);
|
|
|
|
background: var(--amber-soft);
|
|
|
|
border-radius: 5px;
|
|
|
|
padding: 2px 7px;
|
|
}
|
|
|
|
.apex .note {
|
|
margin-top: 8px;
|
|
|
|
font-size: 11.5px;
|
|
|
|
color: var(--sub);
|
|
|
|
line-height: 1.7;
|
|
|
|
border-top: 1px dashed var(--line-soft);
|
|
|
|
padding-top: 8px;
|
|
}
|
|
|
|
.pyr {
|
|
padding: 8px 16px 12px;
|
|
}
|
|
|
|
.pyr .row {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 4px 0px;
|
|
}
|
|
|
|
.pyr .row .k {
|
|
width: 52px;
|
|
|
|
font-size: 12px;
|
|
|
|
color: var(--sub);
|
|
|
|
text-align: right;
|
|
}
|
|
|
|
.pyr .row .bar {
|
|
height: 14px;
|
|
|
|
border-radius: 4px;
|
|
|
|
min-width: 3px;
|
|
}
|
|
|
|
.pyr .row .v {
|
|
font-size: 12px;
|
|
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.pyr .sum {
|
|
font-size: 11px;
|
|
|
|
color: var(--amber);
|
|
|
|
margin-top: 6px;
|
|
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.rate-list {
|
|
padding: 6px 16px 12px;
|
|
}
|
|
|
|
.rate-list .row {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
padding: 5px 0px;
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.rate-list .row .k {
|
|
width: 96px;
|
|
|
|
color: var(--sub);
|
|
}
|
|
|
|
.rate-list .row .bar {
|
|
flex: 1 1 0%;
|
|
|
|
height: 8px;
|
|
|
|
background: rgb(243, 244, 246);
|
|
|
|
border-radius: 4px;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rate-list .row .bar i {
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
border-radius: 4px;
|
|
|
|
background: var(--blue);
|
|
}
|
|
|
|
.rate-list .row .bar i.low {
|
|
background: rgb(245, 158, 11);
|
|
}
|
|
|
|
.rate-list .row .v {
|
|
width: 44px;
|
|
|
|
text-align: right;
|
|
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.rate-list .src {
|
|
font-size: 10.5px;
|
|
|
|
color: var(--faint);
|
|
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.tag.hot {
|
|
background: var(--up-soft);
|
|
|
|
color: var(--up);
|
|
}
|
|
|
|
.tag.cool {
|
|
background: rgb(232, 244, 253);
|
|
|
|
color: rgb(37, 99, 235);
|
|
}
|
|
|
|
.score-list {
|
|
padding: 8px 16px 14px;
|
|
}
|
|
|
|
.score-list .row {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 10px;
|
|
|
|
padding: 6px 0px;
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.score-list .row .k {
|
|
width: 88px;
|
|
|
|
color: var(--sub);
|
|
}
|
|
|
|
.score-list .row .bar {
|
|
flex: 1 1 0%;
|
|
|
|
height: 9px;
|
|
|
|
background: rgb(240, 242, 245);
|
|
|
|
border-radius: 5px;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.score-list .row .bar i {
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
background: linear-gradient(90deg,#93b4f5,var(--blue));
|
|
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.score-list .row .v {
|
|
width: 64px;
|
|
|
|
text-align: right;
|
|
|
|
font-weight: 700;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.score-list .row .v small {
|
|
color: var(--faint);
|
|
|
|
font-weight: 400;
|
|
}
|
|
|
|
.side-list {
|
|
padding: 6px 14px 10px;
|
|
}
|
|
|
|
.perf-card {
|
|
background: rgb(255, 255, 255);
|
|
|
|
border: 1px solid var(--line);
|
|
|
|
border-radius: var(--radius);
|
|
|
|
padding: 14px 16px;
|
|
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.perf-card .k {
|
|
font-size: 12px;
|
|
|
|
color: var(--sub);
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.perf-card .bar {
|
|
height: 6px;
|
|
|
|
background: rgb(240, 242, 245);
|
|
|
|
border-radius: 3px;
|
|
|
|
margin-top: 10px;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.perf-card .bar i {
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.width-box {
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.width-bar {
|
|
display: flex;
|
|
|
|
height: 22px;
|
|
|
|
border-radius: 6px;
|
|
|
|
overflow: hidden;
|
|
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.width-bar .dn {
|
|
background: rgb(22, 163, 74);
|
|
}
|
|
|
|
.width-legend {
|
|
display: flex;
|
|
|
|
gap: 18px;
|
|
|
|
margin-top: 8px;
|
|
|
|
font-size: 11.5px;
|
|
|
|
color: var(--sub);
|
|
}
|
|
|
|
.width-legend i {
|
|
display: inline-block;
|
|
|
|
width: 10px;
|
|
|
|
height: 10px;
|
|
|
|
border-radius: 2px;
|
|
|
|
margin-right: 4px;
|
|
|
|
vertical-align: -1px;
|
|
}
|
|
|
|
.model {
|
|
padding: 12px 14px;
|
|
|
|
border-bottom: 1px solid var(--line-soft);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.model:hover {
|
|
background: rgb(248, 250, 255);
|
|
}
|
|
|
|
.model .r1 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.model .r1 .nm {
|
|
font-weight: 700;
|
|
|
|
font-size: 13px;
|
|
}
|
|
|
|
.model .r1 .lv {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.model .r2 {
|
|
font-size: 11.5px;
|
|
|
|
color: var(--sub);
|
|
|
|
margin-top: 4px;
|
|
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.model .r3 {
|
|
display: flex;
|
|
|
|
gap: 10px;
|
|
|
|
margin-top: 6px;
|
|
|
|
font-size: 10.5px;
|
|
|
|
color: var(--faint);
|
|
}
|
|
|
|
.model .r3 .q {
|
|
border-bottom: 1px dashed var(--faint);
|
|
|
|
cursor: help;
|
|
}
|
|
|
|
:root[data-theme="dark"] :is(.card-h, .performance-stage-card header, .rotation-card-head, .auction-card-head-v2, .theme-card-head-v2, .dragon-detail-header, .screener-card-head, .mentor-page-header) {
|
|
border-color: var(--line-soft);
|
|
|
|
background-color: transparent;
|
|
|
|
color: var(--text-primary);
|
|
}
|