visualpython · minjk-bl · Feb 4, 2022 · Jan 21, 2022 · Jan 21, 2022 · Jan 21, 2022
diff --git a/css/boardFrame.css b/css/boardFrame.css
@@ -217,6 +217,7 @@
     background-position: center;
     background-repeat: no-repeat; 
     color: transparent;
+    cursor: pointer;
 }
 
 /* block color labeling */

diff --git a/css/component/infoModal.css b/css/component/infoModal.css
@@ -0,0 +1,53 @@
+#vp_infoModal {
+    position: fixed;
+    top: 0; 
+    left: 0;
+    width: 100%; 
+    height: 100%; 
+    z-index: 400;
+    background-color: rgba(0,0,0,.4);
+}
+.vp-infoModal-container {
+    position: relative;
+    left: 50%;
+    top: 50%;
+    transform:translate(-50%, -50%);
+    width: 400px; 
+    height: 150px;
+    padding: 2rem;
+    background-color: white;
+    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+    font-family: AppleSDGothicNeo;
+}
+.vp-infoModal-inner {
+    width: 100%;
+    height: 100%;
+    border-radius: 30px;
+}
+.vp-infoModal-input-button:hover {
+    cursor: pointer;
+    transition: 0.7s;
+    outline: 0;
+}
+.vp-infoModal-icon {
+    font-size: 26px;
+    color: var(--font-primary);
+}
+.vp-infoModal-titleStr {
+    color: var(--font-primary);
+    font-size: 13px;
+    font-weight: 700;
+}
+.vp-infoModal-style-flex-column-evenly {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-evenly;
+}
+.vp-infoModal-style-flex-row-center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.vp-infoModal-style-text-center {
+    text-align: center;
+}
diff --git a/css/component/modal.css b/css/component/modal.css
@@ -18,6 +18,7 @@
     padding: 2rem;
 	background-color: white;
 	box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.2);
+	font-family: AppleSDGothicNeo;
 }
 #vp_multiButtonModal .vp-multi-button-modal-message {
 	display: flex;
@@ -40,26 +41,6 @@
     align-items: center;
 	height: 80%;
 }
-#vp_multiButtonModal .vp-modal-button {
-	min-width: 100px;
-	height: 30px;
-	font-family: AppleSDGothicNeo;
-	font-style: normal;
-	font-weight: normal;
-	font-size: 14px;
-	line-height: 21px;
-	text-align: center;
-	color: var(--font-primary);
-	background: #F5F5F5;
-	border: 0.25px solid #C4C4C4;
-	box-sizing: border-box;
-	border-radius: 2px;
-}
-#vp_multiButtonModal .vp-modal-button:nth(2) {
-	background-color: var(--font-hightlight);
-	color: white;
-	margin-right: 10px;
-}
 #vp_multiButtonModal .vp-multi-button-modal-buttons {
 	display: flex;
 	align-items: center;

diff --git a/css/m_apps/chart.css b/css/m_apps/chart.css
@@ -235,8 +235,7 @@
 }
 .vp-var-view-box table.vp-option-table.vp-var-view-list,
 .vp-var-view-box table.vp-option-table.vp-var-view-detail {
-    margin-left: 10px;
-    margin-top: 7px;
+    padding: 5px;
 }
 .vp-var-view-box .vp-var-view-list tbody tr:hover {
     background: #C4C4C4;
@@ -247,19 +246,17 @@
     color:  var(--font-hightlight);
 }
 .vp-var-view-box .var-view-footer {
-    padding-left: 10px;
-    padding-bottom: 7px;
+    margin-top: 7px;
 }
 .vp-var-view-box .var-view-footer input[type="text"] {
-    width: 200px;
+    width: 210px;
 }
 
 /* Column Selector */
 .vp-column-select,
 .vp-method-select {
     border: 0.25px solid #C4C4C4;
     overflow-y: auto;
-    width: 250px;
     height: 100px;
 }
 .vp-column-select-item,
@@ -278,8 +275,4 @@
 .vp-select-data {
     width: 80px;
     height: 30px;
-    background: #F5F5F5;
-    border: 0.25px solid #C4C4C4;
-    box-sizing: border-box;
-    border-radius: 2px;
 }
diff --git a/css/m_apps/frame.css b/css/m_apps/frame.css
@@ -249,7 +249,6 @@
 }
 .vp-inner-popup-addtype {
     width: 153px;
-    margin-top: 5px;
 }
 .vp-inner-popup-delete {
     padding-bottom: 20px;
@@ -261,11 +260,8 @@
     max-height: 350px;
 }
 .vp-inner-popup-replace-add {
-    margin-top: 30px
+    margin-top: 10px
 }
 .vp-inner-popup-apply-column {
     width: 153px;
-}
-.vp-inner-popup-apply-lambda{
-    margin-top: 5px;
 }
diff --git a/css/m_library/libraryComponent.css b/css/m_library/libraryComponent.css
@@ -1,10 +1,6 @@
 .vp-popup-frame .vp-option-page table.vp-option-table {
     width: 100%;
 }
-.vp-popup-frame .vp-option-page table.vp-option-table td {
-    padding-top: 4.5px;
-    padding-bottom: 2.5px;
-}
 .vp-popup-frame .vp-option-page .vp-option-table select.var-multi, select.option-multi {
     height: 60px;
 }
