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
@@ -232,7 +232,7 @@ const getAzStatusText = (az) => {
.availability-zone-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -243,7 +243,7 @@ const getAzStatusText = (az) => {
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
}
.architecture-container {
@@ -284,7 +284,7 @@ const getAzStatusText = (az) => {
gap: 6px;
padding: 12px 16px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
min-width: 80px;
}
@@ -507,7 +507,7 @@ const getAzStatusText = (az) => {
margin-top: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@@ -309,7 +309,7 @@ const backendServices = [
.compute-topology-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -319,7 +319,7 @@ const backendServices = [
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
flex-wrap: wrap;
gap: 12px;
}
@@ -355,7 +355,7 @@ const backendServices = [
.server-rack {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -406,7 +406,7 @@ const backendServices = [
.hypervisor {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -507,7 +507,7 @@ const backendServices = [
.control-plane {
background: #f0f9ff;
border: 1px solid #bae6fd;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -564,7 +564,7 @@ const backendServices = [
.node {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -636,7 +636,7 @@ const backendServices = [
.functions-section,
.backend-section {
background: #fafafa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -685,7 +685,7 @@ const backendServices = [
.function-card {
background: white;
border: 1px solid #e4e7ed;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}
@@ -752,7 +752,7 @@ const backendServices = [
margin-top: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@@ -291,7 +291,7 @@ const drComparisonData = [
.disaster-recovery-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -301,7 +301,7 @@ const drComparisonData = [
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
flex-wrap: wrap;
gap: 12px;
}
@@ -386,7 +386,7 @@ const drComparisonData = [
/* AZ Block */
.az-block {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
border-left: 4px solid #409eff;
transition: all 0.3s;
@@ -530,7 +530,7 @@ const drComparisonData = [
gap: 12px;
padding: 16px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.link-group {
@@ -711,7 +711,7 @@ const drComparisonData = [
.explanation-card {
background: white;
border-radius: 8px;
border-radius: 6px;
padding: 16px;
}
@@ -211,7 +211,7 @@ const subnets = [
.network-flow-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -221,7 +221,7 @@ const subnets = [
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
flex-wrap: wrap;
gap: 12px;
}
@@ -273,7 +273,7 @@ const subnets = [
gap: 6px;
padding: 12px 16px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
min-width: 80px;
}
@@ -401,7 +401,7 @@ const subnets = [
gap: 6px;
padding: 12px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
min-width: 100px;
border: 2px solid transparent;
transition: all 0.3s;
@@ -475,7 +475,7 @@ const subnets = [
.subnet {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
border-left: 4px solid;
}
@@ -586,7 +586,7 @@ const subnets = [
margin-top: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
@@ -168,7 +168,7 @@ const selectRegion = (id) => {
.resource-topology-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.controls {
@@ -218,7 +218,7 @@ const selectRegion = (id) => {
align-items: center;
padding: 16px;
border: 2px solid #e4e7ed;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}
@@ -254,7 +254,7 @@ const selectRegion = (id) => {
.region-card {
padding: 12px;
border: 2px solid #e4e7ed;
border-radius: 8px;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s;
}
@@ -304,7 +304,7 @@ const selectRegion = (id) => {
.resource-category {
padding: 16px;
border: 2px solid #e4e7ed;
border-radius: 8px;
border-radius: 6px;
transition: all 0.3s;
}
@@ -357,7 +357,7 @@ const selectRegion = (id) => {
margin-top: 20px;
padding: 16px;
background: #f0f9eb;
border-radius: 8px;
border-radius: 6px;
border-left: 4px solid #67c23a;
}
@@ -297,7 +297,7 @@ const comparisonData = [
.storage-topology-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -307,7 +307,7 @@ const comparisonData = [
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
flex-wrap: wrap;
gap: 12px;
}
@@ -344,7 +344,7 @@ const comparisonData = [
.method-card {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 16px;
text-align: center;
position: relative;
@@ -382,7 +382,7 @@ const comparisonData = [
background: #333;
color: white;
padding: 10px 14px;
border-radius: 8px;
border-radius: 6px;
font-size: 12px;
z-index: 10;
margin-bottom: 8px;
@@ -398,7 +398,7 @@ const comparisonData = [
.gateway-card {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
border-left: 4px solid;
}
@@ -202,7 +202,7 @@ const selectSubnet = (index) => {
.subnet-design-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -213,7 +213,7 @@ const selectSubnet = (index) => {
margin-bottom: 20px;
padding: 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
}
.panel-section {
@@ -278,7 +278,7 @@ const selectSubnet = (index) => {
.subnet-cell {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
border: 2px solid transparent;
cursor: pointer;
@@ -356,7 +356,7 @@ const selectSubnet = (index) => {
background: #333;
color: white;
padding: 10px 14px;
border-radius: 8px;
border-radius: 6px;
font-size: 12px;
z-index: 10;
margin-bottom: 8px;
@@ -373,7 +373,7 @@ const selectSubnet = (index) => {
/* Calculation Panel */
.calculation-panel {
background: white;
border-radius: 8px;
border-radius: 6px;
padding: 20px;
margin-bottom: 20px;
}
@@ -447,7 +447,7 @@ const selectSubnet = (index) => {
/* Tips Panel */
.tips-panel {
background: #f0f9eb;
border-radius: 8px;
border-radius: 6px;
padding: 20px;
border-left: 4px solid #67c23a;
}
@@ -186,7 +186,7 @@ const borderDevices = [
.vpc-architecture-demo {
padding: 20px;
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
}
.control-panel {
@@ -287,7 +287,7 @@ const borderDevices = [
gap: 6px;
padding: 12px 16px;
background: white;
border-radius: 8px;
border-radius: 6px;
border: 2px solid #e0e0e0;
cursor: pointer;
transition: all 0.3s;
@@ -404,7 +404,7 @@ const borderDevices = [
/* AZ Container */
.az-container {
background: #f5f7fa;
border-radius: 8px;
border-radius: 6px;
padding: 12px;
}