fix(ui): apply corner style to remaining controls
This commit is contained in:
80 files changed
+487
-305
No files matched your search
@@ -242,7 +242,7 @@ onUnmounted(() => {
|
||||
.refresh-interval {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
background: var(--color-background);
|
||||
cursor: pointer;
|
||||
@@ -256,7 +256,7 @@ onUnmounted(() => {
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -315,7 +315,7 @@ onUnmounted(() => {
|
||||
padding: 16px;
|
||||
background: var(--color-background-secondary);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -355,7 +355,7 @@ onUnmounted(() => {
|
||||
.broker-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -411,7 +411,7 @@ onUnmounted(() => {
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -555,7 +555,7 @@ watch(
|
||||
min-width: 180px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -590,7 +590,7 @@ watch(
|
||||
overflow: auto;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -640,7 +640,7 @@ td {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -682,7 +682,7 @@ td {
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
padding: 12px;
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
@@ -706,7 +706,7 @@ td {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -759,7 +759,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -819,7 +819,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
|
||||
@@ -586,7 +586,7 @@ watch(topicName, () => {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
@@ -629,7 +629,7 @@ watch(topicName, () => {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -657,7 +657,7 @@ watch(topicName, () => {
|
||||
|
||||
.panel-error {
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
@@ -670,7 +670,7 @@ watch(topicName, () => {
|
||||
|
||||
.results-table-wrap {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@@ -706,7 +706,7 @@ watch(topicName, () => {
|
||||
.btn-primary,
|
||||
.btn-sm {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -750,7 +750,7 @@ watch(topicName, () => {
|
||||
width: min(720px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 64px);
|
||||
overflow: auto;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
@@ -829,7 +829,7 @@ watch(topicName, () => {
|
||||
|
||||
.panel-success {
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
color: var(--color-primary);
|
||||
font-size: 13px;
|
||||
@@ -838,7 +838,7 @@ watch(topicName, () => {
|
||||
.btn-secondary {
|
||||
padding: 7px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -851,7 +851,7 @@ watch(topicName, () => {
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
|
||||
@@ -1059,7 +1059,7 @@ onUnmounted(() => {
|
||||
min-height: 32px;
|
||||
padding: 5px 9px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--monitor-muted);
|
||||
@@ -1087,7 +1087,7 @@ onUnmounted(() => {
|
||||
min-height: 34px;
|
||||
padding: 5px 30px 5px 10px;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: var(--monitor-surface);
|
||||
@@ -1122,7 +1122,7 @@ onUnmounted(() => {
|
||||
min-height: 34px;
|
||||
padding: 7px 12px;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--monitor-surface);
|
||||
color: var(--monitor-text);
|
||||
cursor: pointer;
|
||||
@@ -1210,7 +1210,7 @@ onUnmounted(() => {
|
||||
|
||||
.loading-skeleton-card {
|
||||
height: 96px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.45), transparent), var(--monitor-surface);
|
||||
background-size: 220% 100%;
|
||||
border: 1px solid var(--monitor-border);
|
||||
@@ -1271,7 +1271,7 @@ onUnmounted(() => {
|
||||
min-height: 54px;
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-surface);
|
||||
color: var(--monitor-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
@@ -1297,7 +1297,7 @@ onUnmounted(() => {
|
||||
justify-content: flex-start;
|
||||
margin-top: 10px;
|
||||
border: 1px solid color-mix(in srgb, var(--monitor-danger) 22%, transparent);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
padding: 10px 12px;
|
||||
}
|
||||
|
||||
@@ -1309,7 +1309,7 @@ onUnmounted(() => {
|
||||
|
||||
.kafka-message-row {
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-surface);
|
||||
overflow: hidden;
|
||||
}
|
||||
@@ -1358,7 +1358,7 @@ onUnmounted(() => {
|
||||
min-height: 260px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-surface);
|
||||
box-shadow: var(--monitor-shadow);
|
||||
}
|
||||
@@ -1393,7 +1393,7 @@ onUnmounted(() => {
|
||||
padding: 17px 18px;
|
||||
background: var(--monitor-surface);
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
box-shadow: 0 1px 0 rgb(255 255 255 / 0.52) inset;
|
||||
transition:
|
||||
transform 0.22s cubic-bezier(0.16, 1, 0.3, 1),
|
||||
@@ -1453,7 +1453,7 @@ onUnmounted(() => {
|
||||
height: 42px;
|
||||
flex: 0 0 42px;
|
||||
border: 1px solid var(--monitor-accent-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-accent-soft);
|
||||
color: var(--monitor-accent);
|
||||
}
|
||||
@@ -1498,7 +1498,7 @@ onUnmounted(() => {
|
||||
.partition-table-wrap {
|
||||
overflow-x: auto;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-surface);
|
||||
box-shadow: var(--monitor-shadow);
|
||||
}
|
||||
@@ -1595,7 +1595,7 @@ onUnmounted(() => {
|
||||
.partition-detail {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--monitor-surface);
|
||||
box-shadow: var(--monitor-shadow);
|
||||
}
|
||||
@@ -1624,7 +1624,7 @@ onUnmounted(() => {
|
||||
.empty-state.compact {
|
||||
padding: 16px;
|
||||
border: 1px dashed var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--monitor-surface) 74%, transparent);
|
||||
}
|
||||
|
||||
@@ -1636,7 +1636,7 @@ onUnmounted(() => {
|
||||
padding: 13px 15px;
|
||||
background: var(--monitor-surface);
|
||||
border: 1px solid var(--monitor-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
box-shadow: 0 1px 0 rgb(255 255 255 / 0.48) inset;
|
||||
}
|
||||
|
||||
|
||||
@@ -412,7 +412,7 @@ onMounted(async () => {
|
||||
</div>
|
||||
<div v-if="isRabbitMqCluster" class="mq-namespace-switcher">
|
||||
<Select :model-value="selectedNamespace" @update:model-value="handleNamespaceSelect">
|
||||
<SelectTrigger class="h-7 w-[180px] rounded-[6px] text-xs">
|
||||
<SelectTrigger class="h-7 w-[180px] rounded-lg text-xs">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
@@ -601,7 +601,7 @@ onMounted(async () => {
|
||||
|
||||
.breadcrumb-button {
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -629,7 +629,7 @@ onMounted(async () => {
|
||||
.readonly-badge {
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--color-warning);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
color: var(--color-warning);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
@@ -716,7 +716,7 @@ onMounted(async () => {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -772,7 +772,7 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
@@ -788,7 +788,7 @@ onMounted(async () => {
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -313,7 +313,7 @@ td {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -365,7 +365,7 @@ button:disabled {
|
||||
padding: 2px 8px;
|
||||
background: var(--color-primary-alpha);
|
||||
color: var(--color-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -395,7 +395,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -446,7 +446,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -476,7 +476,7 @@ button:disabled {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -511,7 +511,7 @@ watch(
|
||||
.permissions-table {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -545,7 +545,7 @@ input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
box-sizing: border-box;
|
||||
@@ -573,7 +573,7 @@ input.invalid {
|
||||
.actions-group.invalid {
|
||||
padding: 8px;
|
||||
border: 1px solid var(--color-error);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-error-bg);
|
||||
}
|
||||
|
||||
@@ -640,7 +640,7 @@ th {
|
||||
|
||||
.tag {
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-primary-alpha);
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
@@ -658,7 +658,7 @@ th {
|
||||
.readonly-hint {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -683,7 +683,7 @@ th {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -716,7 +716,7 @@ th {
|
||||
max-height: 86vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
@@ -763,7 +763,7 @@ th {
|
||||
padding: 12px;
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--color-warning);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-warning-alpha);
|
||||
}
|
||||
|
||||
@@ -774,7 +774,7 @@ th {
|
||||
margin-bottom: 16px;
|
||||
border: 1px solid var(--color-warning);
|
||||
border-left-width: 4px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-warning-alpha);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -803,7 +803,7 @@ th {
|
||||
min-height: 96px;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
|
||||
@@ -321,7 +321,7 @@ watch(
|
||||
.json-section {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -346,7 +346,7 @@ select {
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
box-sizing: border-box;
|
||||
@@ -367,7 +367,7 @@ pre {
|
||||
padding: 12px;
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 12px;
|
||||
@@ -379,7 +379,7 @@ pre {
|
||||
.readonly-hint {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -408,7 +408,7 @@ pre {
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -814,7 +814,7 @@ watch(
|
||||
flex: 1;
|
||||
height: 32px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -830,7 +830,7 @@ watch(
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -844,7 +844,7 @@ watch(
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -908,7 +908,7 @@ watch(
|
||||
min-height: 24px;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background-secondary);
|
||||
color: var(--color-text-secondary);
|
||||
overflow: hidden;
|
||||
@@ -928,7 +928,7 @@ watch(
|
||||
max-width: 320px;
|
||||
height: 30px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
|
||||
@@ -308,7 +308,7 @@ async function executeRequest() {
|
||||
.response-panel {
|
||||
padding: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -370,7 +370,7 @@ async function executeRequest() {
|
||||
min-height: 58px;
|
||||
padding: 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
text-align: left;
|
||||
@@ -385,7 +385,7 @@ async function executeRequest() {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
padding: 2px 6px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-primary-alpha);
|
||||
color: var(--color-primary);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
|
||||
@@ -439,7 +439,7 @@ textarea {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
box-sizing: border-box;
|
||||
@@ -485,7 +485,7 @@ pre {
|
||||
padding: 12px;
|
||||
max-height: 420px;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
@@ -500,7 +500,7 @@ pre {
|
||||
.readonly-hint {
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -517,7 +517,7 @@ pre {
|
||||
.btn-primary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
@@ -527,7 +527,7 @@ pre {
|
||||
.btn-secondary {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -118,7 +118,7 @@ watch(
|
||||
width: min(860px, calc(100vw - 32px));
|
||||
max-height: calc(100vh - 64px);
|
||||
overflow: auto;
|
||||
border-radius: 10px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
|
||||
display: flex;
|
||||
@@ -190,7 +190,7 @@ watch(
|
||||
|
||||
.panel-error {
|
||||
padding: 12px 14px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
@@ -206,7 +206,7 @@ watch(
|
||||
.message-row {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -223,7 +223,7 @@ watch(
|
||||
padding: 10px;
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 12px;
|
||||
@@ -241,7 +241,7 @@ watch(
|
||||
.message-headers span {
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 12px;
|
||||
color: var(--color-text-secondary);
|
||||
}
|
||||
@@ -249,7 +249,7 @@ watch(
|
||||
.btn-secondary {
|
||||
padding: 7px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
|
||||
@@ -491,7 +491,7 @@ watch(
|
||||
|
||||
.readonly-hint {
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-warning-alpha);
|
||||
color: var(--color-warning);
|
||||
font-size: 13px;
|
||||
@@ -499,7 +499,7 @@ watch(
|
||||
|
||||
.panel-error {
|
||||
padding: 10px 14px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
@@ -512,7 +512,7 @@ watch(
|
||||
padding: 14px 18px;
|
||||
border: 1px solid color-mix(in srgb, var(--color-success) 34%, transparent);
|
||||
border-left: 4px solid var(--color-success);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--color-success) 13%, var(--color-background));
|
||||
color: var(--color-success);
|
||||
font-size: 15px;
|
||||
@@ -572,7 +572,7 @@ watch(
|
||||
flex: 1;
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -592,7 +592,7 @@ watch(
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
@@ -624,7 +624,7 @@ input[type="text"],
|
||||
input[type="number"] {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -643,7 +643,7 @@ input[type="number"]:focus {
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
@@ -713,7 +713,7 @@ input[type="number"]:focus {
|
||||
.btn-sm {
|
||||
padding: 7px 16px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -755,7 +755,7 @@ input[type="number"]:focus {
|
||||
margin-top: 4px;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
}
|
||||
|
||||
@@ -777,7 +777,7 @@ input[type="number"]:focus {
|
||||
.peek-default-hint {
|
||||
margin: 0 0 12px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--color-primary) 8%, transparent);
|
||||
color: var(--color-text-secondary);
|
||||
font-size: 12px;
|
||||
@@ -811,7 +811,7 @@ input[type="number"]:focus {
|
||||
.message-empty {
|
||||
padding: 18px;
|
||||
border: 1px dashed var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
color: var(--color-text-tertiary);
|
||||
text-align: center;
|
||||
font-size: 13px;
|
||||
@@ -828,7 +828,7 @@ input[type="number"]:focus {
|
||||
.message-row {
|
||||
padding: 10px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
}
|
||||
|
||||
@@ -851,7 +851,7 @@ input[type="number"]:focus {
|
||||
padding: 10px;
|
||||
max-height: 160px;
|
||||
overflow: auto;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-tertiary, var(--color-background-secondary));
|
||||
color: var(--color-text);
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
@@ -871,7 +871,7 @@ input[type="number"]:focus {
|
||||
.message-headers span {
|
||||
padding: 2px 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
color: var(--color-text-secondary);
|
||||
background: var(--color-background-secondary);
|
||||
font-size: 12px;
|
||||
|
||||
@@ -700,7 +700,7 @@ watch(
|
||||
min-width: 180px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -721,7 +721,7 @@ watch(
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -791,7 +791,7 @@ watch(
|
||||
min-width: 220px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
background: var(--color-background);
|
||||
}
|
||||
@@ -864,7 +864,7 @@ td {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
background: var(--color-background-secondary);
|
||||
@@ -888,7 +888,7 @@ td {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -943,7 +943,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -999,7 +999,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
@@ -1023,7 +1023,7 @@ button:disabled {
|
||||
gap: 8px;
|
||||
cursor: pointer;
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
@@ -1046,7 +1046,7 @@ button:disabled {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -1067,7 +1067,7 @@ button:disabled {
|
||||
width: 96px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
}
|
||||
@@ -1079,7 +1079,7 @@ button:disabled {
|
||||
|
||||
.peek-message {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -485,7 +485,7 @@ td {
|
||||
padding: 2px 8px;
|
||||
background: var(--color-primary-alpha);
|
||||
color: var(--color-primary);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
@@ -515,7 +515,7 @@ td {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -569,7 +569,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -619,7 +619,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -648,7 +648,7 @@ button:disabled {
|
||||
gap: 8px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -687,7 +687,7 @@ button:disabled {
|
||||
max-height: 180px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
@@ -748,7 +748,7 @@ button:disabled {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -764,7 +764,7 @@ watch(newPartitions, () => {
|
||||
min-width: 180px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -899,7 +899,7 @@ td {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -942,7 +942,7 @@ td {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
@@ -955,7 +955,7 @@ td {
|
||||
.btn-danger {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -1009,7 +1009,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -1060,7 +1060,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -1086,7 +1086,7 @@ button:disabled {
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -308,7 +308,7 @@ watch(
|
||||
min-width: 180px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -342,7 +342,7 @@ watch(
|
||||
overflow: auto;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -412,7 +412,7 @@ td {
|
||||
|
||||
.channels-table {
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
overflow: hidden;
|
||||
background: var(--color-background);
|
||||
}
|
||||
@@ -420,7 +420,7 @@ td {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -446,7 +446,7 @@ td {
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -307,7 +307,7 @@ onUnmounted(() => {
|
||||
.refresh-interval {
|
||||
padding: 4px 8px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -335,7 +335,7 @@ onUnmounted(() => {
|
||||
padding: 12px 14px;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
@@ -356,7 +356,7 @@ onUnmounted(() => {
|
||||
overflow: auto;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -400,7 +400,7 @@ td {
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -418,7 +418,7 @@ td {
|
||||
.btn-secondary {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -504,7 +504,7 @@ watch(
|
||||
min-width: 160px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -527,7 +527,7 @@ watch(
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-primary-alpha);
|
||||
color: var(--color-primary);
|
||||
font-size: 12px;
|
||||
@@ -560,7 +560,7 @@ watch(
|
||||
overflow: auto;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -622,7 +622,7 @@ td {
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 11px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -644,7 +644,7 @@ td {
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -702,7 +702,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -760,7 +760,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
|
||||
@@ -389,7 +389,7 @@ watch(
|
||||
overflow: auto;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
}
|
||||
|
||||
table {
|
||||
@@ -472,7 +472,7 @@ td {
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -530,7 +530,7 @@ button:disabled {
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 560px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
@@ -590,7 +590,7 @@ button:disabled {
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
|
||||
@@ -315,7 +315,7 @@ watch(
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 92%;
|
||||
max-width: 560px;
|
||||
max-height: 86vh;
|
||||
@@ -422,7 +422,7 @@ watch(
|
||||
width: 100%;
|
||||
padding: 8px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
@@ -459,7 +459,7 @@ watch(
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -468,7 +468,7 @@ watch(
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
|
||||
@@ -508,7 +508,7 @@ watch(
|
||||
|
||||
.dialog {
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
width: 90%;
|
||||
max-width: 520px;
|
||||
max-height: 85vh;
|
||||
@@ -605,7 +605,7 @@ watch(
|
||||
.config-value {
|
||||
padding: 7px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -632,7 +632,7 @@ watch(
|
||||
width: 100%;
|
||||
padding: 8px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
box-sizing: border-box;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
@@ -662,7 +662,7 @@ watch(
|
||||
padding: 8px 12px;
|
||||
background: var(--color-error-bg);
|
||||
color: var(--color-error);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@@ -679,7 +679,7 @@ watch(
|
||||
.btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--dbx-radius-fixed-4);
|
||||
background: var(--color-background);
|
||||
cursor: pointer;
|
||||
font-size: 13px;
|
||||
|
||||
@@ -153,7 +153,7 @@ const { t } = useI18n();
|
||||
.detail-payload {
|
||||
margin: 0;
|
||||
padding: 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background-secondary);
|
||||
font-family: var(--font-mono, ui-monospace, monospace);
|
||||
font-size: 12px;
|
||||
@@ -165,7 +165,7 @@ const { t } = useI18n();
|
||||
|
||||
.panel-error {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--color-error) 12%, transparent);
|
||||
color: var(--color-error);
|
||||
font-size: 13px;
|
||||
@@ -173,7 +173,7 @@ const { t } = useI18n();
|
||||
|
||||
.panel-success {
|
||||
padding: 10px 12px;
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: color-mix(in srgb, var(--color-success, #22c55e) 12%, transparent);
|
||||
color: var(--color-success, #16a34a);
|
||||
font-size: 13px;
|
||||
@@ -196,7 +196,7 @@ const { t } = useI18n();
|
||||
flex-direction: column;
|
||||
background: var(--color-background);
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 8px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
|
||||
@@ -353,7 +353,7 @@ defineExpose({
|
||||
align-items: center;
|
||||
min-height: 34px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
transition:
|
||||
border-color 0.15s ease,
|
||||
@@ -450,7 +450,7 @@ defineExpose({
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
@@ -33,7 +33,7 @@
|
||||
min-width: 180px;
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
font-size: 13px;
|
||||
@@ -56,7 +56,7 @@
|
||||
.mq-btn-sm {
|
||||
padding: 6px 12px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
@@ -161,7 +161,7 @@
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 6px;
|
||||
border-radius: var(--dbx-radius-fixed-6);
|
||||
background: var(--color-background);
|
||||
color: var(--color-text-secondary);
|
||||
cursor: pointer;
|
||||
|
||||
Reference in new issue
Block a user