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
@@ -125,10 +125,10 @@ function getResultLayerStyle(layer) {
<style scoped>
.composite-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -160,7 +160,7 @@ function getResultLayerStyle(layer) {
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.layers-stage {
@@ -127,10 +127,10 @@
<style scoped>
.dom-render-tree-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -162,7 +162,7 @@
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.trees-container {
@@ -122,10 +122,10 @@ function resetDemo() {
<style scoped>
.layout-reflow-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -142,7 +142,7 @@ function resetDemo() {
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.control-panel {
@@ -199,7 +199,7 @@ function resetDemo() {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: 1rem;
padding: 0.75rem;
background: var(--vp-c-bg-soft);
border-radius: 6px;
min-height: 150px;
@@ -154,10 +154,10 @@ function sleep(ms) {
<style scoped>
.macro-micro-task-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -189,7 +189,7 @@ function sleep(ms) {
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.event-loop-flow {
@@ -216,7 +216,7 @@ function sleep(ms) {
.execution-box {
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
min-height: 80px;
display: flex;
align-items: center;
@@ -126,10 +126,10 @@ function clearHighlight() {
<style scoped>
.paint-layer-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -146,7 +146,7 @@ function clearHighlight() {
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.layer-visualization {
@@ -158,7 +158,7 @@ function clearHighlight() {
height: 200px;
background: var(--vp-c-bg-soft);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
overflow: hidden;
}
@@ -105,10 +105,10 @@
<style scoped>
.rendering-performance-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -140,7 +140,7 @@
.demo-content {
background: var(--vp-c-bg);
border-radius: 6px;
padding: 1rem;
padding: 0.75rem;
}
.performance-comparison {
@@ -108,10 +108,10 @@ const currentStage = computed(() => {
<style scoped>
.rendering-pipeline-demo {
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-bg-soft);
padding: 1rem;
margin: 1rem 0;
padding: 0.75rem;
margin: 0.5rem 0;
}
.demo-header {
@@ -158,7 +158,7 @@ const currentStage = computed(() => {
position: relative;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
border-radius: 6px;
transition: all 0.2s ease;
}
@@ -173,7 +173,7 @@ const currentStage = computed(() => {
.stage-icon {
width: 40px;
height: 40px;
border-radius: 8px;
border-radius: 6px;
background: var(--vp-c-brand);
display: flex;
align-items: center;
@@ -217,8 +217,8 @@ const currentStage = computed(() => {
.stage-detail {
background: var(--vp-c-bg);
border-radius: 8px;
padding: 1rem;
border-radius: 6px;
padding: 0.75rem;
margin-top: 0.75rem;
border: 1px solid var(--vp-c-divider);
}