/*
01. Couleurs
02. Titraille
02.01 h3
03. Table
04. Onglets (cf. Couteau suisse)
05. spip_documents
06. Lignes de séparation
07. Liste numérotée
08. Liste 'bullet points'
09. Blockquote
09.01 spip_poesie
09.02 spip_poesie
09.03. twitter
10. Blocs dépliables
11. Pagination
12. Blocs de tri
13. Plugin emb PDF
14. Exposants
15. Division, découpe d'une page (cf. Couteau suisse)
16. Boutons spip d'admin
17 Plugin Social Tags / Imprimir_documento
18. Notes de bas de page (cf. plugin littlefootnote)
19. Plugin Spip colonnes
20. Glossaire interne / Liens directs
21. Enluminures typographiques V3
21.01 Encadré */
/*
/* 01 Couleur
---------------------------------------------------------------------------------------*/
a {color: var(--theme-color); }
a:focus, a:hover {color:var(--themehover-color); }
blockquote:before, q:before,
ol > li:before,
ol.spip > li strong, ul.spip > li:before, p.tiret:before, ul.spip > li > ul.spip > li:before, p.puce:before,
.bloc-pagination a, .bloc-pagination .on,
.cs_blocs h3.blocs_titre,
h3.blocs_titre a, h3.blocs_titre a:hover,
h3.blocs_titre:before, h3.blocs_replie:before
{color:var(--theme-color);}
.bloc-pagination span.next a, .bloc-pagination span.prev a {
color:var(--theme-color); border: 2px solid var(--theme-color);}
.bloc-pagination .on, .bloc-pagination a:hover, .bloc-pagination span.next a:hover, .bloc-pagination span.prev a:hover {
background-color:var(--theme-color);border: 2px solid var(--theme-color); }
.cs_blocs .blocs_destination{border-top:var(--theme-color) 1px solid;}
/* 02. Titraille
---------------------------------------------------------------------------------------*/
/* 02.01 titraille h3 */
h3.spip, h4.spip, h5.spip{
text-align:left;padding-bottom:15px; position: relative;font-weight:400;font-family:var(--font-title);letter-spacing: 0.07143rem;clear:none;}
h3.spip {margin-top:50px; margin-bottom:20px;color:#000000;font-size: 23px;}
h4.spip, h5.spip {margin-top:30px; margin-bottom:10px;}
h4.spip{ font-size: 21px;color:#333}
h5.spip{font-size: 19px;color:#666}
h3.spip i {font-family:var(--font-title);}
.page_sommaire h3.spip, .page_mot h3.spip, .page_rubrique h3.spip, .page_auteur h3.spip, .page_site h3.spip, .page_album h3.spip, .page_formulaire h3.spip { text-align:center;}
h3.spip:after{
content: "";display: inline-block; height: 4px;background: var(--theme-color);position: absolute;left:0px; width: 50px;bottom: 0;}
.page_sommaire h3.spip:after, .page_mot h3.spip:after, .page_rubrique h3.spip:after, .page_auteur h3.spip:after, .page_site h3.spip:after, .page_album h3.spip:after, .page_formulaire h3.spip:after{
content: "";display: inline-block;height: 4px;background: var(--theme-color);position: absolute;left:50%; margin-left:-25px;width: 50px;bottom: 0;}
.texteencadre-spip h4.spip {margin-top:10px}
/* 03. Table
---------------------------------------------------------------------------------------*/
table.spip{
background:transparent;
padding : 15px 0px;}
table.spip td{border:none}
table.spip > tbody > tr:first-child {border-top:1px solid #E5E5E5;;}
table.spip > tbody > tr {border-bottom: 1px solid #E5E5E5;}
table.spip > thead > tr > th,
table.spip > tbody > tr > th,
table.spip > tfoot > tr > th,
table.spip > thead > tr > td,
table.spip > tbody > tr > td,
table.spip > tfoot > tr > td{ padding:8px;line-height:1.428571429; vertical-align:top; border: none}
table.spip tr.even th { font-family:var(--font-title); font-weight:400;text-transform:none;letter-spacing:2;}
table.spip tr.row_first th{
font-weight:400;
text-transform:uppercase;
font-family:var(--font-title);
border-bottom : none;
letter-spacing:2;}
table.spip > caption {
border:none;
background:none !important;
font-family:var(--font-text);
letter-spacing:1;
text-align:left;
font-weight:400;
caption-side :top;}
table > caption {caption-side :top;}}
@media (max-width: 640px) {
table.spip tr {
border-bottom: 1px solid #F5F5F5;
}
}
/* 04. Onglets (Tabs) (customisation des tabs spip cf. couteau suisse/outils/decoupe.css)
---------------------------------------------------------------------------------------*/
div.onglets_bloc {
position:relative;
width:100%;
clear:both;
background:none;
padding:15px ;
margin: 20px 0px 10px 0px;
z-index:1;}
div.onglets_bloc .onglets_liste {
border: none;
background: none;
overflow:hidden;
width: 100%;
white-space:nowrap;
border-bottom:1px solid #f5f5f5;
z-index:2;
}
div.onglets_bloc .onglets_liste h2.onglets_titre {
position:relative;
display:inline;
float:left;
cursor:pointer;
border:none;
background:none;
margin: 0px;
height: 43px;
top:0px;
padding-left:15px;
padding-right:15px;
text-align:center;
font-weight:400;
z-index:1;
font-family:var(--font-title);
}
div.onglets_bloc .onglets_liste h2.onglets_titre i{
font-size:20px;
padding: 5px 0px;}
div.onglets_bloc .onglets_liste h2.onglets_titre:before {
background: none;
position: absolute;
font-size:4px;
top: 10px;
left: 0;
font-family: FontAwesome;
content: "\f0c8";
color:#272727;}
div.onglets_bloc .onglets_liste h2.onglets_titre:first-child:before
{content:none;}
div.onglets_bloc .onglets_liste h2.onglets_titre:first-child {
padding-left:0px;
}
div.onglets_bloc .onglets_liste h2.onglets_titre:last-child {
padding-right:0px;
}
div.onglets_bloc .onglets_liste h2.onglets_titre.selected {
top:0px; }
div.onglets_bloc .onglets_liste h2.onglets_titre a
{font-size:18px;
font-weight: 400;
text-transform:uppercase;
text-align:left;
color:#272727;
padding: 13px 0px;
text-decoration:none;
font-family:var(--font-title);
}
div.onglets_bloc .onglets_liste h2.onglets_titre.selected a {
padding-bottom :15px;
border-bottom: 4px solid;
border-color: var(--theme-color);
border-collapse:collapse;
color:var(--theme-color); }
div.onglets_bloc .onglets_liste h2.onglets_titre.selected i {padding-bottom:22px;}
div.onglets_bloc .onglets_contenu {
display:none;
clear:both;
z-index:1;
position:relative;
top:0px;
border:none;
background:none;
padding:20px 5px 20px 5px; margin: 0px;
border :1px solid #CCCCCC;
}
div.onglets_bloc .onglets_contenu.selected {
display:block;
overflow:hidden;
border:none;}
div.onglets_bloc .onglets_contenu p {padding-left: 5px ;padding-right:5px;}
/* 05. spip_documents
----------------------------------------------------------------------------------------*/
.spip_documents_left{float:none;margin:20px auto; display:block;}
.spip_documents_right{float:none;margin:20px auto;display:block;}
.spip_documents_center{float:none;margin:20px auto;display:block;}
@media (min-width: 1200px) {
.spip_documents_left {
float:left;margin:15px;margin-left:-150px; width: 60%}
.cs_blocs .spip_documents_left {margin-left:15px}
.spip_documents_right {float:right;margin:15px;margin-right:-150px;width: 60%}
.cs_blocs .spip_documents_right {margin-right:15px}
.spip_documents_center {float:none;margin:15px auto;}
}
/* 06. Ligne séparation
----------------------------------------------------------------------------------------*/
hr.spip{border-color:#EEE;margin:50px auto;clear:both;}
hr{border-color:#EEE;margin:10px auto;clear:both;}
.filet_sep{width:100%;clear:both;}
.filet_sep_0{border:#EEE 2px solid;}
.filet_sep_2{border:#EEE 1px solid;margin:30px auto;}
.filet_sep_1{border:15px #EEE solid;}
/* 07. Liste numérotées
----------------------------------------------------------------------------------------*/
/* styles issus de http://www.456bereastreet.com/archive/201105/styling_ordered_list_numbers/*/
.texte ol.spip {
counter-reset:li; /* Initiate a counter */
margin-left:0; /* Remove the default left margin */
padding-left:0; /* Remove the default left padding */ }
.texte ol.spip { margin-left: 35px; }
@media (max-width: 640px) {
.texte ol.spip { margin-left: 35px; }}
.texte ol.spip > li {
position:relative; /* Create a positioning context */
margin:0 0 6px 0; /* Give each list item a left margin to make room for the numbers */
padding:4px 8px 4px 30px; /* Add some spacing around the content */
list-style:none; /* Disable the normal item numbering */
}
.texte ol.spip > li:before {
content:counter(li); /* Use the counter as content */
counter-increment:li; /* Increment the counter by 1 */
/* Position and style the number */
position:absolute;
top:0em;
left:0em;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
width:1.6em;
/* Some space between the number and the content in browsers that support
generated content but not positioning it */
margin-right:8px;
padding:4px;
text-align:center;
color: var(--theme-color);
font-family:var(--font-title);
text-transform:uppercase;
font-weight:400;
}
.texte ol.spip > li strong {
font-family:var(--font-title);
text-transform:uppercase;
font-weight:400;
letter-spacing:2;
}
/* 08. Liste 'bullet points'
----------------------------------------------------------------------------------------*/
ul.spip {margin-left: 0px; padding:0px; }
ul.spip li {margin-bottom : 20px; }
@media (max-width: 640px) {
ul.spip{ margin-left: 0px; }}
ul.spip, li ul.spip, li li ul.spip { list-style: none; }
ul.spip > li, p.tiret {position:relative; padding-left: 25px; color:inherit;line-height: 1.6em;}
ul.spip > li:before, p.tiret:before {
position: absolute;top: 0;left: 0;font-family: FontAwesome;content: "\f054"}
ul.spip > li > ul.spip > li:before {
position: absolute;top: 0;left: 0;font-family: FontAwesome;content: "\f101";font-size:95%;}
.page_article .texte ul.spip {padding-right :60px;padding-left:60px;}
.formulaire_spip ul.spip > li:before, .formulaire_spip ul.spip > li > ul.spip > li:before {
content: none;
}
p img.puce {display:none;padding-left: 15px;}
p.puce:before {position: absolute;top: 0;left: 0;font-family: FontAwesome;content: "\f054";}
/* 09. Blockquote
---------------------------------------------------------------------------------------*/
/* 09.01 Blockquote spip_poesie*/
blockquote.spip_poesie {
border:none; margin : 20px 0px;color:#505050;text-align:left;font-weight: normal;line-height: 1.4em;font-size:100%;}
blockquote.spip_poesie:before{
position :absolute; content:"\f10d";font-family: FontAwesome;color:var(--theme-color);font-size:40px;margin: -10px 0 0 -20px;width: 40px;}
blockquote.spip_poesie strong{}
.spip_poesie div { margin-left: 20px; text-indent: 0px;}
blockquote.spip_poesie cite{
display: block; padding : 15px 0px 18px 0px;font-size: 80%; color: var(--color-grey2);font-family:var(--font-text);font-weight:400;letter-spacing:1px;text-transform:uppercase; font-style:normal;}
blockquote.spip_poesie cite::before {content: "\2014 \00A0";}
/* 09.02 Blockquote spip, q */
blockquote, blockquote.spip, q {text-align:center;background:none;padding : 20px;width: 90%;display:block;margin : 20px auto;color :#000;font-weight:600;font-size:20px;line-height: 30px;min-height: 40px;}
blockquote.spip p{font-size:20px;color:#000;}
q:before, q:after {content:none} /* on efface les guillemets par défaut */
blockquote:before, blockquote.spip:before, q:before{
content:"\f10d";font-family: FontAwesome;color:var(--theme-color);font-size:60px;display:block;padding-bottom:30px;}
blockquote strong, q strong {font-weight:400;font-style:normal;font-size:20px;}
blockquote.descriptif {
text-align:left;background:none;padding : 20px;width: 90%;display:inline-block;margin : 50px auto;color :#000;font-weight:600;font-size:25px;line-height: 30px;min-height: 40px;}
blockquote.descriptif:before{
content:"\f7a5";font-family: FontAwesome;color:var(--theme-color);font-size:30px;margin-left: -50px;position: absolute;}
/* 09.03. Modèle twitter */
div.twitter{
padding:30px; margin : 30px auto; width: 100%;position:relative;}
blockquote.twitter-tweet {display:block;}
iframe.twitter-tweet, twitter-widget {float:none; margin: 50px auto;}
/* 10. Blocs dépliables
----------------------------------------------------------------------------------------*/
.cs_blocs{
margin:15px auto; padding:15px; overflow:hidden;border:#E5E5E5 1px solid; background: #ffffff;
border-radius: 3px;
box-shadow: 0 2px 3px rgba(0, 0, 0, 0.085);}
.blocs_titre{ background:none; margin-top:4px; padding:0px; cursor:pointer;}
.blocs_replie{background:none;}
.blocs_title{display:none;}
.cs_blocs h3.blocs_titre{
font-size:17px;
border-bottom:none;
font-weight:400;
font-family:var(--font-title);
}
h3.blocs_titre a, h3.blocs_titre a:hover{
font-weight:400;
text-decoration:none;
padding-left:30px;
font-family:var(--font-title);
letter-spacing : 1
}
h3.blocs_titre:before{font-family:FontAwesome;content:"\f077";font-weight:bold;font-size:15px;}
h3.blocs_replie:before{font-family:FontAwesome;content:"\f078";font-weight:bold;font-size:15px;}
.cs_blocs .blocs_destination{padding:15px 0px 15px 15px;margin-top:20px;}
.cs_blocs table{background:white;padding-left:100px;padding-right:25px;}
.cs_blocs h3.spip, .onglets_contenu h3.spip{color:#000000;}
.cs_blocs .blocs_resume {padding-left:50px;color:#555; font-size: 90%;}
/* 11. Pagination Spip
----------------------------------------------------------------------------------------*/
.bloc-pagination {
clear:both;
display:block;
overflow:hidden;
border: none;
background:none;
margin: 20px auto;
padding: 20px;
text-align:center;
font-size: 90%;
text-transform:uppercase;}
.bloc-pagination a, .bloc-pagination .on {
padding: 10px 15px;
font-weight: 400;
text-decoration:none;
margin:3px;
border : 2px solid transparent;
font-family:var(--font-title);
}
.bloc-pagination span.next a, .bloc-pagination span.prev a {
padding: 10px 15px;
font-weight: 700;
text-decoration:none;
text-transform:uppercase;
letter-spacing: 2pt;
font-weight:400;
font-family:var(--font-title);
}
.bloc-pagination .on, .bloc-pagination a:hover, .bloc-pagination span.next a:hover, .bloc-pagination span.prev a:hover {
background-color:var(--theme-color);
color:#fff; text-decoration:none;}
.bloc-pagination .sep { display: none; }
.bloc-pagination span.disabled .on {
font-weight: 400;
background: none;
color: #CCCCCC;
padding: 10px 15px; margin: 3px; border: none;
text-transform:uppercase;
letter-spacing: 2pt;
}
/* 12. Blocs de tri
----------------------------------------------------------------------------------------*/
.bloc-tri{clear:both;display:block;overflow:hidden;border:none;background:none;margin:20px auto;padding:20px;text-align:center;font-size:85%;font-family:var(--font-title);}
.bloc-tri a{padding:10px 15px;margin:3px;font-weight:400;color:#999999;}
.bloc-tri strong.on{font-weight:400;}
/* 13. Plugin emb_PDF
----------------------------------------------------------------------------------------*/
.spip_doc_titre, .spip_doc_descriptif, .spip_doc_credit {text-align:left; font-size: 75%; color:#666; line-height: 1.2em;font-weight:400;}
.spip_doc_titre {font-family:var(--font-title); text-transform:uppercase; }
/* 14. Exposants
----------------------------------------------------------------------------------------*/
sup.typo_exposants{font-size:50%;}
sup,.sup{position:relative;font-size:80%;font-variant:normal;line-height:0;vertical-align:baseline;}
sup,.sup{top:-0.2em;}
/* 15. Division d'une page (cf. Plugin Couteau suisse)
-------------------------------------------------------------------------------------*/
.decoupe_haut, .decoupe_bas {display:none !important;}
/* 16. Boutons spip d'admin (sauf # FORMULAIRE_ADMIN)
-------------------------------------------------------------------------------------*/
#spip-admin { z-index: 100000; left: 100px;}
/* 17. SOCIAL TAGS (PLUGIN)
Adaptation du fichier socialtags.js.html du Plugin Social Tags (remplacement image par icon)
et ajout de l'icone d'impression à la palce del 'image dans le plugin Imprimir (baliza_imprimir_documento.php)
-------------------------------------------------------------------------*/
div.socialtags {float:none;display:inline;}
.socialtags ul li, .print a {
margin-right:0px;
cursor : pointer}
/* 18. Notes de bas de page (cf. plugin littlefootnote)
----------------------------------------------------------------------------------------*/
span.spip_note_ref a, span.spip_note_ref{color:#888;font-size:90%; font-family:var(--font-title);}
.spip_note_ref, .spip_note_ref a {font-family:var(--font-title);}
a.spip_note { font-weight: 400;font-family:var(--font-title); }
.notes > div > p, .notes {color: #666;font-size: 90%;}
/* Plugin Bigfoot - Customisation des notes de bas de page du fichier littlefoot.css--------------------------------- */
.littlefoot-footnote__button {font-size: 1.4rem;font-family:var(--font-text);font-weight:normal;}
.littlefoot-footnote__wrapper{background:#FFF; padding: 5px;}
.littlefoot-footnote__wrapper::before {}
.littlefoot-footnote__content {background:#FFF; padding: 5px; margin:0px;}
.littlefoot-footnote__content p { overflow:hidden; color: #555;}
.texte p .littlefoot-footnote__content p, .texte blockquote.spip_poesie .littlefoot-footnote__content p
{font-size:14px; line-height: 1.4; text-transform:none; font-family: var(--font-text); }
.page_article .chapo p .littlefoot-footnote__content p {font-weight:normal;}
@media print {.littlefoot-footnote, .littlefoot-footnote__button {display: none !important;}}
/* 19. Spip_colonne (Customisation Plugin Raccorci colonne https://contrib.spip.net/Raccourci-colonne ---------------------------------
----------------------------------------------------------------------------------------*/
/* Cela marche mais il faut modifier le fichier .js original et adapter les noms des colonnes à bootstrap.
Dans le head :
[(#REM) Chargement de la feuille de compilation scss, grille de 12 ]
[]
[(#REM) Chargement du javascript ajoutant les class aux colonnes ]
[]
Mais les colonnes ne sont pas assez large sur col-lg-9 */
div.spip_colonne {}
/* 20. Glossaire du Couteau suisse ---------------------------------
----------------------------------------------------------------------------------------*/
a.cs_glossaire, a.cs_glossaire:hover, #glossOverDiv{color:inherit;}
a.cs_glossaire:hover span.gl_dl, #glossOverDiv span.gl_dl{
background-color:inherit;font-size:inherit;color:inherit;display:none;}
a.cs_glossaire:hover span.gl_dd, #glossOverDiv span.gl_dd{text-align:left; font-weight:400;}
a.cs_glossaire span.gl_mot{border-bottom:0px dotted;color:var(--theme-color);}
a.cs_glossaire:hover span.gl_dt {display:none;}
h3.spip a.cs_glossaire span.gl_mot {
border-bottom:none;
color:inherit;
font-family:var(--font-title);
text-transform : uppercase;
font-weight: 400;
letter-spacing : 2}
span.gl_dd {font-size: 15px; color:#555; text-transform:none;}
/* 21. Enluminures typographiques V3---------------------------------
----------------------------------------------------------------------------------------*/
/* 21.01 Encadré */
.texteencadre-spip {
background : #EEE;
border:1px solid #CCCCCC;
font-family: var(--font-text);
color : #555555;
padding: 1em;
margin-left: auto;margin-right: auto;
}
/* Liens externes */
.texte p a.spip_out:before,
a.external:before {
font-family: FontAwesome;
content: "\f08e";
padding-right: .50rem !important;
opacity: 0.7;
font-size: 90%}