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

View File

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

View File

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

View File

@ -1349,7 +1349,7 @@ module.CurrentImageIndicator = Feature({
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([
'shiftImageLeft.pre',
'shiftImageRight.pre',