style.less

@colorList : hsl(0, 0%, 100%);
.b-shadow(@x: 0; @y: 0; @blur: 1px; @spread: 0; @color: #000) {
    -webkit-box-shadow: @arguments;
       -moz-box-shadow: @arguments;
            box-shadow: @arguments;
}

.position-a(@top: auto; @right: auto; @btm: auto; @left: auto;){
	position: absolute;
	top: @top;
	right: @right;
	left: @left;
	bottom: @btm
}

.cur(@cursor){
	cursor: @cursor;
}

.flexBox(@j-content: flex-start; @f-flow: row nowrap;){
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	justify-content: @j-content;
	flex-flow: @f-flow;
}

.m-center(){
	margin: 0 auto;
}

h1, h2, h3, h4, body{
	margin: 0;
}

:root{
	background: hsl(180, 80%, 90%);
    font-family: '微軟正黑體', '標楷體', sans-serif;
}

.banner{
	position: relative;
	height: 8em;
	background: hsl(185, 40%, 60%);
	.m-center();
}

.toolingwrap{
	width: 770px;
	background: extract(@colorList, 1);
    border-radius: 10px 10px 0 0;
	.flexBox(space-between);
    border-bottom: 1px solid hsl(0, 0%, 80%);
    & >.btnstyle{
    	padding: 0.8em 2em;  
    	z-index: 5; 
    }
}

.tooling{
	.position-a(@btm: 0, @left: 0, @right: 0);
	.flexBox(space-around, row wrap);
}

.settingwrap{
	width: 770px;
	.flexBox(flex-end);
}

.setting{
	.position-a(@right: 0);
}

.btnstyle {
    line-height: 3em;
    padding: 0 2em;
    .cur(pointer);
    min-width: 4em;
    &:hover{
    	background: hsl(185, 10%, 90%);
	    border-radius: 5px;
	    overflow: hidden;
	    .b-shadow(@blur: 10px; @spread: 5px; @color: hsla(220, 50%, 65%, 0.8));
    }
    &:active{
    	background: hsl(185, 0%, 90%);
	    border-radius: 5px;
	    overflow: hidden;
	    .b-shadow(@blur: 5px; @spread: 5px; @color: hsla(220, 50%, 100%, 0.6));
    }
}

.content {
    width: 100%;
    position: absolute;
}

#formpaper {
    width: 770px;
    margin: auto;
    background: extract(@colorList, 1);
    display: flex;
}

.formheader {
    box-sizing: border-box;
    padding: 16px 24px 24px 42px;
    width: 750px;
}

.textarea {
    position: relative;
    padding-bottom: 8px;
}

.formtextInput {
    margin: 0;
    min-height: 1.5em;
    border: none;
    background: transparent;
    line-height: 24px;
    resize: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    flex-shrink: 1;
    outline: none;
    font: 400 1em '微軟正黑體', '標楷體', sans-serif;
    overflow: hidden;
    &:focus{
    	background: extract(@colorList, 1);
    }
    &.titletextarea{
    	font-size: 2.5em;
	    width: 95%;
	    line-height: 135%;
    }
    &.subtitletextarea{
    	max-height: 2em;
	    font-size: 1.3em;
	    width: 100%;
	    left: 135%;
    }
}

.hrline {
    background: hsla(0, 0%, 0%, 0.25);
    height: 1px;
    .position-a(@left: 0);
    margin: 0;
    padding: 0;
    width: 100%;
}

section + h3{
    margin-left: 2em;
}

.group{
    width: 100%;
    margin-bottom: 1em;
    margin-left: 1px;
    border: 2px dashed hsla(0, 0%, 80%, 0.6);
    will-change: color;
    &>.hgtitle > h1{
	    width: 80%;
	    .cur(move);
	    .m-center();
	    text-align: left;
	    margin-top: -10px;
	    background: hsl(0, 0%, 100%);
	    font-size: 1.5em;
	    border-radius: 5px;
	    border: 3px solid hsl(280, 50%, 60%);
	    .b-shadow(2px; 10px; 10px; -5px; hsla(0, 10%, 20%, 0.6););
	    &:active{
	    	background: hsla(220, 90%, 40%, 0.4);
    		color: hsl(50, 80%, 20%);
    		.b-shadow(0 0 2em 10px extract(colorList, 1));
	    }
	}
	& .formtextInput.titletextarea{
		font-size: 0.9em;
	    text-align: center;
	    line-height: 100%;
	}
}

.active{
    border-left: 6px solid hsl(180, 70%, 80%);
}

.boxsize{
    width: 90%;
    padding: 1em;
    font: 700 1.2em/ 1.3em "微軟正黑體", "標楷體";
    margin: 0 auto;    
    transition: height 1s;
}

.detailstyle{
    font: 500 1em/ 1.3em "微軟正黑體", "標楷體";
    padding: 5px;
    display: flex;
    justify-content: space-between;
}

/* doMenu */

.formfields {
    box-sizing: border-box;
    padding: 0 24px 24px 42px;
    width: 750px;
}

.dd {
    position: relative;
    display: inline-block;
    list-style: none;
    line-height: 20px;    
    margin-top: 0.5em;
    &> .dd-list {
	    min-height: 80px;
	}
}
.dd-list {
    display: block;
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
}
.dd-handle {
    .cur(move);
    display: block;
    padding: 5px 10px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #aaa;
    background: #c8c8c8;
    background: -webkit-linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    background: -moz-linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    background: linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    border-radius: 3px;
    box-sizing: border-box;
}

.dd-empty:extend(.dd-item) { 
    margin: 5px 0; 
    padding: 0; 
    min-height: 30px; 
    background: #f2fbff; 
    border: 1px dashed #b6bcbf; 
    box-sizing: border-box;
}
.dd-placeholder:extend(.dd-empty all){};

