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
1114body {
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 );
36+ }
37+ ul # tasksStats .menu-list {
38+ min-height : 100px ;
2939}
30-
3140@media (min-width : 1800px ) {
32- # app .asside {
33- max-width : 400px ;
34- }
41+ # app .asside {
42+ max-width : 400px ;
43+ }
3544}
3645
3746# app .menu-logo {
38- font-size : 1.25rem ;
39- font-weight : 700 ;
40- cursor : pointer;
47+ font-size : 1.25rem ;
48+ font-weight : 700 ;
49+ cursor : pointer;
4150}
4251
4352# app .menu-logo img {
44- width : 30px ;
53+ width : 30px ;
4554}
4655
4756# app .asside .menu-list a {
48- background-color : transparent;
57+ background-color : transparent;
4958}
5059
5160# app .asside .menu-list a .is-active {
52- background-color : rgb (71 , 80 , 235 );
61+ background-color : rgb (71 , 80 , 235 );
5362}
5463
5564# app .asside .menu-list a .is-active i {
56- color : white !important ;
65+ color : white !important ;
5766}
5867
5968# app .asside .menu-list a .is-active : hover {
60- background-color : rgb (71 , 80 , 235 );
69+ background-color : rgb (71 , 80 , 235 );
6170}
6271
6372# app .asside .menu-list a .menu-task {
64- display : flex;
65- align-items : center;
73+ display : flex;
74+ align-items : center;
6675}
6776
6877# app .asside .menu-list a .menu-task span {
69- flex : 1 ;
78+ flex : 1 ;
7079}
7180
7281# app .asside .menu-list a : hover {
73- background-color : rgba (0 , 0 , 0 , 0.1 );
82+ background-color : rgba (0 , 0 , 0 , 0.1 );
7483}
7584
7685# app .iframe {
77- width : 100% ;
78- background-color : transparent;
79- overflow-y : auto;
86+ width : 100% ;
87+ background-color : transparent;
8088}
8189
8290# app .context-switch {
83- position : fixed;
84- bottom : 50px ;
85- right : calc (50% - 220px );
86- z-index : 3 ;
91+ position : fixed;
92+ bottom : 50px ;
93+ right : calc (50% - 220px );
94+ z-index : 3 ;
8795}
8896
8997.is-avatar .is-rounded {
90- border-radius : var (--bulma-radius-rounded );
98+ border-radius : var (--bulma-radius-rounded );
9199}
92100
93101.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 );
102+ display : flex;
103+ /* background-color: rgba(231, 236, 243, 0.7); */
104+ background-color : rgba (70 , 79 , 235 , 0.25 );
97105}
98106
99107.is-avatar .is-agent img {
100- width : 75% ;
101- height : 75% ;
102- margin : 13% ;
108+ width : 75% ;
109+ height : 75% ;
110+ margin : 13% ;
103111}
104112
105-
106-
107113@keyframes moveImage {
108- 0% {
109- transform : rotate (0deg );
110- }
114+ 0% {
115+ transform : rotate (0deg );
116+ }
111117
112- 50% {
113- transform : rotate (-3deg );
114- }
118+ 50% {
119+ transform : rotate (-3deg );
120+ }
115121
116- 100% {
117- transform : rotate (3deg );
118- }
122+ 100% {
123+ transform : rotate (3deg );
124+ }
119125}
120126
121127.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;
128+ background-color : rgba (220 , 56 , 72 , 0 .35 );
129+ box-shadow : 0 0 0 4px rgba (220 , 56 , 72 , 0 .35 );
130+ animation : moveImage 0 .3s infinite alternate;
125131}
126132
127133.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;
134+ background-color : rgba (0 , 209 , 178 , 0 .35 );
135+ box-shadow : 0 0 0 4px rgba (0 , 209 , 178 , 0 .35 );
136+ animation : moveImage 0 .5s infinite alternate;
131137}
132138
133139.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;
140+ background-color : rgba (255 , 183 , 15 , 0 .35 );
141+ box-shadow : 0 0 0 4px rgba (255 , 183 , 15 , 0 .35 );
142+ animation : moveImage 0 .1s infinite alternate;
137143}
138144
139145.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;
146+ background-color : rgba (178 , 222 , 39 , 0 .35 );
147+ box-shadow : 0 0 0 4px rgba (178 , 222 , 39 , 0 .35 );
148+ animation : moveImage 0 .7s infinite alternate;
143149}
144150
145151.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;
152+ background-color : rgba (39 , 57 , 222 , 0.35 );
153+ box-shadow : 0 0 0 4px rgba (39 , 57 , 222 , 0.35 );
154+ animation : moveImage 0 .7s infinite alternate;
149155}
150156
151157.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 );
158+ content : "" ;
159+ position : absolute;
160+ bottom : 0 ;
161+ right : 0 ;
162+ width : 30% ;
163+ height : 30% ;
164+ border-radius : 50% ;
165+ background-color : rgb (255 , 255 , 255 );
166+ border : 2px solid rgb (255 , 255 , 255 );
161167}
162168
163169.is-avatar .has-status .has-status-active ::after {
164- background-color : hsl (var (--bulma-success-h ), var (--bulma-success-s ), var (--bulma-success-l ));
170+ background-color : hsl (
171+ var (--bulma-success-h ),
172+ var (--bulma-success-s ),
173+ var (--bulma-success-l )
174+ );
165175}
166176
167177.is-avatar .has-status .has-status-busy ::after {
168- background-color : hsl (var (--bulma-danger-h ), var (--bulma-danger-s ), var (--bulma-danger-l ));
178+ background-color : hsl (
179+ var (--bulma-danger-h ),
180+ var (--bulma-danger-s ),
181+ var (--bulma-danger-l )
182+ );
169183}
170184
171185.is-avatar .has-status .has-status-paused ::after {
172- background-color : hsl (var (--bulma-dark-h ), var (--bulma-dark-s ), var (--bulma-dark-l ));
186+ background-color : hsl (
187+ var (--bulma-dark-h ),
188+ var (--bulma-dark-s ),
189+ var (--bulma-dark-l )
190+ );
173191}
174192
175193.button .is-greyed-out {
176- background-color : # e0e0e0 ;
177- color : lightgrey;
178- cursor : not-allowed;
194+ background-color : # e0e0e0 ;
195+ color : lightgrey;
196+ cursor : not-allowed;
179197}
180198
181199.button .is-selected {
182- background-color : # d3d3d3 ;
183- color : # 000 ;
200+ background-color : # d3d3d3 ;
201+ color : # 000 ;
184202}
185203
186-
187204.notyf__toast {
188- max-width : 100% !important ;
189- border-radius : var (--bulma-control-radius ) !important ;
205+ max-width : 100% !important ;
206+ border-radius : var (--bulma-control-radius ) !important ;
190207}
191208
192209.notyf__wrapper {
193- padding : 0.75rem 0.5rem !important ;
194- }
210+ padding : 0.75rem 0.5rem !important ;
211+ }
212+ /* Menu list scroll style start*/
213+ # app .asside .menu-list {
214+ max-height : 300px ;
215+ overflow-y : scroll;
216+ padding-right : 2px ;
217+ transition : all 0.3s ease;
218+ box-sizing : border-box;
219+ }
220+ /* Hide the scrollbar initially (before hover) */
221+ # app .asside .menu-list ::-webkit-scrollbar {
222+ width : 8px ;
223+ opacity : 0 ;
224+ visibility : hidden;
225+ transition : opacity 0.3s ease, visibility 0s 0.3s ;
226+ }
227+ /* Style the scrollbar thumb (the draggable part) */
228+ # app .asside .menu-list ::-webkit-scrollbar-thumb {
229+ border-radius : 10px ;
230+ transition : background-color 0.3s ease;
231+ }
232+ /* Show the scrollbar and thumb when hovering */
233+ # app .asside .menu-list : hover ::-webkit-scrollbar {
234+ opacity : 1 ;
235+ visibility : visible;
236+ transition : opacity 0.3s ease, visibility 0s ;
237+ }
238+ /* Style the thumb when hovering */
239+ # app .asside .menu-list : hover ::-webkit-scrollbar-thumb {
240+ background-color : rgba (0 , 0 , 0 , 0.2 );
241+ }
242+ /* Menu list scroll style end*/
0 commit comments