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

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

 @function lower-bound($range) {
   @if length($range) <= 0 {
     @return 0;
   }
   @return nth($range, 1);
 }

 @function upper-bound($range) {
   @if length($range) < 2 {
     @return 999999999999;
   }
   @return nth($range, 2);
 }

 @function em-calc($px-value, $rem-base: 16) {
   $value: $px-value / $rem-base;
   @return $value * 1em;
 }

 $small-range: (0, em-calc(640)); /* between 0 & 640px */
 $medium-range: (em-calc(641), em-calc(1000)); /* between 640px & 1000px */
 $large-range: (em-calc(1001), em-calc(1025)); /* between 1001px & 1025px */
 $xlarge-range: (em-calc(1026), em-calc(1920)); /* between 1026px & 1920px */
 $xxlarge-range: (em-calc(1921), 99999999px); /* between 1920px & infinity */

 $screen: 'only screen';
 $landscape: '#{$screen} and (orientation: landscape)';
 $portrait: '#{$screen} and (orientation: portrait)';
 $small-up: $screen;

 $small-only: '#{$screen} and (max-width: #{upper-bound($small-range)})';
 $medium-up: '#{$screen} and (min-width:#{lower-bound($medium-range)})';
 $medium-only: '#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})';

 $large-up: '#{$screen} and (min-width:#{lower-bound($large-range)})';
 $large-only: '#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})';

 $xlarge-up: '#{$screen} and (min-width:#{lower-bound($xlarge-range)})';
 $xlarge-only: '#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})';

 $xxlarge-up: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)})';
 $xxlarge-only: '#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})';



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{
}
$maxw:1000px;
@mixin main_centred(){
	width:95%;
	margin:0 auto;
	@media #{$large-up} {
		max-width: $maxw;
	}
}

$header_height_small:200px;
$header_height_large:400px;

#header{
	@media #{$large-up} {
		position: fixed;
	}
	width:100%;
	z-index: 20;
	background-color: transparentize(#fff, 0.05);
	background-image: url(../../images/fond-trame-logo-lite.png);
	background-repeat: no-repeat;
	background-position: center top;
	background-size: contain;

	max-height: $header_height_small;
	@media #{$large-up} {
		max-height: $header_height_large;
	}

	// box-shadow: 0 3px 3px transparentize(#fff, 0.05);

	hgroup.logo{
		@include main_centred();
		padding: 1em 0 0;
	}
	h1{margin:0;}
	h1 a{
		display:block;
		height:$header_height_small*0.6;
		@media #{$large-up} {
			height: $header_height_large*0.8;
		}
		// transition: height 0.1s ease-in-out;
		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;
		font-size: 1em;
		@media #{$large-up} {
			font-size: 2em;
		}
	}
}

#main{
	// padding-top: $header_height_small;
	@media #{$large-up} {
		padding-top: $header_height_large;
	}

	>.region{
		@include main_centred();
	}
}

// about
#node-63{
	// color:$bleu;
	padding:1em 0;
	.content{
		section{display: inline;}
		p{ margin:0;}
	}
	ul.links{
		// display: block;
		text-align: right;
		margin: 0; padding: 0;
		li{margin: 0; padding: 0; display: inline-block;}
		a{
			color: inherit; text-decoration: none;
			font-weight: 500;
		}
	}
}

