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


//----------------------------------------
//  Boutons
//----------------------------------------

.button,
.formulaire_spip button,
.formulaire_spip input[type=submit] 
{
    @include bouton($couleur-boutons, #fff, $couleurPrincipaleOn);

}

.sansbordure a.spip_out {
    border: 0;
}


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


.article-resume {
	background-color:white;
	padding:$spacer;
}
.article__texte {
	margin-bottom:($spacer*3);
}

.page_main {
	overflow:hidden;
}
.page_main_content {
	align-items: start;
	@include media($bp-medium-up) {
		.page_article & {
			background:white;
			.page_aside {
				margin-left:0;
			}
		}
	}
}
.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:$couleurSecondaire;
				color:$couleurPrincipale !important;
			&:hover {
				background:$couleurPrincipaleOn;
				color:white !important;
			}
		}
	}
	h1 {
		margin-bottom:0;
		background-color:white;
	}
	.page_article & > article, .composition_emission & > article, > .texte, > .ps, .rubrique_blog & > section, > .periode,
	.prochaine_emission, .derniere_emission, .page_recherche & {
		background-color:white;
	}
	> .ajaxbloc {
		padding-top: 0;
		margin-top: 8rem;
		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;
}
.galerie_photoapril figure {
	@include media($bp-large-up) {
		&:first-child {
			text-align:left;
		}
		&:last-child {
			text-align:right;
		}
	}
}

.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%;
	}
	@include media($bp-medium) {
		flex-direction: column;
		text-align: center;
		.telecharger {
			padding:0;
			margin-top:$spacer;
		}
		 > .podlove_wrapper {
			 width:100%;
		}
	}
}

.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;
		}
	}
	.derniere_emission & {
		margin:0 -($spacer*4);
	}
}


/* 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;
	}
}
a:hover .fab, a:hover .fas {
	color:$couleurPrincipaleOn;
}


/* 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:1rem 0;
			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;
		}
		h1 > a {
			border:0;
		}
	}
	.pagination .pagination-items a, .pagination .pagination-items span, .pagination .lien_pagination, .pagination .lien_pagination span {
		color:white;
		&.on, &:hover {
			background:transparent !important;
			color:$couleurPrincipaleOn !important;
			color:$couleurPrincipale;
		}
	}
	.sujet_autre {
		margin: $spacer -($spacer) -($spacer);
		padding:$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 .pagination-items span, .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;
	}
}
.header_initiatives, .header_initiatives .nav, .btn-nav, .header_initiatives .btn-initiatives {
	@include gradient-4($couleurPrincipale,$couleurPrincipale,$couleurPrincipale,#004369);
	.inclure_blocs { /* pour un var_mode=inclure sans encombre */
		display:none;
	}
}


/*
 * ajouts Antoine 07/09 
 */
/* réduction de corps de titre
*/
h3, .h3 {
    font-size: 1.2em;
}
/* pas de graissage de corps. Dans le corps de texte, les liens "a" sont soulignés en orange
*/
a.spip_out {
    font-weight: 400;
}
/* réduction et degraissages des boutons podcats
*/
.btn.podcast {
    padding: 0em 0.5em 0em 1rem;
    border-width: 0.15rem;
    font-weight: 700;
    font-size: 0.5rem;
}
.podlove.native, .podlove .info, .podlove .progress {
    font-family:$typo-titre;
    color: #005184;
    font-weight: 300;
}
.btn.blanc {
    border-radius: 0.8em;
}
.telecharger .btn.blanc {
    border-width: 0.3rem;
}
.telecharger .btn.podcast {
    font-size: 1rem;
    font-weight: 600;
}
.btn.podcast small {
    font-size: 0.6em;
    font-weight: 300;
}
/*
 * fin 
 */

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