2193 lines
39 KiB
CSS
2193 lines
39 KiB
CSS
.subPageLayout {
|
|
display: grid;
|
|
grid-template-columns: 220px minmax(0, 1fr);
|
|
gap: 18px;
|
|
align-items: start;
|
|
}
|
|
|
|
.subPageContent {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sideTabs {
|
|
position: sticky;
|
|
top: 88px;
|
|
display: grid;
|
|
gap: 6px;
|
|
padding: 8px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: rgba(255, 255, 255, 0.72);
|
|
}
|
|
|
|
.sideTabs .shTab {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.modelsPage {
|
|
display: grid;
|
|
grid-template-columns: 246px minmax(0, 1fr);
|
|
gap: 22px;
|
|
align-items: start;
|
|
}
|
|
|
|
.modelFilters {
|
|
position: sticky;
|
|
top: 88px;
|
|
display: grid;
|
|
gap: 22px;
|
|
padding-right: 18px;
|
|
border-right: 1px solid var(--border);
|
|
}
|
|
|
|
.filterGroup {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.filterGroup h3 {
|
|
color: #1f2937;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.filterChips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.filterChip {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
min-height: 28px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
color: var(--text-normal);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.filterChip em {
|
|
color: var(--text-soft);
|
|
font-size: 0.6875rem;
|
|
font-style: normal;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.filterChipIcon {
|
|
display: grid;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex: 0 0 18px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
background: var(--surface-subtle);
|
|
color: var(--text-soft);
|
|
font-size: 0.5625rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
.filterChipIcon img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.filterChip[data-active="true"] {
|
|
border-color: var(--primary);
|
|
background: var(--primary);
|
|
color: #fff;
|
|
}
|
|
|
|
.filterChip[data-active="true"] em {
|
|
color: rgba(255, 255, 255, 0.76);
|
|
}
|
|
|
|
.filterChip[data-active="true"] .filterChipIcon {
|
|
background: rgba(255, 255, 255, 0.18);
|
|
color: #fff;
|
|
}
|
|
|
|
.modelsContent {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 14px;
|
|
}
|
|
|
|
.modelsToolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 16px;
|
|
}
|
|
|
|
.modelsToolbar p {
|
|
margin-right: auto;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-base);
|
|
}
|
|
|
|
.searchField {
|
|
display: grid;
|
|
width: min(420px, 100%);
|
|
grid-template-columns: 34px minmax(0, 1fr);
|
|
align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: 999px;
|
|
background: #fff;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.searchField.modelHeaderSearch {
|
|
width: min(520px, 42vw);
|
|
}
|
|
|
|
.searchField svg {
|
|
margin-left: 12px;
|
|
}
|
|
|
|
.searchField .shInput {
|
|
border: 0;
|
|
border-radius: 999px;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.providerLogo,
|
|
.modelIcon {
|
|
display: grid;
|
|
width: 42px;
|
|
height: 42px;
|
|
place-items: center;
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
color: var(--text-strong);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.modelIconImage {
|
|
overflow: hidden;
|
|
padding: 7px;
|
|
}
|
|
|
|
.modelIconImage img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.modelCards {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(260px, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.modelCard .shCardContent {
|
|
display: grid;
|
|
align-content: start;
|
|
min-height: 265px;
|
|
gap: 10px;
|
|
padding: 14px;
|
|
}
|
|
|
|
.modelCardTop {
|
|
display: grid;
|
|
grid-template-columns: 38px minmax(0, 1fr);
|
|
gap: 10px;
|
|
align-items: start;
|
|
}
|
|
|
|
.modelCardTop .modelIcon {
|
|
width: 38px;
|
|
height: 38px;
|
|
}
|
|
|
|
.modelCardTop .modelIconImage {
|
|
padding: 6px;
|
|
}
|
|
|
|
.modelCardHeaderText {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.modelCardTop strong {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modelCardIntro {
|
|
display: grid;
|
|
align-content: start;
|
|
gap: 7px;
|
|
}
|
|
|
|
.modelCardDescription {
|
|
display: -webkit-box;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: var(--text-soft);
|
|
line-height: 1.48;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 2;
|
|
}
|
|
|
|
.modelTags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
gap: 5px;
|
|
}
|
|
|
|
.modelTags span {
|
|
flex: 0 0 auto;
|
|
padding: 2px 6px;
|
|
border: 1px solid rgba(37, 99, 235, 0.32);
|
|
border-radius: 6px;
|
|
background: rgba(37, 99, 235, 0.06);
|
|
color: #1d4ed8;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.modelTags span:nth-child(4n + 2) {
|
|
border-color: rgba(5, 150, 105, 0.32);
|
|
background: rgba(5, 150, 105, 0.07);
|
|
color: #047857;
|
|
}
|
|
|
|
.modelTags span:nth-child(4n + 3) {
|
|
border-color: rgba(124, 58, 237, 0.32);
|
|
background: rgba(124, 58, 237, 0.07);
|
|
color: #6d28d9;
|
|
}
|
|
|
|
.modelTags span:nth-child(4n + 4) {
|
|
border-color: rgba(217, 119, 6, 0.32);
|
|
background: rgba(217, 119, 6, 0.07);
|
|
color: #b45309;
|
|
}
|
|
|
|
.modelCardFacts {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.55fr);
|
|
gap: 7px 10px;
|
|
margin: 0;
|
|
padding: 0.625rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.modelCardFacts div {
|
|
min-width: 0;
|
|
}
|
|
|
|
.modelCardFacts dt {
|
|
margin-bottom: 2px;
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.modelCardFacts dd {
|
|
margin: 0;
|
|
color: var(--text-normal);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: 1.35;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.modelCardFactRateLimit dd {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-break: normal;
|
|
}
|
|
|
|
.modelCardFacts .modelCardFactFull {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.modelPermissionTags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.1875rem;
|
|
}
|
|
|
|
.modelPermissionTag {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
gap: 0.1875rem;
|
|
padding: 0.0625rem 0.3125rem;
|
|
border-radius: 999rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.modelPermissionTag span {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modelPermissionTagAllow {
|
|
background: rgba(5, 150, 105, 0.1);
|
|
color: #047857;
|
|
}
|
|
|
|
.modelPermissionTagDeny {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.modelPermissionIcon {
|
|
width: 0.625rem;
|
|
height: 0.625rem;
|
|
flex: 0 0 auto;
|
|
stroke-width: 2.5;
|
|
}
|
|
|
|
.providerToolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
}
|
|
|
|
.providerToolbar p {
|
|
margin: 0;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.inlineActions {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.identityHeaderTitle {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.identityHeaderTitle > div:nth-child(2) {
|
|
min-width: 0;
|
|
}
|
|
|
|
.identityDataTable {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 10px;
|
|
background: var(--surface);
|
|
}
|
|
|
|
.identityDataTable .shTableRow {
|
|
align-items: center;
|
|
}
|
|
|
|
.accessGroupToolbar,
|
|
.accessGroupHint {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.accessGroupToolbar {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.accessGroupToolbar label {
|
|
width: min(320px, 100%);
|
|
}
|
|
|
|
.accessGroupHint {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.accessPermissionGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.accessEditorStack {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.accessPermissionPanel .shCardContent {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.accessTreeToolbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(180px, 1fr) repeat(5, auto);
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.accessTreeBox {
|
|
display: grid;
|
|
align-content: start;
|
|
min-height: 520px;
|
|
max-height: min(680px, calc(100vh - 300px));
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
padding: 10px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface-subtle);
|
|
scrollbar-width: none;
|
|
contain: layout paint;
|
|
}
|
|
|
|
.accessTreeBox::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.accessTreeNode {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.accessTreeRow {
|
|
display: grid;
|
|
grid-template-columns: 24px 22px minmax(0, 1fr) auto;
|
|
align-items: center;
|
|
min-height: 34px;
|
|
gap: 6px;
|
|
padding: 2px 6px;
|
|
border-radius: var(--radius-sm);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.accessTreeRow:hover {
|
|
background: var(--surface);
|
|
}
|
|
|
|
.accessTreeRow > span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.accessTreeExpand {
|
|
display: grid;
|
|
width: 22px;
|
|
height: 22px;
|
|
place-items: center;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-foreground);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.accessTreeChildren {
|
|
display: grid;
|
|
margin-left: 28px;
|
|
}
|
|
|
|
.accessTreeModel {
|
|
grid-template-columns: 24px 22px minmax(0, 1fr);
|
|
}
|
|
|
|
.accessTreeEmpty {
|
|
padding: 24px;
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.accessRuleSummary span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 6px 9px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface-subtle);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.accessRuleTable .shTableRow {
|
|
grid-template-columns: minmax(200px, 1.2fr) minmax(220px, 1.35fr) minmax(82px, 0.45fr) minmax(110px, 0.7fr) minmax(82px, 0.45fr) minmax(150px, 0.9fr);
|
|
min-width: 900px;
|
|
}
|
|
|
|
.apiKeyTable {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: var(--radius-md);
|
|
background: var(--surface);
|
|
}
|
|
|
|
.apiKeyTable .shTableRow {
|
|
grid-template-columns: minmax(170px, 1.05fr) minmax(210px, 1.25fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(150px, 0.9fr) minmax(96px, 0.55fr) minmax(150px, 0.9fr) minmax(74px, 0.4fr);
|
|
min-width: 1160px;
|
|
align-items: center;
|
|
}
|
|
|
|
.apiKeyNameCell,
|
|
.apiKeySecretCell {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.apiKeyNameCell strong,
|
|
.apiKeyNameCell small,
|
|
.apiKeySecretCell code {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.apiKeyNameCell strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.apiKeyNameCell small {
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.apiKeySecretCell {
|
|
grid-template-columns: minmax(0, 1fr) 30px;
|
|
align-items: center;
|
|
}
|
|
|
|
.apiKeySecretCell code {
|
|
min-width: 0;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-mono);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.apiKeyPolicyButton {
|
|
display: inline-flex;
|
|
max-width: 100%;
|
|
min-height: 30px;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0 9px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--control-radius);
|
|
background: var(--surface);
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.apiKeyPolicyButton span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.apiKeyCreateDialogBody {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.apiKeyPolicyDialog {
|
|
width: min(1120px, 100%);
|
|
}
|
|
|
|
.apiKeyPolicyDialogBody {
|
|
grid-template-columns: 1fr;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.apiKeyPolicyDialog .accessTreeBox {
|
|
min-height: 360px;
|
|
max-height: min(480px, calc(100vh - 360px));
|
|
}
|
|
|
|
.tenantTable .shTableRow {
|
|
grid-template-columns: minmax(210px, 1.35fr) minmax(110px, 0.7fr) minmax(150px, 0.9fr) minmax(110px, 0.7fr) minmax(90px, 0.55fr) minmax(86px, 0.5fr);
|
|
min-width: 880px;
|
|
}
|
|
|
|
.userTable .shTableRow {
|
|
grid-template-columns: minmax(210px, 1.25fr) minmax(100px, 0.55fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(120px, 0.65fr) minmax(100px, 0.55fr) minmax(88px, 0.5fr) minmax(112px, 0.6fr);
|
|
min-width: 1120px;
|
|
}
|
|
|
|
.groupTable .shTableRow {
|
|
grid-template-columns: minmax(210px, 1.25fr) minmax(100px, 0.55fr) minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(100px, 0.55fr) minmax(88px, 0.5fr) minmax(86px, 0.5fr);
|
|
min-width: 980px;
|
|
}
|
|
|
|
.auditLogTable .shTableRow {
|
|
grid-template-columns: minmax(150px, 0.9fr) minmax(140px, 0.8fr) minmax(140px, 0.8fr) minmax(260px, 1.4fr) minmax(160px, 0.9fr);
|
|
min-width: 920px;
|
|
}
|
|
|
|
.identityTableName {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.identityTableName strong,
|
|
.identityTableName small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.identityTableName strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.identityTableName small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.identityDialog {
|
|
width: min(820px, 100%);
|
|
}
|
|
|
|
.formMessage {
|
|
margin-top: 12px;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-medium);
|
|
}
|
|
|
|
.providerCatalogGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.providerCatalogCard {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr) auto;
|
|
gap: 14px;
|
|
align-items: center;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.providerCatalogLogo {
|
|
display: grid;
|
|
width: 54px;
|
|
height: 54px;
|
|
place-items: center;
|
|
overflow: hidden;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 10px;
|
|
background: var(--surface-subtle);
|
|
color: var(--text-strong);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.providerCatalogLogo img {
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 8px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.providerCatalogBody {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 9px;
|
|
}
|
|
|
|
.providerCatalogBody strong,
|
|
.providerCatalogBody span {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.providerCatalogBody span,
|
|
.providerCatalogMeta {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.providerCatalogMeta,
|
|
.providerCatalogActions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.providerCatalogActions {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.modelCatalogFilters {
|
|
display: grid;
|
|
grid-template-columns: minmax(260px, 1fr) minmax(160px, 220px) minmax(160px, 220px);
|
|
gap: 10px;
|
|
margin-top: 14px;
|
|
}
|
|
|
|
.baseModelGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.baseModelCard {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr);
|
|
gap: 14px;
|
|
min-height: 184px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.baseModelCardBody {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.baseModelCardBody strong,
|
|
.baseModelCardBody span {
|
|
display: block;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.baseModelCardBody > div:first-child span {
|
|
margin-top: 4px;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.baseModelCard .providerCatalogActions {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.modelAbilityChips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
}
|
|
|
|
.modelAbilityChips span {
|
|
padding: 4px 7px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 999px;
|
|
background: var(--surface-subtle);
|
|
color: #4b5563;
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.baseModelDialog {
|
|
width: min(900px, 100%);
|
|
}
|
|
|
|
.baseModelTypePicker {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
|
|
gap: 8px;
|
|
}
|
|
|
|
.baseModelTypeOption {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 34px;
|
|
padding: 7px 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
background: var(--surface);
|
|
color: var(--text);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.baseModelTypeOption small {
|
|
margin-left: auto;
|
|
color: var(--text-muted);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.baseModelForm textarea {
|
|
min-height: 124px;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.platformCard {
|
|
display: grid;
|
|
grid-template-columns: 54px minmax(0, 1fr);
|
|
gap: 14px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformCardBody {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 10px;
|
|
}
|
|
|
|
.platformCardBody strong,
|
|
.platformCardBody span,
|
|
.platformCardBody p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformCardBody > div:first-child span,
|
|
.platformCardBody p {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformCardBody p {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0;
|
|
}
|
|
|
|
.platformViewTabs {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
margin-bottom: 14px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.platformViewTabs button {
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-sm);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.platformViewTabs button[data-active="true"] {
|
|
background: #fff;
|
|
color: var(--text-strong);
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
|
|
}
|
|
|
|
.platformDataTable {
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformDataTable .shTableRow {
|
|
grid-template-columns: minmax(210px, 1.3fr) minmax(120px, 0.7fr) minmax(150px, 0.9fr) minmax(92px, 0.45fr) minmax(160px, 0.9fr) minmax(76px, 0.4fr) minmax(150px, 0.85fr) minmax(86px, 0.45fr);
|
|
min-width: 1040px;
|
|
}
|
|
|
|
.platformModelView .platformDataTable .shTableRow {
|
|
grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(100px, 0.6fr) minmax(170px, 0.9fr) minmax(120px, 0.7fr) minmax(90px, 0.6fr);
|
|
min-width: 920px;
|
|
}
|
|
|
|
.platformTableName {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.platformTableName strong,
|
|
.platformTableName small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformTableName strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.platformTableName small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.platformStatusCell {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 6px;
|
|
}
|
|
|
|
.platformStatusCell strong,
|
|
.platformStatusCell small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformStatusCell small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.platformStatusToggle {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.tableActions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.tableActions .shButtonIcon {
|
|
width: 30px;
|
|
min-height: 30px;
|
|
}
|
|
|
|
.platformModelView {
|
|
display: grid;
|
|
gap: 12px;
|
|
}
|
|
|
|
.platformLimitView {
|
|
display: grid;
|
|
grid-template-rows: auto minmax(0, 1fr);
|
|
gap: 10px;
|
|
min-height: 0;
|
|
max-height: calc(100dvh - 220px);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.platformLimitHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.platformLimitHeader span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
color: var(--text-strong);
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.platformLimitTableViewport {
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: calc(100dvh - 270px);
|
|
overflow: auto;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
overscroll-behavior: contain;
|
|
}
|
|
|
|
.platformLimitTable {
|
|
width: max-content;
|
|
min-width: 100%;
|
|
overflow: visible;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.platformLimitTable .shTableHeader {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
.platformLimitTable .shTableRow {
|
|
grid-template-columns: minmax(180px, 1.1fr) minmax(160px, 0.9fr) 160px 132px 150px 170px 140px 132px;
|
|
min-width: 1224px;
|
|
}
|
|
|
|
.platformLimitTable .shTableHead,
|
|
.platformLimitTable .shTableCell {
|
|
display: grid;
|
|
align-content: center;
|
|
min-height: 68px;
|
|
padding-right: 10px;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.platformLimitTable .shTableHead {
|
|
min-height: 74px;
|
|
}
|
|
|
|
.platformLimitMetricHead {
|
|
display: grid;
|
|
align-content: center;
|
|
gap: 3px;
|
|
white-space: normal;
|
|
}
|
|
|
|
.platformLimitMetricHead small {
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-medium);
|
|
line-height: 1.2;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformLimitNumberHead,
|
|
.platformLimitNumberCell {
|
|
justify-items: start;
|
|
}
|
|
|
|
.platformLimitStatusHead,
|
|
.platformLimitStatusCell {
|
|
justify-items: start;
|
|
}
|
|
|
|
.rateMetricCell,
|
|
.rateLoadCell {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
width: 100%;
|
|
align-content: start;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.rateMetricCell strong,
|
|
.rateLoadCell strong {
|
|
color: var(--text-strong);
|
|
font-size: var(--font-size-sm);
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.rateMetricCell small {
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.rateLoadTrack {
|
|
display: block;
|
|
height: 6px;
|
|
width: min(112px, 100%);
|
|
overflow: hidden;
|
|
border-radius: 999px;
|
|
background: #eef2f6;
|
|
}
|
|
|
|
.rateLoadTrack i {
|
|
display: block;
|
|
height: 100%;
|
|
border-radius: inherit;
|
|
background: #0f766e;
|
|
}
|
|
|
|
.rateLoadCell[data-overloaded="true"] strong {
|
|
color: var(--destructive);
|
|
}
|
|
|
|
.rateLoadCell[data-overloaded="true"] .rateLoadTrack {
|
|
background: #fee2e2;
|
|
}
|
|
|
|
.rateLoadCell[data-overloaded="true"] .rateLoadTrack i {
|
|
background: var(--destructive);
|
|
}
|
|
|
|
.platformPriorityCell {
|
|
display: grid;
|
|
width: 100%;
|
|
min-width: 0;
|
|
gap: 7px;
|
|
align-content: start;
|
|
}
|
|
|
|
.platformPriorityCell .rateMetricCell small {
|
|
overflow: visible;
|
|
line-height: 1.35;
|
|
text-overflow: clip;
|
|
white-space: normal;
|
|
}
|
|
|
|
.priorityDemotionTrigger {
|
|
display: grid;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
cursor: default;
|
|
text-align: left;
|
|
font: inherit;
|
|
}
|
|
|
|
.priorityAdjustButton {
|
|
justify-self: start;
|
|
min-height: 22px;
|
|
padding-inline: 8px;
|
|
border-color: var(--border);
|
|
color: var(--text-normal);
|
|
background: #fff;
|
|
}
|
|
|
|
.priorityDemotionAntPopover {
|
|
z-index: 1200;
|
|
}
|
|
|
|
.priorityDemotionPopover {
|
|
display: grid;
|
|
width: min(36rem, calc(100vw - 2rem));
|
|
gap: 0.6rem;
|
|
}
|
|
|
|
.priorityDemotionHeader,
|
|
.priorityDemotionItemHeader {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.priorityDemotionHeader {
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.priorityDemotionHeader strong,
|
|
.priorityDemotionItemHeader strong {
|
|
min-width: 0;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.priorityDemotionItem {
|
|
display: grid;
|
|
gap: 0.35rem;
|
|
padding-bottom: 0.6rem;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
.priorityDemotionItem:last-child {
|
|
padding-bottom: 0;
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.priorityDemotionItem small,
|
|
.priorityDemotionEmpty {
|
|
color: var(--text-soft);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.priorityDemotionError {
|
|
color: var(--destructive);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.45;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.platformPriorityDialog {
|
|
width: min(30rem, calc(100vw - 2rem));
|
|
}
|
|
|
|
.platformPriorityDialogBody {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.platformPriorityDialogSummary,
|
|
.platformPriorityDialogMetrics {
|
|
display: flex;
|
|
min-width: 0;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.platformPriorityDialogSummary {
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.platformPriorityDialogSummary span {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 3px;
|
|
}
|
|
|
|
.platformPriorityDialogSummary span:last-child {
|
|
justify-items: end;
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.platformPriorityDialogSummary strong {
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.platformPriorityDialogSummary small,
|
|
.platformPriorityDialogMetrics {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
}
|
|
|
|
.platformModelToolbar {
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 0.6fr) minmax(260px, 1fr);
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 10px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.platformEmptyState {
|
|
display: grid;
|
|
min-height: 260px;
|
|
place-items: center;
|
|
gap: 12px;
|
|
padding: 30px;
|
|
border: 1px dashed #dce2ea;
|
|
border-radius: 10px;
|
|
background: var(--surface-subtle);
|
|
color: var(--muted-foreground);
|
|
text-align: center;
|
|
}
|
|
|
|
.platformEmptyState strong {
|
|
color: var(--text-strong);
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.platformEmptyState span {
|
|
max-width: 460px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.platformEmptyIcon {
|
|
display: grid;
|
|
width: 58px;
|
|
height: 58px;
|
|
place-items: center;
|
|
border: 1px solid #e6ebf1;
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.platformModelList {
|
|
display: grid;
|
|
gap: 8px;
|
|
}
|
|
|
|
.platformModelRow {
|
|
display: grid;
|
|
grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) auto minmax(120px, 0.8fr);
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-height: 48px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformModelRow span {
|
|
overflow: hidden;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformDialog {
|
|
width: min(1040px, 100%);
|
|
}
|
|
|
|
.platformDialogBody {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.platformFormSection {
|
|
display: grid;
|
|
gap: 14px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformFormSection header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--text-strong);
|
|
}
|
|
|
|
.platformSectionGrid {
|
|
display: grid;
|
|
align-items: start;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.platformSectionGrid > .shLabel {
|
|
align-content: start;
|
|
}
|
|
|
|
.platformToggle,
|
|
.platformReadonlyField {
|
|
min-height: 40px;
|
|
border: 1px solid var(--input);
|
|
border-radius: 7px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformToggle {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 8px 11px;
|
|
}
|
|
|
|
.platformToggle input {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--text-strong);
|
|
}
|
|
|
|
.platformToggle span {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.platformToggle strong {
|
|
color: var(--text-normal);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.platformToggle small {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformReadonlyField {
|
|
display: grid;
|
|
place-items: center start;
|
|
padding: 0 11px;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.platformProxyStatus {
|
|
margin: 10px 0 0;
|
|
color: var(--text-normal);
|
|
font-size: 0.8125rem;
|
|
font-weight: var(--font-weight-semibold);
|
|
word-break: break-all;
|
|
}
|
|
|
|
.platformCredentialField {
|
|
gap: 6px;
|
|
}
|
|
|
|
.platformCredentialLabel {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.platformCredentialLabel code {
|
|
max-width: min(260px, 58%);
|
|
overflow: hidden;
|
|
color: var(--text-normal);
|
|
font-family: var(--font-sans);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-medium);
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformCredentialField small {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
font-weight: var(--font-weight-normal);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.platformTogglePair,
|
|
.platformModelPolicy,
|
|
.platformModelSelector {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.platformModelPolicy {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
padding: 12px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.platformModelSelectorHeader {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 12px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformModelSelectorHeader > div {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.platformModelSelectorHeader strong {
|
|
color: var(--text-strong);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
.platformModelSelectorHeader span {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformSegmented {
|
|
display: inline-flex;
|
|
width: fit-content;
|
|
gap: 4px;
|
|
padding: 4px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--surface-muted);
|
|
}
|
|
|
|
.platformSegmented button {
|
|
min-height: 32px;
|
|
padding: 0 12px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: #667085;
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.platformSegmented button.active {
|
|
background: #fff;
|
|
color: var(--text-strong);
|
|
box-shadow: 0 1px 2px rgba(16, 24, 40, 0.07);
|
|
}
|
|
|
|
.platformModelChoices {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 0.625rem;
|
|
max-height: 19.375rem;
|
|
overflow: auto;
|
|
}
|
|
|
|
.platformModelChoices[data-disabled="true"] {
|
|
opacity: 0.82;
|
|
}
|
|
|
|
.platformModelChoice {
|
|
display: grid;
|
|
grid-template-columns: minmax(10rem, 1fr) minmax(14rem, 1.4fr) auto;
|
|
gap: 0.625rem;
|
|
align-items: center;
|
|
padding: 0.75rem;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 0.5rem;
|
|
background: #fff;
|
|
}
|
|
|
|
.platformModelChoiceMain {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
gap: 0.625rem;
|
|
align-items: start;
|
|
min-width: 0;
|
|
}
|
|
|
|
.platformModelChoice input {
|
|
margin-top: 0.1875rem;
|
|
accent-color: var(--text-strong);
|
|
}
|
|
|
|
.platformModelChoiceFields {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) 5.5rem;
|
|
gap: 0.5rem;
|
|
align-items: end;
|
|
min-width: 0;
|
|
}
|
|
|
|
.platformModelChoiceFields label {
|
|
gap: 0.25rem;
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
min-width: 0;
|
|
}
|
|
|
|
.platformModelChoiceFields .shInput {
|
|
margin-top: 0;
|
|
min-height: 2rem;
|
|
padding: 0 0.5625rem;
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformModelChoiceMain span {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 0.25rem;
|
|
}
|
|
|
|
.platformModelChoiceMain strong,
|
|
.platformModelChoiceMain small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.platformModelChoiceMain small,
|
|
.platformModelEmpty {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.platformModelEmpty {
|
|
padding: 14px;
|
|
border: 1px dashed #dce2ea;
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.modelPickerBackdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 70;
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background: rgba(15, 23, 42, 0.32);
|
|
}
|
|
|
|
.modelPickerDialog {
|
|
display: grid;
|
|
grid-template-rows: auto auto minmax(0, 1fr) auto;
|
|
width: min(920px, 100%);
|
|
max-height: min(760px, calc(100vh - 48px));
|
|
overflow: hidden;
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.modelPickerHeader,
|
|
.modelPickerActions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
}
|
|
|
|
.modelPickerHeader > div {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.modelPickerHeader strong {
|
|
color: var(--text-strong);
|
|
font-size: 0.9375rem;
|
|
}
|
|
|
|
.modelPickerHeader span {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.modelPickerToolbar {
|
|
display: grid;
|
|
grid-template-columns: 180px minmax(0, 1fr) auto;
|
|
gap: 12px;
|
|
align-items: end;
|
|
padding: 14px 16px;
|
|
border-bottom: 1px solid var(--border-subtle);
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.modelPickerSearch > div {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr);
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: 36px;
|
|
padding: 0 10px;
|
|
border: 1px solid var(--input);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.modelPickerSearch .shInput {
|
|
min-height: 32px;
|
|
padding: 0;
|
|
border: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.modelPickerList {
|
|
display: grid;
|
|
gap: 8px;
|
|
align-content: start;
|
|
overflow: auto;
|
|
padding: 14px 16px;
|
|
}
|
|
|
|
.modelPickerItem {
|
|
display: grid;
|
|
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
gap: 10px;
|
|
align-items: center;
|
|
min-height: 52px;
|
|
padding: 10px 12px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.modelPickerItem input {
|
|
width: 16px;
|
|
height: 16px;
|
|
accent-color: var(--text-strong);
|
|
}
|
|
|
|
.modelPickerItem span {
|
|
display: grid;
|
|
min-width: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.modelPickerItem strong,
|
|
.modelPickerItem small {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.modelPickerItem strong {
|
|
color: var(--text-strong);
|
|
font-size: 0.8125rem;
|
|
}
|
|
|
|
.modelPickerItem small {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.modelPickerActions {
|
|
justify-content: flex-end;
|
|
border-top: 1px solid var(--border-subtle);
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.runtimePolicyGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.runtimePolicyCard {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.runtimePolicyCard header,
|
|
.runtimePolicyCard footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.runtimePolicyCard header > div:nth-child(2) {
|
|
display: grid;
|
|
min-width: 0;
|
|
flex: 1;
|
|
gap: 3px;
|
|
}
|
|
|
|
.runtimePolicyCard strong,
|
|
.runtimePolicyCard span,
|
|
.runtimePolicyCard p {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.runtimePolicyCard header span,
|
|
.runtimePolicyCard p {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.runtimePolicySummary {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.runtimePolicySummary span {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 7px 9px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: var(--surface-subtle);
|
|
color: var(--text-normal);
|
|
font-size: 0.75rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.runtimePolicyCard footer {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.fileStoragePanel {
|
|
display: grid;
|
|
gap: 14px;
|
|
}
|
|
|
|
.fileStorageToolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.fileStorageSettingsCard {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) auto;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.fileStorageSettingsCard > div {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.fileStorageSettingsCard > label {
|
|
min-width: 0;
|
|
}
|
|
|
|
.fileStorageToolbar > div {
|
|
display: grid;
|
|
gap: 3px;
|
|
}
|
|
|
|
.fileStorageToolbar strong {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.fileStorageToolbar span,
|
|
.fileStorageSettingsCard span,
|
|
.fileStorageMeta span {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.fileStorageGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
}
|
|
|
|
.fileStorageCard {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 16px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.fileStorageCard header,
|
|
.fileStorageCard footer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.fileStorageCard header > div:nth-child(2) {
|
|
display: grid;
|
|
min-width: 0;
|
|
flex: 1;
|
|
gap: 3px;
|
|
}
|
|
|
|
.fileStorageCard strong,
|
|
.fileStorageCard header span,
|
|
.fileStorageMeta span {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.fileStorageMeta {
|
|
display: grid;
|
|
gap: 7px;
|
|
}
|
|
|
|
.fileStorageMeta span {
|
|
padding: 7px 9px;
|
|
border: 1px solid var(--border-subtle);
|
|
border-radius: 8px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.fileStorageCard footer {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.fileStorageDialogBody {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
}
|
|
|
|
.fileStorageSceneGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.runtimePolicyDialog {
|
|
width: min(980px, 100%);
|
|
}
|
|
|
|
.runtimePolicyFormBody {
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 14px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.runtimePolicySection {
|
|
display: grid;
|
|
gap: 12px;
|
|
padding: 14px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.runtimePolicySection header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
}
|
|
|
|
.runtimePolicySection header span {
|
|
color: var(--muted-foreground);
|
|
font-size: 0.75rem;
|
|
}
|
|
|
|
.runtimePolicyRows {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.runtimeTagInput {
|
|
width: 100%;
|
|
}
|
|
|
|
.runtimeTagInput .ant-select-selector {
|
|
min-height: 2.375rem;
|
|
border-color: var(--border) !important;
|
|
border-radius: 0.5rem !important;
|
|
background: var(--background) !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.runtimeTagInput .ant-select-selection-placeholder {
|
|
color: var(--muted-foreground);
|
|
}
|
|
|
|
.runtimeTagInput .ant-select-selection-item {
|
|
border-color: var(--border);
|
|
border-radius: 999px;
|
|
background: var(--surface-subtle);
|
|
}
|
|
|
|
.runtimeFieldHint {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-regular);
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.runnerPolicyForm {
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
.runnerPolicyHeaderText {
|
|
min-width: 0;
|
|
}
|
|
|
|
.runnerPolicyHeaderText .mutedText {
|
|
margin: 4px 0 0;
|
|
}
|
|
|
|
.runnerPolicyHeaderStatus {
|
|
min-width: 220px;
|
|
max-width: 240px;
|
|
}
|
|
|
|
.runnerPolicyWorkbench {
|
|
grid-template-columns: 240px minmax(0, 1fr);
|
|
}
|
|
|
|
.runnerPolicyDetailPanel {
|
|
min-height: 360px;
|
|
}
|
|
|
|
.runnerPolicyDetailRows {
|
|
padding: 8px 10px;
|
|
}
|
|
|
|
.runnerActionMatrix {
|
|
display: grid;
|
|
gap: 10px;
|
|
}
|
|
|
|
.runnerActionIntro {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
}
|
|
|
|
.runnerActionIntro strong {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.runnerActionIntro small,
|
|
.runnerActionGroup small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-regular);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.runnerActionGrid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 10px;
|
|
}
|
|
|
|
.runnerActionGroup {
|
|
display: grid;
|
|
gap: 8px;
|
|
padding: 10px;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: #fff;
|
|
}
|
|
|
|
.runnerActionGroup > span {
|
|
display: grid;
|
|
gap: 2px;
|
|
}
|
|
|
|
.runnerActionGroup strong {
|
|
color: var(--text-normal);
|
|
font-size: var(--font-size-sm);
|
|
}
|
|
|
|
.runnerSupplementalRules {
|
|
display: grid;
|
|
gap: 2px;
|
|
padding-top: 6px;
|
|
}
|
|
|
|
.runnerSupplementalRules strong {
|
|
color: var(--text-normal);
|
|
}
|
|
|
|
.runnerSupplementalRules small {
|
|
color: var(--muted-foreground);
|
|
font-size: var(--font-size-xs);
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.runtimePolicyActions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
@media (max-width: 1180px) {
|
|
.modelCards,
|
|
.providerCatalogGrid,
|
|
.baseModelGrid,
|
|
.runtimePolicyGrid,
|
|
.fileStorageGrid,
|
|
.platformGrid,
|
|
.accessPermissionGrid,
|
|
.platformModelChoices {
|
|
grid-template-columns: repeat(2, minmax(240px, 1fr));
|
|
}
|
|
}
|
|
|
|
@media (max-width: 860px) {
|
|
.runnerPolicyHeader {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.runnerPolicyHeaderStatus {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
|
|
.subPageLayout,
|
|
.modelsPage {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sideTabs,
|
|
.modelFilters {
|
|
position: static;
|
|
}
|
|
|
|
.modelCards,
|
|
.providerCatalogGrid,
|
|
.baseModelGrid,
|
|
.modelCatalogFilters,
|
|
.platformGrid,
|
|
.platformDialogBody,
|
|
.platformSectionGrid,
|
|
.platformModelPolicy,
|
|
.platformModelChoices,
|
|
.platformModelRow,
|
|
.platformModelToolbar,
|
|
.runtimePolicyGrid,
|
|
.fileStorageGrid,
|
|
.fileStorageSettingsCard,
|
|
.fileStorageSceneGrid,
|
|
.runtimePolicyFormBody,
|
|
.fileStorageDialogBody,
|
|
.runtimePolicyRows,
|
|
.runnerActionGrid,
|
|
.accessPermissionGrid,
|
|
.accessTreeToolbar,
|
|
.apiKeyCreateDialogBody,
|
|
.apiKeyPolicyDialogBody {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.runnerActionIntro {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.platformModelChoice {
|
|
grid-template-columns: 1fr auto;
|
|
}
|
|
|
|
.platformModelChoiceFields {
|
|
grid-column: 1 / -1;
|
|
}
|
|
|
|
.providerCatalogCard {
|
|
grid-template-columns: 48px minmax(0, 1fr);
|
|
}
|
|
|
|
.providerToolbar {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.modelsToolbar {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.searchField.modelHeaderSearch {
|
|
width: 100%;
|
|
}
|
|
|
|
.providerCatalogActions {
|
|
grid-column: 1 / -1;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
}
|