f67100929b
Keep the limit-up table inside the card without horizontal scroll, raise header/row metrics to the B-147 spec, restore night sort accent, and switch the day-mode repair badge to the shared blue token. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
1767 lines
28 KiB
CSS
1767 lines
28 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(--r2-ink);
|
|
|
|
color: var(--text-inverse);
|
|
|
|
font-size: 11px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sentiment-chart-tooltip b {
|
|
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;
|
|
}
|
|
|
|
#sentimentCycleView .sentiment-component-item small {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@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));
|
|
}
|
|
}
|