Clameurs/sites/all/themes/figureslibres/clameurs/css/styles.scss

/**
 * Primary Drupal Styles
 * Author: Bachir Soussi Chiadmi
 */


body{
	font-size:16px;
	font-family: "aileron", Arial, "MS Trebuchet", sans-serif;
}


// a{color: #007BC2; text-decoration: none;}


h1{font-size:1.6em;}
h2{font-size:1.5em;}
h3{font-size:1.4em;}
h4{font-size:1.3em;}
h5{font-size:1.2em;}
h6{font-size:1.1em;}

input{font-family: Arial, "MS Trebuchet", sans-serif; font-size:0.8em;}

//               __
//   _________  / /___  __________
//  / ___/ __ \/ / __ \/ ___/ ___/
// / /__/ /_/ / / /_/ / /  (__  )
// \___/\____/_/\____/_/  /____/
$vert 	: #20c498;
// $bleu 	: #1f04a1;
// $rouge	: #fb3f08;

$coul0	: #2f82ff;
$coul1	: #ff0000;
$coul2	: #88aa00;
$coul3	: #ff6600;
$coul4	: #ff2ad4;
$coul5	: #8800aa;



/** layout */
.footer-block .region, .header-block{ display:inline-block; vertical-align: top;}

#header, #main, #footer{ padding:0; }

body{

}

#container{
	width:1024px; margin:0 auto;
}

#header{
	h1{
		display:block;
		height:335px;
		background-image: url(../../images/logo.png);
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
		text-indent: -2000px;
		overflow: hidden;
		margin: 0;
	}
	h2{
		text-align: center;
		color:$vert;
	}
}

// about
#node-63{
	// color:$bleu;
}

#thematique-anchor-links{
	padding:1em 0;
	ul{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;
		padding:0; margin:0;
		li{
			list-style: none;
			padding:0 1em; margin: 0;
			a{
				// color: $bleu;
				text-decoration: none;
				font-weight: 600;
				span{
					display: block;
				}
				&.en_attente{
					// opacity: 0.4;
					color:#ddd;
				}
				&.node-32{
					color:$coul0;
				}
				&.node-14{
					color:$coul1;
				}
				&.node-38{
					color:$coul2;
				}
				&.node-3{
					color:$coul3;
				}
				&.node-20{
					color:$coul4;
				}
				&.node-26{
					color:$coul5;
				}
			}
		}
	}

}

