pxt-core/theme/color-themes/overrides/high-contrast-overrides.css

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.common-button {
    color: var(--pxt-neutral-foreground2) !important;
    background-color: var(--pxt-neutral-background2) !important;
    border-color: var(--pxt-neutral-foreground2) !important;
}

.common-button:hover, .common-button:focus {
    outline: 2px solid var(--pxt-colors-yellow-background) !important;
    z-index: 1;
}

.common-button.home-share-button {
    border: 1px solid var(--pxt-neutral-foreground2) !important;
}

/*
Override default button background for the area menu, which requires transparency,
but still use a fairly opaque one to keep focus/visibility on the main buttons.
*/
.area-menu-container .area-button {
    background-color: var(--pxt-neutral-alpha80) !important;
}

/*
 * "User-provided content" header in the import modal.
 */
.ui.violet.message .header {
    color: var(--pxt-colors-purple-background) !important;
}

/*
 * Checkbox styles
 * In HC the neutral and primary colors are the same, so we need to differentiate with
 * a different background color when checked.
 */
.common-checkbox.toggle input:checked~label:before,
div.field .ui.toggle.checkbox input:checked~label:before {
    background-color: var(--pxt-colors-purple-background) !important;
}

.common-checkbox-icon.checked {
    background-color: var(--pxt-colors-purple-background);
    color: var(--pxt-colors-purple-foreground);
    border-color: var(--pxt-colors-purple-hover);
}

.common-checkbox-icon.checked i.fas.fa-check {
    color: var(--pxt-colors-purple-foreground);
}

/*
 * Make toggle "handle" more visible for HC
 */
.common-checkbox.toggle label:after {
    background-color: var(--pxt-neutral-foreground1) !important;
}

/*
 * Selection highlights
 */

.blocklyContextMenu {
    border: 3px solid var(--pxt-colors-yellow-background) !important;
}

.blocklyWidgetDiv .blocklyMenu.blocklyContextMenu .blocklyMenuItem.blocklyMenuItemHighlight {
    border: 3px solid var(--pxt-colors-yellow-background) !important;
}

/*
 * Toolbox
 */
.blocklyTreeRow:hover {
    outline: 3px solid var(--pxt-colors-yellow-background) !important;
}

#blocklySearchInput i {
    color: var(--pxt-neutral-foreground1);
    opacity: 1;
}

/*
 * Inverted image colors
 */
.barcharticon,
.blockly-ws-search-next-btn,
.blockly-ws-search-previous-btn,
.blockly-ws-search-close-btn {
    filter: invert(1);
}

/* Sim toolbar */
#simulator .editor-sidebar .simtoolbar .debug-button.active,
#simulator .editor-sidebar .simtoolbar .debug-button.active:hover {
    /* Make active state more apparent with a yellow border */
    color: var(--pxt-neutral-foreground2) !important;
    background: var(--pxt-neutral-background2) !important;
    border: 3px solid var(--pxt-colors-yellow-background) !important;
}

/* Image Editor */
.image-editor-topbar, .image-editor-bottombar, .image-editor-sidebar {
    background: var(--pxt-neutral-background1) !important;
}
.image-editor-tool-buttons {
    background: none !important;
}
.image-editor-button,
.image-editor-input,
.image-editor-confirm {
    border: 1px solid var(--pxt-neutral-foreground1);
}
.image-editor-canvas, .image-editor-canvas:hover, .image-editor-canvas:focus {
    outline: none !important;
}
.cursor-button {
    /* remove margin since we now have a border around the cursor buttons and it looks better centered */
    margin-right: 0;
}

/* Toolbox */
.pxtToolbox:not(.invertedToolbox) span.blocklyTreeLabel {
    color: var(--pxt-target-foreground3);
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeSelected span.blocklyTreeLabel,
.pxtToolbox:not(.invertedToolbox) .blocklyTreeSelected span.blocklyTreeIcon {
    color: var(--pxt-target-foreground3);
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected) .blocklyTreeLabel {
    color: var(--pxt-target-foreground3);
}

.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected):hover,
.pxtToolbox:not(.invertedToolbox) .blocklyTreeRow:not(.blocklyTreeSelected):focus {
    background-color: #404040;
}