@@ -28,14 +24,12 @@
 
 /* Input & Select Design */
 .vp-popup-frame .vp-input {
-    width: 176px;
     height: 30px;
     background-color: #FFFFFF;
     box-sizing: border-box;
     padding: 0px 5px 0px 5px;
 }
 .vp-popup-frame .vp-select {
-    width: 176px;
     height: 30px;
     background-color: #F5F5F5;
     box-sizing: border-box;

diff --git a/css/m_library/numpyComponent.css b/css/m_library/numpyComponent.css
@@ -0,0 +1,139 @@
+.vp-popup-frame .vp-option-page table.vp-option-table {
+    width: 100%;
+}
+.vp-popup-frame .vp-option-page .vp-option-table select.var-multi, select.option-multi {
+    height: 60px;
+}
+
+/* Function Button */
+.vp-popup-frame #vp_functionList .vp_funcButton {
+    background-color: white;
+    padding: 3px 7px 3px 7px;
+    margin-right: 5px;
+    margin-bottom: 5px;
+    border: 1px solid #535353;
+}
+.vp-popup-frame #vp_functionList .vp_funcButton:hover {
+    background-color: lightgray;
+}
+.vp-popup-frame #vp_functionList .vp_funcButton.active {
+    color: white;
+    background-color: #535353;
+    cursor: default;
+}
+
+/* Input & Select Design */
+.vp-popup-frame .vp-input {
+    height: 30px;
+    background-color: #FFFFFF;
+    box-sizing: border-box;
+    padding: 0px 5px 0px 5px;
+}
+.vp-popup-frame .vp-select {
+    height: 30px;
+    background-color: #F5F5F5;
+    box-sizing: border-box;
+    /* select tag arrow */
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding: 0px 5px 0px 5px;
+    cursor: pointer;
+}
+
+/* Select Option Design */
+.vp-popup-frame .vp-select * {
+    background-color: white;
+    color: #696969;
+}
+
+/* Input & Select Design - width m&s */
+.vp-popup-frame .vp-input.m,
+.vp-popup-frame .vp-select.m {
+    width: 116px;
+}
+.vp-popup-frame .vp-input.s,
+.vp-popup-frame .vp-select.s {
+    width: 55px;
+}
+
+/* Range */
+.vp-popup-frame .vp-range {
+    display: inline;
+    width: 116px;
+}
+.vp-popup-frame .vp-textarea {
+    border: 0.25px solid var(--border-gray-color);
+    width: 100%;
+    height: 100px;
+    margin: 0px;
+}
+
+/* Arrow Accordions */
+.vp-popup-frame .vp-option-page .vp-accordian-header {
+    font-weight: bold;
+}
+.vp-popup-frame .vp-option-page .vp-arrow-right,
+.vp-popup-frame .vp-option-page .vp-arrow-down {
+    background-repeat: no-repeat;
+}
+.vp-popup-frame .vp-option-page .vp-spread {
+    min-height: 100px;
+}
+.vp-popup-frame .vp-option-page .vp-minimize {
+    height: 25px;
+    overflow: hidden;
+}
+.vp-popup-frame .vp-pandas-block {
+    border-bottom: 1px solid darkgray;
+}
+
+/* Prefix & Postfix Text Area */
+.vp-popup-frame #vp_prefixBox textarea,
+.vp-popup-frame #vp_postfixBox textarea {
+    outline: none;
+    resize: none;
+    overflow: auto;
+}
+.no-selection {
+    -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+    -khtml-user-select: none; /* Konqueror HTML */
+    -moz-user-select: none; /* Old versions of Firefox */
+    -ms-user-select: none; /* Internet Explorer/Edge */
+    user-select: none; /* Non-prefixed version, currently
+                                supported by Chrome, Edge, Opera and Firefox */
+}
+
+/*
+ *  numpy style
+*/
+.vp-numpy-style-flex-row-center {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+.vp-numpy-style-flex-row-wrap {
+    display: flex;
+    flex-direction: row;
+    flex-flow: wrap;
+}
+.vp-numpy-style-flex-row {
+    display: flex;
+    flex-direction: row;
+}
+.vp-numpy-style-flex-column {
+    display: flex;
+    flex-direction: column;
+}
+.vp-numpy-style-flex-column-center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.vp-numpy-box-border {
+    border: 1px solid #E4E4E4;
+    border-radius: 5px;
+    box-sizing: border-box;
+    padding: 10px;
+}
diff --git a/css/menuFrame.css b/css/menuFrame.css
@@ -27,12 +27,22 @@
     background-color: #FFFFFF;
     border-bottom: 1px solid var(--border-gray-color);
 }
+.vp-version-updater {
+    display: none;
+    float: right;
+    position: relative;
+    font-size: 13px;
+    font-weight: bold;
+    color: var(--highlight-color);
+    margin: 8px 6px 8px 3px;
+    cursor: pointer;
+}
 .vp-menu-header-button {
     cursor: pointer;
 	background-image: url(../../visualpython/img/dot_menu.svg);
 	width: 19px;
 	height: 19px;
-	margin: 7px 10px 0px 0px;
+	margin: 5px 0px 0px 0px;
 	background-repeat: no-repeat;
 	background-size: contain;
 	background-position: center;
@@ -103,7 +113,7 @@
 #vp_headerExtraMenu {
     display: none;
     cursor: auto;
-    margin: 30px 7px 0px 0px;
+    margin: 30px 0px 0px 0px;
     width: 150px;
     float: right;
     background: #FFFFFF;

diff --git a/css/popupComponent.css b/css/popupComponent.css
@@ -270,7 +270,6 @@
     font-size: 13px;
     line-height: 16px;
     height: 30px;
-    margin-bottom: 5px;
     padding: 3px 7px;
     color: var(--font-primary);
     background: #FFFFFF;
@@ -347,13 +346,12 @@
 /* inner popup */
 .vp-inner-popup-box {
     position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
+    left: calc(50% - 200px);
+    top: calc(50% - 200px);
     min-width: 400px;
     min-height: 150px;
-    width: 30%;
-    height: fit-content;
+    width: 400px;
+    height: 400px;
     background-color: white;
     z-index: 200;
     border: 0.25px solid var(--border-gray-color);