1248 lines
19 KiB
CSS
1248 lines
19 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: rgb(240, 246, 253);
|
|
}
|
|
|
|
.rotation-sector-chip.selected {
|
|
border-color: var(--action);
|
|
|
|
background: var(--action-soft);
|
|
|
|
color: var(--action-hover);
|
|
}
|
|
|
|
.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: 720px) {
|
|
.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: rgb(246, 248, 250);
|
|
}
|
|
|
|
.rotation-day-sector {
|
|
border-color: rgb(231, 235, 239);
|
|
|
|
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: rgba(53, 106, 230, 0.12);
|
|
}
|
|
|
|
: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 rgba(135, 149, 173, 0.22);
|
|
|
|
background: rgba(53, 106, 230, calc(.04 + var(--rotation-heat) * .46));
|
|
}
|
|
|
|
.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: 17px;
|
|
|
|
font-weight: 800;
|
|
|
|
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: 12px;
|
|
|
|
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: rgba(37, 99, 235, 0.28) solid 2px;
|
|
|
|
outline-offset: 2px;
|
|
}
|
|
|
|
.rotation-export-button {
|
|
min-height: 30px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
padding: 5px 12px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: 7px;
|
|
|
|
background: var(--surface);
|
|
|
|
color: rgb(55, 65, 81);
|
|
|
|
font-size: 12px;
|
|
|
|
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;
|
|
|
|
align-items: center;
|
|
|
|
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.strong {
|
|
background: rgb(112, 155, 245);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.warm {
|
|
background: rgb(203, 220, 255);
|
|
}
|
|
|
|
#rotationView .rotation-swatch.mild {
|
|
background: rgb(240, 244, 250);
|
|
|
|
border: 1px solid rgb(223, 230, 240);
|
|
}
|
|
|
|
#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: rgb(59, 98, 196);
|
|
|
|
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: rgb(147, 180, 245);
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark small {
|
|
position: absolute;
|
|
|
|
top: -1px;
|
|
|
|
color: rgb(59, 98, 196);
|
|
|
|
font-size: 9px;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark .missing i {
|
|
height: 8px;
|
|
|
|
border-width: 1px 1px 0px;
|
|
|
|
border-style: dashed dashed none;
|
|
|
|
border-color: rgb(185, 200, 232) rgb(185, 200, 232) currentcolor;
|
|
|
|
border-image: none;
|
|
|
|
background: transparent;
|
|
}
|
|
|
|
#rotationView .rotation-tracker-spark .missing small {
|
|
display: none;
|
|
}
|
|
|
|
.rotation-track-cancel {
|
|
min-height: 30px;
|
|
|
|
display: inline-flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: 7px;
|
|
|
|
background: var(--surface);
|
|
|
|
color: rgb(55, 65, 81);
|
|
|
|
font-size: 12px;
|
|
|
|
font-weight: 500;
|
|
|
|
margin-left: auto;
|
|
|
|
padding: 4px 9px;
|
|
}
|
|
|
|
#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: rgb(251, 252, 254);
|
|
}
|
|
|
|
#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;
|
|
|
|
border-color: var(--r2-blue);
|
|
|
|
box-shadow: inset 3px 0 0 var(--r2-blue), 0 0 0 1px rgba(37, 99, 235, .12);
|
|
}
|
|
|
|
.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: 37px;
|
|
|
|
padding: 8px 12px;
|
|
|
|
border-bottom: 1px solid var(--r2-line);
|
|
|
|
background: var(--table-header);
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 12px;
|
|
|
|
font-weight: 600;
|
|
|
|
text-align: left;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th.number {
|
|
text-align: right;
|
|
}
|
|
|
|
#rotationView .rotation-table thead th[data-auto-sort] {
|
|
color: rgb(75, 85, 99);
|
|
|
|
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: 42px;
|
|
|
|
padding: 8px 12px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#rotationView .rotation-table tbody tr:last-child td {
|
|
border-bottom: 0px;
|
|
}
|
|
|
|
#rotationView .rotation-table tbody tr:hover td {
|
|
background: rgb(248, 250, 255);
|
|
}
|
|
|
|
#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: rgb(232, 244, 253);
|
|
|
|
color: rgb(37, 99, 235);
|
|
}
|
|
|
|
#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: 720px) {
|
|
.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;
|
|
}
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-mild {
|
|
border-color: rgb(229, 234, 241);
|
|
|
|
background: rgb(246, 248, 251);
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-strong {
|
|
border-color: rgba(37, 99, 235, 0.24);
|
|
|
|
background: rgb(197, 215, 251);
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip.heat-warm {
|
|
border-color: rgba(37, 99, 235, 0.12);
|
|
|
|
background: rgb(231, 239, 255);
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rotationView .rotation-sector-chip:hover {
|
|
z-index: 6;
|
|
|
|
border-color: rgba(37, 99, 235, 0.34);
|
|
|
|
filter: saturate(1.06);
|
|
|
|
transform: translate3d(2px, -2px, 0px) scale(1.015);
|
|
|
|
box-shadow: none;
|
|
}
|
|
|
|
#rotationView .rotation-table {
|
|
width: 100%;
|
|
|
|
border-collapse: collapse;
|
|
|
|
font-size: 12.5px;
|
|
|
|
table-layout: auto;
|
|
|
|
min-width: var(--table-wide);
|
|
}
|
|
|
|
@media (min-width: 721px) {
|
|
#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: 720px), (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 .rotation-sector-chip.heat-strong {
|
|
border-color: var(--blue-line);
|
|
|
|
background: var(--heat-strong-bg);
|
|
|
|
color: var(--heat-strong-ink);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-warm {
|
|
border-color: var(--border-strong);
|
|
|
|
background: var(--heat-warm-bg);
|
|
|
|
color: var(--heat-warm-ink);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView .rotation-sector-chip.heat-mild {
|
|
border-color: var(--border);
|
|
|
|
background: var(--heat-mild-bg);
|
|
|
|
color: var(--heat-mild-ink);
|
|
}
|
|
|
|
: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);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView :is(.rotation-swatch.warm) {
|
|
border-color: var(--blue-line);
|
|
|
|
background: var(--action-soft);
|
|
|
|
color: var(--action);
|
|
}
|
|
|
|
:root[data-theme="dark"] #rotationView :is(.rotation-swatch.mild) {
|
|
border-color: var(--border);
|
|
|
|
background: var(--surface-muted);
|
|
}
|