@nebularstreams/libmui 2.5.7 → 2.5.9

package/dist/libui.css

@@ -12,4 +12,4 @@
 /*!
  * Font Awesome Free 5.15.3 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */@font-face{font-display:block;font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(webfonts/fa-brands-400.woff2) format("woff2")}.fabrd:before{font-family:Font Awesome\ 5 Brands!important;font-weight:400}#modal-container button{flex-direction:row;font-size:1.5rem!important;height:2.54rem;position:relative}#modal-container button i{left:0;position:absolute;top:.5rem}#modal-container input{background:var(--inputs);font-size:1.5rem;height:2.54rem;margin-top:.25rem}.modal-content textarea{background:var(--inputs);border:1px solid var(--border-color);font-family:inherit;font-size:inherit;max-height:15rem;min-height:5rem;resize:vertical}#modal-container>.modal-content button{text-overflow:ellipsis;white-space:nowrap}#modal-container>.modal-content{background-color:var(--accent-light);border-radius:1rem;max-height:75%;max-width:50%;min-width:30%;overflow-y:auto;width:auto!important}#modal-container.iscustom{backdrop-filter:none}.modal-content-popper{background:var(--window-background-hi);border-radius:1rem;box-shadow:0 0 2px var(--shadow-color);padding:2rem}.modal-content h4{margin:1rem}.modal-content .popup input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;font-size:1.25rem;line-height:var(--unitsize-small);outline:none;padding:0 .75rem}#modaltitle{font-size:1.5rem;font-variant:all-small-caps;margin-bottom:0;margin-top:0;padding-bottom:.5rem;padding-top:0;text-align:center}#modal-container{--accent-light:#333;--text:#ddd;--text-lo:#aaa;align-items:center;background:rgba(0,0,0,.7);bottom:0;color:var(--accent);display:none;font-size:1.25rem;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:100000}#modal-container button{background:transparent;border:none}#modal-container .container{padding:1rem;text-align:right}.buttonchoice>.wrap>button{height:var(--unitsize-small);line-height:var(--unitsize-small);padding:0 .2rem}.buttonchoice.withicon{background:var(--window-background)}.buttonchoice.withicon:before{align-self:center;display:block;flex-grow:0;flex-shrink:0;font-family:Font Awesome\ 5 Free;text-align:center;width:var(--unitsize)}.hud .clrcombo{color:var(--text-lo);font-size:1rem}.combowidget.novalue button{color:var(--text-lo);opacity:.6}.hud .innercard .title .combowidget{background:transparent}.buttonchoice.withicon>.bg-inputs button.accent{background:var(--accent)!important;color:var(--text-over-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)}.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 .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{border-bottom:solid var(--border-color);color:var(--text-lo);font-size:1rem;transition:all .25s ease-in-out}.choicer>div:before{flex-grow:1;font-family:Font Awesome\ 5 Free}.confhud .choicer:before,ul.sessionevents:before{background:rgba(0,0,0,.1);border-bottom:solid;content:attr(data-title);font-size:1em;font-variant:all-small-caps;font-weight:700;margin:0 0 1rem!important;padding:0;text-align:left}.choicer:before{margin:.25rem 0}.combowidget button{font-size:inherit}.hud .colorjoe-wrapper{background:var(--window-background);box-shadow:none;display:flex;justify-content:space-evenly;left:.25rem;margin:.5rem 0;padding:.6rem 0;position:absolute;right:.25rem;width:auto;z-index:100002}.hud .colorjoe-cell,.hud .colorjoe-wrapper{border:1px solid var(--border-color);border-radius:.25rem}.hud .colorjoe-cell{height:fit-content;overflow:hidden}.colorjoe-cell>.inset{height:2rem;position:relative}.hud .gradient .colorjoe-cell>.inset{min-width:unset;position:relative}.hud .colorjoe-cell>.inset.titled:before{color:#fff;content:attr(data-caption);display:inline-block;font-size:1.1rem;font-variant:all-small-caps;text-align:center;text-shadow:0 0 4px #000;width:100%}.hud .colorjoe-cell.withalt>.inset:after{background:var(--accent);bottom:2px;content:"";height:4px;left:0;position:absolute;width:var(--data-altval)}.hud .colorjoe-cell>.inset{cursor:pointer;min-width:2.54rem}.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:1px solid var(--border-color);border-radius:.25rem;height:auto}.hud .gradient button{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.hud .gradient button.leftmost{border-radius:.25rem 0 0 .25rem}.hud .gradient>.colorjoe-cell+.colorjoe-cell{border-radius:0}.hud .gradient .colorjoe-cell{border:0;border-radius:0;height:2rem}.hud .underlay{background:transparent;height:100%;left:0;position:fixed;right:0;top:0;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{position:relative;width:auto}.ptype_combo .combovalue span{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combovalue,.combowidget{overflow:hidden}.hud .selectfile>input{cursor:pointer;left:0;opacity:0;top:0;z-index:2}.hud .toolz .textfield input{padding-left:2rem}.textfield input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;color:var(--text);height:2rem;outline:none!important;padding:0 .2rem}.textfield input.withicon{padding-right:3.5rem}.textfield input.withicon-2{padding-right:3rem}.input-static.withdrag{border:1px solid var(--border-color);cursor:ns-resize;padding:.25rem}.hud .progstrip{background:var(--window-background-lo);border:1px solid var(--border-color);border-radius:.25rem;cursor:crosshair;height:1.25rem;line-height:1.25rem;margin-bottom:0;margin-top:.5rem}.videocollapsed.ispaused .progstrip>.inner{background:#ff0}.hud .progstrip .cuein,.hud .progstrip .cueout{background:red;width:2px}.hud .progstrip:after{color:#fff;content:attr(data-time) " / " attr(data-total);font-size:.75rem;font-weight:700;mix-blend-mode:difference;position:absolute;text-align:center;width:100%}.withmultiplier .mithril-range-bar-0,.withmultiplier .mithril-range-bar-1,.withmultiplier .mithril-range-handle{transition:.1s linear}.withmultiplier .mithril-range:active *{transition:none!important}.range.disabled{cursor:not-allowed}.range.disabled>.mithril-range .mithril-range-bar-1.nokey{background-color:var(--window-background)}.range.disabled>.mithril-range{opacity:.8;pointer-events:none}.plussep:before{font-family:Font Awesome\ 5 Free;left:1rem;position:absolute}.plussep.contracted:before{color:var(--accent)}.plussep{border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);cursor:pointer;padding:.25rem 0;position:relative}.flexcol>.separator{flex-grow:0!important}.hud .smileyswidget{height:100vh}.smileyswidget icons{overflow-x:hidden}.smileyswidget .categories{cursor:pointer;font-size:.75em;padding:0 .5rem;width:20%}.smileyswidget .smiley{background:var(--window-background-hi);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;font-size:3rem;justify-content:center;margin:1px;overflow:hidden;padding:0 .5rem;text-align:center}.font-200{font-size:2rem}.smileyswidget .smiley:active{transform:scale(.9)}.smileyswidget .categories>div{background:var(--window-background);border-radius:.5rem;font-variant:all-small-caps;line-height:1rem;margin:.25rem;padding:.25rem;text-align:center}.smileyswidget .categories.flexrow{background:var(--window-background-hi);border-bottom:3px solid var(--border-color);flex-wrap:wrap;font-size:1rem;justify-content:space-between;padding:.25rem;width:auto}.smileyswidget .categories.flexrow>div.isfav{color:#ff0;padding-left:.25rem;padding-right:.35rem;padding-top:.25rem}.hud input.transparent{background:transparent;border:0!important;border-radius:0}.hud .order-end{order:100}.smileyswidget .smiley.fa{padding:.5rem}.hud .templatedinput .paramgroup{background:var(--window-background);border:1px solid var(--border-color);border-radius:.5rem;margin-top:.5rem;overflow:hidden;padding:.5rem .25rem}.hud .templatedinput .paramgroup>div{margin-bottom:.25rem}.hud .separator{flex-grow:1;font-variant:all-small-caps;opacity:.75}.hud .ptype_separator.flexbreak>*{display:none}.hud .ptype_iterakey .separator{margin:.25rem!important}.hud .separator.inlier{background:var(--window-background-lo);text-align:center}.hud .separator.mini{border-bottom:1px solid;margin:.15rem 0}.hud .separator.outlier{margin-left:-.75rem;margin-right:-.75rem}.hud .separator.outlier-1{margin-left:-.25rem;margin-right:-.25rem}.propsdeck.tab-inter-1{overflow-y:auto}.hud .propsdeck .mk_face.workshop,.hud .propsdeck .mk_workshop{border-bottom:1px solid var(--border-color);padding-bottom:0;padding-top:0}.uploadfile input{opacity:0;z-index:100}
