style: update border-radius and padding values across components
- standardize border-radius from 8px to 6px for consistent styling - adjust padding values from 1rem to 0.75rem for better visual hierarchy - remove redundant overflow-y properties for cleaner code
This commit is contained in:
@@ -361,7 +361,7 @@ onUnmounted(() => {
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
@@ -466,7 +466,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@@ -684,7 +684,7 @@ onUnmounted(() => {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
|
||||
@@ -753,8 +753,8 @@ onUnmounted(() => {
|
||||
.practice-card {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
+3
-3
@@ -376,7 +376,7 @@ onMounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
transition: all 0.3s;
|
||||
opacity: 0.6;
|
||||
@@ -430,7 +430,7 @@ onMounted(() => {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
@@ -777,7 +777,7 @@ onMounted(() => {
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
opacity: 0.5;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@@ -318,7 +318,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
@@ -551,7 +551,7 @@ onUnmounted(() => {
|
||||
.pod-group {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -336,7 +336,7 @@ const activeServer = ref(0)
|
||||
padding: 0.75rem 1rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.9rem;
|
||||
@@ -414,7 +414,7 @@ const activeServer = ref(0)
|
||||
gap: 0.5rem;
|
||||
position: relative;
|
||||
padding: 0.5rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.3s;
|
||||
min-width: 80px;
|
||||
}
|
||||
@@ -470,7 +470,7 @@ const activeServer = ref(0)
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
@@ -577,7 +577,7 @@ const activeServer = ref(0)
|
||||
}
|
||||
|
||||
.detail-card {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
@@ -630,7 +630,7 @@ const activeServer = ref(0)
|
||||
.config-item {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -312,7 +312,7 @@ onUnmounted(() => {
|
||||
padding: 0.75rem 0.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -406,7 +406,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.panel-content {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
/* Single Server */
|
||||
@@ -460,7 +460,7 @@ onUnmounted(() => {
|
||||
background: linear-gradient(135deg, #3b82f6, #8b5cf6);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
font-weight: 600;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
@@ -484,7 +484,7 @@ onUnmounted(() => {
|
||||
padding: 0.5rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
transition: all 0.2s;
|
||||
min-width: 60px;
|
||||
}
|
||||
@@ -553,7 +553,7 @@ onUnmounted(() => {
|
||||
}
|
||||
|
||||
.detail-content {
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
@@ -609,7 +609,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.comparison-title {
|
||||
|
||||
@@ -323,7 +323,7 @@ const getUsageColor = (usage) => {
|
||||
width: 100%;
|
||||
padding-bottom: 50%;
|
||||
background: linear-gradient(135deg, #f0f4f8, #e2e8f0);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -346,7 +346,7 @@ const getUsageColor = (usage) => {
|
||||
transform: translate(-50%, -50%);
|
||||
background: white;
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@@ -491,7 +491,7 @@ const getUsageColor = (usage) => {
|
||||
.detail-item {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -573,7 +573,7 @@ const getUsageColor = (usage) => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
@@ -436,7 +436,7 @@ onUnmounted(() => {
|
||||
padding: 0.75rem 0.5rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
}
|
||||
@@ -565,8 +565,8 @@ onUnmounted(() => {
|
||||
background: linear-gradient(135deg, #f8fafc, #f1f5f9);
|
||||
border: 2px solid #e2e8f0;
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
margin: 1rem 0;
|
||||
padding: 0.75rem;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
.lb-header {
|
||||
@@ -598,7 +598,7 @@ onUnmounted(() => {
|
||||
gap: 0.75rem;
|
||||
background: white;
|
||||
padding: 0.75rem;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #e2e8f0;
|
||||
}
|
||||
|
||||
@@ -625,7 +625,7 @@ onUnmounted(() => {
|
||||
.session-table {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -666,7 +666,7 @@ onUnmounted(() => {
|
||||
.hash-ring {
|
||||
background: white;
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
@@ -729,7 +729,7 @@ onUnmounted(() => {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
@@ -845,7 +845,7 @@ onUnmounted(() => {
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 12px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.comparison-title {
|
||||
|
||||
@@ -310,7 +310,7 @@ onMounted(() => {
|
||||
gap: 1rem;
|
||||
margin-bottom: 1.5rem;
|
||||
flex-wrap: wrap;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
background: var(--vp-c-bg);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
@@ -335,7 +335,7 @@ onMounted(() => {
|
||||
padding: 0.5rem 0.75rem;
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 2px solid var(--vp-c-divider);
|
||||
border-radius: 8px;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
font-size: 0.85rem;
|
||||
@@ -445,7 +445,7 @@ onMounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.server-info {
|
||||
@@ -549,7 +549,7 @@ onMounted(() => {
|
||||
background: var(--vp-c-bg-soft);
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 10px;
|
||||
padding: 1rem;
|
||||
padding: 0.75rem;
|
||||
}
|
||||
|
||||
.animation-title {
|
||||
|
||||
Reference in New Issue
Block a user