mirror of https://github.com/artf/grapesjs.git
nocodeframeworkdrag-and-dropsite-buildersite-generatortemplate-builderui-builderweb-builderweb-builder-frameworkwebsite-builderno-codepage-builder
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
761 lines
20 KiB
761 lines
20 KiB
body{
|
|
background-color:#eee;
|
|
font-family: Helvetica, sans-serif;
|
|
margin: 0;
|
|
}
|
|
html,body,#wte-app,#editor,#canvas{height: 100%;}
|
|
.clear{clear:both}
|
|
.no-select{
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;
|
|
}
|
|
#wte-app{height: 100%; min-width: 1250px;}
|
|
#editor{
|
|
position:relative;
|
|
border: 3px solid #4b4b4b;
|
|
border-left:none; border-right:none;
|
|
box-sizing: border-box;
|
|
}
|
|
#canvas {
|
|
position: absolute;
|
|
width: 80%;
|
|
height: 100%;
|
|
top: 0; left: 3.5%;
|
|
overflow: auto;
|
|
z-index:1;
|
|
/*********TEST**********outline: 2px dashed #555; outline-offset: -2px;*/
|
|
}
|
|
#canvas *{box-sizing: border-box;}
|
|
/************* WRAPPER ****************/
|
|
#canvas > div {
|
|
height: 100%;
|
|
overflow: auto;
|
|
width: 100%;
|
|
}
|
|
/************* RTE ****************/
|
|
#canvas-overlay{
|
|
position: absolute;
|
|
height: 100%; width:100%;
|
|
z-index:1; top:0; left:0;
|
|
}
|
|
#commands.panel {
|
|
min-width: 35px;
|
|
height: 100%;
|
|
z-index:3;
|
|
}
|
|
#options.panel{ z-index:4; bottom: 0;}
|
|
#views.panel {
|
|
width: 16.5%;
|
|
font-weight: lighter;
|
|
color: #fff;
|
|
right:0; top:0;
|
|
z-index: 3;
|
|
height: 100%;
|
|
padding:0;
|
|
}
|
|
#views.panel .c{height:100%}
|
|
#commands.panel, #options.panel {width: 3.5%; left:0;}
|
|
#options .c { display: table; margin: 0 auto; }
|
|
|
|
/*********TEST**********/
|
|
body.dragging, body.dragging * { cursor: move !important;}
|
|
.dragged { position: absolute; opacity: 0.5; z-index: 2000;}
|
|
ol.example li.placeholder {position: relative;}
|
|
ol.example li.placeholder:before {position: absolute;}
|
|
/*********END-TEST**********/
|
|
.view-components #canvas div {/*highlights*/
|
|
/*border: 0.1px dashed #888; margin: -0.1px; override margin properties*/
|
|
outline: 1px dashed #888; outline-offset: -2px;
|
|
box-sizing: border-box;
|
|
/*-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
-webkit-user-select: none;
|
|
-ms-user-select: none;
|
|
-o-user-select: none;
|
|
user-select: none;*/
|
|
}
|
|
.no-dots, .ui-resizable-handle{ border: none !important; margin:0 !important; outline: none !important; }
|
|
body #canvas .hover-component, body #canvas .hover-delete-component, body #canvas .hover-move-component{ outline: 1px solid #3b97e3;}
|
|
body #canvas .hover-delete-component{
|
|
outline: 2px solid #DD3636;/*f46161*/
|
|
opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
}
|
|
body #canvas .hover-move-component{ outline: 3px solid #ffca6f;}
|
|
body #canvas .selected-component{
|
|
/*border: 3px solid #3b97e3; /*First was: outline: ...; outline-offset: -2px; changed after strange artefacts on FF */
|
|
outline: 3px solid #3b97e3;
|
|
}
|
|
.panel {
|
|
background-color: #4b4b4b;
|
|
display: inline-block;
|
|
padding: 5px;
|
|
position:absolute;
|
|
box-sizing: border-box;
|
|
z-index:2;
|
|
}
|
|
.panel .btn {
|
|
background-color: transparent;
|
|
border:none;
|
|
display: block;
|
|
height: 35px;
|
|
width: 35px;
|
|
cursor:pointer;
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
border-radius: 2px;
|
|
opacity: 0.85;
|
|
filter: alpha(opacity=85);
|
|
}
|
|
.panel .btn.expand {
|
|
background-size: 100% auto;
|
|
display: inline;
|
|
margin-right: 5px;
|
|
padding: 0 7px 0 0;
|
|
}
|
|
.btn {position:relative;}
|
|
.btn .wte-buttons{
|
|
background-color:#4b4b4b;
|
|
border-radius: 2px;
|
|
position:absolute;
|
|
padding: 5px;
|
|
display:none;
|
|
left:50px;
|
|
}
|
|
.btn .wte-buttons.visible{ display:block; }
|
|
.btn .btn-arrow {
|
|
border-bottom: 5px solid white;
|
|
border-left: 5px solid transparent;
|
|
bottom: 2px; right: 2px;
|
|
position: absolute;
|
|
}
|
|
.btn .btns-arrow {
|
|
border-bottom: 5px solid transparent;
|
|
border-right: 5px solid #4b4b4b;
|
|
border-top: 5px solid transparent;
|
|
left: -5px;
|
|
position: absolute;
|
|
top: 15px;
|
|
}
|
|
.panel .btn:hover{
|
|
opacity:1;
|
|
filter: alpha(opacity=100);
|
|
}
|
|
.panel .btn.active{
|
|
background-color: #3a3a3a;
|
|
box-shadow: inset 0 0 3px #202020;
|
|
}
|
|
.tab {
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
height: 25px; width: 25px;
|
|
padding: 10px 10px 9px;
|
|
float:left; cursor:pointer;
|
|
background-color: #3a3a3a;
|
|
}
|
|
.tabs .tab{ border-left: 1px solid #303030;}
|
|
.tabs .tab:hover{ background-color: #3e3e3e;}
|
|
.tabs .tab.active:hover{ background-color: transparent;}
|
|
.tabs .tab:first-child{border:none}
|
|
.tab.active{ background-color: transparent;}
|
|
.nav-component, .nv-item {
|
|
position: relative;
|
|
background-color: #333333;
|
|
}
|
|
.nv-item #counter {
|
|
font-size: 10px;
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 9px;
|
|
}
|
|
.nv-item #btn-eye{
|
|
background-image: url('../images/icon-eye-o.svg');
|
|
position: absolute;
|
|
top: 0;
|
|
height: 30px;
|
|
width: 30px;
|
|
background-size: 100% auto;
|
|
}
|
|
#style.tabInner .title, .nav-component .title {
|
|
background-color: #3a3a3a;
|
|
font-size: 13px;
|
|
letter-spacing: 1px;
|
|
padding: 7px 10px;
|
|
text-shadow: 0 1px 0 #252525;
|
|
border-bottom: 1px solid #303030;
|
|
border-top: 1px solid #414141;
|
|
cursor:pointer;
|
|
}
|
|
.nav-component .title {font-size: 11px;}
|
|
.nav-component .children .title{ border-left: 1px solid #404040; }
|
|
.nav-component > .children {
|
|
margin-left: 15px;
|
|
display: none;
|
|
}
|
|
.nav-component.open > .children {
|
|
display: block;
|
|
}
|
|
.btn#icon-create-comp{ background-image:url('../images/icon-create2.png');}
|
|
.btn#icon-delete-comp{ background-image:url('../images/icon-delete.png');}
|
|
.btn#icon-move-comp{ background-image:url('../images/icon-move.png');}
|
|
.btn#icon-resize-comp{ background-image:url('../images/icon-resize.png');}
|
|
.btn#icon-select-comp{ background-image:url('../images/icon-select2.png');}
|
|
.btn#icon-text-comp{ background-image:url('../images/icon-text.png');}
|
|
.btn#icon-image-comp{ background-image:url('../images/icon-image.png');}
|
|
.btn#icon-var-comp{ background-image:url('../images/icon-vars3.png');}
|
|
.btn#icon-view-comp{ background-image:url('../images/icon-eye.png');}
|
|
.btn#icon-export{ background-image:url('../images/icon-export2.png');}
|
|
.btn#icon-import{ background-image:url('../images/icon-import.png');}
|
|
.tab#style{ background-image:url('../images/icon-style.png');}
|
|
.tab#navigator{ background-image:url('../images/icon-layers.png');}
|
|
.btn.expand{ background-image:url('../images/arrow-r.png');}
|
|
.open > .title > .expand{ background-image:url('../images/arrow-d.png');}
|
|
.no-chld .expand{ background-image:none !important;}
|
|
#views.panel #tabsInner {
|
|
clear: both;
|
|
border-top: 1px solid #303030;
|
|
padding-top: 5px;
|
|
height:90%; overflow:auto;
|
|
}
|
|
#icon-pick-color {
|
|
border: 3px solid #ddd;
|
|
margin: 15px auto 7px !important;
|
|
border-radius: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
height: 20px; width: 20px;
|
|
background:#3b97e3;
|
|
opacity:1; filter: alpha(opacity=100);
|
|
}
|
|
#icon-export{
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
}
|
|
#commands .btn, #options .btn { margin: 0 auto 5px; }
|
|
.tempComp{
|
|
background-color: #5b5b5b;
|
|
border: 2px dashed #ccc;
|
|
outline:none !important;
|
|
position: absolute; z-index: 55;
|
|
opacity:0.55;
|
|
filter: alpha(opacity=55);
|
|
}
|
|
.freezed{opacity:0.35; filter: alpha(opacity=35);}
|
|
.placeholder-helper{ position:absolute; }
|
|
.sort-placeholder, .insert-placeholder {
|
|
background-color: #ffca6f;
|
|
padding:3px;
|
|
/*margin: 3px 0 !important;*/
|
|
/*outline: none !important;*/
|
|
}
|
|
.image-placeholder {
|
|
background-image:url('../images/image-placeholder.svg');
|
|
background-size: cover;
|
|
background-color: #eee;
|
|
height: 50px;
|
|
outline: 3px solid #ffca6f;
|
|
outline-offset: -3px;
|
|
width: 50px;
|
|
}
|
|
.insert-placeholder, .change-placeholder{
|
|
background-color: transparent;
|
|
height: 0px; width: 0px;
|
|
padding:0;
|
|
}
|
|
.insert-placeholder .plh-int{
|
|
background-color: #62C462;
|
|
height: 100%; width: 100%;
|
|
pointer-events: 'none';
|
|
padding: 2px;
|
|
}
|
|
.change-placeholder .plh-int{ background-color: #ffca6f; }
|
|
/*********** Helpers *************/
|
|
.componentBadge, .componentBadgeWarn, .componentBadgeWarn2{
|
|
pointer-events: none;
|
|
background-color: #3B97E3; color: #fff;
|
|
padding: 2px 5px;
|
|
position: absolute; z-index: 1;
|
|
font-size: 12px;
|
|
}
|
|
.componentBadgeWarn{ background-color:#DD3636; }
|
|
.componentBadgeWarn2{ background-color:#ffca6f; }
|
|
/********* Style Manager **********/
|
|
#styleManager #sm-head, .utilities .head {
|
|
font-size: 11px;
|
|
padding: 5px 10px;
|
|
border-bottom: 1px solid #3e3e3e;
|
|
text-shadow: 0 1px 0 #3a3a3a;
|
|
}
|
|
.sm-sector{clear:both; border-bottom: 1px solid #303030;}
|
|
.sm-label { margin: 5px 5px 2px 0;}
|
|
.sm-field {
|
|
width: 100%;
|
|
position:relative;
|
|
}
|
|
.sm-field.integer, .sm-field.select, .sm-field.list, .sm-field.color, .sm-field.composite {
|
|
background-color: #333;
|
|
border: 1px solid #292929;
|
|
box-shadow: 1px 1px 0 #575757;
|
|
border-radius: 2px;
|
|
color: #d3d3d3;
|
|
box-sizing: border-box;
|
|
padding: 0 5px;
|
|
}
|
|
.sm-field.composite{
|
|
background-color: transparent;
|
|
border: 1px solid #353535;
|
|
}
|
|
.sm-property.file, .sm-property.composite, .sm-property#background-position{
|
|
width:100%;
|
|
}
|
|
.sm-field.list{
|
|
width:auto;
|
|
padding:0;
|
|
overflow: hidden;
|
|
float:left;
|
|
}
|
|
.sm-field.list .el{
|
|
float:left;
|
|
border-left: 1px solid #252525;
|
|
padding: 5px 0;
|
|
text-shadow: 0 1px 0 #222222;
|
|
}
|
|
.sm-field.list .el:first-child{border:none}
|
|
.sm-field.list .el:hover{background:#3d3d3d}
|
|
.sm-field.list input{display:none;}
|
|
.sm-field.list label{cursor:pointer; padding: 5px;}
|
|
.sm-field.list .radio:checked + label{
|
|
background-color:#5c5c5c;
|
|
}
|
|
.sm-field.select{padding:0;}
|
|
.sm-field input {
|
|
box-sizing: border-box;
|
|
width: 30px; color: #d3d3d3;
|
|
background:none; border:none;
|
|
padding: 3px 0;
|
|
}
|
|
.sm-field select {
|
|
background: none; border: none;
|
|
color: #d3d3d3; color: transparent;
|
|
width: 100%; padding: 2px 0;
|
|
text-shadow: 0 0 0 #d3d3d3;
|
|
position: relative; z-index:1;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
}
|
|
.sm-field select::-ms-expand { display: none;}
|
|
.sm-field.select option { margin: 5px 0;}
|
|
.sm-field.integer select{ width:auto; padding: 0; color: transparent;}
|
|
.sm-field.color input{ width:50px; }
|
|
.sm-color-picker {
|
|
/*background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");*/
|
|
background-color: #fff;
|
|
border: 2px solid #555;
|
|
box-sizing: border-box;
|
|
cursor: pointer;
|
|
height: 100%; width: 20px;
|
|
position: absolute;
|
|
right: 0; top: 0;
|
|
}
|
|
.sm-field .unit {
|
|
position: absolute;
|
|
right: 10px; top: 3px;
|
|
font-size: 10px;
|
|
color:#aaa;
|
|
cursor:pointer;
|
|
}
|
|
.sm-field .int-arrows, .sm-field .sel-arrow{
|
|
height: 100%; width: 9px;
|
|
position: absolute;
|
|
right: 0; top: 0;
|
|
cursor: ns-resize;
|
|
}
|
|
.sm-field .sel-arrow{cursor:pointer}
|
|
.sm-field .u-arrow,.sm-field .d-arrow, .sm-field .d-s-arrow{
|
|
position: absolute;
|
|
height: 0; width: 0;
|
|
border-left: 3px solid transparent;
|
|
border-right: 4px solid transparent;
|
|
cursor:pointer;
|
|
}
|
|
.sm-field .u-arrow {
|
|
border-bottom: 4px solid #aaa;
|
|
top: 4px;
|
|
}
|
|
.sm-field .d-arrow, .sm-field .d-s-arrow {
|
|
border-top: 4px solid #aaa;
|
|
bottom: 4px;
|
|
}
|
|
.sm-field .d-s-arrow{ bottom: 7px; }
|
|
.sm-properties {
|
|
font-size: 11px;
|
|
padding: 10px 5px;
|
|
}
|
|
.stack .sm-properties{padding-top: 5px;}
|
|
.sm-property{
|
|
box-sizing: border-box;
|
|
float:left; width:50%;
|
|
margin-bottom: 5px;
|
|
padding: 0 5px;
|
|
}
|
|
.sm-field.list .icon{
|
|
background-repeat: no-repeat;
|
|
background-position:center;
|
|
color: transparent;
|
|
text-shadow: none;
|
|
padding: 5px 19px;
|
|
}
|
|
.sm-property .btn{
|
|
background-color: #5d5d5d;
|
|
border-radius: 2px;
|
|
box-shadow: 1px 1px 0 #3f3f3f, 1px 1px 0 #656565 inset;
|
|
padding: 5px;
|
|
position: relative;
|
|
text-align: center;
|
|
height: auto; width: 100%;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
box-sizing: border-box;
|
|
text-shadow: -1px -1px 0 #444;
|
|
}
|
|
.sm-property .btn-c {
|
|
box-sizing: border-box;
|
|
float: left;
|
|
width: 50%;
|
|
padding: 0 5px;
|
|
}
|
|
.btn-upload #upload {
|
|
left: 0; top: 0;
|
|
position: absolute;
|
|
width: 100%;
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
}
|
|
.sm-field.stack #add {
|
|
background: none;
|
|
border: none;
|
|
color: white;
|
|
cursor: pointer;
|
|
font-size: 22px;
|
|
line-height: 10px;
|
|
position: absolute;
|
|
right: 0; top: -20px;
|
|
opacity: 0.75;
|
|
}
|
|
.sm-field.stack #add:hover{ opacity: 1;}
|
|
.sm-field .layers, .sm-property .sm-layers {
|
|
background-color: #3d3d3d;
|
|
border: 1px solid #353535;
|
|
border-radius: 2px;
|
|
box-shadow: 1px 1px 0 #575757;
|
|
margin-top: 5px;
|
|
min-height: 30px;
|
|
}
|
|
.sm-layers .sm-layer {
|
|
background-color: #454545;
|
|
border-radius: 2px;
|
|
box-shadow: 1px 1px 0 #333333, 1px 1px 0 #505050 inset;
|
|
margin: 2px;
|
|
padding: 7px;
|
|
position: relative;
|
|
cursor: pointer;
|
|
}
|
|
.sm-property.file #preview-box {
|
|
background-color: #404040;
|
|
border-radius: 2px;
|
|
margin-top: 5px;
|
|
position:relative;
|
|
overflow: hidden;
|
|
}
|
|
.sm-property.file #preview-box.show{
|
|
border: 1px solid #3d3d3d;
|
|
padding: 3px 5px;
|
|
}
|
|
.sm-property.file .show #preview-file{
|
|
height: 50px;
|
|
}
|
|
.sm-property.file #preview-file {
|
|
background-size: auto 100%;
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
}
|
|
.sm-layer > #preview-box {
|
|
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==");
|
|
height: 15px;
|
|
position: absolute;
|
|
right: 27px;
|
|
top: 6px;
|
|
width: 15px;
|
|
}
|
|
.sm-layer > #preview-box #preview {
|
|
background-color: white;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.sm-layer.active {
|
|
background-color: #4c4c4c;
|
|
border: 1px solid #555555;
|
|
}
|
|
.sm-layer #preview-box,.sm-layer #preview{border-radius:2px;}
|
|
.sm-layer.no-preview #preview-box{display:none;}
|
|
.sm-property.file #preview-box #close{display:block;}
|
|
.btn-upload #label { padding: 2px 0;}
|
|
.sm-field.list .icon.float-left{ background-image:url('../images/icon-box-l.png'); }
|
|
.sm-field.list .icon.float-right{ background-image:url('../images/icon-box-r.png'); }
|
|
.sm-field.list .icon.float-center{ background-image:url('../images/icon-box-c.png'); }
|
|
.sm-field.list .icon.none{ background-image:url('../images/icon-none.png'); }
|
|
/********* customs **********/
|
|
.sm-property#width .sm-label, .sm-property#height .sm-label{float:left;}
|
|
.sm-property#width .sm-field, .sm-property#height .sm-field{float:left; /*width: 59px;*/}
|
|
.sm-property#position, .sm-property#float,.sm-property#font-family,.sm-property#text-align,
|
|
.sm-property#background-color{width:100%}
|
|
.sm-property#background-color input{width:130px;}
|
|
/*********Modal dialog**********/
|
|
.dialog-container {
|
|
background-color: #000;
|
|
position: absolute;
|
|
top: 0; z-index: 10;
|
|
width:100%; height:100%;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
|
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000)";
|
|
}
|
|
.modal-dialog {
|
|
background-color: #4b4b4b;
|
|
border-bottom: 2px solid #353535;
|
|
text-shadow: -1px -1px 0 #353535;
|
|
margin: 30px auto 0;
|
|
max-width: 850px;
|
|
width: 90%;
|
|
color: #eee;
|
|
border-radius: 3px;
|
|
font-weight: lighter;
|
|
}
|
|
.dialog-header, .dialog-content{padding:10px 15px; clear: both;}
|
|
.dialog-header{ border-bottom: 1px solid #3d3d3d;}
|
|
.dialog-content { border-top: 1px solid #575757;}
|
|
.modal-dialog .title { float: left; }
|
|
.modal-dialog .btn-close {
|
|
cursor: pointer;
|
|
float: right;
|
|
background-image: url("../images/icon-none.png");
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
height: 20px; width: 20px;
|
|
}
|
|
/********* File uploader **********/
|
|
.wte-file-uploader {width: 55%; float:left;}
|
|
.wte-file-uploader > form {
|
|
background-color: #3d3d3d;
|
|
border: 2px dashed #999999;
|
|
border-radius: 3px;
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 15px;
|
|
}
|
|
.wte-file-uploader > form #wte-uploadFile,
|
|
.wte-file-uploader #title{ padding: 150px 10px; }
|
|
.wte-file-uploader > form #wte-uploadFile{
|
|
opacity: 0; filter: alpha(opacity=0);
|
|
width: 100%;
|
|
}
|
|
.wte-file-uploader #title { position: absolute;width: 100%;}
|
|
.wte-file-uploader > form.hover {
|
|
border: 2px solid #62c462;
|
|
color:#7ee07e;
|
|
}
|
|
/********* Assets Manager **********/
|
|
.wte-assets {
|
|
background-color: #3d3d3d;
|
|
border-radius: 3px;
|
|
box-sizing: border-box;
|
|
margin-left: 3%;
|
|
padding: 5px;
|
|
width: 42%;
|
|
float:right;
|
|
height: 325px;
|
|
overflow: auto;
|
|
}
|
|
.wte-asset {
|
|
border-bottom: 1px solid #343434;
|
|
padding: 5px 0;
|
|
cursor:pointer;
|
|
position: relative;
|
|
}
|
|
.wte-asset #close, .sm-property.file #close, .btn-close {
|
|
font-size: 20px;
|
|
display: none;
|
|
opacity: 0.3; filter: alpha(opacity=30);
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: 5px;
|
|
top: 0;
|
|
}
|
|
.sm-layers .sm-layer #close-layer{
|
|
display:block;
|
|
opacity: 0.2;
|
|
font-size: 23px;
|
|
}
|
|
.sm-layers .sm-layer #close-layer:hover{ opacity: 0.7;}
|
|
.wte-asset #close:hover{
|
|
opacity: 0.7; filter: alpha(opacity=70);
|
|
}
|
|
.wte-asset:hover #close { display: block;}
|
|
.wte-asset.wte-highlight {
|
|
background-color: #444444;
|
|
}
|
|
.wte-asset #meta {
|
|
width: 70%;
|
|
float: left;
|
|
font-size: 12px;
|
|
padding: 5px 0 0 5px;
|
|
box-sizing: border-box;
|
|
}
|
|
.wte-asset #meta > div { margin-bottom: 5px;}
|
|
.wte-asset #preview{
|
|
height: 70px; width: 30%;
|
|
background-position: center center;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-color: #444;
|
|
border-radius: 2px;
|
|
float: left;
|
|
}
|
|
.wte-asset #meta #dimensions {
|
|
font-size: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/********* Export template **********/
|
|
.editor#html, .editor#css{
|
|
float:left;
|
|
box-sizing: border-box;
|
|
width:50%;
|
|
}
|
|
.editor#html { padding-right: 10px; border-right: 1px solid #3d3d3d;}
|
|
.editor#css { padding-left: 10px; border-left: 1px solid #575757;}
|
|
.editor #mode {
|
|
background-color: #353535;
|
|
font-size: 12px;
|
|
padding: 5px 10px 3px;
|
|
text-align: right;
|
|
}
|
|
#html.editor #mode { color: #a97d44;}
|
|
#css.editor #mode { color: #ddca7e;}
|
|
|
|
/********* Spectrum **********/
|
|
.sp-hue, .sp-slider{ cursor: row-resize;}
|
|
.sp-color, .sp-dragger{ cursor: crosshair;}
|
|
.sp-alpha-inner, .sp-alpha-handle{cursor: col-resize;}
|
|
.sp-hue{ left: 90%; }
|
|
.sp-color{right: 15%;}
|
|
.sp-container {
|
|
background-color: #454545;
|
|
border: 1px solid #333333;
|
|
box-shadow: 0 0 7px #111;
|
|
border-radius: 3px;
|
|
}
|
|
.sp-picker-container{border:none;}
|
|
.colpick_dark .colpick_color { outline: 1px solid #333;}
|
|
.sp-cancel, .sp-cancel:hover {
|
|
bottom: -8px;
|
|
color: #777 !important;
|
|
font-size: 25px;
|
|
left: 0;
|
|
position: absolute;
|
|
text-decoration:none;
|
|
}
|
|
.sp-alpha-handle {
|
|
background-color: #ccc;
|
|
border: 1px solid #555;
|
|
width: 4px;
|
|
}
|
|
.sp-color, .sp-hue { border: 1px solid #333333;}
|
|
.sp-slider {
|
|
background-color: #ccc;
|
|
border: 1px solid #555;
|
|
height: 3px;
|
|
left: -4px;
|
|
width: 22px;
|
|
}
|
|
.sp-dragger{background:transparent; box-shadow: 0 0 0 1px #111;}
|
|
.sp-button-container{
|
|
float: none;
|
|
width: 100%;
|
|
position: relative;
|
|
text-align: right;
|
|
}
|
|
.sp-container button, .sp-container button:hover, .sp-container button:active{
|
|
background: #333;
|
|
border-color: #292929;
|
|
color: #757575;
|
|
text-shadow: none;
|
|
box-shadow: none;
|
|
padding: 3px 5px;
|
|
}
|
|
|
|
/*********JQuery-UI**********/
|
|
.ui-sortable-helper{
|
|
opacity: 0.7; filter: alpha(opacity=70);
|
|
}
|
|
.ui-sort-highlight{/*ui-sortable-placeholder*/
|
|
background:#123;
|
|
height:20px;
|
|
}
|
|
.ui-resizable{ position:relative;}
|
|
.ui-resizable-se, .ui-resizable-s,.ui-resizable-e{
|
|
position:absolute;
|
|
right: 0;
|
|
bottom:0;
|
|
cursor: nwse-resize;
|
|
height:15px;
|
|
width:15px;
|
|
outline: none !important;
|
|
}
|
|
.ui-resizable-se{
|
|
background-image:url('../images/resize-dots.png');
|
|
opacity: 0; filter: alpha(opacity=0);
|
|
}
|
|
.ui-resizable:hover > .ui-resizable-se{ opacity: 0.3; filter: alpha(opacity=30); }
|
|
.ui-resizable-s{
|
|
height:10px;
|
|
width:100%;
|
|
cursor: ns-resize;
|
|
}
|
|
.ui-resizable-e{
|
|
width:10px;
|
|
height:100%;
|
|
cursor: ew-resize;
|
|
}
|
|
/*************RTE****************/
|
|
.rte-editor { position: relative; z-index: 2; }
|
|
#rte-toolbar {
|
|
background-color: #4b4b4b;
|
|
border: 1px solid #3f3f3f;
|
|
position: absolute;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
z-index: 5;
|
|
}
|
|
#rte-toolbar .btn {
|
|
float: left;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
height:25px; width:25px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 60% auto;
|
|
border-right: 1px solid #353535;
|
|
cursor: pointer
|
|
}
|
|
#rte-toolbar .btn:last-child{ border-right:none; }
|
|
#rte-toolbar .btn.btn-info{ background-color:#3a3a3a; }
|
|
#rte-toolbar .btn[data-edit=bold]{ background-image:url('../images/icon-bold.png');}
|
|
#rte-toolbar .btn[data-edit=italic]{ background-image:url('../images/icon-italic.png');}
|
|
#rte-toolbar .btn[data-edit=underline]{ background-image:url('../images/icon-underline.png');}
|
|
#rte-toolbar .btn:hover { background-color: #5f5f5f;}
|