File tree Expand file tree Collapse file tree 1 file changed +18
-33
lines changed
Expand file tree Collapse file tree 1 file changed +18
-33
lines changed Original file line number Diff line number Diff line change 262262 width : 100% ;
263263 border : none;
264264 }
265- .info-icon {
265+ .info-box {
266+ display : none; /* Hidden by default */
267+ position : absolute;
268+ top : 100% ; /* Positioned directly below the "i" icon */
269+ left : 50% ;
270+ transform : translateX (-50% ); /* Centers the box relative to the "i" icon */
271+ background-color : # fff ;
272+ border : 1px solid # ccc ;
273+ padding : 10px ;
274+ max-width : 300px ;
275+ box-shadow : 0px 4px 6px rgba (0 , 0 , 0 , 0.1 );
276+ z-index : 1000 ;
277+ white-space : normal;
278+ border-radius : 8px ; /* Smooth rounded corners */
279+ }
280+
281+ .info-icon {
266282 font-size : 1.2rem ;
267283 cursor : pointer;
268284 font-weight : bold;
269285 color : # 0073e6 ;
270286 margin-left : 5px ;
271287 padding : 5px ;
272- border-radius : 50% ; /* Makes the icon circular */
288+ border-radius : 50% ; /* Circular icon */
273289 background-color : # f1f1f1 ; /* Light gray background for contrast */
274290 display : inline-flex;
275291 justify-content : center;
285301 background-color : # 0073e6 ;
286302 color : white;
287303}
288-
289- .info-box {
290- display : none;
291- position : absolute;
292- top : 100% ; /* Positioned directly below the "i" icon */
293- left : 50% ;
294- transform : translateX (-50% ); /* Centers the box relative to the "i" icon */
295- background-color : # fff ;
296- border : 1px solid # ccc ;
297- padding : 10px ;
298- max-width : 300px ;
299- box-shadow : 0px 4px 6px rgba (0 , 0 , 0 , 0.1 );
300- z-index : 1000 ;
301- white-space : normal;
302- border-radius : 8px ; /* Smooth rounded corners */
303- }
304-
305- .close-info {
306- background-color : # 0073e6 ;
307- color : white;
308- padding : 5px 10px ;
309- border : none;
310- cursor : pointer;
311- margin-top : 10px ;
312- font-family : 'Times New Roman' , Times, serif;
313- }
314-
315- .close-info : hover {
316- background-color : # 005bb5 ;
317- }
318-
319304 </ style >
320305</ head >
321306< body >
You can’t perform that action at this time.
0 commit comments