You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

597 lines
10 KiB

// MENU DE CHOIX DES LANGUES
// sur deux colonnes
.menu-lang.open,
.menu-lang__items {
width: 20em;
}
.menu-lang__items {
-moz-column-count: 2;
-webkit-column-count: 2;
column-count: 2;
}
.menu-lang__item {
padding: 0.2em 1em;
}
// Couleur du logo
.header__nav svg * {
fill: $couleur-nav;
}
// Colonne droite
.article__statut {
p {
@include small();
display:flex;
flex-wrap:wrap;
flex-direction: row;
justify-content:stretch;
& > span {
width:auto;
flex:1 0 auto;
text-align:center;
padding:0 1em;
}
}
.tags { text-align:center; }
}
.body--article, .body--rubrique {
.article__statut {
@include media($bp-medium-up) {
padding: .5em 7%;
}
@include media($bp-large-up) {
padding: .5em 14%;
}
}
}
.listeCategories {
list-style-type: none;
margin-left:0;
margin-bottom:0;
.listeCategories__item {
padding-left:1.5em;
&:before {
font-family:FontAwesome;
content: "\f111";
margin-left: -1.5em;
margin-right: .3em;
transition:margin 0.3s;
}
@for $i from 1 to length($couleur-chapitre-vif) + 1 {
&.c#{$i}:before {
color: nth($couleur-chapitre-vif, $i);
}
}
p { margin-bottom: 0; }
}
}
.contentMain__main {
margin-bottom:4px; /* Séparation avec contentExtra */
.listeCategories {
display:flex;
flex-direction: row;
flex-wrap:wrap;
justify-content: space-between;
.listeCategories__item {
width:47%;
margin-bottom:1em;
}
}
}
.listeSujets {
list-style-type:none;
margin-left:0;
margin-top:2em;
margin-bottom:4em;
& > .item:not(:last-child) {
/*border-bottom:1px solid $couleur-bordure;*/
padding-bottom:1.5em;
margin-bottom:1.5em;
}
.dernier_message {
.publication {
margin-top:1em;
}
.link {
margin-top:1.2em;
}
}
}
.alignement_avec_liste {
padding-left:4.3em; /* ~ largeur de .ligneSujet__enbref */
@include media($bp-small) {
padding-left:0;
}
}
.ligneSujet {
display:flex;
@for $i from 1 to length($couleur-chapitre-vif) + 1 {
&.c#{$i} .ligneSujet__enbref .categorie .fa {
color: nth($couleur-chapitre-vif, $i);
}
}
.ligneSujet__enbref {
font-size: .9em;
text-align:right;
width:5em;
flex: 0 0 5em; /* 999 votes */
padding-right:1em;
margin-right:1em;
border-right:4px solid $couleur-gris5;
.categorie {
margin-top:.4em;
}
.nb_votes {
display: block;
.fa {
color: $couleur-votes;
}
&.votes_plus .fa {
color: $couleur-votes-plus;
}
&.votes_moins .fa {
color: $couleur-votes-moins;
}
}
.nb_comments {
display: block;
.fa {
color: $couleur-gris4;
}
&.comments_0 .fa {
color: $couleur-nocomment;
}
}
.resolu {
display: block;
.fa {
color: $couleur-resolu;
}
}
}
.ligneSujet__description {
flex-grow: 1;
.titre {
margin-bottom: 0;
}
}
&:not(.complet) {
.ligneSujet__description {
p { margin-bottom:0; }
}
}
&.complet .titre {
margin:1em 0;
}
.publication {
background: transparentize($couleur-gris5, 40%);
padding:.2em .3em;
margin: 0 0 .3em;
display:flex;
flex-direction: row;
font-size: .9em;
.publication__logo {
width: 20px;
flex: 0 0 20px;
img { vertical-align: top; margin-top:1px; }
}
.publication__auteur {
margin-left:.5em;
flex-grow: 1;
}
.publication_date {
width:16em;
flex: 0 0 16em;
text-align:right;
}
}
.texte p:last-child {
margin-bottom:0;
}
}
.contentExtra__main {
background: white;
padding: 1em;
@include media($bp-medium-up) {
padding: em(48px) 5% em(48px) 0;
.extra__forum { padding-left:5%; }
}
@include media($bp-large-up) {
padding: em(48px) 12.5% em(48px) 5%;
.extra__forum { padding-left:9%; }
}
margin-bottom: em(16px);
}
.body--rubrique {
.contentMain__main {
padding-bottom:2em;
}
}
.body--thread {
.contentMain__main {
@include media($bp-medium-up) {
padding-left:0;
}
@include media($bp-large-up) {
padding-left:5%;
}
}
.article__statut {
@include media($bp-medium-up) {
padding-left:0;
}
@include media($bp-large-up) {
padding-left: 10.5%;
}
}
.ligneSujet__enbref {
.nb_comments { margin-bottom:1em; }
.resolu { font-size:2em; }
}
.contentMain__main .ligneSujet__enbref,
.meme_auteur .ligneSujet__enbref {
border-right:4px solid $couleur-meme-auteur;
}
}
.contentNav {
.contentNav__user {
background: white;
padding: em(32px);
margin-bottom: 4px;
.username { display:block; }
.bio { font-size: .9em; }
.user--links {
list-style-type: none;
margin:.5em 0 0 0;
& > li {
&:not(:last-child) { margin-bottom:.5em; }
.fa {
padding-right: .3em;
}
}
}
}
.contentNav__main {
margin-bottom:5px;
.contentNav__racine {
margin-left: em(32px);
.contentNav__article {
padding:0;
&:not(:last-child) { margin-bottom:.5em; }
a {
display:inline-block;
padding: 0;
margin: 0;
color: $couleur-lien;
.titre {
margin-bottom:0; /*display:block;*/
}
&:hover, &:focus {
text-decoration: none;
.titre { text-decoration: underline; }
}
}
&:hover, &:focus {
::before {
margin-left: -2.3em;
margin-right: 1.1em;
}
}
&.active {
&::before {
margin-left: -2.3em;
margin-right: 1.1em;
}
& > a {
background: none;
&:hover,
&:focus {
color: $couleur-nav;
}
}
}
}
}
}
.bouton.block-link-parent .fa {
width: em(14px);
float: right;
right: 1em;
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.bouton_faq .fa { color: $couleur-faq; }
}
.onglets {
display:flex;
flex-wrap:wrap;
font-size:.9em;
a {
text-align:center;
padding:.3em .7em;
background-color: $couleur-gris5;
margin-right:4px;
margin-bottom:.5em;
&.on {
background-color: $couleur-lien-hover;
color:white;
}
&:hover, &:focus {
background-color: $couleur-lien;
color:white;
text-decoration:none;
}
.label, .badge {
background-color: $couleur-lien;
transition: background-color 0.3s, color 0.3s;
}
&.on, &:hover, &:focus {
.fa {
color: white !important;
transition: color 0.3s;
}
.label, .badge {
background:white;
color: $couleur-lien !important;
.fa { color: $couleur-lien !important; }
}
}
.fa.votes { color: $couleur-votes-plus; margin-right:.2em; }
.fa.sans_reponse { color: $couleur-nocomment; margin-right:.2em; }
.fa.faq { color: $couleur-faq; margin-right:.2em; }
}
a.on .badge,
a.on .label {
background:white
}
a.espaceur { margin-left:2em; }
}
.label, .badge {
display: inline-block;
background-color: $couleur-gris4;
color: #fff;
font-size: 0.75em;
line-height: 1.75;
padding: 0px 7px;
text-align: center;
vertical-align: baseline;
white-space: nowrap;
}
.badge {
border-radius: 10px;
font-weight: bold;
}
.label {
border-radius: 4px;
@for $i from 1 to length($couleur-chapitre-vif) + 1 {
&.c#{$i} {
background-color: transparentize(nth($couleur-chapitre-vif, $i), 70%);
color: $couleur-texte;
}
}
}
a.badge, a.label {
&:hover {
background-color: $couleur-lien;
color:white;
text-decoration:none;
}
}
.contentNav__aside {
.bloc--statistiques {
padding: em(24px) em(32px) em(24px) em(24px);
line-height: 1.5em;
& > ul {
margin-bottom:0;
& > li {
margin:.3em 0;
}
}
}
}
/* présentation d’un auteur */
.shortdesc {
display:flex;
flex-direction: row;
.shortdesc--logo {
width:120px;
}
}
/* Colorer pour rendre visible tous les formulaires */
.formulaire_spip:not(.formulaire_recherche) {
background: $couleur-gris5;
padding:1em;
}
/* Comprimer le formulaire de login */
.formulaire_login {
position:relative;
#pass_securise { float:right; }
.editer_password .details { margin-bottom:0; }
.editer_session { margin-bottom:0; }
fieldset { margin:0; }
.boutons { margin-top:0; padding:0; position:absolute; bottom:1em; right:1em; }
}
/* pas d’intro dans la modale de login */
#cboxContent {
.contentLogin {
.cartouche { display:none; }
}
}
.formulaire_forum {
margin-top:1em;
.explication {
font-size:.8em;
}
.titre_groupe {
font-weight: normal;
display:inline-block;
}
.choix_mots {
margin-left:1em;
margin-bottom:1em;
columns:3;
@include media($bp-medium) {
columns:2;
}
@include media($bp-small) {
columns:1;
}
}
.editer_notification {
border: 1px solid #ddd;
border-radius: 5px;
background: rgba(255,255,255,.3);
padding-left: 1em;
margin-bottom: 0;
.choix label {
font-size: .9em;
}
}
fieldset.commentaire { margin-bottom: 0; }
}
.formulaire_jaime_jaimepas {
margin:0; padding:0;
background:none;
fieldset, .editer-groupe, .editer {
margin:0; padding:0;
background:none;
}
.editer {
line-height:1em;
.fa {
font-size:2em;
color:$couleur-gris5;
}
& button:hover, & button:focus {
.fa {
transition: color 0.3s;
color:$couleur-lien;
}
}
.nb_votes {
font-size:1.5em;
position: relative;
right: -.6em;
text-align: center;
margin-top: .3em;
color: $couleur-votes;
}
}
}
.formulaire_recherche_ajax {
margin: 0 0 .5em;
form {
position: relative;
width: 100%;
}
svg {
display:block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: em(12px);
width: em(12px);
height: em(12px);
* {
stroke: $couleur-nav;
}
}
div.search {
width: 100%;
}
a.close {
position:absolute;
top: 50%;
transform: translateY(-50%);
right:0;
padding: em(6px) em(12px);
color:$couleur-gris4b;
&:hover {
color: $couleur-lien;
}
}
div.submit {
display: none;
}
input[type="search"] {
border: 1px solid $couleur-gris4b;;
height: em(36px);
width: 100%;
padding-left: em(34px);
padding-right: 15%;
&:focus {
border: 1px solid $couleur-nav;
}
}
}
.depliable {
position: relative;
margin-left:1em;
cursor: pointer;
&:before {
content: '';
position: absolute;
top: 0.5em;
transform: rotate(180deg);
left: -0.8em;
width: 0;
height: 0;
/* flèche à droite */
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 6px solid $couleur-nav-fleche;
transform: rotate(90deg);
transition-property: position, transform, border-color;
transition-duration: 0.2s;
}
&:not(.ouverte) {
&:hover:before,
&:focus:before {
border-bottom-color: $couleur-nav-fleche-hover;
}
}
&.ouverte {
&:before {
// triangle vers le bas
transform: rotate(180deg);
border-bottom-color: $couleur-nav-fleche-hover;
}
}
}