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

Last change on this file since 108002 was 108002, checked in by cedric@…, 3 years ago

Permettre de crayonner le titre d'un document qu'on vient d'ajouter a un album et qui n'a pas encore de titre en affichant la mention 'sans titre'

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