From 77a3ce6fccd33f9f2d34ad0d306df4066b5eb3f5 Mon Sep 17 00:00:00 2001
From: tcharlss <tcharlss@bravecassine.com>
Date: Wed, 30 Sep 2020 12:37:50 +0200
Subject: [PATCH] =?UTF-8?q?Ticket=20#4468=20:=20refacto=20des=20boutons=20?=
=?UTF-8?q?de=20l'espace=20priv=C3=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Unifier styles des icônes (classe .icone), boutons d'actions et boutons de validation des formulaires. Même police, graisse et couleurs pour tous. Portage des classes .add, .del, .edit et.config qui ajoutent des icônes aux boutons d'actions, ainsi que de .link, .right et .left. Ajout également de nouvelles classes modificatrices à toute fin utile : .secondary, .block, et .boutons_groupe. Testé en ltr et rtl.
* Un peu de rangement : on déplace tout ce qui concerne les boutons dans boutons.css (c'était auparavant réparti entre theme.css et forms.css).
* De même pour icons.css : on y déplace toutes les règles en rapport qui étaient dans theme.css
* On introduit une nouvelle classe générique .bouton pour afficher n'importe quel élément comme un bouton, à priori surtout pour des liens (pierrox et nicod_).
* On mutualise le plus possible les règles entre les liens boutons, les boutons de formulaire et les boutons d'action.
* Refacto complète du composant .icone : on passe aussi en flexbox comme les boutons, on répare ce qui était cassé (la variante .right notamment).
* La combinaison bouton d'action + classe .icone est dépréciée, on continue de la supporter mais elle est maintenant inutile.
* Ajout de quelques animations au survol et au focus. On essaie de pas faire trop bling, à voir à l'usage.
* Recadrage des icônes génériques add.svg et cie afin de pouvoir les réutiliser plus facilement. Ajout de quelques variantes svg manquantes.
* On passe l'image de fond en svg aussi tant qu'Ã faire.
---
prive/images/rayures-danger.svg | 1 +
prive/images/rayures-gris.svg | 1 +
prive/images/rayures-sup.svg | 1 +
prive/squelettes/inclure/barre-nav.html | 4 +-
prive/themes/spip/bando.css.html | 10 +-
prive/themes/spip/boutons.css.html | 571 +++++++++++++++
prive/themes/spip/forms.css.html | 34 +-
prive/themes/spip/icons.css.html | 670 +++++++++++++++---
prive/themes/spip/images/add-inverse-xx.svg | 1 +
prive/themes/spip/images/add-xx.svg | 19 +-
.../themes/spip/images/config-inverse-xx.svg | 1 +
prive/themes/spip/images/config-xx.svg | 70 +-
prive/themes/spip/images/del-inverse-xx.svg | 1 +
prive/themes/spip/images/del-xx.svg | 16 +-
prive/themes/spip/images/edit-inverse-xx.svg | 1 +
prive/themes/spip/images/edit-xx.svg | 18 +-
.../themes/spip/images/export-inverse-xx.svg | 1 +
prive/themes/spip/images/export-xx.svg | 1 +
.../themes/spip/images/fermer-inverse-xx.svg | 1 +
.../themes/spip/images/import-inverse-xx.svg | 1 +
prive/themes/spip/images/import-xx.svg | 1 +
prive/themes/spip/images/new-inverse-xx.svg | 1 +
prive/themes/spip/images/new-xx.svg | 19 +-
prive/themes/spip/images/ok-inverse-xx.svg | 1 +
.../themes/spip/images/ouvrir-inverse-xx.svg | 1 +
prive/themes/spip/images/ouvrir-xx.svg | 1 +
prive/themes/spip/style_prive.css.html | 20 +-
prive/themes/spip/theme.css.html | 33 +-
28 files changed, 1244 insertions(+), 256 deletions(-)
create mode 100644 prive/images/rayures-danger.svg
create mode 100644 prive/images/rayures-gris.svg
create mode 100644 prive/images/rayures-sup.svg
create mode 100644 prive/themes/spip/boutons.css.html
create mode 100644 prive/themes/spip/images/add-inverse-xx.svg
create mode 100644 prive/themes/spip/images/config-inverse-xx.svg
create mode 100644 prive/themes/spip/images/del-inverse-xx.svg
create mode 100644 prive/themes/spip/images/edit-inverse-xx.svg
create mode 100644 prive/themes/spip/images/export-inverse-xx.svg
create mode 100644 prive/themes/spip/images/export-xx.svg
create mode 100644 prive/themes/spip/images/fermer-inverse-xx.svg
create mode 100644 prive/themes/spip/images/import-inverse-xx.svg
create mode 100644 prive/themes/spip/images/import-xx.svg
create mode 100644 prive/themes/spip/images/new-inverse-xx.svg
create mode 100644 prive/themes/spip/images/ok-inverse-xx.svg
create mode 100644 prive/themes/spip/images/ouvrir-inverse-xx.svg
create mode 100644 prive/themes/spip/images/ouvrir-xx.svg
diff --git a/prive/images/rayures-danger.svg b/prive/images/rayures-danger.svg
new file mode 100644
index 0000000000..82d0bbca32
--- /dev/null
+++ b/prive/images/rayures-danger.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><g fill-opacity=".66"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z"/></g></svg>
\ No newline at end of file
diff --git a/prive/images/rayures-gris.svg b/prive/images/rayures-gris.svg
new file mode 100644
index 0000000000..59e68ec479
--- /dev/null
+++ b/prive/images/rayures-gris.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0zM0 0h2.117L0 2.117z" fill-opacity=".08"/></svg>
\ No newline at end of file
diff --git a/prive/images/rayures-sup.svg b/prive/images/rayures-sup.svg
new file mode 100644
index 0000000000..c998409029
--- /dev/null
+++ b/prive/images/rayures-sup.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333331 4.2333331"><path d="M4.233 0v2.117L2.117 4.233H0z" fill-opacity=".145"/><path d="M4.233 0H2.117L0 2.117v2.116z" fill="#eb6114" fill-opacity=".149"/><path d="M0 0h2.117L0 2.117z" fill-opacity=".145"/><path d="M4.233 4.233H2.117l2.116-2.116z" fill="#eb6114" fill-opacity=".149"/></svg>
\ No newline at end of file
diff --git a/prive/squelettes/inclure/barre-nav.html b/prive/squelettes/inclure/barre-nav.html
index 532750c409..20b26bb4f7 100644
--- a/prive/squelettes/inclure/barre-nav.html
+++ b/prive/squelettes/inclure/barre-nav.html
@@ -78,7 +78,7 @@
<ul class="rapides creer">
<BOUCLE_creer(DATA)
{source tableau, #GET{boutons}}
- {cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="bouton"><a
+ {cle=outils_rapides}><BOUCLE_creersous(DATA){source tableau, #SOUSMENU}{par position}>[<li class="rapides__item"><a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]
@@ -90,7 +90,7 @@
<ul class="rapides collaborer">
<BOUCLE_collaborer(DATA)
{source tableau, #GET{boutons}}
- {cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="bouton"><a
+ {cle=outils_collaboratifs}><BOUCLE_collaborersous(DATA){source tableau, #SOUSMENU}>[<li class="rapides__item"><a
href="[(#VALEUR{url}|sinon{#CLE}|bandeau_creer_url{#VALEUR{urlArg},#GET{contexte}})]"
title="[(#VALEUR{libelle}|_T|attribut_html)]"
class="bando2_#CLE"><span>(#VALEUR{libelle}|_T)</span></a></li>]</BOUCLE_collaborersous></BOUCLE_collaborer>
diff --git a/prive/themes/spip/bando.css.html b/prive/themes/spip/bando.css.html
index ae0086af5a..e839860f1d 100644
--- a/prive/themes/spip/bando.css.html
+++ b/prive/themes/spip/bando.css.html
@@ -96,11 +96,11 @@
#bando_outils ul.creer {float:#ENV{left};}
#bando_outils ul.collaborer {float:#ENV{left};margin-#ENV{right}:20px;}
-#bando_outils ul.rapides li.bouton{ float:#ENV{left}; }
-#bando_outils ul.rapides li.bouton a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
-#bando_outils ul.rapides li.bouton a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
-#bando_outils ul.rapides li.bouton a:hover, #bando_outils ul.rapides li.bouton a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
-#bando_outils ul.rapides li.bouton{ margin-top:0px;}
+#bando_outils ul.rapides li.rapides__item{ float:#ENV{left}; }
+#bando_outils ul.rapides li.rapides__item a{ display:block; padding:2px;background-position:center;background-repeat:no-repeat;background-size: 16px;}
+#bando_outils ul.rapides li.rapides__item a span { visibility:hidden;display:block;height:24px;width:24px;overflow:hidden; }
+#bando_outils ul.rapides li.rapides__item a:hover, #bando_outils ul.rapides li.rapides__item a:focus{background-color:#[(#ENV{claire}|couleur_eclaircir)];}
+#bando_outils ul.rapides li.rapides__item{ margin-top:0px;}
#bando_outils #rapides {float:#ENV{right};}
#bando_outils #rapides .formulaire_recherche {margin:3px 0;clear:none;}
diff --git a/prive/themes/spip/boutons.css.html b/prive/themes/spip/boutons.css.html
new file mode 100644
index 0000000000..95cb93125c
--- /dev/null
+++ b/prive/themes/spip/boutons.css.html
@@ -0,0 +1,571 @@
+[(#REM)
+
+ Ce squelette définit les styles des boutons de l'espace privé.
+
+ - Liens boutons : <a class="bouton">
+ - Boutons d'action : \#BOUTON_ACTION
+ - Boutons de formulaires : <input class="submit"> et <button>
+
+ Organisation du fichier :
+
+ 1. Base commune à tous les boutons
+ 2. Variantes génériques
+ 3. Variantes icônes
+ 4. Liens boutons
+ 5. Boutons de formulaires
+ 6. Boutons d'action
+ 7. Groupes de boutons
+
+<style>]
+#CACHE{3600*100,cache-client}
+#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
+#HTTP_HEADER{Vary: Accept-Encoding}
+
+#SET{couleurs, #ARRAY{
+ claire, ##ENV{claire}|couleur_luminance{0.05}|couleur_saturation{0.33, strict},
+ foncee, #ENV{foncee}|couleur_luminance{0.55},
+ foncee_max, #ENV{foncee}|couleur_luminance{0.75},
+}}
+
+[(#REM) Tailles et valeurs associées ]
+#SET{paddings, #ARRAY{
+ 16, #LISTE{0.5em, 1.25em},
+ 24, #LISTE{0.5em, 1.25em},
+ 32, #LISTE{0.5em, 1.25em},
+}}
+#SET{font-sizes, #ARRAY{
+ 16, 0.85em,
+ 24, 1em,
+ 32, 1.15em,
+}}
+#SET{heights, #ARRAY{
+ 16, calc\(\(#GET{paddings/16/0} * 2\) + 16px + 2px\),
+ 24, calc\(\(#GET{paddings/24/0} * 2\) + 24px + 2px\),
+ 32, calc\(\(#GET{paddings/32/0} * 2\) + 32px + 2px\),
+}}
+#SET{tailles, #ARRAY{
+ 16, #ARRAY{font-size, #GET{font-sizes/16}, height, #GET{heights/16}, padding, #GET{paddings/16}},
+ 24, #ARRAY{font-size, #GET{font-sizes/24}, height, #GET{heights/24}, padding, #GET{paddings/24}},
+ 32, #ARRAY{font-size, #GET{font-sizes/32}, height, #GET{heights/32}, padding, #GET{paddings/32}},
+}}
+
+/**
+ * ==================================
+ * 1. Base commune à tous les boutons
+ * ==================================
+ * Fond gris clair, police, alignement.
+ */
+
+.bouton,
+.bouton_action_post,
+.formulaire_spip input.submit,
+.formulaire_spip button {
+ border-radius: 0.33em;
+ text-decoration: none;
+ margin-bottom: 0.25em;
+ vertical-align: middle;
+}
+.bouton,
+.bouton_action_post .submit,
+.formulaire_spip input.submit,
+.formulaire_spip button {
+ position: relative;
+ -webkit-box-sizing: border-box;
+ box-sizing: border-box; /* Ignorer le padding pour les dimensions */
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ vertical-align: middle; /* Répété juste pour .bouton_action_post */
+ text-align: center;
+ min-height: [(#GET{tailles/16/height})];
+ padding: [(#GET{tailles/16/padding}|implode{' '})];
+ border: 1px solid transparent; /* Garder les mêmes dimensions que ceux avec bordure */
+ background-color: #GET{couleurs/claire};
+ /* background-color: hsla(0, 0%, 0%, 0.08); */
+ color: #666;
+ font-family: inherit;
+ font-weight: bold;
+ font-size: [(#GET{tailles/16/font-size})];
+ line-height: 1;
+ transition: all 0.2s, transform 0.05s;
+}
+/* Fix form dans colonne */
+.lat .formulaire_spip input.submit {
+ padding: [(#GET{tailles/16/padding}|implode{' '})]; /* Obligé de dupliquer la règle */
+}
+
+/* Survol, focus & active : fond très foncé */
+.bouton:hover,
+.bouton:focus,
+.bouton_action_post .submit:hover,
+.bouton_action_post .submit:focus,
+.formulaire_spip input.submit:hover,
+.formulaire_spip input.submit:focus,
+.formulaire_spip button:hover,
+.formulaire_spip button:focus {
+ background: [#(#GET{couleurs/foncee})]; /* background tout court pour surcharger image éventuelle */
+ color: white;
+ -webkit-box-shadow: 0 0 0.75em [ #(#ENV{claire}|couleur_luminance{0.15}|couleur_saturation{1, strict})];
+ box-shadow: 0 0 0.75em [ #(#ENV{claire}|couleur_luminance{0.15}|couleur_saturation{1, strict})];
+ text-decoration: none;
+}
+.bouton:active,
+.bouton_action_post .submit:active,
+.formulaire_spip input.submit:active,
+.formulaire_spip button:active {
+ background: #[(#GET{couleurs/foncee_max})]; /* background tout court pour surcharger image éventuelle */
+ color: white;
+ -webkit-transform: translateY(0.1em);
+ -ms-transform: translateY(0.1em);
+ transform: translateY(0.1em);
+}
+
+/* Image-icône éventuelle */
+.bouton .icone-image,
+.bouton_action_post .submit .icone-image,
+.formulaire_spip button .icone-image {
+ margin-#ENV{right}: 0.5em;
+}
+
+
+/**
+ * ================================
+ * 2. Variantes génériques communes
+ * ================================
+ * Nb : on fait en sorte de garder les couleurs de base pour le survol et cie.
+ */
+
+/* Variante principal : boutons mis en avant, fond de couleur du thème */
+.bouton.principal:not(:hover):not(:focus):not(:active),
+.bouton_action_post.principal .submit:not(:hover):not(:focus):not(:active),
+.formulaire_spip input.submit.principal:not(:hover):not(:focus):not(:active),
+.formulaire_spip button.principal:not(:hover):not(:focus):not(:active) {
+ background-color: #ENV{foncee};
+ color: white;
+}
+
+/* Variante secondaire : boutons mis en retrait, juste une bordure */
+.bouton.secondaire:not(:hover):not(:focus):not(:active),
+.bouton_action_post.secondaire .submit:not(:hover):not(:focus):not(:active),
+.formulaire_spip input.submit.secondaire:not(:hover):not(:focus):not(:active),
+.formulaire_spip button.secondaire:not(:hover):not(:focus):not(:active) {
+ background: transparent;
+ border-color: #ENV{claire};
+}
+.bouton.secondaire:hover,
+.bouton.secondaire:focus,
+.bouton_action_post.secondaire .submit:hover,
+.bouton_action_post.secondaire .submit:focus,
+.formulaire_spip input.submit.secondaire:hover,
+.formulaire_spip input.submit.secondaire:focus,
+.formulaire_spip button.secondaire:hover,
+.formulaire_spip button.secondaire:focus {
+ border-color: #GET{couleurs/foncee_max}; /* Idem fond */
+}
+.bouton.secondaire:active,
+.bouton_action_post.secondaire .submit:active,
+.formulaire_spip input.submit.secondaire:active,
+.formulaire_spip button.secondaire:active {
+ border-color: #GET{couleurs/foncee_max}; /* Idem fond */
+}
+
+/* Variante link : boutons affichés comme un lien */
+.bouton.link,
+.bouton_action_post.link .submit,
+.formulaire_spip input.submit.link,
+.formulaire_spip button.link {
+ background-color: transparent;
+ padding-left: 0; /* garder une marge verticale */
+ padding-right: 0; /* garder une marge verticale */
+}
+.bouton.link:hover,
+.bouton.link:focus,
+.bouton.link:active,
+.bouton_action_post.link .submit:hover,
+.bouton_action_post.link .submit:focus,
+.bouton_action_post.link .submit:active,
+.formulaire_spip input.submit.link:hover,
+.formulaire_spip input.submit.link:focus,
+.formulaire_spip input.submit.link:active,
+.formulaire_spip button.link:hover,
+.formulaire_spip button.link:focus,
+.formulaire_spip button.link:active {
+ background-color: transparent;
+ color: #ENV{foncee};
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+
+/* Variante bloc : pleine largeur */
+.bouton.bloc,
+.formulaire_spip input.submit.bloc,
+.formulaire_spip button.bloc {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ width: 100%;
+}
+.bouton_action_post.bloc,
+.bouton_action_post.bloc div {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.bouton_action_post.bloc div,
+.bouton_action_post.bloc .submit {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+/* Variantes alignements : boutons flottants à gauche ou à droite */
+.bouton.right,
+.bouton_action_post.right,
+.formulaire_spip input.submit.right,
+.formulaire_spip button.right {
+ float: #ENV{right};
+}
+.bouton.left,
+.bouton_action_post.left,
+.formulaire_spip input.submit.left,
+.formulaire_spip button.left {
+ float: #ENV{left};
+}
+
+/* Variante désactivé : boutons non cliquables */
+.bouton.desactive,
+.bouton_action_post.desactive,
+.formulaire_spip input.submit.desactive,
+.formulaire_spip button.desactive {
+ opacity: 0.8;
+ -webkit-filter: grayscale(100%);
+ filter: grayscale(100%);
+ pointer-events: none;
+}
+
+/* Variante danger (voir aussi dans icons.css) */
+.bouton.danger,
+.bouton_action_post.danger .submit,
+.formulaire_spip input.submit.danger,
+.formulaire_spip button.danger {
+ background-color: transparent !important;
+ background-image: url(#CHEMIN_IMAGE{rayures-sup.svg}) !important;
+ color: #222 !important;
+ text-shadow: 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white; /* Lisibilité */
+}
+.bouton.danger:hover,
+.bouton.danger:focus,
+.bouton_action_post.danger .submit:hover,
+.bouton_action_post.danger .submit:focus,
+.formulaire_spip input.submit.danger:hover,
+.formulaire_spip input.submit.danger:focus,
+.formulaire_spip button.danger:hover,
+.formulaire_spip button.danger:focus {
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ color: red !important;
+}
+
+/* Variante sans icône (préférence utilisateur) */
+.icones_texte .bouton:before,
+.icones_texte .bouton_action_post .submit:before,
+.icones_texte .formulaire_spip button:before,
+.icones_texte .icone-image {
+ display: none !important;
+}
+.icones_texte .formulaire_spip input.submit:not(.danger) {
+ background-image: none !important;
+ padding-left: #GET{tailles/16/padding/1} !important; /* Todo autres tailles ? */
+}
+
+/* Variantes tailles */
+ <BOUCLE_icones_tailles(DATA) {source table, #GET{tailles}}>
+.bouton.s#CLE,
+.bouton_action_post.s#CLE .submit,
+.formulaire_spip input.submit.s#CLE,
+.formulaire_spip button.s#CLE {
+ font-size: [(#VALEUR{fontsize})];
+ min-height: [(#VALEUR{height})]; /* Pour hauteur identique avec ou sans icone */
+ padding: [(#VALEUR{padding}|implode{' '})];
+}
+.bouton.s#CLE:before,
+.bouton_action_post.s#CLE .submit:before,
+.formulaire_spip button.s#CLE:before {
+ width: [(#CLE)]px !important; /* Obligé important */
+ height: [(#CLE)]px !important;
+}
+.formulaire_spip input.submit.s#CLE {
+ background-size: [(#CLE)]px;
+ padding-#ENV{left}: [(#VALEUR{padding/1})];
+}
+</BOUCLE_icones_tailles>
+
+
+/**
+ * ===================
+ * 3. Variantes images
+ * ===================
+ * Des images/icônes pour des boutons avec des fonctions précises : ajouter, supprimer, etc.
+ * Certaines règles sont mutualisées avec icons.css
+ * On peut aussi mettre manuellement une icône dans le HTML : <img class="icone-image">
+ */
+
+#SET{icones, #LISTE{add, del, config, edit, import, export, new, fermer, ouvrir, ok}}
+/* Styles communs */
+<BOUCLE_icones_common(DATA) {source table, #GET{icones}} {","}>
+.bouton.#VALEUR:before,
+.bouton_action_post.#VALEUR .submit:before,
+.formulaire_spip button.#VALEUR:before
+</BOUCLE_icones_common>
+{
+ content: '';
+ display: block;
+ width: 16px;
+ height: 16px;
+ margin-#ENV{right}: 0.5em;
+ background-size: 100%;
+ background-position: center center;
+ background-repeat: no-repeat;
+}
+<BOUCLE_icones_submit(DATA) {source table, #GET{icones}} {","}>
+.formulaire_spip input.submit.#VALEUR
+</BOUCLE_icones_submit>
+{
+ padding-#ENV{left}: calc(16px + 1.5em); /* Todo autres tailles */
+ background-size: 16px 16px;
+ background-position: center left 1em;
+ background-repeat: no-repeat;
+}
+/* Images */
+<BOUCLE_icones_images(DATA) {source table, #GET{icones}}>
+.icone .icone-fonction-#VALEUR:after,
+.bouton.#VALEUR:before,
+.bouton_action_post.#VALEUR .submit:before,
+.formulaire_spip input.submit.#VALEUR,
+.formulaire_spip button.#VALEUR:before {
+ background-image: url(#CHEMIN_IMAGE{#VALEUR-xx.svg});
+}
+/* Au survol on met une variante mono de couleur claire */
+.bouton.#VALEUR:hover:before,
+.bouton.#VALEUR:focus:before,
+.bouton_action_post.#VALEUR .submit:hover:before,
+.bouton_action_post.#VALEUR .submit:focus:before,
+.formulaire_spip input.submit.#VALEUR:hover,
+.formulaire_spip input.submit.#VALEUR:focus,
+.formulaire_spip button.#VALEUR:hover:before,
+.formulaire_spip button.#VALEUR:focus:before {
+ background-image: url(#CHEMIN_IMAGE{#VALEUR-inverse-xx.svg});
+}
+</BOUCLE_icones_images>
+[(#REM)/**/]
+
+
+/**
+ * ================
+ * 4. Liens boutons
+ * ================
+ *
+ * Markup :
+ * <a class="bouton [variante]">…</a>
+ */
+.bouton {}
+
+
+/**
+ * =========================
+ * 5. Boutons de formulaires
+ * =========================
+ *
+ * Markup :
+ *
+ * <form class="formulaire_spip">
+ * <input type="submit" class="submit [variante]" value="Valider" />
+ * <button type="submit" class="[variante]">Valider</button>
+ * </form>
+ */
+
+/* Couleur différente pour les boutons de base et les boutons d'actions dans un pied de boîte */
+.formulaire_spip input.submit,
+.formulaire_spip button,
+.act .bouton_action_post .submit:not(:hover):not(:focus) {
+ background-color: #ENV{claire};
+ color: #[(#ENV{foncee}|couleur_luminance{0.85})];
+ color: hsla(0, 0%, 0%, 0.9);
+ margin-bottom: 0;
+}
+
+
+/**
+ * ===================
+ * 6. Boutons d'action
+ * ===================
+ *
+ * Markup :
+ *
+ * <form class="bouton_action_post [variante]">
+ * <div><button class="submit">Action</button></div>
+ * </form>
+ */
+
+.bouton_action_post {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+}
+.bouton_action_post div {
+ border-radius: inherit;
+ display: inherit;
+}
+.bouton_action_post .submit {
+ border-radius: inherit;
+}
+/* Dans le footer d'une boîte */
+.box .ft .bouton_action_post {
+ margin-bottom: 0;
+}
+
+/* Fix bouton d'action + classe .icone : combinaison obsolète à ne plus utiliser */
+.bouton_action_post.icone {
+ display: -webkit-inline-box !important;
+ display: -ms-inline-flexbox !important;
+ display: inline-flex !important;
+ padding: 0 !important;
+ background: none !important;
+}
+
+/**
+ * =====================
+ * 7. Groupes de boutons
+ * =====================
+ *
+ * Markup :
+ *
+ * <div class="groupe-boutons">
+ * <a class="bouton">…</a>
+ * <a class="bouton">…</a>
+ * </div>
+ */
+
+.groupe-boutons {
+ display: -webkit-inline-box;
+ display: -ms-inline-flexbox;
+ display: inline-flex;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+}
+/* Si boutons de formulaire ou pied d'une boîte : bloc et alignement */
+.groupe-boutons.act,
+.groupe-boutons.boutons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
+.groupe-boutons .bouton,
+.groupe-boutons .bouton_action_post,
+.groupe-boutons input.submit,
+.groupe-boutons button {
+ -webkit-box-flex: 0;
+ -ms-flex: 0 1 auto;
+ flex: 0 1 auto;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:last-child),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:last-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:last-child) {
+ border-top-#ENV{right}-radius: 0;
+ border-bottom-#ENV{right}-radius: 0;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:first-child),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:first-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:first-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:first-child) {
+ border-top-#ENV{left}-radius: 0;
+ border-bottom-#ENV{left}-radius: 0;
+}
+.groupe-boutons:not(.vertical) .bouton:not(:first-child):not(.secondaire),
+.groupe-boutons:not(.vertical) .bouton_action_post:not(:first-child):not(.secondaire) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit:not(:first-child):not(.secondaire),
+.formulaire_spip .groupe-boutons:not(.vertical) button:not(:first-child):not(.secondaire) {
+ border-#ENV{left}: 1px solid hsla(0, 0%, 0%, 0.15);
+ margin-left: -1px; /* bordure gauche par dessus le bouton précédent */
+}
+.groupe-boutons:not(.vertical) .bouton.secondaire:not(:last-child),
+.groupe-boutons:not(.vertical) .bouton_action_post.secondaire:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons:not(.vertical) input.submit.secondaire:not(:last-child),
+.formulaire_spip .groupe-boutons:not(.vertical) button.secondaire:not(:last-child) {
+ border-#ENV{right}: 0;
+}
+
+/* variante vertical */
+.groupe-boutons.vertical {
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column wrap;
+ flex-flow: column wrap;
+}
+.groupe-boutons.vertical .bouton:not(:last-child),
+.groupe-boutons.vertical .bouton_action_post:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:last-child),
+.formulaire_spip .groupe-boutons.vertical button.submit:not(:last-child) {
+ border-bottom-left-radius: 0;
+ border-bottom-right-radius: 0;
+ margin-bottom: 0;
+}
+.groupe-boutons.vertical .bouton:not(:first-child),
+.groupe-boutons.vertical .bouton_action_post:not(:first-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:first-child),
+.formulaire_spip .groupe-boutons.vertical button:not(:first-child) {
+ border-top-left-radius: 0;
+ border-top-right-radius: 0;
+}
+.groupe-boutons.vertical .bouton:not(:first-child):not(.secondaire),
+.groupe-boutons.vertical .bouton_action_post:not(:first-child):not(.secondaire) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit:not(:first-child):not(.secondaire),
+.formulaire_spip .groupe-boutons.vertical button:not(:first-child):not(.secondaire) {
+ border-top: 1px solid hsla(0, 0%, 0%, 0.15);
+ margin-top: -1px; /* bordure haut par dessus le bouton précédent */
+}
+.groupe-boutons.vertical .bouton.secondaire:not(:last-child),
+.groupe-boutons.vertical .bouton_action_post.secondaire:not(:last-child) .submit,
+.formulaire_spip .groupe-boutons.vertical input.submit.secondaire:not(:last-child),
+.formulaire_spip .groupe-boutons.vertical button.secondaire:not(:last-child) {
+ border-bottom: 0;
+}
+
+/* Variante bloc */
+.groupe-boutons.bloc {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+}
+.groupe-boutons.bloc .bouton,
+.groupe-boutons.bloc .bouton_action_post,
+.groupe-boutons.bloc .bouton_action_post div ,
+.groupe-boutons.bloc .bouton_action_post .submit,
+.groupe-boutons.bloc input.submit,
+.groupe-boutons.bloc button {
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+}
+
+/* Dans un formulaire : ajustements */
+.formulaire_spip .boutons.groupe-boutons {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex; /* pleine largeur */
+ -webkit-box-pack: end;
+ -ms-flex-pack: end;
+ justify-content: flex-end;
+}
\ No newline at end of file
diff --git a/prive/themes/spip/forms.css.html b/prive/themes/spip/forms.css.html
index e9de2c5451..dda82ef40e 100644
--- a/prive/themes/spip/forms.css.html
+++ b/prive/themes/spip/forms.css.html
@@ -1,7 +1,9 @@
#CACHE{0}
[(#REM)
- Ce squelette definit les styles de l'espace prive
+ Ce squelette definit les styles des formulaires de l'espace prive
+
+ Les styles des boutons sont dans boutons.css.html
Note: l'entete "Vary:" sert a repousser l'entete par
defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
@@ -157,7 +159,7 @@ h3.titrem {position:relative;}
/* Remarques importantes */
.formulaire_spip .attention { display: block; margin-bottom: #ENV{margin-bottom}; font-weight: normal; color: #514721; background-color:#FFF6BF; padding: 5px;}
-
+/* Boutons (voir aussi dans boutons.css) */
.formulaire_spip input.submit,
.formulaire_spip input.reset,
.formulaire_spip input.button {
@@ -167,7 +169,6 @@ h3.titrem {position:relative;}
/* icone d'aide */
img.aide {padding: 2px !important;box-sizing: border-box;}
-
/* Fieldset */
.formulaire_spip .editer.fieldset {padding:0;}
.formulaire_spip fieldset {border: 0;width:auto;border-top: 1px solid #ccc;margin-top: [(#ENV{margin-bottom}|strdiv{4})em];padding-bottom:[(#ENV{margin-bottom}|strdiv{4})em];}
@@ -177,13 +178,22 @@ img.aide {padding: 2px !important;box-sizing: border-box;}
.formulaire_spip .editer fieldset label {color: #444444;}
-/* boutons */
+/**
+ * Conteneur des boutons
+ * Les boutons eux-mêmes sont dans boutons.css.html
+ */
.formulaire_spip .boutons { margin-bottom:0;clear:both;padding: [(#ENV{margin-bottom}|strdiv{2})em] 10px;text-align: #ENV{right};background-color: #[(#ENV{claire}|couleur_eclaircir)];border-top: 1px solid [(#ENV{claire})];}
#navigation .formulaire_spip .boutons,
#extra .formulaire_spip .boutons { padding: [(#ENV{margin-bottom}|strdiv{4})em] 5px}
.formulaire_spip .boutons .image_loading {float:none;}
+.formulaire_spip input,
+.formulaire_spip button,
+.bouton_action_post .submit {
+ cursor: pointer;
+}
+
/* Bouton de validation */
input[type="file"] {border: none;background-color: transparent;}
/* Pour IE, qui grossit le bouton submit */
@@ -225,7 +235,13 @@ input[type="submit"],input[type="reset"] {font-size: inherit;}
}
-/* Formulaires particuliers ----------------------------------------------------------------*/
+/**
+ * ========================
+ * Formulaires particuliers
+ * ========================
+ */
+
+
.formulaire_editer_article .editer.editer_liens_sites {border-bottom: 1px solid #ccc;}
/* edition d'un auteur */
@@ -313,14 +329,6 @@ input[type="submit"],input[type="reset"] {font-size: inherit;}
.formulaire_traduire .liste-objets .first_row {display:none;}
.formulaire_traduire .supprimer_trad {float:#ENV{right};}
-/* les boutons action */
-form.bouton_action_post, form.bouton_action_post div {display:inline;}
-form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {margin:0;font-weight:normal;}
-
-.formulaire_spip button {cursor:pointer;}
-form.bouton_action_post.link button.submit, .formulaire_spip .boutons input.link,.formulaire_spip button.link {background:none;border:0;cursor:pointer;padding:0 0 1px;color:#444;}
-form.bouton_action_post.link button.submit:hover, .formulaire_spip .boutons input.link:hover,.formulaire_spip button.link:hover {border-bottom:1px solid;padding:0;}
-
/* formulaire_editer_logo */
.formulaire_editer_logo .titrem,.formulaire_editer_logo .ajouter_survol {text-transform: uppercase;}
/* Date picker : passer par dessus des icones et du menu haut */
diff --git a/prive/themes/spip/icons.css.html b/prive/themes/spip/icons.css.html
index 169ea7d381..ae59e74f8a 100644
--- a/prive/themes/spip/icons.css.html
+++ b/prive/themes/spip/icons.css.html
@@ -1,140 +1,574 @@
[(#REM)
- Ce squelette definit les styles de l'espace prive
-
- Note: l'entete "Vary:" sert a repousser l'entete par
- defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
- genant en cas de "rotation du cookie de session" apres
- un changement d'IP (effet de clignotement).
- <style>
-]
+ Ce squelette definit les styles des boutons icônes de l'espace prive
+
+ Organisation du fichier :
+
+ 1. Icones horizontales et verticales
+ 2. Barre onglets
+ 3. Onglets simples
+ 4. Divers et dépréciés
+
+<style>]
#CACHE{3600*100,cache-client}
-#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
+#HTTP_HEADER{Content-Type: text/css;charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
#SET{iconfontsize,0.9em}
+#SET{iconpadding,0.5em}
+#SET{couleurs, #ARRAY{
+ claire, ##ENV{claire}|couleur_luminance{0.05}|couleur_saturation{0.33, strict},
+ foncee, #ENV{foncee}|couleur_luminance{0.55},
+ foncee_max, #ENV{foncee}|couleur_luminance{0.75},
+}}
-/* * Style des icones */
-/* structure html : <span class="icone danger horizontale s24 left"><a><img><b>texte</b></span> */
-.icone { display:block; margin:0;padding:0;text-align: center;position:relative;z-index:2; /*font-size: 10px;*/}
-.icone a,.icone .submit {display:block;margin:0 auto;width:72px;padding: 5px 0;border:0;cursor:hand;cursor:pointer; }
-.icone a:hover {text-decoration:none;}
-.icone a img,.icone .submit img {margin: 0 auto; display: inline; padding: 4px; background-color: #eee; border: 2px solid #ENV{foncee}; background-repeat:no-repeat;background-position: center center;}
-.icone a:hover img,.icone .submit:hover img { background-color: #fff; border-color: #666; }
-.icone a b,.box .icone a b,.icone .submit b,.box .icone .submit b { font-weight: bold; color: #ENV{foncee}; display: block; margin: 2px auto; width: 100%; font-size:#GET{iconfontsize};height: [(#ENV{line-height}|strmult{2}|strdiv{#GET{iconfontsize}})em];line-height:1; }
-.icone a:hover b,.icone .submit:hover b { color: #000;}
-.icone .icone-image {display: inline-block;position: relative;}
-.icone .icone-image img {display: block;}
-.icone.s16 .icone-image img {width: 16px;}
-.icone.s24 .icone-image img {width: 24px;}
-.icone.s32 .icone-image img {width: 32px;}
-.icone .icone-fonction::after {content:'';display: block;position: absolute;top:0;left:0;right:0;bottom:0;background-size: 85%;background-position: center right 2px;background-repeat: no-repeat;}
-.icone .icone-fonction-add::after{background-image:url(#CHEMIN_IMAGE{add-xx.svg});}
-.icone .icone-fonction-new::after{background-image:url(#CHEMIN_IMAGE{new-xx.svg});}
-.icone .icone-fonction-del::after{background-image:url(#CHEMIN_IMAGE{del-xx.svg});}
-.icone .icone-fonction-edit::after{background-image:url(#CHEMIN_IMAGE{edit-xx.svg});}
-.icone .icone-fonction-config::after{background-image:url(#CHEMIN_IMAGE{config-xx.svg});}
-
-/*form.bouton_action_post.icone,form.bouton_action_post.icone div,form.bouton_action_post.icone .submit {display:block;}*/
-
-
-/* alignement */
-.icone.left {float:#ENV{left};}
-.icone.right {float:#ENV{right};}
-.icone.center {clear:both;}
-.icone.center a,.icone.center .submit {margin:0 auto;}
-.icone.clearleft {clear:#ENV{left};}
-.icone.clearright {clear:#ENV{right};}
-
-/* icone horizontale */
-.icone.horizontale {}
-.icone.horizontale { display:block; clear: both;position:relative;margin:0;padding:2px;text-align: #ENV{left};padding-#ENV{left}:32px;}
-.icone.horizontale a,.icone.horizontale .submit {display:inline;width:auto;padding:0;position: static}
-/* pour les navigateurs modernes */
-.icone.horizontale a,.icone.horizontale .submit {display:table-cell;vertical-align:middle;height:28px;}
-.icone.horizontale.right {text-align: #ENV{right};padding-#ENV{right}:32px;padding-#ENV{left}:2px;}
-.icone.horizontale a img,.icone.horizontale .submit img {padding:0;border:0;background:none;}
-.icone.horizontale a .icone-image,.icone.horizontale .submit .icone-image {position:absolute;#ENV{left}:4px;top:50%;margin-top:-12px;}
-.icone.horizontale a b,.icone.horizontale .submit b {color:#666;display:inline;}
-.icone.horizontale a:hover b,.icone.horizontale .submit:hover b { color: #000;}
-.icone.horizontale .icone-fonction::after {background-size: contain;background-position: center;}
-
-/* variantes sans texte ou sans image */
-.icones_img .icone.verticale b {display:none;}
-.icones_texte .icone .icone-image {display:none;}
-
-.icones_texte .icone.horizontale {padding:2px;}
-.icones_texte .icone.horizontale a,.icones_texte .icone.horizontale .submit {display:block;padding:7px;height:auto;color: #606060;border: 1px solid #ddd; background-color: #f0f0f0;}
-.icones_texte .icone.horizontale a:hover,.icones_texte .icone.horizontale .submit:hover { text-decoration: none; color: #000; border-#ENV{right}: solid 1px #fff; border-bottom: solid 1px #fff; border-#ENV{left}: solid 1px #666; border-top: solid 1px #666; background-color: #eee; }
-
-/* danger */
-.icone.danger {background:none;}
-.icone.danger a,.icone.danger .submit { background: #fce8dd url(#CHEMIN_IMAGE{rayures-danger.png}); }
-.icone.danger a img,.icone.danger .submit img { background-color: #fff; border-color: #ff9999; }
-.icone.danger a:hover img,.icone.danger .submit:hover img { background-color: #fff; border-color: red; }
-.icone.horizontale.danger a,.icone.horizontale.danger .submit { background: none; }
-.icone.horizontale.danger a img,.icone.horizontale.danger .submit img { background: none; }
-.icone.horizontale.danger { background: #fce8dd url(#CHEMIN_IMAGE{rayures-danger.png}); }
-.icones_texte .icone.horizontale.danger {background:none;}
-.icones_texte .icone.horizontale.danger a,.icones_texte .icone.horizontale.danger .submit { background: #fce8dd url(#CHEMIN_IMAGE{rayures-danger.png}); }
-
-/* cas particuliers */
-.icone.verticale.historique-24 { width: 90px; }
-.icone.verticale.suivi-forum-24 { width: 100px; }
-
-.icone.verticale.edition_deja,.icone.verticale.edition_deja a,.icone.verticale.edition_deja a b {width: 100px;}
-.icone.verticale.edition_deja a b {height: [(#ENV{line-height}|strmult{3}|strdiv{#GET{iconfontsize}})em];}
+/**
+ * ==============================
+ * 1. Icône verticale/horizontale
+ * ==============================
+ *
+ * Par défaut, icône verticale.
+ * Une variante horizontale.
+ *
+ * Markup :
+ * <span class="icone danger horizontale s24 left">
+ * <a>
+ * <img>
+ * <b>texte</b>
+ * </a>
+ * </span>
+ */
-/* icone en bord haut du cadre */
-.cadre-icone {position: absolute; top: -16px; #ENV{left}: 10px;z-index:1;max-width:24px;height:auto;}
+.icone {
+ position: relative; /* Afin que le z-index soit pris en compte */
+ z-index: 2;
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ text-align: center;
+ border-radius: 0.25em;
+ vertical-align: middle;
+}
+
+/* Conteneur lien */
+.icone a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-box-orient: vertical;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: column wrap;
+ flex-flow: column wrap;
+ -webkit-box-align: inherit;
+ -ms-flex-align: inherit;
+ align-items: inherit;
+ -webkit-box-pack: inherit;
+ -ms-flex-pack: inherit;
+ justify-content: inherit;
+ width: 5em;
+ padding: [(#GET{iconpadding}) ]0;
+ cursor: pointer;
+ -webkit-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ transition: all 0.2s;
+ border-radius: inherit;
+}
+
+/* Label */
+.icone b,
+.box .icone b {
+ font-weight: bold;
+ margin: 0.5em 0 0;
+ font-size: #GET{iconfontsize};
+ line-height: 1;
+ color: #ENV{foncee};
+ /* height: [(#ENV{line-height}|strmult{2}|strdiv{#GET{iconfontsize}})em]; */
+}
+
+/* Survol et cie */
+.icone a:hover,
+.icone a:focus {
+ text-decoration: none;
+}
+.icone a:hover .icone-image,
+.icone a:focus .icone-image {
+ background-color: #ENV{claire};
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.icone a:hover b,
+.icone a:focus b {
+ color: #222;
+}
+/* Si icone fonction, animation bling */
+.icone a:hover .icone-image.icone-fonction,
+.icone a:focus .icone-image.icone-fonction {
+ background-color: transparent;
+}
+.icone a:hover .icone-fonction img,
+.icone a:focus .icone-fonction img {
+ opacity: 0;
+}
+.icone a:hover .icone-fonction:after,
+.icone a:focus .icone-fonction:after {
+ background-size: 60% auto;
+ background-position: center center;
+ -webkit-transition: background 0.2s;
+ -o-transition: background 0.2s;
+ transition: background 0.2s; /* aller */
+}
+
+/**
+ * Images
+ * Nb : les URLs sont mutualisées avec les boutons, donc définies dans boutons.css
+ * .icone-image : image de base
+ * .icone-fonction : mini image optionnelle par-dessus la précédente
+ */
+.icone .icone-image {
+ padding: #GET{iconpadding};
+ border-radius: inherit;
+ /* background-color: hsla(0, 0%, 0%, 0.025); */
+ background-color: #GET{couleurs/claire};
+ -webkit-box-shadow: inset 0 0 0.75em hsla(0, 0%, 0%, 0.033);
+ box-shadow: inset 0 0 0.75em hsla(0, 0%, 0%, 0.033);
+ -webkit-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ transition: all 0.2s;
+}
+.icone .icone-image img {
+ display: block;
+ -webkit-transition: inherit;
+ -o-transition: inherit;
+ transition: inherit;
+}
+.icone .icone-fonction {
+ position: relative;
+}
+.icone .icone-fonction:after {
+ content: '';
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-position: bottom[ (#GET{iconpadding}) ]right[ (#GET{iconpadding})];
+ background-repeat: no-repeat;
+ -webkit-transition: background 0.1s;
+ -o-transition: background 0.1s;
+ transition: background 0.1s; /* Retour */
+}
+.icone .icone-fonction-new:after {
+ background-position-y: top[ (#GET{iconpadding})];
+}
+
+/* Variante horizontale */
+.icone.horizontale {
+ clear: both;
+ -webkit-box-pack: start;
+ -ms-flex-pack: start;
+ justify-content: flex-start;
+ text-align: #ENV{left};
+}
+.icone.horizontale a {
+ padding: 0.25em 0;
+ -webkit-box-flex: 1;
+ -ms-flex: 1 1 auto;
+ flex: 1 1 auto;
+ -webkit-box-orient: horizontal;
+ -webkit-box-direction: normal;
+ -ms-flex-flow: row nowrap;
+ flex-flow: row nowrap;
+ width: auto;
+}
+.icone.horizontale b {
+ margin-top: 0;
+ margin-#ENV{left}: 0.5em;
+}
+.icone.horizontale a:not(:hover):not(:focus) b {
+ color: #666;
+}
+.icone.horizontale .icone-image {
+ padding: 0;
+ background: transparent;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
+.icone.horizontale .icone-fonction:after {
+ background-position: bottom 0 right 0;
+}
+.icone.horizontale .icone-fonction-new:after {
+ background-position-y: top 0;
+}
+.icone.horizontale a:hover .icone-image,
+.icone.horizontale a:focus .icone-image {
+ background: transparent;
+}
+
+/* Tailles */
+.icone.s16 .icone-image img {
+ width: 16px;
+}
+.icone.s16 .icone-fonction:after {
+ background-size: 8px;
+}
+.icone.s24 .icone-image img {
+ width: 24px;
+}
+.icone.s24 .icone-fonction:after {
+ background-size: 12px;
+}
+.icone.s32 .icone-image img {
+ width: 32px;
+}
+.icone.s32 .icone-fonction:after {
+ background-size: 16px;
+}
+
+/* Variantes alignement */
+.icone.left {
+ float: #ENV{left};
+}
+.icone.horizontale.left,
+.icone.horizontale.right {
+ clear: none;
+}
+.icone.right {
+ float: #ENV{right};
+}
+.icone.center {
+ clear: both;
+ display: table !important; /* Seule façon d'auto-centrer un élément indépendamment du parent */
+ margin-left: auto;
+ margin-right: auto;
+}
+.icone.clearleft {
+ clear: #ENV{left};
+}
+.icone.clearright {
+ clear: #ENV{right};
+}
-/* barre onglet historique
-<div class='barre_onglet'><ul class='clearfix'>
-<li><strong></strong><li><a></a></li>
-</ul></div>
-*/
-/* * Style des onglets historiques */
+/* Variantes sans texte ou sans image */
+.icones_img .icone a b {
+ display: none;
+}
+.icones_texte .icone .icone-image {
+ display: none;
+}
+.icones_texte .icone.horizontale:not(.danger) {
+ padding-left: 0;
+ padding-right: 0;
+}
-.barre_onglet {padding:7px;clear:both;text-align:center;}
+/* Variante danger (Ã mutualiser avec boutons.css ?) */
+.icone.danger a {
+ background-image: url(#CHEMIN_IMAGE{rayures-sup.svg});
+ background-color: transparent;
+}
+.icone.danger b {
+ color: #222;
+ text-shadow: 0 0 0.25em white, 0 0 0.5em white, 0 0 1em white; /* Lisibilité */
+}
+.icone.danger .icone-image {
+ background-color: #fff;
+ border: 2px solid #ff9999;
+}
+.icone.danger a:hover b,
+.icone.danger a:focus b {
+ color: red !important;
+}
+.icone.danger a:hover .icone-image,
+.icone.danger a:focus .icone-image {
+ background-color: #fff;
+ border-color: red;
+}
+.icone.horizontale.danger a {
+ padding-left: 0.25em;
+ padding-right: 0.25em;
+}
+.icone.horizontale.danger .icone-image {
+ background: none;
+ border: none;
+}
+.icone.horizontale.danger a:hover .icone-image,
+.icone.horizontale.danger a:focus .icone-image {
+ background: none;
+}
+
+/* Cas particuliers */
+.icone.verticale.historique-24 {
+ width: 90px;
+}
+.icone.verticale.suivi-forum-24 {
+ width: 100px;
+}
+.icone.verticale.edition_deja,
+.icone.verticale.edition_deja a,
+.icone.verticale.edition_deja a b {
+ width: 100px;
+}
+.icone.verticale.edition_deja a b {
+ height: [(#ENV{line-height}|strmult{3}|strdiv{#GET{iconfontsize}})em];
+}
+
+
+/* ================
+ * 2. Barre onglets
+ * ================
+ *
+ * Markup :
+ *
+ * <div class='barre_onglet'><ul class='clearfix'>
+ * <li><strong></strong><li><a></a></li>
+ * </ul></div>
+ */
+.barre_onglet {
+ padding: 7px;
+ clear: both;
+ text-align: center;
+}
.barre_onglet ul {
- display:inline-block;
- margin:0 auto;text-align:#ENV{left};padding:0;list-style:none;}
-.barre_onglet li {float:#ENV{left};border: 1px solid #ENV{foncee};margin:0;padding:0;margin-#ENV{right}: 3px;position:relative;list-style:none;}
-.barre_onglet .cadre-icone {top:-8px;#ENV{left}:4px;}
-.barre_onglet a,.barre_onglet strong {display:block;font-weight: bold;padding: 5px 8px;text-decoration: none;background-color:#fff;}
-.barre_onglet .cadre-icone+a,.barre_onglet .cadre-icone+strong {padding-#ENV{left}:32px;}
+ display: inline-block;
+ margin: 0 auto;
+ text-align: #ENV{left};
+ padding:0;
+ list-style:none;
+}
+.barre_onglet li {
+ float: #ENV{left};
+ border: 1px solid #ENV{foncee};
+ margin:0;
+ padding:0;
+ margin-#ENV{right}: 3px;
+ position:relative;
+ list-style:none;
+ margin-right: 0px;
+ border-left-width: 0px;
+ border-color: #eee;
+}
+.barre_onglet a,
+.barre_onglet strong {
+ display: block;
+ font-weight: bold;
+ padding: 5px 8px;
+ text-decoration: none;
+ background-color: #fff;
+}
+.barre_onglet a {
+ background-color: #eee;
+}
+.barre_onglet a:hover,
+.barre_onglet a:focus {
+ background-color: #ENV{claire};
+ color: #fff;
+ text-decoration: none;
+ background-color: white;
+ background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));
+ background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
+ background-image: -moz-linear-gradient(top, #ffffff, #ffffff);
+ background-image: -ms-linear-gradient(top, #ffffff, #ffffff);
+ background-image: -o-linear-gradient(top, #ffffff, #ffffff);
+ background-image: linear-gradient(top, #ffffff, #ffffff);color: #[(#ENV{foncee}|couleur_luminance{0.7})];
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ffffff');
+}
+.barre_onglet strong {
+ background-color: #ENV{foncee};
+ color: #fff;
+}
+.barre_onglet strong.on {
+ background-color: #ENV{foncee};
+}
+.barre_onglet li:first-child strong.on {
+ border-bottom-left-radius:5px;
+ border-top-left-radius:5px;
+}
+.barre_onglet li:last-child strong.on {
+ border-bottom-right-radius:5px;
+ border-top-right-radius:5px;
+}
+.barre_onglet ul > li:first-child {
+ position: relative;
+ border-left-width: 1px;
+ border-bottom-left-radius: 5px;
+ border-top-left-radius: 5px;
+}
+.barre_onglet ul > li:first-child a {
+ position: relative;
+ border-bottom-left-radius: 5px;
+ border-top-left-radius: 5px;
+}
+.barre_onglet ul > li:last-child {
+ position: relative;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+}
+.barre_onglet ul > li:last-child a {
+ position: relative;
+ border-bottom-right-radius: 5px;
+ border-top-right-radius: 5px;
+}
+.barre_onglet .cadre-icone {
+ top: -8px;
+ #ENV{left}: 4px;
+}
+.barre_onglet .cadre-icone + a,
+.barre_onglet .cadre-icone + strong {
+ padding-#ENV{left}: 32px;
+}
+
+
+/* ==================
+ * 3. Onglets simples
+ * ==================
+ *
+ * Markup :
+ *
+ * <div class='onglets_simple clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
+ * <div class='onglets_simple second clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
+ */
-.barre_onglet strong {background-color: #ENV{foncee}; color: #fff;}
-.barre_onglet a:hover {background-color: #ENV{claire}; color: #fff;text-decoration: none;}
+.onglets_simple {
+ margin: 1em 0;
+ clear: #ENV{left};
+ border-bottom:1px solid #ENV{foncee};
+ padding-#ENV{left}:5px;
+}
+.onglets_simple ul {
+ list-style: none;
+ margin-#ENV{left}:1px;
+ padding:0;
+}
+.onglets_simple ul li {
+ float: #ENV{left};
+ padding: 0;
+ margin: 0;
+ margin-bottom: -1px;
+}
+.onglets_simple ul li strong,
+.onglets_simple ul li a {
+ display: block;
+ float: #ENV{left};
+ padding: 4px 7px;
+ border: 1px solid #ENV{foncee};
+ margin-#ENV{left}: 5px;
+ background-color: #eee;
+ background-position: center #ENV{left};
+ background-repeat: no-repeat;
+}
+.onglets_simple ul li strong,
+.onglets_simple ul li a:hover {
+ background-color: #f8f7f3;
+}
+.onglets_simple ul li a {
+ position: relative;
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ opacity: 0.7;
+ filter: alpha(opacity=70);
+}
+.onglets_simple ul li a:hover,
+.onglets_simple ul li a:focus {
+ cursor: hand;
+ cursor: pointer;
+ opacity: 1;
+ filter: alpha(opacity=100);
+}
+.onglets_simple ul li strong {
+ position: relative;
+ color: #555;
+ background-color: transparent;
+ border-bottom: 1px solid #f8f7f3;
+ border-top-right-radius: 5px;
+ border-bottom-color: #f9f9f9;
+}
+.onglets_simple .cadre-icone {
+ display: none;
+}
+/* Second niveau */
-/* onglets simple 1er et second niveau
-<div class='onglets_simple clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
-<div class='onglets_simple second clearfix'><ul><li><strong></strong></li><li><a></a></li></ul></div>
-*/
-.onglets_simple { margin:1em 0;clear:#ENV{left};border-bottom:1px solid #ENV{foncee};padding-#ENV{left}:5px;}
-.onglets_simple ul {list-style:none;margin-#ENV{left}:1px;padding:0;}
-.onglets_simple ul li {float:#ENV{left};padding:0;margin:0;margin-bottom:-1px;}
+.onglets_simple.second {
+ font-size: 0.9em;
+ border: 0;
+ padding-#ENV{left}: 0;
+}
+.onglets_simple.second ul li strong,
+.onglets_simple.second ul li a {
+ margin-#ENV{left}:0px;
+ margin-#ENV{right}:5px;
+ margin-bottom:5px;
+}
+.onglets_simple.second ul li strong {
+ border:1px solid #ENV{foncee};
+}
+.onglets_simple.second ul li strong,
+.onglets_simple.second ul li a:hover,
+.onglets_simple.second ul li a:focus {
+ background-color: #fff;
+}
-.onglets_simple ul li strong,.onglets_simple ul li a {display:block;float:#ENV{left};padding:4px 7px;border:1px solid #ENV{foncee};margin-#ENV{left}:5px;background-color:#eee;background-position:center #ENV{left};background-repeat:no-repeat;}
-.onglets_simple ul li strong,.onglets_simple ul li a:hover {background-color:#f8f7f3;}
-.onglets_simple ul li a:hover {cursor:hand;cursor:pointer;}
-.onglets_simple ul li strong {border-bottom:1px solid #f8f7f3;color:#555;}
-.onglets_simple .cadre-icone {display: none;}
+/* ==================
+ * 4. Divers & oldies
+ * ==================
+ */
-.onglets_simple.second {font-size:0.9em;border:0;padding-#ENV{left}:0;}
-.onglets_simple.second ul li strong,.onglets_simple.second ul li a {margin-#ENV{left}:0px;margin-#ENV{right}:5px;margin-bottom:5px;}
-.onglets_simple.second ul li strong {border:1px solid #ENV{foncee};}
-.onglets_simple.second ul li strong,.onglets_simple.second ul li a:hover {background-color:#fff;}
+/* icone en bord haut du cadre */
+.cadre-icone {
+ position: absolute;
+ top: -16px;
+ #ENV{left}: 10px;
+ z-index:1;
+ max-width:24px;
+ height:auto;
+}
+
+.iconeoff {
+ padding: 3px;
+ margin: 1px;
+ border: 1px dashed #ccc;
+ background-color: #f0f0f0;
+}
+.iconeon {
+ cursor: pointer;
+ padding: 3px;
+ margin: 1px;
+ border-#ENV{right}: solid 1px #fff;
+ border-bottom: solid 1px #fff;
+ border-#ENV{left}: solid 1px #666;
+ border-top: solid 1px #666;
+ background-color: #eee;
+}
-.iconeoff { padding: 3px; margin: 1px; border: 1px dashed #ccc; background-color: #f0f0f0; }
-.iconeon { cursor: pointer; padding: 3px; margin: 1px; border-#ENV{right}: solid 1px #fff; border-bottom: solid 1px #fff; border-#ENV{left}: solid 1px #666; border-top: solid 1px #666; background-color: #eee; }
-.iconedanger { padding: 3px; margin: 1px; border: 1px dashed #000; background: #fce8dd url(#CHEMIN_IMAGE{rayures-danger.png}); }
+.iconedanger {
+ padding: 3px;
+ margin: 1px;
+ border: 1px dashed #000;
+ background: #fce8dd url(#CHEMIN_IMAGE{rayures-danger.svg});
+}
/* OLDIES anciennes icones issues de php */
td.icone table {}
-td.icone a { color: #000; text-decoration: none; font-size: 10px; font-weight: bold; }
-td.icone a:hover { text-decoration: none; }
-td.icone a img { border: 0; }
+
+td.icone a {
+ color: #000;
+ text-decoration: none;
+ font-size: 10px;
+ font-weight: bold;
+}
+
+td.icone a:hover {
+ text-decoration: none;
+}
+
+td.icone a img {
+ border: 0;
+}
\ No newline at end of file
diff --git a/prive/themes/spip/images/add-inverse-xx.svg b/prive/themes/spip/images/add-inverse-xx.svg
new file mode 100644
index 0000000000..c225909f02
--- /dev/null
+++ b/prive/themes/spip/images/add-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0A32 32 0 0 0 0 32a32 32 0 0 0 32 32 32 32 0 0 0 32-32A32 32 0 0 0 32 0zm-3.402 8H35.1c.903 0 1.67.315 2.302.947.633.633.95 1.402.95 2.305v14.092h14.091c.904 0 1.673.316 2.305.949.633.632.947 1.4.947 2.303v6.506c0 .903-.315 1.67-.947 2.302-.632.632-1.4.948-2.305.948H38.352v14.093c0 .904-.316 1.67-.948 2.303a3.14 3.14 0 0 1-2.304.95h-6.504c-.904 0-1.67-.318-2.303-.95a3.136 3.136 0 0 1-.95-2.303V38.352H11.253c-.904 0-1.672-.316-2.305-.948-.632-.633-.947-1.4-.947-2.302v-6.506c0-.903.315-1.671.947-2.303a3.142 3.142 0 0 1 2.305-.95h14.094V11.253c0-.904.316-1.672.949-2.305.632-.632 1.4-.947 2.303-.947z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/add-xx.svg b/prive/themes/spip/images/add-xx.svg
index 143fbbd49b..ea5093ce07 100644
--- a/prive/themes/spip/images/add-xx.svg
+++ b/prive/themes/spip/images/add-xx.svg
@@ -1,18 +1 @@
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- width="64"
- height="64"
- viewBox="0 0 64 64">
- <g transform="translate(32 32) scale(0.5)">
- <circle fill="#4caf50" cx="32" cy="32" r="32" />
- <g transform="translate(8 8) scale(0.75)">
- <path transform="scale(0.1582)" fill="#fff" d="M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414
- C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775
- H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411
- c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987
- h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77
- c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z"
- />
- </g>
- </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g stroke-width=".5"><circle fill="#4caf50" cx="32" cy="32" r="32"/><path fill="#fff" d="M54.748 26.293c-.632-.633-1.4-.949-2.304-.949H38.352V11.252c0-.903-.316-1.671-.949-2.304C36.771 8.316 36.003 8 35.1 8h-6.503c-.903 0-1.671.316-2.303.948-.633.633-.949 1.4-.949 2.304v14.092H11.252c-.903 0-1.671.317-2.304.949-.632.632-.948 1.4-.948 2.303v6.505c0 .903.316 1.67.948 2.303.633.632 1.4.948 2.304.948h14.092v14.093c0 .903.316 1.672.948 2.304.633.632 1.4.948 2.304.948H35.1c.904 0 1.671-.316 2.304-.948.632-.633.948-1.4.948-2.304V38.352h14.092c.904 0 1.672-.316 2.304-.948.632-.632.948-1.4.948-2.303v-6.505c0-.903-.315-1.671-.948-2.303z"/></g></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/config-inverse-xx.svg b/prive/themes/spip/images/config-inverse-xx.svg
new file mode 100644
index 0000000000..05bb3924d5
--- /dev/null
+++ b/prive/themes/spip/images/config-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 340.274 340.274"><path fill="#fff" d="M293.63 124.392l-5.795-13.739c19.846-44.856 18.53-46.189 14.676-50.08l-25.353-24.77-2.516-2.12h-2.937c-1.55 0-6.173 0-44.712 17.48l-14.184-5.719C194.477 0 192.597 0 187.229 0h-35.766c-5.362 0-7.446-.006-24.448 45.606l-14.123 5.734c-26.044-10.997-41.318-16.564-45.44-16.564l-3.38.105-27.27 26.737c-4.139 3.891-5.583 5.263 15.401 49.425l-5.774 13.691C0 142.684 0 144.424 0 149.916v35.069c0 5.5 0 7.44 46.585 24.127l5.773 13.667c-19.843 44.832-18.51 46.178-14.655 50.032l25.353 24.8 2.522 2.168h2.951c1.525 0 6.092 0 44.685-17.516l14.16 5.758c18.334 45.438 20.217 45.427 25.597 45.427h35.772c5.47 0 7.41 0 24.463-45.59l14.195-5.74c26.014 11 41.253 16.586 45.349 16.586l3.404-.096 27.479-26.901c3.909-3.945 5.278-5.31-15.59-49.288l5.735-13.702c46.496-17.967 46.496-19.853 46.496-25.221v-35.03c-.005-5.519-.005-7.446-46.644-24.074zM170.128 225.061c-32.798 0-59.504-26.187-59.504-58.365 0-32.153 26.707-58.315 59.504-58.315 32.78 0 59.43 26.168 59.43 58.315-.005 32.178-26.655 58.365-59.43 58.365z"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/config-xx.svg b/prive/themes/spip/images/config-xx.svg
index 96cc9c2916..e222233a21 100644
--- a/prive/themes/spip/images/config-xx.svg
+++ b/prive/themes/spip/images/config-xx.svg
@@ -1,19 +1,53 @@
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="64"
- height="64"
- viewBox="0 0 340.274 340.274">
- <g transform="translate(170.137 170.137) scale(0.5)">
- <path fill="#777777" d="M293.629,127.806l-5.795-13.739c19.846-44.856,18.53-46.189,14.676-50.08l-25.353-24.77l-2.516-2.12h-2.937
- c-1.549,0-6.173,0-44.712,17.48l-14.184-5.719c-18.332-45.444-20.212-45.444-25.58-45.444h-35.765
- c-5.362,0-7.446-0.006-24.448,45.606l-14.123,5.734C86.848,43.757,71.574,38.19,67.452,38.19l-3.381,0.105L36.801,65.032
- c-4.138,3.891-5.582,5.263,15.402,49.425l-5.774,13.691C0,146.097,0,147.838,0,153.33v35.068c0,5.501,0,7.44,46.585,24.127
- l5.773,13.667c-19.843,44.832-18.51,46.178-14.655,50.032l25.353,24.8l2.522,2.168h2.951c1.525,0,6.092,0,44.685-17.516
- l14.159,5.758c18.335,45.438,20.218,45.427,25.598,45.427h35.771c5.47,0,7.41,0,24.463-45.589l14.195-5.74
- c26.014,11,41.253,16.585,45.349,16.585l3.404-0.096l27.479-26.901c3.909-3.945,5.278-5.309-15.589-49.288l5.734-13.702
- c46.496-17.967,46.496-19.853,46.496-25.221v-35.029C340.268,146.361,340.268,144.434,293.629,127.806z M170.128,228.474
- c-32.798,0-59.504-26.187-59.504-58.364c0-32.153,26.707-58.315,59.504-58.315c32.78,0,59.43,26.168,59.43,58.315
- C229.552,202.287,202.902,228.474,170.128,228.474z"/>
- </g>
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+ xmlns:dc="http://purl.org/dc/elements/1.1/"
+ xmlns:cc="http://creativecommons.org/ns#"
+ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+ xmlns:svg="http://www.w3.org/2000/svg"
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+ xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+ width="64"
+ height="64"
+ viewBox="0 0 340.274 340.274"
+ version="1.1"
+ id="svg4"
+ sodipodi:docname="config-xx.svg"
+ inkscape:version="1.0.1 (1.0.1+r73)">
+ <metadata
+ id="metadata10">
+ <rdf:RDF>
+ <cc:Work
+ rdf:about="">
+ <dc:format>image/svg+xml</dc:format>
+ <dc:type
+ rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ </cc:Work>
+ </rdf:RDF>
+ </metadata>
+ <defs
+ id="defs8" />
+ <sodipodi:namedview
+ pagecolor="#ffffff"
+ bordercolor="#666666"
+ borderopacity="1"
+ objecttolerance="10"
+ gridtolerance="10"
+ guidetolerance="10"
+ inkscape:pageopacity="0"
+ inkscape:pageshadow="2"
+ inkscape:window-width="640"
+ inkscape:window-height="480"
+ id="namedview6"
+ showgrid="false"
+ inkscape:zoom="10.171875"
+ inkscape:cx="32"
+ inkscape:cy="32"
+ inkscape:current-layer="svg4" />
+ <path
+ fill="#777"
+ d="M293.63 124.392l-5.795-13.739c19.846-44.856 18.53-46.189 14.676-50.08l-25.353-24.77-2.516-2.12h-2.937c-1.55 0-6.173 0-44.712 17.48l-14.184-5.719C194.477 0 192.597 0 187.229 0h-35.766c-5.362 0-7.446-.006-24.448 45.606l-14.123 5.734c-26.044-10.997-41.318-16.564-45.44-16.564l-3.38.105-27.27 26.737c-4.139 3.891-5.583 5.263 15.401 49.425l-5.774 13.691C0 142.684 0 144.424 0 149.916v35.069c0 5.5 0 7.44 46.585 24.127l5.773 13.667c-19.843 44.832-18.51 46.178-14.655 50.032l25.353 24.8 2.522 2.168h2.951c1.525 0 6.092 0 44.685-17.516l14.16 5.758c18.334 45.438 20.217 45.427 25.597 45.427h35.772c5.47 0 7.41 0 24.463-45.59l14.195-5.74c26.014 11 41.253 16.586 45.349 16.586l3.404-.096 27.479-26.901c3.909-3.945 5.278-5.31-15.59-49.288l5.735-13.702c46.496-17.967 46.496-19.853 46.496-25.221v-35.03c-.005-5.519-.005-7.446-46.644-24.074zM170.128 225.061c-32.798 0-59.504-26.187-59.504-58.365 0-32.153 26.707-58.315 59.504-58.315 32.78 0 59.43 26.168 59.43 58.315-.005 32.178-26.655 58.365-59.43 58.365z"
+ stroke-width=".5"
+ id="path2"
+ style="fill:#444444;fill-opacity:1" />
</svg>
diff --git a/prive/themes/spip/images/del-inverse-xx.svg b/prive/themes/spip/images/del-inverse-xx.svg
new file mode 100644
index 0000000000..a0bd081b9e
--- /dev/null
+++ b/prive/themes/spip/images/del-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0A32 32 0 0 0 0 32a32 32 0 0 0 32 32 32 32 0 0 0 32-32A32 32 0 0 0 32 0zM11.271 25.453h41.454c.909 0 1.683.32 2.32.955.636.637.953 1.409.975 2.319v6.544c0 .91-.318 1.683-.954 2.319-.636.636-1.408.955-2.318.955H11.271c-.908 0-1.68-.32-2.318-.955C8.317 36.954 8 36.18 8 35.27v-6.544c0-.91.317-1.682.953-2.319a3.161 3.161 0 0 1 2.318-.955z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/del-xx.svg b/prive/themes/spip/images/del-xx.svg
index 0e507b237c..80f6e9a3ed 100644
--- a/prive/themes/spip/images/del-xx.svg
+++ b/prive/themes/spip/images/del-xx.svg
@@ -1,15 +1 @@
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- x="0px" y="0px"
- width="64"
- height="64"
- viewBox="0 0 64 64">
- <g transform="translate(32 32) scale(0.5)">
- <circle cx="32" cy="32" r="32" fill="#E21B1B" />
- <path transform="translate(8 8) scale(0.1194)" fill="#fff" d="M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811
- H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589
- v54.819c0,7.618,2.662,14.086,7.992,19.411c5.33,5.332,11.803,7.994,19.414,7.994h118.771
- H374.77 c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411
- v-54.819C401.991,165.973,399.332,159.502,394,154.175z" />
- </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g stroke-width=".5"><circle cx="32" cy="32" r="32" fill="#e21b1b"/><path fill="#fff" d="M55.044 26.408c-.637-.636-1.41-.954-2.319-.954H11.272c-.908 0-1.681.318-2.318.954-.636.637-.954 1.41-.954 2.319v6.545c0 .91.318 1.682.954 2.318.637.636 1.41.954 2.318.954h41.476c.91 0 1.682-.318 2.318-.954.636-.636.954-1.408.954-2.318v-6.545c-.022-.91-.34-1.682-.976-2.319z"/></g></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/edit-inverse-xx.svg b/prive/themes/spip/images/edit-inverse-xx.svg
new file mode 100644
index 0000000000..3ba7462a49
--- /dev/null
+++ b/prive/themes/spip/images/edit-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 179.5 179.5"><path d="M150.33 0c-4.416 0-8.54 1.671-11.597 4.727l-9.723 9.724L165.1 50.539l9.674-9.674c2.617-2.617 4.7-7.145 4.7-10.567.3-4.735-1.51-9.064-4.7-12.254l-7.11-7.11-6.207-6.207C158.646 1.824 154.616 0 150.33 0zm-25.28 18.417L9.953 133.513l36.034 36.04L161.083 54.455l-36.033-36.04zM5.998 137.495l-3.686 25.801-.011-.01L0 179.5l16.215-2.3-.011-.012 25.8-3.686-36.006-36.007z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/edit-xx.svg b/prive/themes/spip/images/edit-xx.svg
index ad0bd26579..e069bc3032 100644
--- a/prive/themes/spip/images/edit-xx.svg
+++ b/prive/themes/spip/images/edit-xx.svg
@@ -1,17 +1 @@
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink"
- width="64"
- height="64"
- viewBox="0 0 179.5 179.5">
- <g transform="translate(71.8 71.8) scale(0.6)">
- <path fill="#324A5E" d="M42,173.3l-36-36L138.6,4.7c6.3-6.3,16.4-6.3,22.7,0L174.6,18c6.3,6.3,6.3,16.4,0,22.7L42,173.3z"/>
- <path fill="#FC6F58" d="M174.6,40.7c6.3-6.3,6.3-16.4,0-22.7L161.3,4.7c-6.3-6.3-16.4-6.3-22.7,0l-9.9,9.9l36,36L174.6,40.7z"/>
- <path fill="#F1543F" d="M174.6,18l-7.1-7.1l-21.3,21.3l18.5,18.5l9.9-9.9C180.9,34.4,180.9,24.2,174.6,18z"/>
- <rect fill="#2B3B4E" x="7.2" y="89.4" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -45.0305 96.5264)" width="173.5" height="26.3"/>
- <polygon fill="#FFDC8D" points="42,173.3 0,179.3 6,137.3 "/>
- <polygon fill="#FFD15D" points="42,173.3 24,155.3 0,179.3 0,179.3 "/>
- <polygon fill="#324A5E" points="16.2,177 2.3,163.1 0,179.3 "/>
- <polygon fill="#2B3B4E" points="0,179.3 0,179.3 16.2,177 9.3,170 "/>
- </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 179.5 179.5"><g stroke-width=".599"><path fill="#324a5e" d="M42.041 173.494L6.006 137.46l132.73-132.73a16.01 16.01 0 0 1 22.721 0l13.313 13.314a16.01 16.01 0 0 1 0 22.722z"/><path fill="#fc6f58" d="M174.77 40.765a16.01 16.01 0 0 0 0-22.722L161.457 4.73a16.01 16.01 0 0 0-22.722 0l-9.91 9.91 36.036 36.034z"/><path fill="#f1543f" d="M174.77 18.043l-7.107-7.107-21.32 21.32 18.518 18.519 9.91-9.91c6.306-6.406 6.306-16.616 0-22.822z"/><path fill="#2b3b4e" d="M23.298 154.826L146.1 32.024l18.615 18.615L41.913 173.441z"/><path fill="#ffdc8d" d="M6.006 137.459l36.035 36.035L0 179.5z"/><path fill="#ffd15d" d="M24.023 155.477L0 179.5l42.041-6.006z"/><path fill="#324a5e" d="M0 179.5l16.216-2.302-13.914-13.914z"/><path fill="#2b3b4e" d="M16.216 177.198l-6.907-7.007L0 179.5z"/></g></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/export-inverse-xx.svg b/prive/themes/spip/images/export-inverse-xx.svg
new file mode 100644
index 0000000000..12914b0b4a
--- /dev/null
+++ b/prive/themes/spip/images/export-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 13V4H4v56h56v-9" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 32h38" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M50.525 19.15a2.5 2.5 0 0 0-2.524 2.575v20.55a2.5 2.5 0 0 0 4.212 1.897l11-10.352a2.5 2.5 0 0 0 0-3.64l-11-10.352a2.5 2.5 0 0 0-1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#fff" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/export-xx.svg b/prive/themes/spip/images/export-xx.svg
new file mode 100644
index 0000000000..e669201609
--- /dev/null
+++ b/prive/themes/spip/images/export-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 13V4H4v56h56v-9" fill="none" stroke="#444" stroke-width="8" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 32h38" fill="none" stroke="#444" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M50.525 19.15a2.5 2.5 0 0 0-2.524 2.575v20.55a2.5 2.5 0 0 0 4.212 1.897l11-10.352a2.5 2.5 0 0 0 0-3.64l-11-10.352a2.5 2.5 0 0 0-1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#444" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/fermer-inverse-xx.svg b/prive/themes/spip/images/fermer-inverse-xx.svg
new file mode 100644
index 0000000000..9237187710
--- /dev/null
+++ b/prive/themes/spip/images/fermer-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M31.744.08A31.92 31.92 0 0 0 .08 32 31.92 31.92 0 0 0 32 63.918 31.92 31.92 0 0 0 63.918 32 31.92 31.92 0 0 0 32 .08a31.92 31.92 0 0 0-.256 0zM21.246 14.395c.78 0 1.449.279 2.006.835l8.691 8.692 8.692-8.692a2.732 2.732 0 0 1 2.004-.835c.78 0 1.449.278 2.006.835l4.011 4.01c.558.558.836 1.226.836 2.006 0 .78-.279 1.449-.836 2.006l-8.691 8.691 8.691 8.69c.557.557.836 1.226.836 2.006 0 .78-.279 1.448-.836 2.006l-4.011 4.011a2.73 2.73 0 0 1-2.004.836c-.78 0-1.449-.278-2.006-.836l-8.692-8.691-8.691 8.691a2.736 2.736 0 0 1-2.006.836c-.78 0-1.446-.278-2.004-.836l-4.012-4.011a2.738 2.738 0 0 1-.835-2.006c0-.78.279-1.447.835-2.004l8.692-8.692-8.692-8.691a2.736 2.736 0 0 1-.835-2.006c0-.78.278-1.446.835-2.004l4.012-4.012a2.731 2.731 0 0 1 2.004-.835z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/import-inverse-xx.svg b/prive/themes/spip/images/import-inverse-xx.svg
new file mode 100644
index 0000000000..dba0bbf00b
--- /dev/null
+++ b/prive/themes/spip/images/import-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 17V4H4v56h56V47" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="square" stroke-linejoin="round"/><path d="M60 32H22" fill="none" stroke="#fff" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M29.475 19.15a-2.5 2.5 0 0 1 2.524 2.575v20.55a-2.5 2.5 0 0 1-4.212 1.897l-11-10.352a-2.5 2.5 0 0 1 0-3.64l11-10.352a-2.5 2.5 0 0 1 1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#fefefe" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/import-xx.svg b/prive/themes/spip/images/import-xx.svg
new file mode 100644
index 0000000000..52f114621b
--- /dev/null
+++ b/prive/themes/spip/images/import-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="64" height="64"><path d="M60 17V4H4v56h56V47" fill="none" stroke="#444" stroke-width="8" stroke-linecap="square" stroke-linejoin="round"/><path d="M60 32H22" fill="none" stroke="#444" stroke-width="8" stroke-linecap="round"/><path style="line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-variant-east-asian:normal;font-feature-settings:normal;font-variation-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;shape-margin:0;inline-size:0;isolation:auto;mix-blend-mode:normal" d="M29.475 19.15a-2.5 2.5 0 0 1 2.524 2.575v20.55a-2.5 2.5 0 0 1-4.212 1.897l-11-10.352a-2.5 2.5 0 0 1 0-3.64l11-10.352a-2.5 2.5 0 0 1 1.688-.678z" color="#000" font-weight="400" font-family="sans-serif" white-space="normal" overflow="visible" fill="#444" fill-rule="evenodd"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/new-inverse-xx.svg b/prive/themes/spip/images/new-inverse-xx.svg
new file mode 100644
index 0000000000..c225909f02
--- /dev/null
+++ b/prive/themes/spip/images/new-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><path d="M32 0A32 32 0 0 0 0 32a32 32 0 0 0 32 32 32 32 0 0 0 32-32A32 32 0 0 0 32 0zm-3.402 8H35.1c.903 0 1.67.315 2.302.947.633.633.95 1.402.95 2.305v14.092h14.091c.904 0 1.673.316 2.305.949.633.632.947 1.4.947 2.303v6.506c0 .903-.315 1.67-.947 2.302-.632.632-1.4.948-2.305.948H38.352v14.093c0 .904-.316 1.67-.948 2.303a3.14 3.14 0 0 1-2.304.95h-6.504c-.904 0-1.67-.318-2.303-.95a3.136 3.136 0 0 1-.95-2.303V38.352H11.253c-.904 0-1.672-.316-2.305-.948-.632-.633-.947-1.4-.947-2.302v-6.506c0-.903.315-1.671.947-2.303a3.142 3.142 0 0 1 2.305-.95h14.094V11.253c0-.904.316-1.672.949-2.305.632-.632 1.4-.947 2.303-.947z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/new-xx.svg b/prive/themes/spip/images/new-xx.svg
index 3c564cbd97..ea5093ce07 100644
--- a/prive/themes/spip/images/new-xx.svg
+++ b/prive/themes/spip/images/new-xx.svg
@@ -1,18 +1 @@
-<svg version="1.1"
- xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
- width="64"
- height="64"
- viewBox="0 0 64 64">
- <g transform="translate(32 0) scale(0.5)">
- <circle fill="#4caf50" cx="32" cy="32" r="32" />
- <g transform="translate(8 8) scale(0.75)">
- <path transform="scale(0.1582)" fill="#fff" d="M394,154.175c-5.331-5.33-11.806-7.994-19.417-7.994H255.811V27.406c0-7.611-2.666-14.084-7.994-19.414
- C242.488,2.666,236.02,0,228.398,0h-54.812c-7.612,0-14.084,2.663-19.414,7.993c-5.33,5.33-7.994,11.803-7.994,19.414v118.775
- H27.407c-7.611,0-14.084,2.664-19.414,7.994S0,165.973,0,173.589v54.819c0,7.618,2.662,14.086,7.992,19.411
- c5.33,5.332,11.803,7.994,19.414,7.994h118.771V374.59c0,7.611,2.664,14.089,7.994,19.417c5.33,5.325,11.802,7.987,19.414,7.987
- h54.816c7.617,0,14.086-2.662,19.417-7.987c5.332-5.331,7.994-11.806,7.994-19.417V255.813h118.77
- c7.618,0,14.089-2.662,19.417-7.994c5.329-5.325,7.994-11.793,7.994-19.411v-54.819C401.991,165.973,399.332,159.502,394,154.175z"
- />
- </g>
- </g>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><g stroke-width=".5"><circle fill="#4caf50" cx="32" cy="32" r="32"/><path fill="#fff" d="M54.748 26.293c-.632-.633-1.4-.949-2.304-.949H38.352V11.252c0-.903-.316-1.671-.949-2.304C36.771 8.316 36.003 8 35.1 8h-6.503c-.903 0-1.671.316-2.303.948-.633.633-.949 1.4-.949 2.304v14.092H11.252c-.903 0-1.671.317-2.304.949-.632.632-.948 1.4-.948 2.303v6.505c0 .903.316 1.67.948 2.303.633.632 1.4.948 2.304.948h14.092v14.093c0 .903.316 1.672.948 2.304.633.632 1.4.948 2.304.948H35.1c.904 0 1.671-.316 2.304-.948.632-.633.948-1.4.948-2.304V38.352h14.092c.904 0 1.672-.316 2.304-.948.632-.632.948-1.4.948-2.303v-6.505c0-.903-.315-1.671-.948-2.303z"/></g></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/ok-inverse-xx.svg b/prive/themes/spip/images/ok-inverse-xx.svg
new file mode 100644
index 0000000000..af65915f4e
--- /dev/null
+++ b/prive/themes/spip/images/ok-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="64" width="64" viewBox="0 0 64 64"><path fill="#fff" d="M28.5 54.5a6.964 6.964 0 0 1-4.949-2.051l-14-14a6.992 6.992 0 0 1 0-9.898 6.992 6.992 0 0 1 9.898 0l8.295 8.295L43.9 15.3c2.317-3.087 6.706-3.724 9.793-1.4a6.994 6.994 0 0 1 1.4 9.8l-21 28a6.97 6.97 0 0 1-5.103 2.779 5.735 5.735 0 0 1-.49.021z"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/ouvrir-inverse-xx.svg b/prive/themes/spip/images/ouvrir-inverse-xx.svg
new file mode 100644
index 0000000000..0a16e9e0d2
--- /dev/null
+++ b/prive/themes/spip/images/ouvrir-inverse-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333307 4.2333307"><path d="M2.09 0A2.117 2.117 0 0 0 .62.62a2.117 2.117 0 0 0 0 2.995 2.117 2.117 0 0 0 2.995 0 2.117 2.117 0 0 0 0-2.994A2.117 2.117 0 0 0 2.09 0zm-.108.733h.27c.053 0 .097.018.134.055A.181.181 0 0 1 2.44.92v.868h.868c.052 0 .097.018.133.055a.181.181 0 0 1 .055.133v.27a.181.181 0 0 1-.055.134.182.182 0 0 1-.133.055H2.44v.868a.182.182 0 0 1-.055.133.181.181 0 0 1-.133.055h-.27a.181.181 0 0 1-.134-.055.181.181 0 0 1-.055-.133v-.868H.926a.195.195 0 0 1-.133-.055.182.182 0 0 1-.055-.134v-.27c0-.052.018-.097.055-.133a.181.181 0 0 1 .133-.055h.868V.921c0-.052.018-.097.055-.133a.181.181 0 0 1 .133-.055z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/images/ouvrir-xx.svg b/prive/themes/spip/images/ouvrir-xx.svg
new file mode 100644
index 0000000000..d6d6e6df53
--- /dev/null
+++ b/prive/themes/spip/images/ouvrir-xx.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 4.2333307 4.2333307"><g transform="rotate(45 2.126 2.114) scale(.01056)" stroke-width="3.99"><circle cx="201" cy="201" r="200.5" fill="#444"/><path fill="#fff" d="M307.333 271.38c0-4.9-1.752-9.1-5.25-12.598l-58.136-58.136 58.136-58.137c3.498-3.498 5.248-7.699 5.25-12.597-.002-4.898-1.75-9.096-5.253-12.599l-18.095-18.095c-3.499-3.499-7.698-5.25-12.597-5.25-4.9 0-9.1 1.751-12.597 5.25l-58.137 58.136-58.14-58.14c-3.499-3.499-7.698-5.25-12.598-5.25s-9.096 1.749-12.596 5.25L99.222 117.31c-3.501 3.501-5.25 7.698-5.248 12.595-.001 4.9 1.75 9.099 5.248 12.597l58.141 58.14-58.145 58.146c-3.498 3.498-5.251 7.7-5.25 12.598.002 4.898 1.753 9.096 5.252 12.594l18.097 18.098c3.501 3.5 7.698 5.25 12.596 5.253 4.9 0 8.894-1.971 12.598-5.25l58.145-58.145 58.135 58.135c3.502 3.501 7.7 5.252 12.599 5.25 4.897.002 9.094-1.746 12.596-5.247l18.098-18.098c3.5-3.501 5.251-7.698 5.249-12.597z"/></g></svg>
\ No newline at end of file
diff --git a/prive/themes/spip/style_prive.css.html b/prive/themes/spip/style_prive.css.html
index 5445820293..a35d3286a6 100644
--- a/prive/themes/spip/style_prive.css.html
+++ b/prive/themes/spip/style_prive.css.html
@@ -27,12 +27,26 @@ Valeurs par defaut :
*/
[(#REM) les vieux styles a evacuer en premier, ca permet qu'ils ne polluent pas en cas de double definition]
-
-
[(#INCLURE{#VAL{clear.css}|find_in_theme|direction_css{#GET{dir}}|substr{#CONST{_DIR_RACINE}|strlen}})]
[(#INCLURE{#VAL{layout.css}|find_in_theme|direction_css{#GET{dir}}|substr{#CONST{_DIR_RACINE}|strlen}})]
-<BOUCLE_css(POUR){tableau #LISTE{typo.css,grids.css,bando.css,icons.css,lists.css,forms.css,picker.css,box_skins.css,jquery-ui.css,content.css,exceptions.css,theme.css}}>
+[(#REM) Les modules ]
+#SET{modules,#LISTE{
+ typo.css,
+ grids.css,
+ bando.css,
+ boutons.css,
+ icons.css,
+ lists.css,
+ forms.css,
+ picker.css,
+ box_skins.css,
+ jquery-ui.css,
+ content.css,
+ exceptions.css,
+ theme.css,
+}}
+<BOUCLE_css(POUR){tableau #GET{modules}}>
[(#SET{fond,[(#VALEUR|concat{.html}|find_in_theme|substr{[(#CONST{_DIR_RACINE}|strlen)],[(#VAL{-5}|intval)]})]})]
/*
* #VALEUR::[(#GET{fond})]
diff --git a/prive/themes/spip/theme.css.html b/prive/themes/spip/theme.css.html
index 5bf1a77e70..a2fa245845 100644
--- a/prive/themes/spip/theme.css.html
+++ b/prive/themes/spip/theme.css.html
@@ -113,21 +113,17 @@ h1 {font-size: 2em;line-height: 125%;}
.liste-objets table tr td {line-height: 120%;}
.liste-objets-lies.auteurs thead {display: none;}
.liste-objets-lies.mots thead {display: none;}
-.icone {line-height: 120%;}
+
.en-edition {line-height: 120%;}
div.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}
h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px;}
-.icone a img {-moz-transition-property:background-color;-webkit-transition-property:background-color;-khtml-transition-property:background-color;-ms-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color;-moz-transition-duration:0.2s;-webkit-transition-duration:0.2s;-khtml-transition-duration:0.2s;-ms-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;border: 0;background-color: #eee;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding: 7px;position:relative;}
-.icone a:hover img {background-color: #aaa;}
-.icone .submit img {-moz-transition-property:background-color;-webkit-transition-property:background-color;-khtml-transition-property:background-color;-ms-transition-property:background-color;-o-transition-property:background-color;transition-property:background-color;-moz-transition-duration:0.2s;-webkit-transition-duration:0.2s;-khtml-transition-duration:0.2s;-ms-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;border: 0;background-color: #eee;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;padding: 7px;position:relative;}
-.icone .submit:hover img {background-color: #aaa;}
+
.lat .formulaire_spip {border-color: #ENV{claire};line-height: 120%;}
.lat .formulaire_spip h3.titrem {background-color: #ENV{claire};color: #444;padding-top: 5px;padding-bottom: 5px;}
.lat .formulaire_spip input.text {font-size: 0.9em;line-height: 125%;padding: 3px;}
.lat .formulaire_spip input.password {font-size: 0.9em;line-height: 125%;padding: 3px;}
.lat .formulaire_spip textarea {font-size: 0.9em;line-height: 125%;padding: 3px;}
-.lat .formulaire_spip p.boutons input.submit {padding: 2px 5px;}
.formulaire_spip {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:relative;}
.formulaire_spip h3.titrem {background-color: #ENV{foncee};color: white;}
@@ -167,12 +163,8 @@ h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px
.formulaire_spip .choix:first-of-type {-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;border-top: 1px solid #ddd;position:relative;}
.formulaire_spip span.choix,.formulaire_spip span.choix:first-of-type,.formulaire_spip span.choix:last-of-type,.formulaire_spip span.choix:last-child{display:inline-block;background: transparent;padding: 0;border:0;}
.formulaire_spip .boutons {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;position:relative;}
-.formulaire_spip .submit,.bouton_action_post .submit {font: inherit;font-weight: normal;background-color: #ENV{claire};color: #[(#ENV{foncee}|couleur_luminance{0.9})];-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border: 0;padding: 1px 5px;font-size: 90%;position:relative;margin-bottom:3px;}
+
.actions a.editbox {display:inline-block;}
-.icone.horizontale.bouton_action_post .submit {position:static;background: transparent;text-align:#GET{left};}
-.formulaire_spip .submit:hover,.bouton_action_post .submit:hover {background-color: #[(#ENV{foncee}|couleur_luminance{0.9})];color: white;position:relative; text-decoration: none;}
-.formulaire_spip .submit:focus,.bouton_action_post .submit:focus {background-color: #[(#ENV{foncee}|couleur_luminance{0.9})];color: white;position:relative;}
-.formulaire_spip .submit:active,.bouton_action_post .submit:active {background-color: #[(#ENV{foncee}|couleur_luminance{0.7})];}
.formulaire_spip .toggle_box_link {-webkit-opacity:0.6;-moz-opacity:0.6;opacity:0.6;filter:alpha(opacity=60);;z-index: 1;font-size: 10px;color: #GET{lien};}
.formulaire_spip .toggle_box_link button {font-size: 10px;color: #GET{lien};}
.formulaire_spip:hover .toggle_box_link {-webkit-opacity:1.0;-moz-opacity:1.0;opacity:1.0;filter:alpha(opacity=100);}
@@ -243,12 +235,7 @@ h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px
.fiche_objet .formulaire_spip.formulaire_dater label {font-size: 85%;font-weight: normal;}
.fiche_objet .formulaire_spip.formulaire_dater input.text {padding-top: 3px;padding-bottom: 3px;}
.fiche_objet .formulaire_spip.formulaire_dater p.boutons {-webkit-border-radius:0px;-moz-border-radius:0px;border-radius:0px;margin: 0px -15px -10px -15px;;position:relative;}
-.onglets_simple ul li strong {-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;position:relative;}
-.onglets_simple ul li a {-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;position:relative;}
-.onglets_simple ul li strong {background-color: transparent;border-bottom-color: #f9f9f9;}
-.onglets_simple ul li a {-webkit-opacity:0.7;-moz-opacity:0.7;opacity:0.7;filter:alpha(opacity=70);}
-.onglets_simple ul li a:hover {-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);}
-.onglets_simple ul li a:focus {-webkit-opacity:1;-moz-opacity:1;opacity:1;filter:alpha(opacity=100);}
+
.infos .instituer_objet {border: 0px;}
.en-edition {font-size: 95%;line-height: 120%;}
@@ -257,18 +244,6 @@ h3.titrem {font-size: 1em;line-height: 125%;padding-top: 7px;padding-bottom: 7px
.en-edition .bd .liste-items {border-top: 1px solid white;}
.en-edition .bd .liste-items li {border-bottom: 1px solid white;padding-left: 10px;padding-right: 10px;}
-.barre_onglet ul li {margin-right: 0px;border-left-width: 0px;border-color: #eee;}
-.barre_onglet ul li strong.on {background-color: #ENV{foncee};}
-.barre_onglet ul li:first-child strong.on {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;}
-.barre_onglet ul li:last-child strong.on {-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;}
-.barre_onglet ul li a {background-color: #eee;}
-.barre_onglet ul li a:hover {background-color: white;background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);background-image: -moz-linear-gradient(top, #ffffff, #ffffff);background-image: -ms-linear-gradient(top, #ffffff, #ffffff);background-image: -o-linear-gradient(top, #ffffff, #ffffff);background-image: linear-gradient(top, #ffffff, #ffffff);color: #[(#ENV{foncee}|couleur_luminance{0.7})];filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ffffff');}
-.barre_onglet ul li a:focus {background-color: white;background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff));background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);background-image: -moz-linear-gradient(top, #ffffff, #ffffff);background-image: -ms-linear-gradient(top, #ffffff, #ffffff);background-image: -o-linear-gradient(top, #ffffff, #ffffff);background-image: linear-gradient(top, #ffffff, #ffffff);color: #[(#ENV{foncee}|couleur_luminance{0.7})];filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#ffffff', endColorstr='#ffffff');}
-.barre_onglet ul> li:first-child {border-left-width: 1px;}
-.barre_onglet ul> li:first-child {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;position:relative;}
-.barre_onglet ul> li:first-child a {-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomleft:5px;border-bottom-left-radius:5px;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;position:relative;}
-.barre_onglet ul> li:last-child {-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;position:relative;}
-.barre_onglet ul> li:last-child a {-webkit-border-bottom-right-radius:5px;-moz-border-radius-bottomright:5px;border-bottom-right-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;position:relative;}
#portfolios h3 {padding: 7px 10px;background-color: #ENV{foncee};color: white;-webkit-border-top-left-radius:5px;-moz-border-radius-topleft:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;-moz-border-radius-topright:5px;border-top-right-radius:5px;position:relative;}
.navigation .sous_navigation .item {padding: 0px;}
--
GitLab