+ */@font-face{font-display:block;font-family:Font Awesome\ 5 Brands;font-style:normal;font-weight:400;src:url(webfonts/fa-brands-400.woff2) format("woff2")}.fabrd:before{font-family:Font Awesome\ 5 Brands!important;font-weight:400}#modal-container button{flex-direction:row;font-size:1.5rem!important;height:2.54rem;position:relative}#modal-container button i{left:0;position:absolute;top:.5rem}#modal-container input{background:var(--inputs);font-size:1.5rem;height:2.54rem;margin-top:.25rem}.modal-content textarea{background:var(--inputs);border:1px solid var(--border-color);font-family:inherit;font-size:inherit;max-height:15rem;min-height:5rem;resize:vertical}#modal-container>.modal-content button{text-overflow:ellipsis;white-space:nowrap}#modal-container>.modal-content{background-color:var(--accent-light);border-radius:1rem;max-height:75%;max-width:50%;min-width:30%;overflow-y:auto;width:auto!important}#modal-container.iscustom{backdrop-filter:none}.modal-content-popper{background:var(--window-background-hi);border-radius:1rem;box-shadow:0 0 2px var(--shadow-color);padding:2rem}.modal-content h4{margin:1rem}.modal-content .popup input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;font-size:1.25rem;line-height:var(--unitsize-small);outline:none;padding:0 .75rem}#modaltitle{font-size:1.5rem;font-variant:all-small-caps;margin-bottom:0;margin-top:0;padding-bottom:.5rem;padding-top:0;text-align:center}#modal-container{--accent-light:#333;--text:#ddd;--text-lo:#aaa;align-items:center;background:rgba(0,0,0,.7);bottom:0;color:var(--accent);display:none;font-size:1.25rem;justify-content:center;left:0;position:absolute;right:0;top:0;z-index:100000}#modal-container button{background:transparent;border:none}#modal-container .container{padding:1rem;text-align:right}.buttonchoice>.wrap>button{height:var(--unitsize-small);line-height:var(--unitsize-small);padding:0 .2rem}.buttonchoice.withicon{background:var(--window-background)}.buttonchoice.withicon:before{align-self:center;display:block;flex-grow:0;flex-shrink:0;font-family:Font Awesome\ 5 Free;text-align:center;width:var(--unitsize)}.hud .clrcombo{color:var(--text-lo);font-size:1rem}.combowidget.novalue button{color:var(--text-lo);opacity:.6}.hud .innercard .title .combowidget{background:transparent}.buttonchoice.withicon>.bg-inputs button.accent{background:var(--accent)!important;color:var(--text-over-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)}.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 .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{border-bottom:solid var(--border-color);color:var(--text-lo);font-size:1rem;transition:all .25s ease-in-out}.choicer>div:before{flex-grow:1;font-family:Font Awesome\ 5 Free}.confhud .choicer:before,ul.sessionevents:before{background:rgba(0,0,0,.1);border-bottom:solid;content:attr(data-title);font-size:1em;font-variant:all-small-caps;font-weight:700;margin:0 0 1rem!important;padding:0;text-align:left}.choicer:before{margin:.25rem 0}.combowidget button{font-size:inherit}.hud .colorjoe-wrapper{background:var(--window-background);box-shadow:none;display:flex;justify-content:space-evenly;left:.25rem;margin:.5rem 0;padding:.6rem 0;position:absolute;right:.25rem;width:auto;z-index:100002}.hud .colorjoe-cell,.hud .colorjoe-wrapper{border:1px solid var(--border-color);border-radius:.25rem}.hud .colorjoe-cell{height:fit-content;overflow:hidden}.colorjoe-cell>.inset{height:2rem;position:relative}.hud .gradient .colorjoe-cell>.inset{min-width:unset;position:relative}.hud .colorjoe-cell>.inset.titled:before{color:#fff;content:attr(data-caption);display:inline-block;font-size:1.1rem;font-variant:all-small-caps;text-align:center;text-shadow:0 0 4px #000;width:100%}.hud .colorjoe-cell.withalt>.inset:after{background:var(--accent);bottom:2px;content:"";height:4px;left:0;position:absolute;width:var(--data-altval)}.hud .colorjoe-cell>.inset{cursor:pointer;min-width:2.54rem}.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:1px solid var(--border-color);border-radius:.25rem;height:auto}.hud .gradient button{border-bottom-right-radius:.25rem;border-top-right-radius:.25rem}.hud .gradient button.leftmost{border-radius:.25rem 0 0 .25rem}.hud .gradient>.colorjoe-cell+.colorjoe-cell{border-radius:0}.hud .gradient .colorjoe-cell{border:0;border-radius:0;height:2rem}.hud .underlay{background:transparent;height:100%;left:0;position:fixed;right:0;top:0;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{position:relative;width:auto}.ptype_combo .combovalue span{font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.combovalue,.combowidget{overflow:hidden}.hud .selectfile>input{cursor:pointer;left:0;opacity:0;top:0;z-index:2}.hud .toolz .textfield input{padding-left:2rem}.textfield{position:relative}.textfield input{background:var(--inputs);border:1px solid var(--border-color);border-radius:.25rem;color:var(--text);height:2rem;outline:none!important;padding:0 .2rem}.textfield input.withicon{padding-right:3.5rem}.textfield input.withicon-2{padding-right:3rem}.input-static.withdrag{border:1px solid var(--border-color);cursor:ns-resize;padding:.25rem}.hud .progstrip{background:var(--window-background-lo);border:1px solid var(--border-color);border-radius:.25rem;cursor:crosshair;height:1.25rem;line-height:1.25rem;margin-bottom:0;margin-top:.5rem}.videocollapsed.ispaused .progstrip>.inner{background:#ff0}.hud .progstrip .cuein,.hud .progstrip .cueout{background:red;width:2px}.hud .progstrip:after{color:#fff;content:attr(data-time) " / " attr(data-total);font-size:.75rem;font-weight:700;mix-blend-mode:difference;position:absolute;text-align:center;width:100%}.withmultiplier .mithril-range-bar-0,.withmultiplier .mithril-range-bar-1,.withmultiplier .mithril-range-handle{transition:.1s linear}.withmultiplier .mithril-range:active *{transition:none!important}.range.disabled{cursor:not-allowed}.range.disabled>.mithril-range .mithril-range-bar-1.nokey{background-color:var(--window-background)}.range.disabled>.mithril-range{opacity:.8;pointer-events:none}.plussep:before{font-family:Font Awesome\ 5 Free;left:1rem;position:absolute}.plussep.contracted:before{color:var(--accent)}.plussep{border-bottom:1px solid var(--border-color);border-top:1px solid var(--border-color);cursor:pointer;padding:.25rem 0;position:relative}.flexcol>.separator{flex-grow:0!important}.hud .smileyswidget{height:100vh}.smileyswidget icons{overflow-x:hidden}.smileyswidget .categories{cursor:pointer;font-size:.75em;padding:0 .5rem;width:20%}.smileyswidget .smiley{background:var(--window-background-hi);box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;flex-grow:1;flex-shrink:0;font-size:3rem;justify-content:center;margin:1px;overflow:hidden;padding:0 .5rem;text-align:center}.font-200{font-size:2rem}.smileyswidget .smiley:active{transform:scale(.9)}.smileyswidget .categories>div{background:var(--window-background);border-radius:.5rem;font-variant:all-small-caps;line-height:1rem;margin:.25rem;padding:.25rem;text-align:center}.smileyswidget .categories.flexrow{background:var(--window-background-hi);border-bottom:3px solid var(--border-color);flex-wrap:wrap;font-size:1rem;justify-content:space-between;padding:.25rem;width:auto}.smileyswidget .categories.flexrow>div.isfav{color:#ff0;padding-left:.25rem;padding-right:.35rem;padding-top:.25rem}.hud input.transparent{background:transparent;border:0!important;border-radius:0}.hud .order-end{order:100}.smileyswidget .smiley.fa{padding:.5rem}.hud .templatedinput .paramgroup{background:var(--window-background);border:1px solid var(--border-color);border-radius:.5rem;margin-top:.5rem;overflow:hidden;padding:.5rem .25rem}.hud .templatedinput .paramgroup>div{margin-bottom:.25rem}.hud .separator{flex-grow:1;font-variant:all-small-caps;opacity:.75}.hud .ptype_separator.flexbreak>*{display:none}.hud .ptype_iterakey .separator{margin:.25rem!important}.hud .separator.inlier{background:var(--window-background-lo);text-align:center}.hud .separator.mini{border-bottom:1px solid;margin:.15rem 0}.hud .separator.outlier{margin-left:-.75rem;margin-right:-.75rem}.hud .separator.outlier-1{margin-left:-.25rem;margin-right:-.25rem}.propsdeck.tab-inter-1{overflow-y:auto}.hud .propsdeck .mk_face.workshop,.hud .propsdeck .mk_workshop{border-bottom:1px solid var(--border-color);padding-bottom:0;padding-top:0}.uploadfile input{opacity:0;z-index:100}#hslaValue,#rgbValue{float:right}.cj-container{overflow:auto}#showPicker{float:left}.colorjoe-popper .colorprobe i{position:static!important}.colorjoe-wrapper{background:var(--window-background);border-radius:.5rem;box-shadow:0 0 3px var(--shadow-color);display:flex;left:3%;position:absolute;width:94%;z-index:100002}.colorPicker{--colorjoe-size:200px;display:flex;justify-content:space-evenly}.colorjoe-popper .colorPicker{--colorjoe-size:300px}.underlay{background:transparent;height:100%;left:0;position:fixed;right:0;top:0;z-index:100000}.colorPicker .extras{float:right}.colorPicker .extras .currentColorContainer{overflow:hidden}.colorPicker .extras .currentColor{border:1px solid #bbb;-moz-border-radius:.3em;border-radius:.3em;float:right;height:30px;width:65px}.colorPicker .extras .colorFields{margin-bottom:.5em;margin-top:.5em}.colorPicker .extras .color{text-align:right}.colorPicker .extras .colorFields input{margin-left:.5em;width:40px}.colorPicker .extras .hex{float:right}.colorPicker .extras .hex input{width:60px}.colorPicker .twod{float:left;margin:.5em}.colorPicker .twod,.colorPicker .twod .bg{height:var(--colorjoe-size);width: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}.colorPicker .twod .pointer{position:relative;width:8px;z-index:2}.colorPicker .twod .pointer .shape{position:absolute}.colorPicker .twod .pointer .shape1{border:2px solid #000;-moz-border-radius:5px;border-radius:5px;height:10px;width:10px}.colorPicker .twod .pointer .shape1,.colorPicker .twod .pointer .shape2{-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}.colorPicker .twod .pointer .shape2{border:2px solid #fff;-moz-border-radius:4px;border-radius:4px;height:8px;width:8px}.colorPicker .oned{float:left;margin:.5em}.colorPicker .oned .bg{border:1px solid #bbb}.colorPicker .oned .pointer{position:relative;z-index:2}.colorPicker .oned .pointer .shape{border:2px solid #000;-moz-border-radius:5px;border-radius:5px;height:5px;margin-left:-1px;margin-top:-4px;position:absolute}.colorPicker .oned .bg{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red)}.colorPicker .twod .bg1{background:linear-gradient(90deg,#fff 0,hsla(0,0%,100%,0));z-index:0}.colorPicker .twod .bg2{background:linear-gradient(180deg,transparent 0,#000);z-index:1}#hslPicker .twod .bg1{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,red)}#hslPicker .twod .bg2{background:linear-gradient(180deg,transparent 0,#7f7f7f)}#hslPicker .oned .bg{background:linear-gradient(180deg,#fff 0,transparent 50%,#000);z-index:1}#hslPicker .extras{width:100px}#hslPicker .oned.alpha{margin:0}#hslPicker .oned.alpha .bg,.colorPicker .oned.alpha .bg{background:linear-gradient(180deg,#fff 0,transparent)}.mithril-range{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing:border-box;cursor:pointer;font-size:1rem;outline:none!important;padding:.7rem .5rem;position:relative;user-select:none;width:100%}.mithril-range:focus .mithril-range-handle{background:var(--accent-alt)!important}.mithril-range-bar{box-sizing:border-box;height:1.2rem;position:relative;width:100%}.mithril-range-bar-1{background-color:var(--accent);border-bottom-left-radius:1rem;border-top-left-radius:1rem;left:0;width:100%}.mithril-range-bar-0,.mithril-range-bar-1{box-sizing:border-box;height:.3rem;position:absolute;top:.4rem}.mithril-range-bar-0{background:var(--window-background-lo);border-bottom-right-radius:1rem;border-top-right-radius:1rem;right:0;width:0}.mithril-range-handle{background-color:#fff;border-bottom:0;border-top:0;box-shadow:0 0 4px var(--shadow-color);box-sizing:border-box;display:inline-block;height:.8rem;left:0;margin-top:.05rem;position:absolute;top:.1rem;width:2px}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.5.7",
+  "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

@@ -26,4 +26,6 @@ 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/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/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/input.css

@@ -1,3 +1,7 @@
+.textfield {
+    position: relative;
+}
+
 .textfield input {
     height: 2rem;
     bordeR: solid 1px var(--border-color);

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 */