svgedit/src/editor/dialogs/cmenuDialog.html

Powerful SVG-Editor for your browser

<style>
    .contextMenu {
        position: absolute;
        z-index: 99999;
        border: solid 1px rgba(0, 0, 0, .33);
        background: rgba(255, 255, 255, .95);
        padding: 5px 0;
        margin: 0px;
        display: none;
        font: 12px/15px Lucida Sans, Helvetica, Verdana, sans-serif;
        border-radius: 5px;
        -moz-border-radius: 5px;
        -moz-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
        -webkit-box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
        box-shadow: 2px 5px 10px rgba(0, 0, 0, .3);
    }

    .contextMenu li {
        list-style: none;
        padding: 0px;
        margin: 0px;
    }

    .contextMenu .shortcut {
        width: 115px;
        text-align: right;
        float: right;
    }

    .contextMenu a {
        -moz-user-select: none;
        -webkit-user-select: none;
        user-select: none;
        color: #222;
        text-decoration: none;
        display: block;
        line-height: 20px;
        height: 20px;
        background-position: 6px center;
        background-repeat: no-repeat;
        outline: none;
        padding: 0px 15px 1px 20px;
    }

    .contextMenu li.hover a {
        background-color: #2e5dea;
        color: white;
        cursor: default;
    }

    .contextMenu li.disabled a {
        color: #999;
        pointer-events: none;
    }

    .contextMenu li.hover.disabled a {
        background-color: transparent;
    }

    .contextMenu li.separator {
        border-top: solid 1px #E3E3E3;
        padding-top: 5px;
        margin-top: 5px;
    }
</style>
<ul id="cmenu_canvas" class="contextMenu">
    <li>
        <a href="#cut" id="se-cut">
            <span class="shortcut">META+X</span>
        </a>
    </li>
    <li>
        <a href="#copy" id="se-copy">
            <span class="shortcut">META+C</span>
        </a>
    </li>
    <li>
        <a href="#paste" id="se-paste"></a>
    </li>
    <li>
        <a href="#paste_in_place" id="se-paste-in-place"></a>
    </li>
    <li class="separator">
        <a href="#delete" id="se-delete">
            <span class="shortcut">BACKSPACE</span>
        </a>
    </li>
    <li class="separator">
        <a href="#group" id="se-group">
            <span class="shortcut">G</span>
        </a>
    </li>
    <li>
        <a href="#ungroup" id="se-ungroup">
            <span class="shortcut">G</span>
        </a>
    </li>
    <li class="separator">
        <a href="#move_front" id="se-move-front">
            <span class="shortcut">CTRL+SHFT+]</span>
        </a>
    </li>
    <li>
        <a href="#move_up" id="se-move-up">
            <span class="shortcut">CTRL+]</span>
        </a>
    </li>
    <li>
        <a href="#move_down" id="se-move-down">
            <span class="shortcut">CTRL+[</span>
        </a>
    </li>
    <li>
        <a href="#move_back" id="se-move-back">
            <span class="shortcut">CTRL+SHFT+[</span>
        </a>
    </li>
</ul>