@@ -743,4 +743,105 @@ html,
743743
744744.context-menu-item : hover {
745745 background-color : var (--context-menu-hover );
746+ }
747+
748+ /* Modals */
749+ .modal-overlay {
750+ position : fixed;
751+ top : 0 ;
752+ left : 0 ;
753+ right : 0 ;
754+ bottom : 0 ;
755+ background-color : var (--bg-modal-overlay );
756+ display : flex;
757+ justify-content : center;
758+ align-items : center;
759+ z-index : 10000 ;
760+ backdrop-filter : blur (4px );
761+ animation : fadeIn 0.2s ease-out;
762+ }
763+
764+ .modal-dialog ,
765+ .modal-content {
766+ background-color : var (--bg-modal );
767+ color : var (--color-text-modal );
768+ padding : 28px ;
769+ border-radius : 12px ;
770+ box-shadow : 0 15px 35px var (--shadow-xl );
771+ max-width : 500px ;
772+ width : 90% ;
773+ border : 1px solid var (--border-card );
774+ animation : slideIn 0.3s cubic-bezier (0.16 , 1 , 0.3 , 1 );
775+ }
776+
777+ .modal-dialog h2 ,
778+ .modal-content h2 {
779+ margin-top : 0 ;
780+ margin-bottom : 16px ;
781+ font-size : 1.5rem ;
782+ color : var (--color-text-primary );
783+ }
784+
785+ .modal-dialog p ,
786+ .modal-content p {
787+ line-height : 1.6 ;
788+ opacity : 0.9 ;
789+ margin-bottom : 24px ;
790+ }
791+
792+ .modal-actions {
793+ display : flex;
794+ justify-content : flex-end;
795+ gap : 12px ;
796+ margin-top : 8px ;
797+ }
798+
799+ .modal-button {
800+ padding : 10px 22px ;
801+ border-radius : 8px ;
802+ font-weight : 500 ;
803+ font-size : 0.95rem ;
804+ cursor : pointer;
805+ transition : all 0.2s ease;
806+ border : none;
807+ }
808+
809+ .modal-button .primary ,
810+ .modal-button .submit-button {
811+ background : linear-gradient (135deg , var (--btn-mermaid-gradient-start ) 0% , var (--btn-mermaid-gradient-end ) 100% );
812+ color : white;
813+ }
814+
815+ .modal-button .primary : hover ,
816+ .modal-button .submit-button : hover {
817+ background : linear-gradient (135deg , var (--btn-mermaid-hover-gradient-start ) 0% , var (--btn-mermaid-hover-gradient-end ) 100% );
818+ transform : translateY (-1px );
819+ }
820+
821+ .modal-button .cancel ,
822+ .modal-button .cancel-button {
823+ background-color : rgba (255 , 255 , 255 , 0.05 );
824+ color : var (--color-text-modal );
825+ border : 1px solid var (--border-secondary );
826+ }
827+
828+ .modal-button .cancel : hover ,
829+ .modal-button .cancel-button : hover {
830+ background-color : rgba (255 , 255 , 255 , 0.1 );
831+ }
832+
833+ @keyframes fadeIn {
834+ from { opacity : 0 ; }
835+ to { opacity : 1 ; }
836+ }
837+
838+ @keyframes slideIn {
839+ from {
840+ opacity : 0 ;
841+ transform : translateY (20px );
842+ }
843+ to {
844+ opacity : 1 ;
845+ transform : translateY (0 );
846+ }
746847}
0 commit comments