layerpro 0.0.56 → 0.0.60

package/scripts/window.js

@@ -0,0 +1,28 @@
+/*
+Copyright: © 2022 Dario Passariello <dariopassariello@gmail.com>
+License: MIT
+*/
+
+const win = top.window
+win.offScreenBuffering = true
+
+win.document.addEventListener('wheel', function (e) {
+  //console.log( 'nothing for now' );
+}, {
+  capture: true,
+  passive: true
+});
+
+
+(function () {
+
+  return win.requestAnimationFrame ||
+    win.webkitRequestAnimationFrame ||
+    win.mozRequestAnimationFrame ||
+    win.oRequestAnimationFrame ||
+    win.msRequestAnimationFrame ||
+    function (callback) {
+      win.setTimeout(callback, 1000 / 20)
+    }
+
+})()

package/styles/dock.scss

@@ -0,0 +1,100 @@
+:root {
+  --dock-background-color: black;
+  --dock-height: 35px;
+  --dock-sideLeft: 10px;
+  --dock-sideCenter: auto;
+  --dock-sideRight: 10px;
+  --dock-icon-width: 140px;
+}
+
+#popup_dock {
+
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: var(--dock-height);
+  background-color: var(--dock-background-color);
+  border-top: 1px solid rgba(255, 255, 255, 0.521);
+
+  #popup_dock_icon {
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    width: 70px;
+    height: var(--dock-height);
+  }
+
+  #popup_dock_list {
+    position: absolute;
+    top: 3px;
+    left: var(--dock-sideLeft);
+    right: var(--dock-sideLeft);
+    height: calc(var(--dock-height) - 5px);
+    overflow-y: auto;
+    text-align: right;
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+
+    [class^="icon_"] {
+
+      width: var(--dock-icon-width);
+      //border-bottom:1px solid rgba(255, 255, 255, 0.541);
+      //border-radius:4px;
+      float: left;
+      padding: 4px;
+      color: white;
+      margin: 2px 3px 0 0;
+      //background: linear-gradient(0deg, #3c3c3c 0%, #4a4a4f 100%);
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      filter: saturate(400%);
+
+      &:hover {
+        background-color: rgb(77, 77, 77);
+      }
+
+      span:nth-child(1) {
+        width: 20%;
+        text-align: center;
+        color: #F60;
+      }
+
+      span:nth-child(2) {
+        width: 80%;
+        text-align: left;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      button {
+        width: 20px;
+        height: 20px;
+        color: white;
+        padding: 4px;
+        margin: 0;
+        display: flex;
+        align-content: center;
+        justify-content: center;
+        font-size: .7em;
+        border: none;
+        background: none
+      }
+
+    }
+
+  }
+
+  #popup_dock_options {
+    position: absolute;
+    top: 3px;
+    right: 10px;
+    width: var(--dock-sideRight);
+    height: var(--dock-height);
+  }
+
+}

package/styles/general.scss

