mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-31 11:20:09 +00:00
flipping now works with marks and rotation, propper control, info and saving not yet done...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
09675e12b4
commit
4d71814fe9
@ -6,6 +6,9 @@ LESS_FILE=layout.less
|
||||
$(TARGET): $(LESS_FILE)
|
||||
lessc $(LESS_FILE) > $(TARGET)
|
||||
|
||||
clean:
|
||||
rm -f $(TARGET)
|
||||
|
||||
# Makefile dependencies...
|
||||
$(OBJ): Makefile
|
||||
$(TARGET): Makefile
|
||||
|
||||
@ -374,6 +374,8 @@ var KEYBOARD_CONFIG = {
|
||||
reverseImageOrder()
|
||||
}),
|
||||
},
|
||||
H: doc('Flip image horizontally', function(){ flipHorizontal() }),
|
||||
V: doc('Flip image vertically', function(){ flipVertical() }),
|
||||
|
||||
|
||||
// zooming...
|
||||
@ -522,7 +524,6 @@ var KEYBOARD_CONFIG = {
|
||||
|
||||
F1: doc('Show help',
|
||||
function(){ toggleHelp() }),
|
||||
H: 'F1',
|
||||
|
||||
|
||||
/* testing the shift-key feature...
|
||||
|
||||
217
ui/layout.css
Executable file → Normal file
217
ui/layout.css
Executable file → Normal file
@ -1,6 +1,8 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
**********************************************************************/
|
||||
/********************************************************** Mixins ***/
|
||||
/*********************************************************************/
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
padding: 0px;
|
||||
@ -15,11 +17,11 @@ body {
|
||||
/*border: solid blue 1px;*/
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
}
|
||||
/****************************************************** Ribbon set ***/
|
||||
.ribbon-set {
|
||||
@ -30,11 +32,9 @@ body {
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
|
||||
transform-origin: top left;
|
||||
-ms-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 {
|
||||
display: block;
|
||||
@ -95,52 +95,115 @@ body {
|
||||
/* image turning... */
|
||||
/* NOTE: need to account for proportions after turning... */
|
||||
.image[orientation="90"] {
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-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"] {
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
-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"] {
|
||||
-webkit-transform: rotate(270deg);
|
||||
-moz-transform: rotate(270deg);
|
||||
-o-transform: rotate(270deg);
|
||||
-ms-transform: rotate(270deg);
|
||||
transform: rotate(270deg);
|
||||
-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... */
|
||||
/* NOTE: wee need to do all possible combinations here as we can't
|
||||
combine different parts of a transform attr from different
|
||||
classes */
|
||||
.image[flipped*="vertical"] {
|
||||
-moz-transform: scaleY(-1);
|
||||
-o-transform: scaleY(-1);
|
||||
-webkit-transform: scaleY(-1);
|
||||
-ms-transform: scaleY(-1);
|
||||
transform: scaleY(-1);
|
||||
-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"] {
|
||||
-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... */
|
||||
.image[flipped*="horizontal"] {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
-ms-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
-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"] {
|
||||
-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... */
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] {
|
||||
-moz-transform: scaleX(-1) scaleY(-1);
|
||||
-o-transform: scaleX(-1) scaleY(-1);
|
||||
-webkit-transform: scaleX(-1) scaleY(-1);
|
||||
-ms-transform: scaleX(-1) scaleY(-1);
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
-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"] {
|
||||
-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 */
|
||||
/* XXX not sure if we need these... */
|
||||
@ -167,22 +230,42 @@ body {
|
||||
border: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
left: auto;
|
||||
right: 5px;
|
||||
border-radius: 50%;
|
||||
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;
|
||||
bottom: auto:
|
||||
left: auto;
|
||||
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;
|
||||
bottom: auto;
|
||||
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;
|
||||
left: 5px;
|
||||
right: auto;
|
||||
}
|
||||
/* XXX make the marks position relative to viewer or gidden compleatly */
|
||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||
@ -205,11 +288,7 @@ body {
|
||||
|
||||
background: blue;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: -15px;
|
||||
@ -293,36 +372,36 @@ body {
|
||||
.image[orientation="90"] .inline-image-info {
|
||||
top: auto;
|
||||
left: 100%;
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
-ms-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
-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"] .inline-image-info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
-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"] .inline-image-info {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
-ms-transform-origin: bottom right;
|
||||
-webkit-transform-origin: bottom right;
|
||||
-ms-transform-origin: bottom right;
|
||||
transform-origin: bottom right;
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
-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;
|
||||
@ -390,11 +469,11 @@ body {
|
||||
bottom: -25px;
|
||||
left: 25px;
|
||||
background: yellow;
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
-webkit-transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
-moz-transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
-o-transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
-ms-transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.down-indicator {
|
||||
top: auto;
|
||||
|
||||
162
ui/layout.less
162
ui/layout.less
@ -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 {
|
||||
font-family: sans-serif;
|
||||
padding: 0px;
|
||||
@ -20,11 +60,7 @@ body {
|
||||
/*border: solid blue 1px;*/
|
||||
box-sizing: border-box;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
.user-select;
|
||||
}
|
||||
|
||||
|
||||
@ -38,9 +74,7 @@ body {
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
transform-origin: top left;
|
||||
-ms-transform-origin: top left;
|
||||
-webkit-transform-origin: top left; /* Safari and Chrome */
|
||||
.origin(top, left);
|
||||
}
|
||||
.ribbon-set:empty:after {
|
||||
display: block;
|
||||
@ -108,14 +142,6 @@ body {
|
||||
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... */
|
||||
/* NOTE: need to account for proportions after turning... */
|
||||
.image[orientation="90"] {
|
||||
@ -134,48 +160,45 @@ body {
|
||||
combine different parts of a transform attr from different
|
||||
classes */
|
||||
.image[flipped*="vertical"] {
|
||||
-moz-transform: scaleY(-1);
|
||||
-o-transform: scaleY(-1);
|
||||
-webkit-transform: scaleY(-1);
|
||||
-ms-transform: scaleY(-1);
|
||||
transform: scaleY(-1);
|
||||
.flipped-vertically;
|
||||
}
|
||||
.image[orientation="90"][flipped="vertical"] {
|
||||
.transform(90deg, 1, -1)
|
||||
}
|
||||
.image[orientation="180"][flipped="vertical"] {
|
||||
.transform(180deg, 1, -1)
|
||||
}
|
||||
.image[orientation="270"][flipped="vertical"] {
|
||||
.transform(270deg, 1, -1)
|
||||
}
|
||||
|
||||
|
||||
/* Flipped horizontally only... */
|
||||
.image[flipped*="horizontal"] {
|
||||
-moz-transform: scaleX(-1);
|
||||
-o-transform: scaleX(-1);
|
||||
-webkit-transform: scaleX(-1);
|
||||
-ms-transform: scaleX(-1);
|
||||
transform: scaleX(-1);
|
||||
.flipped-horizontally;
|
||||
}
|
||||
.image[orientation="90"][flipped="horizontal"] {
|
||||
.transform(90deg, -1)
|
||||
}
|
||||
.image[orientation="180"][flipped="horizontal"] {
|
||||
.transform(180deg, -1)
|
||||
}
|
||||
.image[orientation="270"][flipped="horizontal"] {
|
||||
.transform(270deg, -1)
|
||||
}
|
||||
|
||||
/* Flipped vertically only... */
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] {
|
||||
-moz-transform: scaleX(-1) scaleY(-1);
|
||||
-o-transform: scaleX(-1) scaleY(-1);
|
||||
-webkit-transform: scaleX(-1) scaleY(-1);
|
||||
-ms-transform: scaleX(-1) scaleY(-1);
|
||||
transform: scaleX(-1) scaleY(-1);
|
||||
.transform(0deg, -1, -1)
|
||||
}
|
||||
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(90deg, -1, -1)
|
||||
}
|
||||
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(180deg, -1, -1)
|
||||
}
|
||||
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(270deg, -1, -1)
|
||||
}
|
||||
|
||||
|
||||
@ -209,25 +232,46 @@ body {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
left: auto;
|
||||
right: 5px;
|
||||
|
||||
border-radius: 50%;
|
||||
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;
|
||||
bottom: auto:
|
||||
left: auto;
|
||||
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;
|
||||
bottom: auto;
|
||||
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;
|
||||
left: 5px;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
|
||||
/* XXX make the marks position relative to viewer or gidden compleatly */
|
||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||
display: none;
|
||||
@ -250,11 +294,7 @@ body {
|
||||
|
||||
background: blue;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: -15px;
|
||||
@ -325,11 +365,7 @@ body {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.image .inline-image-info:hover {
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
.user-select(auto);
|
||||
}
|
||||
.image .inline-image-info::selection {
|
||||
color: white;
|
||||
@ -346,40 +382,24 @@ body {
|
||||
top: auto;
|
||||
left: 100%;
|
||||
|
||||
-ms-transform-origin: bottom left;
|
||||
-webkit-transform-origin: bottom left;
|
||||
transform-origin: bottom left;
|
||||
.origin(bottom, left);
|
||||
|
||||
-webkit-transform: rotate(-90deg);
|
||||
-moz-transform: rotate(-90deg);
|
||||
-o-transform: rotate(-90deg);
|
||||
-ms-transform: rotate(-90deg);
|
||||
transform: rotate(-90deg);
|
||||
.rotate(-90deg);
|
||||
}
|
||||
.image[orientation="180"] .inline-image-info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
|
||||
-webkit-transform: rotate(180deg);
|
||||
-moz-transform: rotate(180deg);
|
||||
-o-transform: rotate(180deg);
|
||||
-ms-transform: rotate(180deg);
|
||||
transform: rotate(180deg);
|
||||
.rotate(180deg);
|
||||
}
|
||||
.image[orientation="270"] .inline-image-info {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
|
||||
-ms-transform-origin: bottom right;
|
||||
-webkit-transform-origin: bottom right;
|
||||
transform-origin: bottom right;
|
||||
.origin(bottom, right);
|
||||
|
||||
-webkit-transform: rotate(90deg);
|
||||
-moz-transform: rotate(90deg);
|
||||
-o-transform: rotate(90deg);
|
||||
-ms-transform: rotate(90deg);
|
||||
transform: rotate(90deg);
|
||||
.rotate(90deg);
|
||||
}
|
||||
|
||||
.overlay-info {
|
||||
@ -400,11 +420,7 @@ body {
|
||||
opacity: 0.6;
|
||||
}
|
||||
.overlay-info:hover {
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
.user-select(auto);
|
||||
}
|
||||
.overlay-info .float-right {
|
||||
float: right;
|
||||
@ -462,11 +478,7 @@ body {
|
||||
|
||||
background: yellow;
|
||||
|
||||
-webkit-transform: rotate(45deg);
|
||||
-moz-transform: rotate(45deg);
|
||||
-o-transform: rotate(45deg);
|
||||
-ms-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
.rotate(45deg);
|
||||
}
|
||||
.down-indicator {
|
||||
top: auto;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user