librealire/squelettes/scss/styles/_perso.scss

/* les surcharges de chaque site dans un plugin indépendant */


@mixin gradient-4 ($couleur1: #007682,$couleur2: $couleurConnex 7.5%,$couleur3: $couleurConnex 92.5%,$couleur4: #007884) {
	background: -webkit-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
	background: -moz-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
	background: -ms-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
	background: -o-linear-gradient($couleur1,$couleur2,$couleur3,$couleur4);
}


@mixin bouton($clair:#fff, $sombre:$couleurPrincipale) {

$couleurSaturate : saturate($clair, 45%);
$couleurSaturateLight : lighten($couleurSaturate, 10%);

	display:          inline-block;
	line-height:      1.2;
	background-color: $clair;
	border:           none;
	border-radius:   0;
	box-shadow:       none;
	text-align:       center;
	color:            $sombre;
	transition:       background 0.3s;
	cursor:           pointer;
	font-family:$typo-Merriweather;
	padding:0;
	&.plein {
		border-radius:($spacer/4);
		background:$sombre;
		color:$clair;
		font-weight:700;
		padding:		($spacer/2) $spacer;
		.fas {
			&:before {
				color:$clair;
			}
		}
	}
	&:before {
		content:'...';
		display:inline-block;
		margin: 0 -1em 0 0;
		font-size: 1.2rem;
		float: left;
		line-height: 1.6;
		color: red;
	}
	&.plein:before {
		display:none;
	}
	&:hover {
		background-color: darken($clair,15%);
		text-decoration:  none;
		color:            $sombre;
	}
	&:focus {
		background-color: $couleurSaturateLight !important;
		text-decoration:  none;
		color:            $sombre;
		}
	&[disabled=disabled] {
		background: desaturate($clair, 45%);
		color:      darken($sombre, 10%) !important;
	}
	.fas {
		padding-left:em(12px);
		float:right;
		&:before {
			font-size:em(22px);
			line-height:1;
			font-weight:700;
			color:      $sombre;
		}
	}
	&:hover .fas:before {
		color:      $sombre;
	}
	&:focus .fas:before {
		color:      $sombre;
	}
}