#thematique-anchor-links{
	display:none;
	@media #{$large-up} {
		display:block;
	}

	padding:1em 0;
	ul{
		display: flex;
		flex-flow: row nowrap;
		justify-content: space-between;

		padding:0; margin:0;
		li{
			max-width: 7em;
			list-style: none;
			padding:0; margin: 0;
			a{
				// color: $bleu;
				text-decoration: none;
				font-weight: 600;
				display:block;
				min-height: 3em;
				background-position: center;
				background-repeat: no-repeat;
				background-size: contain;

				span{
					display: block;
				}

				@mixin anchor($bg, $sb_bg, $coul){
					background-image: $bg;
					color:$coul;
					&.en_attente{
						// opacity: 0.4;
						color:#aaa;//transparentize($coul, 0.8);//saturate(lighten($coul, 40%), 90%);
						background-image: $sb_bg;
						cursor: default;
					}
				}

				&.node-32{
					@include anchor(
						url(../../images/menu-fond-theme-0-flat.jpg),
						url(../../images/menu-fond-theme-0-flat-nb.jpg),
						$coul0);
				}
				&.node-14{
					@include anchor(
						url(../../images/menu-fond-theme-1-flat.jpg),
						url(../../images/menu-fond-theme-1-flat-nb.jpg),
						$coul1);
				}
				&.node-38{
					@include anchor(
						url(../../images/menu-fond-theme-2-flat.jpg),
						url(../../images/menu-fond-theme-2-flat-nb.jpg),
						$coul2);
				}
				&.node-3{
					@include anchor(
						url(../../images/menu-fond-theme-3-flat.jpg),
						url(../../images/menu-fond-theme-3-flat-nb.jpg),
						$coul3);
				}
				&.node-20{
					@include anchor(
						url(../../images/menu-fond-theme-4-flat.jpg),
						url(../../images/menu-fond-theme-4-flat-nb.jpg),
						$coul4);
				}
				&.node-26{
					@include anchor(
						url(../../images/menu-fond-theme-5-flat.jpg),
						url(../../images/menu-fond-theme-5-flat-nb.jpg),
						$coul5);
				}

				&:hover{
					// TODO: anchor link over effect
				}
			}
		}
	}

}
//
// html,
// body,
// #container,
// #main,
// #main>.region,
// #block-system-main,
// #block-system-main>.content,
// .node-thematique{
// 	overflow-x: visible;
// }

@mixin vidlabel(){
	font-size: 1em;
	font-weight: 600;
	padding:0.2em 0.4em;
	background-color: rgba(255,255,255,0.9);
	display: inline-block;
}

