pxt-core/theme/blockly-core.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

/* Import all components */

@import 'themes/default/globals/site.variables';
@import 'themes/pxt/globals/site.variables';
@import 'fieldeditors';
@import 'spriteeditor.less';
@import 'melodyeditor.less';

/*******************************
        Blockly SVG
*******************************/

svg.blocklySvg {
    background-color: var(--pxt-target-background1) !important;
    color: var(--pxt-target-foreground1) !important;
}

#maineditor, #blocksEditor > div.loading {
    background: var(--pxt-target-background1);
    color: var(--pxt-target-foreground1);
}

.blocksAndErrorList {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.blocksEditorOuter {
    position: relative;
    display: inline-block;
    overflow: hidden;
    height: 100%;
}

#blocksEditor {
    position: absolute;
    width: 100%;
    height: 100%;
    .injectionDiv svg {
        overflow: visible;
    }
    > div.loading {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
        opacity: 0.7;
    }
}

.blocklyMainBackground {
    stroke: none !important;
}

.rtl text.blocklyText {
    text-align: right;
}

body.blocklyMinimalBody {
    min-width: initial;
    overflow: initial;
    position: unset;
}

@supports (-ms-accelerator:true) {
    .rtl .blocklyPreview {
        right: 50%;
        left: auto;
    }
}

/*******************************
        Blockly Text
*******************************/

.pxt-renderer.classic-theme {
    text.blocklyFlyoutLabelText, .blocklyFlyoutButton text.blocklyText {
        font-family: @pageFont !important;
    }

    text.blocklyText.blocklyBoldText {
        font-weight: bold;
    }

    text.blocklyText.blocklyItalicizedText {
        font-style: italic;
    }

    text.blocklyText.blocklyBoldItalicizedText {
        font-weight: bold;
        font-style: italic;
    }

    text.blocklyText.blocklyBubbleText {
        fill: #fff;
    }

    .blocklyEditableText>text.semanticIcon, .blocklyNonEditableText>text.semanticIcon {
        fill: #fff;
        font-family: "Icons";
        font-size: 19px;
    }
    .blocklyEditableText>text.semanticIcon.inverted {
        fill: #000;
    }
}


/* Used by custom field in grey expression blocks */

.blocklyGreyExpressionBlockText {
    color: white;
}

/*******************************
        Blockly Toolbox
*******************************/

.blocklyTreeRowContentContainer {
    // pointEvents style required to work around non-null assertion operator in Blockly code.
    // See https://github.com/google/blockly/blob/develop/core/toolbox/toolbox.ts#L263
    pointer-events: none;
}

span.blocklyTreeIcon {
    visibility: visible;

    &.pxt-toolbox-icon {
        display: inline-block;
    }
}

i.icon.blocklyTreeButton {
    float: right;
    line-height: 40px;
    color: grey;
    opacity: 0;
    transition-property: opacity;
    transition-duration: .5s;
}

.blocklyTreeRow:hover i.icon.blocklyTreeButton {
    opacity: 1;
}

/*******************************
        Blockly Flyout
*******************************/

.blocklyFlyoutButton {
    fill: transparent !important;
}

.blocklyFlyoutButton:hover {
    fill: var(--pxt-primary-background) !important;
}

.blocklyFlyoutButtonBackground {
    stroke: var(--pxt-primary-background) !important;
    stroke-width: 3px !important;
}

.blocklyFlyoutButton .blocklyText {
    fill: var(--pxt-neutral-foreground3) !important;
}

.blocklyFlyoutButtonShadow {
    fill: none !important;
}

.blocklyFlyoutLabelText {
    fill: var(--pxt-neutral-foreground3) !important;
    font-size: 1rem;
}

.blocklyFlyoutHeading .blocklyFlyoutLabelText {
    fill: var(--pxt-neutral-foreground3) !important;
    font-size: 1.5rem;
}

.blocklyFlyoutLabelText:hover {
    fill: var(--pxt-neutral-foreground3) !important;
}

.blocklyFlyoutLabelIcon {
    font-family: 'Icons';
    font-size: 1.5rem;
}

line.blocklyFlyoutLine {
    stroke: var(--pxt-neutral-foreground3);
}


/* Opacity of blockly flyout background */
path.blocklyFlyoutBackground {
    fill: var(--pxt-neutral-background3) !important;
    fill-opacity: @blocklyFlyoutColorOpacity !important;
}


/*******************************
        Field divs
*******************************/

div.blocklyWidgetDiv {
    position: fixed;
    /* Lower Z index for BlocklyWidgetDiv and grid picker tooltips */
    z-index: @blocklyWidgetDivZIndex;
    &:focus-visible {
        outline: none;
    }
}

