561 lines
9.6 KiB
SCSS
561 lines
9.6 KiB
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;
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
|