libreavous/squelettes/scss/styles/_perso.scss

// perso
// les différences

.btn {
    padding: 0.5em 1em;
    font-weight: 500;
	&:hover {
		background:$couleurPrincipaleOn;
		color:$couleurPrincipale !important;
	}
}
.liens .btn {
    padding: 0.7em 1em;
}
.btn.blanc {
    border-radius: 0.7em;
}
span.btn {
	cursor:text;
}

.page_wrapper {
	background:$couleurPrincipale url('../images/egalizer.png') repeat-x center -150px;
/* 	background-attachment:fixed; */
	@media ($bp-small) {
		background:$couleurPrincipale url('../images/egalizer-480.png') repeat-x center -150px;
	}
}
.page_header {
	padding:0;
	> .page_container {
		background-color:$couleurSecondaire;
	}
	.header_title {
		min-width: 150px;
	}
	.header_menu {
		flex-grow: 2;
		padding:$spacer;
		.nav {
			padding-top:0;
		}
		.liens {
			text-align:right;
			margin-top:0.7rem;
			.btn {
				float:right;
				margin-top:1.55rem;
				.fas:before {
					font-size:1rem;
				}
				&:hover, &:focus {
					background:$couleurPrincipaleOn;
					color:$couleurPrincipale !important;
					.fas:before {
						color:$couleurPrincipale !important;
					}
				}
			}
			
			.sociaux {
				float:right;
				display:inline-block;
				font-size:0.8rem;
				margin:1.8rem 1.5rem 0 0;
				.socicon {
					background:none !important;
					color:$blancTransparent;
					&:hover, &:focus {
						color:$couleurPrincipaleOn;
					}
				}
			}
			.formulaire_spip.formulaire_abomailman_mini_une_liste {
				width:230px;
				float:right;
				position:relative;
				margin:0 0 0 $spacer;
				text-align:left;
				.reponse_formulaire {
					position: absolute;
					top: 100%;
					margin: 0;
				}
			}
		}
	}
	.nav a {
		border:0;
		color:white;
		padding:0.3em 0.7em 0.2em;
		margin-right:0;
		margin-left:0;
		border-radius:4px;
/* 		background-color:$couleurSecondaire; */
		.on &,
		&.on,
		&:focus,
		&:hover,
		&:active {
			background-color:$couleurPrincipaleOn;
			color:$couleurPrincipale;
		}
	}
	> .page_container .nav > ul .loupe a {
		i.fa-search {
			background-color:$blancTransparent;
			font-size:0.8rem;
			color:$couleurSecondaire;
			&:hover {
				background-color:$couleurPrincipaleOn;
				color:$couleurPrincipale;
			}
		}
	}
}

.page_header_container {
    align-items: flex-start;
}
.arbo {
	@include visuallyhidden;
}

.encart {
	float:right;
	text-align:right;
	font-size:1.1rem;
	margin-left:2rem;
	span {
		font-size:145%;
		&.bientot {
			display:inline-block;
			color:$couleurSecondaire;
			font-weight:900;
		}
		&.btn {
			background:$couleurSecondaire;
			color:white !important;
			font-weight:900;
			margin:0.6rem 0 0.3rem;
			padding:1.3rem 2rem;
			&:first-letter {
				text-transform:uppercase;
			}
		}
	}
}


.texte_accueil {
	background-color:white;
	.main {
		padding-bottom:1rem;
	}
}


.article-resume {
	background-color:white;
	padding:$spacer;
}

.page_main {
	overflow:hidden;
}
.composition_emissions, .composition_emission, .composition_chroniques {
	
	.page_main_content {
		flex-direction: column;
	}
	.page_content, .page_aside {
		
	}
	.page_content {
		
	}
}
.page_content {
	.page_rubrique & {
/* 		background-color:#fff; */
	}
}
.page_aside {
	> ul .article-resume {
		padding:0;
	}
}
.page_content, .page_aside, .page_extra {
	> * {
		margin:0 0 ($spacer*2);
		padding:$spacer ($spacer*4);
		
		&.page_extra {
			padding:0;
		}
		&.btn {
			background:$couleurPrincipaleOn;
			color:$couleurPrincipale !important;
			&:hover {
				background:$couleurSecondaire;
			}
		}
	}
	h1 {
		margin-bottom:0;
		background-color:white;
	}
	.page_article & > article, .composition_emission & > article, > .texte, > .ps, .rubrique_blog & > section, > .periode,
	.prochaine_emission, .derniere_emission {
		background-color:white;
	}
	> .ajaxbloc {
		padding-top: 0;
		margin-top: 6rem;
		position: relative;
		.emissions > h2, .emissions > a {
			position:absolute;
			margin-top:-2.6rem;
		}
		.article_blog & {
			margin-top:0;
			padding:$spacer ($spacer*2);
			background-color:white;
			.pagination .pagination-items a, .pagination .lien_pagination a {
				color:$couleurPrincipale;
			}
		}
	}
}

