@nebularstreams/libmui 3.1.0 → 4.0.0

package/src/widgets/TitleBarWidget.js

@@ -1,71 +0,0 @@
-import m from "mithril"
-import {ButtonNew, defineWidget} from "./Basic";
-import InputWidget from "./InputWidget.js"
-import {OverflowMenu} from "../util/widgets.core.js"
-
-const TitleBarWidget = defineWidget(
-    ({attrs, dom}) => m(
-        ".titlebar.noshrink.flexrow",
-        {
-            class: (attrs.class ? " " + attrs.class : "unitheight bg-window-hi pad-2 pad-h shadow-2 font-125"),
-            ...attrs.onTitleClick && {onclick: attrs.onTitleClick}
-        },
-        [
-            ...attrs.onClick ? [m(ButtonNew, {icon: "arrow-left", onClick: () => attrs.onClick()})] : [],
-
-            ...attrs.logo
-                ? [m("img.title-logo", {src: attrs.logo})]
-                : [],
-            ...(attrs.editable && attrs.onchange)
-                ? [
-                    m(InputWidget, {
-                        containerClass: "grows" + (attrs.onClick ? "" : " pad-2 pad-h"),
-                        hint: attrs.title, // attrs.hint,
-                        onchange: attrs.onchange,
-                        oninput: () => {
-                        },
-                        value: attrs.value
-                    })
-                ]
-                : [m("span.grows.ellipsis", {class: attrs.onClick ? "" : "pad-2 pad-h"}, attrs.title)],
-
-            ...attrs.auxaction ? [m(ButtonNew, {
-                icon: attrs.auxaction.icon,
-                class: attrs.auxaction.class,
-                title: attrs.auxaction.title,
-                onClick: attrs.auxaction.onClick
-            })] : [],
-            ...attrs.auxactions
-                ? attrs.auxactions.map((action) => m(ButtonNew, {
-                    class: action.class,
-                    title: action.title,
-                    icon: action.icon,
-                    text: action.caption,
-                    onClick: action.onClick
-                }))
-                : [],
-            ...attrs.action ? [m(ButtonNew, {
-                icon: attrs.action.icon,
-                class: attrs.action.class,
-                title: attrs.action.title,
-                onClick: attrs.action.onClick
-
-            })] : [],
-            ...attrs.overflow
-                ? [
-                    m(ButtonNew, {
-                        icon: attrs.overflow.icon || "ellipsis-v",
-                        class: attrs.overflow.class || "",
-                        onClick: () => OverflowMenu(
-                            dom,
-                            {title: attrs.title},
-                            attrs.overflow.items
-                        )
-                            .then(({action}) => action.onClick())
-                    })
-                ]
-                : []
-        ])
-);
-
-export default TitleBarWidget;

package/src/widgets/css/buttonchoice.css

@@ -1,62 +0,0 @@
-
-.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

@@ -1,37 +0,0 @@
-.buttonchoice > div > button {
-    border: 0;
-    font-size: 1rem;
-    min-width: 2rem;
-    font-variant: all-small-caps;
-}
-
-.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

@@ -1,24 +0,0 @@
-.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

@@ -1,230 +0,0 @@
-#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

@@ -1,105 +0,0 @@
-.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 {
-    border-radius: 0.25rem;
-    overflow: hidden;
-    border: solid 1px var(--border-color);
-}
-
-
-.hud .gradient .colorjoe-cell > .inset {
-    min-width: unset;
-    position: relative;
-    height: -webkit-fill-available;
-}
-
-
-.hud .colorjoe-cell > .inset.titled:before {
-    color: #fff;
-    content: attr(data-caption);
-    display: inline-block;
-    font-size: 0.75rem;
-    font-variant: all-small-caps;
-    text-align: center;
-    text-shadow: 0 0 4px #000;
-    width: 100%;
-}
-
-.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;
-    height: -webkit-fill-available;
-}
-
-.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;
-}
-
-.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 {
-    position: relative;
-}

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

@@ -1,29 +0,0 @@
-.ptype_combo .combovalue span {
-    font-size: 1rem;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-}
-
-.combovalue, .combowidget {
-    overflow: hidden;
-    font-variant: all-small-caps;;
-}
-
-.combowidget .icon {
-    width: var(--unitsize);
-    flex-shrink: 0;
-    padding: 0 !important;
-    margin: 0;
-}
-
-.combowidget button {
-    font-size: inherit;
-    padding: 0;
-}
-
-
-.combovalue, .combowidget {
-    overflow: hidden;
-    font-variant: all-small-caps;
-}

package/src/widgets/css/fileminibutton.css

@@ -1,12 +0,0 @@
-.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

@@ -1,35 +0,0 @@
-.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;
-}
-
-
-/* selector */
-.selector.withbodytitle>.bodytitle {
-    border-bottom: solid var(--accent);
-    line-height: var(--unitsize);
-    text-align: center;
-}

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

@@ -1,69 +0,0 @@
-/* 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-0, .mithril-range-bar-1 {
-    box-sizing: border-box;
-    height: .5rem;
-    position: absolute;
-    top: .3rem
-}
-
-.mithril-range-bar-1 {
-    left: 0;
-    width: 100%;
-    background-color: var(--accent);
-    border-top-left-radius: 1rem;
-    border-bottom-left-radius: 1rem;
-    z-index: 13;
-}
-
-.mithril-range-bar-0 {
-    right: 0;
-    width: 0;
-    border-top-right-radius: 1rem;
-    border-bottom-right-radius: 1rem;
-    background: var(--mithril-range-scale);
-}
-
-/* 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

@@ -1,31 +0,0 @@
-.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;
-}