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: @blocklySvgColor !important;
}

#maineditor, #blocksEditor > div.loading {
    background: @blocklySvgColor;
}

.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;
}

@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
*******************************/

.blocklyTreeIcon {
    visibility: visible;
}

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: @blocklyFlyoutButtonColor !important;
}

.blocklyFlyoutButtonBackground {
    stroke: @blocklyFlyoutButtonColor !important;
    stroke-width: 3px !important;
}

.blocklyFlyoutButton .blocklyText {
    fill: white !important;
}

.blocklyFlyoutButtonShadow {
    fill: none !important;
}

.blocklyFlyoutLabelText {
    fill: @flyoutLabelColor !important;
    font-size: 1rem;
}

.blocklyFlyoutHeading .blocklyFlyoutLabelText {
    fill: @flyoutLabelColor !important;
    font-size: 1.5rem;
}

.blocklyFlyoutLabelText:hover {
    fill: @flyoutLabelColor !important;
}

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

line.blocklyFlyoutLine {
    stroke: @flyoutLabelColor;
}


/* Opacity of blockly flyout background */
path.blocklyFlyoutBackground {
    fill: @blocklyFlyoutColor !important;
    fill-opacity: @blocklyFlyoutColorOpacity !important;
}


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

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

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

div.blocklyDropDownDiv {
    z-index: @blocklyDropdownDivZIndex;
    overflow: hidden;
}

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,
    .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;
    }
}

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

.blocklyScrollbarBackground {
    fill: @blocklyScrollbarBackgroundColor;
}

.blocklyScrollbarHandle {
    fill: @blocklyScrollbarColor;
    opacity: @blocklyScrollbarOpacity;
}

.blocklyScrollbarBackground:hover+.blocklyScrollbarHandle, .blocklyScrollbarHandle:hover, .blocklyScrollbarBackground:active+.blocklyScrollbarHandle, .blocklyScrollbarHandle:active {
    stroke-width: 3;
    stroke: @blocklyScrollbarColor;
}

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

.blocklyWidgetDiv .blocklyContextMenu {
    border: 1px solid rgba(34,36,38,.15);
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15) !important;
    padding: 0 !important;
}

.blocklyWidgetDiv .blocklyContextMenu .goog-menuitem {
    margin: 0 !important;
    padding: .92857143em 1.14285714em !important;
    font: normal 13px @pageFont !important;
}

.blocklyWidgetDiv .blocklyContextMenu .goog-menuitem-highlight, .blocklyWidgetDiv .blocklyContextMenu .goog-menuitem-hover {
    border: none !important;
    padding: .92857143em 1.14285714em !important;
    background: rgba(0,0,0,.05) !important;
}

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

.blocklyCommentForeignObject {
    overflow: hidden;
}

.blocklyMinimalBody {
    position: static; // override default 'position: fixed' for comment <body> element
    border: 1px solid #FAF6BD; // match comment color
}

/*******************************
        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;
    }
}