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