pxt-core/theme/asset-editor.less

Microsoft MakeCode provides Blocks / JavaScript / Python tools and editors

.asset-editor-outer {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.asset-editor-sidebar {
    width: @blocklyRowWidthWide;
    height: 100%;
    border-right: 1px solid var(--pxt-neutral-stencil1);
    overflow-y: auto;
    z-index: 1;
}

.asset-editor-sidebar-info {
    margin: 1rem;
}

.asset-editor-sidebar-detail {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asset-editor-sidebar-name,
.asset-editor-sidebar-temp {
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.asset-editor-sidebar-temp {
    display: flex;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    background-color: var(--pxt-neutral-alpha10);

    i {
        width: 1.5rem;
        height: 1.5rem;
        margin-right: 0.3rem;
    }
}

.asset-editor-sidebar-preview {
    width: ~"calc(@{blocklyRowWidthWide} - 2rem)";
    height: ~"calc(@{blocklyRowWidthWide} - 2rem)";
    margin: 0.5rem 0;
    background-color: var(--pxt-neutral-alpha10);

    .asset-editor-preview {
        border: 2px solid var(--pxt-target-foreground1);
    }
}

.asset-editor-sidebar-copy {
    position: absolute;
    top: -9999px;
}

.asset-editor-gallery {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.asset-editor-topbar {
    height: 3rem;
    width: 100%;
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid var(--pxt-neutral-stencil1);
}

.asset-editor-gallery-tab {
    height: 3rem;
    background-color: var(--pxt-neutral-alpha10);
    color: var(--pxt-neutral-foreground1);
    padding: .7em 2em .85em;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border-color: var(--pxt-neutral-stencil1);
    border-style: solid;
    border-width: 0 1px 1px 0;
}

.asset-editor-gallery-tab.selected {
    background-color: transparent;
    border-bottom-color: var(--pxt-target-background1);
    color: var(--pxt-target-foreground1);
}
.asset-editor-card-list {
    width: 100%;
    overflow: auto;
    flex: 1;
}

.asset-editor-card-list > div {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
}

.asset-editor-card,
.create-new {
    width: 8rem;
    height: 8rem;
    margin: 1rem 0 0 1rem;
    cursor: pointer;

    border: solid 1px var(--pxt-target-foreground1);
    background: var(--pxt-neutral-background1);
}

.asset-editor-card.selected {
    border-width: 2px;
}

.asset-editor-card.empty-card {
    background-color: var(--pxt-neutral-alpha10);
    border: none;
}

.asset-editor-card-label {
    display: flex;
    position: relative;
    margin-top: -2rem;
    z-index: 2;
}

.asset-editor-card-icon {
    height: 2rem;
    width: 2rem;
    line-height: 2rem;
    text-align: center;
    background: var(--pxt-neutral-background1);
    color: var(--pxt-neutral-foreground1);
    margin-right: 0.25rem;

    i { margin: 0; }
}

.asset-editor-preview {
    display: flex;
    width: 100%;
    height: 100%;
    background-image: @assetPreviewBackground;

    img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: 100%;
        image-rendering: optimizeSpeed;
        image-rendering: -moz-crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        image-rendering: optimize-contrast;
        image-rendering: pixelated;
        -ms-interpolation-mode: nearest-neighbor;
        object-fit: contain;
    }

    .json-asset-preview {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        text-align: center;
        background-color: var(--pxt-neutral-background1);

        &>div {
            font-size: 1.2rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: var(--pxt-neutral-foreground1);
        }
    }
}

.asset-editor-sidebar-controls {
    margin: 0 .75rem;
    .common-list-item {
        display: flex;
    }
}

.asset-editor-button {
    flex: 1;
    box-shadow: inset 0 0 0 1px var(--pxt-neutral-alpha20), inset 0 -0.3em 0 0 var(--pxt-neutral-alpha20);
}

.create-new.common-button {
    color: var(--pxt-colors-green-foreground);
    background-color: var(--pxt-colors-green-background);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 1rem 0 0 1rem;

    i.icon {
        margin: 0;
    }
}
.create-new:hover {
    background-color: var(--pxt-colors-green-hover);
    color: var(--pxt-colors-green-foreground);
}

.create-new.disabled,
.create-new.disabled:hover {
    cursor: not-allowed;
    background-color: var(--pxt-neutral-alpha10);
}

.asset-editor-create-options {
    display: flex;
    flex-wrap: wrap;
    padding: 1rem 0;
    justify-content: space-around;
}

.asset-editor-create-button.common-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 10rem;
    width: 10rem;
    margin-bottom: 1rem;
    color: var(--pxt-secondary-foreground);
    font-weight: 700;
    background-color: var(--pxt-secondary-background);
    cursor: pointer;

    &:hover {
        background-color: var(--pxt-secondary-background-hover);
        color: var(--pxt-secondary-foreground-hover);
    }

    i.icon {
        font-size: 4rem;
        line-height: 4rem;
        margin: 1rem;
    }

    .common-button-flex {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
}

.image-editor-open #tutorialcard {
    z-index: @blocklyDropdownDivZIndex + 1
}

.asset-palette-button.common-button {
    margin-top: 1rem;
    flex: 1;
    box-shadow: inset 0 0 0 1px rgba(34,36,38,.15), inset 0 -0.3em 0 0 rgba(34,36,38,.15);
}

i.fa-palette {
    transform: rotate(90deg);
}

.palette-transparent-button.common-button {
    background: none;
    border: none;
    &.disabled {
        background: none;
        border: none;
        color: var(--pxt-neutral-background3);
    }
}

.palette-actions {
    .common-button {
        background: none;
        border: none;
        padding: .5rem;
        font-size: 18px;
        margin: 0;
        &.disabled {
            background: none;
            border: none;
            color: var(--pxt-neutral-background3);
            &:focus::after {
                outline: none;
            }
        }
        .xicon.rename {
            margin-right: 0.5rem;
        }
    }
}

.palette-delete-modal,
.palette-exit-modal,
.palette-name-modal {
    .common-modal {
        width: 35%;
    }
    .common-palette-swatch-name {
        padding: 1rem .5rem 0 0;
        flex-grow: 0;
    }
    .common-palette-color-list {
        padding-top: 1rem;
    }
}

.palette-apply-button.common-button.disabled.green,
.palette-done-button.common-button.disabled.teal {
    background-color: var(--pxt-neutral-background3);
    color: var(--pxt-neutral-foreground3);
}

.invalid-palette-name {
    color: var(--pxt-colors-red-background);
}