div.blocklyWidgetDiv.functioneditor {
    /* The Blockly widget should appear above the function editor  */
    z-index: @blocklyWidgetDivFunctionEditorZIndex;
}

div.blocklyDropDownDiv {
    z-index: @blocklyDropdownDivZIndex;
    overflow: hidden;
    &:focus-visible {
        outline: none;
    }
}

div.blocklyTooltipDiv {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    opacity: 1 !important;
    /* wrap the JS text inside a blockly Tooltip */
    overflow-wrap: break-word;
}

div.blocklyTooltipDiv .ui.card .content .description {
    /* override semantic, tooltip text should always be visible*/
    display: inline;
}

/* Blockly Slider field */

.blocklyWidgetDiv .goog-slider-horizontal {
    background: white;
    border: 2px solid black;
    border-radius: 5px;
}


/* (microbit only) This is to ensure the leds inside showLeds fill the entire checkbox */

text.blocklyCheckbox {
    fill: #ff3030 !important;
    text-shadow: 0px 0px 6px #f00;
    font-size: 17pt !important;
}

/* (arcade only) Sets the correct background color for the sprite image field */
.pxt-renderer.classic-theme {
    .blocklyNonEditableText > rect.blocklySpriteField,
    .blocklyNonEditableText > rect.blocklyAnimationField,
    .blocklyNonEditableText > rect.blocklyTilemapField,
    .blocklyEditableField > rect.blocklySpriteField,
    .blocklyEditableText > rect.blocklySpriteField,
    .blocklyEditableText > rect.blocklyAnimationField,
    .blocklyEditableText > rect.blocklyTilemapField {
        fill: #dedede;
        stroke: #898989;
        stroke-width: 1;
    }

}

/*******************************
        Blocks
*******************************/


/* Transulcent blocks when dragging */

.blocklyDragging>.blocklyPath {
    fill-opacity: 0.7;
}


/* Fade out disabled blocks, but don't completely lose the colour */

.blocklyDisabled > .blocklyPathDark {
    display: block !important;
    fill-opacity: 0.5;
}


.blocklyDisabled {
    .blocklyNonEditableText .blocklyBlockBackground {
        fill-opacity: 0.1 !important;
    }
}

/* Keyboard navigation plugin styles */

.passiveBlockFocus.blocklyPath {
    stroke-dasharray: 5 3;
    stroke-width: 3;
    stroke: #ffa200;
}

.passiveNextIndicator {
    stroke: #ffa200;
    fill: #ffa200;
 }

.inputActiveFocus {
    stroke-width: 3;
    stroke: #ffa200;
}

/*******************************
        Scrollbars
*******************************/

.blocklyScrollbarBackground {
    fill: none;
}

.blocklyScrollbarHandle {
    fill: var(--pxt-target-stencil1);
    opacity: @blocklyScrollbarOpacity;
}

.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, .blocklyScrollbarHandle:hover, .blocklyScrollbarBackground:active+.blocklyScrollbarHandle, .blocklyScrollbarHandle:active {
    stroke-width: 3;
    stroke: var(--pxt-target-stencil1);
}

/*******************************
        Context menu
*******************************/

.blocklyWidgetDiv .blocklyContextMenu {
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    border: 1px solid var(--pxt-neutral-stencil1);
    box-shadow: 0 1px 2px 0 var(--pxt-neutral-alpha20) !important;
    padding: 0 !important;
}

.blocklyWidgetDiv .blocklyContextMenu .blocklyMenuItem {
    margin: 0 !important;
    padding: .92857143em 1.14285714em !important;
    font: normal 13px @pageFont !important;
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);

    &.blocklyMenuItemDisabled {
        color: var(--pxt-neutral-alpha20);
    }
}

.blocklyWidgetDiv .blocklyContextMenu .blocklyMenuItem.blocklyMenuItemHighlight,
.blocklyWidgetDiv .blocklyContextMenu .gridpicker-menuitem-hover {
    border: none !important;
    padding: .92857143em 1.14285714em !important;
    background: var(--pxt-neutral-background1-hover) !important;
    color: var(--pxt-neutral-foreground1-hover);
}

/*******************************
        Comments
*******************************/

.blocklyDeleteIcon {
    display: block;
}

.blocklyComment .blocklyTextarea {
    border: none;
    color: #575E75;
}

/*******************************
        Workspace Search
*******************************/

.blockly-ws-searching {
    path.blocklyPath:not(.blockly-ws-search-highlight-pxt) {
        opacity: 0.6;
    }

    path.blocklyPath.blockly-ws-search-highlight-pxt.blockly-ws-search-current {
        stroke: #FFF200;
        stroke-width: 4px;
        transition: none;
    }
}

