Activation de l'ordonnancement par drag and drop que quand c'est possible (permission...

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

diff --git a/skins/portfolio_style.css.dtml b/skins/portfolio_style.css.dtml
index 2325550..c7bae6c 100755 (executable)
--- a/skins/portfolio_style.css.dtml
+++ b/skins/portfolio_style.css.dtml
@@ -129,8 +129,8 @@ table.metadata_category select:focus {
   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;
@@ -160,19 +160,29 @@ table.metadata_category select:focus {
   font-size: &dtml-fontSmallSize;;
 }
 
-div.lightbox { /*the lightbox itself*/
-  min-height:300px;
+#lightbox_toolbar {
+       text-align: right;
+}
+
+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 {
-    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 {
@@ -257,7 +267,7 @@ div.lightbox { /*the lightbox itself*/
 
 /* slide del */
 .lightbox .slide-del {
-  margin-left:200px;
+  margin-left:<dtml-var expr="slide_size - 22">px;
   margin-top:5px;
   width:18px;
   height:19px;
@@ -271,6 +281,25 @@ div.lightbox { /*the lightbox itself*/
   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 {
@@ -302,17 +331,28 @@ div.lightbox { /*the lightbox itself*/
   border-radius:3px;
   width:0;
   margin-left:11px;
-  top:208px;
+  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;
   z-index:3;
-  font-size:27px;
+  font-size:12px;
   white-space:nowrap;
 }
 
+.image_toolbar span {
+       vertical-align:9px;
+}
+
 /*
 .image_toolbar img {
   margin-left: 4px;
@@ -324,7 +364,7 @@ div.lightbox { /*the lightbox itself*/
   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 {
@@ -338,8 +378,8 @@ div.lightbox { /*the lightbox itself*/
 }
 
 #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;
@@ -388,7 +428,7 @@ div.lightbox { /*the lightbox itself*/
 }
 
 #cart_slide[id] {
-  background:no-repeat url(&dtml-portal_url;/cart-slide-background.png);;
+  background:no-repeat url(&dtml-portal_url;/cart-slide-background.png);
 }
 
 .wdgt-buyable-items {
@@ -444,7 +484,7 @@ input.add-to-cart-btn {
   border:none;
   filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='&dtml-portal_url;/add_to_cart.png');
   left:<dtml-var expr="slide_size - 47">px;
-  top:2.5em;;
+  top:2.5em;
 }
 
 input.add-to-cart-btn[class] {
@@ -480,6 +520,26 @@ th.num {
   color: &dtml-messageFontColor;;
 }
 
+/* drag and drop */
+#lightbox img,
+#lightbox a {
+       user-drag: none;
+       -moz-user-select: none;
+       -webkit-user-drag: none;
+}
+
+*[draggable=true] {
+       -moz-user-select:none;
+       -khtml-user-drag: element;
+       -webkit-user-drag: element;
+       -khtml-user-select: none;
+       -webkit-user-select: none;
+}
+
+.lightbox span.dragover {
+/*  width: <dtml-var expr="slide_size - 10">px;*/
+       border-right: 10px solid &dtml-outlineColor;;
+}
 /* 
 </dtml-with> 
 </dtml-with>