librealire/squelettes/scss/styles/_perso.scss

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

a {
	
	&.tp {
		background:none !important;
		padding:0;
		color:$couleurPrincipale;
		&:before {
			content:'...';
			display:inline-block;
			margin: 0 -2em 0 0;
			font-size: 1.2rem;
			float: left;
			line-height: 1.8;
			color: $couleurSecondaire;
			min-width:24px;
			/*padding-bottom: 4px;
			background-image:radial-gradient(circle, $couleurSecondaire 1px, rgba(255,255,255,0) 1.5px);
			background-position: bottom left;
			background-size: 8px 4px;
			background-repeat: repeat-x;*/
		}
			&.taille3 {
				&:before {
					line-height:2.2;
				}
			}
		&:hover, &:focus {
			/*color:$couleurSecondaire;
			background-image:radial-gradient(circle, $couleurSecondaire 1px, rgba(255,255,255,0) 1.5px);
			background-position: bottom left;
			background-size: 8px 4px;
			background-repeat: repeat-x;*/
			&:before {
/* 				background:none; */
				content:'......';
			}
		}
	}
}



@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, $survol:$couleurSecondaire) {


	display:          inline-block;
	line-height:      1.2;
	border:           none;
	box-shadow:       none;
	text-align:       center;
	transition:       background 0.3s;
	cursor:           pointer;
	font-family:$typo-Merriweather;
	border-radius:($spacer/4);
	background:$sombre;
	color:$clair;
	font-weight:700;
	padding:		($spacer/2) $spacer;

	&:hover {
		background-color: $survol;
		text-decoration:  none;
		color:            $clair;
	}
	&:focus {
		background-color: $clair !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:$clair;
		}
	}
	&:hover .fas:before, &:focus .fas:before {
		color:      $clair;
	}

}


//
// modele bouton
//
.btn {
	@include bouton();
	&.right {
		float:right;
		margin-left:$spacer;
	}
	&.left {
		float:left;
		margin-right:$spacer;
	}
}

/* blocs */

.page_connex {
	background:$couleurConnex;
	@include gradient-4();
	color:#fff;
	padding:($spacer*2) 0;
	h2 {
		margin-bottom:($spacer);
		font-weight:700;
		color:white;
	}
	.liste_articles {
		position:relative;
		font-size:120%;
		margin-bottom:($spacer*3);
		&:last-child {
			margin-bottom:0;
		}
		.btn {
			position:absolute;
			right:0;
			top:($spacer/3);
		}
		.article-resume.block-link-parent {
			margin-bottom:0;
			border: 0;
			background: none;
			color: white;
		}
		.article-resume__texte {
			padding-top:$spacer;
			color: white;
		}
		.article-resume__date {
			margin-top:0;
		}
		.article-resume .article-resume__titre {
			font-size:1.2rem;
			line-height:1.4;
		}
		.article-resume__intro, .article-resume__soustitre {
			color:white;
		}
		.spip_logo, .tp {
			@include visuallyhidden;
		}
		@include media($bp-medium-up){
			> div {
				@include flex();
				@include vendor-prefix(flex-direction,raw);
				@include vendor-prefix(justify-content,space-between);
				> * {
					width:30%;
				}
			}
		}
	}
}


.page_footer {
	
	.page_connexplus {
		padding:($spacer*1.5) 0;
		background:$couleurConnexplus;
		color:#000;
		margin-bottom:($spacer*1.5);
		.liste.liste_mots .listes {
			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;
					margin: 0 2em 0 0;
				}
			}
		}
	}
	
	padding-top:0;
	.formulaire_spip.formulaire_recherche  {
		display:none;// pour ne pas surcharger tout le footer
	}
}


// layout
.page_content {
	margin-bottom:$spacer*2;
	.composition_sanscolonne & {
		margin-right:0;
	}
}



