pxt-core/theme/home.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";
@carouselArrowSize: 60px;
@carouselArrowSizeTablet: 40px;
@carouselArrowSizeMobile: 20px;

@homeCarouselArrowZIndex: @homeScreenZIndex+1; /* Show the carousel above the home screen */
@homeDetailViewZIndex: @homeCarouselArrowZIndex+1; /* Show the detail view above the carousel arrows */
@homeDetailViewSelectedCardZIndex: @homeDetailViewZIndex+1; /* Show the card arrow above the detail view */
@homeFooterZIndex: @homeCarouselArrowZIndex+1;

// Fade looks odd as anything other than black, so it's intentionally hardcoded separate from the theme.
// Active dot color is also hardcoded for contrast, but non-active outline color and fill color can still be themed.
@heroBannerGradientColor: rgba(0,0,0,1);
@heroBannerDotOutlineColor: var(--pxt-neutral-alpha50);
@heroBannerDotOutlineAtiveColor: rgba(255, 255, 255, .75);

#homescreen {
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    z-index: @homeScreenZIndex;
    user-select: none;
}

.projectsdialog {
    position: relative;
    height: 100%;
    overflow: auto;
    z-index: @homeScreenZIndex+1;
    .accessibleMenu {
        z-index: @homeScreenZIndex+3 !important;
        .ui.item:focus, .ui.button:focus {
            z-index: @homeScreenZIndex+2 !important;
        }
    }
    .ui.segment.getting-started-segment {
        border: 0;
        margin-top: -2.1rem !important;
        margin-bottom: 2.1rem !important;
        padding: 0;
        border-radius: 0;
        background-repeat: no-repeat;
        background-size: cover;
        height: 300px;
        .column {
            padding: 0 !important;
        }
        .getting-started {
            padding: @carouselArrowSize;
            margin-top: 70px;
        }
    }
    .ui.segment.getting-started-segment.hero {
        -webkit-transition: background-image 0.5s ease-in;
        transition: background-image 0.5s ease-in;
        overflow: hidden;

        .hero-banner-contents {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 20rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-left: @carouselArrowSize;
        }

        .description {
            display: flex;
            align-items: flex-end;
            width: 20rem;
            height: 6.5rem;
            overflow-y: auto;
            font-size: 1.5rem;
            font-weight: 600;
            color: @white;
            p {
                flex-grow: 0;
                max-height: 100%;
            }
        }

        .action {
            margin: 1rem 0;
            a:focus-visible, button:focus-visible {
                outline-width: 4px !important;
                outline-style: solid;
                outline-color: var(--pxt-neutral-stencil3);
            }
        }

        .dots {
            align-self: flex-start;
            border-radius: 50px;
            line-height: 0;
            margin-top: 8px;

            &:focus-visible {
                outline-width: 3px !important;
                outline-style: solid;
                outline-color: white;
                outline-offset: 4px;
            }

            button {
                transition: background-color 0.5s;
                border: 2px solid @heroBannerDotOutlineColor;
                margin-right: 1.25rem;

                &.active {
                    border-color: @heroBannerDotOutlineAtiveColor;
                    background-color: transparent;
                }

                &:last-child {
                    margin-right: 0px;
                }
            }
        }

        .gradient-overlay {
            position: relative;
            height: 100%;
            width: 40rem;
            top: 0;
            left: 0;
            background: linear-gradient(to right, @heroBannerGradientColor 0%, rgba(0, 0, 0, 0) 100%);
        }
    }

    .content {
        height: 100%;
    }
    .ui.segment.tabsegment {
        padding: 0;
        padding-top: calc(@mainMenuHeight + 2rem) !important;
        margin: 0;
        border: 0;
        width: 100%;
        min-height: 100%;
        background: var(--pxt-target-background1);
        color: var(--pxt-target-foreground1);
    }
    .ui.segment.gallerysegment {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0rem;
        margin: 0;

        .ui.header {
            margin: 0;
            padding-left: @carouselArrowSize;
            font-size: 20px;
            color: var(--pxt-target-foreground1);
            &.myproject-header {
                cursor: pointer;
                outline: none;

                > .view-all-button {
                    margin-left: 1.5em;
                    color: var(--pxt-primary-background);
                    font-size: 14px;
                    font-weight: 500;
                    border-bottom: 1px solid var(--pxt-neutral-alpha0);
                    transition: border-color 400ms ease;
                    &:hover, &:focus {
                        border-color: var(--pxt-primary-background);
                    }
                    &:focus-visible {
                        outline-width: @homeCardBorderSize !important;
                        outline-style: solid;
                        outline-color: var(--pxt-focus-border);
                        outline-offset: 2px;
                    }
                }
            }
        }
        .heading {
            display: flex;
            align-items: flex-end;
            justify-content: space-between;

            margin-bottom: -1rem !important;
            margin-top: 1rem !important;
        }
        .column {
            padding: 0 !important;
        }
        .column.right.aligned {
            padding-right: @carouselArrowSize !important;
        }
    }
    .import-dialog-btn {
        position: relative;
        z-index: 1; /* Move up so it's above the carousel container that has an offset margin */
        &:focus-visible {
            outline-width: @homeCardBorderSize !important;
            outline-style: solid;
            outline-color: var(--pxt-focus-border);
            outline-offset: 2px;
        }
    }
    /* Footer, Privary, Terms of Use */
    .homefooter {
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        padding: 5px !important;
        z-index: @homeFooterZIndex;
        position: absolute;
        .item {
            font-size: 0.8rem !important;
            color: var(--pxt-neutral-foreground1) !important;

            .icon {
                color: var(--pxt-neutral-foreground1) !important;
            }
        }
        .item.copyright {
            display: block;
            font-size: 0.7rem !important;
            line-height: 15px !important;
        }
    }
    .ui.card:hover {
        border: @homeCardBorderSize solid var(--pxt-neutral-background1) !important;
        background-color: var(--pxt-neutral-background1);
        transform: scale(1.1);
    }
    .header {
        user-select: none;
    }

    .carouselitem.selected {
        .ui.card {
            border: @homeSelectedCardBorderSize solid var(--pxt-neutral-background1) !important;
            z-index: @homeDetailViewSelectedCardZIndex;
        }
        .ui.card:hover {
            transform: none;
        }
        .ui.card:after, .ui.card:before {
            top: 100%;
            left: 50%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }
        .ui.card:after {
            border-color: var(--pxt-neutral-alpha0);
            border-top-color: var(--pxt-neutral-background1);
            border-width: 10px;
            margin-left: -10px;
        }
        .ui.card:before {
            border-color: var(--pxt-neutral-alpha0);
            border-top-color: var(--pxt-neutral-stencil3);
            border-width: 17px;
            margin-left: -17px;
        }
    }

    .detailview {
        margin-top: -2rem;
        transition: height 0.5s;
        z-index: @homeDetailViewZIndex;
        position: relative;
        overflow: hidden;
        .ui.grid {
            background: var(--pxt-neutral-background3);
        }
        .column {
            height: 15rem;
        }
        .segment {
            margin: 0;
            padding-left: @carouselArrowSize;
            margin-top: 2rem;
        }
        .imagewrapper {
            position: absolute;
            top: 0; right: 0;
            left: 30%; bottom: 0;
            padding: 0;
            overflow:hidden;
            .image {
                height: 400px;
                background-size: cover;
            }
            .video {
                width: 100%;
                background-size: cover;
            }
        }
        .imagewrapper:after {
            content: " ";
            position: absolute;
            pointer-events: none;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(90deg, var(--pxt-neutral-background3), var(--pxt-neutral-alpha0));
        }
        .header {
            font-size: 20px;
            color: var(--pxt-neutral-foreground3);
            margin-bottom: 1rem;
        }
        .detail {
            color: var(--pxt-neutral-foreground3);
        }
        .yt-button {
            display: inline-block;
            border-radius: 0.5rem;
            background-color: var(--pxt-primary-background);
        }
        .ui.grid.stackable .actions {
            padding-right: 4rem !important;
            position: relative;
            bottom: 0;
            text-align: right;

            .segment {
                white-space: nowrap;
                padding: 0;
            }

            .card-action {
                display: inline-block;
                position: relative;
                margin: 0 0 0 1rem;
                text-align: center;
                border: 5px solid transparent;
                border-radius: 0.75rem!important;
                overflow: hidden;
                transition-duration: 0.1s;

                > .item, > .icon {
                    background: var(--pxt-target-background1);
                    color: var(--pxt-target-foreground1);
                    height: 8rem;
                }

                .button.attached i {
                    display: block;
                    margin: auto !important;
                    opacity: 0.65;
                    color: var(--pxt-neutral-foreground1);

                    // These three have text in front of the icons, so leave them faint.
                    &.blocks, &.js, &.py {
                        opacity: 0.05;
                    }
                }
                .button.attached .icon:not(.xicon) {
                    margin: 0 auto!important;
                    font-size: 5rem;
                    line-height: 8rem;
                }

                .button.approve {
                    width: 100%;
                    color: var(--pxt-neutral-foreground3);
                    background-color: var(--pxt-primary-background);
                    transition-duration: 0s;
                }
            }
            .card-action-title {
                position: absolute;
                top: 40%;
                left: 50%;
                font-size: 1.43rem;
                font-weight: 700;
                color: var(--pxt-neutral-foreground1);
                transform: translateX(-50%) translateY(-50%);
                pointer-events: none;
            }
            .card-action:hover {
                cursor: pointer;
                border-color: var(--pxt-focus-border);
                .ui.button {
                    filter: none;
                }
                .ui.button:first-child:hover {
                    z-index: auto;
                }
            }
            .card-action:focus-within {
                border-color: var(--pxt-focus-border);
            }
            .card-action:hover {
                transform: scale(1.1);
            }
            .card-action.custom-icon i.xicon {
                font-size: 6.5rem;
                padding-top: 3.5rem;
            }
            /* custom icons (override font to avoid mac/windows alignment issue) */
            .card-action:not(.custom-icon) .xicon:before {
                visibility: hidden;
            }
            .card-action:not(.custom-icon) i.xicon {
                background: transparent @blocksIcon no-repeat center center;
                background-size: 70%;
                background-blend-mode: color-burn;
                font-size: 6.5rem!important;

                &.py {
                    background-image: @pyIcon;
                }
                &.js {
                    background-image: @jsIcon;
                }
            }

            /* unset semantic properties */
            .card-action > a:first-child {
                padding: 0;
                display: inline-block;
                width: 100%;
            }
            .card-action .button {
                border: none!important;
                outline: none!important;
                box-shadow: none!important;
                margin: 0;
            }
        }
        > .closeIcon {
            margin: 1.5rem;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }
        >.closeIcon .remove.icon {
            font-size: 2.15rem;
            line-height: 2.15rem;
            cursor: pointer;
            width: 2.15rem;
            color: var(--pxt-neutral-foreground3);
            height: 2.15rem;
            transition: all 0.15s ease-out;
            opacity: 0.9;
            border-radius: 50%;
            background-color: var(--pxt-neutral-background3);
        }
        > .closeIcon .remove.icon:hover, > .closeIcon .remove.icon:focus {
            opacity: 1;
            transform: scale(1.1, 1.1);
            box-shadow: 0 0 0 3px var(--pxt-neutral-alpha20);
        }
    }

    .tutorial-progress.not-finished {
        background-color: var(--pxt-primary-background) !important;
        color: var(--pxt-primary-foreground) !important;
    }
}

