tweak-ui 0.5.0 → 0.8.0

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.
Files changed (237) hide show
  1. package/dist/index.d.ts +2 -0
  2. package/dist/index.d.ts.map +1 -0
  3. package/dist/lib/builder.d.ts +76 -140
  4. package/dist/lib/builder.d.ts.map +1 -1
  5. package/dist/lib/color/adapter.d.ts +7 -0
  6. package/dist/lib/color/adapter.d.ts.map +1 -0
  7. package/dist/lib/color/array-format.d.ts +9 -0
  8. package/dist/lib/color/array-format.d.ts.map +1 -0
  9. package/dist/lib/color/converter.d.ts.map +1 -0
  10. package/dist/lib/color/css-string-format.d.ts +8 -0
  11. package/dist/lib/color/css-string-format.d.ts.map +1 -0
  12. package/dist/lib/color/formatter.d.ts +9 -0
  13. package/dist/lib/color/formatter.d.ts.map +1 -0
  14. package/dist/lib/color/hex-string-format.d.ts +9 -0
  15. package/dist/lib/color/hex-string-format.d.ts.map +1 -0
  16. package/dist/lib/color/index.d.ts.map +1 -0
  17. package/dist/lib/color/number-format.d.ts +9 -0
  18. package/dist/lib/color/number-format.d.ts.map +1 -0
  19. package/dist/lib/{color-formats → color}/object-format.d.ts +4 -4
  20. package/dist/lib/color/object-format.d.ts.map +1 -0
  21. package/dist/lib/{color-formats → color}/types.d.ts +15 -9
  22. package/dist/lib/color/types.d.ts.map +1 -0
  23. package/dist/lib/components/container/bar.d.ts +28 -0
  24. package/dist/lib/components/container/bar.d.ts.map +1 -0
  25. package/dist/lib/components/container/dialog.d.ts +14 -0
  26. package/dist/lib/components/container/dialog.d.ts.map +1 -0
  27. package/dist/lib/components/container/grid.d.ts +22 -0
  28. package/dist/lib/components/container/grid.d.ts.map +1 -0
  29. package/dist/lib/components/container/group.d.ts +55 -0
  30. package/dist/lib/components/container/group.d.ts.map +1 -0
  31. package/dist/lib/components/container/index.d.ts +10 -0
  32. package/dist/lib/components/container/index.d.ts.map +1 -0
  33. package/dist/lib/components/container/list.d.ts +25 -0
  34. package/dist/lib/components/container/list.d.ts.map +1 -0
  35. package/dist/lib/components/container/section.d.ts +28 -0
  36. package/dist/lib/components/container/section.d.ts.map +1 -0
  37. package/dist/lib/components/container/split.d.ts +40 -0
  38. package/dist/lib/components/container/split.d.ts.map +1 -0
  39. package/dist/lib/components/container/tabs.d.ts +23 -0
  40. package/dist/lib/components/container/tabs.d.ts.map +1 -0
  41. package/dist/lib/components/container/tree.d.ts +25 -0
  42. package/dist/lib/components/container/tree.d.ts.map +1 -0
  43. package/dist/lib/components/controls/angle.d.ts +29 -33
  44. package/dist/lib/components/controls/angle.d.ts.map +1 -1
  45. package/dist/lib/components/controls/bitmask.d.ts +41 -0
  46. package/dist/lib/components/controls/bitmask.d.ts.map +1 -0
  47. package/dist/lib/components/controls/bool.d.ts +52 -0
  48. package/dist/lib/components/controls/bool.d.ts.map +1 -0
  49. package/dist/lib/components/controls/color-picker.d.ts +12 -27
  50. package/dist/lib/components/controls/color-picker.d.ts.map +1 -1
  51. package/dist/lib/components/controls/color.d.ts +12 -26
  52. package/dist/lib/components/controls/color.d.ts.map +1 -1
  53. package/dist/lib/components/controls/index.d.ts +9 -5
  54. package/dist/lib/components/controls/index.d.ts.map +1 -1
  55. package/dist/lib/components/controls/input.d.ts +44 -0
  56. package/dist/lib/components/controls/input.d.ts.map +1 -0
  57. package/dist/lib/components/controls/matrix.d.ts +58 -0
  58. package/dist/lib/components/controls/matrix.d.ts.map +1 -0
  59. package/dist/lib/components/controls/point.d.ts +10 -16
  60. package/dist/lib/components/controls/point.d.ts.map +1 -1
  61. package/dist/lib/components/controls/poll.d.ts +12 -0
  62. package/dist/lib/components/controls/poll.d.ts.map +1 -0
  63. package/dist/lib/components/controls/scalar.d.ts +67 -0
  64. package/dist/lib/components/controls/scalar.d.ts.map +1 -0
  65. package/dist/lib/components/controls/select.d.ts +8 -14
  66. package/dist/lib/components/controls/select.d.ts.map +1 -1
  67. package/dist/lib/components/controls/spherical.d.ts +18 -55
  68. package/dist/lib/components/controls/spherical.d.ts.map +1 -1
  69. package/dist/lib/components/controls/string.d.ts +46 -0
  70. package/dist/lib/components/controls/string.d.ts.map +1 -0
  71. package/dist/lib/components/controls/vector.d.ts +54 -0
  72. package/dist/lib/components/controls/vector.d.ts.map +1 -0
  73. package/dist/lib/components/elements/button.d.ts +36 -0
  74. package/dist/lib/components/elements/button.d.ts.map +1 -0
  75. package/dist/lib/components/elements/divider.d.ts +4 -0
  76. package/dist/lib/components/elements/divider.d.ts.map +1 -0
  77. package/dist/lib/components/elements/graph.d.ts +8 -0
  78. package/dist/lib/components/elements/graph.d.ts.map +1 -0
  79. package/dist/lib/components/elements/image.d.ts +33 -0
  80. package/dist/lib/components/elements/image.d.ts.map +1 -0
  81. package/dist/lib/components/elements/index.d.ts +6 -0
  82. package/dist/lib/components/elements/index.d.ts.map +1 -0
  83. package/dist/lib/components/elements/widget.d.ts +27 -0
  84. package/dist/lib/components/elements/widget.d.ts.map +1 -0
  85. package/dist/lib/components/index.d.ts +2 -4
  86. package/dist/lib/components/index.d.ts.map +1 -1
  87. package/dist/lib/core/control.d.ts +20 -0
  88. package/dist/lib/core/control.d.ts.map +1 -0
  89. package/dist/lib/core/index.d.ts +1 -2
  90. package/dist/lib/core/index.d.ts.map +1 -1
  91. package/dist/lib/core/render.d.ts +7 -9
  92. package/dist/lib/core/render.d.ts.map +1 -1
  93. package/dist/lib/core/types.d.ts +46 -60
  94. package/dist/lib/core/types.d.ts.map +1 -1
  95. package/dist/lib/core/utils.d.ts +18 -33
  96. package/dist/lib/core/utils.d.ts.map +1 -1
  97. package/dist/lib/index.d.ts +2 -2
  98. package/dist/lib/index.d.ts.map +1 -1
  99. package/dist/lib/mount.d.ts +6 -16
  100. package/dist/lib/mount.d.ts.map +1 -1
  101. package/dist/lib/stats/index.d.ts +2 -0
  102. package/dist/lib/stats/index.d.ts.map +1 -0
  103. package/dist/lib/stats/sampler.d.ts +66 -0
  104. package/dist/lib/stats/sampler.d.ts.map +1 -0
  105. package/dist/lib/stats/stats-renderer.d.ts +16 -0
  106. package/dist/lib/stats/stats-renderer.d.ts.map +1 -0
  107. package/dist/style.css +1 -0
  108. package/dist/style.d.ts +4 -0
  109. package/dist/tweak-ui.module.js +2946 -2738
  110. package/dist/tweak-ui.module.js.map +1 -1
  111. package/dist/tweak-ui.umd.js +33 -2
  112. package/dist/tweak-ui.umd.js.map +1 -1
  113. package/package.json +23 -20
  114. package/dist/lib/builder.js +0 -250
  115. package/dist/lib/builder.js.map +0 -1
  116. package/dist/lib/color-formats/array-format.d.ts +0 -9
  117. package/dist/lib/color-formats/array-format.d.ts.map +0 -1
  118. package/dist/lib/color-formats/array-format.js +0 -18
  119. package/dist/lib/color-formats/array-format.js.map +0 -1
  120. package/dist/lib/color-formats/converter.d.ts.map +0 -1
  121. package/dist/lib/color-formats/converter.js +0 -85
  122. package/dist/lib/color-formats/converter.js.map +0 -1
  123. package/dist/lib/color-formats/css-string-format.d.ts +0 -8
  124. package/dist/lib/color-formats/css-string-format.d.ts.map +0 -1
  125. package/dist/lib/color-formats/css-string-format.js +0 -28
  126. package/dist/lib/color-formats/css-string-format.js.map +0 -1
  127. package/dist/lib/color-formats/formatter.d.ts +0 -9
  128. package/dist/lib/color-formats/formatter.d.ts.map +0 -1
  129. package/dist/lib/color-formats/formatter.js +0 -35
  130. package/dist/lib/color-formats/formatter.js.map +0 -1
  131. package/dist/lib/color-formats/hex-string-format.d.ts +0 -8
  132. package/dist/lib/color-formats/hex-string-format.d.ts.map +0 -1
  133. package/dist/lib/color-formats/hex-string-format.js +0 -28
  134. package/dist/lib/color-formats/hex-string-format.js.map +0 -1
  135. package/dist/lib/color-formats/index.d.ts.map +0 -1
  136. package/dist/lib/color-formats/index.js +0 -4
  137. package/dist/lib/color-formats/index.js.map +0 -1
  138. package/dist/lib/color-formats/number-format.d.ts +0 -9
  139. package/dist/lib/color-formats/number-format.d.ts.map +0 -1
  140. package/dist/lib/color-formats/number-format.js +0 -23
  141. package/dist/lib/color-formats/number-format.js.map +0 -1
  142. package/dist/lib/color-formats/object-format.d.ts.map +0 -1
  143. package/dist/lib/color-formats/object-format.js +0 -23
  144. package/dist/lib/color-formats/object-format.js.map +0 -1
  145. package/dist/lib/color-formats/types.d.ts.map +0 -1
  146. package/dist/lib/color-formats/types.js +0 -2
  147. package/dist/lib/color-formats/types.js.map +0 -1
  148. package/dist/lib/components/button.d.ts +0 -29
  149. package/dist/lib/components/button.d.ts.map +0 -1
  150. package/dist/lib/components/button.js +0 -15
  151. package/dist/lib/components/button.js.map +0 -1
  152. package/dist/lib/components/content.d.ts +0 -22
  153. package/dist/lib/components/content.d.ts.map +0 -1
  154. package/dist/lib/components/content.js +0 -10
  155. package/dist/lib/components/content.js.map +0 -1
  156. package/dist/lib/components/controls/angle.js +0 -201
  157. package/dist/lib/components/controls/angle.js.map +0 -1
  158. package/dist/lib/components/controls/checkbox.d.ts +0 -29
  159. package/dist/lib/components/controls/checkbox.d.ts.map +0 -1
  160. package/dist/lib/components/controls/checkbox.js +0 -31
  161. package/dist/lib/components/controls/checkbox.js.map +0 -1
  162. package/dist/lib/components/controls/color-picker.js +0 -267
  163. package/dist/lib/components/controls/color-picker.js.map +0 -1
  164. package/dist/lib/components/controls/color.js +0 -77
  165. package/dist/lib/components/controls/color.js.map +0 -1
  166. package/dist/lib/components/controls/index.js +0 -11
  167. package/dist/lib/components/controls/index.js.map +0 -1
  168. package/dist/lib/components/controls/number.d.ts +0 -48
  169. package/dist/lib/components/controls/number.d.ts.map +0 -1
  170. package/dist/lib/components/controls/number.js +0 -142
  171. package/dist/lib/components/controls/number.js.map +0 -1
  172. package/dist/lib/components/controls/point.js +0 -137
  173. package/dist/lib/components/controls/point.js.map +0 -1
  174. package/dist/lib/components/controls/position.d.ts +0 -56
  175. package/dist/lib/components/controls/position.d.ts.map +0 -1
  176. package/dist/lib/components/controls/position.js +0 -36
  177. package/dist/lib/components/controls/position.js.map +0 -1
  178. package/dist/lib/components/controls/select.js +0 -132
  179. package/dist/lib/components/controls/select.js.map +0 -1
  180. package/dist/lib/components/controls/spherical.js +0 -302
  181. package/dist/lib/components/controls/spherical.js.map +0 -1
  182. package/dist/lib/components/controls/text.d.ts +0 -36
  183. package/dist/lib/components/controls/text.d.ts.map +0 -1
  184. package/dist/lib/components/controls/text.js +0 -24
  185. package/dist/lib/components/controls/text.js.map +0 -1
  186. package/dist/lib/components/groups/accordion.d.ts +0 -22
  187. package/dist/lib/components/groups/accordion.d.ts.map +0 -1
  188. package/dist/lib/components/groups/accordion.js +0 -34
  189. package/dist/lib/components/groups/accordion.js.map +0 -1
  190. package/dist/lib/components/groups/container.d.ts +0 -25
  191. package/dist/lib/components/groups/container.d.ts.map +0 -1
  192. package/dist/lib/components/groups/container.js +0 -19
  193. package/dist/lib/components/groups/container.js.map +0 -1
  194. package/dist/lib/components/groups/group.d.ts +0 -49
  195. package/dist/lib/components/groups/group.d.ts.map +0 -1
  196. package/dist/lib/components/groups/group.js +0 -50
  197. package/dist/lib/components/groups/group.js.map +0 -1
  198. package/dist/lib/components/groups/index.d.ts +0 -5
  199. package/dist/lib/components/groups/index.d.ts.map +0 -1
  200. package/dist/lib/components/groups/index.js +0 -5
  201. package/dist/lib/components/groups/index.js.map +0 -1
  202. package/dist/lib/components/groups/tabs.d.ts +0 -22
  203. package/dist/lib/components/groups/tabs.d.ts.map +0 -1
  204. package/dist/lib/components/groups/tabs.js +0 -31
  205. package/dist/lib/components/groups/tabs.js.map +0 -1
  206. package/dist/lib/components/image.d.ts +0 -37
  207. package/dist/lib/components/image.d.ts.map +0 -1
  208. package/dist/lib/components/image.js +0 -46
  209. package/dist/lib/components/image.js.map +0 -1
  210. package/dist/lib/components/index.js +0 -6
  211. package/dist/lib/components/index.js.map +0 -1
  212. package/dist/lib/core/index.js +0 -5
  213. package/dist/lib/core/index.js.map +0 -1
  214. package/dist/lib/core/registry.d.ts +0 -18
  215. package/dist/lib/core/registry.d.ts.map +0 -1
  216. package/dist/lib/core/registry.js +0 -30
  217. package/dist/lib/core/registry.js.map +0 -1
  218. package/dist/lib/core/render.js +0 -19
  219. package/dist/lib/core/render.js.map +0 -1
  220. package/dist/lib/core/types.js +0 -2
  221. package/dist/lib/core/types.js.map +0 -1
  222. package/dist/lib/core/utils.js +0 -193
  223. package/dist/lib/core/utils.js.map +0 -1
  224. package/dist/lib/core/value-accessor.d.ts +0 -18
  225. package/dist/lib/core/value-accessor.d.ts.map +0 -1
  226. package/dist/lib/core/value-accessor.js +0 -52
  227. package/dist/lib/core/value-accessor.js.map +0 -1
  228. package/dist/lib/index.js +0 -29
  229. package/dist/lib/index.js.map +0 -1
  230. package/dist/lib/mount.js +0 -85
  231. package/dist/lib/mount.js.map +0 -1
  232. package/dist/tweak-ui.css +0 -648
  233. package/dist/tweak-ui.css.map +0 -1
  234. package/dist/tweak-ui.min.css +0 -1
  235. package/dist/tweak-ui.min.css.map +0 -1
  236. /package/dist/lib/{color-formats → color}/converter.d.ts +0 -0
  237. /package/dist/lib/{color-formats → color}/index.d.ts +0 -0
