@yuneta/gobj-ui 7.23.146 → 7.23.147

package/README.md

@@ -497,8 +497,10 @@ cloned toolbar cannot drift apart again. The vocabulary is the treedb graph's
 sprite and so cannot share the code, only the decisions): zoom in / zoom out, a
 live **zoom readout**, `yi-fit` for fit — the same corner brackets the sprite
 draws for `g6-icon-fit` — and the WRITTEN `1:1` for actual size, which is
-written in every editor that offers it and never drawn. Fold is the chevron
-pair, from the lazy tree viewer's own toolbar. The readout hangs off G6's
+written in every editor that offers it and never drawn. Fold is the
+double-chevron pair (`yi-angles-down` / `yi-angles-up`, `7.23.147`), the same
+as the lazy tree viewer's toolbar: not the single chevron of a node's handle,
+which opens ONE node. The readout hangs off G6's
 `aftertransform`, the one hook that also covers the wheel.
 
 Both graph toolbars are arranged the same way (`7.23.7`): the **global**
@@ -1664,7 +1666,10 @@ forwards them as `EV_SET_HIDDEN_TOPICS`, `EV_SET_MAIN_TOPIC`,
 `main topic`, `highlight topic`, `loose records`, `hidden topics`; `legend`
 is no longer used.
 
-**The layout select has a stepper beside it** (`7.23.146`): ▲ and ▼ step to
+**The layout select has a stepper beside it** (`7.23.146`): ↑ and ↓
+(`yi-arrow-up` / `yi-arrow-down` since `7.23.147`, a shafted arrow steps a
+sequence; the fold stepper's level buttons are tree boxes, `yi-square-minus`
+/ `yi-square-plus`) step to
 the layout before or after the current one, in the order the engine offers
 them (`layout_names`), without opening the list. Layouts are picked by trying
 them one after another, and a list closes on every pick. The stepper reads the

package/dist/gobj-ui.cjs.js

