/* Canonical CSS owner: themes. Historical layers consolidated 2026-08-02. */ .warning { color: var(--amber) !important; } .market-preview-trigger { cursor: pointer; text-decoration: underline transparent; text-underline-offset: 3px; transition: color var(--motion-fast) ease, text-decoration-color var(--motion-fast) ease, background-color var(--motion-fast) ease; } .market-preview-trigger:hover { color: var(--action); text-decoration-color: currentcolor; } .theme-members-heading span { color: var(--text-muted); font-size: 12px; } .theme-members-heading h3 { margin: 0px; font-size: 15px; } .theme-directory { max-height: calc(-292px + 100vh); overflow-y: auto; overscroll-behavior: contain; } .theme-directory-item > span { min-width: 0px; display: grid; gap: 3px; } .theme-directory-item strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; } .theme-directory-item small { color: var(--text-muted); font-size: 11px; } .theme-directory-item b { flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; } .theme-detail-empty { min-height: 520px; display: grid; place-items: center; } .theme-detail-heading h3 { margin: 3px 0px 1px; font-size: 20px; } .theme-detail-heading small { color: var(--text-muted); } .theme-detail-heading > strong { font-size: 24px; font-variant-numeric: tabular-nums; } .theme-detail-metrics > div:last-child { border-right: 0px; } .theme-detail-metrics span { color: var(--text-muted); font-size: 11px; } .theme-detail-metrics strong { font-size: 14px; font-variant-numeric: tabular-nums; } .theme-members-frame { max-height: 330px; border-right: 0px; } @media (max-width: 720px) { .theme-detail-empty { min-height: 260px; } .theme-detail-metrics { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .theme-detail-metrics > div:nth-child(2) { border-right: 0px; } .theme-members-frame { max-height: none; } } .theme-members-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 9px 13px; border-bottom-color: var(--border); } .theme-directory-item { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; background: transparent; color: var(--text); cursor: pointer; text-align: left; transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease; min-height: 60px; padding: 9px 13px; border-bottom-color: rgb(231, 235, 239); } .theme-directory-item:hover { background: rgb(241, 246, 251); } .theme-directory-item.active { background: rgb(234, 242, 251); box-shadow: inset 3px 0 var(--action); } .theme-detail-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; min-height: 78px; border-bottom-color: var(--border); } .theme-detail-metrics { display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); border-color: var(--border); } .theme-detail-metrics > div { display: grid; gap: 4px; padding: 9px 14px; border-color: var(--border); } @media (max-width: 720px) { .theme-directory { max-height: 300px; } } #themeSummary { margin-bottom: 12px; border: 1px solid var(--border); border-radius: var(--card-radius); background: rgb(255, 255, 255); box-shadow: var(--card-shadow); overflow: hidden; } .redesigned-theme-view { width: min(100%, 2200px); margin: 0px auto; padding: 12px 16px 14px; } .theme-page-head-v2 { min-height: 52px; display: flex; align-items: center; justify-content: space-between; } .theme-title-v2 { display: flex; align-items: center; min-width: 0px; gap: 12px; } .theme-title-v2 > div { display: flex; align-items: center; min-width: 0px; gap: 9px; } .theme-title-v2 h2 { margin: 0px; color: var(--r2-ink); } .theme-title-v2 > div > span { color: var(--r2-sub); font-size: 12px; } .theme-date-v2 { padding: 4px 8px; border-radius: 5px; background: var(--r2-amber-soft); color: var(--r2-amber); font-size: 11px; font-weight: 650; white-space: nowrap; } .theme-head-actions-v2 { display: flex; align-items: center; flex: 0 0 auto; gap: 8px; } .theme-search-v2 { width: 250px; height: 34px; display: flex; align-items: center; gap: 7px; padding: 0px 10px; border: 1px solid rgb(216, 221, 229); border-radius: 7px; background: rgb(255, 255, 255); color: var(--r2-faint); transition: border-color 160ms, box-shadow 160ms; } .theme-search-v2:focus-within { border-color: rgb(150, 181, 242); box-shadow: rgba(37, 99, 235, 0.09) 0px 0px 0px 3px; } .theme-search-v2 .lucide { width: 15px; height: 15px; } .theme-search-v2 input { min-width: 0px; width: 100%; height: 100%; padding: 0px; border: 0px; outline: 0px; background: transparent; color: var(--r2-ink); font: inherit; } .theme-search-v2 input::placeholder { color: var(--r2-faint); } .theme-refresh-v2 { min-height: 34px; padding: 0px 12px; border-radius: 7px; } .theme-refresh-v2 .lucide { width: 15px; height: 15px; } .theme-summary-v2 { min-height: 58px; display: grid; grid-template-columns: repeat(4, minmax(0px, 1fr)); margin-bottom: 12px; overflow: hidden; border: 1px solid var(--r2-line); border-radius: var(--r2-radius); background: rgb(255, 255, 255); box-shadow: var(--r2-shadow); } .theme-summary-v2 > div { min-width: 0px; display: grid; align-content: center; gap: 3px; padding: 8px 15px; border-right: 1px solid var(--r2-line); } .theme-summary-v2 > div:last-child { border-right: 0px; } .theme-summary-v2 span { color: var(--r2-sub); font-size: 11px; } .theme-summary-v2 strong { color: var(--r2-ink); font-size: 19px; font-weight: 750; font-variant-numeric: tabular-nums; } .theme-summary-v2 strong small { margin-left: 3px; color: currentcolor; font-size: 11px; font-weight: 600; } .theme-summary-v2 strong.up { color: var(--r2-up); } .theme-summary-v2 strong.down { color: var(--r2-down); } .theme-summary-v2 strong.warning { color: var(--r2-amber); } .theme-library-workspace-v2 { min-height: 0px; display: grid; grid-template-columns: 318px minmax(0px, 1fr); align-items: stretch; gap: 12px; } .theme-directory-card-v2 { min-width: 0px; overflow: hidden; border: 1px solid var(--r2-line); border-radius: var(--r2-radius); background: var(--r2-card); box-shadow: var(--r2-shadow); min-height: 0px; display: flex; flex-direction: column; } .theme-card-head-v2 { min-height: 55px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--r2-line-soft); } .theme-card-head-v2 h3 { margin: 0px; color: var(--r2-ink); font-size: 14px; font-weight: 700; } .theme-card-head-v2 span { display: block; margin-top: 2px; color: var(--r2-faint); font-size: 10.5px; } .theme-card-head-v2 > strong { flex: 0 0 auto; padding: 3px 7px; border-radius: 5px; background: rgb(243, 244, 246); color: var(--r2-sub); font-size: 10.5px; font-weight: 650; } .theme-directory-labels-v2 { min-height: 28px; display: grid; grid-template-columns: minmax(0px, 1fr) 74px; align-items: center; padding: 0px 13px 0px 45px; border-bottom: 1px solid var(--r2-line-soft); background: rgb(250, 251, 252); color: var(--r2-faint); font-size: 10px; } .theme-directory-labels-v2 span:last-child { text-align: right; } .theme-directory-v2 { min-height: 0px; flex: 1 1 auto; overflow: hidden auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .theme-directory-item-v2 { width: 100%; min-height: 58px; display: grid; grid-template-columns: 24px minmax(0px, 1fr) 68px; align-items: center; gap: 8px; position: relative; padding: 7px 12px; border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--r2-line-soft); background: transparent; color: var(--r2-ink); cursor: pointer; text-align: left; transition: background-color 160ms, color 160ms; } .theme-directory-item-v2::before { content: ""; position: absolute; inset: 9px auto 9px 0px; width: 3px; border-radius: 0px 3px 3px 0px; background: transparent; transform: scaleY(0.45); transition: background-color 160ms, transform 180ms; } .theme-directory-item-v2:hover { background: rgb(247, 249, 252); } .theme-directory-item-v2.active { background: var(--r2-blue-soft); } .theme-directory-item-v2.active::before { background: var(--r2-blue); transform: scaleY(1); } .theme-directory-item-v2:focus-visible { z-index: 1; outline: 2px solid var(--r2-blue); outline-offset: -2px; } .theme-rank-v2 { color: var(--r2-faint); font-size: 10.5px; font-variant-numeric: tabular-nums; text-align: center; } .theme-directory-item-v2:nth-child(-n+3) .theme-rank-v2 { color: var(--r2-amber); font-weight: 750; } .theme-directory-copy-v2 { min-width: 0px; display: grid; gap: 3px; } .theme-directory-copy-v2 strong { overflow: hidden; color: var(--r2-ink); font-size: 13px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .theme-directory-copy-v2 small { overflow: hidden; color: var(--r2-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .theme-directory-item-v2 > b { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; } .theme-detail-stack-v2 { min-width: 0px; min-height: 0px; } .theme-detail-column-v2 { min-width: 0px; min-height: 0px; display: flex; } .theme-detail-empty-v2 { min-width: 0px; overflow: hidden; border: 1px solid var(--r2-line); border-radius: var(--r2-radius); background: var(--r2-card); box-shadow: var(--r2-shadow); width: 100%; min-height: 420px; display: grid; place-items: center; color: var(--r2-faint); } .theme-detail-stack-v2:not([hidden]) { width: 100%; display: grid; grid-template-rows: auto minmax(0px, 1fr); gap: 12px; } .theme-market-card-v2, .theme-members-card-v2 { min-width: 0px; overflow: hidden; border: 1px solid var(--r2-line); border-radius: var(--r2-radius); background: var(--r2-card); box-shadow: var(--r2-shadow); min-height: 0px; display: flex; flex-direction: column; } .theme-detail-heading-v2 { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 15px; border-bottom: 1px solid var(--r2-line-soft); } .theme-detail-identity-v2 { min-width: 0px; } .theme-detail-kicker-v2 { color: var(--r2-faint); font-size: 10.5px; } .theme-detail-name-line-v2 { display: flex; align-items: center; min-width: 0px; gap: 8px; margin-top: 3px; } .theme-detail-name-line-v2 h3 { margin: 0px; overflow: hidden; color: var(--r2-ink); font-size: 18px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .theme-detail-name-line-v2 small { flex: 0 0 auto; padding: 2px 6px; border-radius: 4px; background: rgb(243, 244, 246); color: var(--r2-sub); font-size: 10px; } .theme-change-v2 { flex: 0 0 auto; display: grid; justify-items: end; gap: 2px; } .theme-change-v2 span { color: var(--r2-faint); font-size: 10.5px; } .theme-change-v2 strong { font-size: 22px; font-weight: 750; font-variant-numeric: tabular-nums; } .theme-detail-metrics-v2 { min-height: 52px; display: grid; grid-template-columns: repeat(5, minmax(0px, 1fr)); border-bottom: 1px solid var(--r2-line-soft); background: rgb(252, 252, 253); } .theme-detail-metrics-v2 > div { min-width: 0px; display: grid; align-content: center; gap: 3px; padding: 7px 13px; border-right: 1px solid var(--r2-line-soft); } .theme-detail-metrics-v2 > div:last-child { border-right: 0px; } .theme-detail-metrics-v2 span { color: var(--r2-faint); font-size: 10px; } .theme-detail-metrics-v2 strong { color: var(--r2-ink); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .theme-detail-metrics-v2 strong.up { color: var(--r2-up); } .theme-detail-metrics-v2 strong.down { color: var(--r2-down); } .theme-members-heading-v2 { display: flex; align-items: center; min-height: 50px; justify-content: space-between; gap: 14px; padding: 8px 13px; border-bottom: 1px solid var(--r2-line-soft); } .theme-members-heading-v2 > div { display: flex; align-items: center; min-width: 0px; gap: 8px; } .theme-members-heading-v2 h3 { margin: 0px; color: var(--r2-ink); font-size: 14px; font-weight: 700; } .theme-members-heading-v2 span { overflow: hidden; color: var(--r2-faint); font-size: 10.5px; text-overflow: ellipsis; white-space: nowrap; } .theme-members-heading-v2 > strong { flex: 0 0 auto; color: var(--r2-sub); font-size: 10.5px; font-weight: 600; } .theme-members-frame-v2 { min-height: 0px; flex: 1 1 auto; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; } .theme-members-table-v2 { min-width: 650px; } .theme-members-table-v2 thead th { position: sticky; top: 0px; z-index: 2; height: 34px; padding: 6px 11px; border-bottom-color: var(--r2-line); background: rgb(250, 251, 252); color: var(--r2-sub); font-size: 10.5px; } .theme-members-table-v2 tbody td { height: 39px; padding: 7px 11px; font-size: 11.5px; } .theme-members-table-v2 tbody tr { cursor: pointer; } .theme-members-table-v2 tbody tr:hover { background: rgb(247, 249, 252); } .theme-members-table-v2 .stock-name { color: var(--r2-ink); font-weight: 650; } .theme-members-table-v2 .stock-code { color: rgb(64, 85, 115); } @media (min-width: 1181px) { body[data-active-view="themeLibraryView"] .app-main { display: flex; flex-direction: column; overflow: hidden; } body[data-active-view="themeLibraryView"] .overview-strip { flex: 0 0 auto; } body[data-active-view="themeLibraryView"] #themeLibraryView.active-view { min-height: 0px; flex: 1 1 auto; display: flex; flex-direction: column; } body[data-active-view="themeLibraryView"] .theme-page-head-v2, body[data-active-view="themeLibraryView"] .theme-summary-v2 { flex: 0 0 auto; } body[data-active-view="themeLibraryView"] .theme-library-workspace-v2 { flex: 1 1 auto; } } @media (min-width: 721px) and (max-width: 1180px) { body[data-active-view="themeLibraryView"] .app-main { overflow: hidden auto; } .theme-library-workspace-v2 { grid-template-columns: minmax(0px, 1fr); } .theme-directory-card-v2 { max-height: 330px; } .theme-directory-v2 { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); } .theme-directory-item-v2:nth-child(2n+1) { border-right: 1px solid var(--r2-line-soft); } .theme-detail-stack-v2:not([hidden]) { grid-template-rows: auto 420px; } } @media (min-width: 721px) and (max-height: 900px) { .redesigned-theme-view { padding-top: 9px; padding-bottom: 10px; } .theme-page-head-v2 { min-height: 45px; margin-bottom: 7px; } .theme-summary-v2 { min-height: 51px; margin-bottom: 9px; } .theme-summary-v2 > div { padding-top: 5px; padding-bottom: 5px; } .theme-card-head-v2 { min-height: 50px; } .theme-directory-labels-v2 { min-height: 25px; } .theme-directory-item-v2 { min-height: 52px; } .theme-detail-stack-v2:not([hidden]) { grid-template-rows: auto minmax(260px, 1fr); gap: 9px; } .theme-detail-heading-v2 { min-height: 58px; } .theme-detail-metrics-v2 { min-height: 47px; } .theme-members-heading-v2 { min-height: 44px; } .theme-members-table-v2 tbody td { height: 35px; padding-top: 5px; padding-bottom: 5px; } } @media (max-width: 720px) { .redesigned-theme-view { padding: 10px; } .theme-page-head-v2 { flex-direction: column; } .theme-title-v2 { align-items: flex-start; justify-content: space-between; gap: 8px; } .theme-title-v2 > div { align-items: flex-start; flex-direction: column; gap: 2px; } .theme-head-actions-v2 { width: 100%; } .theme-search-v2 { min-width: 0px; width: auto; flex: 1 1 auto; } .theme-refresh-v2 { flex: 0 0 auto; } .theme-summary-v2 { grid-template-columns: repeat(2, minmax(0px, 1fr)); } .theme-summary-v2 > div:nth-child(2) { border-right: 0px; } .theme-summary-v2 > div:nth-child(-n+2) { border-bottom: 1px solid var(--r2-line); } .theme-library-workspace-v2 { grid-template-columns: minmax(0px, 1fr); } .theme-directory-card-v2 { max-height: 360px; } .theme-detail-stack-v2:not([hidden]) { display: flex; flex-direction: column; gap: 10px; } .theme-market-card-v2 { min-height: 0px; } .theme-detail-heading-v2 { align-items: flex-end; } .theme-detail-name-line-v2 { align-items: flex-start; flex-direction: column; gap: 2px; } .theme-detail-metrics-v2 { grid-template-columns: repeat(3, minmax(0px, 1fr)); } .theme-detail-metrics-v2 > div { border-bottom: 1px solid var(--r2-line-soft); } .theme-detail-metrics-v2 > div:nth-child(3) { border-right: 0px; } .theme-detail-metrics-v2 > div:nth-child(n+4) { border-bottom: 0px; } .theme-members-card-v2 { min-height: 420px; } .theme-members-heading-v2 > div { align-items: flex-start; flex-direction: column; gap: 2px; } } @media (prefers-reduced-motion: reduce) { .theme-directory-item-v2, .theme-directory-item-v2::before, .theme-search-v2 { transition: none; } } .theme-list .row { display: flex; align-items: center; gap: 10px; padding: 8px 14px; border-bottom: 1px solid var(--line-soft); font-size: 12.5px; } .theme-list .row .rk { width: 22px; color: var(--faint); font-size: 11px; text-align: right; } .theme-list .row .nm { font-weight: 700; width: 82px; } .theme-list .row .hot { flex: 1 1 0%; color: var(--sub); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .theme-list .row .chg { width: 70px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; } .theme-stat { display: flex; gap: 24px; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); } .theme-stat .st .k { font-size: 11px; color: var(--faint); } .theme-stat .st .v { font-size: 18px; font-weight: 800; margin-top: 2px; font-variant-numeric: tabular-nums; } .theme-grid { display: grid; gap: 12px; align-items: start; grid-template-columns: var(--right-rail-wide) minmax(0,1fr); } @media (min-width: 721px) { #themeLibraryView .theme-page-head-v2, #themeLibraryView .theme-summary-v2 { flex: 0 0 auto; } #themeLibraryView.active-view { display: flex; flex-direction: column; overflow: hidden; } #themeLibraryView .theme-library-workspace-v2 { min-height: 0px; flex: 1 1 auto; height: 100%; grid-template-rows: minmax(0px, 1fr); align-items: stretch; overflow: hidden; } #themeLibraryView .theme-detail-column-v2, #themeLibraryView .theme-directory-card-v2 { height: 100%; min-height: 0px; overflow: hidden; } #themeLibraryView .theme-detail-stack-v2 { grid-template-rows: auto minmax(0px, 1fr); height: 100%; min-height: 0px; overflow: hidden; } } @media (max-width: 720px), (max-width: 1023px) and (max-height: 600px) { #themeLibraryView .theme-library-workspace-v2 { height: auto; display: block; grid-template-columns: none; grid-template-rows: auto; overflow: visible; } #themeLibraryView .theme-directory-v2 { display: block; } #themeLibraryView .theme-detail-column-v2, #themeLibraryView .theme-detail-stack-v2, #themeLibraryView .theme-directory-card-v2 { height: auto; overflow: visible; } } :root.theme-switching *, :root.theme-switching ::after, :root.theme-switching ::before { animation: auto ease 0s 1 normal none running none !important; transition: none !important; } @keyframes theme-fade-out { 100% { opacity: 0; } } @keyframes theme-fade-in { 0% { opacity: 0; } } :root[data-theme="dark"] .theme-toggle { color: var(--text-secondary); } :root[data-theme="dark"] .theme-toggle[aria-pressed="true"] { border-color: var(--warning-line); background: var(--warning-soft); color: var(--warning-color); } :root[data-theme="dark"] :is(.theme-summary-v2, .theme-directory-labels-v2, .theme-detail-metrics-v2) { border-color: var(--line-soft); background: var(--surface-muted); } :root[data-theme="dark"] .theme-directory-item-v2.active, :root[data-theme="dark"] .theme-directory-item-v2:hover { background: var(--action-soft); } :root[data-theme="dark"] #themeLibraryView :is(.theme-search-v2, .theme-summary-v2, .theme-detail-empty-v2, #themeResultCount, #themeDetailCode) { border-color: var(--border); background: var(--surface-muted); color: var(--text-secondary); } @media (prefers-reduced-motion: reduce) { .theme-toggle svg { transition: none; } }