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

flipping now works with marks and rotation, propper control, info and saving not yet done...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2013-06-04 19:00:25 +04:00
parent 09675e12b4
commit 4d71814fe9
4 changed files with 240 additions and 145 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/Makefile
View File

@ -6,6 +6,9 @@ LESS_FILE=layout.less
$(TARGET): $(LESS_FILE) $(TARGET): $(LESS_FILE)
lessc $(LESS_FILE) > $(TARGET) lessc $(LESS_FILE) > $(TARGET)
clean:
rm -f $(TARGET)
# Makefile dependencies... # Makefile dependencies...
$(OBJ): Makefile $(OBJ): Makefile
$(TARGET): Makefile $(TARGET): Makefile

3
ui/keybindings.js
View File

@ -374,6 +374,8 @@ var KEYBOARD_CONFIG = {
reverseImageOrder() reverseImageOrder()
}), }),
}, },
H: doc('Flip image horizontally', function(){ flipHorizontal() }),
V: doc('Flip image vertically', function(){ flipVertical() }),
// zooming... // zooming...
@ -522,7 +524,6 @@ var KEYBOARD_CONFIG = {
F1: doc('Show help', F1: doc('Show help',
function(){ toggleHelp() }), function(){ toggleHelp() }),
H: 'F1',
/* testing the shift-key feature... /* testing the shift-key feature...

217
ui/layout.css Executable file → Normal file
View File

@ -1,6 +1,8 @@
/********************************************************************** /**********************************************************************
* *
**********************************************************************/ **********************************************************************/
/********************************************************** Mixins ***/
/*********************************************************************/
body { body {
font-family: sans-serif; font-family: sans-serif;
padding: 0px; padding: 0px;
@ -15,11 +17,11 @@ body {
/*border: solid blue 1px;*/ /*border: solid blue 1px;*/
box-sizing: border-box; box-sizing: border-box;
-moz-user-select: none; -moz-user-select: auto;
-webkit-user-select: none; -webkit-user-select: auto;
-o-user-select: none; -o-user-select: auto;
-ms-user-select: none; -ms-user-select: auto;
user-select: none; user-select: auto;
} }
/****************************************************** Ribbon set ***/ /****************************************************** Ribbon set ***/
.ribbon-set { .ribbon-set {
@ -30,11 +32,9 @@ body {
...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... */
transform-origin: top left;
-ms-transform-origin: top left;
-webkit-transform-origin: top left; -webkit-transform-origin: top left;
/* Safari and Chrome */ -ms-transform-origin: top left;
transform-origin: top left;
} }
.ribbon-set:empty:after { .ribbon-set:empty:after {
display: block; display: block;
@ -95,52 +95,115 @@ body {
/* image turning... */ /* image turning... */
/* NOTE: need to account for proportions after turning... */ /* NOTE: need to account for proportions after turning... */
.image[orientation="90"] { .image[orientation="90"] {
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
-o-transform: rotate(90deg); -o-transform: rotate(90deg) scaleY(1) scaleX(1);
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
transform: rotate(90deg); transform: rotate(90deg) scaleY(1) scaleX(1);
} }
.image[orientation="180"] { .image[orientation="180"] {
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
-o-transform: rotate(180deg); -o-transform: rotate(180deg) scaleY(1) scaleX(1);
-ms-transform: rotate(180deg); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg); transform: rotate(180deg) scaleY(1) scaleX(1);
} }
.image[orientation="270"] { .image[orientation="270"] {
-webkit-transform: rotate(270deg); -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
-moz-transform: rotate(270deg); -moz-transform: rotate(270deg) scaleY(1) scaleX(1);
-o-transform: rotate(270deg); -o-transform: rotate(270deg) scaleY(1) scaleX(1);
-ms-transform: rotate(270deg); -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
transform: rotate(270deg); transform: rotate(270deg) scaleY(1) scaleX(1);
} }
/* 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
combine different parts of a transform attr from different combine different parts of a transform attr from different
classes */ classes */
.image[flipped*="vertical"] { .image[flipped*="vertical"] {
-moz-transform: scaleY(-1); -webkit-transform: rotate(0deg) scaleY(-1) scaleX(1);
-o-transform: scaleY(-1); -moz-transform: rotate(0deg) scaleY(-1) scaleX(1);
-webkit-transform: scaleY(-1); -o-transform: rotate(0deg) scaleY(-1) scaleX(1);
-ms-transform: scaleY(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
transform: scaleY(-1); transform: rotate(0deg) scaleY(-1) scaleX(1);
}
.image[orientation="90"][flipped="vertical"] {
-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"] {
-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"] {
-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);
} }
/* Flipped horizontally only... */ /* Flipped horizontally only... */
.image[flipped*="horizontal"] { .image[flipped*="horizontal"] {
-moz-transform: scaleX(-1); -webkit-transform: rotate(0deg) scaleY(1) scaleX(-1);
-o-transform: scaleX(-1); -moz-transform: rotate(0deg) scaleY(1) scaleX(-1);
-webkit-transform: scaleX(-1); -o-transform: rotate(0deg) scaleY(1) scaleX(-1);
-ms-transform: scaleX(-1); -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
transform: scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1);
}
.image[orientation="90"][flipped="horizontal"] {
-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"] {
-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"] {
-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);
} }
/* Flipped vertically only... */ /* Flipped vertically only... */
.image[flipped*="vertical"][flipped*="horizontal"] { .image[flipped*="vertical"][flipped*="horizontal"] {
-moz-transform: scaleX(-1) scaleY(-1); -webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
-o-transform: scaleX(-1) scaleY(-1); -moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
-webkit-transform: scaleX(-1) scaleY(-1); -o-transform: rotate(0deg) scaleY(-1) scaleX(-1);
-ms-transform: scaleX(-1) scaleY(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
transform: scaleX(-1) scaleY(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
}
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
-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"] {
-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"] {
-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);
} }
/* default backgrounds */ /* default backgrounds */
/* XXX not sure if we need these... */ /* XXX not sure if we need these... */
@ -167,22 +230,42 @@ body {
border: none; border: none;
width: 15px; width: 15px;
height: 15px; height: 15px;
top: auto;
bottom: 5px; bottom: 5px;
left: auto;
right: 5px; right: 5px;
border-radius: 50%; border-radius: 50%;
background: blue; background: blue;
} }
.marks-visible.viewer .marked.image[orientation="90"]:after { .marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
top: 5px; top: 5px;
bottom: auto:
left: auto;
right: 5px; right: 5px;
} }
.marks-visible.viewer .marked.image[orientation="180"]:after { .marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
top: 5px; top: 5px;
bottom: auto;
left: 5px; left: 5px;
right: auto;
} }
.marks-visible.viewer .marked.image[orientation="270"]:after { .marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
top: auto;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
right: auto;
} }
/* XXX make the marks position relative to viewer or gidden compleatly */ /* 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 {
@ -205,11 +288,7 @@ body {
background: blue; background: blue;
-webkit-transform: rotate(45deg); .rotate(45deg)
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} }
.marks-visible.viewer .marked.image[orientation="90"]:after { .marks-visible.viewer .marked.image[orientation="90"]:after {
top: -15px; top: -15px;
@ -293,36 +372,36 @@ body {
.image[orientation="90"] .inline-image-info { .image[orientation="90"] .inline-image-info {
top: auto; top: auto;
left: 100%; left: 100%;
-ms-transform-origin: bottom left;
-webkit-transform-origin: bottom left; -webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left; transform-origin: bottom left;
-webkit-transform: rotate(-90deg); -webkit-transform: rotate(-90deg) scaleY(1) scaleX(1);
-moz-transform: rotate(-90deg); -moz-transform: rotate(-90deg) scaleY(1) scaleX(1);
-o-transform: rotate(-90deg); -o-transform: rotate(-90deg) scaleY(1) scaleX(1);
-ms-transform: rotate(-90deg); -ms-transform: rotate(-90deg) scaleY(1) scaleX(1);
transform: rotate(-90deg); transform: rotate(-90deg) scaleY(1) scaleX(1);
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
-webkit-transform: rotate(180deg); -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
-moz-transform: rotate(180deg); -moz-transform: rotate(180deg) scaleY(1) scaleX(1);
-o-transform: rotate(180deg); -o-transform: rotate(180deg) scaleY(1) scaleX(1);
-ms-transform: rotate(180deg); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg); transform: rotate(180deg) scaleY(1) scaleX(1);
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
left: auto; left: auto;
right: 100%; right: 100%;
-ms-transform-origin: bottom right;
-webkit-transform-origin: bottom right; -webkit-transform-origin: bottom right;
-ms-transform-origin: bottom right;
transform-origin: bottom right; transform-origin: bottom right;
-webkit-transform: rotate(90deg); -webkit-transform: rotate(90deg) scaleY(1) scaleX(1);
-moz-transform: rotate(90deg); -moz-transform: rotate(90deg) scaleY(1) scaleX(1);
-o-transform: rotate(90deg); -o-transform: rotate(90deg) scaleY(1) scaleX(1);
-ms-transform: rotate(90deg); -ms-transform: rotate(90deg) scaleY(1) scaleX(1);
transform: rotate(90deg); transform: rotate(90deg) scaleY(1) scaleX(1);
} }
.overlay-info { .overlay-info {
display: none; display: none;
@ -390,11 +469,11 @@ body {
bottom: -25px; bottom: -25px;
left: 25px; left: 25px;
background: yellow; background: yellow;
-webkit-transform: rotate(45deg); -webkit-transform: rotate(45deg) scaleY(1) scaleX(1);
-moz-transform: rotate(45deg); -moz-transform: rotate(45deg) scaleY(1) scaleX(1);
-o-transform: rotate(45deg); -o-transform: rotate(45deg) scaleY(1) scaleX(1);
-ms-transform: rotate(45deg); -ms-transform: rotate(45deg) scaleY(1) scaleX(1);
transform: rotate(45deg); transform: rotate(45deg) scaleY(1) scaleX(1);
} }
.down-indicator { .down-indicator {
top: auto; top: auto;

162
ui/layout.less
View File

@ -2,6 +2,46 @@
* *
**********************************************************************/ **********************************************************************/
/********************************************************** Mixins ***/
.user-select (@mode: auto) {
-moz-user-select: @mode;
-webkit-user-select: @mode;
-o-user-select: @mode;
-ms-user-select: @mode;
user-select: @mode;
}
.origin (@x:top, @y:left) {
-webkit-transform-origin: @arguments;
-ms-transform-origin: @arguments;
transform-origin: @arguments;
}
.transform (@deg:0deg, @scaleX:1, @scaleY:1) {
-webkit-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
-moz-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
-o-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
-ms-transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
}
.rotate (@deg) {
.transform(@deg)
}
.flipped-vertically () {
.transform(0deg, 1, -1)
}
.flipped-horizontally () {
.transform(0deg, -1, 1)
}
/*********************************************************************/
body { body {
font-family: sans-serif; font-family: sans-serif;
padding: 0px; padding: 0px;
@ -20,11 +60,7 @@ body {
/*border: solid blue 1px;*/ /*border: solid blue 1px;*/
box-sizing: border-box; box-sizing: border-box;
-moz-user-select: none; .user-select;
-webkit-user-select: none;
-o-user-select: none;
-ms-user-select: none;
user-select: none;
} }
@ -38,9 +74,7 @@ body {
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... */
transform-origin: top left; .origin(top, left);
-ms-transform-origin: top left;
-webkit-transform-origin: top left; /* Safari and Chrome */
} }
.ribbon-set:empty:after { .ribbon-set:empty:after {
display: block; display: block;
@ -108,14 +142,6 @@ body {
border: solid red 5px; border: solid red 5px;
} }
.rotate (@deg) {
-webkit-transform: rotate(@deg);
-moz-transform: rotate(@deg);
-o-transform: rotate(@deg);
-ms-transform: rotate(@deg);
transform: rotate(@deg);
}
/* image turning... */ /* image turning... */
/* NOTE: need to account for proportions after turning... */ /* NOTE: need to account for proportions after turning... */
.image[orientation="90"] { .image[orientation="90"] {
@ -134,48 +160,45 @@ body {
combine different parts of a transform attr from different combine different parts of a transform attr from different
classes */ classes */
.image[flipped*="vertical"] { .image[flipped*="vertical"] {
-moz-transform: scaleY(-1); .flipped-vertically;
-o-transform: scaleY(-1);
-webkit-transform: scaleY(-1);
-ms-transform: scaleY(-1);
transform: scaleY(-1);
} }
.image[orientation="90"][flipped="vertical"] { .image[orientation="90"][flipped="vertical"] {
.transform(90deg, 1, -1)
} }
.image[orientation="180"][flipped="vertical"] { .image[orientation="180"][flipped="vertical"] {
.transform(180deg, 1, -1)
} }
.image[orientation="270"][flipped="vertical"] { .image[orientation="270"][flipped="vertical"] {
.transform(270deg, 1, -1)
} }
/* Flipped horizontally only... */ /* Flipped horizontally only... */
.image[flipped*="horizontal"] { .image[flipped*="horizontal"] {
-moz-transform: scaleX(-1); .flipped-horizontally;
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
} }
.image[orientation="90"][flipped="horizontal"] { .image[orientation="90"][flipped="horizontal"] {
.transform(90deg, -1)
} }
.image[orientation="180"][flipped="horizontal"] { .image[orientation="180"][flipped="horizontal"] {
.transform(180deg, -1)
} }
.image[orientation="270"][flipped="horizontal"] { .image[orientation="270"][flipped="horizontal"] {
.transform(270deg, -1)
} }
/* Flipped vertically only... */ /* Flipped vertically only... */
.image[flipped*="vertical"][flipped*="horizontal"] { .image[flipped*="vertical"][flipped*="horizontal"] {
-moz-transform: scaleX(-1) scaleY(-1); .transform(0deg, -1, -1)
-o-transform: scaleX(-1) scaleY(-1);
-webkit-transform: scaleX(-1) scaleY(-1);
-ms-transform: scaleX(-1) scaleY(-1);
transform: scaleX(-1) scaleY(-1);
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
.transform(90deg, -1, -1)
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
.transform(180deg, -1, -1)
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
.transform(270deg, -1, -1)
} }
@ -209,25 +232,46 @@ body {
width: 15px; width: 15px;
height: 15px; height: 15px;
top: auto;
bottom: 5px; bottom: 5px;
left: auto;
right: 5px; right: 5px;
border-radius: 50%; border-radius: 50%;
background: blue; background: blue;
} }
.marks-visible.viewer .marked.image[orientation="90"]:after { .marks-visible.viewer .marked.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="180"][flipped="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="90"]:not([flipped]):after {
top: 5px; top: 5px;
bottom: auto:
left: auto;
right: 5px; right: 5px;
} }
.marks-visible.viewer .marked.image[orientation="180"]:after { .marks-visible.viewer .marked.image:not([orientation])[flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="270"][flipped="vertical"]:after,
.marks-visible.viewer .marked.image[orientation="90"][flipped="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="180"]:not([flipped]):after {
top: 5px; top: 5px;
bottom: auto;
left: 5px; left: 5px;
right: auto;
} }
.marks-visible.viewer .marked.image[orientation="270"]:after { .marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="180"][flipped="vertical"]:after,
.marks-visible.viewer .marked.image:not([orientation])[flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="0"][flipped*="horizontal"]:after,
.marks-visible.viewer .marked.image[orientation="270"]:not([flipped]):after {
top: auto;
bottom: 5px; bottom: 5px;
left: 5px; left: 5px;
right: auto;
} }
/* XXX make the marks position relative to viewer or gidden compleatly */ /* 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;
@ -250,11 +294,7 @@ body {
background: blue; background: blue;
-webkit-transform: rotate(45deg); .rotate(45deg)
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} }
.marks-visible.viewer .marked.image[orientation="90"]:after { .marks-visible.viewer .marked.image[orientation="90"]:after {
top: -15px; top: -15px;
@ -325,11 +365,7 @@ body {
opacity: 0.7; opacity: 0.7;
} }
.image .inline-image-info:hover { .image .inline-image-info:hover {
-moz-user-select: auto; .user-select(auto);
-webkit-user-select: auto;
-o-user-select: auto;
-ms-user-select: auto;
user-select: auto;
} }
.image .inline-image-info::selection { .image .inline-image-info::selection {
color: white; color: white;
@ -346,40 +382,24 @@ body {
top: auto; top: auto;
left: 100%; left: 100%;
-ms-transform-origin: bottom left; .origin(bottom, left);
-webkit-transform-origin: bottom left;
transform-origin: bottom left;
-webkit-transform: rotate(-90deg); .rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
-webkit-transform: rotate(180deg); .rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
left: auto; left: auto;
right: 100%; right: 100%;
-ms-transform-origin: bottom right; .origin(bottom, right);
-webkit-transform-origin: bottom right;
transform-origin: bottom right;
-webkit-transform: rotate(90deg); .rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
} }
.overlay-info { .overlay-info {
@ -400,11 +420,7 @@ body {
opacity: 0.6; opacity: 0.6;
} }
.overlay-info:hover { .overlay-info:hover {
-moz-user-select: auto; .user-select(auto);
-webkit-user-select: auto;
-o-user-select: auto;
-ms-user-select: auto;
user-select: auto;
} }
.overlay-info .float-right { .overlay-info .float-right {
float: right; float: right;
@ -462,11 +478,7 @@ body {
background: yellow; background: yellow;
-webkit-transform: rotate(45deg); .rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
} }
.down-indicator { .down-indicator {
top: auto; top: auto;