mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 03:10:07 +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;
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
@ -403,6 +403,158 @@ body {
|
||||
-ms-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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
110
ui/layout.less
110
ui/layout.less
@ -222,6 +222,7 @@ body {
|
||||
|
||||
|
||||
/***************************************************** Image marks ***/
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -271,8 +272,7 @@ body {
|
||||
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 {
|
||||
display: none;
|
||||
}
|
||||
@ -383,7 +383,6 @@ body {
|
||||
left: 100%;
|
||||
|
||||
.origin(bottom, left);
|
||||
|
||||
.rotate(-90deg);
|
||||
}
|
||||
.image[orientation="180"] .inline-image-info {
|
||||
@ -398,10 +397,113 @@ body {
|
||||
right: 100%;
|
||||
|
||||
.origin(bottom, right);
|
||||
|
||||
.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 {
|
||||
display: none;
|
||||
position: absolute;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user