@@ -0,0 +1,241 @@
+@import "root.scss";
+@import "input.scss";
+@import "icons.scss";
+@import "messages.scss";
+@import "resize.scss";
+@import "dock.scss";
+@import "scrollbar.scss";
+
+#popup>[class^='popup_overflow'],
+#popup>[class^='popup_bar_'],
+#popup>[class^='popup_window_'],
+#popup>[class^='popup_internal'],
+#popup>[class^='popup_body'],
+#popup {
+  position: static;
+}
+
+#popup>[class^='popup_overflow'],
+#popup>[class^='popup_bar_'],
+#popup>[class^='popup_window_'],
+#popup>[class^='popup_internal'],
+#popup>[class^='popup_body'],
+#popup,
+#popup_dock {
+
+  will-change: transform,
+    opacity,
+    top,
+    left,
+    height,
+    width;
+
+  // content-visibility:auto;
+  contain-intrinsic-size: auto;
+
+  -webkit-transform: translate3d(0, 0, 0);
+  -moz-transform: translate3d(0, 0, 0);
+  -ms-transform: translate3d(0, 0, 0);
+  -o-transform: translate3d(0, 0, 0);
+  transform: translate3d(0, 0, 0);
+
+  -webkit-perspective: 1;
+  -moz-perspective: 1;
+  -ms-perspective: 1;
+  -o-perspective: 1;
+  perspective: 1;
+
+  -webkit-backface-visibility: hidden;
+  -moz-backface-visibility: hidden;
+  -ms-backface-visibility: hidden;
+  -o-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  -webkit-transform: translateZ(0);
+  -moz-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  -o-transform: translateZ(0);
+  transform: translateZ(0);
+
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+
+  z-index: auto;
+}
+
+#popup {
+
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+
+  .pupup_bar_selected {
+    background: linear-gradient(45deg, #162858 60%, #224e918a 100%) !important;
+  }
+
+  .zHigh {
+    border-top-color: #278ed0 !important;
+    box-shadow: 0 -15px 20px -10px rgba(30, 150, 255, .5),
+      0 25px 25px rgba(0, 0, 0, .7) !important;
+  }
+
+  [class^="popup_raised_"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, .3);
+    z-index: 1;
+  }
+
+  [class^="popup_window_"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+    border-radius: 10px;
+    // border:1px solid;
+    // border-top-color: #999;
+    // border-right-color: black;
+    // border-bottom-color: black;
+    // border-left-color: black;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
+    //background: linear-gradient(0deg, #3c3c3c 0%, #4a4a4f 100%);
+    overflow: hidden;
+  }
+
+  [class^="popup_overflow_"] {
+    position: absolute;
+    top: auto;
+    left: auto;
+    right: auto;
+    bottom: auto;
+    z-index: 3;
+    border-radius: 10px;
+    background: gray;
+  }
+
+  [class^="popup_bar_"] {
+    display: flex;
+    width: 100%;
+    height: 36px;
+    background: linear-gradient(45deg, #4a4a4f 60%, #AAA 100%);
+    border-bottom: 2px solid #555;
+    box-shadow: 0 1px 1px #888;
+    z-index: 2
+  }
+
+  [class^="popup_drag_"] {
+    width: 100%;
+    padding: 10px 0 0 10px;
+    color: #eee;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+  }
+
+  [class^="popup_icon_"] {
+    padding: 8px 0 0 10px;
+    color: #eee;
+    font-size: 1.1em;
+  }
+
+  [class^="popup_option_"] {
+    display: flex;
+    margin-right: 15px;
+  }
+
+  [class^="popup_option_"] button {
+    position: relative;
+    display: inline-block;
+    width: 36px;
+    height: 28px;
+    color: white;
+    border-radius: 5px;
+    margin: 4px;
+    transition: all 0.3s ease;
+    background: transparent;
+  }
+
+  [class^="popup_option_"] button img {
+    filter: invert(1);
+    opacity: .5;
+    width: 15px;
+    height: auto;
+    margin-top: 2px;
+  }
+
+  [class^="popup_option_"] button::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    background: linear-gradient(180deg, #000 0%, rgba(60, 60, 60, 1) 100%);
+    border-radius: 5px;
+    z-index: -1;
+  }
+
+  [class^="popup_option_"] button::after {
+    opacity: 0;
+    transition: opacity .3s ease-in-out;
+  }
+
+  [class^="popup_option_"] button:hover {
+    background: rgba(255, 255, 255, .1);
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 1);
+    text-shadow: 0 0 15px rgba(255, 255, 255, 1),
+      0 0 3px rgba(255, 255, 255, 1);
+
+  }
+
+  [class^="popup_option_"] button:hover::after {
+    opacity: 1;
+  }
+
+  [class^="button_close_"]:hover {
+    background: rgba(255, 0, 0, 1) !important;
+    box-shadow: inset 0 0 25px rgba(255, 255, 255, 1), 0 0 35px rgba(255, 0, 0, 1) !important;
+  }
+
+  [class^="popup_internal_"] {
+    position: absolute;
+    top: 37px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+    background: linear-gradient(0deg, rgba(60, 60, 60, 1) 0%, #4a4a4f 100%);
+    // overflow-y:scroll;
+    // overflow-x:auto;
+    // padding:5px;
+  }
+
+  [class^="popup_body_"] {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    color: #eee;
+    text-align: center;
+    //overflow:auto;
+  }
+
+}

package/styles/icons.scss

@@ -0,0 +1,33 @@
+#popup {
+
+  .iconize:before,
+  .maximize:before,
+  .close:before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-repeat: no-repeat !important;
+    background-position: center !important;
+    background-size: 50% !important;
+    filter: invert(1);
+    opacity: .5;
+    margin: 0;
+    padding: 0;
+  }
+
+  .iconize:before {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAiCiAgIGhlaWdodD0iMjAiCiAgIHZpZXdCb3g9IjAgMCA1LjI5MTY2NjUgNS4yOTE2NjY4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczNzY4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiCiAgIHNvZGlwb2RpOmRvY25hbWU9Imljb25pemUuc3ZnIgogICB4bWxuczppbmtzY2FwZT0iaHR0cDovL3d3dy5pbmtzY2FwZS5vcmcvbmFtZXNwYWNlcy9pbmtzY2FwZSIKICAgeG1sbnM6c29kaXBvZGk9Imh0dHA6Ly9zb2RpcG9kaS5zb3VyY2Vmb3JnZS5uZXQvRFREL3NvZGlwb2RpLTAuZHRkIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6Y2M9Imh0dHA6Ly9jcmVhdGl2ZWNvbW1vbnMub3JnL25zIyIKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMzc2MiIgLz4KICA8c29kaXBvZGk6bmFtZWR2aWV3CiAgICAgaWQ9ImJhc2UiCiAgICAgcGFnZWNvbG9yPSIjZmZmZmZmIgogICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IgogICAgIGJvcmRlcm9wYWNpdHk9IjEuMCIKICAgICBpbmtzY2FwZTpwYWdlb3BhY2l0eT0iMC4wIgogICAgIGlua3NjYXBlOnBhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6em9vbT0iNS42IgogICAgIGlua3NjYXBlOmN4PSI5LjkxMDcxNDMiCiAgICAgaW5rc2NhcGU6Y3k9IjY4LjM5Mjg1NyIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0ibW0iCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICB1bml0cz0icHgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxOTIwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjEwMjciCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOnBhZ2VjaGVja2VyYm9hcmQ9IjAiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhMzc2NSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjkxLjcwODMyKSI+CiAgICA8cmVjdAogICAgICAgcnk9IjAuNjk5MTc0MjMiCiAgICAgICB5PSIyOTMuNjkyNzgiCiAgICAgICB4PSIwLjI3NDg0NjczIgogICAgICAgaGVpZ2h0PSIxLjM5ODM0ODUiCiAgICAgICB3aWR0aD0iNC43NjI0OTk4IgogICAgICAgaWQ9InJlY3QzNzM2LTciCiAgICAgICBzdHlsZT0iZmlsbDojMDAwMDAwO3N0cm9rZS13aWR0aDowLjEzMjk5MTg1IiAvPgogIDwvZz4KPC9zdmc+Cg==) !important;
+  }
+
+  .maximize:before {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAiCiAgIGhlaWdodD0iMjAiCiAgIHZpZXdCb3g9IjAgMCA1LjI5MTY2NjUgNS4yOTE2NjY4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczNzY4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiCiAgIHNvZGlwb2RpOmRvY25hbWU9Im1heGltaXplLnN2ZyIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczM3NjIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjcuOTE5NTk1OSIKICAgICBpbmtzY2FwZTpjeD0iNC45ODc2MjgyIgogICAgIGlua3NjYXBlOmN5PSIyNS4zODAwODMiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgdW5pdHM9InB4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDI3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTM3NjUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTI5MS43MDgzMikiPgogICAgPHJlY3QKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuMTQ3MDQ1NCIKICAgICAgIGlkPSJyZWN0MzczMiIKICAgICAgIHdpZHRoPSI0Ljc2MjQ5OTgiCiAgICAgICBoZWlnaHQ9IjQuNzYyNDk5OCIKICAgICAgIHg9IjAuMjkxODUyNTMiCiAgICAgICB5PSIyOTIuMDEwNDQiCiAgICAgICByeT0iMC42NjcxMjEyMyIgLz4KICA8L2c+Cjwvc3ZnPgo=) !important;
+  }
+
+  .close:before {
+    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iMjAiCiAgIGhlaWdodD0iMjAiCiAgIHZpZXdCb3g9IjAgMCA1LjI5MTY2NjUgNS4yOTE2NjY4IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmczNzY4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIxLjEuMSAoM2JmNWFlMGQyNSwgMjAyMS0wOS0yMCkiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImNsb3NlLnN2ZyIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczM3NjIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjcuOTE5NTk1OSIKICAgICBpbmtzY2FwZTpjeD0iNC45ODc2MjgyIgogICAgIGlua3NjYXBlOmN5PSIyNS4zODAwODMiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBzaG93Z3JpZD0iZmFsc2UiCiAgICAgdW5pdHM9InB4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDI3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpwYWdlY2hlY2tlcmJvYXJkPSIwIiAvPgogIDxtZXRhZGF0YQogICAgIGlkPSJtZXRhZGF0YTM3NjUiPgogICAgPHJkZjpSREY+CiAgICAgIDxjYzpXb3JrCiAgICAgICAgIHJkZjphYm91dD0iIj4KICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4KICAgICAgICA8ZGM6dHlwZQogICAgICAgICAgIHJkZjpyZXNvdXJjZT0iaHR0cDovL3B1cmwub3JnL2RjL2RjbWl0eXBlL1N0aWxsSW1hZ2UiIC8+CiAgICAgIDwvY2M6V29yaz4KICAgIDwvcmRmOlJERj4KICA8L21ldGFkYXRhPgogIDxnCiAgICAgaW5rc2NhcGU6bGFiZWw9IkxheWVyIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAsLTI5MS43MDgzMikiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiMwMDAwMDA7c3Ryb2tlLXdpZHRoOjAuMTQ5MDI2NjMiCiAgICAgICBkPSJtIDAuOTY5NDI2NTUsMjkxLjk4MjY1IGMgLTAuMTczMTcsMCAtMC4zNDYzMSwwLjA2NjYgLTAuNDc5LDAuMTk5MjcgLTAuMjY1MzgsMC4yNjUzNyAtMC4yNjUzOCwwLjY5MjQ0IDAsMC45NTc4MSBsIDEuMjI0MjA5OTUsMS4yMjQxNyAtMS4yMjQyMDk5NSwxLjIyNDE3IGMgLTAuMjY1MzgsMC4yNjUzNyAtMC4yNjUzOCwwLjY5MjQ0IDAsMC45NTc4MSAwLjI2NTM4LDAuMjY1MzcgMC42OTI2MDk5NSwwLjI2NTM3IDAuOTU3OTg5OTUsMCBsIDEuMjI0MjEsLTEuMjI0MTcgMS4yMjQyMDgsMS4yMjQxNyBjIDAuMTMyNjkyLDAuMTMyNjggMC4zMDU4MywwLjE5OTI3IDAuNDc4OTkxLDAuMTk5MjcgMC4wNDMzLDAgMC4wODY3LC0wLjAwNCAwLjEyOTM3OSwtMC4wMTI1IDAuMTI3OTcxLC0wLjAyNDkgMC4yNTAxLC0wLjA4NzIgMC4zNDk2MiwtMC4xODY3NiAwLjAzMzIsLTAuMDMzMiAwLjA2MjMsLTAuMDY4NiAwLjA4NzEsLTAuMTA2MTQgMC4xNzQxNiwtMC4yNjMxOSAwLjE0NTA2OSwtMC42MTk0NiAtMC4wODcxLC0wLjg1MTY2IGwgLTEuMjI0MjA4LC0xLjIyNDE3IDEuMjI0MjA4LC0xLjIyNDE3IGMgMC4yNjUzNywtMC4yNjUzNyAwLjI2NTM3LC0wLjY5MjQ0IDAsLTAuOTU3ODEgLTAuMjY1Mzc5LC0wLjI2NTM3IC0wLjY5MjYxLC0wLjI2NTM3IC0wLjk1Nzk5LDAgbCAtMS4yMjQyMDgsMS4yMjQxNyAtMS4yMjQyMSwtMS4yMjQxNyBjIC0wLjEzMjY5LC0wLjEzMjY5IC0wLjMwNTgzLC0wLjE5OTI3IC0wLjQ3ODk4OTk1LC0wLjE5OTI3IHoiCiAgICAgICBpZD0icmVjdDM3MTUiCiAgICAgICBpbmtzY2FwZTpjb25uZWN0b3ItY3VydmF0dXJlPSIwIiAvPgogIDwvZz4KPC9zdmc+Cg==) !important;
+  }
+
+}