.blocksEditorOuter #blocklyTrashIcon {
    color: var(--pxt-primary-foreground);
}

/*
 * Teaching Bubbles
 */
.teaching-bubble,
.teaching-bubble .teaching-bubble-navigation-buttons > .common-button {
    background: var(--pxt-neutral-background1) !important;
    color: var(--pxt-neutral-foreground1) !important;
    border: solid var(--pxt-neutral-foreground1) !important;
}

.teaching-bubble-cutout {
    border: 0.25rem solid var(--pxt-neutral-alpha20);
}

.teaching-bubble .ai-footer {
    opacity: 1 !important;
}

.teaching-bubble-arrow,
.teaching-bubble .ai-footer-text,
.teaching-bubble .feedback-button,
.teaching-bubble .feedback-button.disabled,
.teaching-bubble .teaching-bubble-steps {
    color: var(--pxt-neutral-foreground1) !important;
}

/*
 * Side Docs
 */

#sidedocs {
    background-color: var(--pxt-neutral-foreground1);
}

#sidedocsbar a i,
#sidedocsbar a span {
    color: var(--pxt-neutral-background1) !important;
}

#sidedocsbar a:hover,
#sidedocsbar a:focus {
    /* Yellow does not contrast well against white background */
    outline: 3px solid var(--pxt-neutral-background1) !important;
}

#sidedocsbar a:hover i,
#sidedocsbar a:focus i,
#sidedocsbar a:hover span,
#sidedocsbar a:focus span {
    color: var(--pxt-link-hover) !important;
}

/*
 * Editor Toggle
 */
#editortoggle .selected.item {
    transition: none;
    &:focus {
        box-shadow: inset 0 0 0 6px #000000 !important;
    }
    >.icon {
        color: #000000 !important;
    }
}

#editordropdown.ui.button.active > .icon {
    color: #000000 !important;
}

/*
 * Dropdown Menu
 */
.common-menu-dropdown-item:hover,
.common-menu-dropdown > .menu-button.expanded {
    outline: var(--pxt-focus-border) solid 3px !important;
    outline-offset: -4px;
    z-index: 1;
}

table.diffview.update .diff-added .ch-added {
    color: var(--pxt-neutral-background1) !important;
    outline-color: var(--pxt-neutral-background1) !important;
}

.blocklyFieldSliderDropdown {
    background-color: var(--pxt-neutral-background1) !important;
    border-color: var(--pxt-neutral-foreground1) !important;
}

.blocklyFieldSliderDropdown .blocklyFieldSliderLabel {
    color: var(--pxt-neutral-foreground1) !important;
}

.blocklyFieldSliderDropdown input[type=range].blocklyFieldSlider {
    outline: none !important;
    background-color: var(--pxt-neutral-background1) !important;
    --blocklyFieldSliderBackgroundColor: var(--pxt-neutral-background1) !important;
    --blocklyFieldSliderThumbColor: var(--pxt-neutral-foreground1) !important;
    --blocklyFieldSliderThumbBorderColor: var(--pxt-neutral-foreground1) !important;
}

.blocklyFieldSliderDropdown input[type=range].blocklyFieldSlider:hover::-webkit-slider-runnable-track, .blocklyFieldSliderDropdown input[type=range].blocklyFieldSlider:focus-visible::-webkit-slider-runnable-track {
    outline: solid 3px var(--pxt-focus-border) !important;
}

input[type=range].blocklyFieldSlider::-webkit-slider-runnable-track {
    border: solid 1px var(--pxt-neutral-foreground1) !important;
    box-sizing: content-box;
}

input[type=range].blocklyFieldSlider::-moz-range-track {
    border: solid 1px var(--pxt-neutral-foreground1) !important;
    box-sizing: content-box;
}

.blocklyFieldSliderDropdown input[type=range].blocklyFieldSlider:hover::-moz-range-track, .blocklyFieldSliderDropdown input[type=range].blocklyFieldSlider:focus-visible::-moz-range-track {
    outline: solid 3px var(--pxt-focus-border) !important;
}