.scriptmanager .ui.cards, .projectsdialog {
    .ui.card {
        margin-right: 5px;
        border-radius: @homeCardBorderRadius;
        color: var(--pxt-neutral-foreground1);
        border: @homeCardBorderSize solid var(--pxt-neutral-stencil2) !important;
        background-color: var(--pxt-neutral-background1);
        .ui.image, .ui.imagewrapper, .content {
            border-radius: @homeCardImageBorderRadius !important;
            .tags {
                color:var(--pxt-neutral-foreground2);
                font-size: 1rem;
            }
        }
        .header {
            color: var(--pxt-neutral-foreground1);
        }
        .meta {
            color: var(--pxt-neutral-foreground1);
        }
    }
    .ui.card:focus {
        border: 2px solid transparent;
        outline-width: @homeCardBorderSize !important;
        outline-style: solid;
        outline-color: var(--pxt-focus-border);
    }
}

.ui.fullscreen.modal.scriptmanager > .content, .projectsdialog {
    background: var(--pxt-target-background1);
    color: var(--pxt-target-foreground1);
}


/* Carousel */

.carouselouter {
    position: relative;
}

.carouselcontainer {
    overflow: hidden;
    padding: 2rem @carouselArrowSize !important;
}

.carouselbody {
    overflow-y: visible;
    touch-action: pan-y;
}