package/styles/input.scss

@@ -0,0 +1,35 @@
+#popup {
+
+  >input,
+  >button,
+  >textarea,
+  >select {
+    all: unset;
+  }
+
+  // input[type=button],
+  // input[type=submit],
+  // input[type=reset],
+  // button[type=button],
+  // button[type=submit],
+  // button[type=reset]{
+  //   display:block;
+  //   padding:5px;
+  //   font-size:var( --inputButton-fontSize );
+  // }
+
+  // input[type=button],
+  // input[type=submit],
+  // input[type=reset]{
+  //   background: var( --input-background-color );
+  //   color:var( --input-color );
+  // }
+
+  // button[type=button],
+  // button[type=submit],
+  // button[type=reset]{
+  //   background: var( --button-background-color );
+  //   color:var( --button-color );
+  // }
+
+}

package/styles/messages.scss

@@ -0,0 +1,76 @@
+.popup_alert,
+.popup_message,
+.popup_prompt,
+.popup_confirm {
+  height: calc(100% - 41px);
+  //border-bottom:1px solid rgba(0,0,0,.5);
+  box-shadow: 0 1px 1px #888;
+  overflow: auto;
+  padding: 20px;
+  word-break: break-all;
+}
+
+.popup_alert button,
+.popup_message button,
+.popup_prompt button,
+.popup_confirm button {
+  position: absolute;
+  height: 40px;
+  background: #222 !important;
+  transition: all 0.3s ease;
+  color: #ddd;
+  border-radius: 0 0 10px 10px;
+}
+
+.popup_alert button:hover,
+.popup_message button:hover,
+.popup_prompt button:hover,
+.popup_confirm button:hover {
+  text-shadow: 0 0 15px rgba(255, 255, 255, 1),
+    0 0 3px rgba(255, 255, 255, 1);
+  box-shadow: inset 0 0 50px rgba(0, 0, 0, 1);
+}
+
+.popup_message button:nth-of-type(1),
+.popup_prompt button:nth-of-type(1),
+.popup_confirm button:nth-of-type(1) {
+  left: 0;
+  bottom: 0;
+  width: calc(50%);
+  display: block;
+  border-radius: 0 0 0 10px;
+  border-right: 2px solid rgba(0, 0, 0, .5);
+  //padding-right:20px;
+  //border-right:1px solid rgba(0,0,0,.5);
+}
+
+.popup_message button:nth-of-type(2),
+.popup_prompt button:nth-of-type(2),
+.popup_confirm button:nth-of-type(2) {
+  right: 0;
+  bottom: 0;
+  width: calc(50%);
+  display: block;
+  border-radius: 0 0 10px 0;
+  border-left: 1px solid rgba(255, 255, 255, .2);
+  //padding-left:20px;
+  //border-left:1px solid rgba(255,255,255,.2);
+}
+
+/***********************************************************/
+
+.popup_alert input[type='text'],
+.popup_message input[type='text'],
+.popup_prompt input[type='text'],
+.popup_confirm input[type='text'] {
+  position: relative;
+  width: 90%;
+  height: 35px;
+  padding: 5px;
+  font-size: 1.05em;
+  border: 2px solid rgba(0, 0, 0, .3);
+  border-radius: 6px;
+  color: #ddd;
+  background-color: #4a4a4f;
+  /* -moz-appearance: textfield; */
+}