h2 {
	font-weight:900;
}

.fl {
	border-top:2em solid $couleurPrincipale;
	border-bottom:2em solid $couleurPrincipale;
	margin:0 -1000px;
	padding:2em 1000px;
	background:white;
}
.fb {
	padding:2em 0;
	> h2 {
		margin-top:2em;
	}
}

.photoapril {
	margin-bottom:1em;
}
.galeriephotos {
	float:right;
	font-size:1.2rem;
	line-height: 1.8;
}
.licence {
	padding:1em;
	line-height:1.2;
	margin-top:2em;
	background:$couleurBackgroundTexteBleu;
}

.detail_emission {
	ul { list-style:none;
		> li {
			padding-left:1em;
			position:relative;
			&:before {
				position:absolute;
				left:0;
				top:0.6em;
				@include triangle(right,$couleurSecondaire,0.35em,1.8);
			}
		}
	}
}

.btn.blanc {
	color:$couleurPrincipale !important;
	background:white;
	border:1px solid rgba($couleurPrincipale,0.2);
	border-radius:0.5em;
	&:hover {
		background:$couleurPrincipaleOn;
	}
	&.bold {
		border-color:$couleurPrincipale;
	}
}


.article__infos {
	position:relative;
	height:auto;
	margin:0;
	width: auto;
	white-space: inherit;
	clip: unset;
	clip-path: unset;
	font-size:1em;
	margin:-$spacer 0 0 -($spacer*4);
	overflow:visible;
	.composition_blog & {
		margin:0;
	}
}
.num_emission {
	display:inline-block;
	width:150px;
	padding:0.5rem;
	margin-right:1.5rem;
	font-weight:700;
	font-size:2.8rem;
	text-align:center;
	color:$couleurSecondaire;
	background:$couleurBackgroundTexte;
	font-family:$typo-titre;
	
}
.article__date {
	display:none; /* provisoire, par simplicite */
}

.composition_emissions, .composition_emission, .emissions, .derniere_emission, .prochaine_emission {
	.article__date {
		display:inline;
		font-size:1.5rem;
		color:$couleurSecondaire;
		font-weight:700;
		font-family:$typo-titre;
	}
}
.composition_blog {
	.article__date {
		display:inline-block;
	}
}
.liste.articles.blog {
	padding:$spacer ($spacer*2);
	background-color:white;
	.liste-items {
		list-style:none;
		margin:0 0 ($spacer*2);
		.item {
			border-top:1px solid $couleurPrincipale;
			&:first-child {
				border:0;
			}
			.article-resume {
				padding-left:0;
				padding-right:0;
			}
		}
	}
}
.lecteur {
	@include flex;
	align-items:center;
	 margin-bottom:($spacer*3);
	> .podlove_wrapper {
/* 		flex-grow:2; */
		width:76%;
	}
}

.telecharger {
	list-style:none;
	width:200px;
	padding:0 0 0 ($spacer*2);
	margin:0;
	li {
		padding:($spacer/2) 0 ($spacer/2);
	}
	.btn.podcast {
		width:100%;
		padding-left:2.2rem;
		padding-bottom:0.3rem;
		font-size:1.15rem;
		text-transform:none;
		&:before {
			left:0.8rem;
		}
	}
}

.btn.podcast {
	padding:0 0.5em 0.1em 1rem;
	position:relative;
	text-align:left;
	border-width:0.25em;
	border-color:$couleurSecondaire;
	color:$couleurSecondaire !important;
	font-weight:900;
	font-size:0.6rem;
	text-transform:uppercase;
	&:before {
		@include triangle(right, $couleurSecondaire, 0.5em);
		position: absolute;
		left: 0.4rem;
		top: 50%;
		margin-top:-0.45em;
	}
	small {
		font-size:0.7em;
		font-weight:400;
	}
	&.mp3 {
		border-color:$couleurPrincipale;
		color:$couleurPrincipale !important;
		&:before {
			@include triangle(right, $couleurPrincipale, 0.5em);
		}
	}
	&:hover, &:active, &:focus {
		background:$couleurPrincipaleOn !important;
		border-color:$couleurPrincipaleOn !important;
		color:$couleurPrincipale !important;
		&:before {
			@include triangle(right, $couleurPrincipale, 0.5em);
		}
	}
}


