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

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

Bouton "modifier" : on édite l'album sur place plutôt que dans une modalbox, qui cause un problème de rediretion quand des liens ouvrent à nouveau une autre modalbox.
Du coup plus besoin du squelette "album_edit_portfolio.html"

File size: 9.9 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
76/*==============
77  === LISTES ===
78  ==============*/
79
80/*==========
81  = TOUTES =
82  ==========*/
83.albums .entete h2              { display: inline; }
84.albums .liste-objets,
85  .albums .liste                { margin: 0; border-width: 0; }
86.album .header                  { margin: 0; }
87.albums td,
88  .album td                     { vertical-align: top; }
89.album td img                   { vertical-align: middle; }
90.album td.logo                  { width: 1px; }
91.album .titre h4                { margin: 0; }
92.album .descriptif p            { margin: 0; }
93.album .infos                   { color: #888; }
94.album td.actions               { text-align: right; }
95.album td.actions .submit       { line-height: 0; }
96.album .pagination              { background-color: transparent; border: 0 none; }
97
98
99/*================
100  = ALBUMOTHEQUE =
101  ================*/
102.albumotheque .album.premier    { margin-top: 10px; }
103.albums.albumotheque .album .inner { background-color: #fff; }
104.albumotheque .album .header    { padding: .5em; }
105.albumotheque .album .header > div { max-width: 40%; }
106
107
108/*========
109  = LIES =
110  ========*/
111/* conteneurs */
112.albums .album                  { margin: 0 0 10px;}
113.albums .album .bd,
114  .albums .album .hd            { padding: 0;}
115.albums .album .inner           { border: 1px solid #e5e5e5; background-color: transparent; }
116.album.actif .inner             { border-color: #GET{claire}; }
117.album.actif .bd                { padding-left: 10px; padding-right: 10px; }
118.album .inner:hover             { background-color: [#(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
119/* header */
120.album .header,
121  .album .footer                {padding: .2em;}
122.album .header > div            {
123                                display: inline-block; max-width: 80%; margin-#ENV{right}: 1em;
124                                vertical-align: top;
125                                }
126.album .header .infos           { float: #ENV{right}; }
127/* footer */
128.album .act                     {
129                                padding-bottom: 0; padding-top: 0;
130                                border: none; background-color: transparent;
131                                }
132/* documents : apercu */
133.album .liste_docs              {
134                                padding: .5em; margin: 0;
135                                border-top: 1px dotted #ccc; border-top-color: rgba(0,0,0,.1);
136                                line-height: 0; /* supprime l'espace apres les images */
137                                }
138.album .doc,
139  .placeholder-album            {
140                                display: inline-block; position: relative; margin: 0 .5em .5em 0;
141                                text-align: center;
142                                }
143.album .doc.item                { vertical-align: top; } /* document du portfolio dans album */
144.album .doc figure              { margin: 0; }
145.album .doc a                   { display: block; }
146.album .doc a img               { vertical-align: middle; }
147.album .doc figcaption          {
148                                margin-top: .25em;
149                                font-size: x-small; color: #888; line-height: 1;
150                                }
151.placeholder-album              { background-color:#GET{claire}; box-shadow:-1px 1px 1px #GET{foncee};}
152/* boutons */
153.album .bouton_fermer           { margin: 10px 0; }
154.album .actions,
155  .album .actions button        { font-size: x-small; text-align: #ENV{right};}
156.album .actions a               { /*font-weight: bold;*/ }
157.album .actions img             { vertical-align: middle; }
158.album .reveal                  { opacity: .1; }
159.album .inner:hover .reveal     { opacity: 1; visibility: visible; }
160/* bouton retirer */
161.album .doc .retirer,
162  .album .doc .retirer button   { width: 16px; height: 16px;}
163.album .doc .retirer            {
164                                position: absolute; #ENV{right}: 0; top: 0; display: none; opacity: .65;
165                                line-height: 0;
166                                background: url('[(#CHEMIN_IMAGE{del-24.png})]') no-repeat bottom right transparent; border: 0;
167                                }
168.album .doc:hover .retirer      { display: block;}
169.album .retirer:hover           { opacity: 1; visibility: visible; }
170.album .doc .retirer button.submit,
171  .album .doc .retirer button.submit:hover{border: 0;}
172#portfolios .doc .retirer       { display:none; } /* quand doc d'un album deplace dans portfolios */
173/* formulaires */
174.album .formulaire_joindre_document { margin: 0 0 10px; }
175.album .formulaire_editer_album { margin-top: 0; }
176
177/* DRAG DROP */
178.formulaire_albums_deplacer_documents .fermer { float: #ENV{right}; cursor: pointer; }
179.cible-album                    { outline: 2px dashed #GET{foncee}; }
180.album .doc.drag:hover .retirer {display: none;} /* cacher bouton retirer pendant deplacement */
181/* placeholder quand portfolio vide */
182.liste_items.placeholder        { margin-bottom: 0; border-top: 0 none; }
183#portfolios.cible-album .liste_items { padding-top: 1em; padding-bottom: 1em; }
184
185
186/*============
187  = ASSOCIER =
188  ============*/
189.albums .associer .actions      { width: 6em; }
190.albums .associer .actions img  { vertical-align: middle; }
191.albums .associer .contenu      { width: 8em; }
192.albums .associer .logo         { width: 1px; } /* pour avoir taille minimale */
193
194
195/*=============
196  = SELECTEUR =
197  =============*/
198
199.albums .entete.selecteur h2    { font-size: 1em; }
200.albums .liste-objets.selecteur { font-size: .9em; }
201.albums .selecteur td.id        { width: auto; }
202.albums .selecteur td.actions   { display: table-cell; width: auto; }
203.albums .selecteur td.actions input[type=radio] { margin: 0; }
204
205
206
207
208/*===============
209  === ONGLETS ===
210  ===============*/
211
212.albums .onglets_simple .parents li:first-child {margin-#ENV{left}: 2.5em;}
213.albums .onglets_simple img     { margin-right: 0.3em; vertical-align: middle; }
214.albums .onglets_simple.filtres a {padding-left: .2em; padding-right: .2em;}
215.albums .onglets_simple.filtres strong {padding-left: .5em; padding-right: .5em;}
216.albums .onglets_simple.filtres a,
217  .albums .onglets_simple.filtres a:hover { border-color: transparent; background-color: transparent; }
218
219
220
221
222/*=========================
223  === BOITE OBJETS LIES ===
224  =========================*/
225.albums.liaison > ul            { padding-top: 0; padding-bottom: 0; margin: 0; list-style-type: none;}
226.albums.liaison .liste-objets   { padding-bottom: 0; padding-right: 0; padding-top: 0; }
227.albums.liaison label           {
228                                margin-top: .34em;
229                                font-weight: bold;
230                                }
231.albums.liaison .liste td.icone_objet { width: 20px; }
232.albums.liaison .liste tr:first-child td { border-top: none; }
233.albums.liaison .liste tr:last-child td { border-bottom: none; }
234
235
236
237
238/*============================
239  === BOITE COLONNE GAUCHE ===
240  ============================*/
241.lat .albums .menu .item        { padding: .3em 0; }
242.lat .albums .menu .item img    { vertical-align: middle; }
243.lat .albums .menu .item a      { display: block; }
244.lat .albums .album             { margin: 0; }
245.lat .album .inner              { border: 0; }
246.lat .album .liste_docs         { padding: 0; border-top: 0; text-align: center;}
247.lat .album .formulaire_joindre_document {margin: 0;}
248.lat .album .actions,
249  .lat .album .actions button   { font-size: 1em; }
250
251/* */
252.album .raccourcis              { padding: 0; }
253.album .raccourcis .toggle      {
254                                display: block; margin: .6em 0;
255                                font-weight: bold;
256                                }
257.album .raccourcis .toggle.on   {
258                                margin-bottom: 0;
259                                background-color: #GET{foncee};
260                                color: #333;
261                                }
262.album .raccourcis .formulaire_spip {
263                                margin-top: 0;
264                                background: transparent;
265                                }
266.album .raccourcis .formulaire_spip li { text-align: left; }
267
268
269
270
271/*==============
272  === DIVERS ===
273  ==============*/
274/* logo */
275.album.logo                     { margin: 0 auto; }
276/* bouton action */
277.albums button:hover,
278  .albums button:hover          { cursor:pointer; }
279.actions .supprimer.off         { margin-right: .25em; }
280/* formulaire configurer */
281.albums .inline .choix          { display: inline-block; }
282.albums .inline .choix input    { margin-right: 0; vertical-align: bottom; }
283.albums .inline .choix label    { margin-left: 0; margin-right: .8em; }
284.albums .inline .choix strong small { font-weight: normal; }
285/* message compagnon */
286.box.compagnon .albums > ul     { margin: .5em 0;}
287.box.compagnon .albums > ul li > ul { display: inline-block; vertical-align: top; list-style: none inside;}
288
289
290
291
292/*==============
293  === MODELE ===
294  ==============*/
295.album ul                       { margin: 0; }
296.album.liste h2                 { margin-bottom: 1em; }
297.album.vignettes li             { display: inline-block; margin: 0 10px 10px 0; }
298.album.vignettes li .spip_logos { float: none; margin: 0; }
299.album tr td:nth-child(2)       { padding-left: 1em }
300/* styles pour que le label ne dépasse pas */
301.album.vignettes figure,
302  .album.vignettes .figure      { display: table; width: 1px; text-align: center; }
303.album.vignettes figcaption,
304  .album.vignettes .figcaption,
305  .album.vignettes img          { display: table-row; }
306
307/* notice espace privé */
308.album.publier                  { opacity:.3 }
309.album.publier:hover            { opacity: 1 }
310.album.publier .submit          {
311                                padding: 0;
312                                font-size: .8em;
313                                }
314.album.publier .submit:hover    { cursor: pointer; }
Note: See TracBrowser for help on using the repository browser.