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

@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;

#homescreen {
    background: lighten(@homeScreenBackground, 10%);
    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;
        }
    }
    .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;
        }
        .getting-started-header {
            font-size: 50px;
            text-shadow: -1px 0 rgb(87, 87, 87), 0 1px rgb(87, 87, 87), 1px 0 rgb(87, 87, 87), 0 -1px rgb(87, 87, 87);
        }
    }
    .content {
        height: 100%;
    }
    .ui.segment.tabsegment {
        padding: 0;
        padding-top: calc(@mainMenuHeight + 2rem) !important;
        margin: 0;
        border: 0;
        width: 100%;
        min-height: 100%;
        background: @homeScreenBackground;
    }
    .gallerysegment {
        background: none;
        border: none;
        box-shadow: none;
        padding: 0rem;
        margin: 0;
        .ui.header {
            margin: 0;
            padding-left: @carouselArrowSize;
            font-size: 20px;
            color: @homeHeaderColor;
            &.myproject-header {
                cursor: pointer;
                outline: none;
                &:focus, &:hover {
                    color: fade(@homeHeaderColor, 80%);
                }
            }
        }
        .ui.padded.grid.heading, .heading {
            margin-bottom: -1rem !important;
            margin-top: 1rem !important;
        }
        .ui.padded.grid.heading .ui.header {
            bottom: 0;
            position: absolute;
            vertical-align: bottom;
        }
        .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 */
    }
    /* 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: @homeFooterColor !important;
        }
        .item.copyright {
            display: block;
            font-size: 0.7rem !important;
            line-height: 15px !important;
        }
    }
    .ui.card:hover {
        border: @homeCardBorderSize solid @homeCardHoverBorderColor !important;
        background-color: @homeCardHoverBackgroundColor;
        transform: scale(1.1);
    }
    .header {
        user-select: none;
    }

    .carouselitem.selected {
        .ui.card {
            border: @homeSelectedCardBorderSize solid @homeSelectedCardBorderColor !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: rgba(46, 255, 46, 0);
            border-top-color: @homeCardBackgroundColor;
            border-width: 10px;
            margin-left: -10px;
        }
        .ui.card:before {
            border-color: rgba(255, 255, 255, 0);
            border-top-color: @homeSelectedCardBorderColor;
            border-width: 17px;
            margin-left: -17px;
        }            
    }

    .detailview.visible {
        margin-top: -2rem;
        transition: height 0.5s;
        z-index: @homeDetailViewZIndex;
        position: relative;
        box-shadow: rgba(0, 0, 0, 0.75) 0px 0px 50px 0px;
        .ui.grid {
            background: @homeDetailViewBackground;
        }
        .column {
            height: 400px;
        }
        .segment {
            margin: 0;
            padding-left: @carouselArrowSize;
            margin-top: 2rem;
        }
        .imagewrapper {
            position: absolute;
            top: 0; right: 0;
            left: 30%; bottom: 0;
            padding: 0;
            .image {
                height: 400px;
                background-size: cover;
            }
        }
        .imagewrapper:after {
            content: " ";
            position: absolute;
            pointer-events: none;
            top: 0; left: 0; bottom: 0; right: 0;
            background: linear-gradient(90deg, @homeDetailViewBackground, rgba(0,0,0,0));
        }
        .header {
            font-size: 20px;
            color: @homeDetailViewColor;
            margin-bottom: 1rem;
        }
        .detail {
            color: @homeDetailViewColor;
        }
        .actions {
            padding: 2rem;
            position: absolute;
            bottom: 0;
        }
        > .close {
            margin: 1.5rem;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 1;
        }
        >.close .remove.icon {
            font-size: 2.15rem;
            line-height: 2.15rem;
            cursor: pointer;
            width: 2.15rem;
            color: @homeDetailCloseColor;
            height: 2.15rem;
            transition: all 0.15s ease-out;
            opacity: 0.9;
            border-radius: 50%;
            background-color: @homeDetailCloseBackground;
        }
        > .close .remove.icon:hover, > .close .remove.icon:focus {
            opacity: 1;
            transform: scale(1.1, 1.1);
            box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35);
        }
    }
}

.scriptmanager, .projectsdialog {
    .ui.card {
        margin-right: 5px;
        border-radius: @homeCardBorderRadius;
        color: @homeCardColor;
        border: @homeCardBorderSize solid @homeCardBorderColor !important;
        background-color: @homeCardBackgroundColor;
        .ui.image, .ui.imagewrapper, .content {
            border-radius: @homeCardImageBorderRadius !important;
        }
        .header {
            color: @homeCardHeaderColor;
        }
        .meta {
            color: @homeCardMetaColor;
        }
    }
    .ui.card:focus {
        outline: none;
        border: @homeCardBorderSize solid @homeCardFocusBorderColor !important;
    }
}

.ui.fullscreen.modal.scriptmanager > .content, .projectsdialog {
    background: @homeScreenBackground;
}


/* 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: @homeScreenBackground;
    color: @primaryColor;
    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 .icon {
    top: 40%;
    position: absolute;
}

.carouselarrow.left {
    left: 0rem;
}

.carouselarrow.right {
    right: 0rem;
}

.carouselarrow.arrowdisabled {
    opacity: 0;
}


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

@media only screen and (max-width: @largestTabletScreen) {
    /* Carousel */
    .projectsdialog {
        .getting-started-segment {
            height: 250px;
            .getting-started {
                padding: @carouselArrowSizeMobile;
                margin-top: 40px;
            }
            .getting-started-header {
                font-size: 40px;
            }
        }
        .ui.segment.tabsegment {
            padding-top: calc(@mobileMenuHeight + 2rem) !important;
        }
        .gallerysegment {
            .column {
                padding: 0 !important;
            }
            .column.right.aligned {
                padding-right: @carouselArrowSizeMobile !important;
            }
            .ui.header {
                padding-left: @carouselArrowSizeMobile;
            }
        }
    }
    .carouselcontainer {
        padding: 2rem @carouselArrowSizeMobile !important;
    }
    .carouselarrow {
        width: @carouselArrowSizeMobile;
        font-size: @carouselArrowSizeMobile / 1.18 !important;
    }
}


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