@@ -11305,13 +11305,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13851,7 +13851,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -64418,7 +64418,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64459,7 +64459,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64562,7 +64562,7 @@ function make_toolbar(gobj) {
 				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
 				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
-			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
 		],
 		[
 			"span",
@@ -69869,7 +69869,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/dist/gobj-ui.es.js

@@ -11300,13 +11300,13 @@ function yui_graph_camera_items(gobj, graph, wide) {
 	];
 }
 /************************************************************
-*   The fold pair: expand all, collapse all.  Chevrons, the
-*   open one rotated down — the same pair the lazy tree
-*   viewer's toolbar uses, and the same direction the
-*   per-node handles speak.
+*   The fold pair: expand all, collapse all.  Double chevrons,
+*   down and up -- the same pair the lazy tree viewer's toolbar
+*   uses. Not the single chevron of a node's handle: that opens
+*   ONE node, these act on all of them.
 ************************************************************/
 function yui_graph_fold_items(gobj, wide) {
-	return [camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide, " transform: rotate(90deg);"), camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide)];
+	return [camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide), camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide)];
 }
 /************************************************************
 *   The ANCHOR toggle: pick one element and every camera move
@@ -13846,7 +13846,7 @@ function make_toolbar$4(gobj) {
 			[yui_toolbar_icon("yi-magnifying-glass")]
 		]]
 	]);
-	left_items.push(icon_button$1(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all"));
+	left_items.push(icon_button$1(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand loaded"), icon_button$1(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all"));
 	attach_clear($search_control, $search_input);
 	left_items.push($search_control);
 	let right_items = [view_mode_switch$1(gobj), icon_button$1(gobj, "yi-copy", "EV_COPY_ALL", "copy json")];
@@ -64413,7 +64413,7 @@ function fold_level_items(gobj, wide) {
 			style: "margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 		},
 		[
-			step_button("GRAPH_FOLD_COLLAPSE", "yi-chevron-right", "collapse one level", "EV_COLLAPSE_LEVEL"),
+			step_button("GRAPH_FOLD_COLLAPSE", "yi-square-minus", "collapse one level", "EV_COLLAPSE_LEVEL"),
 			[
 				"div",
 				{
@@ -64454,7 +64454,7 @@ function fold_level_items(gobj, wide) {
 					]
 				]
 			],
-			step_button("GRAPH_FOLD_EXPAND", "yi-chevron-down", "expand one level", "EV_EXPAND_LEVEL")
+			step_button("GRAPH_FOLD_EXPAND", "yi-square-plus", "expand one level", "EV_EXPAND_LEVEL")
 		]
 	]];
 }
@@ -64557,7 +64557,7 @@ function make_toolbar(gobj) {
 				class: "GRAPH_LAYOUT_STEPPER buttons has-addons",
 				style: "margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;"
 			},
-			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-chevron-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-chevron-down", "next layout", 1)]
+			[layout_step_button(gobj, "GRAPH_LAYOUT_PREV", "yi-arrow-up", "previous layout", -1), layout_step_button(gobj, "GRAPH_LAYOUT_NEXT", "yi-arrow-down", "next layout", 1)]
 		],
 		[
 			"span",
@@ -69864,7 +69864,7 @@ function version_banner(gobj, topic) {
 				[[
 					"span",
 					{ class: "icon" },
-					[["i", { class: "yi-chevron-up" }]]
+					[["i", { class: "yi-circle-up" }]]
 				], [
 					"span",
 					{ i18n: "raise" },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yuneta/gobj-ui",
-  "version": "7.23.146",
+  "version": "7.23.147",
   "type": "module",
   "main": "dist/gobj-ui.cjs.js",
   "module": "dist/gobj-ui.es.js",

package/src/c_yui_json.css

@@ -155,13 +155,6 @@
     transform: rotate(90deg);
 }
 
-/*  "Expand all" reuses the chevron (the only one available) rotated to point
- *  DOWN — the open state — while "collapse all" keeps it pointing right (the
- *  closed state), mirroring the per-node toggle. */
-.C_YUI_JSON .EV_EXPAND_ALL i {
-    transform: rotate(90deg);
-}
-
 .C_YUI_JSON .JSON_TOGGLE_REMOTE i {
     font-size: 0.8em;
     color: var(--bulma-link-on-scheme, var(--bulma-link, #3273dc));

package/src/c_yui_json.js

@@ -399,8 +399,8 @@ function make_toolbar(gobj)
      *  place both graphs put theirs.  It opens the whole document; the
      *  per-row toggles live in the rows.  */
     left_items.push(
-        icon_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL",   "expand loaded"),
-        icon_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all")
+        icon_button(gobj, "yi-angles-down", "EV_EXPAND_ALL",   "expand loaded"),
+        icon_button(gobj, "yi-angles-up",   "EV_COLLAPSE_ALL", "collapse all")
     );
 
     attach_clear($search_control, $search_input);

package/src/c_yui_schema_editor.js

@@ -1264,7 +1264,7 @@ function version_banner(gobj, topic)
                         title: t("raise the version"), "aria-label": t("raise the version"),
                         "data-i18n-title": "raise the version",
                         "data-i18n-aria-label": "raise the version"}, [
-                ["span", {class: "icon"}, [["i", {class: "yi-chevron-up"}]]],
+                ["span", {class: "icon"}, [["i", {class: "yi-circle-up"}]]],
                 ["span", {i18n: "raise"}, t("raise")]
             ]]
         ]]

package/src/c_yui_treedb_graph.js

