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

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


/*******************************
          Accessibility
*******************************/

@accessibleMenuBackground: rgba(255,255,255,.9);
@accessibleMenuColor: black;

/* Main menu focus */
#mainmenu .ui.item:focus {
    background: rgba(0, 0, 0, 0.1);
    outline: none;
}

/* Toggle focus */
#mainmenu .editor-menuitem {
    .ui.item:focus-visible {
        background: transparent;
        outline: 3px solid white;
        outline-offset: -5px;
        filter: none;
    }

    .ui.item.active:focus-visible {
        outline-color: black;
    }
}

.ui.item:focus, .ui.button:focus {
    z-index: 1000;
}

.accessible-hidden {
    position: absolute !important;
    display: block;
    visibility: visible;
    overflow: hidden;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    clip: rect(0 0 0 0);
}

.ui.menu.accessibleMenu, #accessibleMenu {
    z-index: 1001 !important;
    top: -20em !important;
    padding: 0;
    margin: 0;
    width: 100%;
    border: 0;

    .ui.item.link {
        position: absolute;
        width: 100%;
        color: @accessibleMenuColor;
        background: @accessibleMenuBackground !important;
    }
    .ui.item.link:hover {
        color: @accessibleMenuColor;
    }
    .ui.item.link:focus {
        top: 20em !important;
        box-shadow: 3px 3px 5px #aaa;
        border-radius: 0px !important;
    }
}

/* <= Tablet (Mobile + Tablet) */
@media only screen and (max-width: @largestTabletScreen) {
    .menubar .ui.menu.accessibleMenu, #accessibleMenu {
        height: @mobileMenuHeight !important;
        min-height: @mobileMenuHeight !important;
    }
}

/* Thin screen */
@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    .menubar .ui.menu.accessibleMenu, #accessibleMenu {
        height: @thinMenuHeight !important;
        min-height: @thinMenuHeight !important;
    }
}