source: spip-zone/_plugins_/prive_fluide/branches/prive_fluide_plus/prive/style_prive_plugin_prive_fluide_plus.html @ 110829

[(#REM)<style>/*

        Surcharges de l'Espace prive fluide de Tcharlss
        
        - Tous les champs de formulaires forcés sur deux colonnes, avec des labels plus larges 
        - En dessous de 980px, les formualires sur une seule colonne 

*/]#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}


/*-------------------------------------- 
  Partons sur de bonnes bases
----------------------------------------*/

*, *:before, *:after {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
}

/* 
        en corrigeant certaines incohérences 
*/

.icone a img {
        box-sizing: content-box;
}

/*-------------------------------------- 
  Formulaires
----------------------------------------*/

.formulaire_spip > h3.titrem {
        margin-bottom: 0;
}

.formulaire_spip input.text,
.formulaire_spip input.password,
.formulaire_spip input.file,
.formulaire_spip textarea,
.formulaire_spip select,
.formulaire_spip .choix {
        background: white;
        padding: 0.5em;
        border: 1px solid #ddd;
        border-radius: 4px;
        width: 100%;
        max-width: 45em;
}
.formulaire_spip input.file {
        border: none;
}
.formulaire_spip .editer .explication {
        /* .explication est en font-size à 90% */
        max-width: calc(45em / 0.9);
}
.formulaire_spip .choix {
        border-bottom: none;
        display: flex;
        align-items: flex-start;
}
.formulaire_spip .choix > input {
        margin-top: 0.4em;
}
.formulaire_spip .choix > label {
        width: auto;
}

/* 
        Labels plus larges
*/

.formulaire_spip .editer_parent,
.formulaire_spip .editer_groupe_mot,
.formulaire_spip .editer_descriptif,
.formulaire_spip .editer_chapo,
.formulaire_spip .editer_texte,
.formulaire_spip .editer_ps,
.formulaire_spip .editer,
.formulaire_spip .editer.gauche {
        padding-#ENV{left}: 175px;
}

.formulaire_spip .editer_parent label,
.formulaire_spip .editer_groupe_mot label,
.formulaire_spip .editer_descriptif label,
.formulaire_spip .editer_chapo label,
.formulaire_spip .editer_texte label,
.formulaire_spip .editer_ps label,
.formulaire_spip .haut label,
.formulaire_spip .pleine_largeur>label,
.formulaire_spip .editer > label {
        display: inline-block;
        float: #ENV{left};
        width: 155px;
        margin-#ENV{left}: -160px;
        margin-top: 0.25em;
}

/* 
        Ne pas centrer les textarea ni le #wysiwyg ...
*/

#wysiwyg, 
.formulaire_spip textarea,
.formulaire_spip .edition {
        display: inline-block;
        max-width: 45em !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
}

/* 
        mais laisser une marge en preview.
        
        #wysiwyg .champ, .preview sont en font-size en 1.2em, 
        donc on recalcule la largeur pour avoir à peut près le même nombre de caractères par ligne qu'en mode édition
        
        Et pas de justification, c'est mal.
*/

.fiche_objet #wysiwyg {
        margin-left: 15px !important;
        max-width: calc(45em * 1.2) !important;
}
#wysiwyg .champ,.preview {
        text-align: #ENV{left};
}
#wysiwyg .contenu_descriptif, 
#wysiwyg .contenu_nom_site,
#wysiwyg .contenu_bio, 
#wysiwyg .contenu_ps {
        margin-left: -10px;
        margin-right: -10px;
}

/* 
        Labels longs
*/

.formulaire_spip .long_label {padding-#ENV{left}:280px;}
.formulaire_spip .long_label > label {width: 260px;margin-#ENV{left}:-270px;}


/* 
        Fieldsets et legends
*/

.formulaire_spip h3.legend,
.formulaire_spip legend {
        font-weight: normal;
        font-size:   1.1em;
        padding: 0.5em 10px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: .34625em;
}
.formulaire_spip legend {
        width: calc(100% - 1em);
        display: block;
        overflow: hidden;
}
.formulaire_spip fieldset {
        border: none;
        border-top: none; /* à garder */
}

.formulaire_editer_article .editer.editer_liens_sites fieldset {
        padding-left: 0;
        padding-right: 0;
}

/*
        Colonne de gauche (#navigation)
*/

.lat .formulaire_spip .editer label {
        margin-bottom: 0.5em;
}
.lat .formulaire_spip .editer {
        padding: .34625em 10px;
}

/*-------------------------------------- 
  En dessous de 980px, les formulaires 
  passent sur une seule colonne 
----------------------------------------*/

@media (max-width: 980px) {
        
        .formulaire_spip .editer-groupe,
        .formulaire_spip fieldset,
        .formulaire_spip fieldset .editer-groupe,
        .formulaire_spip .editer .boutons,
        .formulaire_spip .legend {
                margin-left: 0;
                margin-right: 0;
        }

        .formulaire_spip .editer,
        .formulaire_spip .editer.gauche,
        .formulaire_spip .editer.droite {
                padding: 0.5em 0;
        }

        .formulaire_editer_article .editer.editer_liens_sites,
        .formulaire_spip .editer_parent {
                padding-left: 10px;
                padding-right: 10px;
                margin-left: -10px;
                margin-right: -10px;
        }
        .formulaire_editer_article .editer.editer_liens_sites h3.legend {
                margin-left: -10px;
                margin-right: -10px;
        }

        .formulaire_spip .editer label,
        .formulaire_spip .editer.gauche label,
        .formulaire_spip .editer.droite label {
                display: block;
                width: auto;
                float: none;
                margin: 0 0 0.25em 0;
        }

        .formulaire_spip .choix {
                border-top: none;
                border-bottom: none;
        }

        .formulaire_spip .choix label {
                display: inline-block;
                margin-bottom: 0;
                vertical-align: middle;
                margin-#ENV{left}: 0.25em;
        }

        .formulaire_spip h3:not(.titrem) {
                margin-top: 1em;
                margin-bottom: 1em;
        }

}