mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-30 19:00:09 +00:00
now both flipping and turning work in any combination (I HATE how I did it but it works)...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
8e53500feb
commit
b5fb626bfe
154
ui/layout.css
154
ui/layout.css
@ -267,7 +267,7 @@ body {
|
|||||||
left: 5px;
|
left: 5px;
|
||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
/* XXX make the marks position relative to viewer or gidden compleatly */
|
/* NOTE: we use a different mark representation for single image mode... */
|
||||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -403,6 +403,158 @@ body {
|
|||||||
-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);
|
||||||
}
|
}
|
||||||
|
/* compensate for flipping... */
|
||||||
|
.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
|
||||||
|
-webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||||
|
-o-transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||||
|
transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(90deg) scaleY(1) scaleX(-1);
|
||||||
|
-o-transform: rotate(90deg) scaleY(1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(90deg) scaleY(1) scaleX(-1);
|
||||||
|
transform: rotate(90deg) scaleY(1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||||
|
-o-transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||||
|
transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||||
|
-o-transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||||
|
transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[flipped*="vertical"] .inline-image-info {
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
-webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||||
|
-moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||||
|
-o-transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||||
|
-ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||||
|
transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 100%;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom left;
|
||||||
|
-ms-transform-origin: bottom left;
|
||||||
|
transform-origin: bottom left;
|
||||||
|
-webkit-transform: rotate(-270deg) scaleY(-1) scaleX(1);
|
||||||
|
-moz-transform: rotate(-270deg) scaleY(-1) scaleX(1);
|
||||||
|
-o-transform: rotate(-270deg) scaleY(-1) scaleX(1);
|
||||||
|
-ms-transform: rotate(-270deg) scaleY(-1) scaleX(1);
|
||||||
|
transform: rotate(-270deg) scaleY(-1) scaleX(1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||||
|
-moz-transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||||
|
-o-transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||||
|
-ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||||
|
transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||||
|
-moz-transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||||
|
-o-transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||||
|
-ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||||
|
transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||||
|
}
|
||||||
|
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
-webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||||
|
-o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||||
|
transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-o-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||||
|
transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||||
|
-o-transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||||
|
transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
-webkit-transform-origin: bottom right;
|
||||||
|
-ms-transform-origin: bottom right;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
-webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-moz-transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-o-transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||||
|
-ms-transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||||
|
transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||||
|
}
|
||||||
.overlay-info {
|
.overlay-info {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
110
ui/layout.less
110
ui/layout.less
@ -222,6 +222,7 @@ body {
|
|||||||
|
|
||||||
|
|
||||||
/***************************************************** Image marks ***/
|
/***************************************************** Image marks ***/
|
||||||
|
|
||||||
.marks-visible.viewer .marked.image:after {
|
.marks-visible.viewer .marked.image:after {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -271,8 +272,7 @@ body {
|
|||||||
right: auto;
|
right: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* NOTE: we use a different mark representation for single image mode... */
|
||||||
/* XXX make the marks position relative to viewer or gidden compleatly */
|
|
||||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
@ -383,7 +383,6 @@ body {
|
|||||||
left: 100%;
|
left: 100%;
|
||||||
|
|
||||||
.origin(bottom, left);
|
.origin(bottom, left);
|
||||||
|
|
||||||
.rotate(-90deg);
|
.rotate(-90deg);
|
||||||
}
|
}
|
||||||
.image[orientation="180"] .inline-image-info {
|
.image[orientation="180"] .inline-image-info {
|
||||||
@ -398,10 +397,113 @@ body {
|
|||||||
right: 100%;
|
right: 100%;
|
||||||
|
|
||||||
.origin(bottom, right);
|
.origin(bottom, right);
|
||||||
|
|
||||||
.rotate(90deg);
|
.rotate(90deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* compensate for flipping... */
|
||||||
|
.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
|
||||||
|
.flipped-horizontally;
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(90deg, -1, 1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(180deg, -1, 1);
|
||||||
|
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(270deg, -1, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image[flipped*="vertical"] .inline-image-info {
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
.flipped-vertically;
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: 100%;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, left);
|
||||||
|
.transform(-270deg, 1, -1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(180deg, 1, -1);
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="vertical"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(270deg, 1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: 0px;
|
||||||
|
bottom: auto;
|
||||||
|
.transform(0deg, -1, -1);
|
||||||
|
}
|
||||||
|
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: -100%;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(-90deg, -1, -1);
|
||||||
|
}
|
||||||
|
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 0px;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(180deg, -1, -1);
|
||||||
|
}
|
||||||
|
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||||
|
top: auto;
|
||||||
|
bottom: 100%;
|
||||||
|
left: auto;
|
||||||
|
right: auto;
|
||||||
|
|
||||||
|
.origin(bottom, right);
|
||||||
|
.transform(90deg, -1, -1);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.overlay-info {
|
.overlay-info {
|
||||||
display: none;
|
display: none;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user