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

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

v3.3.27 : Remplace partout là où c'est possible les #INCLURE et #MODELE par des <INCLURE>, et rétablir l'affichage des albums affichés sous le portfolio dans les squelettes de la dist en 3.1 (qui a ajouté un float:left sur les li des albums).

File size: 11.0 KB
Line 
1[(#REM)<style>]
2#HTTP_HEADER{Content-Type: text/css; charset=utf-8}
3#HTTP_HEADER{Vary: Accept-Encoding}
4#SET{claire,##ENV{couleur_claire,c5e41c}}
5#SET{foncee,##ENV{couleur_foncee,9dba00}}
6
7
8/*
9    BLOC ALBUM
10    ==========
11*/
12.liste-albums.lies .boite-album         { margin: 10px 0; }
13.boite-album .bd,
14#contenu .boite-album .bd               { padding: 0; }
15/* header */
16.header-album                           { padding: 10px; }
17.header-album > .id                     { float: #ENV{left}; width: 70px; }
18.header-album > .boutons-edition        { float: #ENV{right}; }
19.header-album > .contenu                { overflow: auto; }
20.header-album .titre                    { font-weight: bold; }
21.header-album .texte img                { vertical-align: middle; }
22.header-album .formulaire_editer_album,
23.header-album .formulaire_editer_album ul,
24.header-album .formulaire_editer_album .boutons { margin: 0; padding: 0; border: 0 none; background: transparent; }
25.header-album .formulaire_editer_album li { padding: 0; }
26.header-album .formulaire_editer_album label { margin: 0; }
27/* documents */
28.documents-album                        { margin: 0; border-top-width: 0px; }
29.documents-album .item                  { padding: 10px 10px 10px 80px; border-style: dotted; clear: both; overflow: visible;}
30.documents-album .item .tourner         { float: #ENV{right}; display: block; }
31.documents-album .item > a              { float: #ENV{left}; width: 60px; margin-#ENV{left}: -70px; text-align: center; }
32.documents-album .item .titrem,
33.documents-album .item .infos           { font-size: .9em; line-height: 1.5; }
34.documents-album .item .titrem          { margin: 0; }
35.documents-album .item .titrem > span   { display: block; }
36.documents-album .item .fichier         { word-break: break-all; font-weight: normal; }
37.documents-album .item .infos           { float: #ENV{left}; display: block;  }
38.documents-album .item .infos,
39.documents-album .item:not(.sans-titre) .fichier { color: #777; }
40.documents-album .item .sep             { color: #bbb; margin: 0 .33em; }
41.documents-album .item .extension       { text-transform: uppercase; }
42.documents-album .item .actions         { float: #ENV{right}; clear: #ENV{right}; display: block; position: relative; }
43.documents-album .item .actions a.editbox { font-weight: bold; }
44.documents-album .item .tourner button  { padding: 0; border-width: 0px; background-color: transparent; }
45.documents-album .pagination            { margin: 0;}
46
47/* footer */
48.footer-album .bouton.remplir           { font-weight: bold; }
49.boite-album .formulaire_joindre_document { margin: 0; text-align: #ENV{left}; }
50/* boutons */
51.documents-album .item .actions,
52.documents-album .item .actions button,
53.footer-album .bouton,
54.footer-album button                    { font-size: x-small; }
55.boite-album .bouton:hover ,
56.boite-album button:hover               { cursor: pointer; }
57/* reveal */
58.documents-album .item .actions > *:not(.editbox),
59.documents-album .item .tourner,
60.boite-album .reveal                    { opacity: .1; }
61.documents-album .item:hover .actions > *,
62.documents-album .item:hover .tourner,
63.header-album:hover .reveal,
64.footer-album:hover .reveal,
65.boite-album .reveal:focus              { opacity: 1; }
66/* header + document + footer */
67.boite-album.editable .header-album.hover,
68.boite-album.editable .header-album:hover,
69.boite-album.editable .item.hover       { background-color: [#(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
70.boite-album:not(.editable) .liste_items .item:hover,
71.documents-album:not(.editable) .item:hover { background-color: transparent; }
72
73
74/*
75    ALBUMOTHEQUE
76    ============
77*/
78.albums #navigation,
79.albumotheque                           { margin-top: 2.0775em; } /* = marging-top de li.sous_navigation */
80.albumotheque .liste-albums .boite-album:first-child { margin-top: 1em; }
81/* pagination et tri : classe «simple» */
82.albums .pagination.simple,
83.albums .tri.simple                     { background-color: transparent; border-width: 0; margin: 0; }
84.albums .pagination.simple              { border-top-width: 1px; }
85.albums .pagination.simple,
86.albums .pagination.simple .on,
87.albums .tri.simple,
88.albums .tri.simple .on                 { font-weight: normal; background-color: transparent; }
89.albums .pagination.simple .on,
90.albums .tri.simple .on                 { color: #000; }
91.albums .pagination.simple .sep,
92.albums .tri.simple .sep                { color: #bbb; }
93
94
95/*
96    FILTRES
97    =======
98    les listes ul.liste-items sont plutôt prévues pour des menus,
99    mais là il s'agit de filtres : il faut donc adapter un peu.
100    on rajoute la classe .filtres aux ul.liste-items pour cibler nos modifs
101*/
102.navigation-albums .titre-liste         { margin-bottom: .25em; }
103.navigation-albums .titre-liste img     { vertical-align: middle; }
104.navigation-albums .liste-items .item   { padding-top: .25em; padding-bottom: .25em; } /* les li.items sont trop larges */
105.navigation-albums .liste-items .item:last-child { border-bottom: 0 none; } /* virer les bordures en bas */
106.navigation-albums .liste-items         { border-top: 0 none; } /* virer les bordures */
107.navigation-albums .liste-items .item a img { vertical-align: middle; } /* icones bien centrées */
108.navigation-albums .liste-items .sep    { color: #bbb; }
109.navigation-albums .liste-items+.pagination { margin: -1.385em 0 1.385em; } /* cf. margin-bottom .liste-items */
110.navigation-albums .liste-items .item:hover .reveal { opacity: .4; }
111.navigation-albums .liste-items .item:hover .reveal:hover { opacity: 1; }
112.navigation-albums .liste-items.extensions .item:not(.sep) { text-transform: uppercase; font-size: .9em; }
113/* inline */
114.navigation-albums .liste-items.inline .item { display: inline; padding: 0; border: 0 none; }
115.navigation-albums .liste-items.inline .sep { line-height: 1.66; }
116/* recherche */
117.navigation-albums input.autocomplete   { width: 100%; box-sizing: border-box; font-size: .9em; margin: .33em 0; } /* formulaire recherche */
118.navigation-albums .icone               { z-index: 1; }
119.navigation-albums .icone.recherche     { float: #ENV{right}; line-height: 0; } /* icone loupe */
120.navigation-albums .icone.dropdown.s16  { background: url\(#CHEMIN_IMAGE{dropdown-16.png}\) no-repeat left bottom; }
121.navigation-albums .icone.reveal        { opacity: .25; }
122.navigation-albums .icone.reveal:hover  { opacity: 1; }
123.navigation-albums .liste-items .selection { padding-left: 16px; } /* = largeur icone */
124
125
126/*
127    BOITE COMPLEMENT OBJET
128    ======================
129*/
130.albums-lies .formulaire_ajouter_album  { margin-bottom: 0; }
131.formulaire_ajouter_album input.identifiants { width: 50%; }
132.formulaire_ajouter_album .documents    { margin-bottom: 0; padding-bottom: 0; }
133
134
135/*
136    GLISSER-DEPOSER
137    ===============
138*/
139#portfolios.cible-album,
140.boite-album.cible-album ,               { position: relative; } /* pour .cible-album */
141.cible-album:after                       {
142                                         position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; content: " ";
143                                         outline: 2px dashed #GET{foncee};
144                                         }
145.placeholder-album                       { height: 1em; background-color:#GET{claire}; }
146#portfolios .liste_items.temp            { border: 0 none; }
147.cible-album .liste_items.temp           { height: 1.5em; }
148#albums .item.drag,
149#portfolios .item.drag                   { opacity: .66; }
150#albums .ui-sortable .item:hover,
151#portfolios .ui-sortable .item:hover     { cursor: move; /*grab*/ }
152#albums .ui-sortable .item:active,
153#portfolios .ui-sortable .item:active    { cursor: move; }
154/* documents déplacés */
155#albums .item.deplace .mode,
156#albums .item.deplace .actions,
157#albums .item.deplace .tourner,
158#albums .item.deplace .sanstitre,
159#portfolios .item.deplace .mode,
160#portfolios .item.deplace .actions,
161#portfolios .item.deplace .tourner       { display: none; }
162.formulaire_albums_deplacer_documents .fermer { float: #ENV{right}; }
163.formulaire_albums_deplacer_documents .fermer:hover { cursor: pointer; }
164.formulaire_albums_deplacer_documents .titrounet,
165.formulaire_albums_deplacer_documents .titrounet img { float: #ENV{left}; }
166.formulaire_albums_deplacer_documents .titrounet img { margin-#ENV{right}: 5px; }
167
168
169/*
170    FICHE D'UN ALBUM
171    ================
172*/
173/* navigation latérale : utilisations */
174.utilisations-albums .dissocier         { float: #ENV{right}; }
175/* mode édition -> docs : cacher les balises et les boutons pour changer de mode */
176.album_edit .lat #documents_joints .raccourcis,
177.album_edit .lat #documents_joints .mode { display: none; }
178
179
180/*
181    EDITION
182    =======
183*/
184.menu-edition-albums                    { margin-top: 2.0775em; } /* = marging-top de li.sous_navigation */
185.menu-edition-albums img                { vertical-align: middle; }
186.menu-edition-albums .sep               { margin: 0 .33em; }
187.documents-album.colonne .item,
188.boite-album.colonne .header-album,
189.boite-album.colonne .footer-album      { padding: 10px 5px; }
190.documents-album.colonne .item:first-child { border-top-width: 1px; border-top-color: inherit; }
191.documents-album.colonne .tourner form  { float: #ENV{right}; clear: both; }
192.documents-album.colonne .item > a,
193.documents-album.colonne .infos         { display: block; float: none;  width: 100%;  text-align: center; }
194.documents-album.colonne .item > a      { margin: auto; }
195.documents-album.colonne .infos         { clear: both; margin: .33em 0; }
196.lat .formulaire_ajouter_album          { margin-top: 2.0775em; }
197.lat .formulaire_ajouter_album > *      { font-size: .9em; }
198/* formulaire balise */
199.balise-album .code-balise              { text-align: center; }
200.balise-album .code-balise:not(.perso)  {  }
201.balise-album .code-balise.perso        {  }
202.balise-album .code-balise:hover        { cursor: pointer; }
203.balise-album .saisie_oui_non .choix    { display: inline-block; }
204.balise-album .boutons input.personnaliser { display: block; margin: 0 auto; font-size: smaller; font-weight: bold; font-family: unset; color:[#(#GET{claire}|couleur_foncer)]; }
205.boite-album .balise-album,
206.boite-album .balise-album .boutons     { margin: 0; background-color: transparent; border-width: 0; }
207.boite-album .balise-album              { padding: 10px 5px; }
208.boite-album .balise-album.edition      { background-color: [#(#GET{claire}|couleur_eclaircir|couleur_eclaircir)]; }
209
210
211/*
212    LISTE CHOISIR
213    =============
214*/
215.liste-albums.choisir .header           { padding: 5px; }
216.liste-albums.choisir .titre            { margin: 0; }
217.liste-albums.choisir .formulaire_recherche,
218.liste-albums.choisir .filtres          { margin: 0; }
219.liste-albums.choisir .filtres          { display: block; margin-bottom: 5px; }
220.liste-albums.choisir .filtres li       { display: inline-block; margin-right: .25em; }
221.liste-albums.choisir .filtres li img   { vertical-align: middle; }
222
223
224/*
225    MODELE
226    ======
227*/
228<INCLURE{css/albums.css}>
229/* pour l'espace privé */
230.album.right                         { float: #ENV{right}; }
231.album.left                          { float: #ENV{left}; }
232.album.center                        { margin-left: auto; margin-right: auto; }
233#wysiwyg .album.vignettes .label     { display: inline; color: inherit; }
Note: See TracBrowser for help on using the repository browser.