Skip to content

Commit b929f82

Browse files
Prashant-MicrosoftPrashant-Microsoft
authored
fix: ui changes (#1)
1 parent 314b80b commit b929f82

File tree

6 files changed

+1435
-1132
lines changed

6 files changed

+1435
-1132
lines changed

‎src/frontend/wwwroot/app.css‎

Lines changed: 133 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -4,191 +4,238 @@
44

55
/* App global */
66

7-
html {
8-
overflow-y: auto;
7+
html,
8+
body {
9+
overflow-x: hidden;
10+
overflow-y: auto;
11+
height: 100%;
912
}
1013

1114
body {
12-
position: relative;
13-
background: rgb(247, 249, 251);
14-
min-height: 100vh;
15+
position: relative;
16+
background: rgb(247, 249, 251);
17+
min-height: 100vh;
1518
}
1619

1720
.border-right {
18-
border-right: 1px solid hsl(221, 14%, calc(86% + 0%));
21+
border-right: 1px solid hsl(221, 14%, calc(86% + 0%));
1922
}
2023

2124
/* App template */
2225

2326
#app .columns {
24-
min-height: 100vh;
27+
min-height: 100vh;
28+
height: 100%;
29+
}
30+
#app .modal,
31+
#app .menu {
32+
overflow: hidden; /* Prevent scrolling within modals and menus */
2533
}
26-
2734
#app .asside {
28-
background: rgba(231, 236, 243, 0.7);
35+
background: rgba(231, 236, 243, 0.7);
2936
}
3037

3138
@media (min-width: 1800px) {
32-
#app .asside {
33-
max-width: 400px;
34-
}
39+
#app .asside {
40+
max-width: 400px;
41+
}
3542
}
3643

3744
#app .menu-logo {
38-
font-size: 1.25rem;
39-
font-weight: 700;
40-
cursor: pointer;
45+
font-size: 1.25rem;
46+
font-weight: 700;
47+
cursor: pointer;
4148
}
4249

4350
#app .menu-logo img {
44-
width: 30px;
51+
width: 30px;
4552
}
4653

4754
#app .asside .menu-list a {
48-
background-color: transparent;
55+
background-color: transparent;
4956
}
5057

5158
#app .asside .menu-list a.is-active {
52-
background-color: rgb(71, 80, 235);
59+
background-color: rgb(71, 80, 235);
5360
}
5461

5562
#app .asside .menu-list a.is-active i {
56-
color: white !important;
63+
color: white !important;
5764
}
5865

5966
#app .asside .menu-list a.is-active:hover {
60-
background-color: rgb(71, 80, 235);
67+
background-color: rgb(71, 80, 235);
6168
}
6269

6370
#app .asside .menu-list a.menu-task {
64-
display: flex;
65-
align-items: center;
71+
display: flex;
72+
align-items: center;
6673
}
6774

6875
#app .asside .menu-list a.menu-task span {
69-
flex: 1;
76+
flex: 1;
7077
}
7178

7279
#app .asside .menu-list a:hover {
73-
background-color: rgba(0, 0, 0, 0.1);
80+
background-color: rgba(0, 0, 0, 0.1);
7481
}
7582

7683
#app .iframe {
77-
width: 100%;
78-
background-color: transparent;
79-
overflow-y: auto;
84+
width: 100%;
85+
background-color: transparent;
86+
/* overflow-y: auto; */
8087
}
8188

8289
#app .context-switch {
83-
position: fixed;
84-
bottom: 50px;
85-
right: calc(50% - 220px);
86-
z-index: 3;
90+
position: fixed;
91+
bottom: 50px;
92+
right: calc(50% - 220px);
93+
z-index: 3;
8794
}
8895

8996
.is-avatar.is-rounded {
90-
border-radius: var(--bulma-radius-rounded);
97+
border-radius: var(--bulma-radius-rounded);
9198
}
9299

93100
.is-avatar.is-agent {
94-
display: flex;
95-
/* background-color: rgba(231, 236, 243, 0.7); */
96-
background-color: rgba(70, 79, 235, 0.25);
101+
display: flex;
102+
/* background-color: rgba(231, 236, 243, 0.7); */
103+
background-color: rgba(70, 79, 235, 0.25);
97104
}
98105

99106
.is-avatar.is-agent img {
100-
width: 75%;
101-
height: 75%;
102-
margin: 13%;
107+
width: 75%;
108+
height: 75%;
109+
margin: 13%;
103110
}
104111

105-
106-
107112
@keyframes moveImage {
108-
0% {
109-
transform: rotate(0deg);
110-
}
113+
0% {
114+
transform: rotate(0deg);
115+
}
111116

112-
50% {
113-
transform: rotate(-3deg);
114-
}
117+
50% {
118+
transform: rotate(-3deg);
119+
}
115120

116-
100% {
117-
transform: rotate(3deg);
118-
}
121+
100% {
122+
transform: rotate(3deg);
123+
}
119124
}
120125

121126
.is-avatar.is-agent img.manager {
122-
background-color: rgba(220, 56, 72, .35);
123-
box-shadow: 0 0 0 4px rgba(220, 56, 72, .35);
124-
animation: moveImage .3s infinite alternate;
127+
background-color: rgba(220, 56, 72, 0.35);
128+
box-shadow: 0 0 0 4px rgba(220, 56, 72, 0.35);
129+
animation: moveImage 0.3s infinite alternate;
125130
}
126131

