svgedit/src/editor/dialogs/exportDialog.html

Powerful SVG-Editor for your browser

<style>
    #dialog_content {
        margin: 10px 10px 5px 10px;
        background: #5a6162;
        overflow: auto;
        text-align: left;
        border: 1px solid #c8c8c8;
    }

    #dialog_content p,
    #dialog_content select,
    #dialog_content label {
        margin: 10px;
        line-height: 0.3em;
    }

    #dialog_container {
        font-family: Verdana;
        text-align: center;
        left: 50%;
        top: 50%;
        max-width: 400px;
        z-index: 50001;
        background: #5a6162;
        border: 1px outset #777;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: 0.8em;
    }

    #dialog_container,
    #dialog_content {
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
    }

    #dialog_buttons input[type=text] {
        width: 90%;
        display: block;
        margin: 0 0 5px 11px;
    }

    #dialog_buttons input[type=button] {
        margin: 0 1em;
    }

    .se-select {
        text-align: center;
    }

    elix-number-spin-box {
        margin-left: 15px;
    }
</style>
<elix-dialog id="export_box" aria-label="export svg" closed>
    <div class="overlay"></div>
    <div id="dialog_container">
        <div id="dialog_content">
            <p class="se-select" id="export_select"></p>
            <p class="se-select">
                <select id="se-storage-pref">
                    <option value="PNG">PNG</option>
                    <option value="JPEG">JPEG</option>
                    <option value="BMP">BMP</option>
                    <option value="WEBP">WEBP</option>
                    <option value="PDF">PDF</option>
                </select>
            </p>
            <p id="se-quality">
                <elix-number-spin-box min="-1" max="101" step="5" value="100"></elix-number-spin-box>
            </p>
        </div>
        <div id="dialog_buttons">
            <button id="export_ok"></button>
            <button id="export_cancel"></button>
        </div>
    </div>
</elix-dialog>