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