// page sommaire
.page_sommaire {
	.page_content {
		margin-right:0;
	}
}
.texte_accueil {
	line-height: 1.6;
	margin-bottom:$spacer;
	font-family:$typo-Merriweather;
	font-weight:200;
	color:$couleurPrincipale;
	@include clearfix();
	@include flex();
	.main {
		max-width: 65%;
		font-size: 1.6rem;
		padding:$spacer ($spacer*4) $spacer ;
	}
	aside {
		max-width:35%;
		padding-top: $spacer;
	}
	@media ($bp-medium) {
		flex-direction:column;
		.main, aside {
			max-width:100%;
			padding:$spacer;
			font-size:1.2rem;
			.modele_citation .citation_texte {
				font-size:1.2rem;
			}
		}
	}
}
.formulaire_spip.formulaire_recherche {
	font-size:1rem;
}

/* page blog */
.rubrique-blog {
	.cartouche .publication { 
		@include visuallyhidden;
	}
}


// resume 
.article-resume {
	display:block;
	border-left:solid $couleurConnexplus ($spacer/3);
	background-color:$couleurBkgT;
	padding:($spacer*2.5) $spacer $spacer ($spacer*3.2);
	/* surcharger la feuille perso.css */
	html & .spip_logo {
		width:auto;
	}
	&.hero .spip_logo {
		margin-bottom:$spacer;
	}
	&, 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*3.5);
		}
		&:before {
			display:none;
		}
	}
	.article-auteurs {
		font-size:110%;
		font-weight:700;
	}
}
.article-appel {
	border-left:solid $couleurBordureBleue ($spacer/4);
	padding:0 0 0 ($spacer);
	.soustitre {
		margin:0;
	}
}

// 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__infos {
		position:relative;
		height:auto;
		width:auto;
		overflow:auto;
		clip: auto;
		clip-path: border-box;
	}
	footer {
		.btn {
			margin:($spacer*2) 0;
		}
	}
}
.article__transcription_origine, .avertissement, .import .main .strong_to_dl:first-of-type {
/* 	width:100%; */
	margin:($spacer*2) -($spacer*2) 0;
	padding:($spacer*2);
	background:$couleurBkgTOrigine;
	color:$couleurTDetails;
	@include media($bp-medium-up) {
		margin:($spacer*2) -($spacer*4) 0;
		padding:($spacer*2) ($spacer*4);
	}
	> *:last-child {
		margin-bottom:0;
	}
	dt {
		float:left;
		margin-right:($spacer/2);
	}
	dd {
		margin:0;
		min-height:1.3rem;
		border-bottom:1px solid $couleurBkgT;
		&:last-child {
			border:0;
		}
	}
}
.fiches_personnes {
	@include flex();
	@include vendor-prefix(justify-content,space-between);
	margin:($spacer*4) 0 0;
	font-family:$typo-Merriweather;
	.fiche {
		width:46%;
	}
	.spip_logo  {
		float: left;
		margin-right: $spacer;
	}
	p {
		margin:0;
	}
	.fiche__titre {
		font-weight:700;
	}
	.fiche__texte {
		font-size:0.8rem;
		clear:both;
	}
}


.cartouche {
	border-left:($spacer/2) solid $couleurBkgTOrigine;
	padding-left:($spacer*1.5);
	margin-left:-($spacer*2);
	@include clearfix;
	.spip_logo {
		float:right;
	}
}
.mots {
	font-size:0.9rem;
	@include clearfix;
	&:before {
		border-top:1px solid $couleurBkgTOrigine;
	}
	&:last-child {
		border-bottom:1px solid $couleurBkgTOrigine;
	}
	a {
		display:inline-block;
		background:#fff;
		border-radius:($spacer/3);
		padding:0 ($spacer/2);
		
		font-size:0.9em;
		&:hover {
			background:$couleurSecondaire;
			color:#fff;
			text-decoration:none;
		}
	}
}

// article
.article__soustitre {
	display:block;
	font-size:1rem;
}
.nav-sommaire-1 {
	display:block;
}
.nav-sommaire {
	border:0;
	margin:($spacer*2) 0;
	.sommaire_titre {
		font-size:0.8rem;
		@include bouton();
		&.plein {
			border-radius:0;
		}
		&.on .fas {
			&:before {
				content:'\f0d7';
			}
		}
	}
	> ul {
		
	}
}
.article__notes {
	border-top:1px solid $couleurBkgTOrigine;
	padding:$spacer;
	clear:both;
}

.formulaire_signaler {
	
}
.ariaformprop {
	clear:both;
}


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


.spip_poesie {
	background:$couleurBkgCitation;
}