pxt-core/theme/monaco.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 'spriteeditor.less';
@import 'melodyeditor.less';

/* Reference import */
@import (reference) "semantic.less";

/*******************************
        Monaco Area Layout
*******************************/
.monacoEditorArea {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}

.monacoToolboxDiv {
    height: 100%;
}

.monacoEditorRightArea {
    display: flex;
    flex-direction: column;
    height: 100%;
}


/*******************************
        Monaco Editor
*******************************/

.monaco-editor {
    background-color: var(--pxt-target-background1) !important;
    color: var(--pxt-target-foreground1) !important;

    .monaco-editor-background, .margin {
        background-color: var(--pxt-target-background1) !important;
        color: var(--pxt-target-foreground1) !important;
    }
}

.monaco-editor .monaco-scrollable-element.editor-scrollable {
    margin-left: .5rem;
}

/* Monaco Editor Line number colors, changed from the default light theme */
.monaco-editor.vs .line-numbers {
    color: var(--pxt-target-foreground1) !important;
}

/* Monaco Editor Line number background, changed from the default light theme */
.monaco-editor.vs .margin-view-overlays.monaco-editor-background {
    background: var(--pxt-neutral-alpha10) !important;
}

/* Monaco Editor Current line highlighting, only needed for the light theme */
.monaco-editor.vs .current-line {
	background: var(--pxt-colors-blue-alpha10) !important;
}

/* Monaco Editor Suggest Widget, styling */
.monaco-editor .suggest-widget {
    border-radius:5px;
    z-index: @monacoSuggestZIndex !important;
}
.monaco-list-row.focused {
    background-color: var(--pxt-colors-blue-background) !important;
    color: var(--pxt-colors-blue-foreground) !important;
    a {
        color: var(--pxt-colors-blue-foreground) !important;
    }
}
.monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row .monaco-highlighted-label .highlight {
    color: var(--pxt-colors-blue-background) !important;
}
.monaco-editor.vs .suggest-widget:not(.frozen) .monaco-list .monaco-list-row.focused .monaco-highlighted-label .highlight {
    color: var(--pxt-colors-blue-foreground) !important;
}
.monaco-editor.vs .suggest-widget .details > .monaco-scrollable-element > .body > .type, .monaco-editor .suggest-widget .monaco-list .monaco-list-row .type-label {
    color: var(--pxt-colors-orange-background) !important;
}

/* Monaco Editor Rename Widget: default positioning causes scroll with transparent editor toolbar, so we reposition */
.monaco-editor .rename-box {
    bottom: 3rem;
}

/* The view lines in the monaco editor sometimes ignore the editor width and cause a scrollbar to appear */
.monaco-editor.vs {
    overflow: hidden;
}

/* Monaco Editor Main tokens */
.monaco-editor .highlight-statement {
    background-color: var(--pxt-target-background1-hover);
    color: var(--pxt-target-foreground1-hover) !important;
}

/* Monaco Toolbox */
.monacoToolboxDiv {
    z-index: @blocklyToolboxZIndex;
}
// Hover elements
.monaco-editor-hover {
    z-index: @menuBarZIndex+1 !important;
}

/*
 * Monaco drops this in the bottom right by default,
 * but we end up using that position for simulator / toolbar depending on view.
 */
.monaco-editor .iPadShowKeyboard {
    top: 0 !important;
}

@keyframes bobbing {
    0% {
        transform: translateY(0px);
    }

    25% {
        transform: translateY(3px);
    }

    75% {
        transform: translateY(-3px);
    }

    100% {
        transform: translateY(0px);
    }
}

.pxt-monaco-glyph-highlight {
    animation: bobbing 1s linear infinite;
}


/*******************************
     Monaco Flyout
*******************************/

