@babylonjs/gui-editor 5.0.0-rc.3 → 5.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10214,7 +10214,7 @@ __webpack_require__.r(__webpack_exports__);
10214
10214
 
10215
10215
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default.a);
10216
10216
  // Module
10217
- ___CSS_LOADER_EXPORT___.push([module.i, ":root {\n --selectionGrey: #666666; }\n\n.ge-commands {\n grid-row: 1;\n grid-column: 1;\n user-select: none; }\n .ge-commands * {\n font-family: \"acumin-pro-condensed\";\n font-weight: 600;\n font-size: 12px; }\n .ge-commands .commands-left {\n float: left;\n display: flex; }\n .ge-commands .commands-right {\n float: right;\n display: flex; }\n .ge-commands.background-ts .command-button img, .ge-commands.background-ts .command-dropdown img {\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%); }\n .ge-commands.background-ts .command-button .command-dropdown-active, .ge-commands.background-ts .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-ts .command-button:hover img, .ge-commands.background-ts .command-button.activated img, .ge-commands.background-ts .command-dropdown:hover img, .ge-commands.background-ts .command-dropdown.activated img {\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important; }\n .ge-commands.background-js .command-button img, .ge-commands.background-js .command-dropdown img {\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg); }\n .ge-commands.background-js .command-button .command-dropdown-active, .ge-commands.background-js .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-js .command-button:hover img, .ge-commands.background-js .command-button.activated img, .ge-commands.background-js .command-dropdown:hover img, .ge-commands.background-js .command-dropdown.activated img {\n filter: invert(17%) !important; }\n .ge-commands .command-button {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-button .command-label {\n display: none; }\n .ge-commands .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-button:hover {\n background-color: var(--selectionGrey); }\n .ge-commands .command-button .active {\n transform-origin: center;\n background-color: var(--selectionGrey); }\n .ge-commands .command-button img.active {\n background-color: var(--selectionGrey); }\n .ge-commands .command-dropdown-root {\n position: relative;\n text-transform: uppercase;\n z-index: 1; }\n .ge-commands .command-dropdown {\n cursor: pointer;\n width: 55px;\n height: 55px; }\n .ge-commands .command-dropdown .command-dropdown-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-dropdown .command-dropdown-active {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center;\n font-size: 14px; }\n .ge-commands .command-dropdown:hover, .ge-commands .command-dropdown.activated {\n background-color: #666666;\n color: black; }\n .ge-commands .command-dropdown:active {\n transform-origin: center;\n transform: scale(0.95); }\n .ge-commands .command-dropdown-blocker {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: scale(1);\n z-index: 1; }\n .ge-commands.background-js .command-dropdown-content {\n background: #333333; }\n .ge-commands.background-js .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands.background-ts .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands .command-dropdown-content {\n background: #333333;\n position: absolute;\n top: 55px;\n width: 55px;\n transform: scale(1); }\n .ge-commands .command-dropdown-content.toRight {\n width: 120px; }\n .ge-commands .command-dropdown-content .command-dropdown-label {\n color: white;\n padding: 5px;\n padding-left: 7px;\n height: 35px;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n .ge-commands .command-dropdown-content .command-dropdown-label.active {\n font-weight: bold;\n font-size: 20px; }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover {\n background: var(--selectionGrey); }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-text {\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-check {\n grid-column: 2;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-arrow {\n grid-column: 2;\n grid-row: 1;\n font-size: 20px;\n font-weight: bold;\n padding-bottom: 10px;\n padding-left: 4px; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items {\n position: absolute;\n left: 200px;\n top: 0;\n width: 150px;\n display: none; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js {\n background: #bfabff; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts {\n background: #333333; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item {\n color: white;\n padding: 5px;\n padding-left: 10px;\n height: 35px;\n display: grid; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item.checked {\n background: white;\n color: black; }\n .ge-commands .command-dropdown-content .buttonLine {\n color: white;\n padding: 5px;\n padding-left: 7px;\n height: 35px;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative;\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .buttonLine input[type=\"file\"] {\n display: none; }\n .ge-commands .command-dropdown-content .buttonLine.active {\n font-weight: bold;\n font-size: 20px;\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover {\n background: var(--selectionGrey);\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .buttonLine .file-upload {\n cursor: pointer; }\n .ge-commands .divider {\n display: flex;\n align-items: center;\n border-right: 1px solid black;\n color: white; }\n .ge-commands .divider:last-of-type {\n border-right: none; }\n .ge-commands .divider.padded {\n padding-left: 10px;\n padding-right: 10px; }\n .ge-commands .floatLine, .ge-commands .checkBoxLine {\n display: flex;\n align-items: center; }\n .ge-commands .checkBoxLine .icon {\n filter: brightness(10); }\n .ge-commands .checkBoxLine .hidden {\n display: none; }\n .ge-commands .checkBoxLine .checkBox {\n height: 40px; }\n .ge-commands .color3Line {\n display: grid; }\n .ge-commands .color3Line .firstLine {\n display: flex;\n align-items: center; }\n .ge-commands .color3Line .firstLine .label {\n padding-right: 5px; }\n .ge-commands .color3Line .firstLine .textInputLine .value {\n padding-left: 2px; }\n .ge-commands .color3Line .firstLine .copy {\n display: none; }\n .ge-commands .color3Line .firstLine .expand {\n display: none; }\n .ge-commands .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n .ge-commands .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n .ge-commands .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n .ge-commands .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n .ge-commands .color-picker {\n height: 26px;\n width: 26px; }\n .ge-commands .color-picker .color-rect-background {\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n border: 1px solid white;\n cursor: pointer;\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50%/100% 100%; }\n .ge-commands .color-picker .color-rect-background .color-rect {\n height: 100%; }\n .ge-commands .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 2; }\n .ge-commands .color-picker .color-picker-float {\n position: absolute; }\n .ge-commands .floatLine input, .ge-commands .listLine select {\n background-color: #000000;\n color: white;\n margin: 5px;\n outline: none;\n padding: 5px;\n border: none; }\n .ge-commands .listLine select {\n width: 150px; }\n", "",{"version":3,"sources":["webpack://./scss/commandBar.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --selectionGrey: #666666;\r\n}\r\n\r\n.ge-commands {\r\n * {\r\n font-family: \"acumin-pro-condensed\";\r\n font-weight: 600;\r\n font-size: 12px;\r\n }\r\n grid-row: 1;\r\n grid-column: 1;\r\n user-select: none;\r\n\r\n .commands-left {\r\n float: left;\r\n display: flex;\r\n }\r\n\r\n .commands-right {\r\n float: right;\r\n display: flex;\r\n }\r\n\r\n &.background-ts {\r\n .command-button, .command-dropdown {\r\n img {\r\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover, &.activated {\r\n img {\r\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important;\r\n }\r\n } \r\n }\r\n }\r\n\r\n &.background-js {\r\n .command-button, .command-dropdown {\r\n img {\r\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover, &.activated {\r\n img {\r\n filter: invert(17%) !important;\r\n }\r\n } \r\n }\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n &:hover {\r\n background-color: var(--selectionGrey);\r\n } \r\n \r\n .active {\r\n transform-origin: center;\r\n background-color: var(--selectionGrey);\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: var(--selectionGrey);\r\n }\r\n }\r\n }\r\n\r\n .command-dropdown-root {\r\n position: relative;\r\n text-transform: uppercase;\r\n z-index: 1;\r\n }\r\n\r\n .command-dropdown { \r\n cursor: pointer;\r\n width: 55px;\r\n height: 55px;\r\n\r\n .command-dropdown-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n .command-dropdown-active {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n }\r\n\r\n &:hover, &.activated {\r\n background-color:#666666;\r\n color: black;\r\n } \r\n \r\n &:active {\r\n transform-origin: center;\r\n transform: scale(0.95);\r\n }\r\n }\r\n\r\n .command-dropdown-blocker {\r\n position: absolute; \r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n transform: scale(1);\r\n z-index: 1;\r\n }\r\n\r\n &.background-js {\r\n .command-dropdown-content {\r\n background: #333333;\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-dropdown-content {\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n \r\n .command-dropdown-content {\r\n background: #333333;\r\n position: absolute;\r\n top: 55px;\r\n width: 55px;\r\n transform: scale(1);\r\n\r\n &.toRight {\r\n width: 120px;\r\n } \r\n \r\n .command-dropdown-label {\r\n color:white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n } \r\n\r\n .command-dropdown-label-text {\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-label-check {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-arrow {\r\n grid-column: 2;\r\n grid-row: 1; \r\n font-size: 20px;\r\n font-weight: bold;\r\n padding-bottom: 10px;\r\n padding-left: 4px;\r\n }\r\n\r\n .sub-items {\r\n position: absolute;\r\n left: 200px;\r\n top: 0;\r\n width: 150px;\r\n display: none; \r\n \r\n &.background-js {\r\n background: #bfabff;\r\n .sub-item { \r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n } \r\n\r\n &.background-ts {\r\n background: #333333;\r\n .sub-item { \r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n } \r\n \r\n .sub-item { \r\n color: white;\r\n padding: 5px;\r\n padding-left: 10px;\r\n height: 35px;\r\n display: grid;\r\n\r\n &.checked {\r\n background: white;\r\n color: black;\r\n }\r\n }\r\n } \r\n }\r\n\r\n .buttonLine {\r\n color:white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n cursor: pointer;\r\n } \r\n\r\n .file-upload{\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n \r\n .divider {\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid black;\r\n color: white;\r\n &:last-of-type {\r\n border-right: none;\r\n }\r\n &.padded {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n }\r\n\r\n .floatLine, .checkBoxLine {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBoxLine {\r\n .icon {\r\n filter: brightness(10);\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .checkBox {\r\n height: 40px;\r\n }\r\n }\r\n\r\n .color3Line {\r\n display: grid;\r\n\r\n .firstLine {\r\n display: flex;\r\n align-items: center;\r\n\r\n .label {\r\n padding-right: 5px;\r\n }\r\n\r\n .textInputLine {\r\n .value {\r\n padding-left: 2px;\r\n }\r\n }\r\n\r\n .copy {\r\n display: none;\r\n }\r\n\r\n .expand {\r\n display: none;\r\n }\r\n } \r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n } \r\n }\r\n\r\n .color-picker {\r\n height: 26px;\r\n width: 26px;\r\n\r\n .color-rect-background {\r\n width: calc(100% - 2px);\r\n height: calc(100% - 2px);\r\n border: 1px solid white;\r\n cursor: pointer;\r\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50% / 100% 100%;\r\n .color-rect {\r\n height: 100%;\r\n }\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n z-index: 2;\r\n }\r\n\r\n .color-picker-float {\r\n position: absolute; \r\n } \r\n }\r\n\r\n .floatLine input, .listLine select {\r\n background-color: #000000;\r\n color: white;\r\n margin: 5px;\r\n outline: none;\r\n padding: 5px;\r\n border: none;\r\n }\r\n\r\n .listLine select {\r\n width: 150px;\r\n }\r\n}\r\n"],"sourceRoot":""}]);
10217
+ ___CSS_LOADER_EXPORT___.push([module.i, ":root {\n --selectionGrey: #666666; }\n\n.ge-commands {\n user-select: none;\n display: flex;\n align-items: flex-start;\n justify-content: space-between; }\n .ge-commands * {\n font-family: \"acumin-pro-condensed\";\n font-weight: 600;\n font-size: 12px; }\n .ge-commands .commands-left {\n float: left;\n display: flex; }\n .ge-commands .commands-right {\n float: right;\n display: flex; }\n .ge-commands .commands-right .beta-flag {\n width: 110px;\n height: 30px;\n display: none; }\n .ge-commands.background-ts .command-button img, .ge-commands.background-ts .command-dropdown img {\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%); }\n .ge-commands.background-ts .command-button .command-dropdown-active, .ge-commands.background-ts .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-ts .command-button:hover img, .ge-commands.background-ts .command-button.activated img, .ge-commands.background-ts .command-dropdown:hover img, .ge-commands.background-ts .command-dropdown.activated img {\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important; }\n .ge-commands.background-js .command-button img, .ge-commands.background-js .command-dropdown img {\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg); }\n .ge-commands.background-js .command-button .command-dropdown-active, .ge-commands.background-js .command-dropdown .command-dropdown-active {\n color: #333333; }\n .ge-commands.background-js .command-button:hover img, .ge-commands.background-js .command-button.activated img, .ge-commands.background-js .command-dropdown:hover img, .ge-commands.background-js .command-dropdown.activated img {\n filter: invert(17%) !important; }\n .ge-commands .command-button {\n cursor: pointer;\n width: 55px;\n height: 40px; }\n .ge-commands .command-button .command-label {\n display: none; }\n .ge-commands .command-button .command-button-icon {\n height: 100%;\n width: 100%;\n display: grid;\n color: white;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-button:hover {\n background-color: var(--selectionGrey); }\n .ge-commands .command-button .active {\n transform-origin: center;\n background-color: var(--selectionGrey); }\n .ge-commands .command-button img.active {\n background-color: var(--selectionGrey); }\n .ge-commands .command-dropdown-root {\n position: relative;\n text-transform: uppercase;\n z-index: 1; }\n .ge-commands .command-dropdown {\n cursor: pointer;\n width: 55px;\n height: 40px; }\n .ge-commands .command-dropdown .command-dropdown-icon {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center; }\n .ge-commands .command-dropdown .command-dropdown-active {\n height: 100%;\n width: 100%;\n display: grid;\n align-content: center;\n justify-content: center;\n font-size: 14px; }\n .ge-commands .command-dropdown:hover, .ge-commands .command-dropdown.activated {\n background-color: #666666;\n color: black; }\n .ge-commands .command-dropdown:active {\n transform-origin: center;\n transform: scale(0.95); }\n .ge-commands .command-dropdown-blocker {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n transform: scale(1);\n z-index: 1; }\n .ge-commands.background-js .command-dropdown-content {\n background: #333333; }\n .ge-commands.background-js .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands.background-ts .command-dropdown-content .command-dropdown-label:hover {\n background: #333333; }\n .ge-commands .command-dropdown-content {\n background: #333333;\n position: absolute;\n width: 55px;\n transform: scale(1); }\n .ge-commands .command-dropdown-content.toRight {\n width: 120px; }\n .ge-commands .command-dropdown-content .command-dropdown-label {\n color: white;\n padding: 5px;\n padding-left: 7px;\n height: 35px;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative; }\n .ge-commands .command-dropdown-content .command-dropdown-label.active {\n font-weight: bold;\n font-size: 20px; }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover {\n background: var(--selectionGrey); }\n .ge-commands .command-dropdown-content .command-dropdown-label:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-text {\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-label-check {\n grid-column: 2;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .command-dropdown-label .command-dropdown-arrow {\n grid-column: 2;\n grid-row: 1;\n font-size: 20px;\n font-weight: bold;\n padding-bottom: 10px;\n padding-left: 4px; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items {\n position: absolute;\n left: 200px;\n top: 0;\n width: 150px;\n display: none; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js {\n background: #bfabff; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-js .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts {\n background: #333333; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items.background-ts .sub-item:hover {\n background-color: #333333;\n color: white; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item {\n color: white;\n padding: 5px;\n padding-left: 10px;\n height: 35px;\n display: grid; }\n .ge-commands .command-dropdown-content .command-dropdown-label .sub-items .sub-item.checked {\n background: white;\n color: black; }\n .ge-commands .command-dropdown-content .buttonLine {\n color: white;\n padding: 5px;\n padding-left: 7px;\n height: 35px;\n font-size: 18px;\n display: grid;\n align-items: center;\n cursor: pointer;\n user-select: none;\n grid-template-columns: 1fr 20px;\n grid-template-rows: 100%;\n position: relative;\n font-size: 12px;\n grid-column: 1;\n grid-row: 1; }\n .ge-commands .command-dropdown-content .buttonLine input[type=\"file\"] {\n display: none; }\n .ge-commands .command-dropdown-content .buttonLine.active {\n font-weight: bold;\n font-size: 20px;\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover {\n background: var(--selectionGrey);\n cursor: pointer; }\n .ge-commands .command-dropdown-content .buttonLine:hover .sub-items {\n display: block; }\n .ge-commands .command-dropdown-content .buttonLine .file-upload {\n cursor: pointer; }\n .ge-commands .divider {\n display: flex;\n align-items: center;\n border-right: 1px solid black;\n color: white; }\n .ge-commands .divider:last-of-type {\n border-right: none; }\n .ge-commands .divider.padded {\n padding-left: 10px;\n padding-right: 10px; }\n .ge-commands .floatLine, .ge-commands .checkBoxLine {\n display: flex;\n align-items: center; }\n .ge-commands .checkBoxLine .icon {\n filter: brightness(10); }\n .ge-commands .checkBoxLine .hidden {\n display: none; }\n .ge-commands .checkBoxLine .checkBox {\n height: 40px; }\n .ge-commands .color3Line {\n display: grid; }\n .ge-commands .color3Line .firstLine {\n display: flex;\n align-items: center; }\n .ge-commands .color3Line .firstLine .label {\n padding-right: 5px; }\n .ge-commands .color3Line .firstLine .textInputLine .value {\n padding-left: 2px; }\n .ge-commands .color3Line .firstLine .copy {\n display: none; }\n .ge-commands .color3Line .firstLine .expand {\n display: none; }\n .ge-commands .color3Line .secondLine {\n display: grid;\n padding-right: 5px;\n border-left: 1px solid #337ab7; }\n .ge-commands .color3Line .secondLine .numeric {\n display: grid;\n grid-template-columns: 1fr auto; }\n .ge-commands .color3Line .secondLine .numeric-label {\n text-align: right;\n grid-column: 1;\n display: flex;\n align-items: center;\n justify-self: right;\n margin-right: 10px; }\n .ge-commands .color3Line .secondLine .numeric-value {\n width: 120px;\n grid-column: 2;\n display: flex;\n align-items: center;\n border: 1px solid #337ab7; }\n .ge-commands .color-picker {\n height: 26px;\n width: 26px; }\n .ge-commands .color-picker .color-rect-background {\n width: calc(100% - 2px);\n height: calc(100% - 2px);\n border: 1px solid white;\n cursor: pointer;\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50%/100% 100%; }\n .ge-commands .color-picker .color-rect-background .color-rect {\n height: 100%; }\n .ge-commands .color-picker .color-picker-cover {\n position: fixed;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n z-index: 2; }\n .ge-commands .color-picker .color-picker-float {\n position: absolute; }\n .ge-commands .floatLine input, .ge-commands .listLine select {\n background-color: #000000;\n color: white;\n margin: 5px;\n outline: none;\n padding: 5px;\n border: none; }\n .ge-commands .listLine select {\n width: 150px; }\n", "",{"version":3,"sources":["webpack://./scss/commandBar.scss"],"names":[],"mappings":"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","sourcesContent":[":root {\r\n --selectionGrey: #666666;\r\n}\r\n\r\n.ge-commands {\r\n * {\r\n font-family: \"acumin-pro-condensed\";\r\n font-weight: 600;\r\n font-size: 12px;\r\n }\r\n user-select: none;\r\n display: flex;\r\n align-items: flex-start;\r\n justify-content: space-between;\r\n\r\n .commands-left {\r\n float: left;\r\n display: flex;\r\n }\r\n\r\n .commands-right {\r\n float: right;\r\n display: flex;\r\n\r\n .beta-flag {\r\n width: 110px;\r\n height: 30px;\r\n display: none;\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-button, .command-dropdown {\r\n img {\r\n filter: invert(64%) sepia(78%) saturate(940%) hue-rotate(323deg) brightness(105%) contrast(103%);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover, &.activated {\r\n img {\r\n filter: invert(34%) sepia(21%) saturate(3832%) hue-rotate(324deg) brightness(88%) contrast(82%) !important;\r\n }\r\n } \r\n }\r\n }\r\n\r\n &.background-js {\r\n .command-button, .command-dropdown {\r\n img {\r\n filter: invert(57%) sepia(80%) saturate(2031%) hue-rotate(215deg);\r\n }\r\n\r\n .command-dropdown-active {\r\n color: #333333;\r\n }\r\n\r\n &:hover, &.activated {\r\n img {\r\n filter: invert(17%) !important;\r\n }\r\n } \r\n }\r\n }\r\n\r\n .command-button {\r\n cursor: pointer;\r\n width: 55px;\r\n height: 40px;\r\n\r\n .command-label {\r\n display: none;\r\n } \r\n\r\n .command-button-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n color: white;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n &:hover {\r\n background-color: var(--selectionGrey);\r\n } \r\n \r\n .active {\r\n transform-origin: center;\r\n background-color: var(--selectionGrey);\r\n }\r\n\r\n img {\r\n &.active {\r\n background-color: var(--selectionGrey);\r\n }\r\n }\r\n }\r\n\r\n .command-dropdown-root {\r\n position: relative;\r\n text-transform: uppercase;\r\n z-index: 1;\r\n }\r\n\r\n .command-dropdown { \r\n cursor: pointer;\r\n width: 55px;\r\n height: 40px;\r\n\r\n .command-dropdown-icon {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n }\r\n\r\n .command-dropdown-active {\r\n height: 100%;\r\n width: 100%;\r\n display: grid;\r\n align-content: center;\r\n justify-content: center;\r\n font-size: 14px;\r\n }\r\n\r\n &:hover, &.activated {\r\n background-color:#666666;\r\n color: black;\r\n } \r\n \r\n &:active {\r\n transform-origin: center;\r\n transform: scale(0.95);\r\n }\r\n }\r\n\r\n .command-dropdown-blocker {\r\n position: absolute; \r\n top:0;\r\n left:0;\r\n width: 100%;\r\n height: 100%;\r\n transform: scale(1);\r\n z-index: 1;\r\n }\r\n\r\n &.background-js {\r\n .command-dropdown-content {\r\n background: #333333;\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n\r\n &.background-ts {\r\n .command-dropdown-content {\r\n .command-dropdown-label {\r\n &:hover {\r\n background: #333333;\r\n }\r\n }\r\n }\r\n }\r\n \r\n .command-dropdown-content {\r\n background: #333333;\r\n position: absolute;\r\n width: 55px;\r\n transform: scale(1);\r\n\r\n &.toRight {\r\n width: 120px;\r\n } \r\n \r\n .command-dropdown-label {\r\n color:white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n } \r\n\r\n .command-dropdown-label-text {\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-label-check {\r\n grid-column: 2;\r\n grid-row: 1;\r\n }\r\n\r\n .command-dropdown-arrow {\r\n grid-column: 2;\r\n grid-row: 1; \r\n font-size: 20px;\r\n font-weight: bold;\r\n padding-bottom: 10px;\r\n padding-left: 4px;\r\n }\r\n\r\n .sub-items {\r\n position: absolute;\r\n left: 200px;\r\n top: 0;\r\n width: 150px;\r\n display: none; \r\n \r\n &.background-js {\r\n background: #bfabff;\r\n .sub-item { \r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n } \r\n\r\n &.background-ts {\r\n background: #333333;\r\n .sub-item { \r\n &:hover {\r\n background-color: #333333;\r\n color: white;\r\n }\r\n }\r\n } \r\n \r\n .sub-item { \r\n color: white;\r\n padding: 5px;\r\n padding-left: 10px;\r\n height: 35px;\r\n display: grid;\r\n\r\n &.checked {\r\n background: white;\r\n color: black;\r\n }\r\n }\r\n } \r\n }\r\n\r\n .buttonLine {\r\n color:white;\r\n padding: 5px;\r\n padding-left: 7px;\r\n height: 35px;\r\n font-size: 18px;\r\n display: grid;\r\n align-items: center;\r\n cursor: pointer;\r\n user-select: none;\r\n grid-template-columns: 1fr 20px;\r\n grid-template-rows: 100%;\r\n position: relative;\r\n font-size: 12px;\r\n grid-column: 1;\r\n grid-row: 1;\r\n input[type=\"file\"] {\r\n display: none;\r\n }\r\n\r\n &.active {\r\n font-weight: bold;\r\n font-size: 20px;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover {\r\n background: var(--selectionGrey);\r\n .sub-items {\r\n display: block;\r\n }\r\n cursor: pointer;\r\n } \r\n\r\n .file-upload{\r\n cursor: pointer;\r\n }\r\n }\r\n }\r\n \r\n .divider {\r\n display: flex;\r\n align-items: center;\r\n border-right: 1px solid black;\r\n color: white;\r\n &:last-of-type {\r\n border-right: none;\r\n }\r\n &.padded {\r\n padding-left: 10px;\r\n padding-right: 10px;\r\n }\r\n }\r\n\r\n .floatLine, .checkBoxLine {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n .checkBoxLine {\r\n .icon {\r\n filter: brightness(10);\r\n }\r\n\r\n .hidden {\r\n display: none;\r\n }\r\n\r\n .checkBox {\r\n height: 40px;\r\n }\r\n }\r\n\r\n .color3Line {\r\n display: grid;\r\n\r\n .firstLine {\r\n display: flex;\r\n align-items: center;\r\n\r\n .label {\r\n padding-right: 5px;\r\n }\r\n\r\n .textInputLine {\r\n .value {\r\n padding-left: 2px;\r\n }\r\n }\r\n\r\n .copy {\r\n display: none;\r\n }\r\n\r\n .expand {\r\n display: none;\r\n }\r\n } \r\n\r\n .secondLine {\r\n display: grid;\r\n padding-right: 5px; \r\n border-left: 1px solid rgb(51, 122, 183);\r\n\r\n .numeric {\r\n display: grid;\r\n grid-template-columns: 1fr auto;\r\n }\r\n\r\n .numeric-label {\r\n text-align: right;\r\n grid-column: 1;\r\n display: flex;\r\n align-items: center; \r\n justify-self: right;\r\n margin-right: 10px; \r\n }\r\n\r\n .numeric-value {\r\n width: 120px;\r\n grid-column: 2;\r\n display: flex;\r\n align-items: center; \r\n border: 1px solid rgb(51, 122, 183);\r\n } \r\n } \r\n }\r\n\r\n .color-picker {\r\n height: 26px;\r\n width: 26px;\r\n\r\n .color-rect-background {\r\n width: calc(100% - 2px);\r\n height: calc(100% - 2px);\r\n border: 1px solid white;\r\n cursor: pointer;\r\n background: repeating-conic-gradient(#E2E2E2 0% 25%, white 0% 50%) 50% / 100% 100%;\r\n .color-rect {\r\n height: 100%;\r\n }\r\n }\r\n\r\n .color-picker-cover {\r\n position: fixed;\r\n top: 0px;\r\n right: 0px;\r\n bottom: 0px;\r\n left: 0px;\r\n z-index: 2;\r\n }\r\n\r\n .color-picker-float {\r\n position: absolute; \r\n } \r\n }\r\n\r\n .floatLine input, .listLine select {\r\n background-color: #000000;\r\n color: white;\r\n margin: 5px;\r\n outline: none;\r\n padding: 5px;\r\n border: none;\r\n }\r\n\r\n .listLine select {\r\n width: 150px;\r\n }\r\n}\r\n"],"sourceRoot":""}]);
10218
10218
  // Exports
