@nebularstreams/libmui 2.5.4 → 2.5.9

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.5.4",
+  "version": "2.5.9",
   "type": "module",
   "main": "src/index.js",
   "scripts": {

package/src/css/ui.popup.css

@@ -3,6 +3,8 @@
     flex-direction: row;
     font-size: 1.5rem !important;
     position: relative;
+    color: var(--text);
+    font-variant: all-small-caps;
 }
 
 #modal-container button i {
@@ -15,7 +17,8 @@
     font-size: 1.5rem;
     background: var(--inputs);
     height: 2.54rem;
-    margin-top: 0.25rem;;
+    margin-top: 0.25rem;
+    border: solid 1px var(--border-color);
 }
 
 .modal-content textarea {
@@ -35,7 +38,7 @@
 
 #modal-container > .modal-content {
     width: auto !important;
-    min-width: 30%;
+    min-width: 500px;
     max-width: 50%;
     max-height: 75%;
     overflow-y: auto;
@@ -66,6 +69,8 @@
     border-radius: 0.25rem;
     background: var(--inputs);
     outline: none;
+    color: var(--text);
+
 }
 
 #modaltitle {
@@ -99,6 +104,7 @@
 #modal-container button {
     background: transparent;
     border: none;
+    color: var(--text);
 }
 
 #modal-container .container {

package/src/style.js

@@ -13,3 +13,19 @@ import "./css/fontawesome/fontawesome-ext.css"
 import "./css/fontawesome/brands.min.css"
 
 import "./css/ui.popup.css"
+
+import "./widgets/css/buttonchoice.css"
+import "./widgets/css/buttonchoice.toggle.css"
+import "./widgets/css/choicer.css"
+import "./widgets/css/colorjoewidget.css"
+import "./widgets/css/combo.ellipsis.css"
+import "./widgets/css/fileminibutton.css"
+import "./widgets/css/input.css"
+import "./widgets/css/progressstrip.css"
+import "./widgets/css/range-anims.css"
+import "./widgets/css/separator.css"
+import "./widgets/css/smileys.css"
+import "./widgets/css/templatedinput.css"
+import "./widgets/css/uploadfile.css"
+import "./widgets/css/colorjoe.css"
+import "./widgets/css/mithril-range.css"

package/src/widgets/CardieWidget.js

