@nebularstreams/libmui 2.5.3 → 2.5.7

package/package.json

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

package/src/style.js

@@ -13,3 +13,17 @@ 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"

package/src/widgets/CoolContentTicker.js

@@ -1,3 +1,4 @@
+import m from 'mithril';
 import {defineWidget, ButtonNew} from "./Basic.js"
 import {promptName} from "./OverflowUtils"
 import {confirmPromise} from "../util/fuckingconfirm"

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/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,23 @@
+.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/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;
+}

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

@@ -0,0 +1,23 @@
+.withmultiplier .mithril-range-bar-0,
+.withmultiplier .mithril-range-bar-1,
+.withmultiplier .mithril-range-handle {
+    transition: 0.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 {
+    pointer-events: none;
+    opacity: 0.8;
+}
+

package/src/widgets/css/separator.css

@@ -0,0 +1,21 @@
+.plussep:before {
+    font-family: 'Font Awesome 5 Free';
+    position: absolute;
+    left: 1rem;
+}
+
+.plussep.contracted:before {
+    color: var(--accent);
+}
+
+.plussep {
+    cursor: pointer;
+    position: relative;
+    border-top: solid 1px var(--border-color);
+    border-bottom: solid 1px var(--border-color);
+    padding: 0.25rem 0;
+}
+
+.flexcol > .separator {
+    flex-grow: 0 !important;
+}

package/src/widgets/css/smileys.css

@@ -0,0 +1,80 @@
+.hud .smileyswidget {
+    height: 100vh;
+}
+
+.smileyswidget icons {
+    overflow-x: hidden;
+}
+
+.smileyswidget .categories {
+    cursor: pointer;
+    padding: 0 .5rem;
+    width: 20%;
+    font-size: .75em;
+}
+
+.smileyswidget .smiley {
+    text-align: center;
+    box-sizing: border-box;
+    font-size: 3rem;
+    cursor: pointer;
+    flex-shrink: 0;
+    flex-grow: 1;
+    overflow: hidden;
+    padding: 0 .5rem;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    background: var(--window-background-hi);
+    margin: 1px;
+}
+
+.font-200 {
+    font-size: 2rem;
+}
+
+.smileyswidget .smiley:active {
+    transform: scale(0.9);
+}
+
+.smileyswidget .categories > div {
+    margin: 0.25rem;
+    background: var(--window-background);
+    padding: 0.25rem;
+    text-align: center;
+    line-height: 1rem;
+    border-radius: 0.5rem;
+    font-variant: all-small-caps;
+}
+
+.smileyswidget .categories.flexrow {
+    width: auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    border-bottom: solid 3px var(--border-color);
+    background: var(--window-background-hi);
+    font-size: 1rem;
+    padding: 0.25rem;
+}
+
+
+.smileyswidget .categories.flexrow > div.isfav {
+    color: yellow;
+    padding-right: 0.35rem;
+    padding-left: 0.25rem;
+    padding-top: 0.25rem;
+}
+
+.hud input.transparent {
+    background: transparent;
+    border: 0 !important;
+    border-radius: 0;
+}
+
+.hud .order-end {
+    order: 100;
+}
+
+.smileyswidget .smiley.fa {
+    padding: 0.5rem;
+}

package/src/widgets/css/templatedinput.css

@@ -0,0 +1,57 @@
+.hud .templatedinput .paramgroup {
+    margin-top: 0.5rem;
+    border: solid 1px var(--border-color);
+    border-radius: 0.5rem;
+    background: var(--window-background);
+    overflow: hidden;
+    padding: 0.5rem 0.25rem;
+}
+
+.hud .templatedinput .paramgroup > div {
+    margin-bottom: 0.25rem;
+}
+
+.hud .separator {
+    font-variant: all-small-caps;
+    opacity: 0.75;
+    flex-grow: 1;
+}
+
+.hud .ptype_separator.flexbreak > * {
+    display: none;
+}
+
+.hud .ptype_iterakey .separator {
+    margin: 0.25rem !important;
+}
+
+.hud .separator.inlier {
+    background: var(--window-background-lo);
+    text-align: center;
+}
+
+.hud .separator.mini {
+    margin: 0.15rem 0;
+    border-bottom: solid 1px;
+}
+
+.hud .separator.outlier {
+    margin-left: -0.75rem;
+    margin-right: -0.75rem;
+}
+
+.hud .separator.outlier-1 {
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+}
+
+.propsdeck.tab-inter-1 {
+    overflow-y: auto;
+}
+
+.hud .propsdeck .mk_workshop,
+.hud .propsdeck .mk_face.workshop {
+    padding-top: 0;
+    padding-bottom: 0;
+    border-bottom: solid 1px var(--border-color);
+}

package/src/widgets/css/ui.titlebar.css

@@ -0,0 +1,44 @@
+.titlebar {
+    font-variant: all-small-caps;
+    margin: 0 !important;
+    z-index: 100000;
+    padding-left: 0;
+    padding-right: 0.15rem;
+    box-shadow: 0 0 1px var(--black);
+}
+
+.titlebar span {
+    font-weight: lighter;
+}
+
+.titlebar button {
+    border: 0;
+    background: transparent;
+    width: 2.54rem;
+    text-align: center;
+}
+
+.titlebar .title-logo {
+    height: 100%;
+    width: auto;
+    min-width: 2.54rem;
+    padding: 0.25rem;
+    flex-shrink:0;
+}
+
+.titlebar button.first {
+    order: -1;
+    margin-right: -0.5rem; /* hackiest */
+}
+
+.titlebar .textfield {
+    padding: 0;
+}
+
+.titlebar .textfield input {
+    height: 100%;
+    font-size: inherit;
+    background: transparent;
+    border: 0;
+    color: var(--text);
+}

package/src/widgets/css/uploadfile.css

@@ -0,0 +1,5 @@
+.uploadfile input {
+    opacity: 0;
+    z-index: 100;
+}
+