pxt-core/theme/semantic-ui-overrides.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

/*
--- Override Semantic UI ---

This file overrides the default semantic ui theming with our own theme variables.

*/

// Mixin allows easy setting for background, foreground, hover, and inverted colors for a button
.buttonVariant(@bg; @fg; @hoverBg; @hoverFg; @border) {
    background-color: @bg;
    color: @fg;
    border: 1px solid @border;

    &.inverted {
        background-color: @fg;
        color: @bg;
    }

    &.disabled {
        filter: grayscale(100%) brightness(80%);
        opacity: 0.7;
    }

    &:not(.disabled) {
        &:hover, &:focus {
            // Semantic UI darkens background using a filter, which isn't necessary when we have a hover color.
            filter: none;
    
            background-color: @hoverBg;
            color: @hoverFg;
    
            &.inverted {
                background-color: @hoverFg;
                color: @hoverBg;
            }
        }
    }
}

// The body.pxt-theme-root adds specificity so they will
// take precedence over default semantic ui styling without using !important.
body.pxt-theme-root {
    a {
        color: var(--pxt-link);
        &:hover {
            color: var(--pxt-link-hover);
        }
    }

    .ui.label {
        background-color: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
        border-color: var(--pxt-neutral-stencil1);
    }

    .ui.list > .item {
        .description {
            color: var(--pxt-neutral-alpha80);
        }

        a.header {
            color: var(--pxt-link) !important; // override !important in semantic ui
            &:hover {
                color: var(--pxt-link-hover) !important;
            }
        }
    }

    .ui.icon.menu .item {
        color: var(--pxt-neutral-foreground1);
    }

    i.ui.card.icon {
        /*
            There is a card class used in tutorials to get an id-card icon, but it conflicts with the
            card class used for code cards, so we need some special-casing to avoid conflicts.
        */
        border: none;
    }

    .ui.card:not(.icon), .ui.cards .card:not(.icon) {
        background-color: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
        border-color: var(--pxt-neutral-stencil1);

        &:hover, &:focus {
            background-color: var(--pxt-neutral-background1-hover);
            color: var(--pxt-neutral-foreground1-hover);
        }

        .extra.content a.learnmore {
            color: var(--pxt-link);
        }

        &.link.buttoncard .header {
            color: var(--pxt-neutral-foreground1);
        }

        .content {
            .header {
                color: var(--pxt-neutral-foreground1);
            }
    
            .description {
                color: var(--pxt-neutral-alpha80);
            }
        }

        .image pre {
            margin-left:0.5rem;
            margin-right:0.5rem;
            color: var(--pxt-neutral-foreground1);
            font-size:0.7rem;
            white-space: pre-wrap;
            max-height: 10rem;
            overflow-y: hidden;
        }
    }

    .coredialog, .modal {
        background-color: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);

        > .content,
        > .header,
        > .actions,
        > .closeIcon,
        > .closeIcon .close,
        > .content > .ui.items > .item > .content > .description {
            background-color: var(--pxt-neutral-background1);
            color: var(--pxt-neutral-foreground1);
        }
    }

    .ui.table {
        color: var(--pxt-neutral-foreground1);
        background: var(--pxt-neutral-background1);
        border: 1px solid var(--pxt-neutral-alpha20);

        th, tr, i {
            color: var(--pxt-neutral-foreground1);
            background: var(--pxt-neutral-background1);

            &.positive {
                color: var(--pxt-colors-green-background) !important;
                background: var(--pxt-colors-green-alpha10) !important;

                i {
                    background: none !important;
                }
            }
        }

        tr, th {
            border-bottom: 1px solid var(--pxt-neutral-alpha10);
        }

        tr td {
            border-top: 1px solid var(--pxt-neutral-alpha10);
        }

        td:nth-child(2),
        tfoot:not(.full-width) th:nth-child(2),
        thead:not(.full-width) th:nth-child(2) {
            border-left: 1px solid var(--pxt-neutral-alpha10);
        }
    }

    .ui.header, .ui.header .sub.header {
        color: var(--pxt-neutral-foreground1);
    }

    [data-tooltip]:after, [data-tooltip]:before {
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
    }

    .ui.menu {
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);

        .dropdown.item .menu, .ui.dropdown .menu {
            background: var(--pxt-neutral-background1);
            color: var(--pxt-neutral-foreground1);
            box-shadow: 0 1px 3px 0 var(--pxt-neutral-alpha20);
            border: 1px solid var(--pxt-neutral-stencil1);

            .item {
                color: var(--pxt-neutral-foreground1) !important; // override !important in semantic ui

                &:hover, &:focus {
                    background: var(--pxt-neutral-background1-hover) !important;
                    color: var(--pxt-neutral-foreground1-hover) !important;
                }
            }

            .divider {
                background: none;
                border-top: 1px solid var(--pxt-neutral-stencil1);
            }
        }
    }

    .ui.menu .item.disabled, .ui.menu .item.disabled:hover {
        color: var(--pxt-neutral-alpha20) !important;
    }

    .ui.form .field label {
        color: var(--pxt-neutral-foreground2);
    }

    .ui.input,
    .ui.form input[type=url],
    .ui.form textarea {
        background: none;
        color: var(--pxt-neutral-foreground2);

        input {
            -webkit-tap-highlight-color: transparent;
            background: var(--pxt-neutral-background1);
            border: 1px solid var(--pxt-neutral-stencil1);
            color: var(--pxt-neutral-foreground1);

            &::-webkit-input-placeholder,
            &::-moz-placeholder,
            &::-ms-input-placeholder {
                color: var(--pxt-neutral-alpha50);
            }

            &:active, &:focus {
                border-color: var(--pxt-neutral-alpha50);
                background: var(--pxt-neutral-background1);
                color: var(--pxt-neutral-foreground1);
            }

            &::selection {
                color: var(--pxt-neutral-foreground1);
            }
        }

        &.down input {
            border-color: var(--pxt-neutral-alpha50);
            background: var(--pxt-neutral-background1);
            color: var(--pxt-neutral-foreground1);
        }
    }

    .ui.segment {
        background: var(--pxt-neutral-background1);
        color: var(--pxt-neutral-foreground1);
        border: 1px solid var(--pxt-neutral-stencil1);
        box-shadow: 0 1px 2px 0 var(--pxt-neutral-alpha10);
    }

    .ui.raised.segment, .ui.raised.segments {
        box-shadow: 0 2px 4px 0 var(--pxt-neutral-alpha10),0 2px 10px 0 var(--pxt-neutral-alpha10);
    }

    .ui.toggle.checkbox {
        label {
            color: var(--pxt-neutral-foreground1);
            &:hover, &:focus {
                color: var(--pxt-neutral-foreground1-hover);
            }
        }

        input {
            border: 1px solid var(--pxt-neutral-stencil1);

            & ~ .box:before, 
            & ~ label:before {
                border: 1px solid var(--pxt-neutral-stencil1);
            }
        }

        input:checked {
            border: 1px solid var(--pxt-neutral-stencil1);

            & ~ label {
                color: var(--pxt-neutral-foreground1) !important;
            }

            & ~ .box:before, 
            & ~ label:before {
                border: 1px solid var(--pxt-neutral-stencil1);
                background-color: var(--pxt-primary-background) !important;
            }
        }
    }

    .ui.dimmer:not(#loading) {
        background-color: var(--pxt-neutral-alpha50);
    }

    // Colors
    .blue {
        color: var(--pxt-colors-blue-background);
        
        &.inverted {
            color: var(--pxt-colors-blue-background) !important;
            background-color: var(--pxt-colors-blue-foreground) !important;
        }
    }

    .gray, .grey, .neutral {
        color: var(--pxt-neutral-background2);
        &.inverted {
            color: var(--pxt-neutral-background2) !important;
            background-color: var(--pxt-neutral-foreground2) !important;
        }
    }

    .green, .positive {
        color: var(--pxt-colors-green-background);
        &.inverted {
            color: var(--pxt-colors-green-background) !important;
            background-color: var(--pxt-colors-green-foreground) !important;
        }
    }

    .orange {
        color: var(--pxt-colors-orange-background);
        &.inverted {
            color: var(--pxt-colors-orange-background) !important;
            background-color: var(--pxt-colors-orange-foreground) !important;
        }
    }

    .purple, .violet {
        color: var(--pxt-colors-purple-background);
        &.inverted {
            color: var(--pxt-colors-purple-background) !important;
            background-color: var(--pxt-colors-purple-foreground) !important;
        }
    }

    .red, .negative {
        color: var(--pxt-colors-red-background);
        &.inverted {
            color: var(--pxt-colors-red-background) !important;
            background-color: var(--pxt-colors-red-foreground) !important;
        }
    }

    .teal {
        color: var(--pxt-colors-teal-background);
        &.inverted {
            color: var(--pxt-colors-teal-background) !important;
            background-color: var(--pxt-colors-teal-foreground) !important;
        }
    }

    .yellow {
        color: var(--pxt-colors-yellow-background);
        &.inverted {
            color: var(--pxt-colors-yellow-background) !important;
            background-color: var(--pxt-colors-yellow-foreground) !important;
        }
    }

    .ui.label {
        &.blue {
            background-color: var(--pxt-colors-blue-background) !important; // SUI uses important here, so we need to as well.
            color: var(--pxt-colors-blue-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-blue-foreground) !important;
                color: var(--pxt-colors-blue-background) !important;
            }
        }

        &.gray, &.grey, &.neutral {
            background-color: var(--pxt-neutral-background2) !important;
            color: var(--pxt-neutral-foreground2) !important;

            &.inverted {
                background-color: var(--pxt-neutral-foreground2) !important;
                color: var(--pxt-neutral-background2) !important;
            }
        }

        &.green, &.positive {
            background-color: var(--pxt-colors-green-background) !important;
            color: var(--pxt-colors-green-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-green-foreground) !important;
                color: var(--pxt-colors-green-background) !important;
            }
        }

        &.orange {
            background-color: var(--pxt-colors-orange-background) !important;
            color: var(--pxt-colors-orange-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-orange-foreground) !important;
                color: var(--pxt-colors-orange-background) !important;
            }
        }

        &.purple, &.violet {
            background-color: var(--pxt-colors-purple-background) !important;
            color: var(--pxt-colors-purple-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-purple-foreground) !important;
                color: var(--pxt-colors-purple-background) !important;
            }
        }

        &.red, &.negative {
            background-color: var(--pxt-colors-red-background) !important;
            color: var(--pxt-colors-red-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-red-foreground) !important;
                color: var(--pxt-colors-red-background) !important;
            }
        }

        &.teal {
            background-color: var(--pxt-colors-teal-background) !important;
            color: var(--pxt-colors-teal-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-teal-foreground) !important;
                color: var(--pxt-colors-teal-background) !important;
            }
        }

        &.yellow {
            background-color: var(--pxt-colors-yellow-background) !important;
            color: var(--pxt-colors-yellow-foreground) !important;

            &.inverted {
                background-color: var(--pxt-colors-yellow-foreground) !important;
                color: var(--pxt-colors-yellow-background) !important;
            }
        }
    }


    .ui.button, .common-button {
        // Semantic ui sometimes sets the background image to a faint gradient.
        // We don't want that, so we override it here.
        background-image: none;

        &.primary {
            .buttonVariant(
                var(--pxt-primary-background),
                var(--pxt-primary-foreground),
                var(--pxt-primary-background-hover),
                var(--pxt-primary-foreground-hover),
                var(--pxt-primary-background)
            );
        }

        &.secondary {
            .buttonVariant(
                var(--pxt-secondary-background),
                var(--pxt-secondary-foreground),
                var(--pxt-secondary-background-hover),
                var(--pxt-secondary-foreground-hover),
                var(--pxt-secondary-background)
            );
        }

        &.tertiary {
            .buttonVariant(
                var(--pxt-tertiary-background),
                var(--pxt-tertiary-foreground),
                var(--pxt-tertiary-background-hover),
                var(--pxt-tertiary-foreground-hover),
                var(--pxt-tertiary-background)
            );
        }

        &.blue {
            .buttonVariant(
                var(--pxt-colors-blue-background),
                var(--pxt-colors-blue-foreground),
                var(--pxt-colors-blue-hover),
                var(--pxt-colors-blue-foreground),
                var(--pxt-colors-blue-background)
            );
        }

        &.gray, &.grey, &.neutral {
            .buttonVariant(
                var(--pxt-neutral-background2),
                var(--pxt-neutral-foreground2),
                var(--pxt-neutral-background2-hover),
                var(--pxt-neutral-foreground2-hover),
                var(--pxt-neutral-stencil2)
            );
        }

        &.green, &.positive {
            .buttonVariant(
                var(--pxt-colors-green-background),
                var(--pxt-colors-green-foreground),
                var(--pxt-colors-green-hover),
                var(--pxt-colors-green-foreground),
                var(--pxt-colors-green-background)
            );
        }

        &.orange {
            .buttonVariant(
                var(--pxt-colors-orange-background),
                var(--pxt-colors-orange-foreground),
                var(--pxt-colors-orange-hover),
                var(--pxt-colors-orange-foreground),
                var(--pxt-colors-orange-background)
            );
        }

        &.purple, &.violet {
            .buttonVariant(
                var(--pxt-colors-purple-background),
                var(--pxt-colors-purple-foreground),
                var(--pxt-colors-purple-hover),
                var(--pxt-colors-purple-foreground),
                var(--pxt-colors-purple-background)
            );
        }

        &.red, &.negative {
            .buttonVariant(
                var(--pxt-colors-red-background),
                var(--pxt-colors-red-foreground),
                var(--pxt-colors-red-hover),
                var(--pxt-colors-red-foreground),
                var(--pxt-colors-red-background)
            );
        }

        &.teal {
            .buttonVariant(
                var(--pxt-colors-teal-background),
                var(--pxt-colors-teal-foreground),
                var(--pxt-colors-teal-hover),
                var(--pxt-colors-teal-foreground),
                var(--pxt-colors-teal-background)
            );
        }

        &.yellow {
            .buttonVariant(
                var(--pxt-colors-yellow-background),
                var(--pxt-colors-yellow-foreground),
                var(--pxt-colors-yellow-hover),
                var(--pxt-colors-yellow-foreground),
                var(--pxt-colors-yellow-background)
            );
        }
    }
}