source: spip-zone/_plugins_/albums/trunk/css/albums_prive.css.html @ 58967

Last change on this file since 58967 was 58967, checked in by tcharlss@…, 9 years ago
  1. On supprime le modèle 'diaporama innerfade' et le dossier javascript correspondant (à commiter plus tard sur le plugin du même nom).
  1. Modèles : quelques ajustements.

Je ne suis pas sûr de la pertinence d'avoir la possibilité d'afficher le portfolio d'un article via la balise album.

  • Sur la v1, on utilise la balise <album|id_article=10>
  • Sur la v2, on est obligé d'appeler comme ça : <album0|id_article=10> car il faut obligatoirement renseigner l'id pour un album inclus en modèle. Ca n'a pas beaucoup de sens pour le rédacteur. Ce serait plutôt à l'extension média de proposer un modèle pour ça non (portfolio10 par ex.) ?

Bref, pour l'instant j'ai laissé cette option.
Toutefois, le code actuel du portfolio ne choisit que les images, et inversement en mode liste.
Quelle est la raison pour ça ?

Provisoirement je l'ai remplacé par un [(#INCLURE{fond=inclure/documents})] le temps de tirer ça au clair.

File size: 8.8 KB
Line 
1#CACHE{0}
2[(#REM)<style>]
3#HTTP_HEADER{Content-Type: text/css; charset=iso-8859-15}
4#HTTP_HEADER{Vary: Accept-Encoding}
5
6#SET{claire,##ENV{couleur_claire,edf3fe}}
7#SET{foncee,##ENV{couleur_foncee,3874b0}}
8#SET{background-color,##ENV{background-color,f8f8f8}}
9#SET{gris,#808080} #SET{gris_bordure,#ccc}
10#SET{marge,1em}
11<BOUCLE_marges(DATA){liste .15,.25,.5,.75,1.25,1.5}>
12#SET{marge#VALEUR,(#GET{marge}|mult{#VALEUR})em}
13</BOUCLE_marges>
14#SET{ombre_texte,'text-shadow: 0 0 1px rgba(0,0,0,.3), 1px 1px 0 rgba(0,0,0,.15)'}
15#SET{couleur_texte,#333}
16
17
18/***************/
19/* GENERALITES */
20/***************/
21
22/** modele espace prive **/
23.album_contenu {}
24.album_contenu li { float: left; margin: 0 10px 10px 0; }
25.album_contenu li .spip_logos { float: none; margin: 0; }
26
27/** divers **/
28.albums .opacite {opacity: .5;}
29.albums .relatif {position: relative;}
30.albums .cache_bloc{position:absolute; top:0; display:block; width:100%; height:100%; background:#fff;}
31
32/** bouton action **/
33.albums button:hover,  .albums .clic_repli:hover {cursor:pointer;}
34
35/** logos **/
36.albums .conteneur_logo {position:relative;}
37        .albums .decoration_logo_50 {
38                position:absolute; top:0; left:0; display:block; width:50px; height:50px; content:'';
39                background: url('[(#CHEMIN_IMAGE{album-decoration-50.png})]') 50% 50% no-repeat;
40                }
41        .albums .decoration_logo_24 {
42                position:absolute; top:0; left:0; display:block; width:24px; height:24px; content:'';
43                background: url('[(#CHEMIN_IMAGE{album-decoration-24.png})]') 50% 50% no-repeat;
44                }
45
46
47/***************************/
48/** BLOC COMPLEMENT OBJET **/
49/***************************/
50
51/** titre du bloc **/
52.albums h3.titre {
53        display: block;
54        margin: 10px 0;
55        padding: 2px 10px;
56        padding-left: 25px;
57        /*height: 18px;*/
58        background: url('[(#CHEMIN_IMAGE{album-16.png})]') 2px center no-repeat;
59        background-color: #GET{claire};
60        }       
61/** edition nouvel album **/
62.albums .cadre-formulaire-editer {margin-top: 10px;}
63
64
65/************/
66/** LISTES* */
67/************/
68
69/** TOUTES **/
70.albums .liste{
71        font-size: .9em;
72        color: #GET{couleur_texte};
73        list-style: none;
74        }
75        .albums .liste td h1, .albums .liste td h2, .albums .liste td h3, .albums .liste td h4{margin:0;}
76        /* thead */
77        .albums .liste th {
78                border-bottom-color: [#(#GET{gris}|couleur_luminance{0.3})];
79                background: [#(#GET{claire}|couleur_luminance{0.45})];
80                <BOUCLE_gradient1(DATA){liste webkit,moz,o,ms,''}>
81                background-image: [-(#VALEUR)-]linear-gradient(top, [#(#GET{background-color}|couleur_luminance{0.2})] 0%, [#(#GET{background-color}|couleur_luminance{0.35})] 100%);
82                </BOUCLE_gradient1>
83                [(#GET{ombre_texte})];
84                color: #fff;
85                }
86        /* cellules */
87        .albums .liste td {vertical-align:top;}
88        /* logo */
89        .albums .liste td.logo {width:1px;}
90        /* id */
91        .albums .liste td.id {width:1px; padding-left:#GET{marge.5}; padding-right:#GET{marge.5}; color:#GET{gris}; font-size:1.4em; font-weight:bold;}
92        /* contenu */
93        .albums .liste td.contenu li {white-space:nowrap;}
94        .albums .liste td.contenu img {vertical-align:text-top;}
95        /* actions */
96        .albums .liste td.action {text-align:right; width:40px;}
97
98
99/** LISTE LIES **/
100.albums .liste.lies {}
101        /* conteneur */
102        .albums .liste.lies ul > li {
103                border:1px solid[ (#GET{gris_bordure})];
104                margin-bottom: 10px;
105                }
106                .albums .liste.lies table {margin:0;}
107                        .albums .liste.lies tr {background-color:#GET{background-color};}
108                        .albums .liste.lies tr:hover {background:[#(#GET{claire}|couleur_luminance{0.1})]; cursor:url([(#CHEMIN_IMAGE{curseur-depli-20.png})]),auto;}
109                        .albums .liste.lies ul > li:hover {border-color:#GET{claire};}
110                                /* deplie */
111                        .albums .liste.lies li.deplie {border-color:#GET{claire};}
112                        .albums .liste.lies li.deplie tr {background:#GET{claire};}
113                        .albums .liste.lies li.deplie tr:hover {cursor:url([(#CHEMIN_IMAGE{curseur-repli-20.png})]),auto;}
114                                /* cellules */
115                                .albums .liste.lies td {vertical-align:top;}
116                               
117                /** retouches portfolio documents depliable **/
118                .albums .conteneur_album_portfolio {padding:6px; background-color:#GET{claire};}
119                .albums .album_portfolio {position:relative; padding:0; background: #fff; border: 1px solid #GET{foncee};}
120                        .albums .album_portfolio .bouton.fermer {position:absolute; top:-20px; right:0;}
121                        .albums #portfolios {}
122                                .albums #portfolios h3 {color:#fff; [(#GET{ombre_texte})];
123                                background: [#(#GET{claire}|couleur_luminance{0.45})];
124                                <BOUCLE_gradienth3(DATA){liste webkit,moz,o,ms,''}>
125                                background-image: [-(#VALEUR)-]linear-gradient(top, [#(#GET{background-color}|couleur_luminance{0.2})] 0%, [#(#GET{background-color}|couleur_luminance{0.3})] 100%);
126                                </BOUCLE_gradienth3>
127                                }
128                                /* conteneur de chaque vignette */
129                                .albums #portfolios .liste_items {padding: 0 #GET{marge.25}; margin:0;}
130                                        .albums #portfolios .liste_items button.submit {font-size: .9em;}
131                                        .albums #portfolios .liste_items form.tout_supprimer button{margin: [(#GET{marge.5})] 0;}
132                                /** AJOUT DOCUMENT **/
133                                /* conteneur bouton ajout document */
134                                .albums .album_bouton_ajout{float:right; width:100%; padding:0;}
135                                .albums #formulaire_joindre_document-new {margin: 0;}
136
137
138/** LISTE ASSOCIER **/
139.albums .liste.associer {margin:0;}
140        .albums .filtres.troisieme.associer {margin:[(#GET{marge.25}) ]0;}
141        .albums .liste.associer table {margin-bottom:0; margin-top:#GET{marge.25}; border: 1px solid #GET{gris_bordure};}
142                .albums .liste.associer th {padding:[(#GET{marge.25})];}
143
144
145/** LISTE GALERIE **/
146.albums .liste.galerie {}
147       
148
149
150/** LISTE SELECTEUR **/
151.albums .liste.selecteur {}
152        .albums .liste.selecteur table {margin:0; border:1px solid[ (#GET{gris_bordure})];}
153        .albums .liste.selecteur td.radio {width:1px;}
154        .albums .liste.selecteur td.infos {font-size:.9em;}
155        .albums .liste.selecteur td.infos h3, .albums .liste.selecteur td.infos h4 {font-weight:normal;}
156        .albums .liste.selecteur td.contenu li, .albums .troisieme.selecteur li {padding:0;}
157
158/**********/
159/* MODELE */
160/**********/
161.notice_album {padding: 0 5px; border:none; background:#333; font-size:.7em; font-weight:bold; text-transform:uppercase; color:#fff;}
162.notice_album.statut {background-color:red;}
163       
164
165/***********/
166/* ONGLETS */
167/***********/
168#SET{arrondi,'.4em'}
169
170/** tous **/
171.albums .onglets_simple, .albums .onglets_simple a, .albums .onglets_simple strong {
172        border-color: [(#GET{gris_bordure})];
173        color: [(#GET{couleur_texte})];
174        text-transform: capitalize;
175        }
176        /* survol */
177.albums .onglets_simple a:hover {color:#GET{foncee}; text-decoration: none;}
178        /* on */
179.albums .onglets_simple strong.on {color:#000; background-color:#fff;}
180
181/** premier rang **/
182.albums .onglets_simple.premier {
183        <BOUCLE_gradient2(DATA){liste webkit,moz,o,ms,''}>
184        background-image: [-(#VALEUR)-]linear-gradient(top, rgba(0,0,0,0) 70%, rgba(0,0,0,.07) 100%);
185        </BOUCLE_gradient2>
186        }
187.albums .onglets_simple.premier strong, .albums .onglets_simple.premier a, .albums .onglets_simple.premier .off {
188        border-top-left-radius: [(#GET{arrondi})];
189        border-top-right-radius: [(#GET{arrondi})];
190        }
191        /* on */
192.albums .onglets_simple.premier strong.on {border-bottom-color:#fff;}
193        /* off */
194.albums .onglets_simple.premier .off {
195        background-color: #EEEEEE;
196        border: 1px solid #909090;
197        border-bottom: none;
198        display: block;
199        float: left;
200        margin-left: 5px;
201        padding: 4px 7px;
202        color:#6C6C6C;
203        opacity:.4;
204        }
205
206/** second rang **/
207.albums .onglets_simple.second strong, .albums .onglets_simple.second a, .albums .onglets_simple.second .off{margin:0; padding:.15em .6em; border-radius:0; margin-left:-1px;}
208.albums .onglets_simple.second li:first-child strong, .albums .onglets_simple.second li:first-child a{
209        border-top-left-radius: [(#GET{arrondi})];
210        border-bottom-left-radius: [(#GET{arrondi})];
211        border-right: none;
212        }
213.albums .onglets_simple.second li:last-child strong, .albums .onglets_simple.second li:last-child a, .albums .onglets_simple.second li:last-child .off{
214        border-top-right-radius: [(#GET{arrondi})];
215        border-bottom-right-radius: [(#GET{arrondi})];
216        }
217        /* on */
218.albums .onglets_simple.second strong.on, .albums .onglets_simple.second .contenus strong.on {background-color:#GET{claire}; color:#fff; [(#GET{ombre_texte})];}
219       
220/** troisieme rang **/
221.albums .filtres.troisieme {margin: 1em 0;}
222.albums .filtres.troisieme li {display:inline-block; margin-right:1em;}
223        .albums .filtres.troisieme a{display: inline-block;}
224                .albums .filtres.troisieme img {padding:1px; border: 1px solid rgba(255,255,255,0);}
225        /* survol */
226        .albums .filtres.troisieme a:hover {opacity:1; text-decoration:none;}
227        .albums .filtres.troisieme a:hover img{background:[#(#GET{claire}|couleur_luminance{0.2})]; border-color:[#(#GET{claire}|couleur_luminance{0.2})];}
228        /* on */
229        .albums .filtres.troisieme .on {opacity: 1;}
230        .albums .filtres.troisieme .on img{background:#GET{claire}; border-color: #GET{foncee};}
231        /* off */
232        .albums .filtres.troisieme .off{opacity:.25; position:relative; display:block;}
233
234
235/* labels */
236.albums .label {padding-top:5px; color:#7f7f7f; font-weight:bold;}
237.albums .onglets_simple.second .label {display:block; float:left; margin-right:.5em;}
238
239
Note: See TracBrowser for help on using the repository browser.