From cde95f132aab43f141129d8dc4607cc11e2d8389 Mon Sep 17 00:00:00 2001
From: Cerdic <cedric@yterium.com>
Date: Thu, 22 Apr 2021 09:42:55 +0200
Subject: [PATCH] Revert multiples :
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Revert "Présentation des sous-rubriques (vignettes + grosses)"
This reverts commit 1847b1dc4f53480b52e7419f4b668563f790f364
Revert "Titres des boîtes et formulaires un peu plus grands et plus épais pour mieux distinguer du contenu (nicod_)"
This reverts commit 96fe7ab9cb8fb77c0a3951526b47a47a77198771.
Revert "Dans la page maintenance, utiliser une alerte plutôt qu'une boîte pour le message relatif au htaccess (#4727)."
This reverts commit 81ead9eb59dcfb206468fc9aed12fbf9e12b93d6.
Revert "Introduction d'une balise `#ALERTE` dédiée aux messages d'alerte de l’espace privé (#4727)."
This reverts commit 986fc9dbe98d9bd2dea7020f43598e8cac4e300c.
Revert "Refacto des styles des messages d'alerte de l’espace privé (#4727)."
This reverts commit e078f2d7123ee000c6a19878f332a374240227e4.
Revert "Ajustements des styles des formulaires pour suivre la refonte des boîtes + quelques détails (#4727)"
This reverts commit b5068f84ecbbcd765c9a7d77f966a435e09b6e2c.
Revert "Refacto des styles des boîtes de l'espace privé (#4727)."
This reverts commit 18df0352b120956cce97d65e364fb0a23d30eaa7.
---
ecrire/inc/filtres_alertes.php | 239 ---------
ecrire/inc/filtres_ecrire.php | 1 -
ecrire/inc/presentation.php | 1 -
ecrire/inc/presenter_enfants.php | 7 +-
prive/squelettes/contenu/admin_tech.html | 6 +-
prive/themes/spip/alertes.css.html | 236 ---------
prive/themes/spip/box_skins.css.html | 645 +++++------------------
prive/themes/spip/forms.css.html | 139 +++--
prive/themes/spip/images/info-xx.svg | 1 -
prive/themes/spip/style_prive.css.html | 1 -
prive/themes/spip/theme.css.html | 22 +
11 files changed, 236 insertions(+), 1062 deletions(-)
delete mode 100644 ecrire/inc/filtres_alertes.php
delete mode 100644 prive/themes/spip/alertes.css.html
delete mode 100644 prive/themes/spip/images/info-xx.svg
diff --git a/ecrire/inc/filtres_alertes.php b/ecrire/inc/filtres_alertes.php
deleted file mode 100644
index 08c9b499fc..0000000000
--- a/ecrire/inc/filtres_alertes.php
+++ /dev/null
@@ -1,239 +0,0 @@
-<?php
-
-/***************************************************************************\
- * SPIP, Système de publication pour l'internet *
- * *
- * Copyright © avec tendresse depuis 2001 *
- * Arnaud Martin, Antoine Pitrou, Philippe Rivière, Emmanuel Saint-James *
- * *
- * Ce programme est un logiciel libre distribué sous licence GNU/GPL. *
- * Pour plus de détails voir le fichier COPYING.txt ou l'aide en ligne. *
-\***************************************************************************/
-
-/**
- * Ce fichier regroupe la gestion des filtres et balises générant
- * le HTML des messages d'alerte.
- *
- * @package SPIP\Core\Compilateur\Filtres
- **/
-
-if (!defined('_ECRIRE_INC_VERSION')) {
- return;
-}
-
-/**
- * Compile la balise `#ALERTE` produisant le HTML d'un message d'alerte complet.
- *
- * @package SPIP\Core\Compilateur\Balises
- * @balise
- * @example
- * ```
- * #ALERTE{message[,titre][,classes][,role][,id]}
- * [(#ALERTE{<:chaine_langue:>, <:chaine_langue:>, notice, status, mon_alerte})]
- * ```
- *
- * @param Champ $p
- * Pile au niveau de la balise
- * @return Champ
- * Pile complétée par le code à générer
- */
-function balise_ALERTE_dist($p) {
- $_texte = interprete_argument_balise(1, $p);
- $_titre = interprete_argument_balise(2, $p);
- $_class = interprete_argument_balise(3, $p);
- $_role = interprete_argument_balise(4, $p);
- $_id = interprete_argument_balise(5, $p);
- $_titre = ($_titre ? ", $_titre" : "''");
- $_class = ($_class ? ", $_class" : ", ''");
- $_role = ($_role ? ", $_role" : ", ''");
- $_id = ($_id ? ", $_id" : ", ''");
-
- $f = chercher_filtre('message_alerte');
- $p->code = "$f($_texte$_titre$_class$_role$_id)";
- $p->interdire_scripts = false;
-
- return $p;
-}
-
-/**
- * Compile la balise `#ALERTE_OUVRIR` produisant le HTML ouvrant d'un message d’alerte
- *
- * Doit être suivie du texte de l'alerte, puis de la balise `#ALERTE_FERMER`.
- *
- * @package SPIP\Core\Compilateur\Balises
- * @balise
- * @see balise_ALERTE_FERMER_dist() Pour clôturer une alerte
- * @example
- * ```
- * #ALERTE_OUVRIR{titre[,classes][,role][,id]}
- * [(#ALERTE_OUVRIR{<:chaine_langue:>, notice, status, mon_alerte})]
- * ```
- *
- * @param Champ $p
- * Pile au niveau de la balise
- * @return Champ
- * Pile complétée par le code à générer
- */
-function balise_ALERTE_OUVRIR_dist($p) {
- $_titre = interprete_argument_balise(1, $p);
- $_class = interprete_argument_balise(2, $p);
- $_role = interprete_argument_balise(3, $p);
- $_id = interprete_argument_balise(4, $p);
- $_titre = ($_titre ? "$_titre" : "''");
- $_class = ($_class ? ", $_class" : ", ''");
- $_role = ($_role ? ", $_role" : ", ''");
- $_id = ($_id ? ", $_id" : ", ''");
-
- $f = chercher_filtre('message_alerte_ouvrir');
- $p->code = "$f($_titre$_class$_role$_id)";
- $p->interdire_scripts = false;
-
- return $p;
-}
-
-/**
- * Compile la balise `#ALERTE_FERMER` produisant le HTML clôturant un message d’alerte
- *
- * Doit être précédée du texte de l'alerte et de la balise `#ALERTE_OUVRIR`.
- *
- * @package SPIP\Core\Compilateur\Balises
- * @balise
- * @see balise_ALERTE_OUVRIR_dist() Pour ouvrir une alerte
- * @example
- * ```
- * #ALERTE_FERMER
- * ```
- *
- * @param Champ $p
- * Pile au niveau de la balise
- * @return Champ
- * Pile complétée par le code à générer
- */
-function balise_ALERTE_FERMER_dist($p) {
- $f = chercher_filtre('message_alerte_fermer');
- $p->code = "$f()";
- $p->interdire_scripts = false;
-
- return $p;
-}
-
-/**
- * Générer un message d’alerte
- *
- * Peut-être surchargé par `filtre_message_alerte_dist` ou `filtre_message_alerte`
- *
- * @filtre
- * @see balise_ALERTE_dist() qui utilise ce filtre
- * @see message_alerte_ouvrir()
- * @see message_alerte_fermer()
- * @param string $texte
- * Contenu de l'alerte
- * @param string $titre
- * Titre de l'alerte : texte simple, <hn> ou autre.
- * @param string $class
- * Classes CSS ajoutées au conteneur
- * Doit contenir le type : `notice`, `error`, `success`, `info`
- * @param string $role
- * Attribut rôle ajouté au conteneur : `alert` ou `status`, selon l'importance
- * @param string $id
- * Identifiant HTML du conteneur
- * @return string
- * HTML de l'alerte
- */
-function message_alerte(string $texte, string $titre = '', string $class = '', string $role = '', string $id = '') : string {
-
- $message_alerte_ouvrir = chercher_filtre('message_alerte_ouvrir');
- $message_alerte_fermer = chercher_filtre('message_alerte_fermer');
- $message =
- $message_alerte_ouvrir($titre, $class, $role, $id) .
- $texte .
- $message_alerte_fermer();
-
- return $message;
-}
-
-/**
- * Ouvrir un message d’alerte
- *
- * Peut-être surchargé par `filtre_message_alerte_ouvrir_dist` ou `filtre_message_alerte_ouvrir`
- *
- * @filtre
- * @see balise_ALERTE_OUVRIR_dist() qui utilise ce filtre
- * @param string $titre
- * Titre de l'alerte : texte simple, <hn> ou autre.
- * @param string $class
- * Classes CSS ajoutées au conteneur
- * Doit contenir le type : `notice`, `error`, `success`, `info`
- * Défaut = `notice`
- * @param string $role
- * Attribut role ajouté au conteneur : `alert` ou `status`, selon l'importance
- * Défaut = `alert`
- * @param string $id
- * Identifiant HTML du conteneur
- * @return string
- * HTML d'ouverture de l'alerte
- */
-function message_alerte_ouvrir(string $titre = '', string $class = '', string $role = '', string $id = '') : string {
-
- $prive = test_espace_prive();
-
- // Type d'alerte : le chercher dans les classes, nettoyer celles-ci, puis le réinjecter
- $types = [
- 'notice',
- 'error',
- 'success',
- 'info',
- ];
- $type = array_shift(array_intersect(explode(' ', $class), $types));
- $type = $type ?: 'notice';
- $class = trim(str_replace($types, '', $class) . " $type");
-
- // Role
- $role = $role ?: 'alert';
-
- // Classes
- $class_racine = 'msg-alert';
- $clearfix = ($prive ? 'clearfix' : '');
- $class_alerte = "$class_racine $class";
- $class_texte = "${class_racine}__text $clearfix";
- $class_titre = "${class_racine}__heading";
-
- // Titre : markup
- $titre = trim($titre);
- if (strlen($titre)) {
- include_spip('inc/filtres');
- // Si besoin on encapsule le titre : un h3 dans le privé, un simple div sinon.
- $cherche_tag = ($prive ? '<h' : '<');
- $wrap_tag = ($prive ? '<h3>' : '<div>');
- if (strpos($titre, $cherche_tag) !== 0) {
- $titre = wrap($titre, $wrap_tag);
- }
- // puis on ajoute la classe
- $titre = ajouter_class($titre, $class_titre);
- }
-
- // Autres attributs
- $attr_id = ($id ? "id=\"$id\"" : '');
- $attr_data = ($type ? "data-$role=\"$type\"" : '');
-
- $message =
- "<div class=\"$class_alerte\" role=\"$role\" $attr_id $attr_data>" .
- $titre .
- "<div class=\"$class_texte\">";
-
- return $message;
-}
-
-/**
- * Fermer un message d’alerte
- *
- * Peut-être surchargé par `filtre_message_alerte_fermer_dist` ou `filtre_message_alerte_fermer`
- *
- * @filtre
- * @see balise_ALERTE_FERMER_dist() qui utilise ce filtre
- * @return string
- * HTML de fin de l'alerte
- */
-function message_alerte_fermer() : string {
- return '</div></div>';
-}
diff --git a/ecrire/inc/filtres_ecrire.php b/ecrire/inc/filtres_ecrire.php
index eb6135520d..02bcbb8808 100644
--- a/ecrire/inc/filtres_ecrire.php
+++ b/ecrire/inc/filtres_ecrire.php
@@ -20,7 +20,6 @@ if (!defined('_ECRIRE_INC_VERSION')) {
}
include_spip('inc/filtres_boites');
-include_spip('inc/filtres_alertes');
include_spip('inc/boutons');
include_spip('inc/pipelines_ecrire');
diff --git a/ecrire/inc/presentation.php b/ecrire/inc/presentation.php
index df50259cba..bc954d40b1 100644
--- a/ecrire/inc/presentation.php
+++ b/ecrire/inc/presentation.php
@@ -28,7 +28,6 @@ include_spip('inc/actions');
include_spip('inc/puce_statut');
include_spip('inc/filtres_ecrire');
include_spip('inc/filtres_boites');
-include_spip('inc/filtres_alertes');
// https://code.spip.net/@debut_cadre
function debut_cadre($style, $icone = "", $fonction = "", $titre = "", $id = "", $class = "", $padding = true) {
diff --git a/ecrire/inc/presenter_enfants.php b/ecrire/inc/presenter_enfants.php
index 4da296a815..afb7c00e2e 100644
--- a/ecrire/inc/presenter_enfants.php
+++ b/ecrire/inc/presenter_enfants.php
@@ -68,7 +68,7 @@ function enfant_rub($collection, $debut = 0, $limite = 500) {
if ($voir_logo) {
if ($logo = $chercher_logo($id_rubrique, 'id_rubrique', 'on')) {
list($fid, $dir, $nom, $format) = $logo;
- $logo = image_reduire("<img src='$fid' alt='' />", 70, 70);
+ $logo = image_reduire("<img src='$fid' alt='' />", 48, 36);
if ($logo) {
$logo = inserer_attribut($logo, 'class', 'logo');
}
@@ -91,12 +91,11 @@ function enfant_rub($collection, $debut = 0, $limite = 500) {
'</a>';
$titre = (is_string($logo) ? $logo : '') .
- bouton_block_depliable($lib_bouton, $les_sous_enfants ? false : -1, "enfants$id_rubrique")
- .(!$descriptif ? '' : "\n<div class='descriptif'>$descriptif</div>")
- ;
+ bouton_block_depliable($lib_bouton, $les_sous_enfants ? false : -1, "enfants$id_rubrique");
$res[] =
debut_cadre_sous_rub(($id_parent ? 'rubrique-24.png' : 'secteur-24.png'), true, '', $titre) .
+ (!$descriptif ? '' : "\n<div class='descriptif'>$descriptif</div>") .
$les_sous_enfants .
fin_cadre_sous_rub(true);
}
diff --git a/prive/squelettes/contenu/admin_tech.html b/prive/squelettes/contenu/admin_tech.html
index 0881ad1de2..f75a912d0f 100644
--- a/prive/squelettes/contenu/admin_tech.html
+++ b/prive/squelettes/contenu/admin_tech.html
@@ -8,16 +8,18 @@
]
[(#CONST{_DIR_TMP}|verifier_htaccess{1}|et{#CONST{_DIR_CONNECT}|verifier_htaccess{1}}|non)
- [(#ALERTE_OUVRIR{<:htaccess_inoperant:>,'notice'})]
+ #BOITE_OUVRIR{#VAL{htaccess_inoperant}|_T|wrap{'<h3>'},'notice','titrem'}
[(#SET{htaccess,[<tt>(#CONST{_ACCESS_FILE_NAME})</tt>]})]
[(#SET{constantes,<tt>_DIR_TMP & _DIR_CONNECT</tt>})]
[(#SET{document_root,[<tt>(#EVAL{table_valeur($_SERVER,'DOCUMENT_ROOT')})</tt>]})]
<p><:htaccess_a_simuler{htaccess=#GET{htaccess},constantes=#GET{constantes},document_root=#GET{document_root}}:></p>
- #ALERTE_FERMER
+ #BOITE_FERMER
]
+
+
[(#AUTORISER{reparer,base})
<!--reparer_base-->
#BOITE_OUVRIR{#VAL{texte_recuperer_base}|_T|wrap{'<h3>'},'simple','titrem'}
diff --git a/prive/themes/spip/alertes.css.html b/prive/themes/spip/alertes.css.html
deleted file mode 100644
index 387f8baad8..0000000000
--- a/prive/themes/spip/alertes.css.html
+++ /dev/null
@@ -1,236 +0,0 @@
-#CACHE{0}
-[(#REM)
-
- Ce squelette définit les styles des messages d'alerte de l'espace privé.
-
- Ce composant correspond aux balises #ALERTE et cie.
-
- On maintient pour un temps la compat avec les vieux .notice, .error et .success
- qui pourraient se ballader dans la nature, mais leur utilisation est dépréciée.
-
- Organisation du fichier :
-
- 0. Variables
- 1. Habillage de base
- 2. Variantes principales
- 3. Autres variantes
-
- Markup :
-
- .msg-alert[.type][.simple]
- .msg-alert__heading
- .msg-alert__text
-
-<style>]
-#CACHE{3600*100,cache-client}
-#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
-#HTTP_HEADER{Vary: Accept-Encoding}
-
-
-/**
- * ============
- * 0. Variables
- * ============
- */
-
-
-/* Nb : la media-query au début sinon pb */
-@media (min-width: 768px) {
- :root {
- --spip-alert-spacing-x: 1.25em;
- --spip-alert-spacing-y: 1.25em;
- --spip-alert-iconsize: 1.25em;
- --spip-alert-closesize: 1.25em;
- }
-}
-:root {
- --spip-alert-spacing-x: 0.75em;
- --spip-alert-spacing-y: 0.75em;
- --spip-alert-border-radius: var(--spip-border-radius);
- --spip-alert-iconsize: 1.25em;
- --spip-alert-closesize: 1em;
-}
-.lat .msg-alert,
-.msg-alert.mini {
- --spip-alert-spacing-x: 0.75em;
- --spip-alert-spacing-y: 0.75em;
- --spip-alert-iconsize: 1em;
- --spip-alert-closesize: 1em;
-}
-.msg-alert.large,
-.formulaire_spip .reponse_formulaire {
- --spip-alert-spacing-x: 1.5em;
- --spip-alert-spacing-y: 1.5em;
- --spip-alert-iconsize: 1.5em;
- --spip-alert-closesize: 1.25em;
-}
-
-
-/**
- * ====================
- * 1. Habillage de base
- * ====================
- */
-
-
- /* Conteneur */
-.msg-alert,
-.msg-alert * {
- box-sizing: border-box;
-}
-.msg-alert,
-.notice, .error, .success,
-.formulaire_spip .reponse_formulaire {
- position: relative;
- padding: var(--spip-alert-spacing-y) var(--spip-alert-spacing-x);
- padding-left: calc((var(--spip-alert-spacing-x) * 2) + var(--spip-alert-iconsize));
- margin: calc(var(--spip-margin-bottom) * 1.5) 0; /* Idem boîtes */
- background-repeat: no-repeat;
- /* Aligner icône au niveau de la 1ère ligne de texte */
- background-position: var(--spip-alert-spacing-x) calc(var(--spip-alert-spacing-y) - ((var(--spip-alert-iconsize) - var(--spip-line-height)) / 2));
- background-size: var(--spip-alert-iconsize);
- font-weight: normal;
- border-radius: var(--spip-border-radius);
- background-color: var(--spip-color-gray-lighter);
- box-shadow: inset 0 0 1.5em hsla(0, 0%, 0%, 0.02);
- border: 0;
-}
-
-/* Titre */
-.msg-alert__heading {
- font-size: 1em;
- font-weight: bold;
- margin-bottom: calc(var(--spip-alert-spacing-y) / 2);
-}
-
-/* Rythme vertical des principauxs éléments blocks du texte */
-.msg-alert__text p,
-.msg-alert__text ul,
-.msg-alert__text blockquote,
-.msg-alert__text table {
- margin-bottom: calc(var(--spip-alert-spacing-y) / 2);
-}
-.msg-alert__text > *:last-child {
- margin-bottom: 0 !important; /* obligé car sélecteurs trop spécifiques ailleurs (#conteneur ul.spip) */
-}
-
-/* Liens */
-.msg-alert a {
- color: var(--spip-color-black);
- text-decoration: underline;
-}
-
-/* Code */
-.msg-alert tt,
-.msg-alert code {
- color: var(--spip-color-black);
-}
-
-
-/**
- * ========================
- * 2. Variantes principales
- * ========================
- */
-
-
-/* Notice */
-.msg-alert.notice,
-.notice {
- color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 18%);
- background-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 85%);
- background-image: url(#CHEMIN_IMAGE{warning-24.png});
-}
-
-/* Erreur */
-.msg-alert.error,
-.formulaire_spip .reponse_formulaire_erreur,
-.error {
- color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 18%);
- background-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 90%);
- background-image: url(#CHEMIN_IMAGE{erreur-24.png});
-}
-
-/* Succès */
-.msg-alert.success,
-.formulaire_spip .reponse_formulaire_ok,
-.success {
- color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 15%);
- background-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 85%);
- background-image: url(#CHEMIN_IMAGE{ok-24.png});
-}
-
-/* Information */
-.msg-alert.info,
-.information {
- color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 25%);
- background-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 92%);
- background-image: url(#CHEMIN_IMAGE{info-24.png});
-}
-
-
-/**
- * ===================
- * 3. Autres variantes
- * ===================
- * Ces variantes peuvent se conjuguer aux variantes principales : .notice.mini, .error.simple, etc.
- */
-
-
-/* Simple = juste une bordure */
-.msg-alert.simple {
- border: 2px solid hsla(0, 0%, 0%, 0.1);
- box-shadow: none;
-}
-.msg-alert.notice.simple {
- border-color: hsl(var(--spip-color-notice--h), 100%, 48%);
- background-color: transparent;
-}
-.msg-alert.error.simple {
- border-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
- background-color: transparent;
-}
-.msg-alert.success.simple {
- border-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 50%);
- background-color: transparent;
-}
-.msg-alert.info.simple {
- border-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 75%);
- background-color: transparent;
-}
-
-/* Variante mini, automatique en colonne latérale : voir variables */
-.msg-alert.mini,
-.lat .msg-alert {
- font-size: 0.9em;
- margin: calc(var(--spip-margin-bottom) * 0.75) 0; /* Moitié */
-}
-
-/* Variante large : voir variables */
-.msg-alert.large,
-.formulaire_spip .reponse_formulaire {}
-
-/* Variante fermable */
-.msg-alert.fermable {
- padding-#RIGHT: calc((var(--spip-alert-spacing-x) * 2) + 1.5em);
-}
-.msg-alert__close {
- width: var(--spip-alert-closesize);
- height: var(--spip-alert-closesize);
- position: absolute;
- z-index: 2;
- /* Aligner icône au niveau de la 1ère ligne de texte */
- top: calc(var(--spip-alert-spacing-y) + (var(--spip-line-height) - var(--spip-alert-closesize)));
- /* top: var(--spip-alert-spacing-y); */
- #RIGHT: var(--spip-alert-spacing-x);
- padding: 0;
- background: transparent url("[(#CHEMIN_IMAGE{fermer-16.png})]") center/1em auto no-repeat;
- background-size: contain;
- border: 0;
- opacity: 0.75;
-}
-.msg-alert__close:hover,
-.msg-alert__close:focus {
- opacity: 1;
- background-color: transparent;
-}
diff --git a/prive/themes/spip/box_skins.css.html b/prive/themes/spip/box_skins.css.html
index 34b3f0ef0b..9071bbcdde 100644
--- a/prive/themes/spip/box_skins.css.html
+++ b/prive/themes/spip/box_skins.css.html
@@ -1,533 +1,126 @@
[(#REM)
- Ce squelette définit les styles des boîtes de l'espace privé.
-
- Ce composant correspond aux balises #BOITE_OUVRIR et cie.
-
- L'entête et le pied sont optionnels.
- Les boîtes simples reprennent un style proche des formulaires.
-
- Organisation du fichier :
-
- 0. Variables
- 1. Base lib
- 2. Layout et rythme vertical
- 3. Base graphique commune
- 4. Variantes principales
- 5. Variantes d'états
- 6. Autres variantes
- 7. Cas particuliers
- 8. Déprécations
-
- Markup :
-
- .box
- .inner
- .hd (header)
- .bd (body)
- .ft (footer)
-
-<style>]
+ 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>
+]
#CACHE{3600*100,cache-client}
#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
#HTTP_HEADER{Vary: Accept-Encoding}
-
-/**
- * ============
- * 0. Variables
- * ============
- */
-
-
-/* Nb : la media-query au début sinon pb */
-@media (min-width: 768px) {
- :root {
- --spip-box-iconsize: 32px;
- --spip-box-highlightsize: 1.5em;
- }
-}
-/* On reprend certaines valeurs des formulaires pour harmoniser */
-:root {
- /* base pour les espacements internes */
- --spip-box-spacing-x: var(--spip-form-spacing-x);
- --spip-box-spacing-y: var(--spip-form-spacing-y);
- /* couleurs */
- --spip-box-sep-color: hsla(0, 0%, 0%, 0.125);
- --spip-box-border-color: hsla(0, 0%, 0%, 0.125); /* bordure basique */
- --spip-box-sep-color-inverse: hsla(0, 0%, 100%, 0.1);
- /* divers */
- --spip-box-border-radius: var(--spip-form-border-radius);
- --spip-box-iconsize: 24px;
- --spip-box-highlightsize: 1em; /* largeur bordure colorée sur boîtes d'états */
-}
-.lat .box,
-.box.mini {
- --spip-box-iconsize: 24px;
- --spip-box-highlightsize: 1em;
- /* Obligé de reprendre à la main les mêmes valeurs que les forms */
- --spip-box-spacing-x: 0.75em;
- --spip-box-spacing-y: 0.75em;
-}
-
-
-/**
- * ===========
- * 1. Base lib
- * ===========
- */
[(#INCLURE{prive/themes/spip/box.css})]
-
-
-/**
- * ============================
- * 2. Layout et rythme vertical
- * ============================
- */
-
-
-.box,
-.box * {
- box-sizing: border-box;
-}
-
-/* La marge externe doit être identique entre plusieurs composants (formulaires, …).
- Plus tard il faudra se baser sur spip-spacing-y quand ça sera au point.
- Pour l'instant on laisse la valeur historique. */
-.box {
- margin: calc(var(--spip-margin-bottom) * 1.5) 0;
-}
-.box .inner {
- position: relative;
-}
-/* Même padding partout, sauf footer */
-.box .bd, .box .hd, .box .ft {
- position: relative;
- padding: var(--spip-box-spacing-y) var(--spip-box-spacing-x);
-}
-.box .ft {
- padding-top: calc(var(--spip-box-spacing-y) / 2);
- padding-bottom: calc(var(--spip-box-spacing-y) / 2);
-}
-/* Annuler marges inutiles au début et à la fin */
-.box .bd > :first-child,
-.box .bd > :first-child > :first-child {
- margin-top: 0;
-}
-.box .bd > :last-child {
- margin-bottom: 0;
-}
-.box .hd h1, .box .hd h2, .box .hd h3, .box .hd h4, .box .hd h5, .box .hd h6 {
- margin-bottom: 0;
-}
-.box .ft .btn,
-.box .ft button,
-.box .ft .groupe-btns {
- margin-bottom: 0;
-}
-
-
-/**
- * =========================
- * 3. Base graphique commune
- * =========================
- *
- * Nb : les styles s’appliquent au .inner, pas sur le .box lui-même.
- */
-
-
-/* Conteneur interne */
-.box .inner {
- background-color: var(--spip-color-white);
- transition: box-shadow 0.2s;
- border-radius: var(--spip-box-border-radius);
- border: 0;
- box-shadow: var(--spip-box-shadow);
-}
-.box .inner:hover,
-.box .inner:focus-within {
- box-shadow: var(--spip-box-shadow-hover);
-}
-
-/* Header */
-.box .hd {
- border-top-left-radius: inherit;
- border-top-right-radius: inherit;
- border-bottom: 1px solid var(--spip-box-sep-color);
-}
-
-/* Body : sans titre et/ou sans footer, ajuster l'arrondi */
-.box .bd:first-child {
- border-top-left-radius: var(--spip-box-border-radius);
- border-top-right-radius: var(--spip-box-border-radius);
-}
-.box .bd:only-child {
- border-bottom-left-radius: var(--spip-box-border-radius);
- border-bottom-right-radius: var(--spip-box-border-radius);
-}
-
-/* Footer */
-.box .ft {
- border-bottom-left-radius: inherit;
- border-bottom-right-radius: inherit;
- background-color: var(--spip-color-gray-lightest);
- text-align: var(--spip-right);
-}
-
-/* Titres
- Règle : avec le h3 par défaut on raccorde avec les titres des formulaires (taille, graisse, …).
- Si on veut forcer avec une autre balise (h2…), utilisez la variante .titrem sur le header. */
-.box .hd h3,
-.box .hd.titrem h1, .box .hd.titrem h2, .box .hd.titrem h3, .box .hd.titrem h4, .box .hd.titrem h5, .box .hd.titrem h6,
-.formulaire_spip .titrem {
- font-size: calc(1em * var(--spip-form-titrem-factor));
- font-weight: 800;
- /* color: var(--spip-color-theme-dark); */
-}
-
-/* En colonne latérale (+ voir variables au début) */
-.lat .box {
- font-size: 0.95em;
-}
-.lat .box .hd h1, .lat .box .hd h2, .lat .box .hd h3, .lat .box .hd h4, .lat .box .hd h5, .lat .box .hd h6,
-.lat .formulaire_spip .titrem {
- font-size: 1em;
-}
-
-
-/**
- * ========================
- * 4. Variantes principales
- * ========================
- */
-
-
-/* Simple */
-.box.simple .inner {
- background-color: var(--spip-color-white);
-}
-
-/* Info */
-.box.info .inner {
- border: 3px solid var(--spip-color-theme-light);
- background-color: var(--spip-color-white);
-}
-
-/* Note */
-.box.note .inner {
- border: 3px solid var(--spip-color-theme-lighter);
- background-color: var(--spip-color-theme-lightest);
-}
-
-/* Raccourcis */
-.box.raccourcis .inner {
- border-bottom: 1px solid hsla(0, 0%, 0%, 0.1);
- background-color: var(--spip-color-gray-lighter);
-}
-
-/* Important */
-.box.important .inner {
- border: 3px solid var(--spip-color-theme);
- background: var(--spip-color-white);
-}
-
-/* Highlight */
-.box.highlight .inner {
- background-color: hsl(var(--spip-color-theme--h), var(--spip-color-theme--s), calc(var(--spip-color-theme--l) * 0.8));
- color: var(--spip-color-white);
-}
-.box.highlight .hd {
- border-bottom-color: var(--spip-box-sep-color-inverse);
-}
-.box.highlight .hd * {
- color: inherit;
-}
-
-/* Inverse */
-.box.inverse .inner {
- background-color: var(--spip-color-gray-darker);
- color: var(--spip-color-white);
-}
-.box.inverse .hd {
- border-bottom-color: var(--spip-box-sep-color-inverse);
-}
-.box.inverse .hd * {
- color: inherit;
-}
-
-
-/**
- * ====================
- * 5. Variantes d'états
- * ====================
- */
-
-
-/* Reset des styles des "messages" qui sont pour l'instant dans forms.css */
-.box.notice, .box.error, .box.success {
- border: 0;
- background: transparent;
- padding: 0;
- color: inherit;
-}
-/* Icône centrée verticalement dans le header */
-.box.notice .hd, .box.error .hd, .box.success .hd,
-.box.notice .bd, .box.error .bd, .box.success .bd {
- background-repeat: no-repeat;
- background-size: var(--spip-box-iconsize);
- background-position: var(--spip-left) var(--spip-box-spacing-x) center;
-}
-/* Décommenter s'il faut centrer l'icône sur la 1ère ligne de texte dans le body */
-/*.notice .bd, .error .bd, .success .bd {
- background-position: var(--spip-left) var(--spip-box-spacing-x) top calc(var(--spip-box-spacing-y) - ((var(--spip-box-iconsize) - var(--spip-line-height)) / 2));
-}*/
-/* Espacement pour l'icône selon qu'elle soit dans le header ou dans le body */
-.box.notice .hd, .box.error .hd, .box.success .hd,
-.box.notice .bd:first-child, .box.error .bd:first-child, .box.success .bd:first-child {
- padding-#LEFT: calc(var(--spip-box-iconsize) + (var(--spip-box-spacing-x) * 2));
-}
-/* Bordure sur le côté */
-.box.notice .hd, .box.error .hd, .box.success .hd,
-.box.notice .bd, .box.error .bd, .box.success .bd,
-.box.notice .ft, .box.error .ft, .box.success .ft {
- border-#LEFT: var(--spip-box-highlightsize) solid transparent;
-}
-/* Mini hack : sous le header on met la bordure basse en pseudo pour ne pas empiéter la bordure latérale colorée */
-.box.notice .hd, .box.error .hd, .box.success .hd {
- border-bottom: 0;
-}
-.box.notice .hd:before, .box.error .hd:before, .box.success .hd:before {
- content: "";
- display: block;
- z-index: 2;
- position: absolute;
- left: 0;
- right: 0;
- bottom: 0;
- border-bottom: 1px solid var(--spip-box-sep-color);
-}
-
-/* Notice */
-.box.notice .hd,
-.box.notice .bd {
- border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 60%);
-}
-.box.notice .ft {
- border-#LEFT-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 50%);
-}
-.box.notice .hd,
-.box.notice .bd:first-child {
- background-image: url(#CHEMIN_IMAGE{warning-32.png});
-}
-
-/* Erreur */
-.box.error .hd,
-.box.error .bd {
- border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 60%);
-}
-.box.error .ft {
- border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 50%);
-}
-.box.error .hd,
-.box.error .bd:first-child {
- background-image: url(#CHEMIN_IMAGE{erreur-32.png});
-}
-
-/* Succès */
-.box.success .hd,
-.box.success .bd {
- border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 55%);
-}
-.box.success .ft {
- border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 48%);
-}
-.box.success .hd,
-.box.success .bd:first-child {
- background-image: url(#CHEMIN_IMAGE{ok-32.png});
-}
-
-
-/**
- * ===================
- * 6. Autres variantes
- * ===================
- */
-
-
-/* Flat : sans ombre portée.
- Peut se conjuguer aux autres quand on veut forcer.
- Certaines le sont d'office, notamment les boîtes imbriquées.
- Une bordure est ajoutée si nécessaire. */
-.box.flat .inner,
-.box.info:not(.pop) .inner,
-.box.note:not(.pop) .inner,
-.box.important:not(.pop) .inner,
-.box.raccourcis:not(.pop) .inner,
-.box .box:not(.pop) .inner /* imbriquées */
-{
- box-shadow: none !important;
-}
-.box.simple.flat .inner,
-.box.notice.flat .inner,
-.box.error.flat .inner,
-.box.success.flat .inner,
-.box .box.simple:not(.pop) .inner, /* imbriquées */
-.box .box.notice:not(.pop) .inner,
-.box .box.error:not(.pop) .inner,
-.box .box.success:not(.pop) .inner {
- border: 1px solid var(--spip-box-border-color);
-}
-
-/* pop : avec une ombre portée.
- Peut se conjuguer aux autres quand on veut forcer */
-.box.pop .inner {
- box-shadow: var(--spip-box-shadow);
-}
-.box.pop .inner:hover,
-.box.pop .inner:focus-within {
- box-shadow: var(--spip-box-shadow-hover);
-}
-
-
-/**
- * ===================
- * 7. Cas particuliers
- * ===================
- */
-
-
-/**
- * Menu des rubriques dépliables sur la home
- * (voir aussi styles boîtes dépliables plus bas)
- */
-.box.sous-rub .inner {
- background-color: var(--spip-color-theme-lighter);
- box-shadow: none !important;
-}
-/* titre */
-.box.sous-rub .hd {
- padding: 0; /* padding dans le titre cliquable plutôt */
- border-bottom: 0;
-}
-.box.sous-rub .titrem.hover,
-.box.sous-rub .titrem.deplie,
-.box.sous-rub .titrem:hover,
-.box.sous-rub .titrem:focus {
- background-color: var(--spip-color-theme-light);
-}
-.box.sous-rub .titrem.hover a,
-.box.sous-rub .titrem.deplie a,
-.box.sous-rub .titrem:hover a,
-.box.sous-rub .titrem:focus a {
- color: var(--spip-color-theme-darker);
-}
-.box.sous-rub .titrem:not(.deplie):hover,
-.box.sous-rub .titrem:not(.deplie):focus {
- border-radius: var(--spip-box-border-radius);
-}
-.box.sous-rub .hd .logo {
- float: var(--spip-right);
- margin: 1px 5px 0;
- margin-#ENV{right}: -9px;
- z-index: 2;
- position: relative;
- border-top-#RIGHT-radius:5px;
-}
-/* Body */
-.box.sous-rub .bd {
- padding: 0;
- border-top: 0;
-}
-.box.sous-rub .descriptif {
- padding: 0px 10px 1px 16px;
- font-size: 0.95em;
-}
-.box.sous-rub a:hover {
- color: black;
-}
-.box.sous-rub .liste-items {
- font-size: 0.85em;
- line-height: 1.2;
- /* border-top: 1px solid var(--spip-box-sep-color); */
- border-top: 0;
-}
-.box.sous-rub .liste-items .item {
- padding: 0px;
- border-color: var(--spip-box-sep-color);
-}
-.box.sous-rub .liste-items .item a {
- display: block;
- padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);
-}
-.box.sous-rub .liste-items .item:hover {
- background-color: var(--spip-color-theme-light);
-}
-.box.sous-rub .liste-items > .item:last-child {
- border-bottom: 0;
-}
-.box.sous-rub .sous-sous-rub {
- margin-top: 0;
- margin-bottom: 0;
- padding-top: 0;
- padding-bottom: 0;
-}
-
-
-/**
- * ===============
- * 8. Déprécations
- * ===============
- * Vieilles boîtes dépliables/repliables encore maintenues mais dépréciées
- * Exemple : menu des rubriques dépliables sur la home (utilisé ailleurs ?)
- */
-
-/* Titre
- - init : .replie
- - déplié : .depliant.deplie
- - replié : .depliant.replie */
-.box .titrem.replie,
-.box .titrem.depliant,
-.box .titrem.impliable
- {
- display: block;
- font-size: 1em;
- line-height: 1.25;
- padding: calc(var(--spip-box-spacing-y) / 2) calc(var(--spip-box-spacing-x) / 2);
- background-repeat: no-repeat;
- border-radius: inherit;
-}
-.box .titrem.impliable .titremancre {
- display: none;
-}
-
-/* Picto déplier / Replier */
-.box .titremancre {
- display: inline-block;
- position: relative;
- width: 1em;
- height: 1em;
- float: var(--spip-left);
- margin-#RIGHT: calc(var(--spip-box-spacing-x) / 3);
- background-position: center center;
- background-repeat: no-repeat;
-}
-.box .replie .titremancre {
- background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]);
-}
-.box .deplie .titremancre {
- background-image: url(#CHEMIN_IMAGE{deplierbas.gif});
-}
-/* Afficher / Masquer */
-.js .box .blocreplie {
- display: none;
-}
-.js .box .titrem.blocreplie {
- display: block;
-}
-.box .blocdeplie {
- display: block;
- background: none;
-}
-.box .bloc_depliable .pagination {
- white-space: normal;
-}
+/* ajustement des marges selon grille verticale en em */
+.box{margin:[(#ENV{margin-bottom}|strmult{1.5})em] 0;}
+.bd {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}
+.bd > :first-child,.bd > :first-child > :first-child {margin-top:0;}
+.bd > :last-child {margin-bottom:0;}
+.hd, .ft {padding:[(#ENV{margin-bottom}|strdiv{2})em] 10px;}
+.hd h1,.hd h2,.hd h3,.hd h4,.hd h5,.hd h6 {margin-bottom:0;}
+
+/* **************** BLOCK SKINS ***************** */
+/* ====== Contour blocks ====== */
+/* remove *background-image:" to default to square corners for IE */
+/* ----- simple (extends box) ----- */
+.simple .inner {border:1px solid #ccc;background-color:#fcfcfc;color:#333;}
+.simple .inner .hd {}
+.simple b{}
+/* ----- info (extends box) ----- */
+.info .inner {border:2px solid #ENV{claire};background:#fcfcfc;}
+.info .inner .hd {}
+.info b{}
+/* ----- note (extends box) ----- */
+.note,.note .inner{border:1px solid #c2c2c2;}
+.note .inner{border-color:#eee; border-width:4px; background-color:[#(#ENV{claire}|couleur_eclaircir{0.85})];}
+.note .inner .hd {}
+
+/* ----- raccourcis (extends box) ----- */
+.raccourcis .inner{border:1px solid #ccc;background-color:#eee;}
+.note .inner .hd {}
+
+/* ----- important (extends box) ----- */
+.important .inner{border: 3px solid [(#ENV{foncee})]; border-bottom-width:10px;background:#fff;}
+.important b{}
+
+/* ----- basic (extends box) ----- */
+.basic {/*margin-bottom: -1px*/}
+.basic .inner {/*padding-bottom: 1px;*/border: 1px solid #aaa;}
+.basic .inner .hd {}
+.basic b{}
+
+/* ----- error, success, notice (extends box) ----- */
+.box.error, .box.success, .box.notice {padding:0;backround-image:none;}
+.error .inner,.success .inner,.notice .inner{border:2px solid;font-weight: normal;color:#333;}
+.error .bd,.success .bd,.notice .bd {padding-[(#ENV{left})]:40px;min-height:24px;background-repeat:no-repeat;background-position: [(#ENV{left}) ]2px top 5px;background-size:32px;}
+.box.error .hd,.box.success .hd,.box.notice .hd {padding-[(#ENV{left})]:40px;}
+.error .ft,.success .ft,.notice .ft {padding-[(#ENV{left})]:40px;}
+.box.error .ft,.box.success .ft,.box.notice .ft {border-color:#ddd;background-color:#eee;}
+
+.success .inner{color: #264409;border-color: #C6D880;background-color:#E6EFC2;}
+.success .bd{background-image:url(#CHEMIN_IMAGE{ok-32.png});}
+.box.success .inner .hd {background-color:#C6DF61;}
+.box.success .hd h1,.box.success .hd h2,.box.success .hd h3,.box.success .hd h4,.box.success .hd h5,.box.success .hd h6 {background-color:#C6DF61;}
+
+.error .inner{color: #8A1F11;border-color: #FBC2C4;background-color:#FBE3E4;}
+.error .bd{background-image:url(#CHEMIN_IMAGE{erreur-32.png});}
+.box.error .inner .hd {background-color:#DF454F;color:#fff;}
+.box.error .hd h1,.box.error .hd h2,.box.error .hd h3,.box.error .hd h4,.box.error .hd h5,.box.error .hd h6 {background-color:#DF454F;color:#fff;}
+
+.notice .inner{color: #514721;border-color: #FFD324;background-color:#FFF6BF;}
+.notice .bd{background-image:url(#CHEMIN_IMAGE{warning-32.png});}
+.box.notice .inner .hd {background-color:#FFD83F;}
+.box.notice .hd h1,.box.notice .hd h2,.box.notice .hd h3,.box.notice .hd h4,.box.notice .hd h5,.box.notice .hd h6 {background-color:#FFD83F;}
+
+
+/* ====== Background blocks ====== */
+.highlight > .inner{background-color:#ENV{claire}; border: 0; box-shadow: 0 0 15px #ccc;}
+.inverse .inner{background-color:#ENV{foncee};color:#ffffff}
+
+/* ====== Block headers and footers ====== */
+.hd.titrem { background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
+background-color: [#(#ENV{foncee}|couleur_eclaircir)];color: #4A4A4A; font-size:[(#ENV{line-height}|strmult{1})em];position:relative;line-height: 1;}
+.hd.titrem h1,.hd.titrem h2,.hd.titrem h3,.hd.titrem h4,.hd.titrem h5,.hd.titrem h6{ font-size: 1em; color:#4A4A4A;}
+
+.section{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
+background-color: #ENV{foncee}; color: #4A4A4A;font-size:1.2em;position:relative;}
+.section h1,.section h2,.section h3,.section h4,.section h5,.section h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
+
+.bam{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
+background-color: [#(#ENV{foncee}|couleur_foncer)]; color: #fff;font-size:1.2em; position:relative;}
+.bam h1,.bam h2,.bam h3,.bam h4,.bam h5,.bam h6{font-size:100%;color:#fff;padding:0;margin:0;}
+
+.topper{ background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;
+background-color: #fff; color: #4A4A4A;font-size:1.2em; position:relative;}
+.topper h1,.topper h2,.topper h3,.topper h4,.topper h5,.topper h6{font-size:100%;color:#4A4A4A;padding:0;margin:0;}
+
+.act{ [background-color: #(#ENV{claire}|couleur_eclaircir);]
+ [border-top: 1px solid (#ENV{claire});]
+ margin-top:-1px;
+ clear:both;
+ text-align: #ENV{right};
+}
+
+/* Cas particuliers */
+.simple.sous-rub .inner .hd {padding:0}
+.simple.sous-rub .inner .hd .logo {float:#ENV{right};margin: 1px 5px 0;margin-#ENV{right}: -9px;z-index:2;position:relative;}
+.simple.sous-rub .sous-sous-rub {margin-top:0;margin-bottom:0;padding-top:0;padding-bottom:0;}
+
+/* vieilles boites depliables/repliables
+ encore maintenues mais depreciees
+*/
+.titrem { font-weight: bold; }
+div.titrem, h3.titrem { display: block; padding-top: [(#ENV{margin-bottom}|strdiv{2})em]; padding-bottom: [(#ENV{margin-bottom}|strdiv{2})em]; background-repeat: no-repeat; padding-[(#ENV{left})]:16px; padding-[(#ENV{right})]:10px;}
+div.titrem a.titremancre,h3.titrem a.titremancre {padding:15px 0 0 16px;background-position: [(#ENV{left})] top;background-repeat: no-repeat; position:relative;float:[(#ENV{left})];margin-[(#ENV{left})]:-16px;}
+/* Deplier / Replier */
+.deplie a.titremancre, .deplie a.titremancre, .depliant a.titremancre, .replie a.titremancre { height: 1px; padding-bottom: 0px; }
+.replie a.titremancre { background-image: url([(#CHEMIN_IMAGE{deplierhaut[(#ENV{rtl})].gif})]); }
+.titrem.hover { background-color: #ENV{claire}; }
+.deplie a.titremancre { background-image: url(#CHEMIN_IMAGE{deplierbas.gif}); }
+.impliable {}
+.js .blocreplie { display: none; }
+.js .titrem.blocreplie { display: block; }
+.blocdeplie { display: block; background: none; }
+.bloc_depliable .pagination{ white-space:normal; }
\ No newline at end of file
diff --git a/prive/themes/spip/forms.css.html b/prive/themes/spip/forms.css.html
index e7c2c39d83..fc28802010 100644
--- a/prive/themes/spip/forms.css.html
+++ b/prive/themes/spip/forms.css.html
@@ -74,7 +74,6 @@
/* divers */
--spip-form-border-radius: var(--spip-border-radius); /* bordure inputs et cie */
--spip-form-input-height: calc((var(--spip-form-padding-input-y) * 2) + var(--spip-line-height)); /* Ã toute fin utile */
- --spip-form-titrem-factor: 1.2; /* Pour la taille du titre */
}
@media (min-width: 768px) {
:root {
@@ -88,8 +87,7 @@
--spip-form-fieldset-offset: 2.5em;
}
}
-.lat .formulaire_spip,
-.formulaire_spip.mini {
+.lat .formulaire_spip {
/* espacements externes (entre les inputs et cie) */
--spip-form-spacing-x: 0.75em;
--spip-form-spacing-y: 0.85em;
@@ -111,9 +109,9 @@
* On regroupe tout au même endroit pour mutualiser et se simplifier la vie.
*/
-/* Gouttière latérale principale.
- Pour le titre ajuster selon la taille de la police. */
+/* Gouttière latérale principale */
.formulaire_spip,
+.formulaire_spip .titrem,
.formulaire_spip fieldset,
.formulaire_spip .editer-groupe,
.formulaire_spip .editer,
@@ -121,13 +119,9 @@
padding-left: var(--spip-form-spacing-x);
padding-right: var(--spip-form-spacing-x);
}
-.formulaire_spip .titrem {
- padding-left: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));
- padding-right: calc(var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em));
-}
-/* Marges négatives pour annuler la gouttière.
- Pour le titre ajuster selon la taille de la police. */
+/* Marges négatives pour annuler la gouttière */
+.formulaire_spip .titrem,
.formulaire_spip .editer-groupe,
.formulaire_spip fieldset,
.formulaire_spip .editer,
@@ -135,10 +129,6 @@
margin-left: calc(var(--spip-form-spacing-x) * -1);
margin-right: calc(var(--spip-form-spacing-x) * -1);
}
-.formulaire_spip .titrem {
- margin-left: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);
- margin-right: calc((var(--spip-form-spacing-x) - ((var(--spip-form-titrem-factor) - 1) * 1em)) * -1);
-}
/**
@@ -266,8 +256,8 @@
}
.entete-formulaire {
position:relative;
- padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x);
- padding-bottom: calc(var(--spip-form-spacing-y) / 2);
+ padding: calc(var(--spip-form-spacing-y) / 2) var(--spip-form-spacing-x);
+ padding-bottom: 0; /* Déjà une marge suffisante sous le h1 */
overflow: hidden;
background: var(--spip-color-white);
border-bottom: 1px solid var(--spip-form-sep-color);
@@ -315,9 +305,7 @@
box-shadow: var(--spip-box-shadow-hover);
}
-/* Titre optionnel
- Une partie de l'habillage est mutualisée avec ceux des boîtes : taille, graisse….
- Voir dans box_skins.css */
+/* Titre optionnel */
.formulaire_spip .titrem {
display: flex;
align-items: center;
@@ -325,7 +313,9 @@
padding-bottom: var(--spip-form-spacing-y);
border-top-left-radius: inherit;
border-top-right-radius: inherit;
+ color: var(--spip-color-theme-dark);
border-bottom: 1px solid var(--spip-form-sep-color);
+ text-transform: uppercase;
}
/* Conteneur des saisies */
@@ -793,25 +783,57 @@
/**
- * ======================
- * 10. Messages de retour
- * ======================
+ * =============================
+ * 10. Messages de retour et cie
+ * =============================
*/
-/* Les styles sont mutualisés dans alertes.css
- Par défaut, on étend les styles d'une alerte large.
- Ici, ne mettre que les ajustements propres aux formulaires.
- Nb : on double les sélecteurs pour avoir la priorité (joie des @extend) */
-.formulaire_spip .reponse_formulaire.reponse_formulaire {
+.formulaire_spip .reponse_formulaire,
+.error, .success, .notice, .information {
+ border: 2px solid;
+ color: var(--spip-form-color-text);
+ font-weight: normal;
+ padding: var(--spip-form-spacing-y) var(--spip-form-spacing-x);
+ padding-left: calc(var(--spip-form-spacing-y) + 24px); /* place pour icône */
+ min-height: 24px;
+ background-repeat: no-repeat;
+ background-position: calc(var(--spip-form-spacing-y) / 2) var(--spip-form-spacing-x);
+ background-size: 24px;
+ margin-bottom: var(--spip-form-spacing-y);
+ margin-top: var(--spip-form-spacing-y);
+}
+.formulaire_spip .reponse_formulaire {
+ border-top-#RIGHT-radius: var(--spip-border-radius);
+ border-bottom-#RIGHT-radius: var(--spip-border-radius);
+ border-width: 0;
border-#LEFT-width: 0.6em;
- border-#LEFT-style: solid;
+ box-shadow: inset 0 0 1em hsla(0, 0%, 100%, 0.2);
}
-.formulaire_spip .reponse_formulaire.reponse_formulaire_ok {
- border-#LEFT-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 66%);
+.formulaire_spip .reponse_formulaire_ok,
+.success {
+ color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 25%);
+ border-color: hsl(var(--spip-color-success--h), var(--spip-color-success--s), 66%);
+ background-color:hsl(var(--spip-color-success--h), var(--spip-color-success--s), 85%);
+ background-image: url(#CHEMIN_IMAGE{ok-24.png});
+}
+.formulaire_spip .reponse_formulaire_erreur,
+.error {
+ color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 45%);
+ border-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 87%);
+ background-color:hsl(var(--spip-color-error--h), var(--spip-color-error--s), 95%);
+ background-image: url(#CHEMIN_IMAGE{erreur-24.png});
+}
+.notice {
+ color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 22%);
+ border-color: hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 57%);
+ background-color:hsl(var(--spip-color-notice--h), var(--spip-color-notice--s), 87%);
+ background-image: url(#CHEMIN_IMAGE{warning-24.png});
}
-.formulaire_spip .reponse_formulaire.reponse_formulaire_erreur {
- border-#LEFT-color: hsl(var(--spip-color-error--h), var(--spip-color-error--s), 87%);
+.information {
+ color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 27%);
+ border-color: hsl(var(--spip-color-info--h), var(--spip-color-info--s), 85%);
+ background-color:hsl(var(--spip-color-info--h), var(--spip-color-info--s), 94%);
}
@@ -930,7 +952,10 @@
.lat .formulaire_spip {
- font-size: 0.95em;
+ font-size: 0.9em;
+}
+.lat .formulaire_spip .titrem {
+ font-size: 1em;
}
/* Tous les labels au dessus */
.lat .formulaire_spip .editer {
@@ -970,18 +995,24 @@
* =======================================
* 13. Formulaires dans certains contextes
* =======================================
+ * Fiche objet, constructeur de formulaire (formidable), …
*/
-/* Formulaires flat : sans ombre portée, simple bordure */
-.formulaire_spip.flat,
+/* Dans fiche objet */
.fiche_objet .formulaire_spip,
-.formulaire_spip .formulaire_spip,
-.box .formulaire_spip,
-.popin .entete-formulaire,
-.popin .formulaire_spip {
- border: 1px solid var(--spip-form-border-color);
- box-shadow: none !important;
+.formulaire_spip .formulaire_spip {
+ border: 1px solid hsla(0, 0%, 0%, 0.15); /* Nb : la variable est plutôt pour les bordures des inputs */
+ box-shadow: none;
+}
+.fiche_objet .formulaire_spip.formulaire_dater {
+ margin-top: 0;
+ border: 0;
+ border-radius: 0;
+ margin-left: -15px; /* = padding de fiche_objet */
+ margin-right: -15px; /* = padding de fiche_objet */
+ background-color: var(--spip-color-gray-lightest);
+ position: relative;
}
/* Dans #wysiwyg */
@@ -989,6 +1020,21 @@
font-size: 1rem;
}
+/* Dans une modale */
+.popin .entete-formulaire,
+.popin .formulaire_spip,
+.popin .formulaire_spip:hover,
+.popin .formulaire_spip:focus-within {
+ box-shadow: none
+}
+.popin .entete-formulaire,
+.popin .formulaire_spip {
+ border: 1px solid var(--spip-form-border-color);
+}
+.popin .entete-formulaire {
+ border-bottom: none;
+}
+
/**
* ============================
@@ -1168,15 +1214,6 @@
display: inline-block;
}
}
-.fiche_objet .formulaire_spip.formulaire_dater {
- margin-top: 0;
- border: 0;
- border-radius: 0;
- margin-left: -15px; /* = padding de fiche_objet */
- margin-right: -15px; /* = padding de fiche_objet */
- background-color: var(--spip-color-gray-lightest);
- position: relative;
-}
/* editer_liens */
.formulaire_editer_liens .liste-objets {
diff --git a/prive/themes/spip/images/info-xx.svg b/prive/themes/spip/images/info-xx.svg
deleted file mode 100644
index 4dfa4e8729..0000000000
--- a/prive/themes/spip/images/info-xx.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" height="64" viewBox="0 0 64 64" width="64"><g transform="scale(.125)" stroke-width="8"><circle cx="256" cy="256" fill="#00b0f5" r="256"/><path d="M256 190.667c-25.989 0-47.133-21.145-47.133-47.134S230.011 96.4 256 96.4c25.989 0 47.133 21.144 47.133 47.133 0 25.989-21.144 47.134-47.133 47.134zm0 34.267c-25.989 0-47.133 21.144-47.133 47.133v96.4c0 25.989 21.144 47.133 47.133 47.133 25.989 0 47.133-21.144 47.133-47.133v-96.4c0-25.99-21.144-47.133-47.133-47.133z" fill="#f4f1f1"/></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 d1765dc91d..2b299a1951 100644
--- a/prive/themes/spip/style_prive.css.html
+++ b/prive/themes/spip/style_prive.css.html
@@ -49,7 +49,6 @@ Valeurs par defaut :
forms.css,
picker.css,
box_skins.css,
- alertes.css,
jquery-ui.css,
content.css,
exceptions.css,
diff --git a/prive/themes/spip/theme.css.html b/prive/themes/spip/theme.css.html
index 3dc97cd551..d58005f987 100644
--- a/prive/themes/spip/theme.css.html
+++ b/prive/themes/spip/theme.css.html
@@ -63,6 +63,9 @@ body {
.navigation_avec_icones #bando1_menu_administration {background-image: url("plugins/details_interface_3/images/maintenance-48.png");}
.navigation_avec_icones #bando1_menu_configuration {background-image: url("plugins/details_interface_3/images/configuration-48.png");}
*/
+.simple .inner {border-radius:5px;border: 1px solid #d7d7d7;position:relative;}
+.simple .inner:hover {box-shadow:0px 0px 2px #dddddd;position:relative;}
+.simple .inner .hd { background-color: #f0f0f0; color: #444;}
.simple.fiche_objet .inner .hd { line-height: 120%; }
#contenu .fiche_objet .propose .inner {border: 0;border-radius:0;background-color: #ffde00;margin: 0px -15px;padding:15px;position:relative;}
#contenu .fiche_objet .propose .inner p {margin: 0;}
@@ -81,6 +84,19 @@ body {
h1 {font-size: 2em;line-height: 125%;}
.h1 {font-size: 2em;line-height: 125%;}
+.sous-rub .inner {border: 0;background-color: #[(#ENV{foncee}|couleur_luminance{0.15})];box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}
+.sous-rub .inner:hover {box-shadow:0px 0px 10px #[(#ENV{foncee}|couleur_luminance{0.20})] inset;position:relative;}
+.sous-rub .inner .hd {background-color: transparent;font-size: 100%;}
+.simple.sous-rub .inner .hd .logo {border-top-#ENV{right}-radius:5px;}
+.sous-rub .inner .bd {padding: 0;}
+.sous-rub .inner .bd .descriptif {padding:0px 10px 1px 16px; font-size: 0.95em;}
+.sous-rub .inner .bd .liste-items {font-size: 0.85em;line-height: 120%;}
+.sous-rub .inner .bd .liste-items .item {padding: 0px;}
+.sous-rub .inner .bd .liste-items .item a {padding: 5px 18px;display: block;}
+.sous-rub .inner .bd .liste-items .item:hover {background-color: #[(#ENV{foncee}|couleur_luminance{0.25})];}
+.sous-rub .inner .bd .liste-items .item:hover a {color: black;}
+.sous-rub .inner .bd .liste-items > .item:last-child {border-bottom: 0px;}
+
.liste-objets {border:1px solid #e5e5e5;border-top-left-radius:5px;border-top-right-radius:5px;position: relative;z-index: 1;display: block;}
/*
@@ -103,10 +119,16 @@ h1 {font-size: 2em;line-height: 125%;}
.liste-objets-lies.mots thead {display: none;}
.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;}
#chemin {}
#chemin .bouton_deplacer {font-size: 10px;color: #GET{lien};opacity:0.6;filter:alpha(opacity=60);}
#chemin:hover .bouton_deplacer {opacity:1.0;filter:alpha(opacity=100);}
+.box, .box .inner {border-radius:5px;}
+.box .inner .hd {border-top-left-radius:5px; border-top-right-radius:5px;}
+.note {border: 0;}
+.box.error,.box.success,.box.notice {border: 0;}
.lat #documents_joints {border-top:0}
.lat #documents_joints .item {border-radius:5px;}
--
GitLab