/**
 * doMenu Draggable Handles
 */

.dd3-content {
    display: block;
    max-height: 100%;
    margin: 5px 0;
    padding-left: 35px;
    color: #333;
    text-decoration: none;
    font-weight: bold;
    border: 1px solid #898989;
    background: #fafafa;
    background: -webkit-linear-gradient(top, #f4f4f4 10%, #c9c9c9 100%);
    background: -moz-linear-gradient(top, #f4f4f4 10%, #c9c9c9 100%);
    background: linear-gradient(top, #f4f4f4 10%, #c9c9c9 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
    .b-shadow(0 4px 2px -2px gray);
    &:hover{
    	color: #2ea8e5;
	    background: #c8c8c8;
	    background: -webkit-linear-gradient(top, #e5e5e5 10%, #ffffff 100%);
	    background: -moz-linear-gradient(top, #e5e5e5 10%, #ffffff 100%);
	    background: linear-gradient(top, #e5e5e5 10%, #ffffff 100%);
    }
}

.dd-dragel { 
	position: absolute; 
	pointer-events: none; 
	z-index: 9999;
	&>.dd-item{
		.b-shadow(2px 4px 6px 0 rgba(0,0,0,.1));
		& .dd-handle{
			margin-top: 0;
		}
	}
	&> .dd3-item > .dd3-content {
	    margin: 0;
	}
}

.dd3-handle {
    position: absolute;
    .cur(move);
    width: 30px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    color: #c8c8c8;
    border: 1px solid #807b7b;
    text-shadow: 0 1px 0 #807b7b;
    background: #c8c8c8;
    background: -webkit-linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    background: -moz-linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    background: linear-gradient(top, #c8c8c8 0%, #8c8c8c 100%);
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    &:before{
    	content: '\2263';
	    display: block;
	    .position-a(@top: 3px; @left: 0);
	    width: 100%;
	    text-align: center;
	    text-indent: 0;
	    color: #fff;
	    font-size: 20px;
	    font-weight: normal;
    }
    &:hover{
    	background: #c8c8c8;
	    background: -webkit-linear-gradient(bottom, #c8c8c8 0%, #8c8c8c 100%);
	    background: -moz-linear-gradient(bottom, #c8c8c8 0%, #8c8c8c 100%);
	    background: linear-gradient(bottom, #c8c8c8 0%, #8c8c8c 100%);
    }
}

section.dd-handle {
    .cur(move);
    display: block;
    background: hsl(0, 0%, 100%);
    -webkit-border-radius: 3px;
    border-radius: 3px;
    box-sizing: border-box;
}

/* tooling */

.singleline {
    width: 100%;
    padding: 0;
    margin-top: 5px;
    max-height: 1.5em;
}
.singleinput{
    padding: 5px;
    width: 90%;
    margin: 0.5em;
    font-size: 1.5em;
}

.answer{
    margin-top: -5px;
    min-height: 80px;
    transition: height 1s;
    overflow-y: auto;
    position: relative;
}

.answerwrap{
	.flexBox(space-between, row wrap);
    margin-right: 10px;
}
.text{
    font-size: 1.3em;
    margin-top: 5px;
    text-align: right;
}
.answer-title{
    flex: 0 2 20%;
    order: 1;
}
.answer-input{    
    margin: 5px;
    flex: 0 70%;
    order: 2;
}
.answer-del{
    padding-top: 5px;
    flex: 0 3 2%;
    order: 3;
}
.answer-add{
    padding-top: 5px;
    flex: 0 3 2%;
    order: 4;
}
.insidefiled{
	.b-shadow(inset; 0; 0; 5px; 0; hsla(0, 0%, 0%, 0.8));
}
.serilize{
    width: 120px;
}

/*Table Select*/
.table{
    display: table;
    border: 5px double hsl(120, 30%, 20%);
    width: 100%;    
    transition: opacity 1s;
}
.caption{
    display: table-caption;
    text-align: center;
}
.thead{
   display: table-header-group;
   background: hsl(195, 60%, 80%);
}
.tr{
   display: table-row;
}
.td{
    display: table-cell;
    border: 2px dotted hsla(120, 30%, 40%, 0.3);
}
.td.checkbox{
    text-align: center;
    width: 10%;
}
.denysele{
    height: 20px;
}
.tablehide{
    opacity: 0;
    pointer-events: none;
}

/*icon setting*/

.dd-item{
    text-shadow: 0 1px 0 #fff;
    display: block;
    position: relative;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
    min-height: 20px;
    font-size: 13px;
    line-height: 20px;
	&.icon-small{
	    font-size: 150%;
	}
	& .icon-color{
	    color: hsla(0, 0%, 60%, 0.8);
	    &:hover{
	    	color: hsla(0, 0%, 50%, 1);
	    }
	}
	& .icon-btn{
	  	.position-a(@top: 5px; @right: 10px);
	    .cur(pointer);
	}
}

h1 + .icon-btn{
    pointer-events: none;
    opacity: 0;
    transition: opacity 1s;
    right: 10%!important;
}

.showout{
    opacity: 1!important;
    pointer-events: auto!important;
    z-index: 5;
}

/*sidebar*/
.sidebar{
	.position-a(@right: 2%);
	.flexBox(space-around, column nowrap);
    .cur(pointer);
    transition: opacity 1s;
    pointer-events: none;
    border: 5px double hsl(0, 0%, 80%);
    padding: 5px;
    width: 10%;
    opacity: 0;
}
.sidebarpos{
    border-bottom: 2px solid hsla(0, 0%, 0%, 0.4);
    padding: 5px;
}
.sidebarpos:hover{
    text-shadow: 2px 3px 5px hsla(0, 0%, 0%, 0.5);
}