builtins: Update list blocks.

This commit is contained in:
Laurens Valk
2024-03-11 13:43:45 +01:00
parent 65748ca56c
commit ea4f594696
15 changed files with 10981 additions and 35 deletions
@@ -1,5 +1,5 @@
<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 305.125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="305.125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210.4609375 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="210.4609375" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
@@ -48,7 +48,7 @@ color: #fff;
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern8106945446883995)
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
@@ -949,17 +949,6 @@ input[type=number] {
}
.controlsIconStyle {
opacity: 0.2;
}
.controlsIconStyle:hover {
opacity: 0.4;
}
.controlsIconStyle:active {
opacity: 0.6;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
@@ -972,4 +961,29 @@ input[type=number] {
opacity: .6;
}
</style><g transform="translate(1, 1)"><g data-id="0~(D/mwZxYtZKy|(*S!i" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0 h 263.125 a 20 20 0 0,1 20,20 v 0 a 20 20 0 0,1 -20,20 V 40 h -263.125 a 20 20 0 0,1 -20,-20 v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">in list</text></g><g class="blocklyEditableText" transform="translate(117.78125,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="60" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">get</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(40,8.6)"/></g><g transform="translate(185.78125,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9"> </text></g><g class="blocklyEditableText" transform="translate(198.2265625,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">#</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g><path class="blocklyOutlinePath" d=" M 77.78125,4 h 16 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 h -16 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z" fill="#009973"/><path class="blocklyOutlinePath" d=" M 267.125,4 h 16 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 h -16 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z" fill="#009973"/></g></g></svg>
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="Ay=V-tqkr_r7wifaJ@|3" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0 h 168.4609375 a 20 20 0 0,1 20,20 v 0 a 20 20 0 0,1 -20,20 V 40 h -168.4609375 a 20 20 0 0,1 -20,-20 v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id=";|9mnbc0|{h$JfpO1Y^?" transform="translate(43.1171875, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g transform="translate(98.234375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">get</text></g><g class="blocklyEditableText" transform="translate(130.234375,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="66.2265625" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">first</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(46.2265625,8.6)"/></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 23 KiB

After

Width:  |  Height:  |  Size: 22 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.1328125 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="229.1328125" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="GDi(.+Pt-n?4uFMerW~8" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0 h 187.1328125 a 20 20 0 0,1 20,20 v 0 a 20 20 0 0,1 -20,20 V 40 h -187.1328125 a 20 20 0 0,1 -20,-20 v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="^/zg`F][8_=^)@8$)#Zi" transform="translate(183.1328125, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 8 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -8 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(15.55078125,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="8.8984375" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">0</text></g></g><g data-id="c]`6FSC4([POm?)hRlq," transform="translate(43.1171875, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g transform="translate(98.234375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">get</text></g><g class="blocklyEditableText" transform="translate(130.234375,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">#</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 23 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 207.8046875 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="207.8046875" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="-uXlO?dt;p.GQUL|8PEv" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0 h 165.8046875 a 20 20 0 0,1 20,20 v 0 a 20 20 0 0,1 -20,20 V 40 h -165.8046875 a 20 20 0 0,1 -20,-20 v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id=")gZZGbXLA7y5~uSuGDoL" transform="translate(43.1171875, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g transform="translate(98.234375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">get</text></g><g class="blocklyEditableText" transform="translate(130.234375,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="63.5703125" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">last</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(43.5703125,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 22 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 238.90625 42" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="238.90625" height="42" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="`/1Yt5TmxB^Wf#dX?-lu" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 20,0 h 196.90625 a 20 20 0 0,1 20,20 v 0 a 20 20 0 0,1 -20,20 V 40 h -196.90625 a 20 20 0 0,1 -20,-20 v 0 a 20 20 0 0,1 20,-20 z&#10;"/><g data-id="CscbS,}9hSIQ^])OqL3x" transform="translate(43.1171875, 4)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(12,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g transform="translate(98.234375,11)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">get</text></g><g class="blocklyEditableText" transform="translate(130.234375,5.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="94.671875" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">random</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(74.671875,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 22 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 242.5 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="242.5" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="K8btvt8*HC)q(jRZ1;xC" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 197.5 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -197.5 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="[0(4Mu]Ca`CSBipigLFx" transform="translate(181.8046875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id="R6lO)_ougW/==L=-!1D$" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="79.5703125" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">prefix</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(59.5703125,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 348.3125 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="348.3125" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="wa+(t|k4BXH/4uNEIdvq" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 303.3125 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -303.3125 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="k~Mu9}W?YFW+eqXV,CoW" transform="translate(213.8203125, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 8 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -8 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(15.55078125,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="8.8984375" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">0</text></g></g><g data-id="ug$`ttD0W?#+_4wRAy-%" transform="translate(287.6171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id="zaLWPR)[Hnvkv7{BI!r4" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="111.5859375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">insert at #</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(91.5859375,8.6)"/></g><g transform="translate(261.8203125,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">as</text></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.8203125 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="255.8203125" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="2}T^)GOzq|?Y58X`iV=j" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 210.8203125 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -210.8203125 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id=",W?1k;?[6{gyt$MO4$a}" transform="translate(195.125, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id="=zOCh59Y86Owz|{fBT2G" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="92.890625" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">append</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(72.890625,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -1,5 +1,5 @@
<!-- Copyright (c) 2023 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 386.046875 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="386.046875" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 231.828125 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="231.828125" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
@@ -48,7 +48,7 @@ color: #fff;
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern8106945446883995)
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
@@ -949,17 +949,6 @@ input[type=number] {
}
.controlsIconStyle {
opacity: 0.2;
}
.controlsIconStyle:hover {
opacity: 0.4;
}
.controlsIconStyle:active {
opacity: 0.6;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
@@ -972,4 +961,29 @@ input[type=number] {
opacity: .6;
}
</style><g transform="translate(1, 1)"><g data-id="?T^kgG_jK8xc@|DSbJ_I" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 341.046875 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -341.046875 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">in list</text></g><g class="blocklyEditableText" transform="translate(113.78125,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="59.125" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">set</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(39.125,8.6)"/></g><g transform="translate(180.90625,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9"> </text></g><g class="blocklyEditableText" transform="translate(193.3515625,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="44.8984375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">#</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(24.8984375,8.6)"/></g><g transform="translate(302.25,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">as</text></g><path class="blocklyOutlinePath" d=" M 73.78125,6 h 16 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 h -16 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z" fill="#009973"/><path class="blocklyOutlinePath" d=" M 262.25,6 h 16 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 h -16 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z" fill="#009973"/><path class="blocklyOutlinePath" d=" M 344.046875,6 h 16 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 h -16 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z" fill="#009973"/></g></g></svg>
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="m,BPQY.}XNeqIYyAY~S`" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 186.828125 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -186.828125 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="h#K6UeP0Luh^-2a9w{`A" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="127.59375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">remove first</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(107.59375,8.6)"/></g></g></g></svg>

Before

Width:  |  Height:  |  Size: 24 KiB

After

Width:  |  Height:  |  Size: 23 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 258.5 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="258.5" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="}A,Zxf5xG;G_@fAzau(g" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 213.5 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -213.5 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="pe#i-DVLbP|/uMvg9%]#" transform="translate(208.5, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 8 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -8 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(15.55078125,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="8.8984375" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">0</text></g></g><g data-id="Vhy))~XIlrOU`!#68X{;" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="106.265625" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">remove #</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(86.265625,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 229.171875 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="229.171875" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="./QCX24Uu}?Xg|j1y*im" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 184.171875 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -184.171875 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="Jhy@o!#^Bi^v|DLgMH11" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="124.9375" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">remove last</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(104.9375,8.6)"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 23 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 279.828125 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="279.828125" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="k:VMeCODBlVlg9|oe4U?" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 234.828125 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -234.828125 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="*P1Ka]s}Q76I+enFaPZF" transform="translate(219.1328125, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id=",-KPU(=u62r|(xx%%g^p" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="93.796875" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">set first</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(73.796875,8.6)"/></g><g transform="translate(196.03125,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">to</text></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 306.5 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="306.5" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="7HLlGd4@T~T~ab^}-9o`" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 261.5 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -261.5 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="XbxY*e@}LI08rc%%]cO^" transform="translate(174.703125, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 8 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -8 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(15.55078125,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="8.8984375" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">0</text></g></g><g data-id="a?:qCMw?GR[GdFCHOpTP" transform="translate(245.8046875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id="rv[3ucDkf#0_d0RnJ8NL" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="72.46875" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">set #</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(52.46875,8.6)"/></g><g transform="translate(222.703125,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">to</text></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

@@ -0,0 +1,989 @@
<!-- Copyright (c) 2024 The Pybricks Authors. All rights reserved. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 277.171875 52" class="blocklySvg pybricks_renderer-renderer pybricks-zelos-light-theme" width="277.171875" height="52" style="background-color: transparent"><style xmlns="http://www.w3.org/1999/xhtml">.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
font: bold 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;rect:not(.blocklyDropdownRect),
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;rect:not(.blocklyDropdownRect) {
fill: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyNonEditableText&gt;g&gt;text,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyEditableText&gt;g&gt;text {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyFlyoutLabelText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyText.blocklyBubbleText {
fill: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;rect,
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDraggable:not(.blocklyDisabled)
.blocklyEditableText:not(.editing):hover&gt;.blocklyPath {
stroke: #fff;
stroke-width: 2;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHtmlInput {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
font-weight: bold;
color: #575E75;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDropdownText {
fill: #fff !important;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyWidgetDiv .goog-menuitem,
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem {
font-family: "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme.blocklyDropDownDiv .goog-menuitem-content {
color: #fff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyHighlightedConnectionPath {
stroke: #ffffff;
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyDisabled &gt; .blocklyOutlinePath {
fill: url(#blocklyDisabledPattern2785633565459116)
}
.pybricks_renderer-renderer.pybricks-zelos-light-theme .blocklyInsertionMarker&gt;.blocklyPath {
fill-opacity: 0.2;
stroke: none;
}
.blocklySvg {
background-color: #fff;
outline: none;
overflow: hidden; /* IE overflows by default. */
position: absolute;
display: block;
}
.blocklyWidgetDiv {
display: none;
position: absolute;
z-index: 99999; /* big value for bootstrap3 compatibility */
}
.injectionDiv {
height: 100%;
position: relative;
overflow: hidden; /* So blocks in drag surface disappear at edges */
touch-action: none;
}
.blocklyNonSelectable {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
}
.blocklyBlockCanvas.blocklyCanvasTransitioning,
.blocklyBubbleCanvas.blocklyCanvasTransitioning {
transition: transform .5s;
}
.blocklyTooltipDiv {
background-color: #ffffc7;
border: 1px solid #ddc;
box-shadow: 4px 4px 20px 1px rgba(0,0,0,.15);
color: #000;
display: none;
font: 9pt sans-serif;
opacity: .9;
padding: 2px;
position: absolute;
z-index: 100000; /* big value for bootstrap3 compatibility */
}
.blocklyDropDownDiv {
position: absolute;
left: 0;
top: 0;
z-index: 1000;
display: none;
border: 1px solid;
border-color: #dadce0;
background-color: #fff;
border-radius: 2px;
padding: 4px;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownContent {
max-height: 300px; /* @todo: spec for maximum height. */
overflow: auto;
overflow-x: hidden;
position: relative;
}
.blocklyDropDownArrow {
position: absolute;
left: 0;
top: 0;
width: 16px;
height: 16px;
z-index: -1;
background-color: inherit;
border-color: inherit;
}
.blocklyDropDownButton {
display: inline-block;
float: left;
padding: 0;
margin: 4px;
border-radius: 4px;
outline: none;
border: 1px solid;
transition: box-shadow .1s;
cursor: pointer;
}
.blocklyArrowTop {
border-top: 1px solid;
border-left: 1px solid;
border-top-left-radius: 4px;
border-color: inherit;
}
.blocklyArrowBottom {
border-bottom: 1px solid;
border-right: 1px solid;
border-bottom-right-radius: 4px;
border-color: inherit;
}
.blocklyResizeSE {
cursor: se-resize;
fill: #aaa;
}
.blocklyResizeSW {
cursor: sw-resize;
fill: #aaa;
}
.blocklyResizeLine {
stroke: #515A5A;
stroke-width: 1;
}
.blocklyHighlightedConnectionPath {
fill: none;
stroke: #fc3;
stroke-width: 4px;
}
.blocklyPathLight {
fill: none;
stroke-linecap: round;
stroke-width: 1;
}
.blocklySelected&gt;.blocklyPathLight {
display: none;
}
.blocklyDraggable {
cursor: grab;
cursor: -webkit-grab;
}
.blocklyDragging {
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Changes cursor on mouse down. Not effective in Firefox because of
https://bugzilla.mozilla.org/show_bug.cgi?id=771241 */
.blocklyDraggable:active {
cursor: grabbing;
cursor: -webkit-grabbing;
}
.blocklyDragging.blocklyDraggingDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyDragging&gt;.blocklyPath,
.blocklyDragging&gt;.blocklyPathLight {
fill-opacity: .8;
stroke-opacity: .8;
}
.blocklyDragging&gt;.blocklyPathDark {
display: none;
}
.blocklyDisabled&gt;.blocklyPath {
fill-opacity: .5;
stroke-opacity: .5;
}
.blocklyDisabled&gt;.blocklyPathLight,
.blocklyDisabled&gt;.blocklyPathDark {
display: none;
}
.blocklyInsertionMarker&gt;.blocklyPath,
.blocklyInsertionMarker&gt;.blocklyPathLight,
.blocklyInsertionMarker&gt;.blocklyPathDark {
fill-opacity: .2;
stroke: none;
}
.blocklyMultilineText {
font-family: monospace;
}
.blocklyNonEditableText&gt;text {
pointer-events: none;
}
.blocklyFlyout {
position: absolute;
z-index: 20;
}
.blocklyText text {
cursor: default;
}
/*
Don't allow users to select text. It gets annoying when trying to
drag a block and selected text moves instead.
*/
.blocklySvg text {
user-select: none;
-ms-user-select: none;
-webkit-user-select: none;
cursor: inherit;
}
.blocklyHidden {
display: none;
}
.blocklyFieldDropdown:not(.blocklyHidden) {
display: block;
}
.blocklyIconGroup {
cursor: default;
}
.blocklyIconGroup:not(:hover),
.blocklyIconGroupReadonly {
opacity: .6;
}
.blocklyIconShape {
fill: #00f;
stroke: #fff;
stroke-width: 1px;
}
.blocklyIconSymbol {
fill: #fff;
}
.blocklyMinimalBody {
margin: 0;
padding: 0;
}
.blocklyHtmlInput {
border: none;
border-radius: 4px;
height: 100%;
margin: 0;
outline: none;
padding: 0;
width: 100%;
text-align: center;
display: block;
box-sizing: border-box;
}
/* Remove the increase and decrease arrows on the field number editor */
input.blocklyHtmlInput[type=number]::-webkit-inner-spin-button,
input.blocklyHtmlInput[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
.blocklyMainBackground {
stroke-width: 1;
stroke: #c6c6c6; /* Equates to #ddd due to border being off-pixel. */
}
.blocklyMutatorBackground {
fill: #fff;
stroke: #ddd;
stroke-width: 1;
}
.blocklyFlyoutBackground {
fill: #ddd;
fill-opacity: .8;
}
.blocklyMainWorkspaceScrollbar {
z-index: 20;
}
.blocklyFlyoutScrollbar {
z-index: 30;
}
.blocklyScrollbarHorizontal,
.blocklyScrollbarVertical {
position: absolute;
outline: none;
}
.blocklyScrollbarBackground {
opacity: 0;
}
.blocklyScrollbarHandle {
fill: #ccc;
}
.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyScrollbarHandle:hover {
fill: #bbb;
}
/* Darken flyout scrollbars due to being on a grey background. */
/* By contrast, workspace scrollbars are on a white background. */
.blocklyFlyout .blocklyScrollbarHandle {
fill: #bbb;
}
.blocklyFlyout .blocklyScrollbarBackground:hover+.blocklyScrollbarHandle,
.blocklyFlyout .blocklyScrollbarHandle:hover {
fill: #aaa;
}
.blocklyInvalidInput {
background: #faa;
}
.blocklyVerticalMarker {
stroke-width: 3px;
fill: rgba(255,255,255,.5);
pointer-events: none;
}
.blocklyComputeCanvas {
position: absolute;
width: 0;
height: 0;
}
.blocklyNoPointerEvents {
pointer-events: none;
}
.blocklyContextMenu {
border-radius: 4px;
max-height: 100%;
}
.blocklyDropdownMenu {
border-radius: 2px;
padding: 0 !important;
}
.blocklyDropdownMenu .blocklyMenuItem {
/* 28px on the left for icon or checkbox. */
padding-left: 28px;
}
/* BiDi override for the resting state. */
.blocklyDropdownMenu .blocklyMenuItemRtl {
/* Flip left/right padding for BiDi. */
padding-left: 5px;
padding-right: 28px;
}
.blocklyWidgetDiv .blocklyMenu {
background: #fff;
border: 1px solid transparent;
box-shadow: 0 0 3px 1px rgba(0,0,0,.3);
font: normal 13px Arial, sans-serif;
margin: 0;
outline: none;
padding: 4px 0;
position: absolute;
overflow-y: auto;
overflow-x: hidden;
max-height: 100%;
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
.blocklyWidgetDiv .blocklyMenu.blocklyFocused {
box-shadow: 0 0 6px 1px rgba(0,0,0,.3);
}
.blocklyDropDownDiv .blocklyMenu {
background: inherit; /* Compatibility with gapi, reset from goog-menu */
border: inherit; /* Compatibility with gapi, reset from goog-menu */
font: normal 13px "Helvetica Neue", Helvetica, sans-serif;
outline: none;
position: relative; /* Compatibility with gapi, reset from goog-menu */
z-index: 20000; /* Arbitrary, but some apps depend on it... */
}
/* State: resting. */
.blocklyMenuItem {
border: none;
color: #000;
cursor: pointer;
list-style: none;
margin: 0;
/* 7em on the right for shortcut. */
min-width: 7em;
padding: 6px 15px;
white-space: nowrap;
}
/* State: disabled. */
.blocklyMenuItemDisabled {
color: #ccc;
cursor: inherit;
}
/* State: hover. */
.blocklyMenuItemHighlight {
background-color: rgba(0,0,0,.1);
}
/* State: selected/checked. */
.blocklyMenuItemCheckbox {
height: 16px;
position: absolute;
width: 16px;
}
.blocklyMenuItemSelected .blocklyMenuItemCheckbox {
background: url(https://blockly-demo.appspot.com/static/media/sprites.png) no-repeat -48px -16px;
float: left;
margin-left: -24px;
position: static; /* Scroll with the menu. */
}
.blocklyMenuItemRtl .blocklyMenuItemCheckbox {
float: right;
margin-right: -24px;
}
.blocklyZoom&gt;image, .blocklyZoom&gt;svg&gt;image {
opacity: .4;
}
.blocklyZoom&gt;image:hover, .blocklyZoom&gt;svg&gt;image:hover {
opacity: .6;
}
.blocklyZoom&gt;image:active, .blocklyZoom&gt;svg&gt;image:active {
opacity: .8;
}
.blocklyCommentForeignObject {
position: relative;
z-index: 0;
}
.blocklyCommentRect {
fill: #E7DE8E;
stroke: #bcA903;
stroke-width: 1px;
}
.blocklyCommentTarget {
fill: transparent;
stroke: #bcA903;
}
.blocklyCommentTargetFocused {
fill: none;
}
.blocklyCommentHandleTarget {
fill: none;
}
.blocklyCommentHandleTargetFocused {
fill: transparent;
}
.blocklyFocused&gt;.blocklyCommentRect {
fill: #B9B272;
stroke: #B9B272;
}
.blocklySelected&gt;.blocklyCommentTarget {
stroke: #fc3;
stroke-width: 3px;
}
.blocklyCommentDeleteIcon {
cursor: pointer;
fill: #000;
display: none;
}
.blocklySelected &gt; .blocklyCommentDeleteIcon {
display: block;
}
.blocklyDeleteIconShape {
fill: #000;
stroke: #000;
stroke-width: 1px;
}
.blocklyDeleteIconShape.blocklyDeleteIconHighlighted {
stroke: #fc3;
}
.blocklyCommentTextarea {
background-color: #fef49c;
border: 0;
display: block;
margin: 0;
outline: 0;
padding: 3px;
resize: none;
text-overflow: hidden;
}
.blocklyAngleCircle {
stroke: #444;
stroke-width: 1;
fill: #ddd;
fill-opacity: 0.8;
}
.blocklyAngleMarks {
stroke: #444;
stroke-width: 1;
}
.blocklyAngleGauge {
fill: #f88;
fill-opacity: 0.8;
pointer-events: none;
}
.blocklyAngleLine {
stroke: #f00;
stroke-width: 2;
stroke-linecap: round;
pointer-events: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.blocklyHtmlTextAreaInput {
font-family: monospace;
resize: none;
overflow: hidden;
height: 100%;
text-align: left;
}
.blocklyHtmlTextAreaInputOverflowedY {
overflow-y: scroll;
}
.blocklyFlyoutButton {
fill: #888;
cursor: default;
}
.blocklyFlyoutButtonShadow {
fill: #666;
}
.blocklyFlyoutButton:hover {
fill: #aaa;
}
.blocklyFlyoutLabel {
cursor: default;
}
.blocklyFlyoutLabelBackground {
opacity: 0;
}
.blocklyTreeRow:not(.blocklyTreeSelected):hover {
background-color: rgba(255, 255, 255, .2);
}
.blocklyToolboxDiv[layout="h"] .blocklyToolboxCategory {
margin: 1px 5px 1px 0;
}
.blocklyToolboxDiv[dir="RTL"][layout="h"] .blocklyToolboxCategory {
margin: 1px 0 1px 5px;
}
.blocklyTreeRow {
height: 22px;
line-height: 22px;
margin-bottom: 3px;
padding-right: 8px;
white-space: nowrap;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeRow {
margin-left: 8px;
padding-right: 0;
}
.blocklyTreeIcon {
background-image: url(https://blockly-demo.appspot.com/static/media/sprites.png);
height: 16px;
vertical-align: middle;
visibility: hidden;
width: 16px;
}
.blocklyTreeIconClosed {
background-position: -32px -1px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeIconClosed {
background-position: 0 -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: -32px -17px;
}
.blocklyToolboxDiv[dir="RTL"] .blocklyTreeSelected&gt;.blocklyTreeIconClosed {
background-position: 0 -17px;
}
.blocklyTreeIconOpen {
background-position: -16px -1px;
}
.blocklyTreeSelected&gt;.blocklyTreeIconOpen {
background-position: -16px -17px;
}
.blocklyTreeLabel {
cursor: default;
font: 16px sans-serif;
padding: 0 3px;
vertical-align: middle;
}
.blocklyToolboxDelete .blocklyTreeLabel {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyTreeSelected .blocklyTreeLabel {
color: #fff;
}
.blocklyTreeSeparator {
border-bottom: solid #e5e5e5 1px;
height: 0;
margin: 5px 0;
}
.blocklyToolboxDiv[layout="h"] .blocklyTreeSeparator {
border-right: solid #e5e5e5 1px;
border-bottom: none;
height: auto;
margin: 0 5px 0 5px;
padding: 5px 0;
width: 0;
}
.blocklyToolboxDelete {
cursor: url("https://blockly-demo.appspot.com/static/media/handdelete.cur"), auto;
}
.blocklyToolboxGrab {
cursor: url("https://blockly-demo.appspot.com/static/media/handclosed.cur"), auto;
cursor: grabbing;
cursor: -webkit-grabbing;
}
/* Category tree in Toolbox. */
.blocklyToolboxDiv {
background-color: #ddd;
overflow-x: visible;
overflow-y: auto;
padding: 4px 0 4px 0;
position: absolute;
z-index: 70; /* so blocks go under toolbox when dragging */
-webkit-tap-highlight-color: transparent; /* issue #1345 */
}
.blocklyToolboxContents {
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.blocklyToolboxContents:focus {
outline: none;
}
.blocklyColourTable {
border-collapse: collapse;
display: block;
outline: none;
padding: 1px;
}
.blocklyColourTable&gt;tr&gt;td {
border: 0.5px solid #888;
box-sizing: border-box;
cursor: pointer;
display: inline-block;
height: 20px;
padding: 0;
width: 20px;
}
.blocklyColourTable&gt;tr&gt;td.blocklyColourHighlighted {
border-color: #eee;
box-shadow: 2px 2px 7px 2px rgba(0, 0, 0, 0.3);
position: relative;
}
.blocklyColourSelected, .blocklyColourSelected:hover {
border-color: #eee !important;
outline: 1px solid #333;
position: relative;
}
.fieldColourSliderContainer {
padding: 4px;
}
.fieldColourSliderContainer hr {
border: none;
border-top: 1px solid #bbb;
}
.fieldColourSliderLabel {
display: flex;
justify-content: space-between;
font: 12pt "Helvetica Neue", "Segoe UI", Helvetica, sans-serif;
}
.fieldColourEyedropper {
appearance: none;
position: relative;
border: none;
border-radius: 4px;
background: transparent;
font: inherit;
color: inherit;
cursor: pointer;
width: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
}
.fieldColourEyedropper:hover {
background: rgba(0,0,0,0.1)
}
.fieldColourEyedropper input {
opacity: 0;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.fieldColourEyedropper::before {
content: "Eyedropper";
}
.fieldColourEyedropper::after {
content: "";
margin-left: 8px;
width: 24px;
height: 24px;
background: currentColor;
pointer-events: none;
-webkit-mask-image: var(--customize-dial-symbol);
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-image: var(--customize-dial-symbol);
mask-repeat: no-repeat;
mask-position: center;
--customize-dial-symbol: url('data:image/svg+xml, &lt;svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 24 24"&gt; &lt;path stroke="black" strokewidth="1.414" fill="none" d="m 13 8 L 6 15 Q 3 18 2 21 Q 0 23 .5 23.5 Q 1 24 3 22 Q 6 21 9 18 L 16 11"/&gt; &lt;path fill="black" d="m 12 7 Q 11 6 12 5 Q 13 4 14 5 Q 15 6 16 5 Q 20 -1 22.5 1.5 Q 25 4 19 8 Q 18 9 19 10 Q 20 11 19 12 Q 18 13 17 12"/&gt; &lt;/svg&gt;');
}
.fieldColourSlider {
-webkit-appearance: none;
width: 150px;
height: 24px;
margin: 4px 8px 24px 8px;
padding: 0;
}
.fieldColourSlider:last-child {
margin-bottom: 4px;
}
.fieldColourSlider:focus {
outline: none;
}
/* Webkit */
.fieldColourSlider::-webkit-slider-runnable-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-webkit-slider-thumb {
-webkit-appearance: none;
background: #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
margin-top: -4px;
}
/* Firefox */
.fieldColourSlider::-moz-range-track {
background: var(--slider-track-background);
border-radius: 8px;
height: 16px;
}
.fieldColourSlider::-moz-range-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.fieldColourSlider::-moz-focus-outer {
/* override the focus border style */
border: 0;
}
/* IE */
.fieldColourSlider::-ms-track {
background: var(--slider-track-background);
border-radius: 12px;
width: 100%;
height: 24px;
/* remove default tick marks */
color: transparent;
}
.fieldColourSlider::-ms-fill-lower {
background: transparent;
}
.fieldColourSlider::-ms-fill-upper {
background: transparent;
}
.fieldColourSlider::-ms-thumb {
background: #fff;
border: none;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(0,0,0,.15);
cursor: pointer;
width: 24px;
height: 24px;
}
.blocklyMultiselect&gt;image, .blocklyMultiselect&gt;svg&gt;image {
opacity: .2;
}
.blocklyMultiselect&gt;image:hover, .blocklyMultiselect&gt;svg&gt;image:hover {
opacity: .4;
}
.blocklyMultiselect&gt;image:active, .blocklyMultiselect&gt;svg&gt;image:active {
opacity: .6;
}
.controlsIconStyleLightTheme {
opacity: 0.2;
}
.controlsIconStyleLightTheme:hover {
opacity: 0.4;
}
.controlsIconStyleLightTheme:active {
opacity: 0.6;
}
.controlsIconStyleDarkTheme {
opacity: 0.4;
filter: invert(1);
}
.controlsIconStyleDarkTheme:hover {
opacity: 0.6;
filter: invert(1);
}
.controlsIconStyleDarkTheme:active {
opacity: 0.8;
filter: invert(1);
}
</style><g transform="translate(1, 1)"><g data-id="jE:hVM(E/ajcpgEMKdHe" class="blocklyDraggable"><path class="blocklyPath" stroke="#009973" fill="#00cc99" d=" m 0,0 m 0,4 a 4 4 0 0,1 4,-4 h 5 c 1.6666666666666667,0 2.5,0.75 3.3333333333333335,1.5 l 3.3333333333333335,3 c 0.8333333333333334,0.75 1.6666666666666667,1.5 3.3333333333333335,1.5 h 10 c 1.6666666666666667,0 2.5,-0.75 3.3333333333333335,-1.5 l 3.3333333333333335,-3 c 0.8333333333333334,-0.75 1.6666666666666667,-1.5 3.3333333333333335,-1.5 h 232.171875 a 4 4 0 0,1 4,4 v 6 V 38 V 40 V 40 a 4 4 0 0,1 -4,4 h -232.171875 c -1.6666666666666667,0 -2.5,0.75 -3.3333333333333335,1.5 l -3.3333333333333335,3 c -0.8333333333333334,0.75 -1.6666666666666667,1.5 -3.3333333333333335,1.5 h -10 c -1.6666666666666667,0 -2.5,-0.75 -3.3333333333333335,-1.5 l -3.3333333333333335,-3 c -0.8333333333333334,-0.75 -1.6666666666666667,-1.5 -3.3333333333333335,-1.5 h -5 a 4 4 0 0,1 -4,-4 z&#10;"/><g data-id="6!To%0#{;-{cg,S1~}N_" transform="translate(216.4765625, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#fff" d=" m 16,0 h 18.6953125 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -18.6953125 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g class="blocklyEditableText" transform="translate(12,7)" style="cursor: text;"><rect rx="4" ry="4" x="0" y="0" height="18" width="26.6953125" class="blocklyFieldRect" stroke="#009973" style="display: none;"/><text class="blocklyText" dominant-baseline="central" x="0" y="9">123</text></g></g><g data-id="FKM?1B.YkeK*ES/=MMej" transform="translate(39.1171875, 6)" style="display: block;"><path class="blocklyPath" stroke="#009973" fill="#00ad82" d=" m 16,0 h 15.1171875 a 16 16 0 0,1 16,16 v 0 a 16 16 0 0,1 -16,16 V 32 h -15.1171875 a 16 16 0 0,1 -16,-16 v 0 a 16 16 0 0,1 16,-16 z&#10;"/><g transform="translate(12,7)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g></g><g transform="translate(8,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">list</text></g><g class="blocklyEditableText" transform="translate(94.234375,7.4)" style="cursor: default;"><rect rx="4" ry="4" x="0" y="0" height="29.2" width="91.140625" class="blocklyFieldRect blocklyDropdownRect" stroke="#009973" fill="transparent"/><text class="blocklyText blocklyDropdownText" dominant-baseline="central" text-anchor="start" x="8" y="14.6">set last</text><image style="display: none;"/><image height="12px" width="12px" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMi43MSIgaGVpZ2h0PSI4Ljc5IiB2aWV3Qm94PSIwIDAgMTIuNzEgOC43OSI+PHRpdGxlPmRyb3Bkb3duLWFycm93PC90aXRsZT48ZyBvcGFjaXR5PSIwLjEiPjxwYXRoIGQ9Ik0xMi43MSwyLjQ0QTIuNDEsMi40MSwwLDAsMSwxMiw0LjE2TDguMDgsOC4wOGEyLjQ1LDIuNDUsMCwwLDEtMy40NSwwTDAuNzIsNC4xNkEyLjQyLDIuNDIsMCwwLDEsMCwyLjQ0LDIuNDgsMi40OCwwLDAsMSwuNzEuNzFDMSwwLjQ3LDEuNDMsMCw2LjM2LDBTMTEuNzUsMC40NiwxMiwuNzFBMi40NCwyLjQ0LDAsMCwxLDEyLjcxLDIuNDRaIiBmaWxsPSIjMjMxZjIwIi8+PC9nPjxwYXRoIGQ9Ik02LjM2LDcuNzlhMS40MywxLjQzLDAsMCwxLTEtLjQyTDEuNDIsMy40NWExLjQ0LDEuNDQsMCwwLDEsMC0yYzAuNTYtLjU2LDkuMzEtMC41Niw5Ljg3LDBhMS40NCwxLjQ0LDAsMCwxLDAsMkw3LjM3LDcuMzdBMS40MywxLjQzLDAsMCwxLDYuMzYsNy43OVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=" transform="translate(71.140625,8.6)"/></g><g transform="translate(193.375,13)"><text class="blocklyText" dominant-baseline="central" x="0" y="9">to</text></g></g></g></svg>

After

Width:  |  Height:  |  Size: 24 KiB

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 34 KiB

After

Width:  |  Height:  |  Size: 34 KiB

+40 -2
View File
@@ -79,14 +79,52 @@ Sequences
.. pybricks-requirements::
.. blockimg:: pybricks_blockListCreate_list_empty
:stack:
.. blockimg:: pybricks_blockListCreate_list_3
:stack:
.. blockimg:: pybricks_blockListUnpack
:stack:
.. blockimg:: pybricks_lists_setIndex
.. blockimg:: pybricks_blockListGet_list_get_first
:stack:
.. blockimg:: pybricks_lists_getIndex
.. blockimg:: pybricks_blockListGet_list_get_index
:stack:
.. blockimg:: pybricks_blockListGet_list_get_last
:stack:
.. blockimg:: pybricks_blockListGet_list_get_random
:stack:
.. blockimg:: pybricks_blockListSet_list_insert_first
:stack:
.. blockimg:: pybricks_blockListSet_list_insert_index
:stack:
.. blockimg:: pybricks_blockListSet_list_insert_last
:stack:
.. blockimg:: pybricks_blockListSet_list_remove_first
:stack:
.. blockimg:: pybricks_blockListSet_list_remove_index
:stack:
.. blockimg:: pybricks_blockListSet_list_remove_last
:stack:
.. blockimg:: pybricks_blockListSet_list_set_first
:stack:
.. blockimg:: pybricks_blockListSet_list_set_index
:stack:
.. blockimg:: pybricks_blockListSet_list_set_last
:stack:
.. autoclass:: ubuiltins.list