127132
.is-avatar.is-agent img.hr_agent {
128-
background-color: rgba(0, 209, 178, .35);
129-
box-shadow: 0 0 0 4px rgba(0, 209, 178, .35);
130-
animation: moveImage .5s infinite alternate;
133+
background-color: rgba(0, 209, 178, 0.35);
134+
box-shadow: 0 0 0 4px rgba(0, 209, 178, 0.35);
135+
animation: moveImage 0.5s infinite alternate;
131136
}
132137

133138
.is-avatar.is-agent img.procurement_agent {
134-
background-color: rgba(255, 183, 15, .35);
135-
box-shadow: 0 0 0 4px rgba(255, 183, 15, .35);
136-
animation: moveImage .1s infinite alternate;
139+
background-color: rgba(255, 183, 15, 0.35);
140+
box-shadow: 0 0 0 4px rgba(255, 183, 15, 0.35);
141+
animation: moveImage 0.1s infinite alternate;
137142
}
138143

139144
.is-avatar.is-agent img.tech_agent {
140-
background-color: rgba(178, 222, 39, .35);
141-
box-shadow: 0 0 0 4px rgba(178, 222, 39, .35);
142-
animation: moveImage .7s infinite alternate;
145+
background-color: rgba(178, 222, 39, 0.35);
146+
box-shadow: 0 0 0 4px rgba(178, 222, 39, 0.35);
147+
animation: moveImage 0.7s infinite alternate;
143148
}
144149

145150
.is-avatar.is-agent img.unknown {
146-
background-color: rgba(39, 57, 222, 0.35);
147-
box-shadow: 0 0 0 4px rgba(39, 57, 222, 0.35);
148-
animation: moveImage .7s infinite alternate;
151+
background-color: rgba(39, 57, 222, 0.35);
152+
box-shadow: 0 0 0 4px rgba(39, 57, 222, 0.35);
153+
animation: moveImage 0.7s infinite alternate;
149154
}
150155

151156
.is-avatar.has-status::after {
152-
content: "";
153-
position: absolute;
154-
bottom: 0;
155-
right: 0;
156-
width: 30%;
157-
height: 30%;
158-
border-radius: 50%;
159-
background-color: rgb(255, 255, 255);
160-
border: 2px solid rgb(255, 255, 255);
157+
content: "";
158+
position: absolute;
159+
bottom: 0;
160+
right: 0;
161+
width: 30%;
162+
height: 30%;
163+
border-radius: 50%;
164+
background-color: rgb(255, 255, 255);
165+
border: 2px solid rgb(255, 255, 255);
161166
}
162167

163168
.is-avatar.has-status.has-status-active::after {
164-
background-color: hsl(var(--bulma-success-h), var(--bulma-success-s), var(--bulma-success-l));
169+
background-color: hsl(
170+
var(--bulma-success-h),
171+
var(--bulma-success-s),
172+
var(--bulma-success-l)
173+
);
165174
}
166175

167176
.is-avatar.has-status.has-status-busy::after {
168-
background-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l));
177+
background-color: hsl(
178+
var(--bulma-danger-h),
179+
var(--bulma-danger-s),
180+
var(--bulma-danger-l)
181+
);
169182
}
170183

171184
.is-avatar.has-status.has-status-paused::after {
172-
background-color: hsl(var(--bulma-dark-h), var(--bulma-dark-s), var(--bulma-dark-l));
185+
background-color: hsl(
186+
var(--bulma-dark-h),
187+
var(--bulma-dark-s),
188+
var(--bulma-dark-l)
189+
);
173190
}
174191

175192
.button.is-greyed-out {
176-
background-color: #e0e0e0;
177-
color: lightgrey;
178-
cursor: not-allowed;
193+
background-color: #e0e0e0;
194+
color: lightgrey;
195+
cursor: not-allowed;
179196
}
180197

181198
.button.is-selected {
182-
background-color: #d3d3d3;
183-
color: #000;
199+
background-color: #d3d3d3;
200+
color: #000;
184201
}
185202

186-
187203
.notyf__toast {
188-
max-width: 100% !important;
189-
border-radius: var(--bulma-control-radius) !important;
204+
max-width: 100% !important;
205+
border-radius: var(--bulma-control-radius) !important;
190206
}
191207

192208
.notyf__wrapper {
193-
padding: 0.75rem 0.5rem !important;
194-
}
209+
padding: 0.75rem 0.5rem !important;
210+
}
211+
/* Menu list scroll style start*/
212+
#app .asside .menu-list {
213+
max-height: 300px;
214+
overflow-y: scroll;
215+
padding-right: 2px;
216+
transition: all 0.3s ease;
217+
box-sizing: border-box;
218+
}
219+
/* Hide the scrollbar initially (before hover) */
220+
#app .asside .menu-list::-webkit-scrollbar {
221+
width: 8px;
222+
opacity: 0;
223+
visibility: hidden;
224+
transition: opacity 0.3s ease, visibility 0s 0.3s;
225+
}
226+
/* Style the scrollbar thumb (the draggable part) */
227+
#app .asside .menu-list::-webkit-scrollbar-thumb {
228+
border-radius: 10px;
229+
transition: background-color 0.3s ease;
230+
}
231+
/* Show the scrollbar and thumb when hovering */
232+
#app .asside .menu-list:hover::-webkit-scrollbar {
233+
opacity: 1;
234+
visibility: visible;
235+
transition: opacity 0.3s ease, visibility 0s;
236+
}
237+
/* Style the thumb when hovering */
238+
#app .asside .menu-list:hover::-webkit-scrollbar-thumb {
239+
background-color: rgba(0, 0, 0, 0.2);
240+
}
241+
/* Menu list scroll style end*/

‎src/frontend/wwwroot/assets/Send.svg‎

Lines changed: 10 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)