pxt-core-own/theme/spriteeditor.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";

/* Sprite editor */
.pixel-cell {
    shape-rendering: crispedges;
}

.palette-selected {
    stroke: orange;
    stroke-width: 2px;
}

.palette-unselected {
    stroke: none;
}

.sprite-editor-canvas {
    cursor: crosshair;
    z-index: 1001;
}

.sprite-editor-canvas.sprite-editor-eyedropper {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cstyle type='text/css'%3E.icon-canvas-transparent%7Bopacity:0;fill:%23F6F6F6;%7D .icon-vs-out%7Bfill:%23F6F6F6;%7D .icon-vs-bg%7Bfill:%23424242;%7D%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 15.978h-16v-16h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M15.241 4.652l-1.481 1.481.835.835-3.085 3.085-.762-.762-5.168 5.17-3.596 1.539-1.959-1.959 1.349-3.742 5.19-5.191-.645-.646 3.085-3.085.835.835 1.481-1.481c.431-.431 1-.678 1.616-.731h.461c.661.054 1.298.331 1.77.802 1.082 1.084 1.114 2.81.074 3.85z' id='outline'/%3E%3Cpath class='icon-vs-bg' d='M9.467 7.932l.612.613-5.071 5.072-2.795 1.198-1.032-1.032 1.057-2.936 5.072-5.072.585.585v.003l-4.356 4.356 1.569 1.569 4.355-4.356h.004zm4.995-6.422c-.667-.664-1.777-.729-2.435-.072l-2.188 2.189-.836-.835-.174.174-1.497 1.497 4.177 4.177 1.671-1.671-.835-.835 2.189-2.189c.658-.658.592-1.768-.072-2.435z' id='iconBg'/%3E%3C/svg%3E") 2 16, copy;
}

.sprite-canvas-controls {
    z-index: 1000;
}

#sprite-editor-palette .palette-swatch {
    cursor: pointer;
}

.sprite-editor-dropdown.blocklyDropDownDiv {
    background: linear-gradient(#4B7BEC 50px, rgb(44, 62, 80) 50px, rgb(44, 62, 80) 100%);

    .blocklyDropDownArrow.arrowTop {
        background: #4B7BEC;
    }

    .blocklyDropDownArrow.arrowBottom {
        background: rgb(44, 62, 80);
    }
}

#sprite-editor-header {
    z-index: 1002;
    height: 50px;
    width: inherit;
    position: absolute;
    top: 0px;
    left: 0px;
}

#sprite-editor-header-controls {
    width: 100%;
    height: 100%;
}

#sprite-editor-gallery-outer {
    overflow: hidden;
    position: absolute;
    z-index: 1002;
    width: 100%;
}

#sprite-editor-gallery {
    overflow-y: scroll;
    width: 100%;
    height: 100%;
    background: #2c3e50;
}

.sprite-editor-card {
    // This inlined SVG is the checkerboard that appears behind gallery images
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px'%3E%3Crect x='0' y='0' width='10px' height='10px' fill='white'%3E%3C/rect%3E%3Crect x='0' y='0' width='5px' height='5px' fill='%23dedede'%3E%3C/rect%3E%3Crect x='5' y='5' width='5px' height='5px' fill='%23dedede'%3E%3C/rect%3E%3C/svg%3E");
}

.sprite-editor-icon {
    fill: white;
    font-family: "Icons";
    font-size: 19px;
}

.sprite-editor-xicon {
    fill: white;
    font-family: "xicon";
    font-size: 19px;
}

.sprite-editor-button {
    cursor: pointer;
}

.sprite-editor-button-bg {
    fill: #525a5b;
}

.sprite-editor-button-fg {
    fill: #7f8c8d;
}

.sprite-editor-confirm-button {
    .sprite-editor-button-bg {
        fill: #294da0;
    }

    .sprite-editor-button-fg {
        fill: #4B7BEC;
    }
}

.sprite-editor-button.disabled {
    cursor: not-allowed;

    .sprite-editor-button-bg {
        fill-opacity: 0.8;
    }

    .sprite-editor-button-fg {
        fill-opacity: 0.8;
    }
}

.sprite-editor-button:active:not(.disabled) {
    .sprite-editor-button-bg {
        fill-opacity: 1 !important;
        transition: fill-opacity 0.1s;
    }

    .sprite-editor-button-fg {
        fill-opacity: 1 !important;
        transition: fill-opacity 0.1s;
    }
}

.sprite-editor-button:hover:not(.disabled) {
    .sprite-editor-button-fg {
        fill-opacity: 0.8;
        transition: fill-opacity 0.1s;
    }

    .sprite-editor-button-bg {
        fill-opacity: 0.8;
        transition: fill-opacity 0.1s;
    }
}

