Files
xiaobai-review/frontend/pages/sentiment/foundation.css
T
213f735f6a fix(HEL-221): 按确认样图实现情绪周期左右等高与夜间提示
桌面分析区固定 600px 并 stretch 对齐,评分构成在剩余高度内分配;夜间 tooltip 使用指定深色对比度,图表按容器尺寸重绘且不随视口拉满整页。

Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: multica-agent <github@multica.ai>
2026-08-28 15:01:22 +00:00

1834 lines
30 KiB
CSS

/* Canonical CSS owner: sentiment. Historical layers consolidated 2026-08-02. */
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
#sentimentCycleView {
--sentiment-history-max-height: min(480px, calc(100dvh - 210px));
}
}
.sentiment-gauge:hover {
transform: scale(1.035);
}
.sentiment-gauge::before {
content: "";
position: absolute;
inset: 6px;
border-radius: 50%;
background: var(--surface);
}
.sentiment-gauge span.metric-changed {
animation: metric-update 560ms var(--ease-out);
}
.sentiment-gauge.sentiment-pulse {
animation: sentiment-pulse var(--motion-slow) var(--ease-out) both;
}
@keyframes sentiment-pulse {
0%,
100% {
box-shadow: rgba(201, 63, 69, 0) 0px 0px 0px 0px;
transform: scale(1);
}
48% {
box-shadow: rgba(201, 63, 69, 0.13) 0px 0px 0px 5px;
transform: scale(1.045);
}
}
.sentiment-gauge::after {
content: "";
position: absolute;
inset: -4px;
border-radius: 50%;
background: conic-gradient(transparent 0deg, transparent 64%, rgba(201, 63, 69, 0.18) 69%, rgba(201, 63, 69, 0.82) 76%, rgba(201, 63, 69, 0.12) 83%, transparent 89%, transparent 100%);
mask: radial-gradient(circle, transparent 66%, rgb(0, 0, 0) 68%);
pointer-events: none;
animation: 3.8s linear 0s infinite normal none running sentiment-idle;
}
@keyframes sentiment-idle {
0% {
opacity: 0.55;
transform: rotate(0deg) scale(0.98);
}
50% {
opacity: 1;
transform: rotate(180deg) scale(1.06);
}
100% {
opacity: 0.55;
transform: rotate(360deg) scale(0.98);
}
}
.market-breadth-panel.breadth-enter {
animation: breadth-panel-enter 420ms var(--ease-out) both;
}
@keyframes breadth-panel-enter {
0% {
opacity: 0.42;
transform: translateY(5px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
.breadth-up {
background: var(--market-up);
}
.breadth-flat {
background: rgb(170, 179, 188);
}
.breadth-down {
background: var(--market-down);
}
.sentiment-chart-shell canvas {
width: 100%;
height: 100%;
display: block;
}
.sentiment-component-item:last-child {
padding-bottom: 0px;
border-bottom: 0px;
}
.sentiment-component-item strong {
font-size: 12px;
}
.sentiment-component-item span {
color: var(--text-secondary);
font-size: 10px;
}
.sentiment-component-item b {
font-size: 13px;
text-align: right;
}
.sentiment-component-track i {
height: 100%;
display: block;
background: var(--action);
transition: width var(--motion-deliberate) var(--ease-out);
}
.sentiment-component-item:nth-child(2) .sentiment-component-track i {
background: var(--market-up);
}
.sentiment-component-item:nth-child(3) .sentiment-component-track i {
background: var(--market-down);
}
.sentiment-component-item:nth-child(4) .sentiment-component-track i {
background: var(--warning-color);
}
.sentiment-component-item:nth-child(5) .sentiment-component-track i {
background: rgb(93, 108, 120);
}
.sentiment-detail-toolbar h2 {
font-size: 15px;
}
.sentiment-history-table {
min-width: 980px;
table-layout: fixed;
font-size: 13px;
font-variant-numeric: tabular-nums;
}
.sentiment-history-table .sentiment-col-date {
width: 94px;
}
.sentiment-history-table .sentiment-col-score {
width: 56px;
}
.sentiment-history-table .sentiment-col-direction,
.sentiment-history-table .sentiment-col-phase {
width: 62px;
}
.sentiment-history-table .sentiment-col-count {
width: 54px;
}
.sentiment-history-table .sentiment-col-height {
width: 58px;
}
.sentiment-history-table .sentiment-col-feedback {
width: 66px;
}
.sentiment-history-table .sentiment-col-rate {
width: 72px;
}
.sentiment-history-table .number {
text-align: center;
}
.sentiment-history-table thead th {
border-bottom-color: rgb(216, 224, 230);
height: 36px;
font-size: var(--fs-caption);
font-weight: 600;
}
.sentiment-history-table .sentiment-history-groups th {
height: 29px;
top: 0px;
z-index: 5;
border-right-color: rgb(216, 224, 230);
color: rgb(82, 97, 109);
font-weight: 700;
}
.sentiment-history-table .sentiment-history-groups .group-state {
background: rgb(237, 243, 248);
}
.sentiment-history-table .sentiment-history-groups .group-ladder {
background: var(--warning-soft);
}
.sentiment-history-table .sentiment-history-groups .group-risk {
background: var(--market-up-soft);
}
.sentiment-history-table .sentiment-history-groups .group-feedback {
background: rgb(237, 245, 242);
}
.sentiment-history-table .sentiment-history-columns th {
height: 34px;
top: 29px;
z-index: 5;
background: var(--table-header);
color: rgb(57, 74, 86);
font-size: 12px;
}
.sentiment-history-table tbody td:first-child {
position: sticky;
z-index: 3;
background: var(--surface);
left: 0px;
text-align: left;
}
.sentiment-history-table tbody td:nth-child(2) {
position: sticky;
z-index: 3;
background: var(--surface);
left: 94px;
box-shadow: 1px 0 0 var(--border);
}
.sentiment-history-table .sentiment-history-columns th:first-child {
position: sticky;
left: 0px;
text-align: left;
z-index: 7;
background: var(--table-header);
}
.sentiment-history-table .sentiment-history-columns th:nth-child(2) {
position: sticky;
left: 94px;
box-shadow: 1px 0 0 var(--border);
z-index: 7;
background: var(--table-header);
}
.sentiment-history-table tbody tr:hover td {
background: var(--table-hover);
}
.sentiment-score-cell {
font-weight: 750;
}
.sentiment-score-cell.score-strong {
color: var(--market-up);
}
.sentiment-score-cell.score-weak {
color: var(--market-down);
}
.sentiment-score-cell.score-neutral {
color: var(--warning-color);
}
.sentiment-direction,
.sentiment-phase-badge {
display: inline-flex;
align-items: center;
min-width: 42px;
min-height: 21px;
justify-content: center;
padding: 0px 5px;
border-radius: 4px;
background: var(--surface-muted);
font-size: 11.5px;
font-weight: 650;
}
.sentiment-phase-badge.phase-ice {
background: rgb(234, 242, 251);
color: rgb(36, 91, 145);
}
.sentiment-phase-badge.phase-repair {
background: var(--accent-soft);
color: var(--accent);
}
.sentiment-phase-badge.phase-fermentation {
background: var(--up-soft);
color: var(--up);
}
.sentiment-phase-badge.phase-climax {
background: rgb(252, 236, 238);
color: rgb(169, 47, 53);
}
.sentiment-phase-badge.phase-divergence {
background: rgb(255, 243, 223);
color: rgb(152, 96, 15);
}
.sentiment-phase-badge.phase-retreat {
background: rgb(238, 240, 242);
color: rgb(82, 91, 101);
}
.sentiment-direction.trend-hot {
color: var(--market-up);
}
.sentiment-direction.trend-cool {
color: var(--market-down);
}
.sentiment-direction.trend-flat {
color: var(--text-secondary);
}
@media (max-width: 1023px) {
.sentiment-cycle-summary {
grid-template-columns: repeat(2, minmax(0px, 1fr));
}
.sentiment-cycle-analysis {
grid-template-columns: minmax(0px, 1.35fr) minmax(280px, 0.85fr);
}
}
@media (max-width: 767px) {
body[data-active-view="sentimentCycleView"] .overview-strip {
display: none;
}
.sentiment-cycle-toolbar {
flex-direction: column;
}
.sentiment-cycle-toolbar .toolbar-controls {
width: 100%;
}
.sentiment-cycle-toolbar .sentiment-range-selector {
flex: 1 1 0%;
}
.sentiment-components-panel {
padding: 12px;
}
.sentiment-detail-toolbar {
min-height: 58px;
padding: 10px 12px;
}
.sentiment-history-frame {
min-height: 0px;
max-height: min(480px, -210px + 100vh);
}
}
@media (max-width: 860px) {
.sentiment-block {
grid-column: 1 / -1;
border-right: 0px;
}
}
.sentiment-block {
min-width: 0px;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 15px;
border-right-color: var(--border);
}
.sentiment-gauge {
--score: 0;
display: grid;
place-items: center;
flex: 0 0 52px;
border-radius: 50%;
background: conic-gradient(var(--coral) calc(var(--score) * 1%), var(--border) 0);
position: relative;
transition: --score 650ms var(--ease-out), transform var(--motion-medium) var(--ease-out);
width: 52px;
height: 52px;
}
.sentiment-gauge span {
font-variant-numeric: tabular-nums;
position: relative;
font-weight: 750;
font-size: 17px;
}
.sentiment-text {
display: block;
margin-top: 3px;
white-space: nowrap;
font-size: 16px;
font-weight: 760;
}
.sentiment-history-table td,
.sentiment-history-table th {
height: 40px;
padding: 0px 7px;
text-align: center;
}
.sentiment-history-groups th {
background: rgb(238, 243, 246);
}
@media (max-width: 767px) {
.sentiment-block {
min-height: 0px;
padding: 8px 10px;
border-right: 1px solid var(--border);
border-bottom: 1px solid var(--border);
grid-area: 1 / 1 / 3;
align-items: flex-start;
justify-content: center;
flex-direction: column;
gap: 8px;
}
.sentiment-gauge {
width: 44px;
height: 44px;
flex-basis: 44px;
}
.sentiment-gauge::before {
inset: 5px;
}
.sentiment-gauge span {
font-size: 15px;
}
.sentiment-text {
margin-top: 2px;
font-size: 14px;
}
.sentiment-cycle-summary {
grid-template-columns: 1fr 1fr;
}
.sentiment-cycle-analysis {
grid-template-columns: 1fr;
}
.sentiment-trend-panel {
padding: 12px;
border-right: 0px;
border-bottom: 1px solid var(--border);
}
.sentiment-chart-shell {
height: 260px;
}
}
@media (max-width: 1280px) {
.overview-strip .sentiment-block {
padding: 0px 8px;
}
}
@media (max-width: 900px) {
.overview-strip[data-overview-expanded="true"] .sentiment-block {
grid-column: 1 / 4;
min-height: 56px;
}
}
@media (max-width: 767px) {
.overview-strip .sentiment-block {
grid-area: 1 / 1 / 3;
min-height: 54px;
}
}
.sentiment-trend-panel .workspace-heading > div span {
display: block;
margin-top: 2px;
color: var(--text-tertiary);
font-size: 10.5px;
}
.sentiment-chart-legend {
min-height: 34px;
display: flex;
align-items: center;
gap: 18px;
padding: 0px 14px;
border-bottom: 1px solid rgb(237, 240, 244);
color: var(--text-secondary);
font-size: 10.5px;
}
.sentiment-chart-legend span {
display: inline-flex;
align-items: center;
gap: 6px;
}
.sentiment-chart-legend span::before {
content: "";
width: 12px;
height: 3px;
border-radius: 2px;
background: var(--primary);
}
.sentiment-chart-legend .retreat-point::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--danger);
}
.sentiment-chart-legend .repair-point::before {
width: 7px;
height: 7px;
border-radius: 50%;
background: rgb(230, 154, 22);
}
.sentiment-chart-legend .temperature-average::before {
height: 1px;
background: rgb(201, 209, 220);
}
.sentiment-components-panel > .workspace-heading,
.sentiment-cycle-summary > .workspace-heading {
border-bottom: 1px solid var(--border);
}
@media (max-width: 900px) {
.sentiment-cycle-analysis,
.sentiment-analysis-rail {
grid-template-columns: 1fr;
}
}
.sentiment-analysis-rail {
display: grid;
gap: 12px;
}
.sentiment-component-list {
display: grid;
gap: 9px;
padding: 4px 14px 7px;
}
.sentiment-component-item {
min-width: 0px;
border-bottom-color: var(--border);
min-height: 0px;
padding: 4px 0px;
}
.sentiment-component-item > div:first-child {
display: grid;
align-items: baseline;
gap: 8px;
grid-template-columns: minmax(76px, 1fr) auto 34px;
}
.sentiment-component-item small {
color: var(--text-secondary);
display: block;
overflow: hidden;
margin-top: 1px;
font-size: 9px;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.sentiment-component-track {
height: 5px;
overflow: hidden;
background: rgb(230, 235, 239);
margin-top: 4px;
}
.sentiment-detail-toolbar {
min-height: 46px;
padding-top: 7px;
padding-bottom: 7px;
margin-top: 0px;
}
.sentiment-cycle-analysis {
display: grid;
border-bottom-color: var(--border);
grid-template-columns: minmax(0px, 1fr) 340px;
gap: 12px;
margin-bottom: 12px;
align-items: stretch;
}
.sentiment-trend-panel {
min-width: 0px;
padding: 16px;
margin: 0px;
border: 1px solid var(--border);
border-radius: var(--card-radius);
background: var(--surface);
box-shadow: var(--card-shadow);
overflow: hidden;
min-height: 0px;
}
.sentiment-chart-shell {
min-width: 0px;
padding: 14px 18px 10px;
height: 296px;
}
.sentiment-components-panel {
min-width: 0px;
padding: 16px;
margin: 0px;
border: 1px solid var(--border);
border-radius: var(--card-radius);
background: var(--surface);
box-shadow: var(--card-shadow);
overflow: hidden;
min-height: 0px;
}
.sentiment-cycle-summary {
margin: 0px;
border: 1px solid var(--border);
border-radius: var(--card-radius);
background: var(--surface);
box-shadow: var(--card-shadow);
overflow: hidden;
display: block;
min-height: 0px;
}
:where(#sentimentCycleView) .sentiment-history-frame {
border: 0px;
min-height: 0px;
}
.sentiment-history-table tbody td {
height: 35px;
padding-top: 5px;
padding-bottom: 5px;
}
.overview-strip .sentiment-block {
background: transparent;
min-width: 0px;
min-height: 0px;
display: flex;
flex: 0 0 auto;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2px;
padding: 0 16px;
border: 0px;
}
.overview-strip .sentiment-block > div:last-child {
display: flex;
align-items: center;
gap: 5px;
white-space: nowrap;
}
.overview-strip .sentiment-gauge {
width: 20px;
height: 20px;
flex: 0 0 20px;
border-width: 2px;
font-size: 8.5px;
}
.overview-strip .sentiment-text {
color: var(--accent);
font-size: var(--fs-caption);
font-weight: 500;
white-space: nowrap;
}
.overview-strip[data-overview-expanded="true"] .sentiment-gauge {
width: 46px;
height: 46px;
flex-basis: 46px;
font-size: 13px;
}
.redesigned-sentiment-view {
overflow: visible;
border: 0px;
border-radius: 0px;
background: transparent;
box-shadow: none;
}
.redesigned-page-head #sentimentExportButton {
min-height: 28px;
height: 28px;
padding: 0px 11px;
font-size: 12px;
}
.redesigned-card-head .sentiment-auto-tag,
.redesigned-card-head .sentiment-current-tag {
margin-left: auto;
padding: 2px 7px;
border-radius: 5px;
background: var(--surface-muted);
color: var(--r2-sub);
font-size: 11px;
}
.redesigned-sentiment-view .sentiment-components-panel,
.redesigned-sentiment-view .sentiment-cycle-summary,
.redesigned-sentiment-view .sentiment-trend-panel {
margin: 0px;
padding: 0px;
border: 1px solid var(--r2-line);
}
.redesigned-sentiment-view .sentiment-chart-legend {
min-height: 34px;
display: flex;
gap: 16px;
align-items: center;
padding: 8px 14px;
border-bottom: 1px solid var(--r2-line-soft);
color: var(--r2-sub);
font-size: 11px;
}
.sentiment-chart-tooltip {
position: absolute;
z-index: 5;
pointer-events: none;
padding: 5px 9px;
border-radius: 6px;
background: var(--sentiment-tooltip-bg);
color: var(--sentiment-tooltip-fg);
font-size: 11px;
white-space: nowrap;
}
.sentiment-chart-tooltip b {
color: inherit;
font-weight: 700;
}
.sentiment-phase-block {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 14px 16px 10px;
}
.sentiment-current-phase-badge {
min-width: 92px;
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
padding: 10px 16px;
border: 1px solid var(--accent);
border-radius: var(--card-radius);
background: var(--accent-soft);
text-align: center;
}
.sentiment-current-phase-badge strong {
display: block;
color: var(--accent);
font-size: 19px;
font-weight: 700;
line-height: 1.35;
}
.sentiment-current-phase-badge span {
display: block;
margin-top: 0;
color: var(--text-3);
font-size: var(--fs-aux);
white-space: nowrap;
}
.sentiment-phase-info {
min-width: 0px;
flex: 1 1 0%;
}
.sentiment-phase-info p {
color: var(--text-2);
font-size: var(--fs-label);
line-height: 1.6;
}
.sentiment-phase-info p b {
color: var(--text-1);
font-weight: 600;
}
.sentiment-phase-info p .down {
color: var(--r2-down);
}
.sentiment-phase-info p .up {
color: var(--r2-up);
}
.sentiment-phase-advice {
margin-top: 8px;
padding: 8px 10px;
border-radius: var(--radius-md);
background: var(--surface-muted);
color: var(--text-2);
font-size: var(--fs-caption);
line-height: 1.55;
}
.sentiment-feedback-strip {
display: grid;
grid-template-columns: 1fr 1fr;
border-top: 1px solid var(--border);
}
.sentiment-feedback-strip > span {
min-width: 0px;
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 2px 6px;
padding: 9px 14px;
color: var(--text-3);
font-size: var(--fs-caption);
}
.sentiment-feedback-strip > span + span {
border-left: 1px solid var(--border);
}
.sentiment-feedback-strip strong {
color: var(--text-1);
font-size: inherit;
font-weight: 600;
text-align: left;
}
.sentiment-feedback-strip small {
overflow: hidden;
color: var(--text-3);
font-size: var(--fs-aux);
text-overflow: ellipsis;
white-space: nowrap;
}
.redesigned-sentiment-view .sentiment-component-list {
padding: 8px 16px 14px;
}
.redesigned-sentiment-view .sentiment-component-item {
padding: 6px 0px 4px;
border: 0px;
}
.redesigned-sentiment-view .sentiment-component-item > div:first-child {
display: grid;
grid-template-columns: 88px minmax(0px, 1fr) 68px;
align-items: center;
gap: 10px;
min-height: 20px;
}
.redesigned-sentiment-view .sentiment-component-item strong {
color: var(--r2-sub);
font-size: 12px;
font-weight: 400;
}
.redesigned-sentiment-view .sentiment-component-item span {
display: none;
}
.redesigned-sentiment-view .sentiment-component-item b {
grid-area: 1 / 3;
color: var(--r2-ink);
font-size: 12px;
font-weight: 700;
text-align: right;
}
.redesigned-sentiment-view .sentiment-component-item b em {
color: var(--r2-faint);
font-size: 10px;
font-style: normal;
font-weight: 400;
}
.redesigned-sentiment-view .sentiment-component-track {
grid-area: 1 / 2;
height: 9px;
margin: 0px;
overflow: hidden;
border-radius: 5px;
background: var(--surface-muted);
}
.redesigned-sentiment-view .sentiment-component-item:nth-child(n) .sentiment-component-track i,
.redesigned-sentiment-view .sentiment-component-track i {
display: block;
height: 100%;
border-radius: 5px;
background: linear-gradient(90deg, #93b4f5, var(--r2-blue));
}
.redesigned-sentiment-view .sentiment-component-item small {
display: block;
margin: 0px 0px 0px 98px;
color: var(--r2-faint);
font-size: 10.5px;
line-height: 1.45;
}
.redesigned-sentiment-view .sentiment-detail-toolbar {
min-height: 44px;
margin: 0px;
padding: 9px 14px;
border-bottom: 0px;
border-radius: var(--r2-radius) var(--r2-radius) 0 0;
background: var(--surface);
}
.redesigned-sentiment-view .sentiment-detail-toolbar h2 {
font-size: 14px;
font-weight: 700;
}
.redesigned-sentiment-view .sentiment-history-frame {
max-height: none;
overflow: auto;
border: 1px solid var(--r2-line);
border-radius: 0 0 var(--r2-radius) var(--r2-radius);
background: var(--surface);
box-shadow: var(--r2-shadow);
}
.redesigned-sentiment-view .sentiment-history-table {
font-size: 12.5px;
}
.redesigned-sentiment-view .sentiment-history-table td,
.redesigned-sentiment-view .sentiment-history-table th {
height: 40px;
padding: 0 10px;
border-bottom: 1px solid var(--r2-line-soft);
}
.redesigned-sentiment-view .sentiment-history-table thead th {
height: 36px;
background: var(--table-header);
color: var(--text-2);
font-size: var(--fs-caption);
font-weight: 600;
}
.redesigned-sentiment-view .sentiment-history-groups th {
background: var(--table-header);
}
@media (max-width: 1180px) {
.redesigned-emotion-grid {
grid-template-columns: minmax(0px, 1fr) 320px;
}
}
@media (max-width: 1023px) and (min-width: 768px) {
.redesigned-emotion-grid {
grid-template-columns: 1fr;
}
.sentiment-analysis-rail {
display: grid !important;
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767px), (max-width: 1023px) and (max-height: 600px) {
.redesigned-emotion-grid {
grid-template-columns: 1fr;
}
.redesigned-sentiment-view .sentiment-chart-shell {
height: 270px;
padding-inline: 8px;
}
.redesigned-sentiment-view .sentiment-chart-shell canvas {
height: 250px;
}
.sentiment-phase-block {
flex-direction: column;
}
.sentiment-analysis-rail {
display: flex !important;
}
}
@media (prefers-reduced-motion: reduce) {
.redesigned-sentiment-view * {
scroll-behavior: auto;
}
}
.overview-strip:not([data-overview-expanded="true"]) .sentiment-gauge {
display: none;
}
.overview-strip .sentiment-block .metric-label {
display: block;
margin: 0px;
padding: 0px;
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0px;
}
.overview-strip .sentiment-block .sentiment-text {
display: inline-flex;
margin: 0px;
padding: 0 6px;
font-size: var(--fs-caption);
font-weight: 500;
line-height: 18px;
letter-spacing: 0px;
align-self: auto;
}
.redesigned-emotion-grid {
display: grid;
gap: 12px;
margin-bottom: 12px;
border: 0px;
grid-template-columns: minmax(0px, 1fr) 340px;
align-items: start;
}
.redesigned-sentiment-view .sentiment-analysis-main,
.redesigned-sentiment-view .sentiment-analysis-rail {
min-width: 0px;
display: flex;
flex-direction: column;
gap: 12px;
}
.redesigned-sentiment-view .sentiment-chart-shell {
position: relative;
padding-bottom: 6px;
height: 350px;
padding-top: 12px;
}
.redesigned-sentiment-view .sentiment-chart-shell canvas {
height: 332px;
}
@media (max-width: 960px) {
.redesigned-emotion-grid {
grid-template-columns: minmax(0px, 1fr);
}
}
.rate-list .row .bar i.zero {
background: rgb(209, 213, 219);
}
.emo-grid {
display: grid;
grid-template-columns: minmax(0px, 1fr) 340px;
gap: 12px;
align-items: start;
margin-bottom: 12px;
}
.overview-strip[data-overview-expanded="true"] .sentiment-block {
min-height: 0;
justify-content: center;
gap: 2px;
padding: 0 16px;
flex-direction: column;
align-items: flex-start;
border-right: 0;
background: transparent;
}
#sentimentCycleView .sentiment-history-table tbody td.number {
text-align: right;
font-variant-numeric: tabular-nums;
}
#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(3),
#sentimentCycleView .sentiment-history-table .sentiment-history-columns th:nth-child(4),
#sentimentCycleView .sentiment-history-table tbody td:nth-child(3),
#sentimentCycleView .sentiment-history-table tbody td:nth-child(4) {
text-align: center;
}
@media (min-width: 768px) {
#sentimentCycleView.active-view {
min-height: 0px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
overflow: hidden;
}
#sentimentCycleView > :is(.sentiment-cycle-toolbar, #sentimentHistoryNotice, .sentiment-cycle-analysis, .sentiment-detail-toolbar) {
flex: 0 0 auto;
}
#sentimentCycleView .sentiment-history-frame {
min-height: var(--sentiment-history-min-height);
max-height: none;
flex: 1 1 auto;
}
}
@media (min-width: 768px) and (max-height: 1100px) {
#sentimentCycleView .sentiment-phase-block {
gap: 12px;
padding: 10px 12px;
}
#sentimentCycleView .sentiment-current-phase-badge {
padding: 8px 12px;
}
#sentimentCycleView .sentiment-phase-advice {
margin-top: 4px;
padding: 4px 8px;
line-height: 1.4;
}
#sentimentCycleView .sentiment-feedback-strip > span {
padding: 4px 10px;
}
#sentimentCycleView .sentiment-component-list {
padding: 4px 16px 8px;
}
#sentimentCycleView .sentiment-component-item {
padding: 4px 0px;
}
}
@media (min-width: 768px) {
:root #sentimentCycleView.active-view {
height: auto;
min-height: 0px;
display: block;
overflow: visible;
}
:root #sentimentCycleView .sentiment-history-frame {
max-height: none;
overflow: visible;
}
}
:root[data-theme="dark"] :is(.overview-strip[data-overview-expanded="true"], .overview-strip[data-overview-expanded="true"] .metric, .overview-strip[data-overview-expanded="true"] .sentiment-block) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.sentiment-cycle-toolbar, .tbl-tools) {
border-color: var(--line-soft);
background: var(--surface);
}
:root[data-theme="dark"] :is(.auction-phase-notice) {
border-color: var(--warning-line-strong);
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #sentimentCycleView :is(.sentiment-current-tag, .sentiment-auto-tag, .sentiment-detail-toolbar, .section-toolbar) {
border-color: var(--border);
background: var(--surface-muted);
color: var(--text-secondary);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-component-track {
background: var(--surface-subtle);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-ice,
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-repair {
background: var(--action-soft);
color: var(--action);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-fermentation {
background: var(--market-up-soft);
color: var(--market-up);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-climax {
background: var(--market-up-soft);
color: var(--market-up);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-divergence {
background: var(--warning-soft);
color: var(--warning-color);
}
:root[data-theme="dark"] #sentimentCycleView .sentiment-phase-badge.phase-retreat {
background: var(--surface-subtle);
color: var(--text-secondary);
}
#sentimentCycleView .sentiment-history-frame {
max-height: var(--sentiment-history-max-height);
overflow: auto;
margin-bottom: var(--card-gap);
padding-bottom: var(--card-gap);
}
@media (min-width: 768px) {
.redesigned-sentiment-view .sentiment-chart-shell {
padding-right: 16px;
padding-left: 16px;
}
}
@media (min-width: 1024px) {
.sentiment-cycle-summary {
grid-template-columns: minmax(270px, 1.25fr) repeat(3, minmax(160px, 1fr));
}
}
/* Mobile information order: trend, current phase, composition, then history. */
@media (max-width: 767px) {
#sentimentCycleView .sentiment-cycle-toolbar {
gap: var(--space-8);
padding: 0;
}
#sentimentCycleView .sentiment-cycle-analysis,
#sentimentCycleView .redesigned-emotion-grid {
display: flex;
flex-direction: column;
gap: var(--space-12);
}
#sentimentCycleView .sentiment-analysis-main {
order: 1;
}
#sentimentCycleView .sentiment-analysis-rail {
order: 2;
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-12);
}
#sentimentCycleView .sentiment-trend-panel,
#sentimentCycleView .sentiment-components-panel {
padding: 0;
}
#sentimentCycleView .sentiment-chart-legend {
gap: var(--space-12);
padding: 0 var(--space-12);
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
}
#sentimentCycleView .sentiment-chart-shell,
#sentimentCycleView .sentiment-chart-shell canvas {
height: var(--mobile-chart-height);
}
#sentimentCycleView .sentiment-phase-block {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
gap: var(--space-12);
}
#sentimentCycleView .sentiment-current-phase-badge {
min-width: var(--mobile-phase-badge-width);
}
#sentimentCycleView .sentiment-detail-toolbar {
min-height: var(--mobile-touch-size);
padding: var(--space-8) 0;
}
#sentimentCycleView .sentiment-history-frame {
min-height: var(--mobile-table-min-height);
max-height: none;
margin-bottom: 0;
padding-bottom: 0;
overflow-x: auto;
overflow-y: visible;
}
}
@media (max-width: 359px) {
#sentimentCycleView .sentiment-phase-block {
grid-template-columns: minmax(0, 1fr);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
#sentimentCycleView .redesigned-emotion-grid {
grid-template-columns: minmax(0, 1fr);
}
#sentimentCycleView .sentiment-analysis-rail {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1024px) {
#sentimentCycleView .redesigned-emotion-grid {
align-items: stretch;
height: var(--sentiment-analysis-height);
max-height: var(--sentiment-analysis-height);
overflow: hidden;
}
.redesigned-sentiment-view .sentiment-analysis-main,
.redesigned-sentiment-view .sentiment-analysis-rail {
align-self: stretch;
height: 100%;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-trend-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-chart-shell {
flex: 1 1 auto;
height: auto;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-chart-shell canvas {
height: 100%;
}
.redesigned-sentiment-view .sentiment-cycle-summary {
flex: 0 0 auto;
}
.redesigned-sentiment-view .sentiment-components-panel {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-height: 0px;
}
.redesigned-sentiment-view .sentiment-component-list {
display: flex;
flex: 1 1 auto;
flex-direction: column;
justify-content: space-evenly;
min-height: 0px;
}
}