@@ -73,7 +73,7 @@ const CardieWidget = defineWidget(
             ? m(
                 (element || "ul"),
                 {
-                    class: "cardie ohidden noshrink "
+                    class: "cardie ohidden "
                         + (cols ? "flexcol " : "flexrow wrap ")
                         + (attrs.class ? " " + attrs.class : "")
                         + (nofold

package/src/widgets/css/buttonchoice.css

@@ -0,0 +1,62 @@
+
+.buttonchoice > .wrap > button {
+    /*border-bottom: solid 1px var(--border-color);*/
+    padding: 0 0.2rem;
+    line-height: var(--unitsize-small);
+    height: var(--unitsize-small);
+}
+
+.buttonchoice.withicon {
+    background: var(--window-background);
+}
+
+.buttonchoice.withicon:before {
+    width: var(--unitsize);
+    display: block;
+    text-align: center;
+    flex-grow: 0;
+    flex-shrink: 0;
+    font-family: 'Font Awesome 5 Free';
+    align-self: center;
+}
+
+/*
+.buttonchoice.witharia > div {
+    margin-top: 0.25rem;
+}
+*/
+
+.hud .clrcombo {
+    color: var(--text-lo);
+    font-size: 1rem;
+}
+
+.combowidget.novalue button {
+    color: var(--text-lo);
+    opacity: 0.6;
+}
+
+.hud .innercard .title .combowidget {
+    background: transparent;
+}
+
+.buttonchoice.withicon > .bg-inputs button.accent {
+    color: var(--text-over-accent) !important;
+    background: var(--accent) !important;
+}
+
+.buttonchoice.withicon > .bg-inputs button.accent.alt-accent {
+    background: var(--green) !important;
+    color: var(--text-over-accent) !important;
+}
+
+.buttonchoice button.alt-accent {
+    background: var(--back-error);
+}
+
+/* fixes
+.buttonchoice.withicon > .bg-inputs button.accent {
+    color: var(--accent) !important;
+    background: transparent;
+}
+*/

package/src/widgets/css/buttonchoice.toggle.css

@@ -0,0 +1,36 @@
+.buttonchoice > div > button {
+    border: 0;
+    font-size: 1rem;
+    min-width: 3rem;
+}
+
+.buttonchoice.istoggler > div > button.accent {
+    border-bottom-color: var(--accent) !important;
+}
+
+.buttonchoice.istoggler > div > button {
+    border-bottom: solid var(--border-color);
+    color: var(--text-lo);
+    transition: all 0.25s ease-in-out;
+}
+
+.hud .tgbutton.accent {
+    border-bottom-color: var(--accent) !important;
+}
+
+.hud .tgbutton.accent.important {
+    border-bottom-color: red !important;
+    color: red !important;
+}
+
+.hud .tgbutton.accent.warning {
+    border-bottom-color: orange !important;
+    color: orange !important;
+}
+
+.hud .tgbutton {
+    font-size: 1rem;
+    border-bottom: solid var(--border-color);
+    color: var(--text-lo);
+    transition: all 0.25s ease-in-out;
+}

package/src/widgets/css/choicer.css

@@ -0,0 +1,24 @@
+.choicer > div:before {
+    flex-grow: 1;
+    font-family: 'Font Awesome 5 Free';
+}
+
+.confhud .choicer:before, ul.sessionevents:before {
+    content: attr(data-title);
+    text-align: left;
+    font-size: 1em;
+    background: rgba(0, 0, 0, 0.1);
+    padding: 0;
+    margin: 0 0 1rem 0 !important;
+    font-variant: all-small-caps;
+    font-weight: bold;
+    border-bottom: solid;
+}
+
+.choicer:before {
+    margin: .25rem 0 .25rem 0;
+}
+
+.combowidget button {
+    font-size: inherit;
+}

package/src/widgets/css/colorjoe.css

@@ -0,0 +1,230 @@
+#rgbValue, #hslaValue {
+    float: right;
+}
+
+.cj-container {
+    overflow: auto;
+}
+
+#showPicker {
+    float: left;
+}
+
+.colorjoe-popper .colorprobe i {
+    position: static !important;
+}
+
+.colorjoe-wrapper {
+    display: flex;
+    position: absolute;
+    left: 3%;
+    z-index: 100002;
+    width: 94%;
+    box-shadow: 0 0 3px var(--shadow-color);
+    background: var(--window-background);
+    border-radius: 0.5rem;
+}
+
+.colorPicker {
+    display: flex;
+    justify-content: space-evenly;
+    --colorjoe-size: 200px;
+}
+
+.colorjoe-popper .colorPicker {
+    --colorjoe-size: 300px;
+}
+/*
+.colorPicker {
+    display: flex;
+    position: absolute;
+    left: 3%;
+    z-index: 100002;
+    width: 94%;
+    justify-content: space-evenly;
+    box-shadow: 0 0 3px var(--shadow-color);
+    padding: 0.6rem 0;
+    background: var(--window-background);
+    border-radius: 0.5rem;
+    margin: 0.5rem 0;
+}
+*/
+
+.underlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    right: 0;
+    background: transparent;
+    z-index: 100000;
+}
+
+.colorPicker .extras {
+    float: right;
+}
+
+.colorPicker .extras .currentColorContainer {
+    overflow: hidden;
+}
+
+.colorPicker .extras .currentColor {
+    float: right;
+    width: 65px;
+    height: 30px;
+    border: 1px solid #BBB;
+    -moz-border-radius: .3em;
+    border-radius: .3em;
+}
+
+.colorPicker .extras .colorFields {
+    margin-top: 0.5em;
+    margin-bottom: 0.5em;
+}
+
+.colorPicker .extras .color {
+    text-align: right;
+}
+
+.colorPicker .extras .colorFields input {
+    width: 40px;
+    margin-left: 0.5em;
+}
+
+.colorPicker .extras .hex {
+    float: right;
+}
+
+.colorPicker .extras .hex input {
+    width: 60px;
+}
+
+.colorPicker .twod {
+    float: left;
+    margin: 0.5em;
+}
+
+/* main dimensions */
+.colorPicker .twod, .colorPicker .twod .bg {
+    width: var(--colorjoe-size);
+    height: var(--colorjoe-size);
+}
+
+.colorPicker .oned, .colorPicker .oned .bg {
+    height: var(--colorjoe-size);
+}
+
+.colorPicker .oned, .colorPicker .oned .bg, .colorPicker .oned .pointer .shape {
+    width: 20px;
+}
+
+.colorPicker .twod .bg {
+    position: absolute;
+
+    /* These seem to cause issues in some browsers, careful!
+    border: 1px solid #BBB;
+    -moz-border-radius: .3em;
+    border-radius: .3em;
+    */
+}
+
+.colorPicker .twod .pointer {
+    position: relative;
+    z-index: 2;
+    width: 8px;
+}
+
+.colorPicker .twod .pointer .shape {
+    position: absolute;
+}
+
+.colorPicker .twod .pointer .shape1 {
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    width: 10px;
+    height: 10px;
+    border: 2px solid black;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+.colorPicker .twod .pointer .shape2 {
+    -webkit-transform: translate(-50%, -50%);
+    -ms-transform: translate(-50%, -50%);
+    transform: translate(-50%, -50%);
+    width: 8px;
+    height: 8px;
+    border: 2px solid white;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.colorPicker .oned {
+    float: left;
+    margin: 0.5em;
+}
+
+.colorPicker .oned .bg {
+    border: 1px solid #BBB;
+    /*
+    -moz-border-radius: .3em;
+    border-radius: .3em;
+    */
+}
+
+.colorPicker .oned .pointer {
+    position: relative;
+    z-index: 2;
+}
+
+.colorPicker .oned .pointer .shape {
+    position: absolute;
+    margin-left: -1px;
+    margin-top: -4px;
+    height: 5px;
+    border: 2px solid black;
+    -moz-border-radius: 5px;
+    border-radius: 5px;
+}
+
+/* gradients, tweak as needed based on which browsers you want to support */
+.colorPicker .oned .bg {
+    background: linear-gradient(to bottom, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
+}
+
+.colorPicker .twod .bg1 {
+    z-index: 0;
+    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
+}
+
+.colorPicker .twod .bg2 {
+    z-index: 1;
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
+}
+
+#hslPicker .twod .bg1 {
+    background: linear-gradient(to right, #ff0000 0%, #ffff00 17%, #00ff00 33%, #00ffff 50%, #0000ff 66%, #ff00ff 83%, #ff0000 100%);
+}
+
+#hslPicker .twod .bg2 {
+    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(127, 127, 127, 1) 100%);
+}
+
+#hslPicker .oned .bg {
+    z-index: 1;
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 1) 100%);
+}
+
+#hslPicker .extras {
+    width: 100px;
+}
+
+#hslPicker .oned.alpha {
+    margin: 0;
+}
+
+#hslPicker .oned.alpha .bg,
+.colorPicker .oned.alpha .bg {
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(0, 0, 0, 0) 100%); /* W3C */
+}