// thematique
.node-thematique{

	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;


	&.node-32{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul0;}
	}
	&.node-14{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul1;}
	}
	&.node-38{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul2;}
	}
	&.node-3{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul3;}
	}
	&.node-20{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul4;}
	}
	&.node-26{
		background-image: url(../../images/fond-theme-0.png);
		>h2,
		.group-video .field-name-field-description h3,
		.group-description .field-name-field-ecouter,
		.node-documentair .field-name-field-doc,
		.node-episode .field-name-title-field{color: $coul5;}
	}

	>h2{
		font-size: 3em;
		font-weight: 400;
	}

	.content{
		.field-name-field-emvideo img{width: 100%;}

		letter-spacing: -0.25em;
		>*{letter-spacing: normal;}

		$main_w 	: 69.5%;
		$right_w	: 30.5%;
		$gouttiere: 1em;

		//                     _
		//    ____ ___  ____ _(_)___
		//   / __ `__ \/ __ `/ / __ \
		//  / / / / / / /_/ / / / / /
		// /_/ /_/ /_/\__,_/_/_/ /_/
		article.main{
			display: inline-block;
			vertical-align: top;
			width:$main_w;
			.field-name-body{
				position: relative; z-index: 3;
				>*{padding:0 1em 0 0.2em;}
				.summary{
					position: relative;
					height:141px; overflow: hidden;
					p{
						font-size: 1.3em;
					}
				}
				.value{
					position:absolute;
					height:0; margin-bottom: 0;
					transition:height,margin-bottom 0.5s ease-in-out;
					background-color: #fff;
					overflow: hidden;
				}
				&:hover{
					.summary{background-color: #fff;}
					.value{
						height:400px; margin-bottom: 1em;
					}
				}
				p{padding:0 0 1em; margin: 0;}
			} //field-name-body
			.group-video{
				position: relative;
				.group-description{
					cursor: pointer; pointer-events: none;
					box-sizing: border-box;
					position:absolute; z-index: 2;
					top:0; left: 0;
					width:90%;
					height:80%;
					margin:5%;
					padding:5%;
					background-color: rgba(255,255,255,0);
					transition: background-color 0.3s ease-in-out;
					.field-name-field-ecouter{
						font-size: 1em;
						font-weight: 500;
						background-color: rgba(255,255,255,0.9);
						transition: background-color 0.3s ease-in-out;
						display: inline-block;
					}
					.field-name-field-description{
						opacity: 0;
						transition: opacity 0.3s ease-in-out;
						h3{
							font-weight: 500; font-size: 2em
						}
					}
				}
				&:hover .group-description{
					background-color: rgba(255,255,255,0.9);
					.field-name-field-ecouter{
						background-color: rgba(255,255,255,0);
					}
					.field-name-field-description{opacity:1;}
				}
			}
		}

		//        __
		//   ____/ /___  __________
		//  / __  / __ \/ ___/ ___/
		// / /_/ / /_/ / /__(__  )
		// \__,_/\____/\___/____/
		aside.right{
			display: inline-block;
			vertical-align: top;
			width: $right_w;
			.field-name-field-eclairages{
				padding-left:1em;
			}
			.node-documentair{
				padding-bottom: $gouttiere;
				.content{
					position: relative;
					.group-txt{
						cursor: pointer; pointer-events: none;
						box-sizing: border-box;
						position:absolute; z-index: 2; overflow: hidden;
						top:0; left:0; width:90%; max-height:80%;
						margin:5%; padding:5%;
						background-color: rgba(255, 255, 255, 0.9);
						// opacity: 0;
						.field-name-field-doc{
							font-size: 1em;
							font-weight: 500;
						}
						.field-name-title-field{
							font-size: 2em;
							font-weight: 600;
							height:1px; overflow: hidden;
							transition:height 0.3s ease-in-out;
						}
					}
					&:hover .group-txt .field-name-title-field{height:70%;}
				}
			}
		}

		//               _                __
		//   ___  ____  (_)________  ____/ /__  _____
		//  / _ \/ __ \/ / ___/ __ \/ __  / _ \/ ___/
		// /  __/ /_/ / (__  ) /_/ / /_/ /  __(__  )
		// \___/ .___/_/____/\____/\__,_/\___/____/
		//    /_/
		aside.bottom{
			padding-top: $gouttiere;
			.field-name-field-episodes{
				// letter-spacing: -0.25em;
				&>.field-items{
			    display: flex;
			    flex-flow: row nowrap;
			    justify-content: space-between;
					&>.field-item{
						display: block;
						// letter-spacing: normal;
						// display: inline-block;
						width:19%;
						// padding-right:1%;

						.node-episode .content{
							position: relative;
							.group-txt{
								cursor: pointer; pointer-events: none;
								box-sizing: border-box;
								position:absolute; z-index: 2; overflow: hidden;
								top:0; left:0; width:90%; height:80%;
								margin:5%; padding:5%;
								background-color: rgba(255, 255, 255, 0.3);
								opacity: 0.8;
								transition:opacity,background-color 0.3s ease-in-out;
								.field-name-title-field{
									font-size: 4em;
									font-weight: 700;
									font-style: italic;
									text-align: center;
								}
							}
							&:hover .group-txt{
								opacity: 1;
								background-color: rgba(255, 255, 255, 0.9);
							}
						}
					}
				}
			}
			.field-name-body{
				// display:none;
			}
		}
	}
}

#DOMWindowOverlay{
	background-color: #fff!important;
}

#DOMWindow{

}

#footer{

}

// .block, .panel-pane{
// 	border: 1px solid #D1D1D1;  padding:0.5em; margin:0.5em;
// 	-moz-border-radius: 5px;
// 	-webkit-border-radius: 5px;
// 	border-radius: 5px;
// 	background-color: #EAEAEA;
// }

.footer-block .block{
	// background-color: #353535; border: 1px solid #1a1a1a;
}
#footer-bottom{ text-align: center;}
#footer-bottom .block{
	background-color: transparent;
	// border: 0 solid #999;
	font-size:0.7em;
}

#content{padding:1em;}



/** Messages. */

div.messages {
  padding: 9px;
  margin: 0.5em 0 0;
  color: #036;
  background: #bdf;
  border: 1px solid #ace;
	-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;

}

