Scroll vers l'image en cours d'upload.

[Portfolio.git] / skins / portfolio_style.css.dtml

diff --git a/skins/portfolio_style.css.dtml b/skins/portfolio_style.css.dtml
index d3103cb..23a3674 100755 (executable)
--- a/skins/portfolio_style.css.dtml
+++ b/skins/portfolio_style.css.dtml
@@ -1,8 +1,8 @@
 /*
 <dtml-with base_properties>
 <dtml-with portfolio_properties>
 /*
 <dtml-with base_properties>
 <dtml-with portfolio_properties>

-$Id: portfolio_style.css.dtml 1312 2009-08-26 09:01:06Z pin $
-$URL: http://svn.luxia.fr/svn/labo/projects/zope/Portfolio/trunk/skins/portfolio_style.css.dtml $
+
+

 */
 /* Photo / Portfolio */
 .photo_viewer {
 */
 /* Photo / Portfolio */
 .photo_viewer {


@@ -129,8 +129,8 @@ table.metadata_category select:focus {
   background: &dtml-portfolio_slide_background;;
   color: &dtml-fontColor;;
   display:block;
   background: &dtml-portfolio_slide_background;;
   color: &dtml-fontColor;;
   display:block;

-  width: <dtml-var expr="thumb_width + 16">px;/*&dtml-slide_size;px;*/
-  height: 256px;
+  width: <dtml-var expr="thumb_size + 16">px;
+  height: <dtml-var expr="thumb_size + 102">px;

   display:block;
   text-align:center;
   float:left;
   display:block;
   text-align:center;
   float:left;


@@ -160,12 +160,25 @@ table.metadata_category select:focus {
   font-size: &dtml-fontSmallSize;;
 }
 
   font-size: &dtml-fontSmallSize;;
 }
 

+div.lightbox {
+  /* The lightbox itself.
+     Force this div to fit grid
+     effective height.
+  */
+  overflow:hidden; 
+}
+
+.photo-drop-target {
+  background: url('&dtml-portal_url;/image-upload-dd-target.png') no-repeat center center;
+  min-height:300px;
+}

 
 .lightbox span {
 
 .lightbox span {

-    width: &dtml-slide_size;px;
-    height: &dtml-slide_size;px;
-    display:block;
-    float:left;
+  width: &dtml-slide_size;px;
+  height: &dtml-slide_size;px;
+  display:block;
+  float:left;
+  transition: width 1s, opacity 0.5s;

 }
 
 .lightbox a.slide {
 }
 
 .lightbox a.slide {


@@ -250,7 +263,7 @@ table.metadata_category select:focus {
 
 /* slide del */
 .lightbox .slide-del {
 
 /* slide del */
 .lightbox .slide-del {

-  margin-left:200px;
+  margin-left:<dtml-var expr="slide_size - 22">px;

   margin-top:5px;
   width:18px;
   height:19px;
   margin-top:5px;
   width:18px;
   height:19px;


@@ -264,6 +277,25 @@ table.metadata_category select:focus {
   background: url(&dtml-portal_url;/slide-del-btn.png);
 }
 
   background: url(&dtml-portal_url;/slide-del-btn.png);
 }
 

+/* slide checkbox */
+.lightbox .cb {
+       margin-left: <dtml-var expr="slide_size - 22">px;
+       margin-top: 5px;
+       width:auto;
+       height:auto;
+}
+
+.lightbox .cb input[checked] {
+       visibility: visible;
+}
+
+.lightbox .zero_opacity {
+       opacity:0;
+}
+
+.lightbox .zero_width {
+       width:0;
+}

 
 .lightbox .slide-hide,
 .lightbox .slide-show {
 
 .lightbox .slide-hide,
 .lightbox .slide-show {


@@ -287,6 +319,24 @@ table.metadata_category select:focus {
   background: url(&dtml-portal_url;/slide-eye-closed.png);
 }
 
   background: url(&dtml-portal_url;/slide-eye-closed.png);
 }
 

+.lightbox span.upload-progress {
+  display: block;
+  position:relative;
+  background:#ef8e32;
+  height:5px;
+  border-radius:3px;
+  width:0;
+  margin-left:11px;
+  top:<dtml-var expr="slide_size - 8">px;
+}
+
+.lightbox span.label {
+  position: relative;
+  padding-left:0.5em;
+  top: -4px;
+/*  border: 1px solid red;*/
+}
+

 .image_toolbar {
   background: url(&dtml-portal_url;/image_toolbar_bg.gif) repeat-x;
   position:relative;
 .image_toolbar {
   background: url(&dtml-portal_url;/image_toolbar_bg.gif) repeat-x;
   position:relative;


@@ -306,7 +356,7 @@ table.metadata_category select:focus {
   overflow:hidden;
   position:relative;
   width:100%;
   overflow:hidden;
   position:relative;
   width:100%;

-  height: <dtml-var expr="thumb_height/2 + 12">px;;
+  height: <dtml-var expr="thumb_size/2 + 12">px;;

 }
 
 #film_bar table {
 }
 
 #film_bar table {


@@ -320,8 +370,8 @@ table.metadata_category select:focus {
 }
 
 #film_bar a {
 }
 
 #film_bar a {

-  width: <dtml-var expr="thumb_width/2 + 10">px;;
-  height: <dtml-var expr="thumb_height/2 + 10">px;;
+  width: <dtml-var expr="thumb_size/2 + 10">px;;
+  height: <dtml-var expr="thumb_size/2 + 10">px;;

   display:block;
   text-align:center;
   vertical-align:middle;
   display:block;
   text-align:center;
   vertical-align:middle;