package/src/widgets/css/colorjoewidget.css

@@ -0,0 +1,122 @@
+.hud .colorjoe-wrapper {
+    display: flex;
+    position: absolute;
+    left: 0.25rem;
+    right: 0.25rem;
+    z-index: 100002;
+    width: auto;
+    justify-content: space-evenly;
+    box-shadow: none;
+    padding: 0.6rem 0;
+    background: var(--window-background);
+    border-radius: 0.25rem;
+    margin: 0.5rem 0;
+    border: solid 1px var(--border-color);
+}
+
+.hud .colorjoe-cell {
+    height: fit-content;
+    border-radius: 0.25rem;
+    overflow: hidden;
+    border: solid 1px var(--border-color);
+}
+
+.colorjoe-cell > .inset {
+    height: 2rem;
+    position: relative;
+}
+
+.hud .gradient .colorjoe-cell > .inset {
+    min-width: unset;
+    position: relative;
+}
+
+.hud .colorjoe-cell > .inset.titled:before {
+    content: attr(data-caption);
+    text-align: center;
+    font-size: 1.1rem;
+    font-variant: all-small-caps;
+    width: 100%;
+    display: inline-block;
+    text-shadow: 0 0 4px black;
+    color: white;
+}
+
+
+.hud .colorjoe-cell.withalt > .inset:after {
+    content: "";
+    background: var(--accent);
+    height: 4px;
+    width: var(--data-altval);
+    position: absolute;
+    left: 0;
+    bottom: 2px;
+}
+
+.hud .colorjoe-cell > .inset {
+    min-width: 2.54rem;
+    cursor: pointer;
+}
+
+.hud .cardie > .title .colorjoe-cell > .inset {
+    height: 2.54rem;
+}
+
+.hud .colorjoe-cell.unitheightsmall > .inset {
+    height: 2rem;
+}
+
+.hud .colorjoe-cell.unitheight > .inset {
+    height: 2.54rem;
+}
+
+.hud .gradient {
+    border-radius: 0.25rem;
+    border: solid 1px var(--border-color);
+    height: auto;
+}
+
+.hud .gradient button {
+    border-top-right-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
+}
+
+.hud .gradient button.leftmost {
+    border-radius: 0.25rem 0 0 0.25rem;
+}
+
+.hud .gradient > .colorjoe-cell + .colorjoe-cell {
+    border-radius: 0;
+}
+
+.hud .gradient .colorjoe-cell {
+    border-radius: 0;
+    border: 0;
+    height: 2rem;
+}
+
+.hud .underlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 100%;
+    right: 0;
+    background: transparent;
+    z-index: 100;
+}
+
+
+.hud .colorjoe-cell.chequered.open {
+    margin-bottom: 360px;
+    min-width: 300px;
+}
+
+.hud .innercard .colorjoe-cell.chequered.open {
+    min-width: 260px;
+}
+
+
+.ptype_color {
+    width: auto;
+    position: relative;
+}

