402402text-align : center;
403403cursor : pointer;
404404}
405+ /* variable popup */
406+ .vp-variable-popup-box {
407+ position : absolute;
408+ left : calc (50% - 135px );
409+ top : calc (50% - 135px );
410+ min-width : 370px ;
411+ min-height : 370px ;
412+ width : 370px ;
413+ height : 370px ;
414+ background-color : white;
415+ z-index : 200 ;
416+ border : 0.25px solidvar (--border-gray-color );
417+ box-shadow : 1px 1px 2px rgb (0 0 0 / 10% );
418+ }
419+ .vp-variable-popup-header {
420+ position : relative;
421+ height : 30px ;
422+ background : var (--light-gray-color );
423+ border-bottom : 1px solidvar (--border-gray-color );
424+ }
425+ .vp-variable-popup-title {
426+ line-height : 33px ;
427+ width : calc (100% - 30px );
428+ height : 30px ;
429+ padding-left : 10px ;
430+ font-size : 15px ;
431+ color : var (--font-primary );
432+ cursor : pointer;
433+ }
434+ .vp-variable-popup-body {
435+ height : calc (100% - 70px );
436+ padding : 10px ;
437+ }
438+ .vp-variable-popup-button-box {
439+ float : right;
440+ margin : 0 10px 10px 0 ;
441+ }
442+ .vp-variable-popup-close {
443+ position : absolute;
444+ width : 20px ;
445+ height : 20px ;
446+ top : 4px ;
447+ right : 5px ;
448+ z-index : 3 ;
449+ line-height : 20px ;
450+ text-align : center;
451+ cursor : pointer;
452+ }
453+ /* body top-bar */
454+ .vp-popup-body-top-bar {
455+ text-align : right;
456+ }
457+ .vp-popup-body-top-bar-item {
458+ margin-bottom : 5px ;
459+ }
460+ .vp-popup-body-top-bar-item : hover {
461+ color : var (--font-hightlight );
462+ }
463+ .vp-popup-body-top-bar-item img {
464+ -moz-box-sizing : border-box;
465+ box-sizing : border-box;
466+ width : 22px ;/* Width of new image */
467+ height : 22px ;/* Height of new image */
468+ padding-left : 22px ;/* Equal to width of new image */
469+ margin-bottom : 5px ;
470+ }
471+ .vp-popup-body-top-bar-item [data-type = "import" ]img {
472+ background : url(../ ../ vis ualpython/img/import.svg) no-repeat;
473+ }
474+ .vp-popup-body-top-bar-item [data-type = "import" ]: hover img {
475+ background : url(../ ../ vis ualpython/img/import_activated.svg) no-repeat;
476+ }
477+ .vp-popup-body-top-bar-item [data-type = "package" ] {
478+ margin-left : 10px ;
479+ }
480+ .vp-popup-body-top-bar-item [data-type = "package" ]img {
481+ background : url(../ ../ vis ualpython/img/setting.svg) no-repeat;
482+ }
483+ .vp-popup-body-top-bar-item [data-type = "package" ]: hover img {
484+ background : url(../ ../ vis ualpython/img/setting_activated.svg) no-repeat;
485+ }