package/styles/resize.scss

@@ -0,0 +1,99 @@
+.resize_0,
+.resize_1,
+.resize_2,
+.resize_3 {
+  position: absolute;
+  background-color: var(--resize-background-color);
+  border-radius: 25px;
+  opacity: 0;
+  z-index: 5000;
+  transition: .5s
+}
+
+.resize_0 {
+  top: -4px;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  cursor: n-resize;
+}
+
+.resize_1 {
+  top: 0;
+  right: -4px;
+  width: 10px;
+  height: 100%;
+  cursor: e-resize;
+}
+
+.resize_2 {
+  bottom: -4px;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  cursor: n-resize;
+}
+
+.resize_3 {
+  top: 0;
+  left: -4px;
+  width: 10px;
+  height: 100%;
+  cursor: e-resize;
+}
+
+/***********************************************************/
+
+.resize_corner_0,
+.resize_corner_1,
+.resize_corner_2,
+.resize_corner_3 {
+  position: absolute;
+  background-color: var(--resize-background-color);
+  border-radius: 50%;
+  width: 14px;
+  height: 14px;
+  opacity: 0;
+  z-index: 5000;
+  transition: .5s
+}
+
+.resize_corner_0 {
+  top: -4px;
+  left: -4px;
+  cursor: nw-resize;
+}
+
+.resize_corner_1 {
+  top: -4px;
+  right: -4px;
+  cursor: ne-resize;
+}
+
+.resize_corner_2 {
+  bottom: -4px;
+  right: -4px;
+  cursor: nw-resize;
+}
+
+.resize_corner_3 {
+  bottom: -4px;
+  left: -4px;
+  cursor: ne-resize;
+}
+
+/***********************************************************/
+
+.resize_0:hover,
+.resize_1:hover,
+.resize_2:hover,
+.resize_3:hover,
+.resize_corner_0:hover,
+.resize_corner_1:hover,
+.resize_corner_2:hover,
+.resize_corner_3:hover {
+  opacity: 1;
+  filter: blur(3px);
+  box-shadow: var(--resize-shadow);
+  transition: .5s
+}

