fix(ui): apply corner style to remaining controls

This commit is contained in:
zipg authored and GitHub committed 2026-07-23 17:29:59 +08:00
1 parent b9c1feab82
commit 136ead2007
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;