Files
xiaobaifupan/app/frontend/shared/components/cards.css
T
bb67085dd4 fix: merge B-157 and B-158 shell review blockers
Keep 1024-1439 broken/seal metrics in the detail panel, fold desktop admin actions into the ellipsis menu, and fit the 13-column limit pool at 1600 without hiding the data date.

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-08-20 02:19:04 +08:00

1096 lines
12 KiB
CSS

/* Canonical CSS owner: cards. Historical layers consolidated 2026-08-02. */
.stock-name {
font-size: var(--fs-table);
font-weight: 600;
}
.stock-code {
color: var(--text-3);
font-size: var(--fs-aux);
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 {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
height: 20px;
padding: 0 7px;
border-radius: 999px;
background: var(--up-soft);
color: var(--up);
font-size: var(--fs-caption);
font-weight: 600;
white-space: nowrap;
}
.streak-pill.high {
background: var(--up);
color: #fff;
}
.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: 767px), (max-width: 1023px) and (max-height: 600px) {
.redesigned-page-head {
align-items: flex-start;
flex-wrap: wrap;
margin-top: 12px;
}
}
@media (min-width: 768px) {
: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-bg);
border: 1px solid var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow);
}
.card-h {
display: flex;
align-items: center;
gap: 8px;
padding: 11px 14px;
border-bottom: 1px solid var(--border-subtle);
}
.card-h h3 {
color: var(--text-primary);
font-size: var(--font-size-card-title);
font-weight: var(--font-weight-semibold);
}
.card-h .sub {
font-size: var(--font-size-caption);
color: var(--text-tertiary);
}
.card-h .right {
margin-left: auto;
display: flex;
align-items: center;
gap: 8px;
}
.btn.ghost {
border-color: transparent;
color: var(--blue);
}
.sname {
font-weight: 600;
font-size: var(--fs-table);
}
.scode {
font-size: var(--fs-aux);
color: var(--text-3);
margin-left: 0;
font-weight: 400;
}
.stock-cell {
display: flex;
flex-direction: column;
line-height: 1.3;
}
.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: var(--surface-muted);
color: var(--text-secondary);
border-color: var(--border);
}
.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: var(--text-inverse);
}
.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: var(--surface-muted);
color: var(--text-secondary);
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 var(--up);
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: var(--text-primary);
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: var(--up-soft);
}
.tier.t3 .lab {
background: var(--warning-soft);
}
.tier.t2 .lab {
background: var(--down-soft);
}
.tier.t1 .lab {
background: var(--action-soft);
}
.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: var(--surface-muted);
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: var(--surface-muted);
border-radius: 5px;
overflow: hidden;
}
.score-list .row .bar i {
display: block;
height: 100%;
background: 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: var(--surface);
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: var(--surface-muted);
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: var(--down);
}
.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: var(--table-hover);
}
.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);
}