//
// modele bouton
//
.btn {
	@include bouton(transparent,$couleurPrincipale);
	&.plein {
		@include bouton(#fff,$couleurPrincipale);
	}
	&.right {
		float:right;
		margin-left:$spacer;
	}
	&.left {
		float:left;
		margin-right:$spacer;
	}
}

/* blocs */

.page_connex {
	background:$couleurConnex;
	@include gradient-4();
	color:#fff;
	padding:($spacer*1.5) 0;
}


.page_footer {
	
	.page_connexplus {
		padding:($spacer*1.5) 0;
		background:$couleurConnexplus;
		color:#000;
		margin-bottom:($spacer*1.5);
		.liste.mots {
			display:flex;
			flex-wrap:wrap;
			> ul {
				width:25%;
				margin:0;
				list-style:none;
				@include media($bp-small) {
					width:50%;
				}
			}
			li {
				margin: 0 0 0.2em;
				a {
					line-height:1.1;
				}
			}
		}
	}
	
	padding-top:0;
	.formulaire_spip.formulaire_recherche  {
		display:none;// pour ne pas surcharger tout le footer
	}
}


// layout
.page_content {
	margin-bottom:$spacer*2;
}



// page sommaire
.texte_accueil {
	line-height: 1.6;
	margin-bottom:$spacer;
	margin-left:$spacer;
	font-family:$typo-Merriweather;
	font-weight:200;
	color:$couleurPrincipale;
	@include clearfix();
	.main {
		max-width: 65%;
		font-size: 1.6rem;
		float:left;
		padding:$spacer $spacer*1.5;
	}
	aside {
		width:35%;
		float:right;
	}
}
.formulaire_spip.formulaire_recherche {
	font-size:1rem;
}

// resume 
.article-resume {
	display:block;
	border-left:solid $couleurConnexplus ($spacer/3);
	background-color:$couleurBkgT;
	padding:($spacer*2.5) $spacer $spacer ($spacer*3.2);
	&, a {
		color:#0a4756; 
	}
	&:after {
		content:'';
		display:block;
		clear:both;
	}
	.article-resume__titre {
		font-size: 2rem;
		line-height: 1.6;
	}
	.article-resume__soustitre {
		font-weight:700;
		margin:0;
	}
	.article-resume__logo {
		float:right;
		margin:-($spacer*1.5) 0 0 ($spacer * 1.5);
		max-width:30%;
		width:auto;
	}
	.article-resume__date {
		position:absolute;
		top:$spacer;
		left:($spacer*2);
		@include media($bp-medium-up) {
			left:($spacer*4);
		}
		&:before {
			display:none;
		}
	}
	.article-auteurs {
		font-size:110%;
		font-weight:700;
	}
}

// composition 
.composition_transcriptions {
	.page_content {
		margin-right:0;
		article {
			padding:($spacer*2.5) ($spacer*2) $spacer;
			background-color:$couleurBkgT;
			border-radius:0 0 6px 6px;
			@include media($bp-medium-up) {
				padding:($spacer*2.5) ($spacer*4) $spacer;
			}
			.avertissement {
				background:$couleurBkgAvertissement;
				margin-bottom:-$spacer;
				margin-top:0;
				border-radius:0 0 6px 6px;
			}
			&.import {
				.main {
					.strong_to_dl {
						@include clearfix;
						&:first-of-type:before {
							content:'Média d’origine';
							display:block;
							@extend .h2;
						}
						dt {
							clear:both;
							float:left;
							margin-right:$spacer/2;
						}
						dd {
							margin:0;
						}
					}
				}
			}
		}
		.liste_articles article {
			padding:($spacer*2.5) $spacer $spacer ($spacer*2);
			@include media($bp-medium-up) {
				padding:($spacer*2.5) $spacer $spacer ($spacer*4);
			}
		}
	}
}
.article__transcription_origine, .avertissement, .strong_to_dl {
/* 	width:100%; */
	margin:($spacer*2) -($spacer*2) 0;
	padding:$spacer ($spacer*2);
	background:$couleurBkgTOrigine;
	color:$couleurTDetails;
	@include media($bp-medium-up) {
		margin:($spacer*2) -($spacer*4) 0;
		padding:$spacer ($spacer*4);
	}
	dt {
		float:left;
		margin-right:($spacer/2);
	}
	dd {
		margin:0;
		border-bottom:1px solid $couleurBkgT;
		&:last-child {
			border:0;
		}
	}
}


.cartouche {
	.spip_logo {
		float:right;
	}
}

// article
.article__soustitre {
	display:block;
	font-size:1rem;
}
.nav-sommaire {
	border:0;
	margin:($spacer*2) 0;
	.sommaire_titre {
		font-size:0.8rem;
		@include bouton(#9dccd1,$couleurPrincipale);
		&.plein {
			border-radius:0;
		}
		&:hover, &:hover .fas {
			color:darken($couleurPrincipale,10%);
		}
	}
	> ul {
		
	}
}





// page_mot
.page_mot {
	.page_content {
		margin-right:0;
	}
}




/* modeles */
/* citation */
.modele_citation {
	@include clearfix();
	.citation_texte {
		background:$couleurBkgCitation;
		border-radius:$spacer/2;
		padding:$spacer;
		font-size:1.4rem;
		color:$couleurPrincipale;
	}
	.citation_image {
		float:right;
		position:relative;
		margin-top:10px;
		padding-left:46px;
		&:after {
				display:block; content:''; width:0; height:0; 
				position:absolute; left:0; top:-32px;
				border-top: 60px solid $couleurBkgCitation;
				border-left: 20px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 0;
				@include rotate(-50deg);
				z-index:0;
		}
	}
}