372 lines
6.4 KiB
SCSS
372 lines
6.4 KiB
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;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|