updating UI

This commit is contained in:
Nalvazhuthi
2025-05-03 17:37:31 +05:30
8 changed files with 365 additions and 319 deletions

View File

@@ -28,9 +28,9 @@
display: flex;
align-items: center;
gap: 6px;
.icon{
.icon {
@include flex-center;
scale: .8;
scale: 0.8;
}
}
@@ -43,24 +43,38 @@
svg {
scale: 1.6;
}
&:hover{
&:hover {
background: var(--background-color);
}
}
}
.log-nav-container {
@include flex-space-between;
align-items: flex-end;
.log-nav-wrapper {
display: flex;
gap: 6px;
.log-nav-wrapper {
display: flex;
gap: 6px;
.log-nav {
padding: 8px 16px;
border-radius: 19px;
}
.log-nav {
padding: 8px 16px;
border-radius: 19px;
.log-nav.active {
background-color: var(--background-color-accent);
color: var(--text-button-color);
}
}
.log-nav.active {
background-color: var(--background-color-accent);
color: var(--text-button-color);
.clear-button{
margin: 0 6px;
padding: 4px 12px;
color: var(--text-disabled);
border-radius: #{$border-radius-large};
&:hover{
font-weight: 300;
color: var(--text-color);
background: var(--background-color-solid-gradient);
}
}
}
@@ -98,7 +112,7 @@
text-wrap: nowrap;
height: 100%;
}
.log-entry-message{
.log-entry-message {
width: 100%;
}
}
@@ -108,5 +122,10 @@
}
}
}
.no-log{
padding: 20px;
text-align: center;
color: var(--text-color);
}
}
}

View File

@@ -11,19 +11,12 @@
width: 100%;
height: 100vh;
pointer-events: none;
padding: 10px;
z-index: 2;
.analysis-wrapper {
display: flex;
flex-direction: column;
gap: 12px;
}
.analysis-card {
min-width: 333px;
border-radius: 20px;
padding: 8px;
margin: 8px;
pointer-events: all;
.analysis-card-wrapper {
@@ -50,6 +43,7 @@
}
.sub-header {
font-weight: 300;
font-size: var(--font-size-tiny);
color: var(--text-color);
opacity: 0.8;
@@ -173,11 +167,13 @@
background: var(--background-color-gray);
border: 1px solid var(--border-color);
background: var(--background-color);
border-radius: 6px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 12px;
outline: 1px solid var(--border-color);
&:first-child {
width: 85%;
@@ -338,10 +334,11 @@
flex-direction: column;
gap: 3px;
align-items: center;
font-weight: 300;
.key {
font-size: var(--font-size-xlarge);
color: #28B9F3;
font-weight: 500;
font-size: var(--font-size-large);
color: #28b9f3;
}
}
}
@@ -410,8 +407,10 @@
.cost-breakdown {
background: var(--background-color);
border: 1px solid var(--border-color);
border-radius: #{$border-radius-extra-large};
border-radius: #{$border-radius-large};
max-height: 20vh;
padding: 16px;
overflow: auto;
.breakdown-header {
display: flex;
@@ -472,7 +471,7 @@
}
.tips-section {
background-color: var(--background-color);
background: var(--background-color);
border-radius: #{$border-radius-large};
outline: 1px solid var(--border-color);
display: flex;
@@ -552,18 +551,17 @@
.label-wrapper {
width: 100%;
position: absolute;
bottom: 0px;
bottom: 2px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.label {
font-size: var(--font-size-xlarge);
font-size: var(--font-size-xxlarge);
}
}
}
}
.breakdown-table-wrapper {
@@ -589,4 +587,4 @@
}
}
// Breakdown Table Open/Close Logic
// Breakdown Table Open/Close Logic