.carouselitem {
    float: left;
}

.carouselarrow {
    z-index: @homeCarouselArrowZIndex;
    position: absolute;
    display: block;
    height: 100%;
    width: @carouselArrowSize;
    font-size: @carouselArrowSize / 1.18 !important;
    line-height: 1;
    cursor: pointer;
    background: var(--pxt-target-background1);
    color: var(--pxt-primary-background);
    top: 0;
    opacity: 0.7;
    overflow: hidden;
    outline: none;
}

.carouselarrow:hover, .carouselarrow:focus {
    opacity: 1;
    transition: opacity .1s ease-out 0s;
    .icon {
        transform: scale(1.4);
        transition: transform .1s ease-out 0s;
    }
}

.carouselarrow:focus {
    outline: solid 3px var(--pxt-primary-background);
}

.carouselarrow .icon {
    top: 40%;
    position: absolute;
}

.carouselarrow.left {
    left: 0rem;
}

.carouselarrow.right {
    right: 0rem;
}

.gallerysegment .ui.card, .gallerysegment .ui.cards .card {
    background-color: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);

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

/* Inverted */
.inverted-theme {
    .projectsdialog .detailview .actions {
        .card-action {
            > .item, > .icon {
                background: var(--pxt-neutral-background1);
                color: var(--pxt-neutral-foreground1);
            }

            .button.approve {
                color: var(--pxt-primary-foreground);
            }

            i.xicon {
                filter: invert(1);
            }
        }
    }
}