/*******************************
        Media Adjustments
*******************************/


/* Mobile */

@media only screen and (max-width: @largestMobileScreen) {
    text.blocklyCheckbox {
        font-size: 17pt !important;
    }
}

/*******************************
        Focus styles
*******************************/


.injectionDiv {
    --blockly-active-node-color: #fff200;
    --blockly-active-tree-color: var(--pxt-target-foreground1);
    /* Comments are yellow default highlight is orange */
    --blockly-active-workspace-comment-color: var(--pxt-target-foreground1);
    --blockly-selection-width: 3px;
}

// Avoid focus outlines when not using the keyboard navigation plugin.
div.blocklyTreeRoot > div[role="tree"]:focus-visible {
    outline: none;
}

.blocklyKeyboardNavigation div.blocklyTreeRoot > div[role="tree"]:focus-visible {
    outline: var(--blockly-selection-width) solid var(--blockly-active-tree-color);
    outline-offset: calc(var(--blockly-selection-width) * -1);
}

/* Blocks, connections and fields. */
.blocklyKeyboardNavigation
.blocklyActiveFocus.blocklyField
> .blocklyFieldRect.blocklySpriteField,
.blocklyKeyboardNavigation
.blocklyActiveFocus.blocklyIconGroup
> :is(.blocklyBreakpointSymbol) {
    stroke: var(--blockly-active-node-color);
    stroke-width: var(--blockly-selection-width);
}
.blocklyKeyboardNavigation
.blocklyPassiveFocus.blocklyField
> .blocklyFieldRect.blocklySpriteField,
.blocklyKeyboardNavigation
.blocklyPassiveFocus.blocklyIconGroup
> :is(.blocklyBreakpointSymbol) {
    stroke: var(--blockly-active-node-color);
    stroke-dasharray: 5px 3px;
    stroke-width: var(--blockly-selection-width);
}
.blocklyKeyboardNavigation .blocklyIconGroup:is(.blocklyActiveFocus, .blocklyPassiveFocus) {
    // Unless you hover the icon group has opacity 0.6 which makes
    // the focus indicator unclear.
    opacity: 1;
}

/* Toolbox and flyout. */
.blocklyKeyboardNavigation .injectionDiv .blocklyToolbox:has(.blocklyActiveFocus) {
    outline: none;
}

/* Flyout buttons and labels */
.blocklyKeyboardNavigation .blocklyFlyout .blocklyFlyoutLabel.blocklyActiveFocus,
.blocklyKeyboardNavigation .blocklyFlyout .blocklyFlyoutButton.blocklyActiveFocus {
    outline: none;
}

/* Use the backgrounds because the group can't have an outline on Safari */
.blocklyKeyboardNavigation .blocklyFlyout .blocklyFlyoutLabel.blocklyActiveFocus > .blocklyFlyoutLabelBackground,
.blocklyKeyboardNavigation .blocklyFlyout .blocklyFlyoutButton.blocklyActiveFocus > .blocklyFlyoutButtonBackground {
    outline-offset: 2px;
    outline: var(--blockly-selection-width) solid
        var(--blockly-active-node-color);
    border-radius: 2px;
}
.blocklyKeyboardNavigation .blocklyFlyout .blocklyFlyoutLabel.blocklyActiveFocus > .blocklyFlyoutLabelBackground {
    // Swap opacity for transparent fill so we can see the focus indicator.
    opacity: 1;
    fill: transparent;
}

// Image fields e.g. +/- buttons. Needs to be the image for Safari but Chrome has the group by default.
.blocklyKeyboardNavigation .blocklyImageField:focus-visible {
    outline: none;
}
.blocklyKeyboardNavigation .blocklyImageField:is(.blocklyActiveFocus, .blocklyPassiveFocus) > image {
    outline: var(--blockly-selection-width) solid
        var(--blockly-active-node-color);
    border-radius: 2px;
    outline-offset: 2px;
}
.blocklyKeyboardNavigation .blocklyImageField.blocklyPassiveFocus > image {
    outline-style: dashed;
}

/* Workspace comments */
.blocklyKeyboardNavigation .blocklyComment.blocklyActiveFocus .blocklyCommentHighlight {
    /* Different colour for contrast */
    stroke: var(--blockly-active-workspace-comment-color);
    stroke-width: 4px;
}
.blocklyCommentTopbar .blocklyActiveFocus {
    outline: 2px solid var(--blockly-active-workspace-comment-color);
    border-radius: 2px;
    outline-offset: -1px;
}