source: spip-zone/_plugins_/multilang/trunk/prive/style_prive_plugin_multilang.html @ 118606

Last change on this file since 118606 was 118606, checked in by Charles Razack, 13 months ago

Version 1.4.0.

  • Nouveauté la plus visible : petite refacto du menu de langues → Noms des langues en entier au lieu des codes (fr, en...), liens affichés sous formes de boutons plus grands et centrés pour être bien visibles, ajout d'un label. Petite amélioration pour éviter qu'il y ait un saut lorsque le menu passe en sticky.
  • Configuration : les formulaires sur lesquels activer le script sont tous regroupés dans une même clé formulaires.
  • Configuration : ajout d'une option pour ajouter des sélecteurs dans le paramètre root (exemple complètement au hasard : .formulaire_editer_noisette).
  • Ajout d'un pipeline multilang_parametres pour permettre aux plugins de changer les paramètres passés au script d'init. Cas le plus courant : ajouter des formulaires à prendre en compte par le script.
  • Refactorisation du script d'init afin qu'il soit plus lisible et maintenable : séparation du javascript et du php. Au passage, correction d'un bug rigolo qui faisait que quand on décochait tous les items dans la config, le script devenait actif sur *tous* les formulaires : recherche, login, etc.
File size: 3.2 KB
Line 
1[(#REM)
2
3        Ce squelette definit les styles de l'espace prive
4
5        Note: l'entete "Vary:" sert a repousser l'entete par
6        defaut "Vary: Cookie,Accept-Encoding", qui est (un peu)
7        genant en cas de "rotation du cookie de session" apres
8        un changement d'IP (effet de clignotement).
9
10        ATTENTION: il faut absolument le charset sinon Firefox croit que
11        c'est du text/html !
12        <style>
13]
14#CACHE{3600*100,cache-client}
15#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
16#HTTP_HEADER{Vary: Accept-Encoding}
17
18#SET{claire,##ENV{couleur_claire,edf3fe}}
19#SET{foncee,##ENV{couleur_foncee,3874b0}}
20#SET{left,#ENV{ltr}|choixsiegal{left,left,right}}
21#SET{right,#ENV{ltr}|choixsiegal{left,right,left}}
22
23.menu_multilang {
24        background-color:transparent;
25        border-bottom: 3px solid transparent;
26        transition: all 0.2s;
27}
28
29/* Boutons de langue */
30.menu_multilang .langues {
31        display: flex;
32        flex-flow: row wrap;
33        align-items: center;
34        justify-content: center;
35        text-align: center; /* vieux navs */
36        overflow: auto;
37        margin: 1em 0;
38}
39
40.menu_multilang .langues__item {
41        display: inline-block; /* vieux navs */
42        flex: 0 1 auto;
43        padding: 0.33em 0.66em;
44        margin: 0.33em 0.33em 0 0;
45        background-color: [#(#GET{claire}|couleur_eclaircir)];
46        border: 1px solid transparent;
47        cursor: pointer;
48        font-weight: 400;
49        transition: all 0.2s;
50        border-radius: 0.2em;
51        text-decoration: none;
52}
53
54.menu_multilang .langues__item:first-letter {
55        text-transform: uppercase;
56}
57
58.menu_multilang .langues__item.on,
59.menu_multilang .langues__item:hover,
60.menu_multilang .langues__item:focus {
61        background-color: #GET{foncee};
62        color: #fff;
63}
64
65.menu_multilang .langues__item.empty:before {
66        content: '∅';
67        margin-right: 0.25em;
68}
69
70.menu_multilang .langues__label {
71        display: inline-block; /* vieux navs */
72        padding-left: 2.5em;
73        margin: 0.33em 0.33em 0 0;
74        background-image: url(#CHEMIN{prive/themes/spip/images/icone-multilang.svg});
75        background-repeat: no-repeat;
76        background-size: 2em auto;
77        background-position: left center;
78}
79
80.menu_multilang .multilang_message {
81        padding: 0.25em 0.5em;
82        clear: both;
83        text-align: center;
84        font-weight: bold;
85        background-color: hsla(0, 0%, 0%, 0.066);
86}
87.menu_multilang .multilang_message p:last-child {
88        margin: 0;
89}
90/* Mode sticky */
91.menu_multilang_flottant {
92        border-bottom-color: #GET{foncee};
93        background-color:[#(#GET{claire}|couleur_eclaircir)];
94        opacity: 0.9;
95}
96.menu_multilang_flottant .langues {
97        margin: 0;
98}
99
100.menu_multilang_flottant .langues__item {
101        border-bottom-left-radius: 0;
102        border-bottom-right-radius: 0;
103}
104
105#SET{langues,#EVAL{$GLOBALS["meta"]["langues_multilingue"]}}
106<BOUCLE_langues(POUR){tableau #GET{langues}|explode{','}}>
107.multi_lang_#VALEUR {
108        background-position: 98% 1px;
109        background-repeat: no-repeat;
110        background-image: url([(#VAL{Multi #VALEUR}|image_typo{taille=11,couleur=cccccc}|extraire_attribut{src}|url_absolue)]);
111}
112</BOUCLE_langues>
113
114.multi_lang_no_multi {
115        background-position: 98% 1px;
116        background-repeat: no-repeat;
117        background-image: url([(#VAL{No multi}|image_typo{taille=11,couleur=cccccc}|extraire_attribut{src}|url_absolue)]);
118}
119
120.multi_lang_broken {
121        background-position: 98% 1px;
122        background-repeat: no-repeat;
123        background-image: url(#CHEMIN{images/multi_forbidden.png});
124}
125
126.multi_lang_rtl {background-position:2% 1px;}
Note: See TracBrowser for help on using the repository browser.