factorisation
[Portfolio.git] / skins / portfolio_style.css.dtml
1 /*
2 <dtml-with base_properties>
3 <dtml-with portfolio_properties>
4
5
6 */
7 /* Photo / Portfolio */
8 .photo_viewer {
9 width:100%;
10 margin-bottom:1px;
11 }
12
13 .photo_viewer #medium_image {
14 height:603px; /* todo : paramètre */
15 text-align:center;
16 vertical-align:middle;
17 }
18
19 #medium_image.selected {
20 background: &dtml-medium_image_background;;
21 }
22
23 .photo_viewer td {
24 padding:0;
25 }
26
27 .photo_viewer .metadata_bar {
28 background: &dtml-metadata_bar_background;;
29 width:20em;
30 }
31
32 .image_metadata {
33 padding: 0 1em 1em 1em;
34 }
35
36 .photo_viewer .photographer {
37 color: &dtml-photographer_font_color;;
38 }
39
40 .photo_viewer .title_summary {
41 color: &dtml-title_font_color;;
42 }
43
44 .photo_viewer .description {
45 padding-top:1.5em;
46 max-height:22em;
47 overflow-y:hidden;
48 }
49
50 .photo_viewer .description:hover {
51 max-height:none;
52 }
53
54 .photo_viewer ul.keywords {
55 padding: 0 0 1em 0;
56 margin:0;
57 text-align:left;
58 }
59
60 .photo_viewer .keywords li {
61 display: inline;
62 padding-left: 10px;
63 background: url(&dtml-portal_url;/keyword_sep.gif) left no-repeat;
64 }
65
66 .photo_viewer .keywords li:first-child {
67 padding-left:0;
68 background:none;
69 }
70
71
72 table.metadata_category {
73 color: &dtml-metadata_edit_label_color;;
74 background: &dtml-metadata_edit_panel_background;;
75 font-size: 11px;
76 margin-top:1px;
77 }
78
79 table.metadata_category th {
80 text-align:right;
81 vertical-align:top;
82 font-weight:normal;
83 }
84
85 table.metadata_category tr.last td,
86 table.metadata_category tr.last th {
87 padding-bottom:4px;
88 }
89
90 table.metadata_category tr.name td,
91 table.metadata_category tr.name th {
92 margin-top: 4px;
93 border-top:1px solid &dtml-metadata_panel_border_sep_color;;
94 text-align:left;
95 padding: 4px 0 2px 10px;
96 }
97
98 table.metadata_category td {
99 padding:1px 8px;
100 }
101
102
103 table.metadata_category input,
104 table.metadata_category textarea,
105 table.metadata_category select {
106 width:100%;
107 color:&dtml-metadata_input_font_color;;
108 font-size:11px;
109 font-family: Arial,Helvetica,Geneva,Swiss,SunSans-Regular,sans-serif;
110 border:1px solid &dtml-metadata_input_border_color;;
111 background: &dtml-metadata_input_background;;
112 }
113
114 table.metadata_category input:hover,
115 table.metadata_category textarea:hover,
116 table.metadata_category select:hover {
117 background: &dtml-metadata_input_hover_background;;
118 }
119
120 table.metadata_category input:focus,
121 table.metadata_category textarea:focus,
122 table.metadata_category select:focus {
123 background: &dtml-metadata_input_focus_background;;
124 color: &dtml-metadata_input_focus_font_color;;
125 border: 1px solid &dtml-metadata_input_border_focus_color;;
126 }
127
128 .portfolio_lightbox a {
129 background: &dtml-portfolio_slide_background;;
130 color: &dtml-fontColor;;
131 display:block;
132 width: <dtml-var expr="thumb_size + 16">px;
133 height: <dtml-var expr="thumb_size + 102">px;
134 display:block;
135 text-align:center;
136 float:left;
137 padding-top:8px;
138 margin-top : 6px;
139 margin-left : 6px;
140 overflow:hidden;
141 }
142
143 .portfolio_lightbox a:hover {
144 background:&dtml-portfolio_slide_hover_background;;
145 color: &dtml-linkHoverColor;;
146 }
147
148 .portfolio_lightbox img {
149 border:none;
150 }
151
152 .portfolio_lightbox h3 {
153 margin:5px 0;
154 padding:0 8px;
155 text-align:left;
156 }
157 .portfolio_lightbox div {
158 padding:0 8px;
159 text-align:left;
160 font-size: &dtml-fontSmallSize;;
161 }
162
163 #lightbox_toolbar {
164 text-align: right;
165 }
166
167 div.lightbox {
168 /* The lightbox itself.
169 Force this div to fit grid
170 effective height.
171 */
172 overflow:hidden;
173 }
174
175 .photo-drop-target {
176 background: url('&dtml-portal_url;/image-upload-dd-target.png') no-repeat center center;
177 min-height:300px;
178 }
179
180 .lightbox span {
181 width: &dtml-slide_size;px;
182 height: &dtml-slide_size;px;
183 display:block;
184 float:left;
185 transition: width 1s, opacity 0.5s;
186 }
187
188 .lightbox a.slide {
189 position:absolute;
190 display:block;
191 width: &dtml-slide_size;px;
192 height: &dtml-slide_size;px;
193 background:&dtml-slide_background;;
194 border: 1px solid &dtml-backgroundColor;;
195 }
196
197 .lightbox a.slide:hover {
198 background:&dtml-slide_hover_background;;
199 }
200
201 .lightbox .selected a.slide,
202 .lightbox a.selected:hover {
203 background:&dtml-slide_selected_background;;
204 }
205
206 .lightbox .hidden-slide a.slide,
207 .lightbox a.hidden-slide:hover {
208 background:url(&dtml-portal_url;/hidden-slide-bg.png);
209 }
210
211 .lightbox .slide img {
212 position:absolute;
213 border: 1px solid black;
214 }
215
216 .lightbox span.button {
217 background:none;
218 position: absolute;
219 }
220
221 .lightbox span[class].button {
222 visibility:hidden;
223 }
224
225 .lightbox span:hover span.button {
226 visibility:visible;
227 }
228
229 .lightbox .slide-select,
230 .lightbox .slide-deselect {
231 margin-left:10px;
232 margin-top:7px;
233 width:12px;
234 height:17px;
235 }
236
237 .lightbox .slide-select img {
238 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-select-btn.png');
239 }
240
241 .lightbox .slide-select[class] img {
242 background: url(&dtml-portal_url;/slide-select-btn.png);
243 }
244
245 .lightbox .slide-deselect img {
246 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-deselect-btn.png');
247 }
248
249 .lightbox .slide-deselect[class] img {
250 background: url(&dtml-portal_url;/slide-deselect-btn.png);
251 }
252
253 .lightbox .slide-cart {
254 margin-left:30px;
255 margin-top:7px;
256 width:12px;
257 height:17px;
258 }
259
260 .lightbox .slide-cart img {
261 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-cart-btn.png');
262 }
263
264 .lightbox .slide-cart[class] img {
265 background: url(&dtml-portal_url;/slide-cart-btn.png);
266 }
267
268 /* slide del */
269 .lightbox .slide-del {
270 margin-left:<dtml-var expr="slide_size - 22">px;
271 margin-top:5px;
272 width:18px;
273 height:19px;
274 }
275
276 .lightbox .slide-del img {
277 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-del-btn.png');
278 }
279
280 .lightbox .slide-del[class] img {
281 background: url(&dtml-portal_url;/slide-del-btn.png);
282 }
283
284 /* slide checkbox */
285 .lightbox .cb {
286 margin-left: <dtml-var expr="slide_size - 22">px;
287 margin-top: 5px;
288 width:auto;
289 height:auto;
290 }
291
292 .lightbox .cb input[checked] {
293 visibility: visible;
294 }
295
296 .lightbox .zero_opacity {
297 opacity:0;
298 }
299
300 .lightbox .zero_width {
301 width:0;
302 }
303
304 .lightbox .slide-hide,
305 .lightbox .slide-show {
306 width:16px;
307 height:15px;
308 }
309
310 .lightbox .slide-hide img {
311 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-eye-open-btn.png');
312 }
313
314 .lightbox .slide-hide[class] img {
315 background: url(&dtml-portal_url;/slide-eye-open-btn.png);
316 }
317
318 .lightbox .slide-show img {
319 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/slide-eye-closed.png');
320 }
321
322 .lightbox .slide-show[class] img {
323 background: url(&dtml-portal_url;/slide-eye-closed.png);
324 }
325
326 .lightbox span.upload-progress {
327 display: block;
328 position:relative;
329 background:#ef8e32;
330 height:5px;
331 border-radius:3px;
332 width:0;
333 margin-left:11px;
334 top:<dtml-var expr="slide_size - 8">px;
335 }
336
337 .lightbox span.label {
338 position: relative;
339 padding-left:0.5em;
340 top: -4px;
341 /* border: 1px solid red;*/
342 }
343
344 .image_toolbar {
345 background: url(&dtml-portal_url;/image_toolbar_bg.gif) repeat-x;
346 position:relative;
347 z-index:3;
348 font-size:12px;
349 white-space:nowrap;
350 }
351
352 .image_toolbar span {
353 vertical-align:9px;
354 }
355
356 /*
357 .image_toolbar img {
358 margin-left: 4px;
359 border:0;
360 }*/
361
362 #film_bar {
363 background:#555;
364 overflow:hidden;
365 position:relative;
366 width:100%;
367 height: <dtml-var expr="thumb_size/2 + 12">px;
368 }
369
370 #film_bar table {
371 position:absolute;
372 border-collapse:collapse;
373 }
374
375 #film_bar td {
376 padding:0;
377 border:1px solid #484848;
378 }
379
380 #film_bar a {
381 width: <dtml-var expr="thumb_size/2 + 10">px;
382 height: <dtml-var expr="thumb_size/2 + 10">px;
383 display:block;
384 text-align:center;
385 vertical-align:middle;
386 }
387
388 #film_bar a:hover,
389 #film_bar a.selected {
390 background:#727272;
391 }
392
393 #film_bar a.displayed {
394 background:#bfbfbf;
395 }
396
397 #film_bar img{
398 border:none;
399 }
400
401 .jsslider {
402 position:absolute;
403 height:13px;
404 width:0px;
405 background: #000;
406 }
407
408 .jsslider span {
409 position:absolute;
410 width:0px;
411 height:11px;
412 background:url(&dtml-portal_url;/slider_bg.gif);
413 margin:1px 0;
414 font-size:0; /*IE 6 hack */
415 }
416
417 #cart_slide {
418 position:absolute;
419 top:25px;
420 left:-190px;
421 width:226px;
422 height:237px;
423 visibility:hidden;
424 font-size:15px;
425 line-height:18px;
426 padding-top:11px;
427 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/cart-slide-background.png');
428 }
429
430 #cart_slide[id] {
431 background:no-repeat url(&dtml-portal_url;/cart-slide-background.png);
432 }
433
434 .wdgt-buyable-items {
435 white-space:normal;
436 width: &dtml-slide_size;px;
437 height: &dtml-slide_size;px;
438 position:absolute;
439 margin:2px;
440 color:#fff;
441 }
442
443 .wdgt-buyable-items input {
444 font-size:70%;
445 }
446
447 .ppt-description {
448 color:white;
449 text-align:left;
450 visibility:hidden;
451 display:none;
452 padding-right:45px;
453 padding-top:0.5em;
454 }
455 .panel-background {
456 width: &dtml-slide_size;px;
457 height: &dtml-slide_size;px;
458 background:#3e2b14;
459 position:absolute;
460 opacity:0.9;
461 filter: alpha(opacity='90');
462 }
463
464 .confirm-message {
465 position:absolute;
466 color: &dtml-messageFontColor;;
467 padding:3px;
468 background: &dtml-messageBackgroundColor;;
469 }
470
471 #cart_slide .confirm-message {
472 position:static;
473 margin:2px;
474 text-align:center;
475 vertical-align:middle;
476 }
477
478
479 input.add-to-cart-btn {
480 position:absolute;
481 background:transparent;
482 width:45px;
483 height:43px;
484 border:none;
485 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/add_to_cart.png');
486 left:<dtml-var expr="slide_size - 47">px;
487 top:2.5em;
488 }
489
490 input.add-to-cart-btn[class] {
491 background:url(&dtml-portal_url;/add_to_cart.png);
492 }
493
494 tbody.total th {
495 color:#fff;
496 }
497
498 tbody.total td {
499 font-weight:bold;
500 font-size:110%;
501 background:#151515;
502 }
503
504 td.num,
505 th.num {
506 text-align:right;
507 padding-right:0.5em;
508 border-left:1px solid black;
509 }
510
511 .sell_steps_bar td {
512 font-size:120%;
513 background:#000 url(&dtml-portal_url;/sellbar-arrow.gif) no-repeat right;
514 height:40px;
515 vertical-align:middle;
516 padding:0 1em 0 0.5em;
517 }
518
519 .sell_steps_bar td.done {
520 color: &dtml-messageFontColor;;
521 }
522
523 /*
524 </dtml-with>
525 </dtml-with>
526 */