.sujet_autre {
	background:$couleurBackgroundTexte;
	padding:$spacer ($spacer*4);
	margin:($spacer*2) -($spacer*4) -($spacer*2);
	.article_emission & > div {
		@include flex;
		@include vendor-prefix(flex-wrap, wrap);
		> * {
			width:50%;
			&:nth-child(odd) {
				padding-right:$spacer*2;
			}
			&:nth-child(even) {
				padding-left:$spacer*2;
			}
		}
	}
	// pour insertion dans le texte/chapo avant d'avoir le podcast
	.chapo & {
		margin-bottom: -($spacer);
		clear:both;
		font-size:1rem;
		> * {
			font-size:1.2rem;
		}
	}
}


/* notation */
.formulaire_jaime_jaimepas {
	.note, .reponse_formulaire {
		float:left;
	}
}
div.star-rating, div.star-rating a {
	background-image:url('img/star.png');
}
div.rating-cancel a {
	background-image:url('img/delete.png');
}
/**/

.sociaux {
	.socicon {
		display: inline-block;
	}
	a.spip_out {
		border:0;
	}
}


/* bloc connex */
.page_connex {
	margin:3rem 0 0;
	padding:0 0 1rem;
	background:$couleurPrincipale;
}
.page_connex_content {
	color:white;
	h2 {
		color:white;
		font-size:1rem;
	}
	ul {
		list-style:none;
		margin-left:0;
		li {
			margin:0 0 0.5rem;
		}
	}
	a {
		border:0;
	}
}
/**/
.page_footer {
	.article {
		@include media($bp-small-up) {
			@include flex;
			justify-content:space-between;
			> * {
				width: calc(50% - 1rem);
			}
		}
		.article__texte, .article__chapo {
			margin-bottom:2rem;
			font-weight:400;
			strong, i, .btn {
				font-size:115%;
			}
		}
	}
	.formulaire_spip.formulaire_recherche {
/* 		max-width:100%; */
	}
}

/* page sommaire */
.body__sommaire .page_main {
	h1 {
		margin: 1em 0 0.8em;
	}
}
.derniere_emission {
	position:relative;
	margin-top:($spacer*6);
	> h2 {
		margin-top:-($spacer*3.6);
		margin-bottom:($spacer*0.7);
	}
}
.derniere_emission, .liste.emissions {
	padding-bottom:0;
	> h2 {
		color:white;
	}
	.texte_content {
		flex:1;
		padding-bottom:$spacer;
		h1 {
			font-size:1.6rem;
		}
		h2 {
			font-size:1.2rem;
		}
		p.flex {
			margin-bottom:1rem;
			padding-right:2rem;
			align-items:center;
			.podcast {
				font-size:110%;
				text-transform:none;
				padding-left:1.6rem;
			}
		}
	}
	.article__infos {
		margin-top:0;
		.num_emission {
			font-size:2rem;
			padding:0.1rem 1rem;
			width: auto;
		}
		.article__date {
			font-size:1rem;
			color:$couleurPrincipale;
			font-weight:400;
		}
		.btn.blanc {
			float:right;
			margin-top:0.8rem;
			margin-left:0.5rem;
			font-weight:700;
		}
	}
	.photo {
		margin-right:-4rem;
		background:$couleurBackgroundTexte;
		.photoapril {
			margin:0;
		}
		a {
			display:inline-block;
			padding:0 1rem;
			font-size:0.9rem;
			font-weight:500;
			color:$couleurSecondaire;
		}
	}
}
.liste.emissions {
	.cartouche {
		margin:0;
	}
	> h2 {
		margin-bottom:($spacer*0.6);
	}
	> ul {
		list-style:none;
		padding:0;
		margin:0 -($spacer*4);
		> li {
			margin-bottom:2px;
		}
	}
	.emission-resume.article-resume {
		align-items:center;
		padding: 0 1em;
		margin:0;
		.article__infos {
			margin-left:-$spacer;
		}
	}
}
.liste.emissions.chroniques {
	> ul > li {
		background-color:white;
		margin-bottom:$spacer;
	}
	.emission-resume.article-resume {
		align-items:start;
	}
}
.prochaine_emission {
	.article__date {
		font-size:1rem;
		color:$couleurPrincipale;
		font-weight:400;
	}
	.chapo {
		font-size:1.2rem;
	}
}

.orange {
	color:$couleurSecondaire;
}

.pagination .pagination-items a, .pagination .lien_pagination a /* spip 3 et 4 */ {
	color:white;
	.composition_blog & {
		color:$couleurPrincipale;
	}
}


 /*!    Plusieurs typographies sont finalement trop grosses, j'ai réduit. */
h1, .h1 {
    font-size: 2.6em;
}
h2 {
    font-weight: 700;
}
.article-resume__titre a {
    color: #2E5281;
    border-bottom: inherit;
}


 /*!    certaines graisses sont trop forte en 700.*/