@media only screen and (max-width: @largestTabletScreen) {
    .projectsdialog {
        .ui.card, .ui.cards>.card {
            width: 200px;
        }
    }

    /** squeeze the logos to sides of the screen */
    #homemenu .left.menu {
        margin-left: 0 !important;
    }
    #homemenu .right.menu {
        margin-right: 0 !important;
    }
}


/* Mobile only */

@media only screen and (max-width: @largestMobileScreen) {
    .projectsdialog {
        .ui.card, .ui.cards>.card {
            width: 9rem;
            height: 9rem;
        }
        .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;
            }
            .ui.image {
                display: none;
            }
            .content {
                margin-left: 0;
            }
            .meta {
                font-size: 0.7rem;
                padding: 0;
            }
        }
        .getting-started-segment {
            height: 10rem;
            margin-bottom: 0.5rem !important;
            .getting-started-header {
                font-size: 30px;
            }
        }
        .gallerysegment {
            .ui.padded.grid.heading, .heading {
                margin-bottom: -1rem !important;
                margin-top: 0rem !important;
            }
            .ui.padded.grid.heading .ui.header {
                font-size: 18px;
            }
        }
        .carouselcontainer {
            padding: 1.5rem @carouselArrowSizeMobile !important;
        }
    }
}

@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;
        }
        .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;
            }
            .ui.image {
                display: none;
            }
            .content {
                margin-left: 0;
            }
            .meta {
                padding: 0.5rem;
            }
        }        
        .detailview.visible {
            .column, 
            .imagewrapper .image        
            {
                height: 220px;
            }        
        }
        .getting-started-segment {
            margin-top: -3.1rem!important;
            margin-bottom: 0rem!important;
            height: 168px;
        }
    }    
}


/*******************************
        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;
    }
}