4a90c32fcc
- 新增 5 档强度色 token（日/夜两套，含渐变填充与光晕 alpha），tokens.css - 板块轮动卡片改为 heat-tier-1..5，固定阈值 <65/65-74/75-84/85-94/95+ 映射青/蓝/紫/橙/红，9 个日期列共用同一套映射，与涨跌无关 - 悬停/选中/追踪三态用 --tier-* 局部变量统一驱动，选中态（当次点击格） 用渐变实色+2px 亮边+光晕，追踪态（其余同名格）保留档位底色+2px 描边 +圆点标记，不新增业务状态；修复 hover 规则与 selected 同优先级导致 悬停会覆盖选中/追踪样式的层叠顺序问题（:hover 增加 :not(.selected)） - 图例改为 5 档 + “颜色＝强度档位，与涨跌无关” 说明，禁止对普通卡使用绿色 - 侧栏/品牌区去掉独立色块：.module-nav 融入页面 --canvas， 品牌区与顶栏同层（--header-bg），收起侧栏整行透明；仅作用于 非移动端且非「问天」路由，问天页面零改动 - 清理死代码：未生效的 .selected 旧规则与引用未定义变量的 --rotation-heat 声明 - 更新 e2e 断言以匹配新 tier 类名；重新生成 architecture-inventory.json Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
1328 lines
22 KiB
CSS
1328 lines
22 KiB
CSS
/* Canonical CSS owner: rotation. Historical layers consolidated 2026-08-02. */
|
|
|
|
.rotation-day header {
|
|
display: grid;
|
|
|
|
gap: 2px;
|
|
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.rotation-day header time {
|
|
font-size: 12px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
.rotation-day header span {
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
.rotation-day.has-selection:not(.selected-day) {
|
|
opacity: 0.42;
|
|
}
|
|
|
|
.rotation-day.selected-day {
|
|
background: var(--selected);
|
|
}
|
|
|
|
.rotation-sector-chip > span {
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 10px;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.rotation-history {
|
|
grid-template-columns: repeat(3, minmax(0px, 1fr));
|
|
}
|
|
|
|
.rotation-day {
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.rotation-day:nth-child(3n) {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.rotation-day:nth-last-child(-n+3) {
|
|
border-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.rotation-history {
|
|
min-height: 224px;
|
|
}
|
|
|
|
.rotation-day {
|
|
padding: 8px 6px;
|
|
}
|
|
|
|
.rotation-sector-chip {
|
|
grid-template-columns: 14px minmax(0px, 1fr);
|
|
}
|
|
|
|
.rotation-sector-chip small {
|
|
grid-column: 2;
|
|
}
|
|
}
|
|
|
|
.rotation-day:nth-child(2n+1) {
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.rotation-day-sector {
|
|
border-color: var(--border);
|
|
|
|
border-radius: 4px;
|
|
|
|
background: var(--surface);
|
|
}
|
|
|
|
.rotation-legend span {
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 4px;
|
|
}
|
|
|
|
.rotation-legend small {
|
|
margin-left: auto;
|
|
|
|
color: var(--text-tertiary);
|
|
}
|
|
|
|
:where(#rotationView) .rotation-swatch {
|
|
background: var(--accent-soft);
|
|
}
|
|
|
|
:where(#rotationView) .rotation-tracker-copy {
|
|
flex-direction: column;
|
|
}
|
|
|
|
:where(#rotationView) .rotation-day {
|
|
transition: background-color var(--motion-medium) ease, opacity var(--motion-medium) ease;
|
|
|
|
padding: 11px 8px 13px;
|
|
|
|
border-right-color: var(--border);
|
|
}
|
|
|
|
:where(#rotationView) .rotation-sector-chip strong {
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:where(#rotationView) .rotation-sector-chip small {
|
|
margin-top: -4px;
|
|
}
|
|
|
|
@media (max-width: 1280px) {
|
|
.rotation-history {
|
|
grid-template-columns: repeat(9, minmax(126px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.rotation-history {
|
|
grid-template-columns: repeat(9, 128px);
|
|
}
|
|
|
|
.rotation-legend small {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
:where(#rotationView) .rotation-history {
|
|
border-top-color: var(--border);
|
|
|
|
overflow-x: auto;
|
|
}
|
|
|
|
:where(#rotationView) .rotation-sector-chip {
|
|
width: 100%;
|
|
|
|
cursor: pointer;
|
|
|
|
border-bottom: 1px dashed var(--border);
|
|
}
|
|
|
|
.redesigned-rotation-view {
|
|
min-width: 0px;
|
|
|
|
padding: 14px 16px 18px;
|
|
}
|
|
|
|
.rotation-page-head {
|
|
min-height: 34px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 12px;
|
|
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.rotation-page-head h2 {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--font-size-page-title);
|
|
|
|
font-weight: var(--font-weight-semibold);
|
|
|
|
letter-spacing: 0px;
|
|
}
|
|
|
|
.rotation-page-head p {
|
|
margin: 2px 0px 0px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 12px;
|
|
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.rotation-head-actions {
|
|
min-width: 0px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
margin-left: auto;
|
|
}
|
|
|
|
.rotation-order-control {
|
|
margin-right: 2px;
|
|
|
|
display: inline-flex;
|
|
|
|
gap: 2px;
|
|
|
|
padding: 2px;
|
|
|
|
border-radius: 8px;
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.rotation-order-control button {
|
|
min-height: 28px;
|
|
|
|
padding: 4px 12px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 6px;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: var(--font-size-label);
|
|
|
|
line-height: 1;
|
|
}
|
|
|
|
.rotation-order-control button.active {
|
|
background: var(--surface);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-weight: 600;
|
|
|
|
box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 2px;
|
|
}
|
|
|
|
.rotation-export-button:focus-visible,
|
|
.rotation-order-control button:focus-visible,
|
|
.rotation-sector-chip:focus-visible,
|
|
.rotation-track-cancel:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.rotation-export-button {
|
|
min-height: 32px;
|
|
|
|
height: 32px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 0 12px;
|
|
|
|
border: 1px solid var(--border-strong);
|
|
|
|
border-radius: 8px;
|
|
|
|
background: var(--surface);
|
|
|
|
color: var(--text-primary);
|
|
|
|
font-size: var(--font-size-label);
|
|
|
|
font-weight: 500;
|
|
}
|
|
|
|
.rotation-export-button:hover,
|
|
.rotation-track-cancel:hover {
|
|
border-color: var(--r2-blue-line);
|
|
|
|
color: var(--r2-blue);
|
|
}
|
|
|
|
.rotation-trajectory-card {
|
|
min-width: 0px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.rotation-detail-card {
|
|
min-width: 0px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
|
|
margin-top: 12px;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.rotation-card-head {
|
|
min-height: 45px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
}
|
|
|
|
.rotation-card-head > div {
|
|
min-width: 0px;
|
|
|
|
display: flex;
|
|
|
|
align-items: baseline;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.rotation-card-head h3 {
|
|
flex: 0 0 auto;
|
|
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 700;
|
|
|
|
letter-spacing: 0px;
|
|
}
|
|
|
|
.rotation-card-head > div > span {
|
|
min-width: 0px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 11px;
|
|
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.rotation-top-tag {
|
|
flex: 0 0 auto;
|
|
|
|
margin-left: auto;
|
|
|
|
padding: 2px 7px;
|
|
|
|
border-radius: 5px;
|
|
|
|
background: var(--surface-muted);
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 11px;
|
|
|
|
font-weight: 400;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-legend {
|
|
min-height: 36px;
|
|
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
align-items: center;
|
|
|
|
row-gap: 4px;
|
|
|
|
gap: 14px;
|
|
|
|
padding: 8px 14px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 11px;
|
|
|
|
line-height: 1.5;
|
|
}
|
|
|
|
#rotationView .rotation-legend > span {
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 4px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-swatch {
|
|
width: 14px;
|
|
|
|
height: 10px;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
display: inline-block;
|
|
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#rotationView .rotation-swatch.tier-1 {
|
|
background: var(--rotation-tier1-bar);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.tier-2 {
|
|
background: var(--rotation-tier2-bar);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.tier-3 {
|
|
background: var(--rotation-tier3-bar);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.tier-4 {
|
|
background: var(--rotation-tier4-bar);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.tier-5 {
|
|
background: var(--rotation-tier5-bar);
|
|
}
|
|
|
|
#rotationView .rotation-legend-note {
|
|
margin-left: auto;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-tracker {
|
|
min-height: 48px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 16px;
|
|
|
|
padding: 8px 14px;
|
|
|
|
border-bottom: 1px solid var(--r2-blue-line);
|
|
|
|
background: var(--r2-blue-soft);
|
|
}
|
|
|
|
#rotationView .rotation-tracker[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy {
|
|
min-width: 260px;
|
|
|
|
display: flex;
|
|
|
|
align-items: baseline;
|
|
|
|
gap: 12px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy strong {
|
|
flex: 0 0 auto;
|
|
|
|
color: var(--r2-blue);
|
|
|
|
font-size: 13.5px;
|
|
|
|
font-weight: 800;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy span {
|
|
color: var(--accent-hover);
|
|
|
|
font-size: 12px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy b {
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark {
|
|
height: 28px;
|
|
|
|
flex: 1 1 0%;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(9, 12px);
|
|
|
|
align-items: end;
|
|
|
|
gap: 4px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark > span {
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: end;
|
|
|
|
justify-content: center;
|
|
|
|
position: relative;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark i {
|
|
width: 12px;
|
|
|
|
height: var(--spark-height);
|
|
|
|
min-height: 4px;
|
|
|
|
display: block;
|
|
|
|
border-radius: 2px 2px 0px 0px;
|
|
|
|
background: var(--accent);
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark small {
|
|
position: absolute;
|
|
|
|
top: -1px;
|
|
|
|
color: var(--accent-hover);
|
|
|
|
font-size: 9px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark .missing i {
|
|
height: 8px;
|
|
|
|
border-width: 1px 1px 0px;
|
|
|
|
border-style: dashed dashed none;
|
|
|
|
border-color: var(--action-line) var(--action-line) currentcolor;
|
|
|
|
border-image: none;
|
|
|
|
background: transparent;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark .missing small {
|
|
display: none;
|
|
}
|
|
|
|
.rotation-track-cancel {
|
|
min-height: 32px;
|
|
|
|
height: 32px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
border: 1px solid var(--border-strong);
|
|
|
|
border-radius: 8px;
|
|
|
|
background: var(--surface);
|
|
|
|
color: var(--text-primary);
|
|
|
|
font-size: var(--font-size-label);
|
|
|
|
font-weight: 500;
|
|
|
|
margin-left: auto;
|
|
|
|
padding: 0 12px;
|
|
}
|
|
|
|
#rotationView .rotation-history {
|
|
width: 100%;
|
|
|
|
min-height: 0px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(9, minmax(0px, 1fr));
|
|
|
|
gap: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
#rotationView .rotation-day {
|
|
min-width: 0px;
|
|
|
|
border-top: 0px;
|
|
|
|
border-bottom: 0px;
|
|
|
|
border-left: 0px;
|
|
|
|
border-image: none;
|
|
|
|
border-right: 1px solid var(--r2-line-soft);
|
|
|
|
border-radius: 0px;
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rotationView .rotation-day:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
#rotationView .rotation-day > header {
|
|
min-height: 46px;
|
|
|
|
padding: 8px 9px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
|
|
background: var(--table-header);
|
|
}
|
|
|
|
#rotationView .rotation-day > header time {
|
|
display: block;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 12.5px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rotationView .rotation-day > header span {
|
|
display: block;
|
|
|
|
margin-top: 1px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 10.5px;
|
|
}
|
|
|
|
#rotationView .rotation-day.latest-day > header {
|
|
background: var(--r2-blue-soft);
|
|
}
|
|
|
|
#rotationView .rotation-day.latest-day > header time {
|
|
color: var(--r2-blue);
|
|
}
|
|
|
|
#rotationView .rotation-day.latest-day > header time::after {
|
|
content: "最新";
|
|
|
|
margin-left: 5px;
|
|
|
|
padding: 0px 4px;
|
|
|
|
border-radius: 4px;
|
|
|
|
background: var(--r2-blue);
|
|
|
|
color: var(--text-inverse);
|
|
|
|
font-size: 9px;
|
|
|
|
font-weight: 600;
|
|
|
|
vertical-align: 1px;
|
|
}
|
|
|
|
#rotationView .rotation-day-sectors {
|
|
display: grid;
|
|
|
|
gap: 4px;
|
|
|
|
padding: 5px;
|
|
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip {
|
|
min-width: 0px;
|
|
|
|
min-height: 43px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 17px minmax(0px, 1fr) auto;
|
|
|
|
align-items: center;
|
|
|
|
gap: 3px 5px;
|
|
|
|
position: relative;
|
|
|
|
padding: 6px 7px;
|
|
|
|
border: 1px solid transparent;
|
|
|
|
border-radius: 7px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
text-align: left;
|
|
|
|
transform: translate3d(0px, 0px, 0px);
|
|
|
|
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 240ms, border-color 240ms, box-shadow 280ms cubic-bezier(0.22, 1, 0.36, 1), filter 240ms, opacity 220ms;
|
|
|
|
will-change: transform;
|
|
}
|
|
|
|
#rotationView .rotation-rank {
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
grid-row: 1 / span 2;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
border-radius: 4px;
|
|
|
|
background: rgba(255, 255, 255, 0.72);
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 9.5px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rotationView .rotation-rank.rank-1 {
|
|
background: rgb(224, 69, 54);
|
|
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
#rotationView .rotation-rank.rank-2 {
|
|
background: rgb(240, 113, 79);
|
|
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
#rotationView .rotation-rank.rank-3 {
|
|
background: rgb(245, 166, 35);
|
|
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip strong {
|
|
min-width: 0px;
|
|
|
|
overflow: visible;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 11.5px;
|
|
|
|
font-weight: 700;
|
|
|
|
line-height: 1.3;
|
|
|
|
overflow-wrap: anywhere;
|
|
|
|
white-space: normal;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip small {
|
|
grid-column: 2 / span 2;
|
|
|
|
color: rgb(93, 107, 130);
|
|
|
|
font-size: 9px;
|
|
|
|
line-height: 1.15;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip small b {
|
|
color: var(--r2-ink);
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rotationView .rotation-history.tracking .rotation-sector-chip:not(.selected) {
|
|
opacity: 0.22;
|
|
}
|
|
|
|
#rotationView .rotation-history.tracking .rotation-sector-chip.selected {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 追踪态：命中被追踪板块名、但不是当次点击的那一格 —— 保持档位底色，2px 同档位描边（含 80% 不透明度），
|
|
连点标记不做动画，仅描边淡入 200ms */
|
|
#rotationView .rotation-sector-chip.selected:not(.current-cell) {
|
|
border-width: 2px;
|
|
|
|
border-color: color-mix(in srgb, var(--tier-bar) 80%, transparent);
|
|
|
|
transition: border-color 200ms var(--ease-out);
|
|
}
|
|
|
|
/* 选中态：仅当次点击的日期+板块这一格 —— 同档位实色渐变 + 2px 亮描边 + 克制光晕，全页最多一张 */
|
|
#rotationView .rotation-sector-chip.selected.current-cell {
|
|
border-width: 2px;
|
|
|
|
border-color: var(--tier-text);
|
|
|
|
background: linear-gradient(135deg, var(--tier-fill-start), var(--tier-fill-end));
|
|
|
|
box-shadow: 0 0 16px color-mix(in srgb, var(--tier-bar) var(--rotation-tier-glow-alpha), transparent);
|
|
|
|
color: var(--text-inverse);
|
|
|
|
transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.selected.current-cell strong,
|
|
#rotationView .rotation-sector-chip.selected.current-cell small,
|
|
#rotationView .rotation-sector-chip.selected.current-cell small b {
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
#rotationView .rotation-track-dot {
|
|
width: 6px;
|
|
|
|
height: 6px;
|
|
|
|
position: absolute;
|
|
|
|
top: 6px;
|
|
|
|
right: 6px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: var(--tier-bar);
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
#rotationView .rotation-sector-chip.selected.current-cell {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.rotation-cell-tooltip {
|
|
display: none;
|
|
|
|
position: absolute;
|
|
|
|
bottom: calc(100% + 4px);
|
|
|
|
left: 7px;
|
|
|
|
z-index: 20;
|
|
|
|
padding: 4px 8px;
|
|
|
|
border-radius: 5px;
|
|
|
|
background: var(--r2-ink);
|
|
|
|
color: var(--text-inverse);
|
|
|
|
font-size: 10.5px;
|
|
|
|
font-weight: 400;
|
|
|
|
line-height: 1.4;
|
|
|
|
white-space: nowrap;
|
|
|
|
box-shadow: rgba(31, 41, 55, 0.18) 0px 5px 14px;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.rotation-sector-chip:focus-visible .rotation-cell-tooltip,
|
|
.rotation-sector-chip:hover .rotation-cell-tooltip {
|
|
display: block;
|
|
}
|
|
|
|
.rotation-table-frame {
|
|
width: 100%;
|
|
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th {
|
|
height: 36px;
|
|
|
|
padding: 0 12px;
|
|
|
|
border-bottom: 1px solid var(--r2-line);
|
|
|
|
background: var(--table-header);
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: var(--font-size-caption);
|
|
|
|
font-weight: 600;
|
|
|
|
text-align: left;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th.number {
|
|
text-align: right;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th:first-child,
|
|
#rotationView .rotation-table tbody td:first-child {
|
|
text-align: left;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th[data-auto-sort] {
|
|
color: var(--text-2);
|
|
|
|
cursor: pointer;
|
|
|
|
user-select: none;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th[data-auto-sort]::after {
|
|
content: "↕";
|
|
|
|
margin-left: 4px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 9px;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th.sort-asc::after {
|
|
content: "▲";
|
|
|
|
color: var(--r2-blue);
|
|
}
|
|
|
|
#rotationView .rotation-table thead th.sort-desc::after {
|
|
content: "▼";
|
|
|
|
color: var(--r2-blue);
|
|
}
|
|
|
|
#rotationView .rotation-table tbody td {
|
|
height: 40px;
|
|
|
|
padding: 0 12px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--font-size-table);
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-table tbody tr:last-child td {
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
#rotationView .rotation-table tbody tr:hover td {
|
|
background: var(--table-hover);
|
|
}
|
|
|
|
#rotationView .rotation-table .stock-name {
|
|
font-size: 13px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
#rotationView .rotation-table .muted {
|
|
color: var(--r2-faint);
|
|
}
|
|
|
|
#rotationView .trend-hot {
|
|
background: var(--r2-up-soft);
|
|
|
|
color: var(--r2-up);
|
|
}
|
|
|
|
#rotationView .trend-cool {
|
|
background: var(--accent-soft);
|
|
|
|
color: var(--accent);
|
|
}
|
|
|
|
#rotationView .trend-new {
|
|
background: var(--r2-down-soft);
|
|
|
|
color: var(--r2-down);
|
|
}
|
|
|
|
#rotationView .trend-flat {
|
|
background: var(--surface-muted);
|
|
|
|
color: var(--r2-sub);
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
#rotationView .rotation-history {
|
|
grid-template-columns: repeat(9, 138px);
|
|
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy {
|
|
min-width: 0px;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 2px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-copy span {
|
|
white-space: normal;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.redesigned-rotation-view {
|
|
padding: 0px;
|
|
}
|
|
|
|
.rotation-page-head {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.rotation-head-actions {
|
|
width: 100%;
|
|
|
|
margin-left: 0px;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.rotation-page-head p {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.rotation-card-head > div {
|
|
align-items: flex-start;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 2px;
|
|
}
|
|
|
|
#rotationView .rotation-legend {
|
|
gap: 8px 12px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker {
|
|
align-items: flex-start;
|
|
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.rotation-track-cancel {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
|
|
/* HEL-524: 五档强度色 —— 同一强度值在 9 个日期列中颜色完全一致，仅代表强度档位，与涨跌无关。
|
|
普通卡只用低透明着色，页面/主容器/日期分栏的层级由 HEL-522 的明度骨架承担，这里不重复叠加。 */
|
|
#rotationView .rotation-sector-chip.heat-tier-1 {
|
|
--tier-bar: var(--rotation-tier1-bar);
|
|
--tier-bg: var(--rotation-tier1-bg);
|
|
--tier-border: var(--rotation-tier1-border);
|
|
--tier-text: var(--rotation-tier1-text);
|
|
--tier-fill-start: var(--rotation-tier1-fill-start);
|
|
--tier-fill-end: var(--rotation-tier1-fill-end);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-tier-2 {
|
|
--tier-bar: var(--rotation-tier2-bar);
|
|
--tier-bg: var(--rotation-tier2-bg);
|
|
--tier-border: var(--rotation-tier2-border);
|
|
--tier-text: var(--rotation-tier2-text);
|
|
--tier-fill-start: var(--rotation-tier2-fill-start);
|
|
--tier-fill-end: var(--rotation-tier2-fill-end);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-tier-3 {
|
|
--tier-bar: var(--rotation-tier3-bar);
|
|
--tier-bg: var(--rotation-tier3-bg);
|
|
--tier-border: var(--rotation-tier3-border);
|
|
--tier-text: var(--rotation-tier3-text);
|
|
--tier-fill-start: var(--rotation-tier3-fill-start);
|
|
--tier-fill-end: var(--rotation-tier3-fill-end);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-tier-4 {
|
|
--tier-bar: var(--rotation-tier4-bar);
|
|
--tier-bg: var(--rotation-tier4-bg);
|
|
--tier-border: var(--rotation-tier4-border);
|
|
--tier-text: var(--rotation-tier4-text);
|
|
--tier-fill-start: var(--rotation-tier4-fill-start);
|
|
--tier-fill-end: var(--rotation-tier4-fill-end);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-tier-5 {
|
|
--tier-bar: var(--rotation-tier5-bar);
|
|
--tier-bg: var(--rotation-tier5-bg);
|
|
--tier-border: var(--rotation-tier5-border);
|
|
--tier-text: var(--rotation-tier5-text);
|
|
--tier-fill-start: var(--rotation-tier5-fill-start);
|
|
--tier-fill-end: var(--rotation-tier5-fill-end);
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip[class*="heat-tier-"] {
|
|
border-color: var(--tier-border);
|
|
|
|
background: var(--tier-bg);
|
|
|
|
box-shadow: inset 4px 0 0 0 var(--tier-bar);
|
|
|
|
transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 120ms var(--ease-out), border-color 120ms var(--ease-out), box-shadow 120ms var(--ease-out), filter 240ms, opacity 220ms;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip[class*="heat-tier-"] .rotation-strength {
|
|
color: var(--tier-text);
|
|
}
|
|
|
|
/* 悬停态：卡底与描边 alpha 适度提升，120ms ease-out，可打断，不打乱档位色含义；
|
|
已经处于选中/追踪态的卡片保持其自身样式，不叠加普通悬停处理 */
|
|
#rotationView .rotation-sector-chip[class*="heat-tier-"]:hover:not(.selected) {
|
|
z-index: 6;
|
|
|
|
background: color-mix(in srgb, var(--tier-bar) 8%, var(--tier-bg) 92%);
|
|
|
|
border-color: color-mix(in srgb, var(--tier-bar) 26%, var(--tier-border) 74%);
|
|
|
|
filter: saturate(1.06);
|
|
|
|
transform: translate3d(2px, -2px, 0px) scale(1.015);
|
|
}
|
|
|
|
#rotationView .rotation-table {
|
|
width: 100%;
|
|
|
|
border-collapse: collapse;
|
|
|
|
font-size: var(--font-size-table);
|
|
|
|
table-layout: auto;
|
|
|
|
min-width: var(--table-wide);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
#rotationView.active-view {
|
|
display: grid;
|
|
|
|
grid-template-rows: auto minmax(0,var(--primary-share)) minmax(0,var(--secondary-share));
|
|
|
|
gap: var(--card-gap);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
#rotationView .rotation-page-head {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
#rotationView .rotation-detail-card,
|
|
#rotationView .rotation-trajectory-card {
|
|
min-height: 0px;
|
|
|
|
margin-top: 0px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
#rotationView .rotation-history,
|
|
#rotationView .rotation-table-frame {
|
|
min-height: 0px;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
overflow: auto;
|
|
}
|
|
|
|
:root #rotationView.active-view {
|
|
height: auto;
|
|
|
|
min-height: 0px;
|
|
|
|
display: block;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
:root #rotationView .rotation-history,
|
|
:root #rotationView .rotation-table-frame {
|
|
max-height: none;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
:root #rotationView .rotation-detail-card,
|
|
:root #rotationView .rotation-trajectory-card {
|
|
min-height: 0px;
|
|
|
|
margin-top: var(--card-gap);
|
|
|
|
display: block;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
:root #rotationView .rotation-page-head {
|
|
margin-bottom: 0px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
|
|
#rotationView.active-view {
|
|
display: block;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
#rotationView .rotation-detail-card,
|
|
#rotationView .rotation-trajectory-card {
|
|
margin-top: var(--card-gap);
|
|
}
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView :is(.rotation-order-control, .rotation-export-button, .rotation-top-tag, .rotation-trajectory-card, .rotation-detail-card, .rotation-day, .rotation-day > header, .rotation-day-sectors) {
|
|
border-color: var(--border);
|
|
|
|
background: var(--surface);
|
|
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView :is(.rotation-order-control, .rotation-day > header, .rotation-top-tag) {
|
|
background: var(--surface-muted);
|
|
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView .rotation-day-sectors {
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView .rotation-order-control button.active {
|
|
background: var(--surface-subtle);
|
|
|
|
color: var(--text-primary);
|
|
|
|
box-shadow: var(--control-shadow);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView :is(.rotation-rank, .rotation-table thead th, .trend-flat) {
|
|
border-color: var(--border);
|
|
|
|
background: var(--surface-muted);
|
|
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView .rotation-table tbody tr:hover td {
|
|
background: var(--action-soft);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
#rotationView :is(.rotation-table-frame, .rotation-detail-card) {
|
|
max-height: none;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
#rotationView .rotation-table-frame {
|
|
overflow-x: auto;
|
|
}
|
|
}
|