10219
10219
  /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
10220
10220
 
@@ -10239,7 +10239,7 @@ __webpack_require__.r(__webpack_exports__);
10239
10239
 
10240
10240
  var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()(_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default.a);
10241
10241
  // Module
10242
- ___CSS_LOADER_EXPORT___.push([module.i, "#ge-header {\n width: 100%;\n grid-column: 2 / 4;\n grid-row: 1;\n padding: 0;\n margin: 0;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-rows: 100%;\n background: #333333; }\n #ge-header .command-bar {\n padding-left: 15px;\n grid-row: 1;\n grid-column: 2;\n display: grid;\n width: 100%;\n grid-template-columns: 74px 144px 1fr;\n grid-template-rows: 100%; }\n #ge-header .command-bar .language-button {\n grid-row: 1;\n grid-column: 2;\n color: white;\n width: 144px;\n font-size: 18px;\n text-align: center;\n display: grid;\n align-content: center;\n border-top-left-radius: 14px;\n transform: scale(1);\n user-select: none; }\n #ge-header .command-bar .language-button.active {\n width: 74px;\n cursor: pointer;\n grid-column: 1;\n margin-right: -5px;\n transform: translateX(10px); }\n\n@media screen and (max-width: 1280px) {\n #ge-header .logo-area {\n width: 300px; }\n #ge-header .logo-area .version .version-text {\n display: none; }\n #ge-header .logo-area .version .version-number {\n font-size: 16px; } }\n\n@media screen and (max-width: 1080px) {\n #ge-header {\n grid-template-columns: 100%; }\n #ge-header .logo-area {\n width: 100%; }\n #ge-header .logo-area .version .version-text {\n display: none; }\n #ge-header .command-bar {\n display: none; } }\n", "",{"version":3,"sources":["webpack://./scss/header.scss"],"names":[],"mappings":"AAAA;EACI,WAAW;EACX,kBAAkB;EAClB,WAAW;EACX,UAAU;EACV,SAAS;EACT,aAAa;EACb,+BAA+B;EAC/B,wBAAwB;EACxB,mBAAmB,EAAA;EATvB;IAYQ,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,aAAa;IACb,WAAW;IACX,qCAAqC;IACrC,wBAAwB,EAAA;IAlBhC;MAqBY,WAAW;MACX,cAAc;MACd,YAAY;MACZ,YAAY;MACZ,eAAe;MACf,kBAAkB;MAClB,aAAa;MACb,qBAAqB;MACrB,4BAA4B;MAC5B,mBAAmB;MACnB,iBAAiB,EAAA;MA/B7B;QAkCgB,WAAW;QACX,eAAe;QACf,cAAc;QACd,kBAAkB;QAClB,2BAA2B,EAAA;;AAO3C;EACI;IAEQ,YAAY,EAAA;IAFpB;MAMgB,aAAa,EAAA;IAN7B;MAUgB,eAAe,EAAA,EAClB;;AAMjB;EACI;IACI,2BAA2B,EAAA;IAD/B;MAIQ,WAAW,EAAA;MAJnB;QAQgB,aAAa,EAAA;IAR7B;MAcQ,aAAa,EAAA,EAChB","sourcesContent":["#ge-header {\r\n width: 100%;\r\n grid-column: 2 / 4;\r\n grid-row: 1;\r\n padding: 0;\r\n margin: 0;\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n grid-template-rows: 100%;\r\n background: #333333;\r\n\r\n .command-bar {\r\n padding-left: 15px; \r\n grid-row: 1;\r\n grid-column: 2;\r\n display: grid;\r\n width: 100%;\r\n grid-template-columns: 74px 144px 1fr;\r\n grid-template-rows: 100%;\r\n\r\n .language-button { \r\n grid-row: 1;\r\n grid-column: 2;\r\n color: white;\r\n width: 144px;\r\n font-size: 18px;\r\n text-align: center;\r\n display: grid;\r\n align-content: center;\r\n border-top-left-radius: 14px;\r\n transform: scale(1);\r\n user-select: none;\r\n\r\n &.active {\r\n width: 74px;\r\n cursor: pointer; \r\n grid-column: 1;\r\n margin-right: -5px;\r\n transform: translateX(10px);\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n@media screen and (max-width: 1280px) {\r\n #ge-header {\r\n .logo-area {\r\n width: 300px;\r\n \r\n .version {\r\n .version-text {\r\n display: none;\r\n }\r\n \r\n .version-number {\r\n font-size: 16px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: 1080px) {\r\n #ge-header {\r\n grid-template-columns: 100%;\r\n\r\n .logo-area {\r\n width: 100%;\r\n \r\n .version {\r\n .version-text {\r\n display: none;\r\n }\r\n }\r\n }\r\n \r\n .command-bar { \r\n display: none;\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]);
10242
+ ___CSS_LOADER_EXPORT___.push([module.i, "#ge-header {\n width: 100%;\n grid-column: 2 / 4;\n grid-row: 1;\n padding: 0;\n margin: 0;\n display: grid;\n grid-template-columns: auto 1fr;\n grid-template-rows: 100%;\n background: #333333; }\n #ge-header .command-bar {\n padding-left: 15px;\n grid-row: 1;\n grid-column: 2;\n width: 100%; }\n #ge-header .command-bar .language-button {\n grid-row: 1;\n grid-column: 2;\n color: white;\n width: 144px;\n font-size: 18px;\n text-align: center;\n display: grid;\n align-content: center;\n border-top-left-radius: 14px;\n transform: scale(1);\n user-select: none; }\n #ge-header .command-bar .language-button.active {\n width: 74px;\n cursor: pointer;\n grid-column: 1;\n margin-right: -5px;\n transform: translateX(10px); }\n\n@media screen and (max-width: 1280px) {\n #ge-header .logo-area {\n width: 300px; }\n #ge-header .logo-area .version .version-text {\n display: none; }\n #ge-header .logo-area .version .version-number {\n font-size: 16px; } }\n\n@media screen and (max-width: 1080px) {\n #ge-header {\n grid-template-columns: 100%; }\n #ge-header .logo-area {\n width: 100%; }\n #ge-header .logo-area .version .version-text {\n display: none; }\n #ge-header .command-bar {\n display: none; } }\n", "",{"version":3,"sources":["webpack://./scss/header.scss"],"names":[],"mappings":"AAAA;EACI,WAAW;EACX,kBAAkB;EAClB,WAAW;EACX,UAAU;EACV,SAAS;EACT,aAAa;EACb,+BAA+B;EAC/B,wBAAwB;EACxB,mBAAmB,EAAA;EATvB;IAYQ,kBAAkB;IAClB,WAAW;IACX,cAAc;IACd,WAAW,EAAA;IAfnB;MAkBY,WAAW;MACX,cAAc;MACd,YAAY;MACZ,YAAY;MACZ,eAAe;MACf,kBAAkB;MAClB,aAAa;MACb,qBAAqB;MACrB,4BAA4B;MAC5B,mBAAmB;MACnB,iBAAiB,EAAA;MA5B7B;QA+BgB,WAAW;QACX,eAAe;QACf,cAAc;QACd,kBAAkB;QAClB,2BAA2B,EAAA;;AAO3C;EACI;IAEQ,YAAY,EAAA;IAFpB;MAMgB,aAAa,EAAA;IAN7B;MAUgB,eAAe,EAAA,EAClB;;AAMjB;EACI;IACI,2BAA2B,EAAA;IAD/B;MAIQ,WAAW,EAAA;MAJnB;QAQgB,aAAa,EAAA;IAR7B;MAcQ,aAAa,EAAA,EAChB","sourcesContent":["#ge-header {\r\n width: 100%;\r\n grid-column: 2 / 4;\r\n grid-row: 1;\r\n padding: 0;\r\n margin: 0;\r\n display: grid;\r\n grid-template-columns: auto 1fr;\r\n grid-template-rows: 100%;\r\n background: #333333;\r\n\r\n .command-bar {\r\n padding-left: 15px; \r\n grid-row: 1;\r\n grid-column: 2;\r\n width: 100%;\r\n\r\n .language-button { \r\n grid-row: 1;\r\n grid-column: 2;\r\n color: white;\r\n width: 144px;\r\n font-size: 18px;\r\n text-align: center;\r\n display: grid;\r\n align-content: center;\r\n border-top-left-radius: 14px;\r\n transform: scale(1);\r\n user-select: none;\r\n\r\n &.active {\r\n width: 74px;\r\n cursor: pointer; \r\n grid-column: 1;\r\n margin-right: -5px;\r\n transform: translateX(10px);\r\n }\r\n }\r\n }\r\n}\r\n\r\n\r\n@media screen and (max-width: 1280px) {\r\n #ge-header {\r\n .logo-area {\r\n width: 300px;\r\n \r\n .version {\r\n .version-text {\r\n display: none;\r\n }\r\n \r\n .version-number {\r\n font-size: 16px;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n@media screen and (max-width: 1080px) {\r\n #ge-header {\r\n grid-template-columns: 100%;\r\n\r\n .logo-area {\r\n width: 100%;\r\n \r\n .version {\r\n .version-text {\r\n display: none;\r\n }\r\n }\r\n }\r\n \r\n .command-bar { \r\n display: none;\r\n }\r\n }\r\n}\r\n"],"sourceRoot":""}]);
10243
10243
  // Exports
10244
10244
  /* harmony default export */ __webpack_exports__["default"] = (___CSS_LOADER_EXPORT___);
10245
10245
 
@@ -42396,6 +42396,17 @@ module.exports = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' w
42396
42396
 
42397
42397
  /***/ }),
42398
42398
 
42399
+ /***/ "../public/imgs/betaFlag.svg":
42400
+ /*!***********************************!*\
42401
+ !*** ../public/imgs/betaFlag.svg ***!
42402
+ \***********************************/
42403
+ /*! no static exports found */
42404
+ /***/ (function(module, exports) {
42405
+
42406
+ module.exports = "data:image/svg+xml,%3Csvg id='icons' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 30'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:%23bb464b;%7D.cls-2%7Bfill:%23fff;%7D%3C/style%3E%3C/defs%3E%3Cpolygon class='cls-1' points='9.9 30 80 30 80 0 0 0 9.9 30'/%3E%3Cpath class='cls-2' d='M21.35,8.82h6c2.61,0,3.83,1.24,3.83,2.89a2.47,2.47,0,0,1-1.75,2.41,2.74,2.74,0,0,1,2.17,2.66c0,2.16-1.7,3.34-4.28,3.34H21.35Zm5.47,4.5c1.36,0,1.87-.51,1.87-1.33,0-1-.76-1.36-1.84-1.36H23.68v2.69Zm-3.14,5h3.25c1.16,0,2.15-.35,2.15-1.63,0-1-.77-1.59-2.16-1.59H23.68Z'/%3E%3Cpath class='cls-2' d='M42.36,15.19H35.91v3h7.15l-.27,1.92H33.54V8.82h9.17v1.92h-6.8v2.53h6.45Z'/%3E%3Cpath class='cls-2' d='M47.91,10.73h-4.1V8.82H54.36v1.91H50.28v9.39H47.91Z'/%3E%3Cpath class='cls-2' d='M56.55,17.28l-1.14,2.84H53l4.66-11.3h3l4.89,11.3H62.92l-1.2-2.84ZM61,15.35c-1.15-2.76-1.71-4.13-2-5h0c-.24.8-.9,2.6-1.84,5Z'/%3E%3C/svg%3E"
42407
+
42408
+ /***/ }),
42409
+
42399
42410
  /***/ "../public/imgs/buttonIcon.svg":
42400
42411
  /*!*************************************!*\
42401
42412
  !*** ../public/imgs/buttonIcon.svg ***!
@@ -43093,6 +43104,7 @@ var zoomIcon = __webpack_require__(/*! ../../public/imgs/zoomIcon.svg */ "../pub
43093
43104
  var guidesIcon = __webpack_require__(/*! ../../public/imgs/guidesIcon.svg */ "../public/imgs/guidesIcon.svg");
43094
43105
  var logoIcon = __webpack_require__(/*! ../../public/imgs/babylonLogo.svg */ "../public/imgs/babylonLogo.svg");
43095
43106
  var canvasFitIcon = __webpack_require__(/*! ../../public/imgs/canvasFitIcon.svg */ "../public/imgs/canvasFitIcon.svg");
43107
+ var betaFlag = __webpack_require__(/*! ../../public/imgs/betaFlag.svg */ "../public/imgs/betaFlag.svg");
43096
43108
  __webpack_require__(/*! ../scss/commandBar.scss */ "./scss/commandBar.scss");
43097
43109
  var _sizeValues = [
43098
43110
  { width: 1920, height: 1080 },
@@ -43168,7 +43180,7 @@ var CommandBarComponent = /** @class */ (function (_super) {
43168
43180
  return (react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "ge-commands" },
43169
43181
  react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-left" },
43170
43182
  react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "divider" },
43171
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("img", { src: logoIcon, color: "white", className: "active" }),
43183
+ react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("img", { src: logoIcon, color: "white", className: "active", draggable: false }),
43172
43184
  react__WEBPACK_IMPORTED_MODULE_2__["createElement"](_commandDropdownComponent__WEBPACK_IMPORTED_MODULE_7__["CommandDropdownComponent"], { globalState: this.props.globalState, toRight: true, icon: hamburgerIcon, tooltip: "Options", items: [
43173
43185
  {
43174
43186
  label: "Save",
@@ -43291,7 +43303,8 @@ var CommandBarComponent = /** @class */ (function (_super) {
43291
43303
  _this.props.globalState.workbench.guiSize = { width: size.width, height: newvalue };
43292
43304
  }
43293
43305
  } }))))),
43294
- react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-right" })));
43306
+ react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("div", { className: "commands-right" },
43307
+ react__WEBPACK_IMPORTED_MODULE_2__["createElement"]("img", { src: betaFlag, className: "beta-flag", draggable: false }))));
43295
43308
  };
