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 /* drag and drop */
 524 #lightbox img,
 525 #lightbox a {
 526         user-drag: none;
 527         -moz-user-select: none;
 528         -webkit-user-drag: none;
 529 }
 530
 531 *[draggable=true] {
 532         -moz-user-select:none;
 533         -khtml-user-drag: element;
 534         -webkit-user-drag: element;
 535         -khtml-user-select: none;
 536         -webkit-user-select: none;
 537 }
 538
 539 .lightbox span.dragover {
 540 /*  width: <dtml-var expr="slide_size - 10">px;*/
 541         border-right: 10px solid &dtml-outlineColor;;
 542 }
 543 /*
 544 </dtml-with>
 545 </dtml-with>
 546 */