materio-base-d7/less/guibik.less

@import 'elements.less';
//@import 'elements.less';
@import "gui.less";

/** table */
@grey:#E0E0E0;
@greylite:#F4F4F4;


/** GENERAL FORM */
a{color:#0092D2;}

table th{background-color: @grey;}

.block,
.item-list,
.help-items ul,
.form-item,
.confirmation ul,
.admin-list,
.node-type-list,
.admin-panel {
  border-width:0px;
  border-style:solid;
  border-color:#fff;
}

.text-format-wrapper .form-item {
  background:#F4F4F4;
  margin:0px 0px 10px;

  border-width:0;
  border-style:solid;
  border-color:#ddd;
  padding: 9px;
  }


.form-item label {
  color:#1A1A1A;
  font-weight:normal;
  font-size:12px;
  text-transform: none;
}

input.form-autocomplete,
input.form-text,
textarea.form-textarea,
select.form-select {
  padding:3px;
  border-width:1px;
  border-style:solid;
  border-color:#BFBFBF;
  background:#fff;
  color:#1A1A1A;
  max-width:100%;
}


span.autocomplete-deluxe-button{top:0.25em;}

.fieldset {
  &.titled{margin:20px 0px 10px!important;}
  display:block;
  position:relative;
  min-height:28px;
  border: 0 solid #eee;
	border-top:1px solid #4C4C4C;
	legend{
		margin-top:-0.9em;
	}
	&.collapsible legend{
		a.fieldset-title{
			padding-right:15px;
			&:after{
				content:"-";
				padding:0 3px 2px;
				margin:-5px 0 0 10px;
				.rounded();
				color:#000;
				background-color: #FFF;
/*				font-size:9px;*/
				line-height:0;
				font-weight:bold;
			}
			&:hover{color:#fff; font-weight:bold;}
		}
	}

	&.collapsed legend{
		a.fieldset-title:after{
			content:"+";
/*			padding:2px 5px 3px;
			.rounded();
			color:#fff;
			background-color: #1A1A1A;
*/		}
	}

}

.tabledrag-processed{
	border:0 solid #fff;
	padding-bottom:2em;
/*	border-top:1px solid #4C4C4C;*/
	thead{
		background-color: transparent;
		label{color:inherit; text-shadow: none; padding:0 0 0 0.5em;}
		th{background-color: transparent; text-transform:uppercase; font-weight:bold;}
	}
}


.item-list h3,
.block .block-title,
.fieldset-title,
.collapsible .fieldset-legend a{
	display:inline-block; width:auto;
	.rounded(); 
	font-size:12px; 
	font-weight:normal;
	text-transform: uppercase;
  margin:0px;
  padding:2px 9px 3px;
  color:#fff;
  background:#666;

}

.block .block-content,
.container-inline .fieldset-content,
.fieldset-content {
  padding:10px 9px 9px;
  background:#F4F4F4;
}

/** popup description */
.page-content .form-item .description {
  color:#fff;
  border-top:1px solid #E0E0E0;
/*	background: #1A1A1A url() no-repeat scroll top left;*/
	background:url(../images/popup.png) 50% 100% no-repeat;
	a{text-decoration: underline;}
}


li{list-style: none inside url();}

/** NODE FORM */
#user-profile-form, .node-form{
	label{text-transform: uppercase; font-size:1em;}

	.fieldset-title,
	.vertical-tab-button strong, .horizontal-tab-button strong{text-transform: uppercase; font-size:0.8em; font-weight:bold;}
	
	div.form-type-checkboxes{
		&>label, &>div.form-checkboxes{.inlineblock();}		
	}

	.form-item-language, 	.form-type-select{
		&>label, &>select{.inlineblock();}
		&>label{width:35%;}
		&>select{max-width:60%;}
		
	}
	
	.form-type-textfield{
		&>label, &>input.form-text{.inlineblock(); margin:0; vertical-align:middle;}
		&>label{width:35%;}
		&>input.form-text{max-width:60%;}
	}
	.form-type-link-field{
		&>label, &>input.form-text{.inlineblock(); margin:0;}
		&>label{width:35%;}
		div{.inlineblock(); margin:0; width:100%;}
		&>div{width:60%;}
		input.form-text{max-width:100%;}
	}
	.form-phone-number{
		.form-item{.inlineblock();}
		input.form-text{width:100%;}
	}
	
	.autocomplete-deluxe-button{
		margin-top:-3px;
	}
	
	.addressfield-container-inline{
		&>div.form-item{.inlineblock(); margin:0; width:30%;}
	}
	
	fieldset.filter-wrapper{display:none;}
	input.fid.form-text{display:none;}	
	
	.form-region-right{
		position:relative;
		fieldset.form-wrapper{max-width:100%; padding:0; margin:0;}
		.fieldset-wrapper{padding:0;}
		input.form-text{width:100%;}
	}
	
	tr.draggable{
		fieldset{
			legend{display:none;}
			.fieldset-content{
				padding:0;
				.date-padding{padding:0;}
			}
		}
	}
	
	
	.field-widget-term-reference-tree .form-item.form-type-checkbox-tree{
		display: block;
		.term-reference-tree{
			&>ul.term-reference-tree-level{.inlineblock(); padding:0 2em 0 0; min-width:30%;}
			.term-reference-track-list-container{.inlineblock(); border-left:1px solid #848484; padding:0 0 2em 1em;}
		}

	}
	
}

/** VERTICAL TABS */
.vertical-tabs {
  background:@greylite;
  border:1px solid #BFBFBF;
  margin:0px 0px 10px;
  position:relative;
}

.vertical-tabs .fieldset-content,
.vertical-tabs fieldset.titled .fieldset-content {
  border:0px;
  padding:10px;
  }
.vertical-tabs .fieldset-content .fieldset-content {
  margin-top: 20px;
}

.vertical-tabs-list li a {
  display:block;
  text-shadow:#fff 0px 1px 0px;
  padding:5px 10px 4px 10px;
  border-bottom:1px solid #BFBFBF;
  border-right:1px solid #BFBFBF;
  color:#494949;
	background: @grey;
  }
.vertical-tabs-list li.last a{
	border-bottom:0px solid #BFBFBF
}
.vertical-tabs-list .selected a ,
.vertical-tabs-list li:hover a {
  background:@greylite;
  color:#1A1A1A;
}
.vertical-tabs-list .selected a{
	border-right:0 solid @greylite;
}
.vertical-tabs-list .summary { font-size:11px; }


.page-admin table tr{
	&.even, &.odd{ 
		td, h3 {background-color: transparent;} 
		&:hover{  background: #D4EFEE;}
		&.ok{
			background-color: #d1f2a3;
		}
		&.warning{
			background-color: #e9e2a6;
		}
		&.error{
			background-color: #ffc4be;
		}

	}
	&.even{
	  background: #EFEFEF;
	}
	&.ok, &.ok:hover{
		color: #468847;//#036;
		background-color: #dff0d8;//#bdf;
		// td{
		// 	border-bottom:3px solid #d6e9c6;//#ace;	
		// }
	}
	&.warning, &.warning:hover{
		color: #c09853;//#840;
	  background-color: #fcf8e3;//#fe6;
	  // td{
	  // 	border-bottom: 3px solid #fbeed5;//#ed5;
	  // }
	}
	&.error, &.error:hover{
	 	color: #b94a48;//#fff;
		background-color: #f2dede;//#e63;
	  // td{
	  // 	border-bottom: 3px solid #eed3d7;
	  // }
	}
	
	// td{ border:0 solid #fff;}
}


.admin-block-description,
.help-items ul li,
.confirmation ul li,
.item-list ul li,
.prose .item-list li,
.menu li {
  border-bottom:0 solid #f4f4f4;
  }

form .form-actions {
  background:#eee;
  border:0 solid #ddd;
  padding:9px;
}


/** boutons */
input.teaser-button,
input.form-submit,
.node-edit, .button, .node-delete{
  cursor:pointer;
  padding:0.3em 0.9em;
  color:#333;

  text-align:center;
	
	font-size:12px;
  font-weight:normal;
  border-width:1px;
  border-style:solid;
  border-color:#ddd #ddd #ccc;
  background:#bdf url();
	.rounded();
	
	&.field-add-more-submit{
		padding:0.1em 0.4em 0;
		font-size:10px;
	}

		
}
.node-edit, .button, .node-delete{font-size:10px;padding:0.1em 0.6em;}



input.form-submit:hover,
.node-edit:hover, .button:hover, .node-delete:hover{
	border-color:#ddd #ddd #ccc;
  -webkit-box-shadow:#ace 0px 0px 0px;
	
	color:#bdf;
	background-color: #848484;
}

input.button-yes:not(.field-add-more-submit), .node-edit{
	background-color: #CCFF2F;
	&:hover{
		color:#CCFF2F;
	}
}

input.button-no, .node-delete{
	background-color: #EA4B4A;
	&:hover{
		color:#EA4B4A;
	}
	
}

/** admin module */
/**
*
* /!\ CUSTOM HERE /!\
*
* Provide better display for admin menu ==============================
*/
body.admin-vertical #admin-menu{background:#222;background-image:none;}
body.admin-vertical #admin-menu-wrapper{margin-left:35px!important;}
body.admin-vertical.admin-expanded #admin-menu-wrapper{border-left:1px solid #323232;margin-left:260px!important;}
#admin-toolbar{z-index:1000!important;}


/* --- */


/**
 * VIEW
 */
#views-ui-edit-form{
	div.changed {
	  background-color: #FFF98E;
	}

	.views-ui-display-tab-bucket h3{
		font-weight:bold;
		background-color: #D8D8D8;
	}

	.defaulted, .views-ui-display-tab-bucket .views-display-setting.even, .views-ui-display-tab-bucket .views-display-setting.odd{ //:not(.overriden) 
	  color: #666;
		background-color: #E0E0E0;
	  font-style: italic;
	/*	font-weight:bold;*/
		a{color: #3F80B3}
	}	

	.views-ui-display-tab-bucket.overridden .views-display-setting, .views-ui-display-tab-bucket.overridden .views-display-setting,
	.views-display-setting.overridden{ //:not(.overriden) 
		&, &.even, &.odd{
			  color:  #7F7F7F;
				background-color: #F9F9F9;
			  font-style: normal;
			/*	font-weight:bold;*/
				a{color: #3188D1;}
		}
	}	
}
.view{
  .view-header{
		padding:0.5em; margin:0 0 1em 0;
		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
		font-weight:bold;
  }
	.pager{
		padding:1em 0; margin:0; text-align: right; height:auto;
		ul{
			.inlineblock(); padding:0;
			li{
        height:20px;
				a, span{padding:1px 10px 2px;}				
			}

		}
	}
	
	// EXPOSED
	.view-filters{
		padding:1em 0; margin:0 0 1em 0;
		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
		
		&>span.title, &>form{.inlineblock();width:auto;position:relative;vertical-align: top;} 
		&>span.title{padding:0.7em 1em;}
		fieldset{
			 .inlineblock(); padding:0 1em;
			.fieldset-content{padding:0;}
			legend{display:none;}
		}
/*		.views-exposed-form{ */
			label{font-weight:normal; font-size:0.75em;}
			.form-item{.inlineblock();  padding:0 0.5em 0 0;
				select, input{font-size:0.8em;}
			}
/*	 	}*/
	}

	// VBO
	fieldset#edit-select{
		padding:1em 0; margin:0 0 1em 0;
		border: 1px solid  #CCC; .border-radius(5px,5px,5px,5px);
		
		legend, .fieldset-content{.inlineblock();}
		
		legend{
			width:auto;
			*{background-color: transparent;}
		}
		
		.fieldset-content{
			padding:0;
			select, input{font-size:0.8em;}
		}
	}
	.vbo-fieldset-select-all{
		width:50%; text-align:left;
		.form-item{.inlineblock();vertical-align:top;}
		em{padding:0 1em;}
	}
	
}

/** media browser */
.view.inline-block-list{
	.views-row {
		.inlineblock(); vertical-align:top;
	  padding: 5px; margin:5px; width:250px; min-height:150px; background-color: #E3E3E3;
		.border-radius(5px,5px,5px,5px); border: 1px solid #ddd;
		.drop-shadow;
		.float-left{
			float:left;
			&>div{margin:0 10px 10px 0;}
		}
		
	}
} 

*:focus{
	border: 1px solid #BDF!important;
}

/* Contain floats: h5bp.com/q */ 
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


.path-admin-content-nodes span.icon { background-position:0px -30px; }


/** admin view */
.custom-admin{
	table{

		caption{ text-align: left; padding:2em 0 0 0; font-weight:bold;}
		
		th{line-height:1; background-color: @greylite!important;}
		td{padding-top:1em;padding-bottom:1em;}

		td.views-field-field-media{
			width:100px;
			img{max-width:100%; height:auto;}
		}

		&.has-caption{
			th, td.views-field-field-media, td.views-field-views-bulk-operations{
				background: @grey!important;
			}
		}
		
		td.views-field-title{ width:350px; }
		a.node-title-link{font-size:1.1em; padding:0 0 0.3em; display:inline-block;}
		td.views-field-field-people{width:100px;}
	}

}


#modalContent{
		
}

#modalContent div.ctools-modal-content{
	padding:5px;
	-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
		
	border: 1 solid #999;
	
}
#modalContent div.ctools-modal-content .modal-header,
#modalContent div.ctools-modal-content .modal-header a,
#modalContent div.ctools-modal-content .modal-header span{
	background-color: transparent; color:#000!important;
}


/** Messages. */
.messages(){
  padding: 9px;
  margin: 0.5em 0 0;
  color: #3a87ad;//#360;
  background: #d9edf7;//#cf8;
  border: 1px solid #bce8f1;//#be7;
  -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;


  &.warning {
    color: #c09853;//#840;
    background-color: #fcf8e3;//#fe6;
    border-color: #fbeed5;//#ed5;
  }

  &.error {
    color: #b94a48;//#fff;
    background-color: #f2dede;//#e63;
    border-color: #eed3d7;//#d52;
  }

  
  &.status {
		color: #468847;//#036;
	  background-color: #dff0d8;//#bdf;
	  border-color:#d6e9c6;//#ace;
  }

}

div.messages {
  .messages();
}


#better-messages-wrapper{
  background-color: rgba(255,255,255,0.6); .p(10px); .rounded(5px); .drop-shadow(0, 0, 6px, 0.4);
  #better-messages-default{
    .messages-label{display:none;}
    div.messages{
      .messages(); margin:0 0 10px 0;
      
    }
    .footer{
      border:none; padding:0; margin:0;
      a.message-close{
        background: #fff url('../images/close.png') no-repeat center center;
        width:15px; height:15px; .rounded(3px); display:block;

      }
    }
  }
}