pxt-core-own/theme/highcontrast.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';

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

/*******************************
        High Contrast
*******************************/

@selected: #10C8CD;
@disabled: #3ff23f;
@hcYellow: yellow;

/* Messages */
#msg .hc {
    background-color: black !important;
    border: 1px solid white !important;
    border-radius: 0em;
    color: white !important;
}

@HCRootBackground: black;
@HCblocklySvgColor: black;
@HCsimulatorBackground: black;
@HCblocklySvgColor: black;

@HCmainMenuBackground: white;
@HCmainMenuTextColor: black;
@HCmainMenuInverseTextColor: white;

@HCblocklyToolboxColor: white;
@HCblocklyTreeLabelColor: black;
@HCblocklyTreeLabelSelectedColor: white;

@HCeditorToolsBackground: black;

@HCbuttonBackground: white;
@HCbuttonTextColor: black;

@HChomeScreenBackground: black;

@HCaccessibleMenuBackground: black;
@HCaccessibleMenuColor: white;

.hc {

    /* Focus */

    *[tabindex='0']:focus,
    *[tabindex*='d1']:focus,
    *[tabindex*='d2']:focus, /* Takes items with a defined tabIndex from 0 to 29. */
    *[role='menuitem']:focus,
    a:not([tabindex='-1']):focus,
    input:not([tabindex='-1']):focus,
    button:not([tabindex='-1']):focus {
        outline: 2px solid @selected !important;
    }

    @media all and (pointer:coarse) { /* If touch screen */
        *[tabindex='0']:focus,
        *[tabindex*='d1']:focus,
        *[tabindex*='d2']:focus,
        *[role='menuitem']:focus,
        a:not([tabindex='-1']):focus,
        input:not([tabindex='-1']):focus,
        button:not([tabindex='-1']):focus {
            outline: 1px solid transparent !important;
        }
    }

    .blocklyWidgetDiv *:focus,
    .blocklySVG *:focus,
    .monaco-editor *:focus,
    #monacoEditor *:focus {
        outline: none !important;
    }

    .blocklyTreeRoot:focus {
        outline: none !important;
    }

    /* Blockly toolbox */
    .pxtToolbox:not(.invertedToolbox) {
        span.blocklyTreeLabel {
            color: @HCblocklyTreeLabelColor;
        }
        .blocklyTreeSelected span.blocklyTreeLabel {
            color: @HCblocklyTreeLabelSelectedColor;
        }
    }

    /* Blockly flyout */
    path.blocklyFlyoutBackground {
        fill: @HCblocklySvgColor !important;
        fill-opacity: 1 !important;
        stroke-width: 4px;
        stroke: white;
    }
    .monacoFlyout {
        background: @HCblocklySvgColor !important;
        border-right: 4px solid white !important;
    }

    /* Main editor areas */

    #root {
        background: @HCRootBackground !important;
    }
    #filelist {
        background: @HCsimulatorBackground !important;

        #boardview {
            background: @HCsimulatorBackground !important;
        }
    }
    svg.blocklySvg {
        background-color: @HCblocklySvgColor !important;
    }

    .blocklyMainBackground {
        fill: transparent !important;
    }

    .blocklyToolboxDiv, .monacoToolboxDiv {
        background: @HCblocklyToolboxColor !important;
        border-right: 0px !important;
    }
    .blocklyPath {
        stroke-width: 3px;
    }

    /* Menu bar */
    .menubar .menu > .item:focus > i,
    .menubar .menu > .item:focus > span {
        color: @selected !important;
    }

    #mainmenu:not(.inverted), #homemenu:not(.inverted) {
        background-color: @HCmainMenuBackground !important;
        color: @HCmainMenuTextColor !important;
        border-bottom: 4px solid white;

        .ui.item {
            color: @HCmainMenuTextColor;
        }
        .item.editor-menuitem .ui.grid {
            border: 1px solid black !important;
        }
    }
    #mainmenu.inverted, #homemenu.inverted {
        background-color: @HCmainMenuTextColor !important;
        color: @HCmainMenuBackground !important;
        border-bottom: 4px solid white;

        .ui.item {
            color: @HCmainMenuBackground;
        }
        .item.editor-menuitem .ui.grid {
            border: 1px solid white !important;
        }
    }

    /* Editor switch toggle */
    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
        background: black !important;
        .item:not(.active) {
            opacity: 1 !important;
            color: @HCmainMenuInverseTextColor !important;
        }
        .item.active {
            background: white !important;
            color: @HCmainMenuTextColor !important;
        }
    }

    /* Editor toolbar */
    #editortools, #downloadArea {
        background: @HCeditorToolsBackground !important;
    }
    #editortools {
        border-top: 4px solid white;
    }

    /* Buttons */
    .ui.button {
        background: @HCbuttonBackground !important;
        color: @HCbuttonTextColor !important;
        border: 1px solid @HCbuttonTextColor !important;

        &:focus {
            color: @selected !important;
            border-color: @selected !important;

            i, span {
                color: @selected !important;
            }
        }

        .inverted.icon {
            color: @HCbuttonTextColor !important;
        }
    }

    .ui.button.disabled {
        opacity: 1 !important;
        border: 1px solid @disabled !important;

        i, span {
            color: @disabled !important;
        }
    }

    /* Inputs */
    .ui.input input {
        background: white !important;
        color: black !important;
        border: 1px solid black !important;
    }
    input::placeholder {
        color: @selected !important;
    }

    /* Home screen */
    .projectsdialog, .projectsdialog .tabsegment {
        background: @HChomeScreenBackground !important;
        color: white !important;
        border-color: white !important;

        .header {
            opacity: 1 !important;
            color: white;
        }

        .homefooter a {
            color: white !important
        }
    }

    /* Cards */
    .card {
        background: black !important;
        border: 2px solid white !important;
        border-radius: initial !important;
        box-shadow: initial !important;

        .header, .description, .meta {
            color: white !important;
        }

        &:hover {
            .header, .description, .meta {
                color: @hcYellow !important;
            }
        }

        &:focus {
            .header, .description, .meta {
                color: @selected !important;
            }
        }

        .ui.orange.labels .label, .ui.orange.label {
            background: @disabled !important;
            border-color: @disabled !important;
            color: black !important;
        }
    }

    /* File menu */
    .filemenu {
        .item, .ui.button {
            background: black !important;
            color: white !important;
            border: 1px solid white !important;
        }
        .item:focus, .item.active {
            background: @selected !important;

            span {
                color: black !important;
            }
        }
    }

    /* PxtJson */
    #maineditor {
        border-left: 1px solid white !important;
    }

    /* Serial editor */

    #serialPreview div {
        color: white;
    }

    #serialCharts .ui.segment {
        background-color: #fff;
    }

    #serialEditor {
        background-color: #000;
    }

    #serialHeader .ui.header {
        color: black;
    }

    #serialConsole {
        background-color: #000;
        color: #fff;
        border-color: #fff;
    }

    #serialPreview .label {
        border: 10px solid #fff !important;
        &:hover {
            border-color: darken(#fff, 10.0) !important;
        }
    }

    .ui.button.labeled.icon.editorBack {
        background: white !important;
    }

    /* Hyperlinks */
    a {
        color: @selected !important;
    }

    #sidedocsbar {
        a {
            color: black !important;

            &:focus {
                color: @selected !important;

                i, span {
                    color: @selected !important;
                }
            }
        }
    }

    /* Dropdown */
    .ui.menu .ui.dropdown .menu {
        border: 1px solid white !important;
    }

    .ui.menu .ui.dropdown .menu, .ui.menu .ui.dropdown .menu > .item {
        background: white !important;
        color: black !important;

        &:focus {
            color: @selected !important;
            font-weight: normal !important;

            i, span {
                color: @selected !important;
                font-weight: normal !important;
            }
        }
    }

    .ui.menu .ui.dropdown .menu > .divider {
        background: black !important;
        border-top: 1px solid white !important;
    }

    /* Tab list in Modals*/
    .ui.secondary.menu > .item:not(.active), .ui.secondary.pointing.menu > .item:not(.active), .ui.secondary.inverted.menu .link.item:not(.active) {
        color: black !important;
        border: 1px solid white !important;
    }

    .ui.secondary.menu > .item.active, .ui.secondary.menu > .item.active:hover,
    .ui.secondary.pointing.menu > .item.active, .ui.secondary.pointing.menu > .item.active:hover {
        color: @selected !important;
        border: 2px solid @selected !important;
        border-radius: initial !important;
        box-shadow: initial !important;
    }

    /* Tutorial */
    .ui.message {
        background-color: black !important;
        color: white !important;

        .tutorialmessage {
            outline: 1px solid white !important;
            border: none !important;

            &:focus {
                color: @selected !important;
            }
        }
    }

    .ui.label {
        background-color: black !important;
        border: 2px solid white !important;
    }

    .ui.blue.labels .label, .ui.blue.label {
        background-color: @selected !important;
        border-color: @selected !important;
    }


    /* Modals */
    .ui.modal {
        border: 2px solid black !important;
        border-radius: initial !important;
        box-shadow: initial !important;

        > .closeIcon .close {
            color: black !important;
        }
    }

    .ui.modal, .ui.modal > .header, .ui.modal > .content, .ui.modal > .actions, .ui.modal > .segment {
        background: white !important;
        color: black !important;
    }

    /* Accessible menu */
    .ui.menu.accessibleMenu, #accessibleMenu {
        .ui.item.link {
            color: @HCaccessibleMenuColor !important;
            background: @HCaccessibleMenuBackground !important;
        }
    }
}

/* > Small Monitor */
@media only screen and (min-width: @computerBreakpoint) {
    /* Hide the editor toolbor in tutorial mode */
    .hc.tutorial #editortools  {
        background: transparent !important;
        border-top: 0px;
    }
}