// thematique
.node-thematique{
	min-height:766px;
	margin-bottom: 10em;
	position: relative;

	&::before{
		position: absolute;
		content:" ";
		z-index: -1;
		background-position: center;
		background-repeat: no-repeat;

		background-size: cover;
		width:100%; height:100%;
		top:0; left:0;
		@media #{$large-up} {
			background-size: contain;
			width:110%; height:110%;
			top:-5%; left:-5%;
		}
	}

	@mixin node_thema($bg, $sb_bg, $coul){
		&::before{background-image: $bg;}
		&.en_attente::before{background-image: $sb_bg;}
		&.en_attente{
			>h2,
			.group-video .field-name-field-description h3,
			.group-description .field-name-field-ecouter,
			.node-documentair .field-name-field-doc,
			.node-documentair .field-name-title-field,
			.field-name-field-episodes .field-label,
			.node-episode .field-name-title-field{
				color: #aaa;//lighten(desaturate($coul, 40%), 20%);
			}
		}
		&:not(.en_attente){
			>h2,
			.group-video .field-name-field-description h3,
			.group-description .field-name-field-ecouter,
			.node-documentair .field-name-field-doc,
			.node-documentair .field-name-title-field,
			.field-name-field-episodes .field-label,
			.node-episode .field-name-title-field{color: $coul;}
		}
	}

	&.node-32{
		@include node_thema(
			url(../../images/fond-theme-0-flat.png),
			url(../../images/fond-theme-0-flat-nb.jpg),
			$coul0);
	}
	&.node-14{
		@include node_thema(
			url(../../images/fond-theme-1-flat.png),
			url(../../images/fond-theme-1-flat-nb.jpg),
			$coul1);
	}
	&.node-38{
		@include node_thema(
			url(../../images/fond-theme-2-flat.png),
			url(../../images/fond-theme-2-flat-nb.jpg),
			$coul2);
	}
	&.node-3{
		@include node_thema(
			url(../../images/fond-theme-3-flat.png),
			url(../../images/fond-theme-3-flat-nb.jpg),
			$coul3);
	}
	&.node-20{
		@include node_thema(
			url(../../images/fond-theme-4-flat.png),
			url(../../images/fond-theme-4-flat-nb.jpg),
			$coul4);
	}
	&.node-26{
		@include node_thema(
			url(../../images/fond-theme-5-flat.png),
			url(../../images/fond-theme-5-flat-nb.jpg),
			$coul5);
	}

	>h2{
		font-size: 3em;
		font-weight: 400;
		// padding-left: 0.18em;
		position:relative;
		margin:2em 0 0;
		padding: 0 2em 0 0;
		@media #{$large-up} {
			padding:0;
		}
		span{
			position: absolute;
			top:-170px;
		}
	}

	.content{

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

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

		//                     _
		//    ____ ___  ____ _(_)___
		//   / __ `__ \/ __ `/ / __ \
		//  / / / / / / /_/ / / / / /
		// /_/ /_/ /_/\__,_/_/_/ /_/
		article.main{

			@media #{$large-up} {
				display: inline-block;
				vertical-align: top;
				width:$main_w;
			}

      overflow: hidden;
			.field-name-body{
				position: relative; z-index: 3;
				>*{padding:0 1em 0 0;}
				.summary{
					position: relative;
					background-color: transparentize(#fff, 0.3);
					transition: background-color 0.5 ease-in-out;
					@media #{$large-up} {
						height:7em; overflow: hidden;
					}
					p{
						font-size: 1.1em;
						padding:0.5em 0.5em 0.5em 0;
            margin: 0;
						font-weight: 500;
					}
				}
				.value{
					display:none;
					@media #{$large-up} {
						display: block;
					}
					position:absolute;
					height:1px; margin-bottom: 0;
					transition:height 0.5s ease-in-out;
					background-color: #fff;
					overflow: hidden;
					p{
						font-size: 1em; padding: 1em 1em 0; line-height: 1.3; margin:0;
            background-color: #fff;
					}
				}
				@media #{$large-up} {
					&:hover{
						.summary{background-color: #fff;}
						.value{
							height:700px;
						}
					}
				}
				// p{padding:0 0 1em; margin: 0;}
			} //field-name-body
			.group-video{
				position: relative;
				@media #{$large-up} {
					// min-height: 432px;
				}
				.field-name-field-emvideo img{
					max-width: 100%; height: auto;
				}
				.field-name-field-emvideo a{ display: block; line-height: 0;}
				.group-description{
					cursor: pointer; pointer-events: none;
					position:absolute; z-index: 2;
					top:0; left: 0;
					width:100%; height:100%;

					.field-name-field-ecouter{
						@include vidlabel();

						margin:15px;
						// transition: background-color 0.3s ease-in-out;
					}
					.field-name-field-description{
						position: absolute;
						top:0; left:0;
						box-sizing: border-box;
						width:80%;
						height:70%;
						margin:10%;
						padding:5%;
						opacity: 0;
						background-color: rgba(255,255,255,0.9);
						transition: opacity 0.3s ease-in-out;
						h3{
							font-weight: 500; font-size: 2em; margin:0;
						}
					}
				}
				&: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{
			margin-top:$gouttiere;

			@media #{$large-up} {
				display: inline-block;
				vertical-align: top;
				width: $right_w;
				margin-top: 0;
			}
			.field-name-field-eclairages{
				@media #{$large-up} {
					padding-left:1em;
				}
				.field-item:not(:last-child){
					padding-bottom: $gouttiere;
				}
			}
			.node-documentair{
				min-height: 150px;
				background-color: #fff;
				.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:15px;
						// opacity: 0;
						.field-name-field-doc{
							@include vidlabel;
							z-index:5;
							transition:background-color 0.3s ease-in-out;
						}
						.field-name-title-field{
							position: absolute; z-index: -1;
							top:0; left:0; width: 100%;
							font-size: 1.5em;
							font-weight: 500;
							padding: 30px 7px 10px;
							background-color: rgba(255, 255, 255, 0.9);
							opacity: 0;
							transition:opacity 0.3s ease-in-out;
						}
					}
					.group-video img{ width:100%; height:auto;}
					.group-video a{ display: block; line-height: 0;}
				}
				&:not(.en_attente):hover .group-txt{
					.field-name-field-doc{background-color: transparent;}
					.field-name-title-field{opacity: 1;}
				}

				&.en_attente>.content{
					position: relative;
					&::before{
						position: absolute;
						top:0; left:0;
						width:100%; height:100%;
						content:" ";
						z-index: 10;
						background-color: #fff;
						opacity: 0.8;
					}
				}
			}
		}

		//               _                __
		//   ___  ____  (_)________  ____/ /__  _____
		//  / _ \/ __ \/ / ___/ __ \/ __  / _ \/ ___/
		// /  __/ /_/ / (__  ) /_/ / /_/ /  __(__  )
		// \___/ .___/_/____/\____/\__,_/\___/____/
		//    /_/
		aside.bottom{
			padding-top: $gouttiere;
			@media #{$large-up} {
				padding-top: $gouttiere*0.5;
			}
			.field-name-field-episodes{
				// letter-spacing: -0.25em;

				.field-label{
					@include vidlabel;
					margin-bottom: 0.3em;
				}
				&>.field-items{
					@media #{$large-up} {
				    display: flex;
				    flex-flow: row nowrap;
				    justify-content: space-between;
					}
					&>.field-item{
						display: block;
						background-color: #fff;
						@media #{$large-up} {
							width:19%;
						}
						.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.9);
									opacity: 1;
									transition:opacity,background-color 0.3s ease-in-out;
									.field-name-title-field{
										font-size: 4em;
										font-weight: 800;
										font-style: italic;
										text-align: center;
									}
								}
								.group-video img{ width:100%; height:auto;}
								.group-video a{ display: block; line-height: 0;}
							}

							&:not(.en_attente):hover .content .group-txt{
								opacity: 0.9;
								background-color: rgba(255, 255, 255, 0.3);
							}

							&.en_attente>.content{
								position: relative;
								&::before{
									position: absolute;
									top:0; left:0;
									width:100%; height:100%;
									content:" ";
									z-index: 10;
									background-color: #fff;
									opacity: 0.8;
								}
							}
						}
					}
				}
			}
			.field-name-body{
				// display:none;
			}
		}
	}

	&.en_attente{
		.content>.main{
			position: relative;
			&::before{
				position: absolute;
				top:0; left:0;
				width:100%; height:100%;
				content:" ";
				z-index: 10;
				background-color: #fff;
				opacity: 0.8;
			}
		}
	}
}