div.warning {
  color: #840;
  background: #fe6;
  border-color: #ed5;
}

div.error {
  color: #fff;
  background: #e63;
  border-color: #d52;
}

div.error p.error {
  color: #333;
}

div.status {
  color: #360;
  background: #cf8;
  border-color: #be7;
}



/** Tab navigation */

ul.primary, .views-admin-links ul {
	font:13px/1.231 sans-serif; *font-size:small;
  border-collapse: collapse;
  padding: 0 0 0 1em; /* LTR */
  white-space: nowrap;
  list-style: none;
  margin: 5px;
  height: auto;
  line-height: normal;
  // border-bottom: 1px solid #bbb;
}
ul.primary li, .views-admin-links li{
  display: inline;

}
ul.primary li a, .views-admin-links li a {
  // background-color: #ddd;
  // border-color: #bbb;
  border-width: 1px;
  border-style: solid solid none solid;
  height: auto;
  margin-right: 0.5em; /* LTR */
  padding: 0 1em;
  text-decoration: none;
	-moz-border-radius-topleft: 5px;
		-webkit-border-top-left-radius: 5px;
		border-top-left-radius: 5px;
	-moz-border-radius-topright: 5px;
		-webkit-border-top-right-radius: 5px;
		border-top-right-radius: 5px;
}
// ul.primary li.active a {
//   background-color: #fff;
//   border: 1px solid #bbb;
//   border-bottom: #fff 1px solid;
// }
// ul.primary li a:hover, .views-admin-links li a:hover{
//   background-color: #eee;
//   border-color: #ccc;
//   border-bottom-color: #eee;
// }

// ul.secondary {
//   border-bottom: 1px solid #bbb;
//   padding: 0.5em 1em;
//   margin: 5px;
// }
// ul.secondary li {
//   display: inline;
//   padding: 0 1em;
//   border-right: 1px solid #ccc; /* LTR */
// }
// ul.secondary a {
//   padding: 0;
//   text-decoration: none;
// }
// ul.secondary a.active {
//   border-bottom: 4px solid #999;
// }
//

/** Form */

#node-form .form-region-main{border-right: 1px solid #BFBFBF; padding-right:10px; width:68%;}
#node-form .form-region-main label{float:left; min-width:25%;}
#node-form .form-region-main input.form-text{width:40%;}

#node-form .form-region-right{padding-left:5px;}
#node-form .form-region-right label{float:left; min-width:35%;}
#node-form .form-region-right input.form-text{width:60%;}

#node-form .form-region-main label.option, #node-form .form-region-right label.option{float: none;}


form:not(	#views-ui-config-item-form ) .form-item {
    position:relative;
/*    padding:9px;*/
    }

	form:not(	#views-ui-config-item-form ) .form-item .description{
	  position:absolute;
	  bottom:140%;
/*	  right:-15px;*/
	  z-index:5;
		left:50%;
	  color:#1A1A1A;
		line-height:1.1;
	  background:url(../images/popup.png) 50% 100% no-repeat;
	  width:240px;
	  margin:0px 0px -15px;
	  padding:9px 10px 20px;
	  display:none;
		border-top: 1px solid #9F9F9F;
	  }
 form:not(	#views-ui-config-item-form )  .form-item:hover {
    z-index:1;
    height:auto; /* Fix for flicker in IE7 */
    }
 form:not(	#views-ui-config-item-form )  .form-item:hover > .description { display:block; }


fieldset{
	border: 1px solid #D4D4D4;
	padding:10px;
	margin-bottom:1em;
	-moz-border-radius: 5px;
		-webkit-border-radius: 5px;
		border-radius: 5px;
}

fieldset legend{
	font-size:1.6em;
}

input.form-text{max-width:95%;}

/** TABLE */

table{width:100%;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}
table thead th{
	background-color: #CCC;
	padding:0.5em 1em;
	text-align: left;
}
table tbody tr.even, table tbody tr.odd{
	border-bottom: 0 solid #CCCCCC;
	padding: 0.1em 0.6em;
}
table tbody tr.even{background-color: #EEE;}
table tbody tr.odd{background-color: #E5E5E5;}

table tbody td{
	padding:0.5em 1em;
	text-align: left;
}
td.active {background-color: transparent;}