454 lines
9.7 KiB
CSS
454 lines
9.7 KiB
CSS
@import url("../fonts/OpenSans.css");
|
|
@font-face {
|
|
font-family: 'iMobileIcon';
|
|
src: url('../fonts/iMobileIcon.eot');
|
|
src: url('../fonts/iMobileIcon.eot#iMobileIcon') format('embedded-opentype'),
|
|
url('../fonts/iMobileIcon.svg#iMobileIcon') format('svg'),
|
|
url('../fonts/iMobileIcon.woff') format('woff'),
|
|
url('../fonts/iMobileIcon.ttf') format('truetype');
|
|
}
|
|
@font-face {
|
|
font-family: 'icons8_win10';
|
|
src:url('../fonts/icons8_win10.eot');
|
|
src: url('../fonts/icons8_win10.eot#icons8_win10') format('embedded-opentype'),
|
|
url('../fonts/icons8_win10.svg#icons8_win10') format('svg'),
|
|
url('../fonts/icons8_win10.woff') format('woff'),
|
|
url('../fonts/icons8_win10.ttf') format('truetype');
|
|
}
|
|
#canvas {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
overflow: auto;
|
|
}
|
|
#backcanvas{
|
|
position:absolute;
|
|
padding:0;
|
|
bottom: 3px; /* to set svg height without scroll */
|
|
top:32px;
|
|
right:10px;
|
|
left:20px;
|
|
}
|
|
#layoutSteps{
|
|
position:absolute;
|
|
top:33px;
|
|
left:45px;
|
|
/*left:55px;*/
|
|
height:15px;
|
|
width:595px;
|
|
overflow:hidden;
|
|
z-index:1;
|
|
}
|
|
#grid_container{
|
|
height: 100%;
|
|
width: 100%;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
.dropshadow{
|
|
position: relative;
|
|
z-index:10;
|
|
}
|
|
#loader{
|
|
position:absolute;
|
|
width:100%;
|
|
bottom:0;
|
|
top:0px;
|
|
opacity: 0.8;
|
|
z-index:1000000000;
|
|
background:#FFFFFF url(./images/loader.gif) no-repeat center center;
|
|
}
|
|
|
|
#parameters_wrapper{
|
|
position:absolute;
|
|
display:none;
|
|
top:80px;
|
|
left:500px;
|
|
width:400px;
|
|
height:600px;
|
|
background-color:#ECEAEA;
|
|
}
|
|
#grid_container > .col_item{
|
|
box-sizing: border-box;
|
|
padding: 0px 10px;
|
|
border-color: #D5D5D5;
|
|
border-width: 0px 1px ;
|
|
border-style: solid;
|
|
}
|
|
#grid_container > .col_item ~ .col_item{ /*E' diffficile da spiegare ma davide ha capito*/
|
|
/* tutti tranne il 1° */
|
|
border-left-width: 0px;
|
|
}
|
|
#grid_container > .col_item_left_hover{
|
|
border-right: 1px solid #00A0BD;
|
|
box-shadow: 2px 0px 3px -2px #00A0BD;
|
|
}
|
|
#grid_container > .col_item_left_hover.col_item_right_hover{
|
|
border-left: 1px solid #00A0BD; /* work only in first col */
|
|
box-shadow: 2px 0px 3px -2px #00A0BD, -2px 0px 3px -2px #00A0BD;
|
|
}
|
|
#grid_container > .col_item_right_hover{
|
|
border-right: 1px solid #00A0BD;
|
|
box-shadow: 2px 0px 3px -2px #00A0BD;
|
|
}
|
|
|
|
|
|
#grid_container > .col_item .inner_col{
|
|
height: 100%;
|
|
/* border: 1px solid #D5D5D5; */
|
|
box-sizing: border-box;
|
|
z-index:0;
|
|
}
|
|
#grid_container > .row_item{
|
|
z-index: 0;
|
|
box-sizing: border-box;
|
|
padding: 10px 0px;
|
|
border-top: 1px solid #D5D5D5;
|
|
border-bottom: 1px solid #D5D5D5;
|
|
}
|
|
#grid_container > .row_item ~ .row_item{
|
|
border-bottom-width: 0px;
|
|
}
|
|
#grid_container > .row_item_top_hover {
|
|
border-top: 1px solid #00A0BD;
|
|
box-shadow: 0px -2px 3px -2px #00A0BD;
|
|
}
|
|
#grid_container > .row_item_top_hover.row_item_bottom_hover {
|
|
border-bottom: 1px solid #00A0BD;
|
|
box-shadow: 0px -2px 3px -2px #00A0BD, 0px 2px 3px -2px #00A0BD;;
|
|
}
|
|
#grid_container > .row_item_bottom_hover {
|
|
border-top: 1px solid #00A0BD;
|
|
box-shadow: 0px -2px 3px -2px #00A0BD;
|
|
}
|
|
|
|
#grid_container > .row_item .inner_row{
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
z-index:0;
|
|
}
|
|
svg path {
|
|
shape-rendering: auto;
|
|
}
|
|
.items_title .text{
|
|
padding-left:5px;
|
|
line-height:18px;
|
|
display: inline-block;
|
|
}
|
|
.items_title .plus{
|
|
position:relative;
|
|
float:right;
|
|
right:0px;
|
|
width:16px;
|
|
height:16px;
|
|
}
|
|
.items_title .plus::after{
|
|
content: '\e605';
|
|
font-family: iMobileIcon;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
color: #00A0BD;
|
|
position: absolute;
|
|
right: 0px;
|
|
z-index: 1;
|
|
}
|
|
.items_content{
|
|
position:relative;
|
|
color:#818181;
|
|
font-size:12px;
|
|
font-family: Open Sans;
|
|
font-weight: 100;
|
|
}
|
|
.items_content ul{
|
|
position:relative;
|
|
list-style:none;
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
#item_select{
|
|
width:80%;
|
|
}
|
|
|
|
.resize_handle{
|
|
background: #000 url(../portalstudio/images/ps-editor-resize.png) no-repeat center center;
|
|
position: absolute;
|
|
bottom: 0px;
|
|
right: 0px;
|
|
height: 12px;
|
|
width: 12px;
|
|
cursor: nwse-resize;
|
|
z-index: 3;
|
|
}
|
|
.item_rect{
|
|
user-select: none;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
background: #FFFFFF;
|
|
z-index: 1;
|
|
}
|
|
.item_rect.ondrag{
|
|
opacity: 0.3;
|
|
}
|
|
.item_rect.hide{
|
|
z-index: 0;
|
|
display: none;
|
|
}
|
|
.item_rect::after{
|
|
content: '';
|
|
width: 100%;
|
|
height: 100%;
|
|
display: block;
|
|
background: #FFFFFF;
|
|
opacity: 0.02;
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
box-sizing: border-box;
|
|
}
|
|
.item_rect.hidden { /* when drag */
|
|
display: none;
|
|
}
|
|
.item_rect.hide::after{
|
|
opacity: .6;
|
|
border: 0px solid #888888;
|
|
background-color: #FFF;
|
|
}
|
|
.item_rect.hightlight::after{
|
|
background: #FF0;
|
|
opacity: .6;
|
|
}
|
|
.item_rect.item_group{
|
|
background-color: rgba(242, 226, 253, 0.7);
|
|
}
|
|
.item_rect.item_resource{
|
|
background-color: rgba(187, 221, 255, 0.7)
|
|
}
|
|
.item_rect.item_area{
|
|
background: rgba(253, 237, 206, 0.7);
|
|
border: 1px solid #FFFFFF;
|
|
box-sizing: border-box;
|
|
}
|
|
.item_rect.item_static{
|
|
background-color: rgba(223, 243, 207, 0.7);
|
|
}
|
|
.item_rect.selected{
|
|
border: 1px solid #454545;
|
|
box-shadow: inset 0px 0px 2px 0px #888;
|
|
cursor: move;
|
|
z-index: 2;
|
|
}
|
|
.item_rect.selected::after{
|
|
content: none;
|
|
}
|
|
.item_rect.selected.popup{
|
|
z-index: 2;
|
|
}
|
|
.item_rect.hide.selected{
|
|
border: 1px solid #454545;
|
|
display: block;
|
|
}
|
|
.item_rect.hide.selected::after{
|
|
background: #FFFFFF;
|
|
opacity: .4;
|
|
content: '';
|
|
}
|
|
.item_title{
|
|
padding: 4px;
|
|
color: #000000;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
font-family: Open Sans;
|
|
user-select: none;
|
|
display: block;
|
|
text-align: center;
|
|
max-width: 100%;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
cursor: move;
|
|
position:absolute;
|
|
right:0;
|
|
z-index:1;
|
|
background-color: rgba(255,255,255,.4);
|
|
box-sizing: border-box;
|
|
}
|
|
.ctrl_render{
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
}
|
|
.popup_picker{
|
|
font-family: iMobileIcon;
|
|
font-weight: normal;
|
|
font-size: 18px;
|
|
color: #232323;
|
|
cursor: pointer;
|
|
padding: 0px 5px;
|
|
vertical-align: sub;
|
|
}
|
|
.popup_picker.opened{
|
|
background: #CCCCCC;
|
|
}
|
|
#popup_picker_container {
|
|
background: #D2D2D2;
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
position: absolute;
|
|
z-index: 2;
|
|
box-shadow: 0px 0px 1px #888;
|
|
}
|
|
#popup_picker_container.close {
|
|
display: none;
|
|
}
|
|
#popup_picker_container.opened{
|
|
display: block;
|
|
}
|
|
|
|
#popup_picker_container li{
|
|
font-family. Open Sans;
|
|
font-size: 12px;
|
|
font-weight: 100;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 5px 25px 5px 5px;
|
|
}
|
|
#popup_picker_container li:hover{
|
|
background: rgba(0,0,0,.1);
|
|
}
|
|
#popup_picker_container li .close{
|
|
font-family: iMobileIcon;
|
|
font-size: 14px;
|
|
color: #660000;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
right: 2px;
|
|
}
|
|
.resource_item{
|
|
padding:0;
|
|
margin:0;
|
|
cursor: pointer;
|
|
font-weight: 100;
|
|
color: #666666;
|
|
}
|
|
.resource_item.selected > .resource_item_text{
|
|
color: #000000;
|
|
font-family: Open Sans;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
}
|
|
.resource_item.selected{
|
|
cursor: move;
|
|
}
|
|
.resource_item.inserted{
|
|
cursor: pointer;
|
|
}
|
|
|
|
.resource_item::before {
|
|
content: '\e95b';
|
|
font-family: icons8_win10;
|
|
font-size: 17px;
|
|
vertical-align: super;
|
|
float: right;
|
|
line-height: 20px;
|
|
color: #B0B0B0;
|
|
}
|
|
.resource_item.selected::before {
|
|
color: #232323;
|
|
}
|
|
.resource_item.show::before {
|
|
content: '\e95b';
|
|
}
|
|
.resource_item.hide::before {
|
|
content: '\e95c';
|
|
}
|
|
.resource_item.popup::before {
|
|
content: '\ee1d';
|
|
}
|
|
|
|
|
|
.resource_item .resource_item_ico{
|
|
cursor: move;
|
|
background-color:transparent;
|
|
background-image:url(images/resource.png);
|
|
background-repeat:no-repeat;
|
|
background-position:top left;
|
|
width:16px;
|
|
height:16px;
|
|
display: inline-block;
|
|
left:0;
|
|
padding: 2px 2px;
|
|
}
|
|
.resource_item.selected > .resource_item_ico{
|
|
background-image:url(images/resource_selected.png);
|
|
}
|
|
.resource_item.inserted > .resource_item_ico{
|
|
background-image:url(images/resource_inserted.png);
|
|
}
|
|
.resource_item.selected.inserted > .resource_item_ico{
|
|
background-image:url(images/resource_inserted_selected.png);
|
|
}
|
|
.resource_item .resource_item_text{
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
-o-text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
padding: 2px 0px;
|
|
display: inline-block;
|
|
font-weight: 100;
|
|
}
|
|
.resource_item_group{
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.resource_item.resource_item_group > .resource_item_ico{
|
|
background-image:url(images/group.png);
|
|
}
|
|
.resource_item.resource_item_group.selected > .resource_item_ico{
|
|
background-image:url(images/group_selected.png);
|
|
}
|
|
.resource_item.resource_item_group.inserted > .resource_item_ico{
|
|
background-image:url(images/group_inserted.png);
|
|
}
|
|
.resource_item.resource_item_group.inserted.selected > .resource_item_ico{
|
|
background-image:url(images/group_inserted_selected.png);
|
|
}
|
|
.resource_item_resource{
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
.resource_item > ul > li.resource_item{
|
|
padding-left: 10px;
|
|
}
|
|
.resource_item.resource_item_static > .resource_item_ico{
|
|
background-image:url(images/static.png);
|
|
}
|
|
.resource_item.resource_item_static.selected > .resource_item_ico{
|
|
background-image:url(images/static_selected.png);
|
|
}
|
|
.resource_item.resource_item_static.inserted > .resource_item_ico{
|
|
background-image:url(images/static_inserted.png);
|
|
}
|
|
.resource_item.resource_item_static.inserted.selected > .resource_item_ico{
|
|
background-image:url(images/static_inserted_selected.png);
|
|
}
|
|
|
|
.resource_item.resource_item_area > .resource_item_ico{
|
|
background-image:url(images/area.png);
|
|
}
|
|
.resource_item.resource_item_area.selected > .resource_item_ico{
|
|
background-image:url(images/area_selected.png);
|
|
}
|
|
.resource_item.resource_item_area.inserted > .resource_item_ico{
|
|
background-image:url(images/area_inserted.png);
|
|
}
|
|
.resource_item.resource_item_area.inserted.selected > .resource_item_ico{
|
|
background-image:url(images/area_inserted_selected.png);
|
|
}
|