.vp-fe-container { height: 100%; } .vp-fe-body { width: 100%; height: 100%; display: grid; grid-row-gap: 10px; /* grid-template-rows: 35px 30px 60% calc(40% - 80px); */ /* grid-template-rows: 35px 30px calc(100% - 80px); */ /* grid-template-rows: 35px 65px calc(100% - 110px); */ /* grid-template-rows: 35px 65px 35px calc(100% - 145px); */ grid-template-rows: 65px 30px calc(100% - 115px); grid-template-columns: 100%; } /* Code Preview */ .vp-fe-preview { width: 100%; height: 31px; background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); background-color: var(--vp-background-color); border: 0.25px solid var(--vp-border-gray-color); } .vp-fe-preview textarea { display: none; } .vp-fe-preview .CodeMirror-code .cm-variable { background-color: rgba(47, 133, 90, 0.2); } .vp-fe-preview .CodeMirror-code .cm-string { background-color: rgba(246, 173, 85, 0.2); } .vp-fe-df-box { display: grid; grid-template-rows: 30px; grid-row-gap: 5px; } .vp-fe-df-box label { width: 80px; font-weight: bold; } .vp-fe-container #vp_feVariable { width: 160px; } .vp-fe-df-refresh { display: inline-block; cursor: pointer; margin-left: 5px; /* LAB: img to background-image */ background: center / contain no-repeat url(../../img/refresh.svg); width: 18px; height: 19px; } .vp-fe-toolbar { /* border-top: 1px solid var(--vp-border-gray-color); */ /* padding-top: 5px; */ } .vp-fe-toolbar-item { width: 50px; height: 50px; /* margin-right: 5px; */ display: inline-block; border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 0.5px 0.5px 0.5px rgb(0 0 0 / 10%); border-radius: 3px; line-height: 40px; vertical-align: middle; cursor: pointer; padding: 5px; text-align: center; } .vp-fe-menu-box { position: absolute; top: 0; left: 0; background: var(--vp-background-color); z-index: 70; } .vp-fe-menu-box .vp-fe-menu-item { height: 30px; line-height: 30px; background: var(--vp-background-color); border: 0.25px solid var(--vp-border-gray-color); box-sizing: border-box; box-shadow: 1px 1px 2px rgb(0 0 0 / 10%); border-radius: 2px; font-size: 13px; text-align: left; color: #696969; cursor: pointer; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-overflow: ellipsis; /* overflow: hidden; */ white-space: nowrap; padding: 0px 5px; } .vp-fe-menu-box .vp-fe-menu-item:hover { background: #F8F8F8; } .vp-fe-menu-sub-box { display: none; position: absolute; left: 100%; } .vp-fe-menu-item:not(.disabled):hover .vp-fe-menu-sub-box { display: block; } .vp-fe-menu-item.disabled { color: var(--vp-gray-color); cursor: not-allowed; } .vp-fe-table { height: 97%; background: var(--vp-border-gray-color); border: 1px solid var(--vp-border-gray-color); overflow: auto; } .vp-fe-table table { border-collapse: separate; margin-top: 0px; margin-left: 0px; color: var(--vp-font-primary); font-size: 13px; } .vp-fe-table table th { /* no-selection for th */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .vp-fe-table thead th { position: sticky; top: 0; background-color: var(--vp-background-color); border-bottom: 1px solid var(--vp-border-gray-color); border-right: 1px solid var(--vp-border-gray-color); text-align: right; text-overflow: ellipsis; overflow: hidden; height: 30px !important; min-width: 80px; white-space: nowrap; } .vp-fe-table tbody tr:nth-child(odd) { background: #F5F5F5; } .vp-fe-table tbody tr:nth-child(even) { background: var(--vp-background-color); } .vp-fe-table th.selected { /* color: var(--vp-highlight-color); */ background: #add3fd; } .vp-fe-table th:hover { cursor: pointer; /* background: var(--vp-light-gray-color); */ /* background: rgba(66, 165, 245, 0.2); */ } .vp-fe-table-column-isnumeric { margin-right: 5px; vertical-align: middle; height: 15px; line-height: 15px; } /* Row Hover */ .vp-fe-table tbody tr:hover { background-color: rgba(66, 165, 245, 0.2); } /* Column Hover */ /* .vp-fe-table thead th:not(:first-child):hover::after { background: rgba(66, 165, 245, 0.2); content: ''; height: 100000px; left: 0; position: absolute; top: -5000px; width: 100%; z-index: -1; } */ .vp-fe-table tr th:nth-child(1), .vp-fe-add-column { min-width: 30px !important; } .vp-fe-table-more { margin: 10px; cursor: pointer; padding: 3px; background-color: white; } .vp-fe-table-more:hover { background-color: var(--vp-gray-color); } .vp-fe-info { display: none; position: absolute; width: 100%; height: 300px; bottom: 50px; background: #F7F7F7; border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } .vp-fe-info-title { width: 100%; height: 20px; line-height: 20px; font-weight: bold; background: #F5F5F5; padding: 0px 10px; } .vp-fe-info-content { width: 100%; height: calc(100% - 20px); overflow: auto; } .vp-fe-info-content pre { /* width: 300px; */ padding:10px; white-space: pre-wrap; overflow: auto; white-space: pre-wrap; /* CSS3*/ white-space: -moz-pre-wrap; /* Mozilla, since 1999 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ word-wrap: break-all; /* Internet Explorer 5.5+ */ } .vp-fe-preview-box { display: none; width: 100%; height: 100px; position: absolute; bottom: 50px; background: #F7F7F7; border: 0.25px solid var(--vp-border-gray-color); padding: 10px; } /* popup page */ /* add page */ .vp-inner-popup-addpage { height: 300px; padding: 10px; } .vp-inner-popup-addpage .vp-inner-popup-tab.replace { height: calc(100% - 60px); } .vp-inner-popup-addtype { width: 153px; } .vp-inner-popup-condition-use-text { position: sticky; left: 190px; } .vp-inner-popup-delete-value { display: inline-block; cursor: pointer; } .vp-inner-popup-delete { padding-bottom: 20px; } .vp-inner-popup-rename-page { max-height: 400px; } .vp-inner-popup-replace-table { max-height: 350px; } .vp-inner-popup-replace-add { margin-top: 10px } .vp-inner-popup-apply-column { width: 153px; } .vp-inner-popup-apply-target-name { width: 115px; } .vp-inner-popup-sortby { border: 0.25px solid var(--vp-border-gray-color); width: 160px; padding: 5px; min-height: 130px; } .vp-inner-popup-sortby-item { border-bottom: 0.25px solid var(--vp-border-gray-color); padding: 3px; cursor: pointer; height: 30px; } .vp-inner-popup-sortby-up { float: right; display: inline-block; } .vp-inner-popup-sortby-down { float: right; display: inline-block; } /* to datetime */ .vp-inner-popup-todt-addcol-content { display: grid; row-gap: 5px; max-height: 105px; } .vp-inner-popup-todt-addcol-head, .vp-inner-popup-todt-addcol-item { display: grid; grid-template-columns: 160px 160px auto; column-gap: 5px; } /* UDF Editor - CodeMirror */ .vp-fr-subset-box { width: 300px; } .vp-fr-subset-box .CodeMirror { display: inline-block; width: calc(100% - 55px); height: 30px; border: 1px solid var(--vp-gray-color); border-radius: 3px; background-image: repeating-linear-gradient( to right, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ), repeating-linear-gradient( to bottom, var(--vp-grid-line-color) 0, var(--vp-grid-line-color) 0.25px, transparent 1px, transparent 5px ); overflow: hidden; } .vp-fr-subset-box .CodeMirror-empty { outline: none; } .vp-fr-subset-box .CodeMirror-empty.CodeMirror-focused { outline: none; } .vp-fr-subset-box .CodeMirror pre.CodeMirror-placeholder { color: #999; } /* Hide cursor in read only fields */ .vp-fr-subset-box .CodeMirror-readonly .CodeMirror-cursor { display: none !important } /* .CodeMirror-scroll { min-height: 80px; max-height: 80px;} */ .vp-fr-subset-box .CodeMirror-code .cm-variable { background-color: rgba(47, 133, 90, 0.2); } .vp-fr-subset-box .CodeMirror-code .cm-property { background-color: rgba(246, 173, 85, 0.2); } .vp-fr-subset-box .vp-ds-button { width: 50px; min-width: 50px; vertical-align: top; }