.page_header > .page_container .nav a {
    font-weight: 500;
}


 /*!    Sur le menu j'ai augmenté la hauteur du bouton RSS et le champ recherche. Pour le menu avec le hover je propose de modifier le design, car le bouton bleu cyan au rollover est trop prégnant. Je convertis en filets simlple 2pt. Par contre j'ai basculé le padding sur le "li" sinon le filet sous le "a" débordait de chaque côté (voir copie-écran de la retouche css de la bannière)
Sur le menu, je vais voir s'il est possible de faire des filets de rollover composés de tirets et de points avec les fonctions css border-image. Ce  qui ferrait un rappel du design.*/

 /*!  cyan ausurvol*/
.page_header .nav a:hover, .page_header .nav a.on, .page_header .nav a.active {
    color: white !important;
    background-color: transparent !important;
    border-bottom:3px solid #00c4f5;
}

 /*!  bleu charte ensuite */
.page_header .nav a.on, .page_header .nav a.active {
    border-bottom:3px solid #2E5281;
}




/*.emission-programme ul::before {
    content: "Sujet Principal :";
    font-size: 1.3em;
    font-weight: 700;
    font-family: 'Montserrat';
    line-height: 2em;
    margin-left: -1em;
}*/
a.spip_out {
    color: #2E5281;
    border-bottom: 2px solid #FDC;
}
.formulaire_spip input[type="text"]{
    min-height: 2.5em;
    line-height: 1.875em;
    border-radius: 3px;
}

 /*!    trop gros, j'ai réduis. */

.num_emission {
    font-size: 2.3rem;
}
.nav li {
    margin: 0 0.7em;
}
.page_header .nav a {
    padding: 0.3em 0em 0.2em;
    color: white !important;
    background-color: inherit;
    border-radius:0;
    border-bottom:3px solid transparent;
}

 /*!    couleurs des liens sortants selon la maquette */


.formulaire_spip .abonnement button::after {
    bottom: 0.8rem;
}
 
/*!    fond du cartouche galerie selon la maquette avec ombrages*/

.fl {
    background: #EEF1F5;
    box-shadow: inset 0px 1px 20px rgba(0, 0, 0, 0.5);
}


/*!    Polices du pied de page plus maigre  */

.page_footer p {
    font-size: 0.8rem;
    font-weight: 200;
	a, a.spip_out {
		display:inline;
		font-weight:400;
		color:white;
		border-bottom-width:1px;
	}
}


@media (max-width:940px) {
	.page_header > .page_container {
		.nav {
			padding-top:($spacer/2);
			font-size:0.95rem;
			z-index:7;
			position:static;
			> ul { 
				position:absolute;
				background:$couleurPrincipale;
				width:100%;
				top:36px;
				left:-100%;
				padding:$spacer/2 $spacer;
				text-align:center;
				z-index:10;
				&.ouvert{
					left:0;
				}
				a {
					color:white;
					border:0;
					display:block;
					margin:0;
					padding:0.5rem;
					&:hover, &:focus, &.on {
						background:$couleurSecondaire;
					}
				}
				li { 
					display:block;
				}
				.loupe {
					.fas {
						color:white;
					}
					.formulaire_recherche.vu {
						right:50%;
						margin-right:-160px;
						max-width:320px;
						form {
							padding:0.5rem;
							&:before {
								display:none;
							}
						}
					}
				}
			}
		}
	}
	.btn-nav {
		display:block;
	}
	.header_initiatives {
		.btn-initiatives {
			display:block;
		}
		
	.nav {
		position:absolute;
		width:100%;
		top:36px;
		left:-100%;
		@include vendor-prefix(transition,all 0.3s ease-in-out);
		&.ouvert {
			left:0;
		}
		ul, .initiatives {
			display:inline;
		}
	}
	}
}

@include media(min-width:941px) {
	.page_header > .page_container .nav {
		position:relative;
	}
	
}
@media (max-width:804px) {
	.page_header .header_menu .liens {
		margin-top:0;
	}
	.page_header .header_menu .liens .sociaux {
		margin-top:0.8rem;
	}
}
@media (max-width:650px) {
	
	.page_header .header_menu .liens .btn {
		margin-top:0.5rem;
	}
}
@media (max-width:580px) {
	.page_header > .page_container .nav {
		padding-top:0;
	}
	.page_header .header_menu {
		padding:0.3rem 1rem;
	}
	.page_header .header_menu .liens .sociaux {
		margin-top:0;
	}
	.article-resume > :last-child.telecharger {
		margin-bottom:1rem;
	}
	.page_header .header_menu .liens .formulaire_spip.formulaire_abomailman_mini_une_liste {
		width:160px;
	}
	.page_header .header_title {
		min-width: 100px;
	}
}