diff --git a/playground/src/app/info_graph_example.yaml b/playground/src/app/info_graph_example.yaml index 4a354b9..10a6592 100644 --- a/playground/src/app/info_graph_example.yaml +++ b/playground/src/app/info_graph_example.yaml @@ -128,41 +128,6 @@ theme: padding: '3' shape_color: amber -selected_outline: &selected_outline - outline_color: red - outline_style: dashed - outline_width: '1' - outline_shade: '600' - -node_blue_progress: &node_blue_progress - <<: *selected_outline - shape_color: blue - stroke_shade: '600' - stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30" - stroke_width: '[2px]' - fill_shade: '200' - extra: |- - [&>ellipse]:[stroke-linecap:round] - [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite] - -node_completed: &node_completed - shape_color: green - stroke_shade: '600' - stroke_style: 'solid' - stroke_width: '[2px]' - fill_shade: '200' - -edge_blue_animated: &edge_blue_animated - shape_color: blue - stroke_style: dashed # shorthand for [&>path]:[stroke-dasharray:3] - stroke_width: '[2px]' - stroke_shade_normal: '600' - fill_shade_normal: '500' - extra: >- - [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite] - [&>path]:visible - [&>polygon]:visible - tags: tag_step_1: "Step 1" tag_step_2: "Step 2" @@ -260,3 +225,39 @@ css: >- 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -248; } } + +common_styles: # not part of `info_graph`, but it ignores unknown keys + selected_outline: &selected_outline + outline_color: red + outline_style: dashed + outline_width: '1' + outline_shade: '600' + + node_blue_progress: &node_blue_progress + <<: *selected_outline + shape_color: blue + stroke_shade: '600' + stroke_style: "dasharray:0.5,3,0.5,3,0.5,3,0.5,3,6,3,12,30" + stroke_width: '[2px]' + fill_shade: '200' + extra: |- + [&>ellipse]:[stroke-linecap:round] + [&>ellipse]:animate-[ellipse-spin_1.5s_linear_infinite] + + node_completed: &node_completed + shape_color: green + stroke_shade: '600' + stroke_style: 'solid' + stroke_width: '[2px]' + fill_shade: '200' + + edge_blue_animated: &edge_blue_animated + shape_color: blue + stroke_style: dashed # shorthand for [&>path]:[stroke-dasharray:3] + stroke_width: '[2px]' + stroke_shade_normal: '600' + fill_shade_normal: '500' + extra: >- + [&>path]:animate-[stroke-dashoffset-move_2s_linear_infinite] + [&>path]:visible + [&>polygon]:visible