style: Update styles in analysis component for improved consistency and appearance; adjust colors, padding, and border-radius

This commit is contained in:
Vishnu 2025-05-03 18:12:13 +05:30
parent d41a4849e1
commit d551241ff0
1 changed files with 20 additions and 11 deletions

View File

@ -45,7 +45,8 @@
.sub-header {
font-weight: 300;
font-size: var(--font-size-tiny);
color: var(--text-button-color);
color: var(--text-color);
opacity: 0.8;
}
}
@ -97,7 +98,7 @@
.metrics-section {
padding-top: 16px;
border-top: 1px solid var(--background-color-gray);
border-top: 1px solid var(--border-color);
.metric {
display: flex;
@ -144,7 +145,7 @@
max-width: 200px;
height: 100px;
position: relative;
background-image: radial-gradient(#d3d3d3 1px, transparent 1px);
background-image: radial-gradient(#8d8d8da4 1px, transparent 1px);
background-size: 10px 10px;
border-radius: 8px;
@ -174,8 +175,8 @@
.footer-card {
width: 100%;
background: var(--background-color);
border-radius: 6px;
padding: 8px;
border-radius: #{$border-radius-large};
padding: 12px;
display: flex;
flex-direction: column;
gap: 12px;
@ -262,7 +263,8 @@
}
label {
font-size: var(--font-size-small);
font-weight: 200;
font-size: var(--font-size-tiny);
position: relative;
}
@ -299,6 +301,10 @@
padding: 6px 12px;
border: 1px solid var(--border-color);
svg {
scale: 0.8;
}
.info {
span {
font-size: var(--font-size-xlarge);
@ -394,7 +400,7 @@
.cost-breakdown {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-large};
border-radius: #{$border-radius-extra-large};
max-height: 20vh;
padding: 16px;
overflow: auto;
@ -407,7 +413,7 @@
.section-wrapper {
display: flex;
gap: 4px;
gap: 6px;
align-items: center;
}
@ -458,7 +464,7 @@
.tips-section {
background: var(--background-color);
border-radius: #{$border-radius-large};
border-radius: #{$border-radius-extra-large};
outline: 1px solid var(--border-color);
display: flex;
flex-direction: column;
@ -468,7 +474,10 @@
.tip-header {
display: flex;
align-items: center;
gap: 4px;
.lightbulb-icon{
@include flex-center;
}
.tip-title {
color: var(--text-color);
font-weight: 600;