svgedit/src/editor/dialogs/editorPreferencesDialog.html

Powerful SVG-Editor for your browser

<style>
    :not(:defined) {
        display: none;
    }

    /* Force the scroll bar to appear so we see it hide when overlay opens. */
    body::-webkit-scrollbar {
        background: lightgray;
    }

    body::-webkit-scrollbar-thumb {
        background: darkgray;
    }

    .toolbar_button button {
        border: 1px solid #dedede;
        line-height: 130%;
        float: left;
        background: #E8E8E8 none;
        padding: 5px 10px 5px 7px;
        /* Firefox */
        line-height: 17px;
        /* Safari */
        margin: 5px 20px 0 0;
        border: 1px var(--border-color) solid;
        border-top-color: #FFF;
        border-left-color: #FFF;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        cursor: pointer;
    }

    .toolbar_button button:hover {
        border: 1px #e0a874 solid;
        border-top-color: #fcd9ba;
        border-left-color: #fcd9ba;
        background-color: #FFC;
    }

    .toolbar_button button:active {
        background-color: #F4E284;
        border-left: 1px solid #663300;
        border-top: 1px solid #663300;
    }

    .toolbar_button button .svg_icon {
        margin: 0 3px -3px 0 !important;
        padding: 0;
        border: none;
        width: 16px;
        height: 16px;
    }

    .color_block {
        top: 0;
        left: 0;
    }

    .color_block svg {
        display: block;
    }

    #bg_blocks {
        overflow: auto;
        margin-left: 30px;
    }

    #bg_blocks .color_block {
        position: static;
    }

    #svginfo_bg_note {
        font-size: .9em;
        font-style: italic;
        color: #444;
    }

    #svg_prefs #svg_prefs_container {
        padding: 10px;
        background-color: #5a6162;
        color: #c5c5c5;
        border: 1px outset #777;
        opacity: 1.0;
        font-family: Verdana, Helvetica, sans-serif;
        font-size: .8em;
        z-index: 20001;
    }

    #tool_prefs_back {
        margin-left: 1em;
        overflow: auto;
    }

    #tool_prefs_save {
        width: 30%;
        background-color: #c79605;
        margin-left: 20%;
    }

    #tool_prefs_cancel {
        width: 30%;
        background-color: #c8c8c8;
    }

    #svg_prefs #svg_docprops_prefs {
        float: left;
        width: 221px;
        margin: 5px .7em;
        overflow: hidden;
    }

    #svg_prefs_container fieldset+fieldset {
        float: right;
    }

    #svg_prefs legend {
        max-width: 195px;
    }

    #svg_prefs_container>fieldset>legend {
        font-weight: bold;
        font-size: 1.1em;
    }

    #svg_prefs fieldset {
        padding: 5px;
        margin: 5px;
        border: 1px solid #DDD;
    }

    #svg_prefs_container label {
        display: block;
        margin: .5em;
    }

    #svg_prefs_container div.color_block {
        float: left;
        margin: 2px;
        padding: 20px;
        border: 1px solid #6f6f6f;
    }

    #change_background div.cur_background {
        border: 2px solid blue;
        padding: 19px;
    }

    #canvas_bg_url {
        display: block;
        width: 96%;
    }

    #svg_prefs button {
        margin-top: 0;
        margin-bottom: 5px;
    }
</style>
<elix-dialog id="svg_prefs" aria-label="Editor Preferences" closed>
    <div id="svg_prefs_container">
        <div id="tool_prefs_back" class="toolbar_button">
            <button id="tool_prefs_save"></button>
            <button id="tool_prefs_cancel"></button>
        </div>
        <fieldset>
            <legend id="svginfo_editor_prefs"></legend>
            <label>
                <span id="svginfo_lang"></span>
                <!-- Source: https://en.wikipedia.org/wiki/Language_names -->
                <select id="lang_select">
                    <option id="lang_ar" value="ar">العربية</option>
                    <option id="lang_cs" value="cs">Čeština</option>
                    <option id="lang_de" value="de">Deutsch</option>
                    <option id="lang_en" value="en" selected="selected">English</option>
                    <option id="lang_es" value="es">Español</option>
                    <option id="lang_fa" value="fa">فارسی</option>
                    <option id="lang_fr" value="fr">Français</option>
                    <option id="lang_fy" value="fy">Frysk</option>
                    <option id="lang_hi" value="hi">हिन्दी, हिंदी</option>
                    <option id="lang_it" value="it">Italiano</option>
                    <option id="lang_ja" value="ja">日本語</option>
                    <option id="lang_nl" value="nl">Nederlands</option>
                    <option id="lang_pl" value="pl">Polski</option>
                    <option id="lang_pt-BR" value="pt-BR">Português (BR)</option>
                    <option id="lang_ro" value="ro">Română</option>
                    <option id="lang_ru" value="ru">Русский</option>
                    <option id="lang_sk" value="sk">Slovenčina</option>
                    <option id="lang_sl" value="sl">Slovenščina</option>
                    <option id="lang_sv" value="sv">Svenska</option>
                    <option id="lang_tr" value="tr">Türkçe</option>
                    <option id="lang_uk" value="uk">Українська</option>
                    <option id="lang_zh-CN" value="zh-CN">简体中文</option>
                    <option id="lang_zh-TW" value="zh-TW">繁體中文</option>
                </select>
            </label>
            <fieldset id="change_background">
                <legend id="svginfo_change_background"></legend>
                <div id="bg_blocks"></div>
                <label>
                    <span id="svginfo_bg_url"></span>
                    <input type="text" id="canvas_bg_url" />
                </label>
                <p id="svginfo_bg_note"></p>
            </fieldset>
            <fieldset id="change_grid">
                <legend id="svginfo_grid_settings"></legend>
                <label for="svginfo_snap_onoff">
                    <span id="svginfo_snap_onoff"></span>
                    <input type="checkbox" value="snapping_on" id="grid_snapping_on" />
                </label>
                <label for="grid_snapping_step">
                    <span id="svginfo_snap_step"></span>
                    <input type="text" id="grid_snapping_step" size="3" value="10" />
                </label>
                <label>
                    <span id="svginfo_grid_color"></span>
                    <input type="text" id="grid_color" size="3" value="#000" />
                </label>
            </fieldset>
            <fieldset id="units_rulers">
                <legend id="svginfo_units_rulers"></legend>
                <label>
                    <span id="svginfo_rulers_onoff"></span>
                    <input id="show_rulers" type="checkbox" value="show_rulers" checked="checked" />
                </label>
                <label>
                    <span id="svginfo_unit"></span>
                    <select id="base_unit">
                        <option value="px">Pixels</option>
                        <option value="cm">Centimeters</option>
                        <option value="mm">Millimeters</option>
                        <option value="in">Inches</option>
                        <option value="pt">Points</option>
                        <option value="pc">Picas</option>
                        <option value="em">Ems</option>
                        <option value="ex">Exs</option>
                    </select>
                </label>
            </fieldset>
        </fieldset>
    </div>
</elix-dialog>