@phoenix-plugin-registry/swmitra.html-designer/css/html-design-view.css

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

/* Change it to none/block to hide/show the html designer pane */
@-webkit-keyframes highlight-blink {
    0%  { outline-color:Blue; }
    50% { outline-color:Transparent; } 
    100% { outline-color:Blue; }
}

.blinkinghighlight
{ 
    outline: 2px solid Blue;
    -webkit-animation: highlight-blink .5s ease-in infinite; 
}

#status-bar {
    overflow: visible !important;
}

.forcedStatusBarInfoDarkTheme{
	background: #484B4C !important;
    background: #2d2e30 !important;
	color: #288edf !important;
}

.forcedDesignContentTheme{
	right:0px !important;
}

.forcedStatusBarIndicatorDarkTheme{
	background: #484B4C !important;
    background: #2d2e30 !important;
	color: lightgray !important;
}

#html-design-template{
	background:#2d2e30;
    height: 100%;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 20;
    display:none;
    overflow:hidden;
    pointer-events: none;
    border: 1px solid gray;
}

#widget-toolbox {
    width: 44px !important;
    height: calc(100% - 9px) !important;
    background: #484B4C;
    display: block;
    left: 1px;
    top: 0px;
    margin-top: 1px !important;
}

#design-toolbox-anchor{
    position:absolute;
    right:0px;
    top:-1px;
    border:1px solid gray;
    width: 30px !important;
    height:calc(100% - 1px) !important;
    background: #2d2e30;
    z-index:10;
    pointer-events: all;
}

#design-modal-backdrop {
    position:absolute;
    right:0px;
    top:0px;
    width: 100% !important;
    height:100% !important;
    background: rgba(97, 99, 103, 0.24);
    z-index:18;
    pointer-events: all;
    display:none;
}

#element-search-panel
{
     background: #484B4C;
     position:absolute;
     left:24px;
     width:calc(100% - 40px);
     padding:5px;
     padding-left: 10px;
     display:none;
     z-index:60; 
     top:24px;
     height:28px;
}

#fragment-link-panel
{
     background: #484B4C;
     position:absolute;
     left:24px;
     width:calc(100% - 40px);
     padding:5px;
     padding-left: 10px;
     display:none;
     z-index:60; 
     top:24px;
     height:28px;
}

#network-resource-bar {
    background: #484B4C;
     position:absolute;
     left:24px;
     width:calc(100% - 40px);
     padding:5px;
     padding-left: 10px;
     display:none;
     z-index:60; 
     top:24px;
     height:28px;
}

#designer-content-placeholder{
    max-width: calc(100% - 28px) !important;
    max-height: calc(100% - 28px) !important;
}

#markup-editor-container .horz-resizer{
    left: calc(100% - 1px) !important;
    top: 1px;
    width: 1px;
}

#markup-editor-container .vert-resizer{
    top: calc(100% - 1px) !important;
    left: 1px;
    height: 1px;
}

#designer-content-placeholder .horz-resizer{
    left: 100% !important;
    top: 1px;
    width: 4px;
    opacity: 1;
    pointer-events: none;
}

#designer-content-placeholder .vert-resizer{
    top: 100% !important;
    left: 1px;
    height: 4px;
    opacity: 1;
    pointer-events: none;
}

.fluidGridPlane {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    pointer-events:none;
}

#htmldesignerIframe
{
    padding:0px;
    border: 0px;
    width: 100% !important;
    height:100% !important;
}

#htmldesignerShadowIframe
{
    padding:0px;
    border: 0px;
    width: 100% !important;
    height:100% !important;
    display:none;
}

#mediaDetectionFrame
{
    padding:0px;
    border: 0px;
    width: 100% !important;
    height:100% !important;
    display:none;
}

.designerArtBoard
{
    /*position:absolute;*/
    width:100%;
    height:100%;
    background:white;
}

.designContent
{
    position:absolute;
    height:100%;
    width:100%;
}

#grid-settings-container {
    position:absolute;
    display: none;
    align-items: center;
    padding: 0px 5px;
    color: rgb(211, 211, 211);
    top:1px;
    left:47px;
    width: calc(100% - 92px) !important;
    height:26px;
    background: #3c3f41;
    overflow:visible;
    pointer-events: all;
    border:1px solid gray;
}

#grid-settings-container.fluidGridActivated 
{
    display: flex;
}

#html-design-editor
{
    position:absolute;
    top:1px;
    left:47px;
    border: 0px;
    width: calc(100% - 103px) !important;
    height:calc(100% - 28px);
    background: #3c3f41;
    overflow:visible;
    pointer-events: all;
    transition: all 200ms;
}

#html-design-editor.fluidGridActivated
{
    top:47px;
    height:calc(100% - 77px);
}

