style: Update styles in analysis component for improved consistency and appearance; adjust colors, padding, and border-radius
This commit is contained in:
parent
d41a4849e1
commit
d551241ff0
|
@ -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;
|
||||
|
@ -555,4 +564,4 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Breakdown Table Open/Close Logic
|
||||
// Breakdown Table Open/Close Logic
|
||||
|
|
Loading…
Reference in New Issue