.sprite-editor-button.selected {
    /* Fixes a bug in Microsoft Edge where changing the fill alone would not
     * trigger a re-render of the button for some reason. The position is already
     * relative, but having this in the rule forces the render. */
    position: relative;

    .sprite-editor-button-fg {
        fill: #495353;
    }
}

.sprite-editor-text {
    font-family: @pageFont !important;
    user-select: none;
    cursor: auto;
}

.sprite-editor-label {
    fill: white;
}

.sprite-editor-dropdown-bg {
    background: linear-gradient(#4B7BEC 50px, rgb(44, 62, 80) 50px, rgb(44, 62, 80) 100%);
    border-radius: 4px;
    padding-top: 4px;
    position: relative;
}

.sprite-editor-glyph {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cstyle%3E.icon-canvas-transparent%7Bopacity:0;fill:%23f6f6f6%7D.icon-vs-out%7Bfill:%23f6f6f6%7D.icon-vs-bg%7Bfill:%23424242%7D.icon-vs-red%7Bfill:%23e51400%7D.icon-vs-yellow%7Bfill:%23ffcc00%7D.icon-vs-green%7Bfill:%23339933%7D.icon-vs-blue%7Bfill:%231ba1e2%7D.icon-vs-action-purple%7Bfill:%23652d90%7D.icon-white%7Bfill:%23ffffff%7D%3C/style%3E%3Cpath class='icon-canvas-transparent' d='M16 16H0V0h16v16z' id='canvas'/%3E%3Cpath class='icon-vs-out' d='M16 8c0 4.411-3.589 8-8 8a2.803 2.803 0 0 1-2.8-2.8c0-.833.272-1.629.766-2.241a.596.596 0 0 0 .101-.359.667.667 0 0 0-.667-.666.58.58 0 0 0-.358.102A3.584 3.584 0 0 1 2.8 10.8 2.803 2.803 0 0 1 0 8c0-4.411 3.589-8 8-8s8 3.589 8 8z' id='outline'/%3E%3Cpath class='icon-white' d='M5.4 7.933a2.67 2.67 0 0 1 2.667 2.666c0 .606-.193 1.179-.544 1.614a1.599 1.599 0 0 0-.323.987.8.8 0 0 0 .8.8c3.309 0 6-2.691 6-6s-2.691-6-6-6-6 2.691-6 6c0 .441.359.8.8.8.378 0 .729-.114.986-.322A2.568 2.568 0 0 1 5.4 7.933z' id='iconFg'/%3E%3Cg id='iconBg'%3E%3Cpath class='icon-vs-bg' d='M8 15c-.992 0-1.8-.808-1.8-1.8 0-.606.193-1.179.544-1.613.208-.259.323-.609.323-.987 0-.919-.748-1.666-1.667-1.666-.377 0-.728.115-.986.323A2.58 2.58 0 0 1 2.8 9.8C1.808 9.8 1 8.992 1 8c0-3.86 3.14-7 7-7 3.859 0 7 3.14 7 7 0 3.859-3.141 7-7 7zM5.4 7.933a2.67 2.67 0 0 1 2.667 2.666c0 .606-.193 1.179-.544 1.614a1.599 1.599 0 0 0-.323.987.8.8 0 0 0 .8.8c3.309 0 6-2.691 6-6s-2.691-6-6-6-6 2.691-6 6c0 .441.359.8.8.8.378 0 .729-.114.986-.322A2.568 2.568 0 0 1 5.4 7.933z'/%3E%3Cpath class='icon-vs-action-purple' d='M4.5 5.375a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75z'/%3E%3Cpath class='icon-vs-blue' d='M7.125 3.625a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75z'/%3E%3Cpath class='icon-vs-green' d='M10.625 4.5a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75z'/%3E%3Cpath class='icon-vs-yellow' d='M11.5 8a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75z'/%3E%3Cpath class='icon-vs-red' d='M9.75 10.625a.875.875 0 1 0 0 1.75.875.875 0 0 0 0-1.75z'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center;
    background-size: 65%;
    background-repeat: no-repeat;
}

.sprite-focus-hover {
    transition: all .15s ease-out;
    border-radius: 50%;
}

.sprite-focus-hover:hover {
    box-shadow: 0 0 0 3px rgba(0,0,0,.35);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.sprite-editor-glyph.sprite-focus-hover:hover {
    box-shadow: inset 0 0 0 2px rgba(0,0,0,.35);
}

.sprite-gallery-button {
    display: inline-block;
    float: left;
    padding: 0;
    margin: 4px;
    border-radius: 4px;
    outline: none;
    border: 1px solid;
    transition: box-shadow .1s;
    cursor: pointer;
}

.sprite-gallery-button-hover {
    box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, .2);
}

.sprite-gallery-button:active {
    box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, .2);
}

.sprite-gallery-button > img {
    width: 80%;
    height: 80%;
    margin-top: 5%;

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