package/styles/root.scss

@@ -0,0 +1,14 @@
+:root {
+
+  /*INPUT*/
+  --input-background-color: #444;
+  --input-color: white;
+  --button-background-color: #444;
+  --button-color: white;
+  --inputButton-fontSize: .8em;
+
+  /*RESIZER*/
+  --resize-background-color: rgba(30, 150, 255, .5);
+  --resize-shadow: 0 0 10px rgba(30, 150, 255, .5);
+
+}

package/styles/scrollbar.scss

@@ -0,0 +1,24 @@
+  /* Let's get this party started */
+  ::-webkit-scrollbar {
+    width: 10px;
+    scroll-behavior: smooth;
+  }
+
+  /* Track */
+  ::-webkit-scrollbar-track {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    margin:5px;
+  }
+
+  /* Handle */
+  ::-webkit-scrollbar-thumb {
+    -webkit-border-radius: 2px;
+    border-radius: 2px;
+    background: rgb(30, 150, 255) !important;
+
+  }
+
+  // ::-webkit-scrollbar-thumb:window-inactive {
+  //   background: rgba(30,150,255,.5)
+  // }

package/tests/setupJest.tsx

@@ -0,0 +1,4 @@
+import * as enzyme from 'enzyme'
+import * as Adapter from 'enzyme-adapter-react-16'
+
+enzyme.configure({ adapter: new Adapter() })