43296
43309
  return CommandBarComponent;
43297
43310
  }(react__WEBPACK_IMPORTED_MODULE_2__["Component"]));
@@ -43331,7 +43344,7 @@ var CommandButtonComponent = /** @class */ (function (_super) {
43331
43344
  }
43332
43345
  return (react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: divClassName, onClick: this.props.onClick, title: "".concat(this.props.tooltip, " ").concat(this.props.shortcut ? " (" + this.props.shortcut + ")" : "") },
43333
43346
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: iconClassName },
43334
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "" })),
43347
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: this.props.isActive ? "active" : "", draggable: false })),
43335
43348
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-label" }, this.props.tooltip),
43336
43349
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "command-label" }, this.props.tooltip)));
43337
43350
  };
@@ -50543,28 +50556,19 @@ var ColorLineComponent = /** @class */ (function (_super) {
50543
50556
  Object(tslib__WEBPACK_IMPORTED_MODULE_0__["__extends"])(ColorLineComponent, _super);
50544
50557
  function ColorLineComponent(props) {
50545
50558
  var _this = _super.call(this, props) || this;
50546
- var colorString = _this.getValueAsString();
50547
- var color = _this.getValue();
50548
- _this.state = { isExpanded: false, color: color, colorString: colorString };
50549
- if (props.isLinear) {
50550
- _this.state.color.toGammaSpaceToRef(_this.state.color);
50551
- }
50559
+ _this.state = { isExpanded: false, color: _this.getValue() };
50552
50560
  var target = _this.props.target;
50553
50561
  target._isLinearColor = props.isLinear; // so that replayRecorder can append toLinearSpace() as appropriate
50554
50562
  return _this;
50555
50563
  }
50556
50564
  ColorLineComponent.prototype.shouldComponentUpdate = function (nextProps, nextState) {
50557
- var stateString = nextState.colorString;
50558
50565
  var stateColor = nextState.color;
50559
- var propsString = this.getValueAsString(nextProps);
50560
50566
  var propsColor = this.getValue(nextProps);
50561
- if (stateString !== this.state.colorString || stateColor !== this.state.color) {
50562
- nextState.colorString = stateString;
50567
+ if (stateColor !== this.state.color) {
50563
50568
  nextState.color = stateColor;
50564
50569
  return true;
50565
50570
  }
50566
- if (propsString !== this.state.colorString || propsColor !== this.state.color) {
50567
- nextState.colorString = propsString;
50571
+ if (propsColor !== this.state.color) {
50568
50572
  nextState.color = propsColor;
50569
50573
  return true;
50570
50574
  }
@@ -50586,41 +50590,21 @@ var ColorLineComponent = /** @class */ (function (_super) {
50586
50590
  return this.convertToColor(property);
50587
50591
  }
50588
50592
  else {
50593
+ if (props.isLinear) {
50594
+ return property.toGammaSpace();
50595
+ }
50589
50596
  return property.clone();
50590
50597
  }
50591
50598
  };
50592
- ColorLineComponent.prototype.getValueAsString = function (props) {
50593
- if (props === void 0) { props = this.props; }
50594
- var target = props.target;
50595
- var property = target[props.propertyName];
50596
- if (!property)
50597
- return "";
50598
- if (typeof property === "string") {
50599
- return property;
50600
- }
50601
- else {
50602
- return property.toHexString();
50603
- }
50604
- };
50605
50599
  ColorLineComponent.prototype.setColorFromString = function (colorString) {
50606
- if (colorString === _targetsProxy__WEBPACK_IMPORTED_MODULE_8__["conflictingValuesPlaceholder"])
50607
- return;
50608
50600
  var color = this.convertToColor(colorString);
50609
- if (this.props.isLinear) {
50610
- color = color.toLinearSpace();
50611
- }
50612
- this.updateColor(color);
50613
- this.setState({ color: color, colorString: colorString });
50601
+ this.setColor(color);
50614
50602
  };
50615
- ColorLineComponent.prototype.setColor = function (color) {
50603
+ ColorLineComponent.prototype.setColor = function (newColor) {
50604
+ this.setState({ color: newColor.clone() });
50616
50605
  if (this.props.isLinear) {
50617
- color = color.toLinearSpace();
50606
+ newColor.toLinearSpaceToRef(newColor);
50618
50607
  }
50619
- this.updateColor(color);
50620
- var colorString = this.props.disableAlpha ? this.toColor3(color).toHexString() : color.toHexString();
50621
- this.setState({ color: color, colorString: colorString });
50622
- };
50623
- ColorLineComponent.prototype.updateColor = function (newColor) {
50624
50608
  // whether to set properties to color3 or color4
50625
50609
  var setColor = this.props.disableAlpha ? this.toColor3(newColor) : newColor;
50626
50610
  var target = this.props.target;
@@ -50672,14 +50656,6 @@ var ColorLineComponent = /** @class */ (function (_super) {
50672
50656
  document.execCommand("copy");
50673
50657
  element.remove();
50674
50658
  };
50675
- Object.defineProperty(ColorLineComponent.prototype, "colorString", {
50676
- get: function () {
50677
- return this.state.colorString;
50678
- },
50679
- set: function (_) { },
50680
- enumerable: false,
50681
- configurable: true
50682
- });
50683
50659
  ColorLineComponent.prototype.convertToColor = function (color) {
50684
50660
  if (color === "" || color === "transparent") {
50685
50661
  return emptyColor;
@@ -50714,10 +50690,10 @@ var ColorLineComponent = /** @class */ (function (_super) {
50714
50690
  this.props.icon && react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("img", { src: this.props.icon, title: this.props.iconLabel, alt: this.props.iconLabel, className: "icon" }),
50715
50691
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "label", title: this.props.label }, this.props.label),
50716
50692
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "color3" },
50717
- react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.props.disableAlpha ? this.toColor3(this.state.color) : this.state.color, onColorChanged: function (color) {
50718
- _this.setColor(_this.convertToColor(color));
50693
+ react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_colorPickerComponent__WEBPACK_IMPORTED_MODULE_6__["ColorPickerLineComponent"], { linearHint: this.props.isLinear, value: this.props.disableAlpha ? this.toColor3(this.state.color) : this.state.color, onColorChanged: function (colorString) {
50694
+ _this.setColorFromString(colorString);
50719
50695
  } })),
50720
- this.props.lockObject && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", target: this, propertyName: "colorString", onChange: function (newValue) {
50696
+ this.props.lockObject && (react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_textInputLineComponent__WEBPACK_IMPORTED_MODULE_7__["TextInputLineComponent"], { lockObject: this.props.lockObject, label: "", value: this.state.color.toHexString(), onChange: function (newValue) {
50721
50697
  _this.setColorFromString(newValue);
50722
50698
  }, onPropertyChangedObservable: this.props.onPropertyChangedObservable })),
50723
50699
  react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("div", { className: "copy hoverIcon", onClick: function () { return _this.copyToClipboard(); }, title: "Copy to clipboard" },