pico_cart_style.scss

@import "base";


%pixelated {
	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;
}

// TODO : move to id and regenerate cart exports
#cart-back-link {
    @extend %link-style;
    margin-bottom: 24px;
    display: block;
    text-decoration: underline;
}


#plate {
    @extend %shadowed;
    @extend %pixelated;
	visibility: hidden;
	/*for graceful loading*/
	background-color: #000;
	border: 4px solid #000;
	box-sizing: content-box;
	-webkit-user-select: none;
	/* Chrome, Opera, Safari */
	-moz-user-select: none;
	/* Firefox 2+ */
	-ms-user-select: none;
	/* IE 10+ */
	user-select: none;
	/* Standard syntax */
	user-drag: none;
	-webkit-user-drag: none;
    margin: auto;


    .menubar {
        box-sizing: border-box;
        background-color: #000;
        border-style: solid;
        border-width: 4px 0px 0px 0px;
        border-color: #000;
        visibility: hidden;
        display: flex;
        align-items: stretch;
        justify-content: space-between;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .button {
        box-sizing: border-box;
        float: center;
        width: 19.3%;
        padding: 4px;
        padding-left: 0.35%;
        padding-right: 0.35%;

        text-align: center;
        color: #FFF1E8;
        background-color: #83769c;
        font-family: verdana;
        font-size: 11px;
        cursor: pointer;
        cursor: hand;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;

        &:hover {
            background-color: #FF77A8;
        }

    }


}

#canvas {
    display: block;
    margin: auto;
}



canvas {
	cursor: none;
	outline: none;
}

#start-button {
    @extend %pixelated;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width:calc(72px*2);
	height:calc(72px*2);
	background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAaklEQVR4Ae2dOwoAMQhE15A+rfc/3bZ7AlMnQfywCkKsfcgMM9ZP+QHtIn0vLeBAFduiFdQ/0DmvtR5LXJ6CPSXe2ZXcFNlTxFbemKrbZPs35XogeS9xeQr+anT6LzoOwEDwZJ7jwhXUnwkTTiDQ2Ja34AAAABB0RVh0TG9kZVBORwAyMDExMDIyMeNZtsEAAAAASUVORK5CYII=");
    background-repeat: no-repeat;
    background-attachment: fixed;
	background-position: center;
	background-size: calc(72px*2);
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: auto;
	cursor: pointer;
	cursor: hand;
}