yuxuanhui
980 lines
18 KiB
CSS
980 lines
18 KiB
CSS
:root {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei",
|
|
sans-serif;
|
|
font-synthesis: none;
|
|
--accent: #1456f0;
|
|
--surface: #fff;
|
|
--canvas: #f8f9fa;
|
|
--line: #dee0e3;
|
|
--ink: #1f2329;
|
|
--muted: #646a73;
|
|
--space-1: 4px;
|
|
--space-2: 8px;
|
|
--space-3: 12px;
|
|
--space-4: 16px;
|
|
}
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
body {
|
|
font-size: 14px;
|
|
color: var(--ink);
|
|
background: var(--surface);
|
|
}
|
|
body[theme-mode] {
|
|
--semi-color-primary: var(--accent);
|
|
--semi-color-primary-hover: #336df4;
|
|
--semi-color-primary-active: #0442d2;
|
|
--semi-color-primary-light-default: #eaf0ff;
|
|
--semi-border-radius-small: 4px;
|
|
--semi-border-radius-medium: 6px;
|
|
--semi-color-text-0: var(--ink);
|
|
--semi-color-text-1: var(--ink);
|
|
--semi-color-text-2: var(--muted);
|
|
}
|
|
body[theme-mode="dark"] {
|
|
--surface: #1a1a1a;
|
|
--canvas: #262626;
|
|
--line: #424242;
|
|
--ink: #ebebeb;
|
|
--muted: #a6a6a6;
|
|
--accent: #4c88ff;
|
|
--semi-color-primary-light-default: #25334c;
|
|
}
|
|
button,
|
|
input,
|
|
textarea {
|
|
font: inherit;
|
|
}
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
.semi-button,
|
|
.semi-tag {
|
|
font-weight: 400;
|
|
}
|
|
a {
|
|
color: var(--accent);
|
|
text-decoration: none;
|
|
}
|
|
button:focus-visible,
|
|
a:focus-visible,
|
|
summary:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
}
|
|
h1,
|
|
h2,
|
|
h3,
|
|
p {
|
|
margin: 0;
|
|
}
|
|
h1 {
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
line-height: 32px;
|
|
}
|
|
h2 {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
line-height: 24px;
|
|
}
|
|
h3 {
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
margin: 16px 0 8px;
|
|
}
|
|
p {
|
|
line-height: 1.6;
|
|
}
|
|
label:not(.semi-checkbox):not(.semi-radio) {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
margin-bottom: var(--space-3);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
min-width: 0;
|
|
}
|
|
.muted {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
}
|
|
.inline-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.screen-center {
|
|
display: grid;
|
|
place-items: center;
|
|
flex: 1;
|
|
min-height: 160px;
|
|
}
|
|
#root > .screen-center {
|
|
height: 100dvh;
|
|
}
|
|
.workspace {
|
|
display: flex;
|
|
height: 100dvh;
|
|
overflow: hidden;
|
|
}
|
|
.main-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
flex: 1;
|
|
}
|
|
.page-content {
|
|
min-height: 0;
|
|
min-width: 0;
|
|
flex: 1;
|
|
padding: var(--space-4);
|
|
overflow: auto;
|
|
background: var(--surface);
|
|
}
|
|
.page-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
flex-shrink: 0;
|
|
}
|
|
.page-heading p {
|
|
color: var(--muted);
|
|
}
|
|
/* Bounded list: every flex ancestor can shrink; only the table body scrolls.
|
|
Ordinary account forms keep the main content area's natural scrolling. */
|
|
.bounded-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
}
|
|
.library-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
flex: 1;
|
|
background: var(--surface);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
overflow: hidden;
|
|
}
|
|
.filter-panel {
|
|
padding: var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
flex: 0 1 auto;
|
|
min-height: 80px;
|
|
max-height: 44%;
|
|
overflow: auto;
|
|
}
|
|
.alpha-tabs-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
flex-shrink: 0;
|
|
padding: 0 var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.alpha-submission-tabs {
|
|
min-width: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
.alpha-last-sync {
|
|
margin-left: auto;
|
|
padding: var(--space-2) 0;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
text-align: right;
|
|
}
|
|
.alpha-last-sync > span {
|
|
display: inline-block;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.alpha-submission-tabs .semi-tabs-content {
|
|
display: none;
|
|
}
|
|
.sync-date-range {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--space-3);
|
|
margin-top: var(--space-4);
|
|
}
|
|
.correlation-panel {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) 0;
|
|
}
|
|
.correlation-panel .section-toolbar h3 {
|
|
margin: 0;
|
|
}
|
|
.correlation-panel .semi-table {
|
|
overflow-x: auto;
|
|
}
|
|
.correlation-panel summary {
|
|
cursor: pointer;
|
|
}
|
|
.primary-filters {
|
|
display: flex;
|
|
gap: var(--space-2);
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
.primary-filters > .semi-input-wrapper {
|
|
flex: 1;
|
|
min-width: 200px;
|
|
}
|
|
.primary-filters > .semi-select {
|
|
width: 136px;
|
|
}
|
|
.filter-actions {
|
|
margin-top: var(--space-2);
|
|
}
|
|
.advanced-filters {
|
|
margin-top: var(--space-2);
|
|
}
|
|
.advanced-filters > summary {
|
|
cursor: pointer;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
width: max-content;
|
|
}
|
|
.advanced-grid {
|
|
padding-top: var(--space-3);
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
gap: var(--space-2) var(--space-3);
|
|
}
|
|
.advanced-grid label {
|
|
margin-bottom: var(--space-1);
|
|
}
|
|
.advanced-filters p {
|
|
margin-top: var(--space-2);
|
|
}
|
|
.range-inputs {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
align-items: center;
|
|
}
|
|
.range-inputs > span {
|
|
color: var(--muted);
|
|
}
|
|
.table-toolbar {
|
|
padding: var(--space-2) var(--space-3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
flex-shrink: 0;
|
|
}
|
|
.table-toolbar strong {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.table-toolbar .semi-select {
|
|
min-width: 88px;
|
|
}
|
|
.count-pill {
|
|
margin-left: var(--space-2);
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.selection-text {
|
|
font-size: 12px;
|
|
color: var(--accent);
|
|
margin-left: var(--space-3);
|
|
}
|
|
.columns-picker {
|
|
padding: var(--space-3);
|
|
min-width: 192px;
|
|
max-height: min(420px, 50dvh);
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.columns-picker > strong {
|
|
display: block;
|
|
font-weight: 500;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.alpha-link {
|
|
border: 0;
|
|
background: none;
|
|
text-align: left;
|
|
padding: 0;
|
|
color: var(--accent);
|
|
max-width: 168px;
|
|
display: block;
|
|
}
|
|
.alpha-link > span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-1);
|
|
font-size: 13px;
|
|
font-weight: 400;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.stacked-cell {
|
|
font-size: 13px;
|
|
white-space: nowrap;
|
|
}
|
|
.expression-cell {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
max-width: 240px;
|
|
}
|
|
.numeric {
|
|
font-variant-numeric: tabular-nums;
|
|
font-size: 13px;
|
|
}
|
|
.inline-tags {
|
|
display: flex;
|
|
gap: var(--space-1);
|
|
flex-wrap: wrap;
|
|
}
|
|
.alpha-table,
|
|
.alpha-table > .semi-spin,
|
|
.alpha-table .semi-spin-children,
|
|
.alpha-table .semi-table-small,
|
|
.alpha-table .semi-table-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.alpha-table .semi-table-header {
|
|
flex-shrink: 0;
|
|
}
|
|
.alpha-table .semi-table-body {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
}
|
|
.semi-table-thead > .semi-table-row > .semi-table-row-head {
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
background: var(--canvas);
|
|
color: var(--muted);
|
|
}
|
|
.semi-table-row-cell {
|
|
border-color: var(--line) !important;
|
|
font-weight: 400;
|
|
}
|
|
.alpha-table .semi-table-row-cell {
|
|
padding-top: var(--space-2);
|
|
padding-bottom: var(--space-2);
|
|
height: 40px;
|
|
}
|
|
.table-pagination {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
flex-shrink: 0;
|
|
padding: var(--space-2) var(--space-3);
|
|
border-top: 1px solid var(--line);
|
|
background: var(--surface);
|
|
}
|
|
.semi-banner {
|
|
margin-bottom: var(--space-3);
|
|
border-radius: 6px;
|
|
flex-shrink: 0;
|
|
}
|
|
.text-link {
|
|
color: var(--accent);
|
|
font-size: inherit;
|
|
background: none;
|
|
border: 0;
|
|
margin-left: var(--space-2);
|
|
}
|
|
.alpha-empty {
|
|
padding: 40px var(--space-4);
|
|
}
|
|
/* Account sections use one white surface and quiet dividers. */
|
|
.account-identity {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) 0 var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.identity-name h2 {
|
|
font-size: 20px;
|
|
line-height: 28px;
|
|
}
|
|
.identity-name > span {
|
|
color: var(--muted);
|
|
font-size: 12px;
|
|
}
|
|
.session-summary {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.session-summary strong {
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
margin-left: var(--space-2);
|
|
}
|
|
.account-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
|
gap: var(--space-4);
|
|
}
|
|
.account-section {
|
|
min-width: 0;
|
|
}
|
|
.full-width {
|
|
grid-column: 1/-1;
|
|
}
|
|
.account-section > h2,
|
|
.section-heading {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.section-heading {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.profile-grid {
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0 var(--space-4);
|
|
}
|
|
.profile-grid > div {
|
|
display: flex;
|
|
align-items: baseline;
|
|
flex-wrap: wrap;
|
|
padding: var(--space-2) 0;
|
|
gap: var(--space-2);
|
|
font-size: 13px;
|
|
}
|
|
.profile-grid dt {
|
|
color: var(--muted);
|
|
min-width: 64px;
|
|
}
|
|
.profile-grid dd {
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
line-height: 1.5;
|
|
}
|
|
.permission-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
column-gap: var(--space-4);
|
|
}
|
|
.permission-list li {
|
|
padding: var(--space-2) 0;
|
|
font-size: 13px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: baseline;
|
|
gap: var(--space-2);
|
|
overflow-wrap: anywhere;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.permission-state {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
white-space: nowrap;
|
|
}
|
|
.inline-empty {
|
|
padding: var(--space-4) 0;
|
|
color: var(--muted);
|
|
}
|
|
.account-counts {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
border: 1px solid var(--line);
|
|
border-radius: 6px;
|
|
padding: var(--space-3) 0;
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.account-counts > div {
|
|
padding: 0 var(--space-4);
|
|
display: flex;
|
|
align-items: baseline;
|
|
gap: var(--space-3);
|
|
border-right: 1px solid var(--line);
|
|
flex-wrap: wrap;
|
|
}
|
|
.account-counts > div:last-child {
|
|
border: 0;
|
|
}
|
|
.account-counts span {
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.account-counts strong {
|
|
font-size: 24px;
|
|
font-weight: 500;
|
|
line-height: 32px;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
.usage-table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
.usage-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 560px;
|
|
text-align: left;
|
|
font-size: 13px;
|
|
}
|
|
.usage-table th,
|
|
.usage-table td {
|
|
padding: var(--space-2) var(--space-3);
|
|
border-bottom: 1px solid var(--line);
|
|
font-weight: 400;
|
|
}
|
|
.usage-table thead {
|
|
background: var(--canvas);
|
|
color: var(--muted);
|
|
}
|
|
.usage-table thead th {
|
|
font-weight: 500;
|
|
}
|
|
.usage-note {
|
|
margin-top: var(--space-2);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.preferences-form {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--space-3);
|
|
}
|
|
.preferences-grid {
|
|
display: grid;
|
|
grid-template-columns: 1.2fr 0.6fr 1.2fr 0.6fr;
|
|
gap: var(--space-3);
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
.preferences-grid label {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
.preferences-form > .semi-button {
|
|
flex-shrink: 0;
|
|
}
|
|
.connection-settings {
|
|
border-bottom: 1px solid var(--line);
|
|
padding: 0 0 var(--space-4);
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.connection-settings h2 {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.credentials-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: var(--space-3);
|
|
}
|
|
.verification-callout {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
gap: var(--space-3);
|
|
border: 1px solid #e7d2a0;
|
|
border-radius: 6px;
|
|
padding: var(--space-3);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.job-card {
|
|
border: 1px solid var(--line);
|
|
padding: var(--space-3);
|
|
border-radius: 6px;
|
|
margin: var(--space-3) 0;
|
|
}
|
|
.job-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
.job-header strong {
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
.job-card p {
|
|
margin: var(--space-2) 0;
|
|
}
|
|
.job-numbers {
|
|
display: flex;
|
|
gap: var(--space-4);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
margin: var(--space-3) 0;
|
|
}
|
|
.job-numbers b {
|
|
font-size: 14px;
|
|
color: var(--ink);
|
|
font-weight: 500;
|
|
margin-left: var(--space-1);
|
|
}
|
|
.job-card .inline-actions {
|
|
margin-top: var(--space-3);
|
|
}
|
|
.error-text {
|
|
color: #d14642;
|
|
font-size: 12px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
.detail-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--space-3);
|
|
margin-bottom: var(--space-4);
|
|
align-items: center;
|
|
}
|
|
.detail-title h2 {
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.detail-section {
|
|
padding: var(--space-3) 0;
|
|
}
|
|
.detail-section .semi-descriptions {
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
.detail-section .semi-descriptions-item {
|
|
font-size: 13px;
|
|
}
|
|
.code-block {
|
|
white-space: pre-wrap;
|
|
overflow-wrap: anywhere;
|
|
border: 1px solid var(--line);
|
|
background: var(--canvas);
|
|
padding: var(--space-3);
|
|
border-radius: 6px;
|
|
color: var(--ink);
|
|
font-size: 12px;
|
|
line-height: 1.7;
|
|
max-height: 500px;
|
|
overflow: auto;
|
|
}
|
|
.check-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: var(--space-4);
|
|
padding: var(--space-2) 0;
|
|
border-bottom: 1px solid var(--line);
|
|
font-size: 12px;
|
|
align-items: center;
|
|
}
|
|
.check-row > span:first-child {
|
|
flex: 1;
|
|
}
|
|
.detail-save {
|
|
margin-top: var(--space-4);
|
|
}
|
|
.section-toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.pnl-chart {
|
|
width: 100%;
|
|
height: auto;
|
|
max-height: 352px;
|
|
margin-top: var(--space-4);
|
|
}
|
|
.pnl-chart text {
|
|
font: 10px system-ui;
|
|
fill: var(--muted);
|
|
}
|
|
.chart-empty {
|
|
padding: 48px;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
}
|
|
.login-page {
|
|
min-height: 100dvh;
|
|
display: grid;
|
|
place-items: center;
|
|
background: var(--surface);
|
|
padding: 24px;
|
|
}
|
|
.login-form-shell {
|
|
width: 100%;
|
|
max-width: 360px;
|
|
}
|
|
.login-brand {
|
|
color: var(--accent);
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
margin-bottom: 24px;
|
|
}
|
|
.login-form h2 {
|
|
font-size: 24px;
|
|
margin-bottom: var(--space-2);
|
|
}
|
|
.login-form > p {
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
margin-bottom: 24px;
|
|
}
|
|
.login-form label {
|
|
margin-bottom: var(--space-4);
|
|
}
|
|
.login-note {
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
text-align: center;
|
|
margin-top: var(--space-4);
|
|
}
|
|
.semi-sidesheet-inner {
|
|
max-width: 100vw;
|
|
}
|
|
.semi-tabs-content {
|
|
padding-top: var(--space-2);
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.profile-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.profile-grid > div {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.permission-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.permission-list li {
|
|
padding: var(--space-1) 0;
|
|
}
|
|
.advanced-grid {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
.preferences-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.account-counts > div {
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
}
|
|
}
|
|
@media (max-width: 760px) {
|
|
.page-content {
|
|
padding: var(--space-3);
|
|
}
|
|
h1 {
|
|
font-size: 20px;
|
|
}
|
|
.page-heading {
|
|
align-items: flex-start;
|
|
flex-wrap: wrap;
|
|
}
|
|
.primary-filters {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.primary-filters > .semi-input-wrapper {
|
|
grid-column: 1/-1;
|
|
min-width: 0;
|
|
}
|
|
.primary-filters > .semi-select {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
.filter-panel {
|
|
min-height: 116px;
|
|
}
|
|
.advanced-grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.table-toolbar {
|
|
padding: var(--space-2);
|
|
}
|
|
.table-toolbar > .inline-actions {
|
|
gap: var(--space-1);
|
|
}
|
|
.table-toolbar .semi-select {
|
|
min-width: 80px;
|
|
}
|
|
.table-pagination {
|
|
padding: var(--space-2);
|
|
flex-wrap: wrap;
|
|
}
|
|
.table-pagination > .muted {
|
|
display: none;
|
|
}
|
|
.table-pagination > .semi-page {
|
|
margin-left: auto;
|
|
}
|
|
.table-pagination .semi-page-item {
|
|
min-width: 28px;
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
.account-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
.account-counts {
|
|
grid-template-columns: 1fr 1fr;
|
|
row-gap: var(--space-3);
|
|
}
|
|
.account-counts > div:nth-child(2) {
|
|
border: 0;
|
|
}
|
|
.account-counts strong {
|
|
font-size: 20px;
|
|
}
|
|
.permission-list {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
.credentials-grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 0;
|
|
}
|
|
.preferences-form {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
.preferences-form > .semi-button {
|
|
align-self: flex-start;
|
|
}
|
|
.detail-title {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
.session-summary {
|
|
width: 100%;
|
|
flex-direction: row;
|
|
gap: var(--space-3);
|
|
}
|
|
}
|
|
|
|
/* The sheet header and tab bar stay outside the single scrolling flex child. */
|
|
.alpha-detail .semi-sidesheet-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
.alpha-detail .detail-title {
|
|
flex-shrink: 0;
|
|
margin-bottom: 8px;
|
|
}
|
|
.alpha-detail-tabs {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
min-height: 0;
|
|
min-width: 0;
|
|
}
|
|
.alpha-detail-tabs > .semi-tabs-bar {
|
|
flex-shrink: 0;
|
|
}
|
|
.alpha-detail-tabs > .semi-tabs-content {
|
|
flex: 1;
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
padding-top: 12px;
|
|
}
|
|
.alpha-detail .detail-section {
|
|
padding: 8px 0;
|
|
}
|
|
.alpha-detail h3 {
|
|
margin: 8px 0;
|
|
}
|
|
.alpha-detail h4 {
|
|
margin: 6px 0;
|
|
}
|
|
.alpha-detail label {
|
|
margin-bottom: 8px;
|
|
}
|
|
.alpha-detail .semi-divider-horizontal {
|
|
margin: 16px 0;
|
|
}
|
|
/* Container queries follow the available drawer width, including chat offsets. */
|
|
.detail-field-container {
|
|
container-type: inline-size;
|
|
min-width: 0;
|
|
}
|
|
.detail-field-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 8px 24px;
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: left;
|
|
}
|
|
.detail-field {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
|
|
align-items: start;
|
|
gap: 12px;
|
|
min-width: 0;
|
|
}
|
|
.detail-field-grid dt,
|
|
.detail-field-grid dd {
|
|
min-width: 0;
|
|
margin: 0;
|
|
overflow-wrap: anywhere;
|
|
font-size: 13px;
|
|
line-height: 20px;
|
|
text-align: left;
|
|
}
|
|
.detail-field > dt {
|
|
color: var(--muted);
|
|
}
|
|
.detail-field-group {
|
|
grid-column: 1 / -1;
|
|
min-width: 0;
|
|
border-top: 1px solid var(--line);
|
|
padding-top: 12px;
|
|
margin-top: 4px;
|
|
}
|
|
.detail-field-group > dt {
|
|
margin-bottom: 8px;
|
|
font-weight: 500;
|
|
color: var(--ink);
|
|
}
|
|
.detail-field-group .detail-field-group {
|
|
border-left: 2px solid var(--line);
|
|
padding-left: 12px;
|
|
}
|
|
@container (max-width: 760px) {
|
|
.detail-field-grid {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@container (max-width: 480px) {
|
|
.detail-field-grid {
|
|
grid-template-columns: minmax(0, 1fr);
|
|
}
|
|
}
|