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:
sanbuphy
2026-02-14 20:23:34 +08:00
parent 81e4284b87
commit d35211071a
373 changed files with 3441 additions and 5629 deletions
@@ -103,10 +103,10 @@ function reset() {
<style scoped>
.api-call-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.flow-steps {
@@ -78,10 +78,10 @@ const selectedEventData = computed(() => events[selectedEvent.value])
<style scoped>
.cloud-history-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.timeline {
@@ -142,7 +142,7 @@ const selectedEventData = computed(() => events[selectedEvent.value])
.event-detail {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.detail-year {
@@ -531,7 +531,7 @@ const layerDetails = {
gap: 12px;
padding: 10px 12px;
background: rgba(0, 212, 255, 0.1);
border-radius: 8px;
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
color: #e6f1ff;
@@ -105,10 +105,10 @@ function selectService(id) {
<style scoped>
.cloud-services-overview {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.services-grid {
@@ -100,10 +100,10 @@ const price = computed(() => selectedSpec.value?.price || 0)
<style scoped>
.compute-instance-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.config-panel {
@@ -257,7 +257,7 @@ const recommendations = computed(() => {
.slider-group {
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -123,10 +123,10 @@ function prevStep() {
<style scoped>
.deploy-workflow-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.workflow-steps {
@@ -204,7 +204,7 @@ function prevStep() {
.step-detail {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
margin-bottom: 1rem;
}
@@ -184,7 +184,7 @@
.addon-card {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-radius: 6px;
padding: 12px;
border: 1px solid rgba(255, 255, 255, 0.05);
}
@@ -329,7 +329,7 @@ const removeItem = (index) => {
gap: 8px;
padding: 10px;
background: rgba(255, 255, 255, 0.05);
border-radius: 8px;
border-radius: 6px;
cursor: grab;
transition: all 0.2s ease;
}
@@ -580,7 +580,7 @@ const removeItem = (index) => {
.config-footer {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-radius: 6px;
padding: 12px 16px;
}
@@ -618,7 +618,7 @@ const removeItem = (index) => {
.components-panel {
max-height: 200px;
overflow-y: auto;
}
.config-content {
@@ -92,9 +92,9 @@ const recommendation = computed(() => {
<style scoped>
.pricing-calculator {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
padding: 1rem;
margin: 1rem 0;
border-radius: 6px;
padding: 0.75rem;
margin: 0.5rem 0;
background: var(--vp-c-bg-soft);
}
@@ -90,10 +90,10 @@ const compareData = [
<style scoped>
.provider-comparison {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.compare-table {
@@ -101,10 +101,10 @@ const recommendation = computed(() => {
<style scoped>
.region-latency-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.user-location {
@@ -198,7 +198,7 @@ const recommendation = computed(() => {
.bar-fill {
height: 100%;
background: var(--vp-c-brand);
border-radius: 8px;
border-radius: 6px;
transition: width 0.3s;
}
@@ -392,7 +392,7 @@ const currentScenario = computed(() => scenarioData[selectedScenario.value])
.service-card {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
}
@@ -467,7 +467,7 @@ const currentScenario = computed(() => scenarioData[selectedScenario.value])
gap: 10px;
background: rgba(255, 255, 255, 0.03);
padding: 10px 12px;
border-radius: 8px;
border-radius: 6px;
border-left: 3px solid #00d4ff;
}
@@ -390,7 +390,7 @@ const currentScenario = computed(() => {
.provider-pricing {
background: rgba(0, 0, 0, 0.2);
border-radius: 8px;
border-radius: 6px;
padding: 10px;
}
@@ -455,7 +455,7 @@ const currentScenario = computed(() => {
.guide-item {
padding: 12px;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
border-radius: 6px;
border-left: 3px solid #00d4ff;
}
@@ -83,10 +83,10 @@ const selectedTypeData = computed(() =>
<style scoped>
.storage-type-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background-color: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.type-cards {