flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-11-01 11:50:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-11-03 06:20:16 +03:00
parent e9bfb25e0e
commit 47a31f216e
3 changed files with 2 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
ui (gen4)/css/layout.css
View File

@ -129,7 +129,6 @@ button:hover {
opacity: 0; opacity: 0;
z-index: 10000; z-index: 10000;
/* node-webkit */ /* node-webkit */
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.title-bar:hover { .title-bar:hover {
@ -160,7 +159,6 @@ button:hover {
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
/* node-webkit */ /* node-webkit */
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.title-bar .button:hover { .title-bar .button:hover {
@ -181,7 +179,6 @@ button:hover {
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
/*border: solid blue 1px;*/ /*border: solid blue 1px;*/
box-sizing: border-box; box-sizing: border-box;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -203,7 +200,6 @@ button:hover {
shift the element, when its dimensions change... shift the element, when its dimensions change...
...this is because .ribbon-set will both be used for scaling ...this is because .ribbon-set will both be used for scaling
and aligning... */ and aligning... */
-webkit-transform-origin: top left; -webkit-transform-origin: top left;
-ms-transform-origin: top left; -ms-transform-origin: top left;
transform-origin: top left; transform-origin: top left;
@ -246,10 +242,8 @@ stretching in width... */
display: block; display: block;
/* XXX BUG: setting this will mess up new ribbon creation.... /* XXX BUG: setting this will mess up new ribbon creation....
display: inline-block;*/ display: inline-block;*/
height: auto; height: auto;
/*min-width: 0px;*/ /*min-width: 0px;*/
width: auto; width: auto;
overflow: visible; overflow: visible;
white-space: nowrap; white-space: nowrap;
@ -287,7 +281,6 @@ stretching in width... */
text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em; text-shadow: black 0.1em 0.1em 0.4em, black 0.1em 0.1em;
/* NOTE: we can't set the bg color here because it will get /* NOTE: we can't set the bg color here because it will get
affected by filters... */ affected by filters... */
background: no-repeat 50% transparent; background: no-repeat 50% transparent;
background-size: contain; background-size: contain;
border: solid 1.5px transparent; border: solid 1.5px transparent;
@ -333,13 +326,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(1) scaleX(1); -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
opacity: 0.5; opacity: 0.5;
} }
.single-image-mode.viewer .marker { .single-image-mode.viewer .marker {
@ -369,13 +360,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(1) scaleX(1); -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
transform: rotate(90deg) scaleY(1) scaleX(1); transform: rotate(90deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"] { .image[orientation="180"] {
-webkit-transform: rotate(180deg) scaleY(1) scaleX(1); -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
@ -384,13 +373,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(1) scaleX(1); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"] { .image[orientation="270"] {
-webkit-transform: rotate(270deg) scaleY(1) scaleX(1); -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
@ -399,13 +386,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(1) scaleX(1); -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* Flipped vertically only... */ /* Flipped vertically only... */
/* NOTE: wee need to do all possible combinations here as we can't /* NOTE: wee need to do all possible combinations here as we can't
@ -418,13 +403,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(-1) scaleX(1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped="vertical"] { .image[orientation="90"][flipped="vertical"] {
-webkit-transform: rotate(90deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1);
@ -433,13 +416,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(-1) scaleX(1); -ms-transform: rotate(90deg) scaleY(-1) scaleX(1);
transform: rotate(90deg) scaleY(-1) scaleX(1); transform: rotate(90deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped="vertical"] { .image[orientation="180"][flipped="vertical"] {
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
@ -448,13 +429,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(-1) scaleX(1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped="vertical"] { .image[orientation="270"][flipped="vertical"] {
-webkit-transform: rotate(270deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
@ -463,13 +442,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* Flipped horizontally only... */ /* Flipped horizontally only... */
.image[flipped*="horizontal"] { .image[flipped*="horizontal"] {
@ -479,13 +456,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped="horizontal"] { .image[orientation="90"][flipped="horizontal"] {
-webkit-transform: rotate(90deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
@ -494,13 +469,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(1) scaleX(-1); -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
transform: rotate(90deg) scaleY(1) scaleX(-1); transform: rotate(90deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped="horizontal"] { .image[orientation="180"][flipped="horizontal"] {
-webkit-transform: rotate(180deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
@ -509,13 +482,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped="horizontal"] { .image[orientation="270"][flipped="horizontal"] {
-webkit-transform: rotate(270deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
@ -524,13 +495,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* Flipped vertically and horizontally... */ /* Flipped vertically and horizontally... */
.image[flipped*="vertical"][flipped*="horizontal"] { .image[flipped*="vertical"][flipped*="horizontal"] {
@ -540,13 +509,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
@ -555,13 +522,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
transform: rotate(90deg) scaleY(-1) scaleX(-1); transform: rotate(90deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
@ -570,13 +535,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1);
@ -585,13 +548,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1);
transform: rotate(270deg) scaleY(-1) scaleX(-1); transform: rotate(270deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* default backgrounds */ /* default backgrounds */
/* XXX not sure if we need these... /* XXX not sure if we need these...
@ -730,7 +691,6 @@ stretching in width... */
/* new gen marks... */ /* new gen marks... */
.mark { .mark {
/* this fully covers the image to simplify positioning of actual marks */ /* this fully covers the image to simplify positioning of actual marks */
margin-left: -300px; margin-left: -300px;
border: none; border: none;
} }
@ -813,13 +773,11 @@ stretching in width... */
-ms-transform: rotate(-90deg) scaleY(1) scaleX(1); -ms-transform: rotate(-90deg) scaleY(1) scaleX(1);
transform: rotate(-90deg) scaleY(1) scaleX(1); transform: rotate(-90deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
@ -830,13 +788,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(1) scaleX(1); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
@ -851,13 +807,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(1) scaleX(1); -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
transform: rotate(90deg) scaleY(1) scaleX(1); transform: rotate(90deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* compensate for flipping... */ /* compensate for flipping... */
/* XXX START: I hate this code, will think if a better way to do this... */ /* XXX START: I hate this code, will think if a better way to do this... */
@ -868,13 +822,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="horizontal"] .inline-image-info { .image[orientation="90"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -890,13 +842,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(1) scaleX(-1); -ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
transform: rotate(90deg) scaleY(1) scaleX(-1); transform: rotate(90deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -912,13 +862,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -934,13 +882,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[flipped*="vertical"] .inline-image-info { .image[flipped*="vertical"] .inline-image-info {
top: 0px; top: 0px;
@ -951,13 +897,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(-1) scaleX(1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"] .inline-image-info { .image[orientation="90"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -973,13 +917,11 @@ stretching in width... */
-ms-transform: rotate(-270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1);
transform: rotate(-270deg) scaleY(-1) scaleX(1); transform: rotate(-270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"] .inline-image-info { .image[orientation="180"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -995,13 +937,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(-1) scaleX(1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"] .inline-image-info { .image[orientation="270"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -1017,13 +957,11 @@ stretching in width... */
-ms-transform: rotate(270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: 0px; top: 0px;
@ -1034,13 +972,11 @@ stretching in width... */
-ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1056,13 +992,11 @@ stretching in width... */
-ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
transform: rotate(-90deg) scaleY(-1) scaleX(-1); transform: rotate(-90deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1078,13 +1012,11 @@ stretching in width... */
-ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1100,13 +1032,11 @@ stretching in width... */
-ms-transform: rotate(90deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
transform: rotate(90deg) scaleY(-1) scaleX(-1); transform: rotate(90deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* XXX END */ /* XXX END */
.overlay-info { .overlay-info {
@ -1183,13 +1113,11 @@ stretching in width... */
-ms-transform: rotate(45deg) scaleY(1) scaleX(1); -ms-transform: rotate(45deg) scaleY(1) scaleX(1);
transform: rotate(45deg) scaleY(1) scaleX(1); transform: rotate(45deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.down-indicator { .down-indicator {
top: auto; top: auto;
@ -1346,7 +1274,6 @@ stretching in width... */
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked, .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked,
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked { .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked {
/*display: none;*/ /*display: none;*/
display: inline-block; display: inline-block;
text-decoration: line-through; text-decoration: line-through;
opacity: 0.3; opacity: 0.3;
@ -1483,18 +1410,15 @@ progress:not(value)::-webkit-progress-bar {
.single-image-mode.viewer .image { .single-image-mode.viewer .image {
background-color: transparent; background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */ /* NOTE: need to keep a distance from screen borders... */
border: solid transparent 2px; border: solid transparent 2px;
} }
.single-image-mode.viewer .image:not(.current) { .single-image-mode.viewer .image:not(.current) {
/* XXX for some reason this breaks the alignment on large magnifications... /* XXX for some reason this breaks the alignment on large magnifications...
display: none; display: none;
*/ */
/* XXX this makes images pass through the :visible filter... /* XXX this makes images pass through the :visible filter...
opacity: 0; opacity: 0;
*/ */
visibility: hidden; visibility: hidden;
} }
/********************************************************** Themes ***/ /********************************************************** Themes ***/
@ -1575,13 +1499,11 @@ progress:not(value)::-webkit-progress-bar {
-ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
transform: rotate(0deg) scaleY(0.7) scaleX(0.7); transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.small.viewer:not(.single-image-mode) .mark:after, .small.viewer:not(.single-image-mode) .mark:after,
.small.viewer:not(.single-image-mode) .marked.image:after { .small.viewer:not(.single-image-mode) .marked.image:after {
@ -1591,13 +1513,11 @@ progress:not(value)::-webkit-progress-bar {
-ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); -ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
transform: rotate(0deg) scaleY(1.5) scaleX(1.5); transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/********************************************************* Overlay ***/ /********************************************************* Overlay ***/
.overlay-block { .overlay-block {
@ -1614,7 +1534,6 @@ progress:not(value)::-webkit-progress-bar {
/* XXX this is experimental... */ /* XXX this is experimental... */
.viewer.overlay .ribbon-set { .viewer.overlay .ribbon-set {
/* XXX blur makes things slow with transparency... */ /* XXX blur makes things slow with transparency... */
-webkit-filter: /*blur(2px)*/ grayscale(0.5); -webkit-filter: /*blur(2px)*/ grayscale(0.5);
filter: /*blur(2px)*/ grayscale(0.5); filter: /*blur(2px)*/ grayscale(0.5);
/* /*
@ -1626,13 +1545,11 @@ progress:not(value)::-webkit-progress-bar {
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0s; -webkit-animation-delay: 0s;
*/ */
} }
.overlay-block .content, .overlay-block .content,
.overlay-block .background { .overlay-block .background {
/* XXX for some magical reason position and top are overwritten /* XXX for some magical reason position and top are overwritten
with 'static' and 'auto' values respectively */ with 'static' and 'auto' values respectively */
position: absolute !important; position: absolute !important;
top: 0px !important; top: 0px !important;
left: 0px; left: 0px;
@ -1664,13 +1581,10 @@ progress:not(value)::-webkit-progress-bar {
min-height: 50px; min-height: 50px;
min-width: 300px; min-width: 300px;
/* XXX for some reason this is not sized correctly... */ /* XXX for some reason this is not sized correctly... */
max-height: 90%; max-height: 90%;
max-width: 90%; max-width: 90%;
/* XXX this needs to be lower priority than max-height... */ /* XXX this needs to be lower priority than max-height... */
/*overflow-y: auto;*/ /*overflow-y: auto;*/
color: white; color: white;
border: solid silver 1px; border: solid silver 1px;
border-radius: 3px; border-radius: 3px;

1
ui (gen4)/css/layout.less
View File

@ -8,6 +8,7 @@
// XXX current used version of node-webkit (0.8) is buggy with this... // XXX current used version of node-webkit (0.8) is buggy with this...
// -- ribbons are not sized horizpntally correctly... // -- ribbons are not sized horizpntally correctly...
//@image-tile-size: 100vmin; //@image-tile-size: 100vmin;
//@image-tile-size: 100vmax;
// these are relative to image tile size... // these are relative to image tile size...
@image-border: @image-tile-size/200; @image-border: @image-tile-size/200;

2
ui (gen4)/viewer.js
View File

@ -1349,7 +1349,7 @@ module.CurrentImageIndicator = Feature({
that.updateMarker(this, null, w0 > w1 ? 'before' : 'after') that.updateMarker(this, null, w0 > w1 ? 'before' : 'after')
} }
}) })
// hide marker on shift left/right... // hide marker on shift left/right and show it after done shifting...
.on([ .on([
'shiftImageLeft.pre', 'shiftImageLeft.pre',
'shiftImageRight.pre', 'shiftImageRight.pre',