pxt-core-own/theme/blockly-core.less

Microsoft MakeCode, also known as Programming Experience Toolkit (PXT), provides Blocks / JavaScript tools and editors

/* Import all components */

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

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

svg.blocklySvg {
    background-color: @blocklySvgColor !important;
}

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

#blocksEditor {
    position: absolute;
    .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
*******************************/

text.blocklyText, input.blocklyHtmlInput, .blocklyDropDownDiv .goog-menuitem, textarea.blocklyCommentTextarea {
    font-family: @blocklyFont !important;
    font-weight: normal;
}

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


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

.blocklyGreyExpressionBlockText {
    color: white;
}


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

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


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


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


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

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


/* Mobile */

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