/* <= Tablet (Mobile + Tablet) */

@media only screen and (max-width: @largestTabletScreen) {
    /* Carousel */
    .projectsdialog {
        .ui.segment.getting-started-segment {
            background-position: left center;
            height: 250px;
            .getting-started {
                padding: @carouselArrowSizeTablet;
                margin-top: 40px;
            }
            .getting-started-header {
                font-size: 40px;
            }

            &.hero .hero-banner-contents {
                margin-left: @carouselArrowSizeTablet;
            }
        }
        .ui.segment.tabsegment {
            padding-top: calc(@mobileMenuHeight + 2rem) !important;
        }
        .gallerysegment {
            .column {
                padding: 0 !important;
            }
            .column.right.aligned {
                padding-right: @carouselArrowSizeTablet !important;
            }
            .ui.header {
                padding-left: @carouselArrowSizeTablet;
            }
        }
        .detailview {
            .actions .card-action {
                max-width: 10rem;
                .button.attached .icon:not(.xicon) {
                    line-height: 6rem;
                }
            }
            .actions .card-action > .item,
            .actions .card-action > .icon {
                height: 6rem;
                max-width: 10rem;
                background-size: 60%;
            }
            .actions .segment {
                margin-top: 4rem;
                margin-right: 2rem;
            }
            .ui.button.approve {
                font-size: 1rem!important;
                padding: 0.7rem 1rem;
            }
        }
    }
    .carouselcontainer {
        padding: 2rem @carouselArrowSizeTablet !important;
    }
    .carouselarrow {
        width: @carouselArrowSizeTablet;
        font-size: @carouselArrowSizeTablet / 1.18 !important;
    }

    .projectsdialog {
        .ui.card, .ui.cards>.card {
            width: 200px;
        }
    }
}


/* Mobile only */

