@phoenix-plugin-registry/swmitra.html-designer/controlhtml/selection-pane.html

NOW WITH RESPONSIVE DESIGN TOOLS (BETA)! Design and customize web ui with HTML and CSS. Now with taggable Design snippet/bookmark support.

<style>
.controlDiv
{
    border:1px solid blue;
    height:5px;
    width:5px;
    pointer-events: all;
    background: white;
    z-index: 1;
}

.borderRadiusControlDiv
{
    border-radius:2px;
    border-color: red;
    height:4px;
    width:4px;
    background-color: white;
    z-index: 1;
}
    
.positiveXOffsetAxis{
    position:absolute;
    height:100%;
    opacity:1;
    width:0px;
    top:0px;
    left:-1px;
    border-left:1px solid blue;
}
.positiveYOffsetAxis{
    position:absolute;
    width:100%;
    opacity:1;
    height:0px;
    left:0px;
    top:-1px;
    border-top:1px solid blue;
}
.Offset{
    color:gray !important;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.negativeL1Offset{
    background-color: rgba(255, 0, 0, 0.1) !important;
}
            
.negativeL2Offset{
     background-color: rgba(255, 0, 0, 0.05) !important;
}

.negativeAxis{
    border-color:red !important;
}

.multiSelectStyle{
    border-style: dotted !important;
}
    
.pseudodraghandle{
    position:absolute;
    width:100%;
    height:100%;
}
    
.perspectiveControl{
    z-index: 1;
    pointer-events: all;
    background: red;
    height:6px;
    width:6px;
}
</style>
<div id="selection-outline" style="display: none; position: absolute; border: 1px solid blue; height: 100px; width: 400px; pointer-events: none; left: 363px; top: 241px;margin-top: -24px;margin-left: -24px;">
<div id="pseudo-after-outline" style="display: none; position: absolute; border: 1px dotted red; height: 100px; width: 400px; pointer-events: all; left: 363px; top: 241px;">
    <div class="pseudodraghandle"></div>
    </div> 
<div id="pseudo-before-outline" style="display: none; position: absolute; border: 1px dotted green; height: 100px; width: 400px; pointer-events: all; left: 363px; top: 241px;">
    <div class="pseudodraghandle"></div>
    </div>
<div id="border-outline" style="display:none;position:absolute;top:-1px;left:-1px;border:1px solid blue;height:100%;width:100%;pointer-events:none;">
    <div class="controlDiv borderRadiusControlDiv" data-type="TopLeft" id="border-top-left-control" style="position:absolute;left:-4px;top:-3px;cursor:nw-resize;">
        <div class="topLeftRadiusXAxis" style="border-top: 1px dashed orange; position: absolute; height: 0px; pointer-events: none; right: 50%; top: 50%; width: 80px;"></div>
        <div class="topLeftRadiusYAxis" style="border-left: 1px dashed orange; position: absolute; width: 0px; pointer-events: none; left: 50%; bottom: 50%; height: 80px;"></div>
    </div>    
    <div class="controlDiv borderRadiusControlDiv" data-type="TopRight" id="border-top-right-control" style="position:absolute;left:calc(100% - 2px);top:-2px;cursor:ne-resize;">
        <div class="topRightRadiusXAxis" style="border-top: 1px dashed orange; position: absolute; height: 0px; pointer-events: none; left: 50%; top: 50%; width: 80px;"></div>
        <div class="topRightRadiusYAxis" style="border-left: 1px dashed orange; position: absolute; width: 0px; pointer-events: none; left: 50%; bottom: 50%; height: 80px;"></div>
    </div>
    <div class="controlDiv borderRadiusControlDiv" data-type="BottomLeft" id="border-bottom-left-control" style="position:absolute;left:-3px;top:calc(100% - 3px);cursor:sw-resize;">
        <div class="bottomLeftRadiusXAxis" style="border-top: 1px dashed orange; position: absolute; height: 0px; pointer-events: none; right: 50%; top: 50%; width: 80px;"></div>
        <div class="bottomLeftRadiusYAxis" style="border-left: 1px dashed orange; position: absolute; width: 0px; pointer-events: none; left: 50%; top: 50%; height: 80px;"></div>
    </div>
    
    <div class="controlDiv borderRadiusControlDiv" data-type="BottomRight" id="border-bottom-right-control" style="position:absolute;left:calc(100% - 3px);top:calc(100% - 3px);cursor:nw-resize;">
        <div class="bottomRightRadiusXAxis" style="border-top: 1px dashed orange; position: absolute; height: 0px; pointer-events: none; left: 50%; top: 50%; width: 80px;"></div>
        <div class="bottomRightRadiusYAxis" style="border-left: 1px dashed orange; position: absolute; width: 0px; pointer-events: none; left: 50%; top: 50%; height: 80px;"></div>
    </div>
    
</div>
    
    <div id="y-axis-offset-indicator" style="display:block;position:absolute;left:0px;width:100%;height:0px;bottom:100%;background:lightblue;opacity:0.2"></div>
    <div id="x-axis-offset-indicator" style="display:block;position:absolute;top:0px;height:100%;right:100%;background:lightblue;opacity:0.2"></div>
    <div class="controlDiv dragResizer" data-type="TopLeft" id="top-left-control" style="position:absolute;left:-4px;top:-3px;cursor:nw-resize;"></div>
    <div class="controlDiv dragResizer" data-type="TopCenter" id="top-center-control" style="position:absolute;left:calc(50% - 3px);top:-4px;cursor:ns-resize;"></div>
    <div class="controlDiv dragResizer" data-type="TopRight" id="top-right-control" style="position:absolute;left:calc(100% - 3px);top:-3px;cursor:ne-resize;"></div>
    <div class="controlDiv dragResizer" data-type="MiddleLeft" id="middle-left-control" style="position:absolute;left:-4px;top:calc(50% - 3px);cursor:ew-resize;"></div>
    <div class="controlDiv dragResizer" data-type="BottomLeft" id="bottom-left-control" style="position:absolute;left:-4px;top:calc(100% - 3px);cursor:sw-resize;"></div>
    <div class="controlDiv dragResizer" data-type="BottomCenter" id="bottom-center-control" style="position:absolute;left:calc(50% - 3px);top:calc(100% - 3px);cursor:ns-resize;"></div>
    <div class="controlDiv dragResizer" data-type="BottomRight" id="bottom-right-control" style="position:absolute;left:calc(100% - 3px);top:calc(100% - 3px);cursor:nw-resize;"></div>
    <div class="controlDiv dragResizer" data-type="MiddleRight" id="middle-right-control" style="position:absolute;left:calc(100% - 3px);top:calc(50% - 3px);cursor:ew-resize;"></div>
    
    <div class="hLayer Offset" id="h-layer2" style="position:absolute;top:0;height:100%;background-color:rgba(0, 0, 255, 0.05)"></div>
    <div class="vLayer Offset" id="v-layer2" style="position:absolute;left:0;width:100%;background-color:rgba(0, 0, 255, 0.05)"></div>
        
</div>