ad08d309c6
Unify ladder, themes, rotation, auction, dragon-tiger and popularity with shared tokens, left-aligned first columns, and table density. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
2517 lines
38 KiB
CSS
2517 lines
38 KiB
CSS
/* Canonical CSS owner: dragon-tiger. Historical layers consolidated 2026-08-02. */
|
|
.direction-label {
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dragon-stage-heading h3 {
|
|
margin: 0px;
|
|
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dragon-stage-heading span {
|
|
display: block;
|
|
|
|
margin-top: 3px;
|
|
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
.dragon-metric:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.dragon-metric span {
|
|
display: block;
|
|
|
|
color: var(--text-muted);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dragon-metric strong {
|
|
display: block;
|
|
|
|
margin-top: 6px;
|
|
|
|
font-size: 20px;
|
|
}
|
|
|
|
.dragon-filter {
|
|
min-width: 66px;
|
|
|
|
padding: 0px 12px;
|
|
|
|
border-top: 0px;
|
|
|
|
border-bottom: 0px;
|
|
|
|
border-left: 0px;
|
|
|
|
border-image: none;
|
|
|
|
border-right: 1px solid var(--line);
|
|
|
|
background: var(--surface);
|
|
|
|
cursor: pointer;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dragon-filter:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.dragon-filter.active {
|
|
background: var(--blue);
|
|
|
|
color: var(--text-inverse);
|
|
}
|
|
|
|
.trader-operations {
|
|
max-height: 330px;
|
|
|
|
border-top: 1px solid var(--line);
|
|
}
|
|
|
|
.dragon-operation-table td {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.dragon-operation-table th {
|
|
background: var(--table-header);
|
|
}
|
|
|
|
.seat-cell {
|
|
max-width: 280px;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.dragon-empty {
|
|
min-height: 220px;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
}
|
|
|
|
.unclassified-section {
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.unclassified-heading {
|
|
min-height: 58px;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 12px;
|
|
|
|
padding: 10px 14px;
|
|
|
|
border-bottom: 1px solid var(--line);
|
|
|
|
cursor: pointer;
|
|
|
|
list-style: none;
|
|
}
|
|
|
|
.unclassified-heading::-webkit-details-marker {
|
|
display: none;
|
|
}
|
|
|
|
.unclassified-heading:hover {
|
|
background: var(--surface-hover);
|
|
}
|
|
|
|
.unclassified-heading h3 {
|
|
margin: 0px;
|
|
|
|
font-size: 14px;
|
|
|
|
letter-spacing: 0px;
|
|
}
|
|
|
|
.unclassified-heading span {
|
|
display: block;
|
|
|
|
margin-top: 4px;
|
|
|
|
color: var(--text-muted);
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
.unclassified-heading > strong {
|
|
color: var(--text-muted);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.unclassified-heading > strong::after {
|
|
content: " 展开";
|
|
|
|
color: var(--blue);
|
|
|
|
font-weight: 400;
|
|
}
|
|
|
|
.unclassified-section[open] .unclassified-heading > strong::after {
|
|
content: " 收起";
|
|
}
|
|
|
|
.unclassified-seat-list {
|
|
display: grid;
|
|
}
|
|
|
|
.unclassified-seat-row {
|
|
min-height: 52px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: minmax(260px, 1fr) 90px 110px minmax(150px, 220px) auto;
|
|
|
|
align-items: center;
|
|
|
|
gap: 12px;
|
|
|
|
padding: 8px 14px;
|
|
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
|
|
.unclassified-seat-name {
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.unclassified-seat-stats {
|
|
color: var(--text-muted);
|
|
|
|
font-size: 11px;
|
|
}
|
|
|
|
.unclassified-seat-row > strong {
|
|
text-align: right;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.unclassified-seat-row input {
|
|
min-width: 0px;
|
|
|
|
height: 32px;
|
|
|
|
flex: 1 1 0%;
|
|
|
|
padding: 0px 8px;
|
|
|
|
border: 1px solid var(--line-strong);
|
|
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.unclassified-seat-row .button {
|
|
min-height: 32px;
|
|
|
|
padding: 0px 10px;
|
|
}
|
|
|
|
:where(#dragonView) .dragon-trader-list {
|
|
--dragon-card-width: 176px;
|
|
|
|
position: relative;
|
|
|
|
padding: 0px 36px;
|
|
|
|
overflow: visible;
|
|
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.dragon-trader-card {
|
|
--card-accent: #a33f48;
|
|
|
|
--card-tint: #fff5f5;
|
|
|
|
position: absolute;
|
|
|
|
top: 22px;
|
|
|
|
left: 50%;
|
|
|
|
width: var(--dragon-card-width);
|
|
|
|
height: 238px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
padding: 17px 13px 13px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: 2px solid color-mix(in srgb, var(--card-accent) 62%, #ffffff);
|
|
|
|
border-radius: 8px;
|
|
|
|
background: linear-gradient(155deg, #ffffff 0%, var(--card-tint) 100%);
|
|
|
|
color: inherit;
|
|
|
|
text-align: center;
|
|
|
|
pointer-events: none;
|
|
|
|
box-shadow: rgba(24, 34, 45, 0.16) 0px 5px 15px, rgba(255, 255, 255, 0.74) 0px 0px 0px 2px inset;
|
|
|
|
transform: translateX(calc(-50% + var(--card-x, 0px))) translateY(var(--card-y, 0px)) rotate(var(--card-rotation, 0deg));
|
|
|
|
transform-origin: 50% 92%;
|
|
|
|
transition: transform 320ms cubic-bezier(0.2, 0.85, 0.22, 1.15), border-color 180ms, box-shadow 260ms, filter 220ms;
|
|
|
|
will-change: transform;
|
|
}
|
|
|
|
.dragon-card-hit-layer {
|
|
position: absolute;
|
|
|
|
inset: 0px;
|
|
|
|
z-index: 500;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dragon-card-hit-zone {
|
|
position: absolute;
|
|
|
|
top: 0px;
|
|
|
|
height: 100%;
|
|
|
|
padding: 0px;
|
|
|
|
border: 0px;
|
|
|
|
outline: 0px;
|
|
|
|
background: transparent;
|
|
|
|
cursor: pointer;
|
|
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+1) {
|
|
--card-accent: #a33f48;
|
|
|
|
--card-tint: #fff2f3;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+2) {
|
|
--card-accent: #356fa8;
|
|
|
|
--card-tint: #eef6fd;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+3) {
|
|
--card-accent: #2d7b69;
|
|
|
|
--card-tint: #edf8f4;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+4) {
|
|
--card-accent: #a8751f;
|
|
|
|
--card-tint: #fff7e8;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+5) {
|
|
--card-accent: #725c99;
|
|
|
|
--card-tint: #f5f1fb;
|
|
}
|
|
|
|
.dragon-trader-card:nth-child(6n+6) {
|
|
--card-accent: #495762;
|
|
|
|
--card-tint: #f1f4f6;
|
|
}
|
|
|
|
.dragon-trader-card::before {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
inset: 5px;
|
|
|
|
border: 1px solid color-mix(in srgb, var(--card-accent) 28%, transparent);
|
|
|
|
border-radius: 5px;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
.dragon-trader-card::after {
|
|
content: "";
|
|
|
|
position: absolute;
|
|
|
|
top: -45%;
|
|
|
|
left: -90%;
|
|
|
|
width: 58%;
|
|
|
|
height: 190%;
|
|
|
|
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.72), transparent);
|
|
|
|
opacity: 0;
|
|
|
|
pointer-events: none;
|
|
|
|
transform: rotate(18deg);
|
|
}
|
|
|
|
.dragon-trader-card.dealing {
|
|
animation: dragon-card-deal 620ms var(--ease-out) var(--deal-delay, 0ms) both;
|
|
}
|
|
|
|
@keyframes dragon-card-deal {
|
|
0% {
|
|
opacity: 0;
|
|
|
|
transform: translateX(-50%) translateY(78px) scale(0.68) rotate(0deg);
|
|
|
|
filter: blur(2px);
|
|
}
|
|
|
|
65% {
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
|
|
transform: translateX(calc(-50% + var(--card-x, 0px))) translateY(var(--card-y, 0px)) rotate(var(--card-rotation, 0deg));
|
|
|
|
filter: blur(0px);
|
|
}
|
|
}
|
|
|
|
.dragon-trader-card.hovered {
|
|
border-color: var(--card-accent);
|
|
|
|
box-shadow: 0 22px 42px rgba(24, 34, 45, 0.28), 0 0 0 3px color-mix(in srgb, var(--card-accent) 20%, transparent), inset 0 0 0 2px rgba(255, 255, 255, 0.82);
|
|
|
|
filter: saturate(1.08);
|
|
|
|
outline: none;
|
|
|
|
transform: translateX(calc(-50% + var(--card-x, 0px))) translateY(calc(var(--card-y, 0px) - 22px)) scale(1.13) rotate(0deg);
|
|
|
|
z-index: 300 !important;
|
|
}
|
|
|
|
.dragon-trader-card.hovered::after {
|
|
opacity: 1;
|
|
|
|
animation: 720ms ease-out 0s 1 normal both running dragon-card-shine;
|
|
}
|
|
|
|
@keyframes dragon-card-shine {
|
|
0% {
|
|
left: -90%;
|
|
}
|
|
|
|
100% {
|
|
left: 145%;
|
|
}
|
|
}
|
|
|
|
.dragon-trader-card.selected {
|
|
border-color: var(--card-accent);
|
|
|
|
box-shadow: 0 7px 18px rgba(24, 34, 45, 0.2), 0 0 0 2px color-mix(in srgb, var(--card-accent) 14%, transparent), inset 0 0 0 2px rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.dragon-trader-card.selected.hovered {
|
|
z-index: 320 !important;
|
|
|
|
transform: translateX(calc(-50% + var(--card-x, 0px))) translateY(calc(var(--card-y, 0px) - 24px)) scale(1.15) rotate(0deg);
|
|
}
|
|
|
|
.dragon-card-rank {
|
|
position: absolute;
|
|
|
|
top: 11px;
|
|
|
|
right: 13px;
|
|
|
|
color: color-mix(in srgb, var(--card-accent) 60%, #ffffff);
|
|
|
|
font-size: 10px;
|
|
|
|
font-weight: 750;
|
|
}
|
|
|
|
.dragon-card-monogram {
|
|
width: 64px;
|
|
|
|
height: 64px;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
flex: 0 0 64px;
|
|
|
|
margin-top: 3px;
|
|
|
|
border: 2px solid rgba(255, 255, 255, 0.92);
|
|
|
|
border-radius: 50%;
|
|
|
|
background: var(--card-accent);
|
|
|
|
color: var(--text-inverse);
|
|
|
|
font-family: STKaiti, KaiTi, serif;
|
|
|
|
font-size: 18px;
|
|
|
|
font-weight: 750;
|
|
|
|
box-shadow: 0 0 0 3px color-mix(in srgb, var(--card-accent) 22%, transparent);
|
|
}
|
|
|
|
.dragon-card-copy {
|
|
width: 100%;
|
|
|
|
min-width: 0px;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dragon-card-copy strong {
|
|
display: block;
|
|
|
|
overflow: hidden;
|
|
|
|
color: rgb(32, 37, 42);
|
|
|
|
font-size: 16px;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dragon-card-copy q {
|
|
display: -webkit-box;
|
|
|
|
min-height: 44px;
|
|
|
|
margin-top: 7px;
|
|
|
|
overflow: hidden;
|
|
|
|
color: rgb(88, 99, 110);
|
|
|
|
font-family: STKaiti, KaiTi, serif;
|
|
|
|
font-size: 11px;
|
|
|
|
line-height: 1.45;
|
|
|
|
-webkit-box-orient: vertical;
|
|
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.dragon-card-stats {
|
|
width: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 6px;
|
|
|
|
margin-top: auto;
|
|
|
|
padding-top: 9px;
|
|
|
|
border-top: 1px solid color-mix(in srgb, var(--card-accent) 22%, #dfe5e9);
|
|
}
|
|
|
|
.dragon-card-stats small {
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 9px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dragon-card-stats b {
|
|
overflow: hidden;
|
|
|
|
font-size: 11px;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
:where(#dragonView) .dragon-detail-header {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 18px;
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.dragon-detail-header > div > span {
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
:where(#dragonView) .dragon-detail-header h3 {
|
|
margin: 4px 0px 0px;
|
|
}
|
|
|
|
:where(#dragonView) .dragon-detail-header p {
|
|
max-width: 560px;
|
|
|
|
margin: 5px 0px 0px;
|
|
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
:where(#dragonView) .dragon-detail-header dl {
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(3, minmax(92px, 1fr));
|
|
|
|
margin: 0px;
|
|
|
|
border: 1px solid var(--border);
|
|
}
|
|
|
|
:where(#dragonView) .dragon-detail-header dl div {
|
|
border-right: 1px solid var(--border);
|
|
|
|
text-align: right;
|
|
}
|
|
|
|
.dragon-detail-header dl div:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.dragon-detail-header dt {
|
|
color: var(--text-secondary);
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
.dragon-detail-header dd {
|
|
margin: 3px 0px 0px;
|
|
|
|
font-size: 13px;
|
|
|
|
font-weight: 700;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
@media (max-width: 1023px) {
|
|
.dragon-detail-header {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dragon-detail-header dl {
|
|
align-self: stretch;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
:where(#dragonView) .dragon-trader-list {
|
|
padding: 0px 15px;
|
|
}
|
|
|
|
.dragon-trader-card {
|
|
top: 17px;
|
|
|
|
width: var(--dragon-card-width);
|
|
|
|
min-width: 0px;
|
|
|
|
height: 204px;
|
|
|
|
min-height: 0px;
|
|
|
|
padding: 13px 10px 10px;
|
|
}
|
|
|
|
.dragon-card-monogram {
|
|
width: 52px;
|
|
|
|
height: 52px;
|
|
|
|
flex-basis: 52px;
|
|
|
|
font-size: 15px;
|
|
}
|
|
|
|
.dragon-card-copy {
|
|
margin-top: 7px;
|
|
}
|
|
|
|
.dragon-card-copy strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.dragon-card-copy q {
|
|
min-height: 37px;
|
|
|
|
margin-top: 5px;
|
|
|
|
font-size: 10px;
|
|
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
.dragon-card-stats {
|
|
padding-top: 7px;
|
|
}
|
|
|
|
.dragon-card-stats small {
|
|
font-size: 8px;
|
|
}
|
|
|
|
.dragon-card-stats b {
|
|
font-size: 9px;
|
|
}
|
|
|
|
.dragon-detail-header dl {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
|
|
.dragon-detail-header dl div {
|
|
min-width: 0px;
|
|
|
|
padding: 8px 6px;
|
|
}
|
|
|
|
.dragon-detail-header dd {
|
|
overflow: hidden;
|
|
|
|
font-size: 11px;
|
|
|
|
text-overflow: ellipsis;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.dragon-summary {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
|
|
.dragon-filterbar {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dragon-segments {
|
|
width: 100%;
|
|
}
|
|
|
|
.dragon-filter {
|
|
min-width: 0px;
|
|
|
|
flex: 1 1 0%;
|
|
}
|
|
|
|
.unclassified-seat-row {
|
|
grid-template-columns: minmax(0px, 1fr) auto;
|
|
}
|
|
|
|
.unclassified-seat-name {
|
|
grid-column: 1;
|
|
}
|
|
|
|
.unclassified-seat-stats {
|
|
grid-area: 2 / 1;
|
|
}
|
|
|
|
.unclassified-seat-row > strong {
|
|
grid-area: 1 / 2;
|
|
}
|
|
|
|
.unclassified-seat-row input {
|
|
grid-area: 3 / 1;
|
|
}
|
|
|
|
.unclassified-seat-row .button {
|
|
grid-area: 3 / 2;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 520px) {
|
|
.dragon-summary {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.dragon-filterbar {
|
|
padding-right: 10px;
|
|
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.dragon-filter {
|
|
padding: 0px 6px;
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.unclassified-heading,
|
|
.unclassified-seat-row {
|
|
padding-right: 10px;
|
|
|
|
padding-left: 10px;
|
|
}
|
|
}
|
|
|
|
.dragon-summary {
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(4, minmax(130px, 1fr));
|
|
|
|
border-bottom-color: var(--border);
|
|
}
|
|
|
|
.dragon-metric {
|
|
min-height: 72px;
|
|
|
|
padding: 12px 16px;
|
|
|
|
border-right-color: var(--border);
|
|
}
|
|
|
|
.dragon-stage-heading {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 12px;
|
|
|
|
border-bottom: 1px solid var(--border);
|
|
|
|
min-height: 50px;
|
|
|
|
padding: 9px 14px;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.dragon-filterbar {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
|
|
padding: 9px 12px;
|
|
}
|
|
}
|
|
|
|
#dragonSummary {
|
|
margin-bottom: 12px;
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
border-radius: var(--card-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--card-shadow);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dragon-filterbar {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 12px;
|
|
|
|
min-height: 54px;
|
|
|
|
padding: 8px 14px;
|
|
|
|
margin-bottom: 12px;
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
border-radius: var(--card-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--card-shadow);
|
|
}
|
|
|
|
.dragon-card-stage {
|
|
margin-bottom: 14px;
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
border-radius: var(--card-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--card-shadow);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.dragon-trader-detail {
|
|
min-height: 310px;
|
|
|
|
margin-bottom: 14px;
|
|
|
|
border: 1px solid var(--border);
|
|
|
|
border-radius: var(--card-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--card-shadow);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.redesigned-dragon-view {
|
|
width: min(100%, 2200px);
|
|
|
|
margin: 0px auto;
|
|
|
|
padding: 12px 16px 14px;
|
|
}
|
|
|
|
.dragon-page-head-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 52px;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.dragon-title-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-width: 0px;
|
|
|
|
gap: 9px;
|
|
}
|
|
|
|
.dragon-title-v2 h2 {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--font-size-page-title);
|
|
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.dragon-title-v2 > span {
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 12px;
|
|
}
|
|
|
|
.dragon-title-v2 > strong {
|
|
padding: 4px 8px;
|
|
|
|
border-radius: 5px;
|
|
|
|
background: var(--r2-amber-soft);
|
|
|
|
color: var(--r2-amber);
|
|
|
|
font-size: 11px;
|
|
|
|
font-weight: 650;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dragon-head-actions-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.dragon-view-tabs-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 32px;
|
|
|
|
padding: 3px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: 8px;
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.dragon-view-tabs-v2 button {
|
|
min-height: 26px;
|
|
|
|
padding: 0px 13px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 6px;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: var(--font-size-label);
|
|
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dragon-view-tabs-v2 button.active {
|
|
background: var(--surface);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-weight: 700;
|
|
|
|
box-shadow: rgba(16, 24, 40, 0.09) 0px 1px 3px;
|
|
}
|
|
|
|
.dragon-view-tabs-v2 button:focus-visible {
|
|
outline: 2px solid var(--r2-blue);
|
|
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.dragon-action-v2 {
|
|
min-height: 32px;
|
|
|
|
height: 32px;
|
|
|
|
padding: 0px 12px;
|
|
|
|
border-radius: 8px;
|
|
|
|
font-size: var(--font-size-label);
|
|
}
|
|
|
|
.dragon-action-v2 .lucide {
|
|
width: 15px;
|
|
|
|
height: 15px;
|
|
}
|
|
|
|
.dragon-daily-content-v2 {
|
|
min-width: 0px;
|
|
|
|
min-height: 0px;
|
|
|
|
overflow: hidden auto;
|
|
|
|
overscroll-behavior: contain;
|
|
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
.dragon-summary-v2 {
|
|
min-height: 58px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(4, minmax(0px, 1fr));
|
|
|
|
margin-bottom: 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric {
|
|
min-height: 58px;
|
|
|
|
display: grid;
|
|
|
|
align-content: center;
|
|
|
|
gap: 3px;
|
|
|
|
padding: 8px 15px;
|
|
|
|
border-right: 1px solid var(--r2-line);
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric:last-child {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric span {
|
|
color: var(--text-3);
|
|
|
|
font-size: var(--font-size-caption);
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric strong {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--font-size-metric);
|
|
|
|
font-weight: var(--font-weight-semibold);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric strong.up {
|
|
color: var(--r2-up);
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric strong.down {
|
|
color: var(--r2-down);
|
|
}
|
|
|
|
.dragon-filterbar-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 52px;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 14px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
padding: 7px 12px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.dragon-filter-copy-v2 {
|
|
min-width: 0px;
|
|
}
|
|
|
|
.dragon-filter-copy-v2 h3 {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 13px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dragon-filter-copy-v2 span {
|
|
display: block;
|
|
|
|
margin-top: 2px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
.dragon-filter-actions-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-width: 0px;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.dragon-segments-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 32px;
|
|
|
|
padding: 3px;
|
|
|
|
border-radius: 7px;
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.dragon-filter-v2 {
|
|
min-height: 26px;
|
|
|
|
padding: 0px 10px;
|
|
|
|
border: 0px;
|
|
|
|
border-radius: 5px;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 10.5px;
|
|
|
|
cursor: pointer;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.dragon-filter-v2:hover {
|
|
color: var(--r2-ink);
|
|
}
|
|
|
|
.dragon-filter-v2.active {
|
|
background: var(--surface);
|
|
|
|
color: var(--r2-blue);
|
|
|
|
font-weight: 700;
|
|
|
|
box-shadow: rgba(16, 24, 40, 0.08) 0px 1px 3px;
|
|
}
|
|
|
|
.dragon-filter-v2:focus-visible {
|
|
outline: 2px solid var(--r2-blue);
|
|
|
|
outline-offset: 1px;
|
|
}
|
|
|
|
.dragon-search-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
width: 230px;
|
|
|
|
height: 32px;
|
|
|
|
flex: 0 0 auto;
|
|
|
|
gap: 7px;
|
|
|
|
padding: 0px 10px;
|
|
|
|
border: 1px solid var(--border-strong);
|
|
|
|
border-radius: 8px;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
transition: border-color 160ms, box-shadow 160ms;
|
|
}
|
|
|
|
.dragon-search-v2:focus-within {
|
|
border-color: var(--accent);
|
|
|
|
box-shadow: 0 0 0 2px var(--focus-ring);
|
|
}
|
|
|
|
.dragon-search-v2 .lucide {
|
|
width: 15px;
|
|
|
|
height: 15px;
|
|
}
|
|
|
|
.dragon-search-v2 input {
|
|
min-width: 0px;
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
padding: 0px;
|
|
|
|
border: 0px;
|
|
|
|
outline: 0px;
|
|
|
|
background: transparent;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font: inherit;
|
|
}
|
|
|
|
.dragon-search-v2 input::placeholder {
|
|
color: var(--r2-faint);
|
|
}
|
|
|
|
#dragonView .dragon-card-stage-v2 {
|
|
margin: 0px 0px 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface-subtle);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.dragon-stage-heading-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-height: 46px;
|
|
|
|
justify-content: space-between;
|
|
|
|
gap: 14px;
|
|
|
|
padding: 8px 13px;
|
|
|
|
border-bottom: 1px solid var(--r2-line-soft);
|
|
|
|
background: var(--surface);
|
|
}
|
|
|
|
.dragon-stage-heading-v2 > div {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
min-width: 0px;
|
|
|
|
gap: 8px;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 h3 {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 14px;
|
|
|
|
font-weight: 700;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 span {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 10px;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 small {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: 10px;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
#dragonView .dragon-trader-list {
|
|
height: 270px;
|
|
|
|
min-height: 270px;
|
|
}
|
|
|
|
#dragonView .dragon-trader-detail-v2 {
|
|
min-height: 0px;
|
|
|
|
margin: 0px 0px 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
#dragonView .dragon-detail-header {
|
|
min-height: 78px;
|
|
|
|
padding: 10px 14px;
|
|
|
|
border-bottom-color: var(--r2-line-soft);
|
|
}
|
|
|
|
#dragonView .dragon-detail-header h3 {
|
|
font-size: 17px;
|
|
}
|
|
|
|
#dragonView .dragon-detail-header dl {
|
|
border-color: var(--r2-line);
|
|
|
|
border-radius: 7px;
|
|
}
|
|
|
|
#dragonView .dragon-detail-header dl div {
|
|
padding: 7px 10px;
|
|
|
|
border-right-color: var(--r2-line);
|
|
}
|
|
|
|
#dragonView .dragon-trader-detail .trader-operations {
|
|
max-height: none;
|
|
|
|
overflow: visible;
|
|
|
|
border-top-color: var(--r2-line-soft);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table :is(th, td).row-number {
|
|
padding-inline: 8px;
|
|
|
|
text-align: left;
|
|
}
|
|
|
|
#dragonView .dragon-operation-table td.stock-code {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#dragonView .dragon-operation-table thead th {
|
|
position: sticky;
|
|
|
|
top: 0px;
|
|
|
|
z-index: 2;
|
|
|
|
height: 36px;
|
|
|
|
padding: 0 12px;
|
|
|
|
font-size: var(--font-size-caption);
|
|
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table tbody tr:hover {
|
|
background: var(--table-hover);
|
|
}
|
|
|
|
#dragonView .dragon-unclassified-v2 {
|
|
margin-bottom: 10px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
#dragonView .dragon-unclassified-v2 .unclassified-heading {
|
|
border-bottom-color: var(--r2-line-soft);
|
|
|
|
background: var(--surface);
|
|
}
|
|
|
|
.dragon-empty-state-v2 {
|
|
min-height: 430px;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
align-content: center;
|
|
|
|
gap: 9px;
|
|
|
|
padding: 42px 20px;
|
|
|
|
border: 1px solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--surface);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.dragon-empty-state-v2[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.dragon-empty-symbol-v2 {
|
|
width: 54px;
|
|
|
|
height: 54px;
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
margin-bottom: 4px;
|
|
|
|
border-radius: 50%;
|
|
|
|
background: var(--r2-blue-soft);
|
|
|
|
color: var(--r2-blue);
|
|
}
|
|
|
|
.dragon-empty-symbol-v2 .lucide {
|
|
width: 25px;
|
|
|
|
height: 25px;
|
|
}
|
|
|
|
.dragon-empty-state-v2 h3 {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: 16px;
|
|
|
|
font-weight: 750;
|
|
}
|
|
|
|
.dragon-empty-state-v2 p {
|
|
max-width: 540px;
|
|
|
|
margin: 0px;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: 11.5px;
|
|
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.dragon-empty-actions-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 8px;
|
|
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dragon-empty-actions-v2 .button {
|
|
min-height: 34px;
|
|
|
|
border-radius: 7px;
|
|
}
|
|
|
|
.dragon-empty-actions-v2 .lucide {
|
|
width: 15px;
|
|
|
|
height: 15px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body[data-active-view="dragonView"] .app-main {
|
|
height: var(--workspace-height);
|
|
|
|
min-height: 0px;
|
|
|
|
display: block;
|
|
|
|
overflow: auto;
|
|
}
|
|
|
|
body[data-active-view="dragonView"] #dragonView.active-view {
|
|
display: block;
|
|
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) and (max-height: 900px) {
|
|
.redesigned-dragon-view {
|
|
padding-top: 9px;
|
|
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.dragon-page-head-v2 {
|
|
min-height: 45px;
|
|
|
|
margin-bottom: 7px;
|
|
}
|
|
|
|
.dragon-summary-v2 {
|
|
min-height: 50px;
|
|
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric {
|
|
min-height: 50px;
|
|
|
|
padding-top: 5px;
|
|
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
.dragon-filterbar-v2 {
|
|
min-height: 46px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
padding-top: 5px;
|
|
|
|
padding-bottom: 5px;
|
|
}
|
|
|
|
#dragonView .dragon-card-stage-v2 {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 {
|
|
min-height: 41px;
|
|
}
|
|
|
|
#dragonView .dragon-trader-list {
|
|
height: 225px;
|
|
|
|
min-height: 225px;
|
|
}
|
|
|
|
#dragonView .dragon-trader-card {
|
|
top: 12px;
|
|
|
|
height: 202px;
|
|
|
|
padding: 12px 10px 10px;
|
|
}
|
|
|
|
#dragonView .dragon-card-monogram {
|
|
width: 52px;
|
|
|
|
height: 52px;
|
|
|
|
flex-basis: 52px;
|
|
|
|
font-size: 15px;
|
|
}
|
|
|
|
#dragonView .dragon-card-copy {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
#dragonView .dragon-card-copy strong {
|
|
font-size: 14px;
|
|
}
|
|
|
|
#dragonView .dragon-card-copy q {
|
|
min-height: 35px;
|
|
|
|
margin-top: 4px;
|
|
|
|
font-size: 10px;
|
|
|
|
-webkit-line-clamp: 3;
|
|
}
|
|
|
|
#dragonView .dragon-card-stats {
|
|
padding-top: 6px;
|
|
}
|
|
|
|
#dragonView .dragon-detail-header {
|
|
min-height: 70px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 960px) {
|
|
.dragon-title-v2 {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.dragon-filterbar-v2 {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dragon-filter-actions-v2 {
|
|
justify-content: space-between;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.redesigned-dragon-view {
|
|
padding: 10px;
|
|
}
|
|
|
|
.dragon-page-head-v2 {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dragon-title-v2 {
|
|
gap: 6px 8px;
|
|
}
|
|
|
|
.dragon-title-v2 > span {
|
|
width: calc(100% - 82px);
|
|
}
|
|
|
|
.dragon-title-v2 > strong {
|
|
width: fit-content;
|
|
}
|
|
|
|
.dragon-head-actions-v2 {
|
|
width: 100%;
|
|
}
|
|
|
|
.dragon-view-tabs-v2 {
|
|
min-width: 0px;
|
|
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.dragon-view-tabs-v2 button {
|
|
min-width: 0px;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
padding-inline: 6px;
|
|
}
|
|
|
|
.dragon-action-v2 span {
|
|
display: none;
|
|
}
|
|
|
|
.dragon-daily-content-v2 {
|
|
overflow: visible;
|
|
}
|
|
|
|
.dragon-summary-v2 {
|
|
grid-template-columns: repeat(2, minmax(0px, 1fr));
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric:nth-child(2) {
|
|
border-right: 0px;
|
|
}
|
|
|
|
.dragon-summary-v2 .dragon-metric:nth-child(-n+2) {
|
|
border-bottom: 1px solid var(--r2-line);
|
|
}
|
|
|
|
.dragon-filter-actions-v2 {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.dragon-segments-v2 {
|
|
width: 100%;
|
|
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.dragon-filter-v2 {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.dragon-search-v2 {
|
|
width: 100%;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 > div {
|
|
align-items: flex-start;
|
|
|
|
flex-direction: column;
|
|
|
|
gap: 2px;
|
|
}
|
|
|
|
.dragon-stage-heading-v2 small {
|
|
display: none;
|
|
}
|
|
|
|
#dragonView .dragon-trader-list {
|
|
height: 246px;
|
|
|
|
min-height: 246px;
|
|
}
|
|
|
|
#dragonView .dragon-detail-header {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
body.mobile-shell #dragonView .dragon-trader-detail .trader-operations {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.dragon-empty-state-v2 {
|
|
min-height: 360px;
|
|
|
|
padding-inline: 16px;
|
|
}
|
|
|
|
.dragon-empty-actions-v2 {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
|
|
width: min(100%, 240px);
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.dragon-search-v2 {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
.hot-money-profiles-v2 {
|
|
min-width: 0px;
|
|
|
|
min-height: 0px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-rows: auto minmax(0px, 1fr);
|
|
|
|
gap: var(--dragon-profile-gap);
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.hot-money-profiles-v2[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.hot-money-profile-toolbar-v2 {
|
|
min-height: calc(var(--dragon-profile-control-height) + var(--dragon-profile-gap));
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: var(--dragon-profile-gap);
|
|
|
|
padding: calc(var(--dragon-profile-gap) / 2) var(--dragon-profile-gap);
|
|
|
|
border: var(--dragon-profile-border-width) solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-card);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
}
|
|
|
|
.hot-money-profile-toolbar-v2 .dragon-filter-copy-v2 {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.hot-money-profile-search-v2 {
|
|
height: var(--dragon-profile-control-height);
|
|
}
|
|
|
|
.hot-money-profile-summary-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: var(--dragon-profile-gap);
|
|
}
|
|
|
|
.hot-money-profile-summary-v2 > span {
|
|
display: grid;
|
|
|
|
grid-template-columns: auto auto;
|
|
|
|
align-items: baseline;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hot-money-profile-summary-v2 small {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-summary-v2 strong {
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-name-font);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.hot-money-profile-workspace-v2 {
|
|
min-width: 0px;
|
|
|
|
min-height: 0px;
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: var(--dragon-profile-list-width) minmax(0, 1fr);
|
|
|
|
gap: var(--dragon-profile-gap);
|
|
}
|
|
|
|
.hot-money-profile-directory-v2 {
|
|
min-width: 0px;
|
|
|
|
min-height: 0px;
|
|
|
|
overflow: hidden;
|
|
|
|
border: var(--dragon-profile-border-width) solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-card);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hot-money-profile-directory-head-v2 {
|
|
min-height: var(--dragon-profile-control-height);
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
|
|
padding: 0 var(--dragon-profile-gap);
|
|
|
|
border-bottom: var(--dragon-profile-border-width) solid var(--r2-line-soft);
|
|
}
|
|
|
|
.hot-money-profile-directory-head-v2 strong {
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-body-font);
|
|
}
|
|
|
|
.hot-money-profile-directory-head-v2 span {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.hot-money-profile-list-v2 {
|
|
min-height: 0px;
|
|
|
|
flex: 1 1 auto;
|
|
|
|
overflow-y: auto;
|
|
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.hot-money-profile-row-v2 {
|
|
width: 100%;
|
|
|
|
min-height: var(--dragon-profile-row-min-height);
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: auto var(--dragon-profile-row-avatar-size) minmax(0, 1fr) auto;
|
|
|
|
align-items: center;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
|
|
padding: var(--dragon-profile-row-padding);
|
|
|
|
border-top: 0px;
|
|
|
|
border-right: 0px;
|
|
|
|
border-left: 0px;
|
|
|
|
border-image: none;
|
|
|
|
border-bottom: var(--dragon-profile-border-width) solid var(--r2-line-soft);
|
|
|
|
background: transparent;
|
|
|
|
text-align: left;
|
|
|
|
transition: background-color var(--dragon-profile-transition), color var(--dragon-profile-transition);
|
|
}
|
|
|
|
.hot-money-profile-row-v2:hover {
|
|
background: var(--r2-bg);
|
|
}
|
|
|
|
.hot-money-profile-row-v2.selected {
|
|
background: var(--r2-blue-soft);
|
|
}
|
|
|
|
.hot-money-profile-row-v2:focus-visible {
|
|
outline: var(--dragon-profile-focus-width) solid var(--r2-blue);
|
|
|
|
outline-offset: var(--dragon-profile-focus-offset);
|
|
}
|
|
|
|
.hot-money-profile-index-v2 {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.hot-money-profile-monogram-v2 {
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-blue-soft);
|
|
|
|
color: var(--r2-blue);
|
|
|
|
font-weight: var(--dragon-profile-weight-strong);
|
|
|
|
width: var(--dragon-profile-row-avatar-size);
|
|
|
|
height: var(--dragon-profile-row-avatar-size);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-row-copy-v2 {
|
|
min-width: 0px;
|
|
}
|
|
|
|
.hot-money-profile-row-copy-v2 strong {
|
|
display: block;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-name-font);
|
|
}
|
|
|
|
.hot-money-profile-row-copy-v2 small {
|
|
display: block;
|
|
|
|
overflow: hidden;
|
|
|
|
text-overflow: ellipsis;
|
|
|
|
white-space: nowrap;
|
|
|
|
margin-top: calc(var(--dragon-profile-gap) / 4);
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-seat-count-v2 {
|
|
color: var(--r2-sub);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.hot-money-profile-detail-v2 {
|
|
min-width: 0px;
|
|
|
|
overflow: hidden auto;
|
|
|
|
border: var(--dragon-profile-border-width) solid var(--r2-line);
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-card);
|
|
|
|
box-shadow: var(--r2-shadow);
|
|
|
|
min-height: var(--dragon-profile-detail-min-height);
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hot-money-profile-detail-head-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: var(--dragon-profile-gap);
|
|
|
|
padding: var(--dragon-profile-panel-padding);
|
|
|
|
border-bottom: var(--dragon-profile-border-width) solid var(--r2-line-soft);
|
|
}
|
|
|
|
.hot-money-profile-avatar-v2 {
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
border-radius: var(--r2-radius);
|
|
|
|
background: var(--r2-blue-soft);
|
|
|
|
color: var(--r2-blue);
|
|
|
|
font-weight: var(--dragon-profile-weight-strong);
|
|
|
|
width: var(--dragon-profile-avatar-size);
|
|
|
|
height: var(--dragon-profile-avatar-size);
|
|
|
|
flex: 0 0 var(--dragon-profile-avatar-size);
|
|
|
|
font-size: var(--dragon-profile-title-font);
|
|
}
|
|
|
|
.hot-money-profile-detail-head-v2 > div {
|
|
min-width: 0px;
|
|
}
|
|
|
|
.hot-money-profile-detail-head-v2 small,
|
|
.hot-money-profile-detail-head-v2 span {
|
|
display: block;
|
|
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-detail-head-v2 h3 {
|
|
margin: calc(var(--dragon-profile-gap) / 3) 0;
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-title-font);
|
|
}
|
|
|
|
.hot-money-profile-section-v2 {
|
|
padding: var(--dragon-profile-panel-padding);
|
|
|
|
border-bottom: var(--dragon-profile-border-width) solid var(--r2-line-soft);
|
|
}
|
|
|
|
.hot-money-profile-section-v2 h4 {
|
|
margin: 0 0 calc(var(--dragon-profile-gap) / 2);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-name-font);
|
|
}
|
|
|
|
.hot-money-profile-section-v2 p {
|
|
margin: 0px;
|
|
|
|
color: var(--r2-sub);
|
|
|
|
font-size: var(--dragon-profile-body-font);
|
|
|
|
line-height: var(--dragon-profile-body-line-height);
|
|
|
|
white-space: pre-line;
|
|
}
|
|
|
|
.hot-money-profile-section-v2 p.is-empty {
|
|
color: var(--r2-faint);
|
|
}
|
|
|
|
.hot-money-profile-section-title-v2 {
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hot-money-profile-section-title-v2 span {
|
|
color: var(--r2-faint);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-organizations-v2 {
|
|
display: grid;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
}
|
|
|
|
.hot-money-profile-organizations-v2 > span {
|
|
min-height: var(--dragon-profile-control-height);
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
|
|
padding: 0 var(--dragon-profile-gap);
|
|
|
|
border: var(--dragon-profile-border-width) solid var(--r2-line-soft);
|
|
|
|
border-radius: calc(var(--r2-radius) - var(--dragon-profile-radius-inset));
|
|
|
|
background: var(--r2-bg);
|
|
|
|
color: var(--r2-ink);
|
|
|
|
font-size: var(--dragon-profile-body-font);
|
|
}
|
|
|
|
.hot-money-profile-organizations-v2 .lucide {
|
|
width: var(--dragon-profile-name-font);
|
|
|
|
height: var(--dragon-profile-name-font);
|
|
|
|
color: var(--r2-sub);
|
|
}
|
|
|
|
.hot-money-profile-notice-v2 {
|
|
margin: auto var(--dragon-profile-panel-padding) var(--dragon-profile-panel-padding);
|
|
|
|
color: var(--r2-amber);
|
|
|
|
font-size: var(--dragon-profile-meta-font);
|
|
}
|
|
|
|
.hot-money-profile-empty-v2 {
|
|
min-height: var(--dragon-profile-detail-min-height);
|
|
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
align-content: center;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
|
|
color: var(--r2-faint);
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
.hot-money-profile-list-empty-v2 {
|
|
display: grid;
|
|
|
|
place-items: center;
|
|
|
|
align-content: center;
|
|
|
|
gap: calc(var(--dragon-profile-gap) / 2);
|
|
|
|
color: var(--r2-faint);
|
|
|
|
text-align: center;
|
|
|
|
min-height: var(--dragon-profile-row-min-height);
|
|
}
|
|
|
|
.hot-money-profile-empty-v2 .lucide {
|
|
width: var(--dragon-profile-avatar-size);
|
|
|
|
height: var(--dragon-profile-avatar-size);
|
|
|
|
stroke-width: var(--dragon-profile-icon-stroke);
|
|
}
|
|
|
|
.hot-money-profile-list-empty-v2 .lucide {
|
|
stroke-width: var(--dragon-profile-icon-stroke);
|
|
|
|
width: var(--dragon-profile-row-avatar-size);
|
|
|
|
height: var(--dragon-profile-row-avatar-size);
|
|
}
|
|
|
|
.hot-money-profile-empty-v2 strong,
|
|
.hot-money-profile-list-empty-v2 span {
|
|
font-size: var(--dragon-profile-body-font);
|
|
|
|
font-weight: var(--dragon-profile-weight-semibold);
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body[data-active-view="dragonView"] .hot-money-profiles-v2 {
|
|
flex: 1 1 auto;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.hot-money-profiles-v2 {
|
|
overflow: visible;
|
|
}
|
|
|
|
.hot-money-profile-toolbar-v2 {
|
|
align-items: stretch;
|
|
|
|
flex-direction: column;
|
|
}
|
|
|
|
.hot-money-profile-summary-v2 {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.hot-money-profile-search-v2 {
|
|
width: 100%;
|
|
}
|
|
|
|
.hot-money-profile-workspace-v2 {
|
|
grid-template-columns: minmax(0px, 1fr);
|
|
}
|
|
|
|
.hot-money-profile-list-v2 {
|
|
max-height: var(--dragon-profile-list-max-height);
|
|
}
|
|
|
|
.hot-money-profile-detail-v2 {
|
|
min-height: 0px;
|
|
}
|
|
|
|
.hot-money-profile-detail-head-v2 {
|
|
align-items: flex-start;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.hot-money-profile-row-v2 {
|
|
transition: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
body[data-active-view="dragonView"] .dragon-daily-content-v2 {
|
|
display: block;
|
|
|
|
overflow: visible;
|
|
}
|
|
|
|
body[data-active-view="dragonView"] #dragonView .dragon-trader-detail-v2 {
|
|
display: block;
|
|
}
|
|
|
|
body[data-active-view="dragonView"] #dragonView .dragon-trader-detail .trader-operations {
|
|
max-height: none;
|
|
|
|
overflow: auto;
|
|
}
|
|
|
|
body[data-active-view="dragonView"] #dragonView .dragon-unclassified-v2 {
|
|
max-height: none;
|
|
|
|
overflow: visible;
|
|
}
|
|
}
|
|
|
|
#dragonView .dragon-detail-header p {
|
|
font-size: 13px;
|
|
|
|
line-height: 1.55;
|
|
}
|
|
|
|
table.tbl {
|
|
width: 100%;
|
|
|
|
border-collapse: collapse;
|
|
|
|
font-size: var(--font-size-table);
|
|
}
|
|
|
|
.tbl .num {
|
|
text-align: right;
|
|
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
#dragonView .dragon-operation-table {
|
|
table-layout: auto;
|
|
|
|
min-width: var(--table-wide);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-index {
|
|
width: var(--col-rank);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-stock {
|
|
width: var(--col-stock);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-direction {
|
|
width: var(--col-number);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-number {
|
|
width: var(--col-number);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-seat {
|
|
width: var(--col-text);
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .dragon-col-reason {
|
|
width: auto;
|
|
}
|
|
|
|
#dragonView .dragon-operation-table .reason-column {
|
|
white-space: normal;
|
|
}
|
|
|
|
:root[data-theme="dark"] .dragon-trader-card {
|
|
border-color: color-mix(in srgb, var(--card-accent) 54%, var(--border));
|
|
|
|
background: linear-gradient(155deg, var(--surface-subtle), color-mix(in srgb, var(--card-accent) 13%, var(--surface)));
|
|
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:root[data-theme="dark"] :is(.dragon-card-copy strong, .dragon-card-copy q, .dragon-card-stats small) {
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
:root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2, .dragon-segments-v2) {
|
|
border-color: var(--border);
|
|
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
:root[data-theme="dark"] #dragonView :is(.dragon-view-tabs-v2 button.active, .dragon-filter-v2.active) {
|
|
background: var(--surface-subtle);
|
|
|
|
color: var(--text-primary);
|
|
|
|
box-shadow: var(--control-shadow);
|
|
}
|
|
|
|
:root[data-theme="dark"] #dragonView :is(.dragon-summary-v2, .dragon-filterbar-v2, .dragon-stage-heading-v2, .dragon-empty-state-v2) {
|
|
border-color: var(--border);
|
|
|
|
background: var(--surface);
|
|
|
|
color: var(--text-primary);
|
|
}
|
|
|
|
:root[data-theme="dark"] #dragonView thead th {
|
|
border-color: var(--border);
|
|
|
|
color: var(--text-secondary);
|
|
|
|
background: var(--surface-muted) !important;
|
|
}
|
|
|
|
/* Mobile dragon-tiger pages use document scrolling, including long operation lists. */
|
|
@media (max-width: 767px) {
|
|
#dragonView {
|
|
padding-inline: 0;
|
|
}
|
|
|
|
#dragonView :is(.dragon-daily-content-v2, .dragon-trader-detail-v2, .dragon-unclassified-v2, .hot-money-profiles-v2) {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
#dragonView .dragon-trader-detail .trader-operations {
|
|
max-height: none;
|
|
overflow-x: auto;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
#dragonView .hot-money-profile-list-v2 {
|
|
max-height: none;
|
|
overflow: visible;
|
|
}
|
|
|
|
#dragonView .dragon-operation-table {
|
|
min-width: var(--table-wide);
|
|
}
|
|
}
|