source: spip-zone/_plugins_/albums/trunk/prive/style_prive_plugin_albums.html @ 73693

Last change on this file since 73693 was 73693, checked in by tcharlss@…, 6 years ago

Styles + langue : un peu de nettoyage

File size: 9.0 KB
Line 
1[(#REM)<style>]
2#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
3#HTTP_HEADER{Vary: Accept-Encoding}
4
5#SET{claire,##ENV{couleur_claire,c5e41c}}
6#SET{foncee,##ENV{couleur_foncee,9dba00}}
7
8
9
10/*==============================
11  === BOITE COMPLEMENT OBJET ===
12  ==============================*/
13
14.albums                         { position: relative; }
15
16/*= TITRE =*/
17.albums > h3                    {
18                                margin: 0 0 10px; padding: 2px 10px;
19                                background-color: #GET{claire};
20                                }
21
22/*= ONGLETS + ENTETE + FORMULAIRES =*/
23.albums .entete_ajouter,
24  .albums #associer,
25  .albums .onglets strong.on    { border:1px solid #GET{foncee}; }
26
27/*= ONGLETS =*/
28.albums .onglets                {
29                                display: table; width: 100%; margin-top: 10px;
30                                font-weight: bold;
31                                }
32.albums .onglets a,
33  .albums .onglets strong       {
34                                display: table-cell; padding:.2em .8em;
35                                background-color: #fff; border: 1px solid #dfdfdf; border-left: none; border-bottom: 1px solid #GET{foncee};
36                                font-size: .92em; text-align: center; text-transform: uppercase;
37                                }
38.albums .onglets > *:first-child{ border-left: 1px solid #dfdfdf; }
39.albums .onglets a:hover        {
40                                background-color: rgba(0,0,0,.04);
41                                text-decoration: none;
42                                }
43.albums .onglets strong.on      { background-color: #GET{foncee}; border-bottom: none; }
44.albums .onglets .fermer        { width: 1px; padding: 0 .3em; }
45.albums .onglets .fermer img    { vertical-align: middle; }
46
47/*= ENTETE =*/
48.albums .entete_ajouter         {
49                                padding: 1em .5em;
50                                background-color: #GET{foncee}; border-top: none;
51                                }
52.albums .entete_ajouter h4      {
53                                display: inline; margin: 0;
54                                font-size: 1.3em; font-weight: normal; color: #fff;
55                                }
56.albums .entete_ajouter img     { vertical-align:bottom; }
57
58/*= FORMULAIRE ASSOCIER =*/
59.albums #associer               { background-color: #fff; border-color: #aaa; border-top: none; }
60.albums #associer .entete       {
61                                padding:.4em;
62                                border-top: none; border-bottom: none;
63                                }
64.albums #associer .formulaire_recherche,
65  .albums #associer .filtres    {margin: 0;}
66
67/*= FORMULAIRE CREER =*/
68.albums #creer .formulaire_editer{
69                                margin-top:0;
70                                border-top:none;
71                                }
72
73
74/*==============
75  === LISTES ===
76  ==============*/
77
78/*==================
79  = LISTE : TOUTES =
80  ==================*/
81.albums .entete h2              { display: inline; }
82.albums .liste-objets,
83  .albums .liste                { margin: 0; border-width: 0; }
84.album .header                  { margin: 0; }
85.albums td,
86  .album td                     { vertical-align: top; }
87.album td img                   { vertical-align: middle; }
88.album td.logo                  { width: 1px; }
89.album .titre h4                { margin: 0; }
90.album .descriptif p            { margin: 0; }
91.album .infos                   { color: #888; }
92.album td.actions               { text-align: right; }
93.album td.actions .submit       { line-height: 0; }
94.album .pagination              { background-color: transparent; border: 0 none; }
95
96
97/*======================
98  = LISTE ALBUMOTHEQUE =
99  ======================*/
100.albumotheque .album.premier    { margin-top: 10px; }
101.albums.albumotheque .album .inner { background-color: #fff; }
102.albumotheque .album .header    { padding: .5em; }
103.albumotheque .album .header > div { max-width: 40%; }
104
105
106/*==============
107  = LISTE LIES =
108  ==============*/
109/* conteneurs */
110.albums .album                  { margin: 0 0 10px;}
111.albums .album .bd,
112  .albums .album .hd            { padding: 0;}
113.albums .album .inner           { border: 1px solid #e5e5e5; background-color: transparent; }
114.album.actif .inner             { border-color: #GET{claire}; }
115.album.actif .bd                { padding-left: 10px; padding-right: 10px; }
116.albums .album .inner:hover     { background-color: [#(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
117/* header */
118.album .header,
119  .album .footer                {padding: .2em;}
120.album .header > div            {
121                                display: inline-block; max-width: 80%; margin-#ENV{right}: 1em;
122                                vertical-align: top;
123                                }
124.album .header .infos           { float: #ENV{right}; }
125/* footer */
126.album .act                     {
127                                padding-bottom: 0; padding-top: 0;
128                                border: none; background-color: transparent;
129                                }
130/* documents : apercu */
131.album .liste_docs              {
132                                padding: .5em; margin: 0;
133                                border-top: 1px dotted #ccc; border-top-color: rgba(0,0,0,.1);
134                                line-height: 0; /* supprime l'espace apres les images */
135                                }
136.album .doc,
137  .placeholder-album            {
138                                display: inline-block; position: relative; margin: 0 .5em .5em 0;
139                                text-align: center;
140                                }
141.album .doc.item                { vertical-align: top; } /* document du portfolio dans album */
142.album .doc figure              { margin: 0; }
143.album .doc a                   { display: block; }
144.album .doc a img               { vertical-align: middle; }
145.album .doc figcaption          {
146                                margin-top: .25em;
147                                font-size: x-small; color: #888; line-height: 1;
148                                }
149.placeholder-album              { background-color:#GET{claire}; box-shadow:-1px 1px 1px #GET{foncee};}
150/* boutons */
151.album .bouton_fermer           { margin: 10px 0; }
152.album .actions,
153  .album .actions button        { font-size: x-small; text-align: #ENV{right};}
154.album .actions a               { /*font-weight: bold;*/ }
155.album .actions img             { vertical-align: middle; }
156.album .reveal                  { opacity: .1; }
157.album .inner:hover .reveal     { opacity: 1; visibility: visible; }
158/* bouton retirer */
159.album .doc .retirer,
160  .album .doc .retirer button   { width: 16px; height: 16px;}
161.album .doc .retirer            {
162                                position: absolute; #ENV{right}: 0; top: 0; display: none; opacity: .65;
163                                line-height: 0;
164                                background: url('[(#CHEMIN_IMAGE{del-24.png})]') no-repeat bottom right transparent; border: 0;
165                                }
166.album .doc:hover .retirer      { display: block;}
167.album .retirer:hover           { opacity: 1; visibility: visible; }
168.album .doc .retirer button.submit,
169  .album .doc .retirer button.submit:hover{border: 0;}
170#portfolios .doc .retirer       { display:none; } /* quand doc d'un album deplace dans portfolios */
171/* formulaires */
172.album .formulaire_joindre_document { margin: 0 0 10px; }
173.album .formulaire_editer_album { margin-top: 0; }
174
175/* DRAG DROP */
176.formulaire_albums_deplacer_documents .fermer { float: #ENV{right}; cursor: pointer; }
177.cible-album                    { outline: 2px dashed #GET{foncee}; }
178.album .doc.drag:hover .retirer {display: none;} /* cacher bouton retirer pendant deplacement */
179/* placeholder quand portfolio vide */
180.liste_items.placeholder        { margin-bottom: 0; border-top: 0 none; }
181#portfolios.cible-album .liste_items { padding-top: 1em; padding-bottom: 1em; }
182
183
184/*==================
185  = LISTE ASSOCIER =
186  ==================*/
187.albums .associer .actions      { width: 6em; }
188.albums .associer .actions img  { vertical-align: middle; }
189.albums .associer .contenu      { width: 8em; }
190.albums .associer .logo         { width: 1px; } /* pour avoir taille minimale */
191
192
193/*===================
194  = LISTE SELECTEUR =
195  ===================*/
196
197.albums .entete.selecteur h2    { font-size: 1em; }
198.albums .liste-objets.selecteur { font-size: .9em; }
199.albums .selecteur td.id        { width: auto; }
200.albums .selecteur td.actions   { display: table-cell; width: auto; }
201.albums .selecteur td.actions input[type=radio] { margin: 0; }
202
203
204/*===============
205  === ONGLETS ===
206  ===============*/
207
208.albums .onglets_simple .parents li:first-child {margin-#ENV{left}: 2.5em;}
209.albums .onglets_simple img     { margin-right: 0.3em; vertical-align: middle; }
210.albums .onglets_simple.filtres a {padding-left: .2em; padding-right: .2em;}
211.albums .onglets_simple.filtres strong {padding-left: .5em; padding-right: .5em;}
212.albums .onglets_simple.filtres a,
213  .albums .onglets_simple.filtres a:hover { border-color: transparent; background-color: transparent; }
214
215
216/*============================
217  === BOITE COLONNE GAUCHE ===
218  ============================*/
219.lat .albums .menu .item        { padding: .3em 0; }
220.lat .albums .menu .item img    { vertical-align: middle; }
221.lat .albums .menu .item a      { display: block; }
222.lat .albums .album             { margin: 0; }
223.lat .album .inner              { border: 0; }
224.lat .album .liste_docs         { padding: 0; border-top: 0; text-align: center;}
225.lat .album .formulaire_joindre_document {margin: 0;}
226.lat .album .actions,
227  .lat .album .actions button   { font-size: 1em; }
228
229/* */
230.album .raccourcis              { padding: 0; }
231.album .raccourcis .toggle      {
232                                display: block; margin: .6em 0;
233                                font-weight: bold;
234                                }
235.album .raccourcis .toggle.on   {
236                                margin-bottom: 0;
237                                background-color: #GET{foncee};
238                                color: #333;
239                                }
240.album .raccourcis .formulaire_spip {
241                                margin-top: 0;
242                                background: transparent;
243                                }
244.album .raccourcis .formulaire_spip li { text-align: left; }
245
246
247/*==============
248  === DIVERS ===
249  ==============*/
250/* logo */
251.album.logo                     { margin: 0 auto; }
252/* bouton action */
253.albums button:hover,
254  .albums button:hover          { cursor:pointer; }
255.actions .supprimer.off         { margin-right: .25em; }
256
257
258/*==============
259  === MODELE ===
260  ==============*/
261.album ul                       { margin: 0; }
262.album.liste h2                 { margin-bottom: 1em; }
263.album.vignettes li             { display: inline-block; margin: 0 10px 10px 0; }
264.album.vignettes li .spip_logos { float: none; margin: 0; }
265.album tr td:nth-child(2)       { padding-left: 1em }
266/* styles pour que le label ne dépasse pas */
267.album.vignettes figure,
268  .album.vignettes .figure      { display: table; width: 1px; text-align: center; }
269.album.vignettes figcaption,
270  .album.vignettes .figcaption,
271  .album.vignettes img          { display: table-row; }
272
273/* notice espace privé */
274.album.publier                  { opacity:.3 }
275.album.publier:hover            { opacity: 1 }
276.album.publier .submit          {
277                                padding: 0;
278                                font-size: .8em;
279                                }
280.album.publier .submit:hover    { cursor: pointer; }
Note: See TracBrowser for help on using the repository browser.