package/dist/tweak-ui.css DELETED
@@ -1,648 +0,0 @@
1
- @charset "UTF-8";
2
- :root {
3
- --twui-gap: 0.0625rem;
4
- --twui-size: 1.5rem;
5
- --twui-label-width: 7rem;
6
- --twui-label-pad-x: 0.25rem;
7
- --twui-label-pad-y: 0.0rem;
8
- --twui-input-height: var(--twui-size);
9
- --twui-input-pad-x: 0.375rem;
10
- --twui-input-pad-y: 0.0rem;
11
- --twui-button-height: var(--twui-size);
12
- --twui-button-pad-x: 0.5rem;
13
- --twui-button-pad-y: 0.25rem;
14
- --twui-color-primary: #344955;
15
- --twui-color-primary-dark: #0b222c;
16
- --twui-color-primary-light: #5f7481;
17
- --twui-color-secondary: #4A6572;
18
- --twui-color-secondary-dark: #203b47;
19
- --twui-color-secondary-light: #7793a1;
20
- --twui-color-on-primary: #E0E5E7;
21
- --twui-color-on-secondary: #E0E5E7;
22
- --twui-color-accent: #f9AA33;
23
- }
24
-
25
- .twui-dark {
26
- --twui-color-primary: #263238;
27
- --twui-color-primary-dark: #000a12;
28
- --twui-color-primary-light: #4f5b62;
29
- --twui-color-secondary: #37474f;
30
- --twui-color-secondary-dark: #102027;
31
- --twui-color-secondary-light: #62727b;
32
- --twui-color-on-primary: #fff;
33
- --twui-color-on-secondary: #fff;
34
- --twui-color-accent: #f9AA33;
35
- }
36
-
37
- .twui-light {
38
- --twui-color-primary: #fafafa;
39
- --twui-color-primary-dark: #c7c7c7;
40
- --twui-color-primary-light: #ffffff;
41
- --twui-color-secondary: #cfd8dc;
42
- --twui-color-secondary-dark: #9ea7aa;
43
- --twui-color-secondary-light: #ffffff;
44
- --twui-color-on-primary: #000000;
45
- --twui-color-on-secondary: #000000;
46
- --twui-color-accent: #2196f3;
47
- }
48
-
49
- .twui-root {
50
- text-shadow: 1px 1px 1px #000000;
51
- background-color: var(--twui-color-primary);
52
- color: var(--twui-color-on-primary);
53
- font-family: var(--twui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");
54
- font-size: var(--twui-font-size, 12px);
55
- padding: 0;
56
- margin: 0;
57
- width: var(--twui-width, 20rem);
58
- flex: auto 0 0;
59
- overflow: auto;
60
- overflow-x: hidden;
61
- box-sizing: border-box;
62
- }
63
- .twui-root::-webkit-scrollbar {
64
- width: 0.5rem;
65
- }
66
- .twui-root::-webkit-scrollbar-track {
67
- background-color: var(--twui-color-primary);
68
- }
69
- .twui-root::-webkit-scrollbar-thumb {
70
- border-width: 1px;
71
- border-style: solid;
72
- transition: background-color 0.2s ease-in-out;
73
- background-color: var(--twui-color-primary);
74
- border-color: var(--twui-color-primary-dark);
75
- }
76
- .twui-root::-webkit-scrollbar-thumb:hover {
77
- background-color: var(--twui-color-secondary);
78
- }
79
- .twui-root label {
80
- user-select: none;
81
- font-weight: 500;
82
- }
83
- .twui-root select, .twui-root button, .twui-root a {
84
- cursor: pointer;
85
- }
86
- .twui-root input:not([type=checkbox]),
87
- .twui-root button,
88
- .twui-root select {
89
- background-color: var(--twui-color-secondary);
90
- color: var(--twui-color-on-secondary);
91
- -webkit-appearance: none;
92
- -moz-appearance: none;
93
- appearance: none;
94
- border-radius: 0;
95
- outline: none;
96
- border: none;
97
- box-sizing: border-box;
98
- height: calc(var(--twui-size) - 2 * var(--twui-gap));
99
- line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
100
- padding: var(--twui-input-pad-y) var(--twui-input-pad-x);
101
- margin: var(--twui-gap);
102
- }
103
- .twui-root button {
104
- line-height: calc(var(--twui-size) - 2 * var(--twui-gap) - 2 * var(--twui-button-pad-y));
105
- padding: var(--twui-button-pad-y) var(--twui-button-pad-x);
106
- margin: var(--twui-gap);
107
- font-weight: bold;
108
- text-align: center;
109
- white-space: nowrap;
110
- }
111
- .twui-root button:active {
112
- transform: translateY(1px);
113
- }
114
- .twui-root button, .twui-root select, .twui-root input:not([type=checkbox]), .twui-root .twui-progress {
115
- border-bottom: 1px solid;
116
- border-color: var(--twui-color-primary-dark);
117
- transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
118
- }
119
- .twui-root button:hover, .twui-root button.checked, .twui-root select:hover, .twui-root select.checked, .twui-root input:not([type=checkbox]):hover, .twui-root input:not([type=checkbox]).checked, .twui-root .twui-progress:hover, .twui-root .twui-progress.checked {
120
- background-color: var(--twui-color-secondary-light);
121
- border-color: var(--twui-color-secondary-dark);
122
- }
123
- .twui-root button:focus, .twui-root button.checked, .twui-root select:focus, .twui-root select.checked, .twui-root input:not([type=checkbox]):focus, .twui-root input:not([type=checkbox]).checked, .twui-root .twui-progress:focus, .twui-root .twui-progress.checked {
124
- outline: none;
125
- border-color: var(--twui-color-accent);
126
- }
127
- .twui-root button:disabled,
128
- .twui-root button .disabled, .twui-root select:disabled,
129
- .twui-root select .disabled, .twui-root input:not([type=checkbox]):disabled,
130
- .twui-root input:not([type=checkbox]) .disabled, .twui-root .twui-progress:disabled,
131
- .twui-root .twui-progress .disabled {
132
- opacity: 0.5;
133
- cursor: not-allowed;
134
- }
135
- .twui-root .disabled {
136
- opacity: 0.5;
137
- cursor: not-allowed;
138
- }
139
- .twui-root select:focus, .twui-root input:not([type=checkbox]):focus {
140
- color: var(--twui-color-accent);
141
- }
142
- .twui-root input[type=number] {
143
- padding-right: 0;
144
- }
145
- .twui-root input[type=checkbox] {
146
- margin: 0;
147
- appearance: none;
148
- width: calc(var(--twui-size) - 2 * var(--twui-gap));
149
- height: calc(var(--twui-size) - 2 * var(--twui-gap));
150
- text-align: center;
151
- cursor: pointer;
152
- }
153
- .twui-root input[type=checkbox]::before {
154
- content: "✔";
155
- opacity: 0.125;
156
- font-weight: bold;
157
- }
158
- .twui-root input[type=checkbox]:checked::before {
159
- content: "✔";
160
- opacity: 1;
161
- }
162
-
163
- .twui-angle {
164
- display: flex;
165
- flex-direction: row;
166
- align-items: flex-start;
167
- }
168
- .twui-angle .left-container {
169
- flex: 1;
170
- }
171
- .twui-angle .right-container {
172
- flex: none;
173
- display: grid;
174
- grid-template-columns: max-content max-content;
175
- }
176
- .twui-angle .right-container .twui-checkbox {
177
- grid-column: span 2;
178
- }
179
- .twui-angle .right-container .twui-checkbox input {
180
- margin-left: 0;
181
- }
182
- .twui-angle label {
183
- text-align: right;
184
- line-height: var(--twui-input-height);
185
- padding: 0 var(--twui-label-pad-x);
186
- }
187
- .twui-angle input[type=number] {
188
- width: 3.5rem;
189
- }
190
- .twui-angle .pane {
191
- position: relative;
192
- width: 100%;
193
- padding-top: 100%;
194
- }
195
- .twui-angle .pane::before {
196
- position: absolute;
197
- content: "";
198
- width: calc(100% - 2rem);
199
- height: calc(100% - 2rem);
200
- left: 1rem;
201
- top: 1rem;
202
- border: 1px solid;
203
- border-radius: 50%;
204
- border-color: var(--twui-color-primary-light);
205
- box-sizing: border-box;
206
- background-image: conic-gradient(var(--twui-color-primary-light) var(--angle-percent), transparent 0);
207
- transform: scaleX(-1) rotate(180deg);
208
- }
209
- .twui-angle .angle-knob {
210
- border: 0px solid transparent;
211
- border-radius: 100%;
212
- background-color: var(--twui-color-primary-light);
213
- }
214
- .twui-angle .angle-knob:hover {
215
- background-color: var(--twui-color-secondary-light);
216
- }
217
- .twui-angle .angle-pane.is-dragging .angle-knob {
218
- background-color: var(--twui-color-accent);
219
- }
220
-
221
- .twui-checkbox {
222
- min-height: calc(var(--twui-size) - 2 * var(--twui-gap));
223
- line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
224
- display: flex;
225
- flex-direction: row;
226
- align-items: center;
227
- margin: 0;
228
- padding: 0;
229
- cursor: pointer;
230
- transition: background-color 0.2s ease-in-out;
231
- }
232
- .twui-checkbox:hover {
233
- background-color: var(--twui-color-secondary);
234
- }
235
- .twui-checkbox input {
236
- margin-right: 1ch;
237
- margin-left: 1ch;
238
- }
239
-
240
- .twui-color-picker {
241
- flex: auto 1 1;
242
- display: flex;
243
- flex-direction: row;
244
- }
245
- .twui-color-picker .color-picker-panel {
246
- flex: 1;
247
- position: relative;
248
- margin: var(--twui-gap);
249
- }
250
- .twui-color-picker .color-picker-inputs {
251
- flex: none;
252
- display: flex;
253
- flex-direction: column;
254
- }
255
- .twui-color-picker .color-picker-inputs .input-r {
256
- border-color: #f00;
257
- }
258
- .twui-color-picker .color-picker-inputs .input-g {
259
- border-color: #0f0;
260
- }
261
- .twui-color-picker .color-picker-inputs .input-b {
262
- border-color: #00f;
263
- }
264
- .twui-color-picker .color-picker-inputs .input-a {
265
- border-image: linear-gradient(to right, #fff, transparent);
266
- }
267
- .twui-color-picker .color-picker-inputs .input-hex {
268
- border-color: #000;
269
- }
270
- .twui-color-picker .color-picker-inputs input {
271
- display: block;
272
- width: 4rem;
273
- flex: none;
274
- }
275
- .twui-color-picker .color-picker-sv:focus,
276
- .twui-color-picker .color-picker-h:focus,
277
- .twui-color-picker .color-picker-a:focus {
278
- outline: none;
279
- border-color: var(--twui-color-accent);
280
- }
281
- .twui-color-picker .color-picker-sv {
282
- width: 100%;
283
- padding-top: 100%;
284
- position: relative;
285
- box-sizing: border-box;
286
- cursor: crosshair;
287
- z-index: 1;
288
- border-bottom: 1px solid;
289
- border-color: var(--twui-color-primary-dark);
290
- }
291
- .twui-color-picker .color-picker-sv-bg {
292
- position: absolute;
293
- top: 0;
294
- left: 0;
295
- right: 0;
296
- bottom: 0;
297
- }
298
- .twui-color-picker .color-picker-sv-cursor {
299
- box-sizing: border-box;
300
- position: absolute;
301
- width: 10px;
302
- height: 10px;
303
- margin-top: -5px;
304
- margin-left: -5px;
305
- border: 1px solid white;
306
- border-radius: 5px;
307
- box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.75);
308
- }
309
- .twui-color-picker .color-picker-h,
310
- .twui-color-picker .color-picker-a {
311
- position: relative;
312
- height: 1rem;
313
- box-sizing: border-box;
314
- cursor: ew-resize;
315
- margin-top: calc(var(--twui-gap) * 2);
316
- border-bottom: 1px solid;
317
- border-color: var(--twui-color-primary-dark);
318
- }
319
- .twui-color-picker .color-picker-h-cursor,
320
- .twui-color-picker .color-picker-a-cursor {
321
- position: absolute;
322
- width: 4px;
323
- height: calc(1rem - 2px);
324
- margin-left: -3px;
325
- border: 1px solid white;
326
- border-radius: 2px;
327
- box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.75);
328
- }
329
- .twui-color-picker .color-picker-a {
330
- background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), linear-gradient(to right, grey 50%, white 50%), linear-gradient(to bottom, grey 50%, white 50%);
331
- background-blend-mode: normal, difference, normal;
332
- background-size: 1rem 1rem;
333
- }
334
- .twui-color-picker .color-picker-a-bg {
335
- position: absolute;
336
- top: 0;
337
- left: 0;
338
- right: 0;
339
- bottom: 0;
340
- }
341
- .twui-color-picker .color-picker-sv,
342
- .twui-color-picker .color-picker-h,
343
- .twui-color-picker .color-picker-a {
344
- border-color: var(--twui-color-primary-dark);
345
- }
346
-
347
- .twui-color {
348
- flex: auto 1 1;
349
- display: flex;
350
- flex-direction: column;
351
- align-items: stretch;
352
- }
353
- .twui-color button {
354
- text-shadow: 0 0 10px black;
355
- color: white;
356
- font-weight: bold;
357
- text-transform: uppercase;
358
- }
359
-
360
- .twui-container {
361
- display: flex;
362
- display: flex;
363
- flex-flow: column nowrap;
364
- align-items: stretch;
365
- }
366
-
367
- .twui-container-horizontal {
368
- flex-direction: row;
369
- }
370
- .twui-container-horizontal > * {
371
- flex: 1;
372
- }
373
-
374
- .twui-group {
375
- display: flex;
376
- flex-flow: column nowrap;
377
- align-items: stretch;
378
- border-color: var(--twui-color-primary-dark);
379
- }
380
-
381
- .twui-group-title {
382
- margin: 0;
383
- width: auto;
384
- height: var(--twui-size);
385
- line-height: var(--twui-size);
386
- background-color: var(--twui-color-primary-dark);
387
- padding-left: calc(2 * var(--twui-gap));
388
- font-weight: bold;
389
- }
390
-
391
- .twui-group-collapsible .twui-group-title {
392
- padding-left: 0;
393
- cursor: pointer;
394
- }
395
-
396
- .twui-group-collapsible > .twui-group-title::before {
397
- content: "🗁";
398
- display: inline-block;
399
- width: var(--twui-size);
400
- height: var(--twui-size);
401
- text-align: center;
402
- transition: transform 0.1s ease-in-out;
403
- }
404
-
405
- .twui-group-inset,
406
- .twui-group-collapsible > .twui-group-collapsible {
407
- border-left: 0.25rem solid;
408
- border-left-color: var(--twui-color-primary-light);
409
- }
410
-
411
- .twui-group-collapsed > .twui-group-title::before {
412
- content: "🗀";
413
- }
414
-
415
- .twui-group-control {
416
- display: flex;
417
- flex-flow: row nowrap;
418
- align-items: stretch;
419
- min-height: var(--twui-size);
420
- box-sizing: border-box;
421
- }
422
- .twui-group-control > label:first-child {
423
- flex: none;
424
- box-sizing: border-box;
425
- width: calc(var(--twui-label-width) - 2 * var(--twui-label-pad-x));
426
- min-width: calc(var(--twui-label-width) - 2 * var(--twui-label-pad-x));
427
- min-height: calc(var(--twui-size) - 2 * var(--twui-gap));
428
- line-height: calc(var(--twui-size) - 2 * var(--twui-gap));
429
- padding: var(--twui-label-pad-y) var(--twui-label-pad-x);
430
- margin: var(--twui-gap);
431
- overflow: hidden;
432
- }
433
- .twui-group-control > section {
434
- flex: 1;
435
- display: flex;
436
- flex-flow: column nowrap;
437
- align-items: stretch;
438
- }
439
-
440
- .twui-image {
441
- max-width: 100%;
442
- display: block;
443
- }
444
- .twui-image img {
445
- width: 100%;
446
- }
447
-
448
- .twui-image-aspect {
449
- position: relative;
450
- }
451
- .twui-image-aspect::before {
452
- content: "";
453
- display: block;
454
- width: 100%;
455
- padding-top: 100%;
456
- padding-top: var(--twui-aspect);
457
- }
458
- .twui-image-aspect img {
459
- position: absolute;
460
- top: 0;
461
- left: 0;
462
- width: 100%;
463
- height: 100%;
464
- object-fit: fill;
465
- object-fit: var(--twui-fit);
466
- }
467
-
468
- .twui-number,
469
- .twui-slider {
470
- display: flex;
471
- flex-flow: row nowrap;
472
- align-items: stretch;
473
- }
474
-
475
- .twui-number input {
476
- flex: 1;
477
- }
478
-
479
- .twui-slider .twui-progress {
480
- flex: 1;
481
- display: flex;
482
- margin: var(--twui-gap);
483
- cursor: ew-resize;
484
- transition: background-color 0.2s ease-in-out;
485
- background-color: var(--twui-color-secondary);
486
- }
487
- .twui-slider .twui-progress:hover {
488
- background-color: var(--twui-color-secondary-dark);
489
- }
490
- .twui-slider .twui-progress.disabled {
491
- cursor: not-allowed;
492
- }
493
- .twui-slider .twui-progress-bar {
494
- background-color: var(--twui-color-secondary-light);
495
- }
496
- .twui-slider input[type=number] {
497
- flex: none;
498
- width: 3.5rem;
499
- }
500
-
501
- .twui-point {
502
- background-color: var(--twui-color-secondary);
503
- border-color: var(--twui-color-primary-dark);
504
- background-image: linear-gradient(var(--twui-color-primary-light) 1px, transparent 1px), linear-gradient(90deg, var(--twui-color-primary-light) 1px, transparent 1px);
505
- background-size: 10% 10%, 10% 10%;
506
- transition: border-color 0.2s ease-in-out, background-color 0.2s ease-in-out;
507
- position: relative;
508
- width: 100%;
509
- padding-top: 100%;
510
- box-sizing: border-box;
511
- cursor: crosshair;
512
- z-index: 1;
513
- overflow: visible;
514
- }
515
- .twui-point .point-x-axis,
516
- .twui-point .point-y-axis {
517
- background-color: var(--twui-color-primary-dark);
518
- }
519
- .twui-point:focus {
520
- border-color: var(--twui-color-accent);
521
- outline: none;
522
- }
523
- .twui-point:focus .point-x-axis,
524
- .twui-point:focus .point-y-axis {
525
- background-color: var(--twui-color-accent);
526
- }
527
-
528
- .twui-spherical {
529
- display: flex;
530
- flex-direction: row;
531
- align-items: flex-start;
532
- }
533
- .twui-spherical .left-container {
534
- flex: 1;
535
- }
536
- .twui-spherical .right-container {
537
- flex: none;
538
- display: grid;
539
- grid-template-columns: max-content max-content;
540
- }
541
- .twui-spherical .right-container .twui-checkbox {
542
- grid-column: span 2;
543
- }
544
- .twui-spherical .right-container .twui-checkbox input {
545
- margin-left: 0;
546
- }
547
- .twui-spherical label {
548
- text-align: right;
549
- line-height: var(--twui-input-height);
550
- padding: 0 var(--twui-label-pad-x);
551
- }
552
- .twui-spherical input[type=number] {
553
- width: 3.5rem;
554
- }
555
- .twui-spherical .pane {
556
- position: relative;
557
- width: 100%;
558
- padding-top: 100%;
559
- }
560
- .twui-spherical .pane::before {
561
- position: absolute;
562
- content: "";
563
- width: calc(100% - 2rem);
564
- height: calc(100% - 2rem);
565
- left: 1rem;
566
- top: 1rem;
567
- border: 1px solid;
568
- border-radius: 50%;
569
- border-color: var(--twui-color-primary-light);
570
- box-sizing: border-box;
571
- }
572
- .twui-spherical .pane::after {
573
- position: absolute;
574
- content: "";
575
- top: 50%;
576
- left: 50%;
577
- width: calc(50% - 1rem);
578
- height: 1px;
579
- background-color: var(--twui-color-primary-light);
580
- transform-origin: left center;
581
- transform: rotate(var(--spherical-phi));
582
- }
583
- .twui-spherical .phi-knob {
584
- border: 0px solid transparent;
585
- border-radius: 100%;
586
- background-color: var(--twui-color-primary-light);
587
- }
588
- .twui-spherical .phi-knob:hover {
589
- background-color: var(--twui-color-secondary-light);
590
- }
591
- .twui-spherical .phi-pane.is-dragging .phi-knob {
592
- background-color: var(--twui-color-accent);
593
- }
594
- .twui-spherical .theta-knob {
595
- border: 1px solid transparent;
596
- border-radius: 100%;
597
- border-color: var(--twui-color-primary-light);
598
- }
599
- .twui-spherical .theta-knob:hover {
600
- border-color: var(--twui-color-secondary-light);
601
- }
602
- .twui-spherical .theta-pane.is-dragging .theta-knob {
603
- border-color: var(--twui-color-accent);
604
- }
605
-
606
- .twui-tabs {
607
- display: flex;
608
- flex-flow: column nowrap;
609
- align-items: stretch;
610
- border-color: var(--twui-color-primary-dark);
611
- }
612
-
613
- .twui-tabs-list {
614
- display: flex;
615
- flex-flow: row wrap;
616
- align-items: stretch;
617
- }
618
-
619
- .twui-tabs-list > button {
620
- flex: auto 1 11;
621
- border: 0;
622
- border-top: 1px solid;
623
- margin: 0;
624
- height: var(--twui-size);
625
- line-height: calc(var(--twui-size) - 2 * var(--twui-button-pad-y));
626
- background-color: var(--twui-color-primary-dark);
627
- border-color: var(--twui-color-primary);
628
- color: var(--twui-color-on-primary);
629
- }
630
- .twui-tabs-list > button:hover {
631
- background-color: var(--twui-color-primary);
632
- border-color: var(--twui-color-primary-dark);
633
- }
634
- .twui-tabs-list > button.is-active {
635
- background-color: var(--twui-color-primary);
636
- border-color: var(--twui-color-accent);
637
- }
638
-
639
- .twui-position {
640
- display: flex;
641
- flex-flow: row wrap;
642
- align-items: stretch;
643
- }
644
- .twui-position > * {
645
- flex: auto 1 1;
646
- }
647
-
648
- /*# sourceMappingURL=tweak-ui.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/style/_style.scss","../src/style/controls/_angle.scss","../src/style/controls/_checkbox.scss","../src/style/controls/_color-picker.scss","../src/style/controls/_color.scss","../src/style/controls/_container.scss","../src/style/controls/_group.scss","../src/style/controls/_image.scss","../src/style/controls/_number.scss","../src/style/controls/_point.scss","../src/style/controls/_spherical.scss","../src/style/controls/_tabs.scss","../src/style/controls/_position.scss"],"names":[],"mappings":";AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACE;;AAGF;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAOF;EACE;EACA;;AAGF;EACE;;AAGF;AAAA;AAAA;EAGE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EAEE;EACA;;AAGF;EAEE;EACA;;AAGF;AAAA;AAAA;AAAA;AAAA;EAEE;EACA;;AAIJ;EACE;EACA;;AAIA;EACE;;AAIJ;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;EACA;;;AC1LJ;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;;AC7DJ;EACE;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;;ACjBJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AAOF;AAAA;AAAA;EACE;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;AAAA;EAEE;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE,kBACkB;EAIlB;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;AAAA;AAAA;EAGE;;;AC1HJ;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;;ACXJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;AACA;EACE;;;ACRJ;EACE;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAGF;EACE;EACA;EACA;EACA;;;ACpEJ;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;ACtBJ;AAAA;EAEE;EACA;EACA;;;AAGF;EACE;;;AAIA;EACE;EACA;EACA;EACA;EACA;EAEA;;AACA;EACE;;AAIJ;EACE;;AAGF;EACE;;AAGF;EACE;EACA;;;AClCJ;EACE;EACA;EACA,kBACE;EAEF;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;AAAA;EAEE;;AAGF;EAKE;EACA;;AALA;AAAA;EAEE;;;AC3BN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AACA;EACE;;AAKN;EACE;EACA;EACA;;AAEF;EACE;;AAGF;EACE;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;AAGJ;EACE;;;ACnFJ;EACE;EACA;EACA;EAEA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;;ACrCJ;EACE;EACA;EACA;;AAEA;EACE","file":"tweak-ui.css"}
@@ -1 +0,0 @@
1
- :root{--twui-gap: 0.0625rem;--twui-size: 1.5rem;--twui-label-width: 7rem;--twui-label-pad-x: 0.25rem;--twui-label-pad-y: 0.0rem;--twui-input-height: var(--twui-size);--twui-input-pad-x: 0.375rem;--twui-input-pad-y: 0.0rem;--twui-button-height: var(--twui-size);--twui-button-pad-x: 0.5rem;--twui-button-pad-y: 0.25rem;--twui-color-primary: #344955;--twui-color-primary-dark: #0b222c;--twui-color-primary-light: #5f7481;--twui-color-secondary: #4A6572;--twui-color-secondary-dark: #203b47;--twui-color-secondary-light: #7793a1;--twui-color-on-primary: #E0E5E7;--twui-color-on-secondary: #E0E5E7;--twui-color-accent: #f9AA33}.twui-dark{--twui-color-primary: #263238;--twui-color-primary-dark: #000a12;--twui-color-primary-light: #4f5b62;--twui-color-secondary: #37474f;--twui-color-secondary-dark: #102027;--twui-color-secondary-light: #62727b;--twui-color-on-primary: #fff;--twui-color-on-secondary: #fff;--twui-color-accent: #f9AA33}.twui-light{--twui-color-primary: #fafafa;--twui-color-primary-dark: #c7c7c7;--twui-color-primary-light: #ffffff;--twui-color-secondary: #cfd8dc;--twui-color-secondary-dark: #9ea7aa;--twui-color-secondary-light: #ffffff;--twui-color-on-primary: #000000;--twui-color-on-secondary: #000000;--twui-color-accent: #2196f3}.twui-root{text-shadow:1px 1px 1px #000;background-color:var(--twui-color-primary);color:var(--twui-color-on-primary);font-family:var(--twui-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol");font-size:var(--twui-font-size, 12px);padding:0;margin:0;width:var(--twui-width, 20rem);flex:auto 0 0;overflow:auto;overflow-x:hidden;box-sizing:border-box}.twui-root::-webkit-scrollbar{width:.5rem}.twui-root::-webkit-scrollbar-track{background-color:var(--twui-color-primary)}.twui-root::-webkit-scrollbar-thumb{border-width:1px;border-style:solid;transition:background-color .2s ease-in-out;background-color:var(--twui-color-primary);border-color:var(--twui-color-primary-dark)}.twui-root::-webkit-scrollbar-thumb:hover{background-color:var(--twui-color-secondary)}.twui-root label{user-select:none;font-weight:500}.twui-root select,.twui-root button,.twui-root a{cursor:pointer}.twui-root input:not([type=checkbox]),.twui-root button,.twui-root select{background-color:var(--twui-color-secondary);color:var(--twui-color-on-secondary);-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0;outline:none;border:none;box-sizing:border-box;height:calc(var(--twui-size) - 2*var(--twui-gap));line-height:calc(var(--twui-size) - 2*var(--twui-gap));padding:var(--twui-input-pad-y) var(--twui-input-pad-x);margin:var(--twui-gap)}.twui-root button{line-height:calc(var(--twui-size) - 2*var(--twui-gap) - 2*var(--twui-button-pad-y));padding:var(--twui-button-pad-y) var(--twui-button-pad-x);margin:var(--twui-gap);font-weight:bold;text-align:center;white-space:nowrap}.twui-root button:active{transform:translateY(1px)}.twui-root button,.twui-root select,.twui-root input:not([type=checkbox]),.twui-root .twui-progress{border-bottom:1px solid;border-color:var(--twui-color-primary-dark);transition:border-color .2s ease-in-out,background-color .2s ease-in-out}.twui-root button:hover,.twui-root button.checked,.twui-root select:hover,.twui-root select.checked,.twui-root input:not([type=checkbox]):hover,.twui-root input:not([type=checkbox]).checked,.twui-root .twui-progress:hover,.twui-root .twui-progress.checked{background-color:var(--twui-color-secondary-light);border-color:var(--twui-color-secondary-dark)}.twui-root button:focus,.twui-root button.checked,.twui-root select:focus,.twui-root select.checked,.twui-root input:not([type=checkbox]):focus,.twui-root input:not([type=checkbox]).checked,.twui-root .twui-progress:focus,.twui-root .twui-progress.checked{outline:none;border-color:var(--twui-color-accent)}.twui-root button:disabled,.twui-root button .disabled,.twui-root select:disabled,.twui-root select .disabled,.twui-root input:not([type=checkbox]):disabled,.twui-root input:not([type=checkbox]) .disabled,.twui-root .twui-progress:disabled,.twui-root .twui-progress .disabled{opacity:.5;cursor:not-allowed}.twui-root .disabled{opacity:.5;cursor:not-allowed}.twui-root select:focus,.twui-root input:not([type=checkbox]):focus{color:var(--twui-color-accent)}.twui-root input[type=number]{padding-right:0}.twui-root input[type=checkbox]{margin:0;appearance:none;width:calc(var(--twui-size) - 2*var(--twui-gap));height:calc(var(--twui-size) - 2*var(--twui-gap));text-align:center;cursor:pointer}.twui-root input[type=checkbox]::before{content:"✔";opacity:.125;font-weight:bold}.twui-root input[type=checkbox]:checked::before{content:"✔";opacity:1}.twui-angle{display:flex;flex-direction:row;align-items:flex-start}.twui-angle .left-container{flex:1}.twui-angle .right-container{flex:none;display:grid;grid-template-columns:max-content max-content}.twui-angle .right-container .twui-checkbox{grid-column:span 2}.twui-angle .right-container .twui-checkbox input{margin-left:0}.twui-angle label{text-align:right;line-height:var(--twui-input-height);padding:0 var(--twui-label-pad-x)}.twui-angle input[type=number]{width:3.5rem}.twui-angle .pane{position:relative;width:100%;padding-top:100%}.twui-angle .pane::before{position:absolute;content:"";width:calc(100% - 2rem);height:calc(100% - 2rem);left:1rem;top:1rem;border:1px solid;border-radius:50%;border-color:var(--twui-color-primary-light);box-sizing:border-box;background-image:conic-gradient(var(--twui-color-primary-light) var(--angle-percent), transparent 0);transform:scaleX(-1) rotate(180deg)}.twui-angle .angle-knob{border:0px solid rgba(0,0,0,0);border-radius:100%;background-color:var(--twui-color-primary-light)}.twui-angle .angle-knob:hover{background-color:var(--twui-color-secondary-light)}.twui-angle .angle-pane.is-dragging .angle-knob{background-color:var(--twui-color-accent)}.twui-checkbox{min-height:calc(var(--twui-size) - 2*var(--twui-gap));line-height:calc(var(--twui-size) - 2*var(--twui-gap));display:flex;flex-direction:row;align-items:center;margin:0;padding:0;cursor:pointer;transition:background-color .2s ease-in-out}.twui-checkbox:hover{background-color:var(--twui-color-secondary)}.twui-checkbox input{margin-right:1ch;margin-left:1ch}.twui-color-picker{flex:auto 1 1;display:flex;flex-direction:row}.twui-color-picker .color-picker-panel{flex:1;position:relative;margin:var(--twui-gap)}.twui-color-picker .color-picker-inputs{flex:none;display:flex;flex-direction:column}.twui-color-picker .color-picker-inputs .input-r{border-color:red}.twui-color-picker .color-picker-inputs .input-g{border-color:lime}.twui-color-picker .color-picker-inputs .input-b{border-color:blue}.twui-color-picker .color-picker-inputs .input-a{border-image:linear-gradient(to right, #fff, transparent)}.twui-color-picker .color-picker-inputs .input-hex{border-color:#000}.twui-color-picker .color-picker-inputs input{display:block;width:4rem;flex:none}.twui-color-picker .color-picker-sv:focus,.twui-color-picker .color-picker-h:focus,.twui-color-picker .color-picker-a:focus{outline:none;border-color:var(--twui-color-accent)}.twui-color-picker .color-picker-sv{width:100%;padding-top:100%;position:relative;box-sizing:border-box;cursor:crosshair;z-index:1;border-bottom:1px solid;border-color:var(--twui-color-primary-dark)}.twui-color-picker .color-picker-sv-bg{position:absolute;top:0;left:0;right:0;bottom:0}.twui-color-picker .color-picker-sv-cursor{box-sizing:border-box;position:absolute;width:10px;height:10px;margin-top:-5px;margin-left:-5px;border:1px solid #fff;border-radius:5px;box-shadow:0px 0px 2px 1px rgba(0,0,0,.75)}.twui-color-picker .color-picker-h,.twui-color-picker .color-picker-a{position:relative;height:1rem;box-sizing:border-box;cursor:ew-resize;margin-top:calc(var(--twui-gap)*2);border-bottom:1px solid;border-color:var(--twui-color-primary-dark)}.twui-color-picker .color-picker-h-cursor,.twui-color-picker .color-picker-a-cursor{position:absolute;width:4px;height:calc(1rem - 2px);margin-left:-3px;border:1px solid #fff;border-radius:2px;box-shadow:0px 0px 2px 1px rgba(0,0,0,.75)}.twui-color-picker .color-picker-a{background-image:linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)),linear-gradient(to right, grey 50%, white 50%),linear-gradient(to bottom, grey 50%, white 50%);background-blend-mode:normal,difference,normal;background-size:1rem 1rem}.twui-color-picker .color-picker-a-bg{position:absolute;top:0;left:0;right:0;bottom:0}.twui-color-picker .color-picker-sv,.twui-color-picker .color-picker-h,.twui-color-picker .color-picker-a{border-color:var(--twui-color-primary-dark)}.twui-color{flex:auto 1 1;display:flex;flex-direction:column;align-items:stretch}.twui-color button{text-shadow:0 0 10px #000;color:#fff;font-weight:bold;text-transform:uppercase}.twui-container{display:flex;display:flex;flex-flow:column nowrap;align-items:stretch}.twui-container-horizontal{flex-direction:row}.twui-container-horizontal>*{flex:1}.twui-group{display:flex;flex-flow:column nowrap;align-items:stretch;border-color:var(--twui-color-primary-dark)}.twui-group-title{margin:0;width:auto;height:var(--twui-size);line-height:var(--twui-size);background-color:var(--twui-color-primary-dark);padding-left:calc(2*var(--twui-gap));font-weight:bold}.twui-group-collapsible .twui-group-title{padding-left:0;cursor:pointer}.twui-group-collapsible>.twui-group-title::before{content:"🗁";display:inline-block;width:var(--twui-size);height:var(--twui-size);text-align:center;transition:transform .1s ease-in-out}.twui-group-inset,.twui-group-collapsible>.twui-group-collapsible{border-left:.25rem solid;border-left-color:var(--twui-color-primary-light)}.twui-group-collapsed>.twui-group-title::before{content:"🗀"}.twui-group-control{display:flex;flex-flow:row nowrap;align-items:stretch;min-height:var(--twui-size);box-sizing:border-box}.twui-group-control>label:first-child{flex:none;box-sizing:border-box;width:calc(var(--twui-label-width) - 2*var(--twui-label-pad-x));min-width:calc(var(--twui-label-width) - 2*var(--twui-label-pad-x));min-height:calc(var(--twui-size) - 2*var(--twui-gap));line-height:calc(var(--twui-size) - 2*var(--twui-gap));padding:var(--twui-label-pad-y) var(--twui-label-pad-x);margin:var(--twui-gap);overflow:hidden}.twui-group-control>section{flex:1;display:flex;flex-flow:column nowrap;align-items:stretch}.twui-image{max-width:100%;display:block}.twui-image img{width:100%}.twui-image-aspect{position:relative}.twui-image-aspect::before{content:"";display:block;width:100%;padding-top:100%;padding-top:var(--twui-aspect)}.twui-image-aspect img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:fill;object-fit:var(--twui-fit)}.twui-number,.twui-slider{display:flex;flex-flow:row nowrap;align-items:stretch}.twui-number input{flex:1}.twui-slider .twui-progress{flex:1;display:flex;margin:var(--twui-gap);cursor:ew-resize;transition:background-color .2s ease-in-out;background-color:var(--twui-color-secondary)}.twui-slider .twui-progress:hover{background-color:var(--twui-color-secondary-dark)}.twui-slider .twui-progress.disabled{cursor:not-allowed}.twui-slider .twui-progress-bar{background-color:var(--twui-color-secondary-light)}.twui-slider input[type=number]{flex:none;width:3.5rem}.twui-point{background-color:var(--twui-color-secondary);border-color:var(--twui-color-primary-dark);background-image:linear-gradient(var(--twui-color-primary-light) 1px, transparent 1px),linear-gradient(90deg, var(--twui-color-primary-light) 1px, transparent 1px);background-size:10% 10%,10% 10%;transition:border-color .2s ease-in-out,background-color .2s ease-in-out;position:relative;width:100%;padding-top:100%;box-sizing:border-box;cursor:crosshair;z-index:1;overflow:visible}.twui-point .point-x-axis,.twui-point .point-y-axis{background-color:var(--twui-color-primary-dark)}.twui-point:focus{border-color:var(--twui-color-accent);outline:none}.twui-point:focus .point-x-axis,.twui-point:focus .point-y-axis{background-color:var(--twui-color-accent)}.twui-spherical{display:flex;flex-direction:row;align-items:flex-start}.twui-spherical .left-container{flex:1}.twui-spherical .right-container{flex:none;display:grid;grid-template-columns:max-content max-content}.twui-spherical .right-container .twui-checkbox{grid-column:span 2}.twui-spherical .right-container .twui-checkbox input{margin-left:0}.twui-spherical label{text-align:right;line-height:var(--twui-input-height);padding:0 var(--twui-label-pad-x)}.twui-spherical input[type=number]{width:3.5rem}.twui-spherical .pane{position:relative;width:100%;padding-top:100%}.twui-spherical .pane::before{position:absolute;content:"";width:calc(100% - 2rem);height:calc(100% - 2rem);left:1rem;top:1rem;border:1px solid;border-radius:50%;border-color:var(--twui-color-primary-light);box-sizing:border-box}.twui-spherical .pane::after{position:absolute;content:"";top:50%;left:50%;width:calc(50% - 1rem);height:1px;background-color:var(--twui-color-primary-light);transform-origin:left center;transform:rotate(var(--spherical-phi))}.twui-spherical .phi-knob{border:0px solid rgba(0,0,0,0);border-radius:100%;background-color:var(--twui-color-primary-light)}.twui-spherical .phi-knob:hover{background-color:var(--twui-color-secondary-light)}.twui-spherical .phi-pane.is-dragging .phi-knob{background-color:var(--twui-color-accent)}.twui-spherical .theta-knob{border:1px solid rgba(0,0,0,0);border-radius:100%;border-color:var(--twui-color-primary-light)}.twui-spherical .theta-knob:hover{border-color:var(--twui-color-secondary-light)}.twui-spherical .theta-pane.is-dragging .theta-knob{border-color:var(--twui-color-accent)}.twui-tabs{display:flex;flex-flow:column nowrap;align-items:stretch;border-color:var(--twui-color-primary-dark)}.twui-tabs-list{display:flex;flex-flow:row wrap;align-items:stretch}.twui-tabs-list>button{flex:auto 1 11;border:0;border-top:1px solid;margin:0;height:var(--twui-size);line-height:calc(var(--twui-size) - 2*var(--twui-button-pad-y));background-color:var(--twui-color-primary-dark);border-color:var(--twui-color-primary);color:var(--twui-color-on-primary)}.twui-tabs-list>button:hover{background-color:var(--twui-color-primary);border-color:var(--twui-color-primary-dark)}.twui-tabs-list>button.is-active{background-color:var(--twui-color-primary);border-color:var(--twui-color-accent)}.twui-position{display:flex;flex-flow:row wrap;align-items:stretch}.twui-position>*{flex:auto 1 1}/*# sourceMappingURL=tweak-ui.min.css.map */
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/style/_style.scss","../src/style/controls/_angle.scss","../src/style/controls/_checkbox.scss","../src/style/controls/_color-picker.scss","../src/style/controls/_color.scss","../src/style/controls/_container.scss","../src/style/controls/_group.scss","../src/style/controls/_image.scss","../src/style/controls/_number.scss","../src/style/controls/_point.scss","../src/style/controls/_spherical.scss","../src/style/controls/_tabs.scss","../src/style/controls/_position.scss"],"names":[],"mappings":"CAEA,MACE,sBACA,oBACA,yBACA,4BACA,2BACA,sCACA,6BACA,2BACA,uCACA,4BACA,6BAEA,8BACA,mCACA,oCACA,gCACA,qCACA,sCACA,iCACA,mCACA,6BAGF,WACE,8BACA,mCACA,oCACA,gCACA,qCACA,sCACA,8BACA,gCACA,6BAGF,YACE,8BACA,mCACA,oCACA,gCACA,qCACA,sCACA,iCACA,mCACA,6BAGF,WACE,6BACA,2CACA,mCAEA,mLACA,sCACA,UACA,SACA,+BACA,cACA,cACA,kBACA,sBAMA,8BACE,YAGF,oCACE,2CAGF,oCACE,iBACA,mBACA,4CACA,2CACA,4CAGF,0CACE,6CAOF,iBACE,iBACA,gBAGF,iDACE,eAGF,0EAGE,6CACA,qCAEA,wBACA,qBACA,gBACA,gBACA,aACA,YACA,sBAEA,kDACA,uDACA,wDACA,uBAGF,kBACE,oFACA,0DACA,uBAEA,iBACA,kBACA,mBAEF,yBACE,0BAGF,oGACE,wBACA,4CACA,yEAEA,gQAEE,mDACA,8CAGF,gQAEE,aACA,sCAGF,oRAEE,WACA,mBAIJ,qBACE,WACA,mBAIA,oEACE,+BAIJ,8BACE,gBAEF,gCACE,SACA,gBACA,iDACA,kDACA,kBACA,eAEF,wCACE,YACA,aACA,iBAEF,gDACE,YACA,UC1LJ,YACE,aACA,mBACA,uBAEA,4BACE,OAGF,6BACE,UACA,aACA,8CAEA,4CACE,mBACA,kDACE,cAKN,kBACE,iBACA,qCACA,kCAEF,+BACE,aAGF,kBACE,kBACA,WACA,iBACA,0BACE,kBACA,WACA,wBACA,yBACA,UACA,SACA,iBACA,kBACA,6CACA,sBACA,qGACA,oCAIJ,wBACE,+BACA,mBACA,iDAEA,8BACE,mDAGJ,gDACE,0CC7DJ,eACE,sDACA,uDACA,aACA,mBACA,mBAEA,SACA,UACA,eACA,4CAEA,qBACE,6CAGF,qBACE,iBACA,gBCjBJ,mBACE,cACA,aACA,mBAEA,uCACE,OACA,kBACA,uBAGF,wCACE,UACA,aACA,sBAEA,iDACE,iBAEF,iDACE,kBAEF,iDACE,kBAEF,iDACE,0DAEF,mDACE,kBAGF,8CACE,cACA,WACA,UAOF,4HACE,aACA,sCAIJ,oCACE,WACA,iBACA,kBACA,sBACA,iBACA,UACA,wBACA,4CAEF,uCACE,kBACA,MACA,OACA,QACA,SAEF,2CACE,sBACA,kBACA,WACA,YACA,gBACA,iBACA,sBACA,kBACA,2CAGF,sEAEE,kBACA,YACA,sBACA,iBACA,mCACA,wBACA,4CAGF,oFAEE,kBACA,UACA,wBACA,iBACA,sBACA,kBACA,2CAGF,mCACE,iBACkB,6JAIlB,+CACA,0BAGF,sCACE,kBACA,MACA,OACA,QACA,SAGF,0GAGE,4CC1HJ,YACE,cACA,aACA,sBACA,oBAEA,mBACE,0BACA,WACA,iBACA,yBCXJ,gBACE,aACA,aACA,wBACA,oBAGF,2BACE,mBACA,6BACE,OCRJ,YACE,aACA,wBACA,oBAEA,4CAGF,kBACE,SACA,WACA,wBACA,6BACA,gDACA,qCACA,iBAGF,0CACE,eACA,eAGF,kDACE,aACA,qBACA,uBACA,wBACA,kBACA,qCAGF,kEAEE,yBACA,kDAGF,gDACE,aAGF,oBACE,aACA,qBACA,oBACA,4BACA,sBAEA,sCACE,UACA,sBACA,gEACA,oEACA,sDACA,uDACA,wDACA,uBAEA,gBAGF,4BACE,OACA,aACA,wBACA,oBCpEJ,YACE,eACA,cACA,gBACE,WAIJ,mBACE,kBACA,2BACE,WACA,cACA,WACA,iBACA,+BAEF,uBACE,kBACA,MACA,OACA,WACA,YACA,gBACA,2BCtBJ,0BAEE,aACA,qBACA,oBAGF,mBACE,OAIA,4BACE,OACA,aACA,uBACA,iBACA,4CAEA,6CACA,kCACE,kDAIJ,qCACE,mBAGF,gCACE,mDAGF,gCACE,UACA,aClCJ,YACE,6CACA,4CACA,iBACE,mJAEF,gCACA,yEAEA,kBACA,WACA,iBACA,sBACA,iBACA,UAEA,iBAEA,oDAEE,gDAGF,kBAKE,sCACA,aALA,gEAEE,0CC3BN,gBACE,aACA,mBACA,uBAEA,gCACE,OAGF,iCACE,UACA,aACA,8CAEA,gDACE,mBACA,sDACE,cAKN,sBACE,iBACA,qCACA,kCAEF,mCACE,aAGF,sBACE,kBACA,WACA,iBACA,8BACE,kBACA,WACA,wBACA,yBACA,UACA,SACA,iBACA,kBACA,6CACA,sBAGF,6BACE,kBACA,WACA,QACA,SACA,uBACA,WACA,iDACA,6BACA,uCAIJ,0BACE,+BACA,mBACA,iDAEA,gCACE,mDAGJ,gDACE,0CAGF,4BACE,+BACA,mBACA,6CAEA,kCACE,+CAGJ,oDACE,sCCnFJ,WACE,aACA,wBACA,oBAEA,4CAGF,gBACE,aACA,mBACA,oBAGF,uBACE,eACA,SACA,qBACA,SAEA,wBACA,gEAEA,gDACA,uCACA,mCAEA,6BACE,2CACA,4CAGF,iCACE,2CACA,sCCrCJ,eACE,aACA,mBACA,oBAEA,iBACE","file":"tweak-ui.min.css"}
File without changes