savgy/dist/savgy.css

Get self-contained SVGs or bitmaps from SVG

.savgy__wrap {

    --brd-rad: 0.3em;
    --pdd: 0.3em;
    --pdd2: 0.5em;
    --bg: #000;
    --color-text: #fff;
    --color-bg: #000;
    --brd: 1px solid var(--color-text);
    --fontFamily: sans-serif;

    position: relative;
}

.savgy_clone {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* accessible hidden element */
.savgy__hidden {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}


/*
.savgy__wrap:has(.savgy__preview--visible)>svg {
    visibility: hidden
}
*/

.savgy__toolbar {

    position: absolute;
    bottom: var(--pdd);
    right: var(--pdd);
    width: 24ch;
    font-family: var(--fontFamily);
    font-size: 0.9rem;
    line-height: 1.2em;
    padding: var(--pdd2);

    * {
        box-sizing: border-box;
        font-size: inherit;
        font-family: inherit;
    }
}

/** align to bottom */

.savgy__toolbar--bottom .savgy__toolbar__inner {
    padding-top: 2.5em;
    transform: translateY(100%);
}

.savgy__toolbar__inner {
    background-color: var(--bg);
    border-radius: var(--brd-rad);
    color: var(--color-text);
    padding: var(--pdd);
    visibility: hidden;
    transform: translateY(2.25em);
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.75));
}


.savgy__toolbar__label {
    font-weight: 700;
}

.savgy__toolbar__label--inline {
    font-weight: 400;
    display: inline-block;
}


.savgy__toolbar__toggle__icon,
.savgy__button {
    cursor: pointer;
}



/**
* toggle logic
*/

/* icons */
.icn-svg {
    display: inline-block;
    height: 1em;
    color: inherit;
    stroke: currentColor;
    stroke-width: 0.75rem;
    fill: none;
    outline: none;
}

.savgy__icon {
    transform: translateY(0.1em);
}

/* preview */
.savgy__preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit:contain;
    object-position:0;

    /* filter: grayscale(100%);*/
}


.savgy__preview--hidden {
    opacity: 0;
}

.savgy__preview--visible {
    opacity: 1;
}

.savgy__toolbar__toggle__label {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.75));
    background: var(--bg);
    height: 2.5em;
    aspect-ratio: 1;
    display: inline-block;
    border-radius: 50%;
    text-align: center;
    transition: 0.3s transform 0.3s border-radius;
    transform-origin: center;

    .savgy__icon {
        color: #fff;
        transform: translateY(0.3em);
    }

}

.savgy__toolbar--open .savgy__toolbar__toggle__label {
    background: transparent;
    border-radius: 0.3em;
    transform: scale(0.75);
}


.savgy__toolbar__toggle {
    text-align: right;
}

/* display menu */
.savgy__toolbar__toggle__icon--close {
    display: none
}

.savgy__icon--download {
    display: inline-block;
}

/* .savgy__toolbar:has(.savgy__toolbar__toggle__input:checked) */
.savgy__toolbar--open {

    .savgy__toolbar__toggle__icon--close {
        display: block;
    }

    .savgy__toolbar__inner {
        visibility: visible
    }


    .savgy__toolbar__toggle__icon--download {
        display: none;
    }


}

/*
.savgy__toolbar:has(input:checked) .savgy__toolbar__inner {
    display: block;
}
    */

/** loading or ready */
.savgy__button--ready {
    .savgy__icon--spinner {
        display: none;
    }

    .savgy__icon--download {
        display: inline-block;
    }


}

.savgy__button--loading {
    .savgy__icon--spinner {
        display: inline-block;
    }

    .savgy__icon--download {
        display: none;
    }
}




.savgy__toolbar__toggle__icon {
    right: 0;
    color: var(--color-bg);
    font-size: 1.5em;
}


.savgy__toolbar__button,
.savgy__toolbar__select,
.savgy__toolbar__input {
    line-height: 1em;
    height: min-content;
    display: block;
    width: 100%;
    border: none;
    border-radius: var(--brd-rad);
    background-color: var(--bg);
    color: var(--color-text);
    appearance: none;
    padding: 0;
}

.savgy__toolbar__input {
    text-align: right;
}



.savgy__toolbar__row {
    margin-bottom: 0.5em;
}

.savgy__toolbar__row--2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5em;

}

.savgy__grd-label {
    display: grid;
    grid-template-columns: 0.25fr 1.75fr;
    gap: 1em;
}

.savgy__toolbar__col {
    /*
    grid-template-areas:
    "col1 col2 col3 col4";
    */

    border: var(--brd);
    border-radius: var(--brd-rad);

    align-items: center;
    padding: var(--pdd);

    input,
    select {
        line-height: 1.2em;
        height: min-content;
        outline: none;
    }

    select {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 95 100' id='icn-chevron-down' fill='none' stroke-width='10' stroke='white'><path stroke='white' d='M84.4 32l-37.5 37.5l-37.5 -37.5'/></svg>");
        background-repeat: no-repeat;
        background-position: 100% 50%;
        background-size: 1em;
    }
}

.savgy__toolbar__row:has(.savgy__toolbar__select--format--img) {
    display: none
}

.savgy__toolbar__row:has(.savgy__toolbar__select--format--img--active) {
    display: block
}


.savgy__toolbar__select {
    grid-column-start: 0;
    grid-column-end: 1;
}

/** image rendering */
/*
.savgy__preview {
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
}
    */



.savgy--copying {
    opacity: 0.5
}

.saveg__filesize {
    margin: 0;
    margin-top: 1em;
}