.monacoFlyout {
    font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", source-code-pro, monospace;
    background: var(--pxt-neutral-background3);
    color: var(--pxt-neutral-foreground3);
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    z-index: @monacoFlyoutZIndex;
    position: absolute;
    top: 0px;
    bottom: 0px;

    .monacoFlyoutLabel {
        vertical-align: middle;
        -moz-user-select: none;
        -ms-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        color: var(--pxt-neutral-foreground3);
        font-size: 15px;

        &:focus-visible {
            border-color: var(--pxt-neutral-stencil3);
            border-width: 4px 0px 4px 4px;
            border-style: solid;
            outline: none;
        }
        .monacoFlyoutHeadingIcon {
            display: inline-block;
        }
        .monacoFlyoutLabelText {
            display: inline-block;
            font-size: 1.5rem;
            line-height: 1.5rem;
            font-family: @pageFont;
            vertical-align: middle;
        }
    }
    .monacoBlock {
        color: var(--pxt-neutral-foreground3);
        border-bottom: 1px solid var(--pxt-neutral-stencil3);

        .monacoDraggableBlock {
            width: 100%;
            margin-bottom: 0.75rem;
            border-radius: 0.25rem;
            color: var(--pxt-neutral-foreground3);
            padding: .25rem 0.75rem;
            cursor: pointer;
            display: inline-block;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            position: relative;
            font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", source-code-pro, monospace;

            span {
                word-wrap: break-word;
            }

            span.sig {
                opacity: 0.6;
                margin-left: 10px;
            }

            span.sigPrefix {
                opacity: 0.6;
            }

            span.docs {
                display: block; /* enable as needed */
                color: var(--pxt-neutral-foreground3);
                font-size: 70%;
                max-width: 22rem;
            }
        }

        .separator {
            border-top: 1px solid;
            margin: 0.25rem 0;
        }

        .monacoDraggableBlock {
            font-family: @pageFont;
            width: auto;
        }
        .description {
            font-family: @pageFont;
        }
        .signature {
            margin-top: 0.5rem;
            font-weight: 600;

            span {
                display: inline-block;
                width: calc(~'100% - 1.75rem');
                word-wrap: break-word;
            }

            .blockHelp {
                float: right;
                color: var(--pxt-neutral-foreground3);

                i {
                    font-size: 1.25rem;
                }
            }
            .blockHelp:hover {
                text-decoration: none;
            }
        }
        .argName {
            font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", source-code-pro, monospace;
            font-weight: 600;
            background: var(--pxt-neutral-alpha20);
            color: var(--pxt-neutral-foreground3);
            padding: 0 .5rem;
            display: inline-block;
            border-radius: 0.8rem;
            line-height: 1.75rem;
        }

        .paramName {
            font-weight: 800;
        }
        .paramDescription:before {
            content: '-';
            margin: 0.5rem;
            font-family: @pageFont;
        }
        .paramDescription {
            font-family: @pageFont;
        }

        .detail .params,
        .signature {
            display: none;
        }
        &.expand {
            color: var(--pxt-neutral-foreground3);
            border-color: var(--pxt-neutral-stencil3);
            border-width: 4px 0px 4px 4px;
            border-style: solid;
            cursor: grab;
            outline: none;

            .blockHandle,
            .detail .params,
            .signature {
                display: block;
            }

            .blockHandle {
                border-color: var(--pxt-neutral-foreground3);
                border-width: 4px 4px 4px 0px;
                border-style: solid;
            }
        }
        &.hover {
            cursor: grab;
            .blockHandle {
                display: block;
            }
        }

        .blockHandle {
            display: none;
            position: absolute;
            width: 2rem;
            right: -0.9rem;
            border-radius: 0 1rem 1rem 0;
            background: var(--pxt-neutral-background3-alpha90);
            color: var(--pxt-neutral-foreground3);

            i.bars {
                display: block;
                position: relative;
                top: calc(~'50% - 0.75rem');
                transform: rotate(90deg);
                font-size: 1.5rem;
            }
        }
    }
    .monacoBlock:not(.expand) {
        background-color: transparent!important;
    }
}

#monacoFlyoutWrapper {
    overflow-x: visible;
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;

    & > div {
        padding: 1rem;
        max-width: 350px;
    }
}

.monacoFlyoutHeading .monacoFlyoutHeadingText {
    color: var(--pxt-neutral-foreground3);
    vertical-align: middle !important;
}
.monacoFlyoutHeadingText {
    font-family: @pageFont;
}
.monacoFlyoutHeadingIcon {
    font-size: 1.5rem !important;
    vertical-align: middle !important;
}
.monacoFlyoutLabelLine {
    border: none;
    border-top: 1px dotted var(--pxt-neutral-stencil3);
    height:1px;
}

#monacoDraggingBlock {
    position: absolute;
    padding: 0.6rem;
    color: var(--pxt-neutral-foreground3);
    border-radius: 0.25rem;
    pointer-events: none;
    touch-action: none;
    font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", source-code-pro, monospace;
    white-space: nowrap;
}

/* Limit color interferences with semantic anchor element */
.monaco-action-bar .action-label {
    color: inherit !important;
}

/*******************************
    (Do not override)
*******************************/

/* Monaco Editor Errors */
.monaco-editor .error-view-zone {
    font-family: Consolas, Monaco, Menlo, "Ubuntu Mono", source-code-pro, monospace;
    width: initial !important;
}
.monaco-editor.vs-dark .error-view-zone {
    color: var(--pxt-neutral-foreground3);
}
.monaco-editor .error-view-zone .marker-widget {
    border-radius: 2px !important;
    padding-left: 10px !important;
    padding-right: 20px !important;
}

/* Fix for monaco editor Signature bug in Safari */
.monaco-editor .parameter-hints-widget {
    flex-direction: row !important;
    z-index: @monacoHintsZIndex !important;
}

.line-numbers {
    display:none;
}

.monacoToolboxDiv {
    display: inline-block;
    overflow-x: visible;
    overflow-y: auto;
    vertical-align: top;
}
.monacoToolboxDiv.hide {
    display: none;
}

#monacoEditorInner {
    position: relative !important;
    display: inline-block;
    overflow: hidden;
}

/*******************************
        Monaco Accessibility
*******************************/

.monacoDraggableBlock:focus {
    outline: none; /* We highlight the focused item in the toolbox, no need to outline */
}

.monaco-field-editor-frame {
    padding: 4px;
    position: relative;
}

.pxt-view-zone {
    width: 100%;
    z-index: calc(@monacoFlyoutZIndex - 1);
}