#html-design-editor.toolboxDocked
{
    width: calc(100% - 404px) !important;
    left:348px;
}

#grid-settings-container.toolboxDocked
{
    width: calc(100% - 393px) !important;
    left:348px;
}

#docked-toolbox {
    width: 297px !important;
    height: calc(100% - 12px) !important;
    background: #484B4C;
    display: none;
    left: 47px;
    top: 0px;
    margin-top: 1px !important;
    position: absolute;
    z-index: 10;
    border: 1px solid gray;
    transition: all 200ms;
    pointer-events: all;
}

#docked-toolbox.toolboxDocked {
    display:block;
}

#docked-toolbox .toolboxCollapsed {
    display:none !important;
}

#docked-toolbox *.topcoat-button{
    margin:0px;
}

#docked-toolbox *.propertyToolboxHeader .close {
    transition: all 200ms;
}

#docked-toolbox *.propertyToolboxHeader .close.collapsed {
    transform: rotate(180deg);
}

.eventListnerPane
{
    position:absolute;
    top:0px;
    left:0px;
    border: 0px;
    width: 100% !important;
    height: 100% !important;
}

.eventListnerPane.deactivated {
    display:none !important;
}

#scrollPlane
{
    position:absolute;
    top:0px;
    left:0px;
    border: 0px;
    width: 100% !important;
    height:100% !important;
    overflow:auto;
}

#element-drawing-plane
{
    position:absolute;
    display: none;
    top:23px;
    left:23px;
    border: 0px;
    width: 100%/*calc(100% - 390px)*/ !important;
    height:100%/*calc(100% - 23px)*/; 
    cursor: crosshair;
}

#info-overlay-plane
{
    position: absolute;
	display: block;
	top: 24px;
	left: 24px;
	border: 0px;
	width: calc(100% - 24px);
	height: calc(100% - 24px);
	pointer-events: none;
	overflow: hidden;
}

#info-overlay-plane.deactivated {
	display: none;
}

#element-resize-plane
{
    position:absolute;
    display: none;
    top:0px;
    left:0px;
    border: 0px;
    width: 100%/*calc(100% - 390px)*/ !important;
    height:100%/*calc(100% - 23px)*/; 
    z-index: 15;
}

#split-view-anchor
{
    left:40px;
    position: absolute;
    display:block;
    height:6px;
    width: 100% !important;
    bottom:0px;
    left:0px;
    border-top: 1px gray solid;
    /*border-left: 1px gray solid;*/
    background: #333;
    z-index: 40;
}

#media-breakpoints
{
    left:64px;
    position: absolute;
    display:block;
    height:6px;
    width: 100% !important;
    top:0px;
    background: #333;
    z-index: 40;
    opacity: 0.9;
}

#active-breakpoint
{
    width:1000px;
    height:4px;
    position:absolute;
    left:0px;
    top:1px;
    background:#288edf;
}

#new-breakpoint
{
    width:100% !important;
    height:4px !important;
    position:absolute !important;
    left:0px !important;
    top:1px !important;
    display:none;
}

#design-view-anchor
{
    position: absolute;
    height:100%;
    width: 6px;
    top:0px;
    right:0px;
    border: 1px gray solid;
    background: #333;
    z-index: 39;
}

.offsetVAxis{
    height:0px;
    border-top:1px dashed orange;
    position:absolute;
    width:100%;
    display:none;
    opacity:0.5;
	margin-top: -24px;
}

.offsetHAxis{
    width: :0px;
    border-left:1px dashed orange;
    position:absolute;
    height:100%;
    display:none;
    opacity:0.5;
	margin-left: -24px;
}

.multiSelectedElement {
	margin-left: -24px;
	margin-top: -24px;
}

.guidePlane {
    margin-top: 24px !important;
    margin-left: 24px !important;
    top:0px;
    left:0px;
    pointer-events:none;
    position:absolute;
    height: 100%;
    width:100%;
    z-index: 40;
}

.activesplitViewEditor{
    z-index:50;
    outline:1px solid blue;
}

.splitViewEditor{    
    pointer-events: all; 
    position: absolute; 
    padding: 10px; 
    background-color: rgb(74, 77, 78); 
    top: 25%; 
    z-index: 49; 
    left: 203px; 
    height: 40%; 
    width: 50%; 
    display: none; 
    min-width:300px; 
    max-height:calc(100% - 24px) !important;
}

@-webkit-keyframes cut-mask-blink {
    0%  { outline-color:red; }
    50% { outline-color:Transparent; } 
    100% { outline-color:red; }
}

#cut-mask{
    position:absolute;
    display:none;
    outline:1px dashed red;
    pointer-events:all;
    -webkit-animation: cut-mask-blink .2s ease-in infinite; 
}