package/src/widgets/css/combo.ellipsis.css

@@ -0,0 +1,10 @@
+.ptype_combo .combovalue span {
+    font-size: 1rem;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+
+.combovalue, .combowidget {
+    overflow: hidden;
+}

package/src/widgets/css/fileminibutton.css

@@ -0,0 +1,12 @@
+.hud .selectfile > input {
+    opacity: 0;
+    z-index: 2;
+    left: 0;
+    top: 0;
+    cursor: pointer;
+}
+
+.hud .toolz .textfield input {
+    padding-left: 2rem;
+}
+

package/src/widgets/css/input.css

@@ -0,0 +1,27 @@
+.textfield {
+    position: relative;
+}
+
+.textfield input {
+    height: 2rem;
+    bordeR: solid 1px var(--border-color);
+    background: var(--inputs);
+    padding: 0 0.2rem;
+    color: var(--text);
+    outline: none !Important;
+    border-radius: 0.25rem;
+}
+
+.textfield input.withicon {
+    padding-right: 3.5rem;
+}
+
+.textfield input.withicon-2 {
+    padding-right: 3rem;
+}
+
+.input-static.withdrag {
+    cursor: ns-resize;
+    border: solid 1px var(--border-color);
+    padding: 0.25rem;
+}

package/src/widgets/css/mithril-range.css

@@ -0,0 +1,69 @@
+/* Styles for mithril-range */
+
+/* Container hit area */
+.mithril-range {
+    position: relative;
+    width: 100%;
+    padding: 0.7rem 0.5rem;
+    box-sizing: border-box;
+    user-select: none;
+    cursor: pointer;
+    outline: none !important;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    font-size: 1rem;
+}
+
+.mithril-range:focus .mithril-range-handle {
+    background: var(--accent-alt) !important;
+}
+
+/* Bar in the middle of hit area */
+
+.mithril-range-bar {
+    position: relative;
+    width: 100%;
+    height: 1.2rem;
+    box-sizing: border-box;
+}
+
+.mithril-range-bar-1 {
+    position: absolute;
+    left: 0;
+    top: 0.4rem;
+    width: 100%;
+    height: 0.3rem;
+    background-color: var(--accent);
+    box-sizing: border-box;
+    border-top-left-radius: 1rem;
+    border-bottom-left-radius: 1rem;
+}
+
+.mithril-range-bar-0 {
+    position: absolute;
+    right: 0;
+    top: 0.4rem;
+    width: 0;
+    height: 0.3rem;
+    box-sizing: border-box;
+    border-top-right-radius: 1rem;
+    border-bottom-right-radius: 1rem;
+    background: var(--window-background-lo);
+}
+
+/* Handle centered on bar */
+.mithril-range-handle {
+    position: absolute;
+    left: 0;
+    top: 0.1rem;
+    display: inline-block;
+    background-color: #FFF;
+    width: 2px;
+    height: 0.8rem;
+    box-sizing: border-box;
+    border-top: 0;
+    border-bottom: 0;
+    box-shadow: 0 0 4px var(--shadow-color);
+    margin-top: 0.05rem;
+}
+
+/* End styles for mithril-range */

package/src/widgets/css/progressstrip.css

@@ -0,0 +1,31 @@
+.hud .progstrip {
+    border-radius: 0.25rem;
+    background: var(--window-background-lo);
+    cursor: crosshair;
+    border: solid 1px var(--border-color);
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    height: 1.25rem;
+    line-height: 1.25rem;
+}
+
+
+.videocollapsed.ispaused .progstrip > .inner {
+    background: yellow;
+}
+
+.hud .progstrip .cuein,
+.hud .progstrip .cueout {
+    width: 2px;
+    background: red;
+}
+.hud .progstrip:after {
+    content: attr(data-time) " / " attr(data-total);
+    position: absolute;
+    color: white;
+    width: 100%;
+    font-weight: bold;
+    font-size: 0.75rem;
+    mix-blend-mode: difference;
+    text-align: center;
+}