@nebularstreams/libmui 2.5.4 → 2.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@nebularstreams/libmui",
3
3
  "description": "Micro UI based on Mithril",
4
- "version": "2.5.4",
4
+ "version": "2.5.7",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
7
7
  "scripts": {
package/src/style.js CHANGED
@@ -13,3 +13,17 @@ import "./css/fontawesome/fontawesome-ext.css"
13
13
  import "./css/fontawesome/brands.min.css"
14
14
 
15
15
  import "./css/ui.popup.css"
16
+
17
+ import "./widgets/css/buttonchoice.css"
18
+ import "./widgets/css/buttonchoice.toggle.css"
19
+ import "./widgets/css/choicer.css"
20
+ import "./widgets/css/colorjoewidget.css"
21
+ import "./widgets/css/combo.ellipsis.css"
22
+ import "./widgets/css/fileminibutton.css"
23
+ import "./widgets/css/input.css"
24
+ import "./widgets/css/progressstrip.css"
25
+ import "./widgets/css/range-anims.css"
26
+ import "./widgets/css/separator.css"
27
+ import "./widgets/css/smileys.css"
28
+ import "./widgets/css/templatedinput.css"
29
+ import "./widgets/css/uploadfile.css"
@@ -0,0 +1,62 @@
1
+
2
+ .buttonchoice > .wrap > button {
3
+ /*border-bottom: solid 1px var(--border-color);*/
4
+ padding: 0 0.2rem;
5
+ line-height: var(--unitsize-small);
6
+ height: var(--unitsize-small);
7
+ }
8
+
9
+ .buttonchoice.withicon {
10
+ background: var(--window-background);
11
+ }
12
+
13
+ .buttonchoice.withicon:before {
14
+ width: var(--unitsize);
15
+ display: block;
16
+ text-align: center;
17
+ flex-grow: 0;
18
+ flex-shrink: 0;
19
+ font-family: 'Font Awesome 5 Free';
20
+ align-self: center;
21
+ }
22
+
23
+ /*
24
+ .buttonchoice.witharia > div {
25
+ margin-top: 0.25rem;
26
+ }
27
+ */
28
+
29
+ .hud .clrcombo {
30
+ color: var(--text-lo);
31
+ font-size: 1rem;
32
+ }
33
+
34
+ .combowidget.novalue button {
35
+ color: var(--text-lo);
36
+ opacity: 0.6;
37
+ }
38
+
39
+ .hud .innercard .title .combowidget {
40
+ background: transparent;
41
+ }
42
+
43
+ .buttonchoice.withicon > .bg-inputs button.accent {
44
+ color: var(--text-over-accent) !important;
45
+ background: var(--accent) !important;
46
+ }
47
+
48
+ .buttonchoice.withicon > .bg-inputs button.accent.alt-accent {
49
+ background: var(--green) !important;
50
+ color: var(--text-over-accent) !important;
51
+ }
52
+
53
+ .buttonchoice button.alt-accent {
54
+ background: var(--back-error);
55
+ }
56
+
57
+ /* fixes
58
+ .buttonchoice.withicon > .bg-inputs button.accent {
59
+ color: var(--accent) !important;
60
+ background: transparent;
61
+ }
62
+ */
@@ -0,0 +1,36 @@
1
+ .buttonchoice > div > button {
2
+ border: 0;
3
+ font-size: 1rem;
4
+ min-width: 3rem;
5
+ }
6
+
7
+ .buttonchoice.istoggler > div > button.accent {
8
+ border-bottom-color: var(--accent) !important;
9
+ }
10
+
11
+ .buttonchoice.istoggler > div > button {
12
+ border-bottom: solid var(--border-color);
13
+ color: var(--text-lo);
14
+ transition: all 0.25s ease-in-out;
15
+ }
16
+
17
+ .hud .tgbutton.accent {
18
+ border-bottom-color: var(--accent) !important;
19
+ }
20
+
21
+ .hud .tgbutton.accent.important {
22
+ border-bottom-color: red !important;
23
+ color: red !important;
24
+ }
25
+
26
+ .hud .tgbutton.accent.warning {
27
+ border-bottom-color: orange !important;
28
+ color: orange !important;
29
+ }
30
+
31
+ .hud .tgbutton {
32
+ font-size: 1rem;
33
+ border-bottom: solid var(--border-color);
34
+ color: var(--text-lo);
35
+ transition: all 0.25s ease-in-out;
36
+ }
@@ -0,0 +1,24 @@
1
+ .choicer > div:before {
2
+ flex-grow: 1;
3
+ font-family: 'Font Awesome 5 Free';
4
+ }
5
+
6
+ .confhud .choicer:before, ul.sessionevents:before {
7
+ content: attr(data-title);
8
+ text-align: left;
9
+ font-size: 1em;
10
+ background: rgba(0, 0, 0, 0.1);
11
+ padding: 0;
12
+ margin: 0 0 1rem 0 !important;
13
+ font-variant: all-small-caps;
14
+ font-weight: bold;
15
+ border-bottom: solid;
16
+ }
17
+
18
+ .choicer:before {
19
+ margin: .25rem 0 .25rem 0;
20
+ }
21
+
22
+ .combowidget button {
23
+ font-size: inherit;
24
+ }
@@ -0,0 +1,122 @@
1
+ .hud .colorjoe-wrapper {
2
+ display: flex;
3
+ position: absolute;
4
+ left: 0.25rem;
5
+ right: 0.25rem;
6
+ z-index: 100002;
7
+ width: auto;
8
+ justify-content: space-evenly;
9
+ box-shadow: none;
10
+ padding: 0.6rem 0;
11
+ background: var(--window-background);
12
+ border-radius: 0.25rem;
13
+ margin: 0.5rem 0;
14
+ border: solid 1px var(--border-color);
15
+ }
16
+
17
+ .hud .colorjoe-cell {
18
+ height: fit-content;
19
+ border-radius: 0.25rem;
20
+ overflow: hidden;
21
+ border: solid 1px var(--border-color);
22
+ }
23
+
24
+ .colorjoe-cell > .inset {
25
+ height: 2rem;
26
+ position: relative;
27
+ }
28
+
29
+ .hud .gradient .colorjoe-cell > .inset {
30
+ min-width: unset;
31
+ position: relative;
32
+ }
33
+
34
+ .hud .colorjoe-cell > .inset.titled:before {
35
+ content: attr(data-caption);
36
+ text-align: center;
37
+ font-size: 1.1rem;
38
+ font-variant: all-small-caps;
39
+ width: 100%;
40
+ display: inline-block;
41
+ text-shadow: 0 0 4px black;
42
+ color: white;
43
+ }
44
+
45
+
46
+ .hud .colorjoe-cell.withalt > .inset:after {
47
+ content: "";
48
+ background: var(--accent);
49
+ height: 4px;
50
+ width: var(--data-altval);
51
+ position: absolute;
52
+ left: 0;
53
+ bottom: 2px;
54
+ }
55
+
56
+ .hud .colorjoe-cell > .inset {
57
+ min-width: 2.54rem;
58
+ cursor: pointer;
59
+ }
60
+
61
+ .hud .cardie > .title .colorjoe-cell > .inset {
62
+ height: 2.54rem;
63
+ }
64
+
65
+ .hud .colorjoe-cell.unitheightsmall > .inset {
66
+ height: 2rem;
67
+ }
68
+
69
+ .hud .colorjoe-cell.unitheight > .inset {
70
+ height: 2.54rem;
71
+ }
72
+
73
+ .hud .gradient {
74
+ border-radius: 0.25rem;
75
+ border: solid 1px var(--border-color);
76
+ height: auto;
77
+ }
78
+
79
+ .hud .gradient button {
80
+ border-top-right-radius: 0.25rem;
81
+ border-bottom-right-radius: 0.25rem;
82
+ }
83
+
84
+ .hud .gradient button.leftmost {
85
+ border-radius: 0.25rem 0 0 0.25rem;
86
+ }
87
+
88
+ .hud .gradient > .colorjoe-cell + .colorjoe-cell {
89
+ border-radius: 0;
90
+ }
91
+
92
+ .hud .gradient .colorjoe-cell {
93
+ border-radius: 0;
94
+ border: 0;
95
+ height: 2rem;
96
+ }
97
+
98
+ .hud .underlay {
99
+ position: fixed;
100
+ top: 0;
101
+ left: 0;
102
+ height: 100%;
103
+ right: 0;
104
+ background: transparent;
105
+ z-index: 100;
106
+ }
107
+
108
+
109
+ .hud .colorjoe-cell.chequered.open {
110
+ margin-bottom: 360px;
111
+ min-width: 300px;
112
+ }
113
+
114
+ .hud .innercard .colorjoe-cell.chequered.open {
115
+ min-width: 260px;
116
+ }
117
+
118
+
119
+ .ptype_color {
120
+ width: auto;
121
+ position: relative;
122
+ }
@@ -0,0 +1,10 @@
1
+ .ptype_combo .combovalue span {
2
+ font-size: 1rem;
3
+ white-space: nowrap;
4
+ text-overflow: ellipsis;
5
+ overflow: hidden;
6
+ }
7
+
8
+ .combovalue, .combowidget {
9
+ overflow: hidden;
10
+ }
@@ -0,0 +1,12 @@
1
+ .hud .selectfile > input {
2
+ opacity: 0;
3
+ z-index: 2;
4
+ left: 0;
5
+ top: 0;
6
+ cursor: pointer;
7
+ }
8
+
9
+ .hud .toolz .textfield input {
10
+ padding-left: 2rem;
11
+ }
12
+
@@ -0,0 +1,23 @@
1
+ .textfield input {
2
+ height: 2rem;
3
+ bordeR: solid 1px var(--border-color);
4
+ background: var(--inputs);
5
+ padding: 0 0.2rem;
6
+ color: var(--text);
7
+ outline: none !Important;
8
+ border-radius: 0.25rem;
9
+ }
10
+
11
+ .textfield input.withicon {
12
+ padding-right: 3.5rem;
13
+ }
14
+
15
+ .textfield input.withicon-2 {
16
+ padding-right: 3rem;
17
+ }
18
+
19
+ .input-static.withdrag {
20
+ cursor: ns-resize;
21
+ border: solid 1px var(--border-color);
22
+ padding: 0.25rem;
23
+ }
@@ -0,0 +1,31 @@
1
+ .hud .progstrip {
2
+ border-radius: 0.25rem;
3
+ background: var(--window-background-lo);
4
+ cursor: crosshair;
5
+ border: solid 1px var(--border-color);
6
+ margin-top: 0.5rem;
7
+ margin-bottom: 0;
8
+ height: 1.25rem;
9
+ line-height: 1.25rem;
10
+ }
11
+
12
+
13
+ .videocollapsed.ispaused .progstrip > .inner {
14
+ background: yellow;
15
+ }
16
+
17
+ .hud .progstrip .cuein,
18
+ .hud .progstrip .cueout {
19
+ width: 2px;
20
+ background: red;
21
+ }
22
+ .hud .progstrip:after {
23
+ content: attr(data-time) " / " attr(data-total);
24
+ position: absolute;
25
+ color: white;
26
+ width: 100%;
27
+ font-weight: bold;
28
+ font-size: 0.75rem;
29
+ mix-blend-mode: difference;
30
+ text-align: center;
31
+ }
@@ -0,0 +1,23 @@
1
+ .withmultiplier .mithril-range-bar-0,
2
+ .withmultiplier .mithril-range-bar-1,
3
+ .withmultiplier .mithril-range-handle {
4
+ transition: 0.1s linear;
5
+ }
6
+
7
+ .withmultiplier .mithril-range:active * {
8
+ transition: none !important;
9
+ }
10
+
11
+ .range.disabled {
12
+ cursor: not-allowed;
13
+ }
14
+
15
+ .range.disabled > .mithril-range .mithril-range-bar-1.nokey {
16
+ background-color: var(--window-background);
17
+ }
18
+
19
+ .range.disabled > .mithril-range {
20
+ pointer-events: none;
21
+ opacity: 0.8;
22
+ }
23
+
@@ -0,0 +1,21 @@
1
+ .plussep:before {
2
+ font-family: 'Font Awesome 5 Free';
3
+ position: absolute;
4
+ left: 1rem;
5
+ }
6
+
7
+ .plussep.contracted:before {
8
+ color: var(--accent);
9
+ }
10
+
11
+ .plussep {
12
+ cursor: pointer;
13
+ position: relative;
14
+ border-top: solid 1px var(--border-color);
15
+ border-bottom: solid 1px var(--border-color);
16
+ padding: 0.25rem 0;
17
+ }
18
+
19
+ .flexcol > .separator {
20
+ flex-grow: 0 !important;
21
+ }
@@ -0,0 +1,80 @@
1
+ .hud .smileyswidget {
2
+ height: 100vh;
3
+ }
4
+
5
+ .smileyswidget icons {
6
+ overflow-x: hidden;
7
+ }
8
+
9
+ .smileyswidget .categories {
10
+ cursor: pointer;
11
+ padding: 0 .5rem;
12
+ width: 20%;
13
+ font-size: .75em;
14
+ }
15
+
16
+ .smileyswidget .smiley {
17
+ text-align: center;
18
+ box-sizing: border-box;
19
+ font-size: 3rem;
20
+ cursor: pointer;
21
+ flex-shrink: 0;
22
+ flex-grow: 1;
23
+ overflow: hidden;
24
+ padding: 0 .5rem;
25
+ display: flex;
26
+ flex-direction: column;
27
+ justify-content: center;
28
+ background: var(--window-background-hi);
29
+ margin: 1px;
30
+ }
31
+
32
+ .font-200 {
33
+ font-size: 2rem;
34
+ }
35
+
36
+ .smileyswidget .smiley:active {
37
+ transform: scale(0.9);
38
+ }
39
+
40
+ .smileyswidget .categories > div {
41
+ margin: 0.25rem;
42
+ background: var(--window-background);
43
+ padding: 0.25rem;
44
+ text-align: center;
45
+ line-height: 1rem;
46
+ border-radius: 0.5rem;
47
+ font-variant: all-small-caps;
48
+ }
49
+
50
+ .smileyswidget .categories.flexrow {
51
+ width: auto;
52
+ flex-wrap: wrap;
53
+ justify-content: space-between;
54
+ border-bottom: solid 3px var(--border-color);
55
+ background: var(--window-background-hi);
56
+ font-size: 1rem;
57
+ padding: 0.25rem;
58
+ }
59
+
60
+
61
+ .smileyswidget .categories.flexrow > div.isfav {
62
+ color: yellow;
63
+ padding-right: 0.35rem;
64
+ padding-left: 0.25rem;
65
+ padding-top: 0.25rem;
66
+ }
67
+
68
+ .hud input.transparent {
69
+ background: transparent;
70
+ border: 0 !important;
71
+ border-radius: 0;
72
+ }
73
+
74
+ .hud .order-end {
75
+ order: 100;
76
+ }
77
+
78
+ .smileyswidget .smiley.fa {
79
+ padding: 0.5rem;
80
+ }
@@ -0,0 +1,57 @@
1
+ .hud .templatedinput .paramgroup {
2
+ margin-top: 0.5rem;
3
+ border: solid 1px var(--border-color);
4
+ border-radius: 0.5rem;
5
+ background: var(--window-background);
6
+ overflow: hidden;
7
+ padding: 0.5rem 0.25rem;
8
+ }
9
+
10
+ .hud .templatedinput .paramgroup > div {
11
+ margin-bottom: 0.25rem;
12
+ }
13
+
14
+ .hud .separator {
15
+ font-variant: all-small-caps;
16
+ opacity: 0.75;
17
+ flex-grow: 1;
18
+ }
19
+
20
+ .hud .ptype_separator.flexbreak > * {
21
+ display: none;
22
+ }
23
+
24
+ .hud .ptype_iterakey .separator {
25
+ margin: 0.25rem !important;
26
+ }
27
+
28
+ .hud .separator.inlier {
29
+ background: var(--window-background-lo);
30
+ text-align: center;
31
+ }
32
+
33
+ .hud .separator.mini {
34
+ margin: 0.15rem 0;
35
+ border-bottom: solid 1px;
36
+ }
37
+
38
+ .hud .separator.outlier {
39
+ margin-left: -0.75rem;
40
+ margin-right: -0.75rem;
41
+ }
42
+
43
+ .hud .separator.outlier-1 {
44
+ margin-left: -0.25rem;
45
+ margin-right: -0.25rem;
46
+ }
47
+
48
+ .propsdeck.tab-inter-1 {
49
+ overflow-y: auto;
50
+ }
51
+
52
+ .hud .propsdeck .mk_workshop,
53
+ .hud .propsdeck .mk_face.workshop {
54
+ padding-top: 0;
55
+ padding-bottom: 0;
56
+ border-bottom: solid 1px var(--border-color);
57
+ }
@@ -0,0 +1,44 @@
1
+ .titlebar {
2
+ font-variant: all-small-caps;
3
+ margin: 0 !important;
4
+ z-index: 100000;
5
+ padding-left: 0;
6
+ padding-right: 0.15rem;
7
+ box-shadow: 0 0 1px var(--black);
8
+ }
9
+
10
+ .titlebar span {
11
+ font-weight: lighter;
12
+ }
13
+
14
+ .titlebar button {
15
+ border: 0;
16
+ background: transparent;
17
+ width: 2.54rem;
18
+ text-align: center;
19
+ }
20
+
21
+ .titlebar .title-logo {
22
+ height: 100%;
23
+ width: auto;
24
+ min-width: 2.54rem;
25
+ padding: 0.25rem;
26
+ flex-shrink:0;
27
+ }
28
+
29
+ .titlebar button.first {
30
+ order: -1;
31
+ margin-right: -0.5rem; /* hackiest */
32
+ }
33
+
34
+ .titlebar .textfield {
35
+ padding: 0;
36
+ }
37
+
38
+ .titlebar .textfield input {
39
+ height: 100%;
40
+ font-size: inherit;
41
+ background: transparent;
42
+ border: 0;
43
+ color: var(--text);
44
+ }
@@ -0,0 +1,5 @@
1
+ .uploadfile input {
2
+ opacity: 0;
3
+ z-index: 100;
4
+ }
5
+