@media only screen and (max-width: @largestMobileScreen) {
    /* Carousel */
    .projectsdialog {
        .ui.segment.getting-started-segment {
            height: 10rem;
            margin-bottom: 0.5rem !important;
            .getting-started-header {
                font-size: 30px;
            }
            .getting-started {
                padding: @carouselArrowSizeMobile;
            }

            &.hero .hero-banner-contents {
                margin-left: @carouselArrowSizeMobile;
                .description {
                    width: 12rem;
                    height: 4rem;
                    font-size: 1rem;
                }
                .dots {
                    display: none;
                }
            }
        }
        .ui.segment.tabsegment {
            padding-top: calc(@mobileMenuHeight + 2rem) !important;
        }
        .gallerysegment {
            .column.right.aligned {
                padding-right: @carouselArrowSizeMobile !important;
            }
            .ui.header {
                padding-left: @carouselArrowSizeMobile;
            }
        }
        .carouselitem.selected {
            .ui.card {
                margin-top: -8px;
                border-width: 5px!important;
            }
        }
    }
    .carouselcontainer {
        padding: 2rem @carouselArrowSizeMobile !important;
    }
    .carouselarrow {
        width: @carouselArrowSizeMobile;
        font-size: @carouselArrowSizeMobile / 1.18 !important;
    }

    .projectsdialog {
        .ui.card.buttoncard {
            .content {
                padding: 1rem;
            }
            .header {
                font-size: 12pt !important;
            }
        }
        .ui.card.example {
            .ui.huge.label {
                font-size: 1rem;
            }
            .ui.image, .ui.cardimage {
                height: 6rem;
            }
            .content .header {
                font-size: 1rem;
            }
            .ui.image~.content {
                height: 2.4rem;
                padding: 0.7rem;
            }
            .ui.image~.content.tall {
                height: 3rem;
                .tags {
                    font-size: .8rem;
                }
            }
        }
        .ui.card.file {
            .content .header {
                font-size: 1rem;
            }
            .content {
                margin-left: 0;
            }
            .meta {
                font-size: 0.7rem;
                padding: 0.5rem;
            }
        }
        .carouselcontainer {
            padding: 1.5rem @carouselArrowSizeMobile !important;
        }

        .detailview {
            .column:first-child {
                height: 10.5rem;
                overflow: hidden;
            }
            .actions {
                height: 9rem;
                padding-right: 4rem !important;
                .card-action {
                    > .item, > .icon {
                        height: 2rem;
                    }
                    .xicon {
                        background-image: none!important;
                    }
                    .button.approve {
                        padding: .35em 1em .5em;
                    }
                    .button.attached .icon:not(.xicon) {
                        font-size: 2rem;
                        line-height: 2rem;
                    }
                    &:first-child {
                        margin-left: 0;
                    }
                    &:last-child {
                        margin-right: 0;
                    }
                }

                .card-action-title {
                    top: 25%;
                    font-size: 1rem;
                }

                .segment {
                    position: absolute;
                    bottom: 0;
                    right: 0;
                    margin: 0 1rem 0.5rem;
                    white-space: normal;
                }
            }
        }
    }

    .hero.dots {
        display: none;
    }
}

@media only screen and (max-height: @tallEditorBreakpoint) and (min-width: @largestMobileScreen) {
    .ui.segment.tabsegment {
        padding-top: calc(@thinMenuHeight + 2rem) !important;
    }
    .projectsdialog {
        .ui.card, .ui.cards>.card {
            width: 15rem;
            height: 9rem;
            white-space: nowrap;
        }
        .ui.card.buttoncard {
            .content {
                padding: 1rem;
            }
            .header {
                font-size: 12pt !important;
            }
            i.icon.huge {
                font-size: 3rem;
            }
        }
        .ui.card.example {
            .ui.huge.label {
                font-size: 1rem;
            }
            .ui.image, .ui.cardimage {
                height: 6rem;
            }
            .content .header {
                font-size: 1rem;
            }
            .ui.image~.content {
                height: 2.4rem;
                padding: 0.7rem;
            }
        }
        .ui.card.file {
            .content .header {
                font-size: 1rem;
            }
            .content {
                margin-left: 0;
            }
            .meta {
                padding: 0.5rem;
            }
            .fileimage {
                top: 2rem;
                left: 1rem;
                width: 2rem;
                height: 1.5rem;
            }
        }
        .detailview.visible {
            .column,
            .imagewrapper .image
            {
                height: 220px;
            }
        }
        .ui.segment.getting-started-segment {
            margin-top: -3.1rem!important;
            margin-bottom: 0rem!important;
            height: 168px;

            &.hero .hero-banner-contents {
                .description {
                    width: 12rem;
                    height: 4rem;
                    font-size: 1rem;
                }
                .dots {
                    display: none;
                }
            }
        }
    }
}


/*******************************
        Projects Modal
*******************************/

.projectsdialog {
    .ui.dividing.header, .content > .header{
        font-weight: normal !important;
    }

    .ui.secondary.inverted.pointing.menu {
        border: 0;
    }

    .group {
        padding: 1rem;
    }

    .group .cards .card .button.iconcontent {
        min-height: 4em;
    }

    .labelsgroup {
        display: block;
        position: relative;
        min-height: 18em;
    }

    h2.editorname {
        top: 20%;
        width: calc(100% - 2rem);
        text-align: center;
        position: absolute;
        display: block;
    }

    .loader.editoravatar {
        display: block;
        position: absolute;
        top: 50%;
    }

    > .content {
        padding: 0 !important;
        position: relative;
    }
}