perfect-gui 4.1.3 → 4.2.0

package/README.md

@@ -1,7 +1,11 @@
 # Perfect GUI
 A nice, simple and (probably not) perfect GUI for JavaScript.
 
-Features:  
+## API
+[Documentation](https://thibka.github.io/perfect-gui/public/)
+
+
+## Features
 - image buttons 
 - multiple panels
 - easy positioning
@@ -10,9 +14,6 @@ Features:
 
 <img src="https://raw.githubusercontent.com/thibka/thibka.github.io/master/perfect-gui/_data/capture.png" width="580"/>  
 
-## API
-[Documentation](https://thibka.github.io/perfect-gui/public/)
-
 ## Install
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "perfect-gui",
-  "version": "4.1.3",
+  "version": "4.2.0",
   "description": "Nice and simple GUI for JavaScript",
   "main": "src/index.js",
   "scripts": {

package/src/styles.js

@@ -3,366 +3,401 @@
  * depending on a css loader
  */
 
- export default function( position_type ) {
-return /* css */`
-.p-gui {
-    position: ${ position_type };
-    top: 0;
-    left: 0;
-    transform: translate3d(0,0,0);
-    padding-top: 21px;
-    background: #2e2e2e;
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
-    font-family: Verdana, Arial, sans-serif;
-    width: 290px;
-    overflow: auto;
-    box-shadow: 0 0 2px black;
-    box-sizing: border-box;
-    z-index: 99999;
-    user-select: none;
-    border-bottom-right-radius: 3px;
-    border-bottom-left-radius: 3px;
-    cursor: auto;
-}
-
-.p-gui * {
-    font-size: 11px;
-}
-
-.p-gui::-webkit-scrollbar,
-.p-gui *::-webkit-scrollbar {
-    width: 10px;
-}
-
-.p-gui::-webkit-scrollbar-track,
-.p-gui *::-webkit-scrollbar-track {
-    background: #2f2f2f; 
-    border-radius: 3px;
-}
-
-.p-gui::-webkit-scrollbar-thumb,
-.p-gui *::-webkit-scrollbar-thumb {
-    background: #757576; 
-    border-radius: 10px;
-    box-sizing: border-box;
-    border: 1px solid #2f2f2f;
-}
-
-.p-gui--collapsed {
-    height: 0;
-    padding: 21px 10px 0 10px;
-    overflow: hidden;
-}
-
-.p-gui__header {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 20px;
-    background-color: rgba(0, 0, 0, .8);
-    border-bottom: 1px solid #484848;
-    cursor: grab;
-    color: grey;
-    font-size: 10px;
-    line-height: 20px;
-    padding-left: 8px;
-    box-sizing: border-box;
-    touch-action: none;
-}
-
-.p-gui__header-close {
-    width: 20px;
-    height: 20px;
-    position: absolute;
-    top: 0;
-    right: 0;
-    cursor: pointer;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABFJREFUCNdjIAb8//8BjIkAAOrOBd3TR0jRAAAAAElFTkSuQmCC);
-    background-size: 50% 50%;
-    background-position: center;
-    background-repeat: no-repeat; 
-}
-
-.p-gui--collapsed .p-gui__header-close {
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABVJREFUCNdjYEhgIIj///8AwsSoBQD43QydY5mb0QAAAABJRU5ErkJggg==);
-}
-
-.p-gui__image-container {
-    width: 100%;
-    display: grid;
-    grid-template-columns: repeat(auto-fill, 32%);
-    justify-content: space-between;
-    padding: 0 2%;
-}
-
-.p-gui__image {
-    aspect-ratio: 1 / 1;
-    background-size: cover;
-    cursor: pointer;
-    position: relative;
-    margin-top: 1px;
-    margin-bottom: 19px;
-}
-
-.p-gui__image-text {
-    position: absolute;
-    bottom: -15px;
-    color: #eee;
-    text-shadow: 0 -1px 0 #111;
-    white-space: nowrap;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
-.p-gui__button, 
-.p-gui__switch,
-.p-gui__list,
-.p-gui__vector2,
-.p-gui__color {
-    width: 100%;
-    padding: 7px;
-    color: white;
-    border-bottom: 1px solid #00ff89;
-    cursor: pointer;
-    position: relative;
-    box-sizing: border-box;
-    margin-bottom: 3px;
-}
-
-.p-gui__button,
-.p-gui__switch {
-    margin-right: 2px;
-    margin-left: 2px;
-    border: 1px solid rgba(0,0,0,.5);
-    border-bottom: 1px solid #00ff89;
-    border-radius: 2px;
-    background: rgba(0, 0, 0, .3);
-    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 5%, rgba(0,0,0,0) 95%, rgba(0,0,0,0.3) 100%);
-}
-
-.p-gui__button:hover,
-.p-gui__switch:hover {
-    background: rgba(0, 0, 0, .3);
-}
-
-.p-gui__folder .p-gui__button,
-.p-gui__folder .p-gui__switch {
-    margin-right: 0;
-    margin-left: 0;
-}
-
-.p-gui__vector2 {
-    background: transparent;
-    border-bottom: 1px solid #ff9999;
-    aspect-ratio: 1;
-    padding-bottom: 0;
-}
-
-.p-gui__vector2-area {
-    position: relative;
-    background: rgba(0, 0, 0, .3);
-    margin-top: 8px;
-    width: 100%;
-    height: calc(100% - 28px);
-    touch-action: none;
-}
-
-.p-gui__vector2-line {
-    position: absolute;
-    background: white;
-    opacity: .3;
-    pointer-events: none;
-}
-
-.p-gui__vector2-line-x {
-    width: 100%;
-    height: 1px;
-    left: 0;
-    top: 50%;
-    transform: translateY(-50%);
-}
-
-.p-gui__vector2-line-y {
-    width: 1px;
-    height: 100%;
-    top: 0;
-    left: 50%;
-    transform: translateX(-50%);
-}
-
-.p-gui__vector2-dot {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background: #d5d5d5;
-    border: 2px solid #ff9999;
-    transform: translate(-50%, -50%);
-    pointer-events: none;
-}
-
-.p-gui__switch-checkbox {
-    width: 5px;
-    height: 5px;
-    background-color: rgba(0, 0, 0, .5);
-    position: absolute;
-    top: 0;
-    right: 8px;
-    bottom: 0;
-    margin: auto;
-    border-radius: 50%;
-    pointer-events: none;
-}
-
-.p-gui__switch-checkbox--active {
-    background-color: #00ff89;
-    box-shadow: 0 0 5px #00ff89;
-}
-
-.p-gui__list,
-.p-gui__color {
-    cursor: default;
-}
-
-.p-gui__list-dropdown,
-.p-gui__color-picker {
-    position: absolute;
-    right: 5px;
-    top: 0;
-    bottom: 0;
-    margin: auto;
-    height: 21px;
-    cursor: pointer;
-}
-
-.p-gui__list-dropdown {
-    background: rgba(0,0,0,.25);
-    color: white;
-    border: 1px solid rgba(0,0,0,.5);
-    border-radius: 3px;
-    padding: 0 12px;
-    top: -1px;
-}
-
-.p-gui__color-picker {
-    -webkit-appearance: none;
-    padding: 0;
-    background-color: transparent;
-    border: 1px solid #222222;
-}
-
-.p-gui__color-picker::-webkit-color-swatch-wrapper {
-    padding: 0;
-}
-.p-gui__color-picker::-webkit-color-swatch {
-    border: none;
-}
-
-.p-gui__slider {
-    width: 100%;
-    margin-bottom: 8px;
-    padding: 7px;
-    color: white;
-    position: relative;
-    min-height: 14px;
-}
-
-.p-gui__slider-ctrl {
-    -webkit-appearance: none;
-    padding: 0;
-    font: inherit;
-    outline: none;
-    opacity: .8;
-    background: #00a1ff;
-    box-sizing: border-box;
-    cursor: pointer;
-    position: absolute;
-    bottom: -4px; /* 5px height -1px de dépassement du curseur */
-    right: 0;
-    height: 5px;
-    width: 100%;
-    margin: 0;
-}
-
-/* la zone de déplacement */
-.p-gui__slider-ctrl::-webkit-slider-runnable-track {
-    height: 13px;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;  /* supprimé définie sur l'input */
-}
-
-/* Curseur */
-.p-gui__slider-ctrl::-webkit-slider-thumb {
-    -webkit-appearance: none;       /* également nécessaire sur le curseur */
-    width: 15px;
-    height: 7px;
-    border: none;             /* pris en compte sur Webkit et Edge */
-    background: white;       /* pris en compte sur Webkit only */
-    position: relative;
-    top: 3px;
-    border-radius: 1px;
-}
-
-.p-gui__slider-value,
-.p-gui__vector-value {
-    display: inline-block;
-    position: absolute;
-    right: 7px;
-}
-
-.p-gui__folder {
-    width: 100%;
-    position: relative;
-    background: #434343;
-    overflow: auto;
-    margin-bottom: 3px;
-    display: flex;
-    flex-wrap: wrap;
-    border-left: 2px solid grey;
-    padding: 0 3px;
-}
-
-.p-gui__folder--first {
-    margin-top: 0;
-}
-
-.p-gui__folder--closed {
-    height: 22px;
-    overflow: hidden;
-}
-
-.p-gui__folder-header {
-    padding: 5px;
-    background-color: rgba(0, 0, 0, .5);
-    color: white;
-    cursor: pointer;
-    width: 100%;
-    margin: 0 -2px 2px -3px;
-}
-
-.p-gui__folder-header:hover {
-    background-color: rgba(0, 0, 0, .75);
-}
-
-.p-gui__folder-arrow {
-    width: 8px;
-    height: 8px;
-    display: inline-block;
-    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);
-    background-size: contain;
-    margin-right: 5px;
-    transform: rotate(90deg)
-}
-
-.p-gui__folder--closed .p-gui__folder-arrow {
-    transform: rotate(0deg);
-}
-`
-};
+export default function( position_type ) {
+    return /* css */`
+    .p-gui {
+        --main-border-radius: 5px;
+        --color-bg: #121212;
+        --color-border: #484848;
+        --color-border-2: rgba(255,255,255,.1);
+        --color-accent: #1681ca;
+        --color-accent-hover: #218fda;
+    
+        position: ${ position_type };
+        top: 0;
+        left: 0;
+        transform: translate3d(0,0,0);
+        padding-top: 21px;
+        background: var(--color-bg);
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        font-family: Verdana, Arial, sans-serif;
+        width: 290px;
+        overflow: auto;
+        box-shadow: 0 0 2px black;
+        box-sizing: border-box;
+        z-index: 99999;
+        user-select: none;
+        border-bottom-right-radius: 3px;
+        border-bottom-left-radius: 3px;
+        cursor: auto;
+        border-radius: var(--main-border-radius);
+        border: 1px solid var(--color-border);
+    }
+    
+    .p-gui * {
+        font-size: 11px;
+    }
+    
+    .p-gui::-webkit-scrollbar,
+    .p-gui *::-webkit-scrollbar {
+        width: 10px;
+    }
+    
+    .p-gui::-webkit-scrollbar-track,
+    .p-gui *::-webkit-scrollbar-track {
+        background: #2f2f2f; 
+        border-radius: 3px;
+    }
+    
+    .p-gui::-webkit-scrollbar-thumb,
+    .p-gui *::-webkit-scrollbar-thumb {
+        background: #757576; 
+        border-radius: 10px;
+        box-sizing: border-box;
+        border: 1px solid #2f2f2f;
+    }
+    
+    .p-gui--collapsed {
+        height: 0;
+        padding: 21px 10px 0 10px;
+        overflow: hidden;
+    }
+    
+    .p-gui__header {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 20px;
+        background-color: rgba(0, 0, 0, .8);
+        cursor: grab;
+        color: grey;
+        font-size: 10px;
+        line-height: 20px;
+        padding-left: 12px;
+        box-sizing: border-box;
+        touch-action: none;
+    }
+    
+    .p-gui__header-close {
+        width: 20px;
+        height: 20px;
+        position: absolute;
+        top: 0;
+        right: 5px;
+        cursor: pointer;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABFJREFUCNdjIAb8//8BjIkAAOrOBd3TR0jRAAAAAElFTkSuQmCC);
+        background-size: 50% 50%;
+        background-position: center;
+        background-repeat: no-repeat; 
+    }
+    
+    .p-gui--collapsed .p-gui__header-close {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUAQMAAAC3R49OAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAABVJREFUCNdjYEhgIIj///8AwsSoBQD43QydY5mb0QAAAABJRU5ErkJggg==);
+    }
+    
+    .p-gui__image-container {
+        width: 100%;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, 32%);
+        justify-content: space-between;
+        padding: 0 2%;
+    }
+    
+    .p-gui__image {
+        aspect-ratio: 1 / 1;
+        background-size: cover;
+        cursor: pointer;
+        position: relative;
+        margin-top: 1px;
+        margin-bottom: 19px;
+    }
+    
+    .p-gui__image-text {
+        position: absolute;
+        bottom: -15px;
+        color: #eee;
+        text-shadow: 0 -1px 0 #111;
+        white-space: nowrap;
+        width: 100%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+    
+    .p-gui__button, 
+    .p-gui__switch,
+    .p-gui__list,
+    .p-gui__vector2,
+    .p-gui__color {
+        width: 100%;
+        padding: 7px 13px;
+        color: white;
+        cursor: pointer;
+        position: relative;
+        box-sizing: border-box;
+        margin-bottom: 3px;
+        margin: 3px;
+        
+        border: 1px solid var(--color-border-2);
+        border-radius: var(--main-border-radius);
+    }
+
+    .p-gui__vector2 {
+        padding: 7px;
+    }
+    
+    .p-gui__button,
+    .p-gui__switch {
+        margin-right: 4px;
+        margin-left: 4px;
+    }
+    
+    .p-gui__button {
+        background: var(--color-accent);
+        text-align: center;
+        color: white;
+        border: none;
+    }
+    
+    .p-gui__button:hover {
+        background: var(--color-accent-hover);
+    }
+    
+    .p-gui__switch {
+        background: rgba(255, 255, 255, .05);
+    }
+
+    .p-gui__switch:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+    
+    .p-gui__folder .p-gui__button,
+    .p-gui__folder .p-gui__switch {
+        margin-right: 0;
+        margin-left: 0;
+    }
+    
+    .p-gui__vector2 {
+        background: transparent;
+        aspect-ratio: 1;
+        padding-bottom: 0;
+    }
+    
+    .p-gui__vector2-area {
+        position: relative;
+        background: rgba(0, 0, 0, .3);
+        margin-top: 8px;
+        width: 100%;
+        height: calc(100% - 28px);
+        touch-action: none;
+    }
+    
+    .p-gui__vector2-line {
+        position: absolute;
+        background: white;
+        opacity: .3;
+        pointer-events: none;
+    }
+    
+    .p-gui__vector2-line-x {
+        width: 100%;
+        height: 1px;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+    }
+    
+    .p-gui__vector2-line-y {
+        width: 1px;
+        height: 100%;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%);
+    }
+    
+    .p-gui__vector2-dot {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #d5d5d5;
+        border: 2px solid #ff9999;
+        transform: translate(-50%, -50%);
+        pointer-events: none;
+    }
+    
+    .p-gui__switch-checkbox {
+        width: 5px;
+        height: 5px;
+        background-color: rgba(0, 0, 0, .5);
+        border: 1px solid grey;
+        position: absolute;
+        top: 0;
+        right: 10px;
+        bottom: 0;
+        margin: auto;
+        border-radius: 50%;
+        pointer-events: none;
+    }
+    
+    .p-gui__switch-checkbox--active {
+        background-color: #00ff89;
+        box-shadow: 0 0 7px #00ff89;
+    }
+    
+    .p-gui__list,
+    .p-gui__color {
+        cursor: default;
+    }
+    
+    .p-gui__list-dropdown,
+    .p-gui__color-picker {
+        position: absolute;
+        right: 5px;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        height: 21px;
+        cursor: pointer;
+        border-radius: 3px;
+        border: 1px solid var(--color-border-2);
+    }
+    
+    .p-gui__list-dropdown {
+        background: rgba(255, 255, 255,.05);
+        color: white;
+        padding: 0 12px;
+        top: 0px;
+    }
+    
+    .p-gui__list-dropdown:hover {
+        background: rgba(255, 255, 255, .1);
+    }
+    
+    .p-gui__color-picker {
+        -webkit-appearance: none;
+        padding: 0;
+        background-color: transparent;
+        border: 1px solid #222222;
+        overflow: hidden;
+    }
+    
+    .p-gui__color-picker::-webkit-color-swatch-wrapper {
+        padding: 0;
+    }
+    .p-gui__color-picker::-webkit-color-swatch {
+        border: none;
+    }
+    
+    .p-gui__slider {
+        width: 100%;
+        margin-bottom: 8px;
+        padding: 7px;
+        color: white;
+        position: relative;
+        min-height: 14px;
+    }
+    
+    .p-gui__slider-ctrl {
+        -webkit-appearance: none;
+        padding: 0;
+        font: inherit;
+        outline: none;
+        opacity: .8;
+        background: var(--color-accent);
+        box-sizing: border-box;
+        cursor: pointer;
+        position: absolute;
+        bottom: -4px; /* 5px height -1px de dépassement du curseur */
+        right: 0;
+        height: 5px;
+        width: 100%;
+        margin: 0;
+    }
+    
+    /* la zone de déplacement */
+    .p-gui__slider-ctrl::-webkit-slider-runnable-track {
+        height: 13px;
+        border: none;
+        border-radius: 0;
+        background-color: transparent;  /* supprimé définie sur l'input */
+    }
+    
+    /* Curseur */
+    .p-gui__slider-ctrl::-webkit-slider-thumb {
+        -webkit-appearance: none;       /* également nécessaire sur le curseur */
+        width: 15px;
+        height: 7px;
+        border: none;             /* pris en compte sur Webkit et Edge */
+        background: white;       /* pris en compte sur Webkit only */
+        position: relative;
+        top: 3px;
+        border-radius: 1px;
+    }
+    
+    .p-gui__slider-value,
+    .p-gui__vector-value {
+        display: inline-block;
+        position: absolute;
+        right: 7px;
+    }
+    
+    .p-gui__folder {
+        width: 100%;
+        position: relative;
+        background: #434343;
+        overflow: auto;
+        margin-bottom: 3px;
+        display: flex;
+        flex-wrap: wrap;
+        border-left: 3px solid grey;
+        border-bottom: 1px solid grey;
+        padding: 0 3px;
+    }
+    
+    .p-gui__folder:last-of-type {
+        margin-bottom: 0;
+        border-bottom: none;
+    }
+    
+    .p-gui__folder--first {
+        margin-top: 0;
+    }
+    
+    .p-gui__folder--closed {
+        height: 32px;
+        overflow: hidden;
+    }
+    
+    .p-gui__folder-header {
+        padding: 10px 5px;
+        background-color: rgba(0, 0, 0, .5);
+        color: white;
+        cursor: pointer;
+        width: 100%;
+        margin: 0 -2px 2px -3px;
+    }
+    
+    .p-gui__folder-header:hover {
+        background-color: rgba(0, 0, 0, .75);
+    }
+    
+    .p-gui__folder-arrow {
+        width: 8px;
+        height: 8px;
+        display: inline-block;
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAHlBMVEUAAAD///////////////////////////////////8kfJuVAAAACXRSTlMA9Z1fCdMo1yxEJnA0AAAAK0lEQVQI12PABlRgjKkJUMZMYRhjpgqMAZSEMICSaIzpDWiKhdENhEhgAgATSg5jyWnYewAAAABJRU5ErkJggg==);
+        background-size: contain;
+        margin-right: 5px;
+        transform: rotate(90deg)
+    }
+    
+    .p-gui__folder--closed .p-gui__folder-arrow {
+        transform: rotate(0deg);
+    }
+    `
+    };