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
@@ -307,7 +307,7 @@ watch(cfgScale, updateDisplay)
<style scoped>
.cfg-scale-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-title {
@@ -325,7 +325,7 @@ watch(cfgScale, updateDisplay)
.cfg-control {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -358,7 +358,7 @@ watch(cfgScale, updateDisplay)
flex-wrap: wrap;
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.comparison-item {
@@ -383,7 +383,7 @@ watch(cfgScale, updateDisplay)
width: 180px;
height: 180px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -422,7 +422,7 @@ watch(cfgScale, updateDisplay)
.cfg-effects {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -445,7 +445,7 @@ watch(cfgScale, updateDisplay)
gap: 8px;
padding: 12px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
@@ -479,7 +479,7 @@ watch(cfgScale, updateDisplay)
.recommendations {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -497,7 +497,7 @@ watch(cfgScale, updateDisplay)
.rec-item {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
text-align: center;
}
@@ -495,7 +495,7 @@ watch([selectedControl, controlStrength], updateDisplay)
<style scoped>
.controlnet-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-title {
@@ -519,7 +519,7 @@ watch([selectedControl, controlStrength], updateDisplay)
.control-card {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
text-align: center;
cursor: pointer;
@@ -559,7 +559,7 @@ watch([selectedControl, controlStrength], updateDisplay)
flex-wrap: wrap;
padding: 20px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.workflow-step {
@@ -578,7 +578,7 @@ watch([selectedControl, controlStrength], updateDisplay)
width: 160px;
height: 160px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -600,7 +600,7 @@ watch([selectedControl, controlStrength], updateDisplay)
.strength-control {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -620,7 +620,7 @@ watch([selectedControl, controlStrength], updateDisplay)
.comparison-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -652,7 +652,7 @@ watch([selectedControl, controlStrength], updateDisplay)
width: 150px;
height: 150px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -663,7 +663,7 @@ watch([selectedControl, controlStrength], updateDisplay)
.use-cases {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -681,7 +681,7 @@ watch([selectedControl, controlStrength], updateDisplay)
.use-case-card {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
text-align: center;
}
@@ -198,7 +198,7 @@ canvas {
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
padding: 8px 12px;
border-radius: 8px;
border-radius: 6px;
color: #fff;
opacity: 0;
transform: translateY(10px);
@@ -236,7 +236,7 @@ button {
flex: 1;
border: none;
padding: 10px;
border-radius: 8px;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
@@ -274,7 +274,7 @@ onUnmounted(() => {
.canvas-wrapper {
position: relative;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 1px solid var(--vp-c-divider);
height: 100px;
}
@@ -190,7 +190,7 @@ canvas {
align-items: center;
gap: 12px;
padding: 20px;
border-radius: 8px;
border-radius: 6px;
}
.spinner {
@@ -279,7 +279,7 @@ onUnmounted(() => {
margin-top: 16px;
background: var(--vp-c-bg-alt);
padding: 12px 16px;
border-radius: 8px;
border-radius: 6px;
font-size: 13px;
line-height: 1.5;
color: var(--vp-c-text-2);
@@ -385,7 +385,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
<style scoped>
.lora-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-title {
@@ -403,7 +403,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.concept-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -417,7 +417,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.model-box {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 16px 24px;
text-align: center;
border: 2px solid var(--vp-c-divider);
@@ -460,7 +460,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.weight-control-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -479,7 +479,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.comparison-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -515,7 +515,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
width: 160px;
height: 160px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -530,7 +530,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.fusion-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -575,7 +575,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
width: 200px;
height: 200px;
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-brand);
}
@@ -598,7 +598,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.use-cases {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -616,7 +616,7 @@ watch([loraWeight, selectedLoRA, activeLoRAs], updateDisplay, { deep: true })
.use-case-card {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
text-align: center;
}
@@ -285,7 +285,7 @@ const addNegativePreset = (preset) => {
<style scoped>
.prompt-engineering-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-title {
@@ -323,7 +323,7 @@ const addNegativePreset = (preset) => {
.prompt-analysis {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
}
@@ -396,7 +396,7 @@ const addNegativePreset = (preset) => {
.preview-panel {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
}
@@ -145,7 +145,7 @@ const tokens = ref([
height: 200px;
background: #000;
position: relative;
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
display: flex;
align-items: center;
@@ -356,7 +356,7 @@ watch([selectedSampler, steps], drawPathVisualization)
<style scoped>
.sampler-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-title {
@@ -380,7 +380,7 @@ watch([selectedSampler, steps], drawPathVisualization)
.sampler-card {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 16px;
cursor: pointer;
transition: all 0.2s;
@@ -437,7 +437,7 @@ watch([selectedSampler, steps], drawPathVisualization)
.visualization-section {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -460,7 +460,7 @@ watch([selectedSampler, steps], drawPathVisualization)
.path-visualization {
background: var(--vp-c-bg);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
margin-bottom: 16px;
}
@@ -477,7 +477,7 @@ watch([selectedSampler, steps], drawPathVisualization)
.recommendation-matrix {
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
padding: 20px;
}
@@ -492,7 +492,7 @@ watch([selectedSampler, steps], drawPathVisualization)
flex-direction: column;
gap: 1px;
background: var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
}
@@ -363,7 +363,7 @@ onUnmounted(stopAnimation)
<style scoped>
.unet-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-controls {
@@ -415,7 +415,7 @@ onUnmounted(stopAnimation)
width: 200px;
height: 200px;
background: var(--vp-c-bg-mute);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -440,7 +440,7 @@ onUnmounted(stopAnimation)
.operation-box {
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 8px;
border-radius: 6px;
padding: 12px 16px;
text-align: center;
min-width: 80px;
@@ -467,7 +467,7 @@ onUnmounted(stopAnimation)
.timeline-section {
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.timeline-label {
@@ -478,7 +478,7 @@ onUnmounted(stopAnimation)
.compare-section {
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.compare-display {
@@ -505,7 +505,7 @@ onUnmounted(stopAnimation)
width: 150px;
height: 150px;
background: var(--vp-c-bg-mute);
border-radius: 8px;
border-radius: 6px;
border: 2px solid var(--vp-c-divider);
}
@@ -219,7 +219,7 @@ watch(mode, updateDisplay)
<style scoped>
.vae-demo {
margin: 1rem 0;
margin: 0.5rem 0;
}
.header-controls {
@@ -257,7 +257,7 @@ watch(mode, updateDisplay)
width: 200px;
height: 200px;
background: var(--vp-c-bg-mute);
border-radius: 8px;
border-radius: 6px;
overflow: hidden;
border: 2px solid var(--vp-c-divider);
}
@@ -291,7 +291,7 @@ watch(mode, updateDisplay)
margin-top: 16px;
padding: 16px;
background: var(--vp-c-bg-soft);
border-radius: 8px;
border-radius: 6px;
}
.latent-title {