//    ____                  __
//   / __ \_   _____  _____/ /___ ___  __
//  / / / / | / / _ \/ ___/ / __ `/ / / /
// / /_/ /| |/ /  __/ /  / / /_/ / /_/ /
// \____/ |___/\___/_/  /_/\__,_/\__, /
//                              /____/

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

#DOMWindow{
	.embedded-video, .player ,iframe{
		width:100%;
		height:100%;
	}
}

//     ____
//    / __ \____ _____ ____
//   / /_/ / __ `/ __ `/ _ \
//  / ____/ /_/ / /_/ /  __/
// /_/    \__,_/\__, /\___/
//             /____/

.page-title{
	font-size: 3em;
	font-weight: 400;
	text-transform: capitalize;
}

//     ______            __
//    / ____/___  ____  / /____  _____
//   / /_  / __ \/ __ \/ __/ _ \/ ___/
//  / __/ / /_/ / /_/ / /_/  __/ /
// /_/    \____/\____/\__/\___/_/

#footer{

}

#block-menu-menu-footer-menu{
	padding:2em 0;
	ul{ margin:0; padding:0; text-align: center;}
	li{display:inline-block; list-style: none;}
	a{ text-decoration: none; color: inherit;}
}

.region-footer-bottom{
	text-align: center;
}
.region-footer-bottom .block{
	display: inline-block;
	font-size:0.7em;
	margin: 2em 0;
}

#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;}

#tasks{
	.tabs{
		border: none;
		padding:0;
		a{
			border:none;
			border-radius: 3px;
			background-color: #eee;
			padding:0.4em;
			color: #000;
			margin:0 1em 0 0;
			&.active{
				background-color: #999;
			}
		}
	}
}