@@ -716,8 +716,9 @@ function fold_level_items(gobj, wide)
     return [
         ['div', {class: 'GRAPH_FOLD_STEPPER buttons has-addons',
                  style: 'margin:0; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
-            /*  The same two chevrons the pills speak: `▸` folded, `▾` open.  */
-            step_button('GRAPH_FOLD_COLLAPSE', 'yi-chevron-right',
+            /*  Tree boxes, not the pills' chevrons: a pill opens ONE hook,
+             *  this steps a LEVEL of the whole tree.  */
+            step_button('GRAPH_FOLD_COLLAPSE', 'yi-square-minus',
                         'collapse one level', 'EV_COLLAPSE_LEVEL'),
             /*  A `div` with the button skin, like the legend's main
              *  chip: a readout between two buttons of one group, not
@@ -740,7 +741,7 @@ function fold_level_items(gobj, wide)
                 ['span', {class: 'GRAPH_FOLD_COUNT',
                           style: 'font-variant-numeric:tabular-nums;'}, '–'],
             ]],
-            step_button('GRAPH_FOLD_EXPAND', 'yi-chevron-down',
+            step_button('GRAPH_FOLD_EXPAND', 'yi-square-plus',
                         'expand one level', 'EV_EXPAND_LEVEL'),
         ]],
     ];
@@ -881,8 +882,8 @@ function make_toolbar(gobj)
          *  arrive with the child (populate_nodes_tree_options).  */
         ['div', {class: 'GRAPH_LAYOUT_STEPPER buttons has-addons',
                  style: 'margin:0 0 0 .25rem; flex:0 0 auto; flex-wrap:nowrap; align-items:stretch;'}, [
-            layout_step_button(gobj, 'GRAPH_LAYOUT_PREV', 'yi-chevron-up', 'previous layout', -1),
-            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-chevron-down', 'next layout', 1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_PREV', 'yi-arrow-up', 'previous layout', -1),
+            layout_step_button(gobj, 'GRAPH_LAYOUT_NEXT', 'yi-arrow-down', 'next layout', 1),
         ]],
 
         ['span', {class: 'GRAPH_MODE_LABEL is-hidden-mobile', style: 'padding-left:10px; padding-right:5px;', i18n: 'operation mode'}, 'operation mode'],

package/src/yui_graph_camera.js

@@ -181,17 +181,16 @@ export function yui_graph_camera_items(gobj, graph, wide)
 }
 
 /************************************************************
- *   The fold pair: expand all, collapse all.  Chevrons, the
- *   open one rotated down — the same pair the lazy tree
- *   viewer's toolbar uses, and the same direction the
- *   per-node handles speak.
+ *   The fold pair: expand all, collapse all.  Double chevrons,
+ *   down and up -- the same pair the lazy tree viewer's toolbar
+ *   uses. Not the single chevron of a node's handle: that opens
+ *   ONE node, these act on all of them.
  ************************************************************/
 export function yui_graph_fold_items(gobj, wide)
 {
     return [
-        camera_button(gobj, "yi-chevron-right", "EV_EXPAND_ALL", "expand all", wide,
-            ' transform: rotate(90deg);'),
-        camera_button(gobj, "yi-chevron-right", "EV_COLLAPSE_ALL", "collapse all", wide),
+        camera_button(gobj, "yi-angles-down", "EV_EXPAND_ALL", "expand all", wide),
+        camera_button(gobj, "yi-angles-up", "EV_COLLAPSE_ALL", "collapse all", wide),
     ];
 }
 

package/src/yui_icons.css

@@ -404,3 +404,43 @@
     -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M352 64L480 160 352 256V192H64V128H352ZM160 256L32 352 160 448V384H448V320H160Z'/%3E%3C/svg%3E");
 }
+
+/* --- One shape per meaning (FontAwesome Free 7.3.1, solid) ---
+ *  A chevron opens or closes ONE thing, or scrolls; a shafted arrow
+ *  steps through a sequence; a tree box steps one LEVEL of a tree;
+ *  a double chevron acts on ALL of it. */
+
+.yi-square-plus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zM200 344l0-64-64 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l64 0 0-64c0-13.3 10.7-24 24-24s24 10.7 24 24l0 64 64 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-64 0 0 64c0 13.3-10.7 24-24 24s-24-10.7-24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-square-minus::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M64 32C28.7 32 0 60.7 0 96L0 416c0 35.3 28.7 64 64 64l320 0c35.3 0 64-28.7 64-64l0-320c0-35.3-28.7-64-64-64L64 32zm72 200l176 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-176 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 470.6c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 402.7 329.4 265.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-160 160zm160-352l-160 160c-12.5 12.5-32.8 12.5-45.3 0l-160-160c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L192 210.7 329.4 73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-angles-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 109.3 329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160zm160 352l-160-160c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 329.4 438.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M214.6 9.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 109.3 160 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-370.7 105.4 105.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z'/%3E%3C/svg%3E");
+}
+
+.yi-arrow-down::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
+}
+
+.yi-circle-up::before {
+    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
+    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zm11.3-387.3l104 104c4.6 4.6 5.9 11.5 3.5 17.4S366.5 256 360 256l-56 0 0 96c0 17.7-14.3 32-32 32l-32 0c-17.7 0-32-14.3-32-32l0-96-56 0c-6.5 0-12.3-3.9-14.8-9.9s-1.1-12.9 3.5-17.4l104-104c6.2-6.2 16.4-6.2 22.6 0z'/%3E%3C/svg%3E");
+}