tweaking css...

Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>

ui (gen4)/Makefile

@@ -115,7 +115,9 @@ zip: $(APP_ZIP)
 node-deps:
 	npm install
 
-dev: $(CSS_FILES)
+css: $(CSS_FILES)
+
+dev: css
 	#unzip -uj $(wildcard targets/node-webkit/node-webkit-*-win-ia32.zip) -d .
 	#rm -f nwsnapshot.exe credits.html
 	#chmod +x *.{exe,dll}

ui (gen4)/css/layout.css

@@ -283,13 +283,36 @@ stretching in width... */
 	 	affected by filters... */
   background: no-repeat 50% transparent;
   background-size: contain;
-  border: solid 1.5px transparent;
+  border: solid 3.75px transparent;
 }
 /*
 .current.image {
 	border: solid 5px red;
 }
 */
+.shadow {
+  position: absolute;
+  overflow: visible;
+  width: 300px;
+  height: 300px;
+  background: black;
+  -webkit-transition: all 0.1s ease-in;
+  -moz-transition: all 0.1s ease-in;
+  -ms-transition: all 0.1s ease-in;
+  -o-transition: all 0.1s ease-in;
+  transition: all 0.1s ease-in;
+}
+.shadow,
+.shadow .image {
+  -webkit-transform-origin: 0 0;
+  -moz-transform-origin: 0 0;
+  -ms-transform-origin: 0 0;
+  -o-transform-origin: 0 0;
+  transform-origin: 0 0;
+}
+.image.moving {
+  visibility: hidden;
+}
 .current-marker {
   position: absolute;
   border: solid 5px red;

ui (gen4)/css/layout.less

@@ -11,7 +11,8 @@
 //@image-tile-size: 100vmax;
 
 // these are relative to image tile size...
-@image-border: @image-tile-size/200;
+//@image-border: @image-tile-size/200;
+@image-border: @image-tile-size/80;
 @ribbon-margin: @image-tile-size/30;
 @ribbon-mark-offset: @image-tile-size/200;
 
@@ -423,6 +424,34 @@ stretching in width... */
 }
 */
 
+.shadow {
+	position: absolute;
+	overflow: visible;
+
+	width: auto;
+	height: auto;
+
+	background: black;
+
+	-webkit-transition: all 0.1s ease-in;
+	-moz-transition: all 0.1s ease-in;
+	-ms-transition: all 0.1s ease-in;
+	-o-transition: all 0.1s ease-in;
+	transition: all 0.1s ease-in;
+}
+.shadow,
+.shadow .image {
+	-webkit-transform-origin: 0 0;
+	-moz-transform-origin: 0 0;
+	-ms-transform-origin: 0 0;
+	-o-transform-origin: 0 0;
+	transform-origin: 0 0;
+}
+.image.moving {
+	visibility: hidden;
+}
+
+
 .current-marker {
 	position: absolute;
 	border: solid 5px red;

ui (gen4)/index.html

@@ -8,6 +8,7 @@
 <!-- XXX remove before use... -->
 <style>
 
+/* show image gid... */
 .image:after {
 	content: attr(gid);
 	display: block;
@@ -28,32 +29,6 @@
 }
 */
 
-.shadow {
-	position: absolute;
-	overflow: visible;
-	width: auto;
-	height: auto;
-
-	background: black;
-
-	-webkit-transition: all 0.1s ease-in;
-	-moz-transition: all 0.1s ease-in;
-	-ms-transition: all 0.1s ease-in;
-	-o-transition: all 0.1s ease-in;
-	transition: all 0.1s ease-in;
-}
-.shadow,
-.shadow .image {
-	-webkit-transform-origin: 0 0;
-	-moz-transform-origin: 0 0;
-	-ms-transform-origin: 0 0;
-	-o-transform-origin: 0 0;
-	transform-origin: 0 0;
-}
-.image.moving {
-	visibility: hidden;
-}
-
 .shadow {
 	z-index: 4000;
 }

ui (gen4)/viewer.js

@@ -1413,6 +1413,7 @@ module.GlobalStateIndicator = Feature({
 
 //---------------------------------------------------------------------
 // XXX console / log / status bar
+// XXX title bar