@@ -550,22 +550,19 @@ abbr {
550
550
border-radius : var (--br-lg );
551
551
padding : 0.75em ;
552
552
text-align : start;
553
- filter : grayscale (100% );
554
553
555
554
& : is (: hover , : focus-visible ) {
556
- outline : 3px solid var (--clr-border-primary );
557
- filter : grayscale (0 );
555
+ outline : 2px solid var (--clr-border-primary );
558
556
}
559
557
}
560
558
561
559
.snippet__preview {
562
560
width : 100% ;
563
561
overflow : hidden;
564
- aspect-ratio : 10 / 3 ;
562
+ aspect-ratio : 9 / 3 ;
565
563
background-color : var (--clr-bg-secondary );
566
564
/* background-image: var(--gradient-secondary); */
567
565
border : 1px solid var (--clr-border-primary );
568
- border-radius : var (--br-md );
569
566
position : relative;
570
567
padding-inline : 1em ;
571
568
display : grid;
@@ -599,20 +596,34 @@ body:has(.modal-overlay) {
599
596
600
597
.modal {
601
598
background-color : var (--clr-bg-secondary );
602
- padding : 2rem ;
603
- width : 90% ;
604
- max-width : 800px ;
599
+ width : fit-content;
600
+ min-width : 50% ;
601
+ max-width : 1000px ;
602
+ max-height : 90% ;
605
603
border-radius : var (--br-lg );
606
604
box-shadow : 0 4px 12px rgba (0 , 0 , 0 , 0.3 );
605
+ gap : 0 ;
607
606
position : relative;
608
- gap : 1 rem ;
607
+ overflow : auto ;
609
608
}
610
609
611
610
.modal__header {
611
+ z-index : 50 ;
612
612
display : flex;
613
+ position : sticky;
614
+ top : 0 ;
613
615
align-items : center;
614
616
justify-content : space-between;
615
617
gap : 1rem ;
618
+ padding : 1rem 1.5rem ;
619
+ background-color : var (--clr-bg-secondary );
620
+ border-radius : var (--br-lg );
621
+ }
622
+
623
+ .modal__body {
624
+ padding : 1.5rem ;
625
+ padding-top : 0 ;
626
+ gap : 1rem ;
616
627
}
617
628
618
629
.code-preview {
0 commit comments