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:
@@ -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 {
|
||||
|
||||
Reference in New Issue
Block a user