mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-29 18:30:09 +00:00
some tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
d084b33db4
commit
312bb545a3
@ -160,6 +160,19 @@ var KEYBOARD_CONFIG = {
|
||||
},
|
||||
|
||||
|
||||
// visible marks...
|
||||
//
|
||||
'.marks-visible': {
|
||||
title: 'Visible marks',
|
||||
|
||||
Esc: doc('Hide marks',
|
||||
function(){
|
||||
toggleMarkesView('off')
|
||||
return false
|
||||
}),
|
||||
},
|
||||
|
||||
|
||||
// ribbon mode only...
|
||||
//
|
||||
// XXX this breaks getKeyHandlers(...) when modes argument is given...
|
||||
|
||||
@ -38,9 +38,9 @@ body {
|
||||
position: absolute;
|
||||
display: block;
|
||||
/* NOTE: this needs for scaling/zooming to behave correctly and not
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
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;
|
||||
@ -186,7 +186,7 @@ body {
|
||||
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||
transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
/* Flipped vertically only... */
|
||||
/* Flipped vertically and horizontally... */
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] {
|
||||
-webkit-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||
-moz-transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||
@ -280,8 +280,11 @@ body {
|
||||
.marks-visible.single-image-mode.viewer .marked.image:after {
|
||||
display: none;
|
||||
}
|
||||
/* corner mark... (a-la bookmarks in PortableMag) */
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
* XXX account for flipping... */
|
||||
/*
|
||||
@mark-offset: -15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -292,24 +295,24 @@ body {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
top: @mark-offset;
|
||||
right: @mark-offset;
|
||||
|
||||
background: blue;
|
||||
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
top: @mark-offset;
|
||||
left: @mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="180"]:after {
|
||||
bottom: -15px;
|
||||
left: -15px;
|
||||
bottom: @mark-offset;
|
||||
left: @mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"]:after {
|
||||
bottom: -15px;
|
||||
right: -15px;
|
||||
bottom: @mark-offset;
|
||||
right: @mark-offset;
|
||||
}
|
||||
*/
|
||||
/* XXX should we use opacity??? */
|
||||
@ -784,6 +787,7 @@ body {
|
||||
opacity: 0.7;
|
||||
}
|
||||
/************************************************************ Help ***/
|
||||
/* XXX make this more generic, and not just for the keyboard... */
|
||||
/* this is for sliding stuff */
|
||||
.viewer.drawer-mode {
|
||||
box-shadow: 0px 0px 50px 0px silver;
|
||||
|
||||
@ -83,9 +83,9 @@ body {
|
||||
display: block;
|
||||
|
||||
/* NOTE: this needs for scaling/zooming to behave correctly and not
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
.origin(top, left);
|
||||
}
|
||||
.ribbon-set:empty:after {
|
||||
@ -199,7 +199,7 @@ body {
|
||||
.transform(270deg, -1)
|
||||
}
|
||||
|
||||
/* Flipped vertically only... */
|
||||
/* Flipped vertically and horizontally... */
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(0deg, -1, -1)
|
||||
}
|
||||
@ -234,6 +234,9 @@ body {
|
||||
|
||||
/***************************************************** Image marks ***/
|
||||
|
||||
@mark-offset: 5px;
|
||||
@mark-size: 15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -241,13 +244,13 @@ body {
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: @mark-size;
|
||||
height: @mark-size;
|
||||
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
bottom: @mark-offset;
|
||||
left: auto;
|
||||
right: 5px;
|
||||
right: @mark-offset;
|
||||
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
@ -257,19 +260,19 @@ body {
|
||||
.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: @mark-offset;
|
||||
bottom: auto:
|
||||
left: auto;
|
||||
right: 5px;
|
||||
right: @mark-offset;
|
||||
}
|
||||
.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: @mark-offset;
|
||||
bottom: auto;
|
||||
left: 5px;
|
||||
left: @mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
@ -278,8 +281,8 @@ body {
|
||||
.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;
|
||||
bottom: @mark-offset;
|
||||
left: @mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@ -288,8 +291,11 @@ body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* corner mark... (a-la bookmarks in PortableMag) */
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
* XXX account for flipping... */
|
||||
/*
|
||||
@mark-offset: -15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -300,24 +306,24 @@ body {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
top: -15px;
|
||||
right: -15px;
|
||||
top: @mark-offset;
|
||||
right: @mark-offset;
|
||||
|
||||
background: blue;
|
||||
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: -15px;
|
||||
left: -15px;
|
||||
top: @mark-offset;
|
||||
left: @mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="180"]:after {
|
||||
bottom: -15px;
|
||||
left: -15px;
|
||||
bottom: @mark-offset;
|
||||
left: @mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"]:after {
|
||||
bottom: -15px;
|
||||
right: -15px;
|
||||
bottom: @mark-offset;
|
||||
right: @mark-offset;
|
||||
}
|
||||
*/
|
||||
|
||||
@ -751,6 +757,8 @@ body {
|
||||
|
||||
/************************************************************ Help ***/
|
||||
|
||||
/* XXX make this more generic, and not just for the keyboard... */
|
||||
|
||||
/* this is for sliding stuff */
|
||||
.viewer.drawer-mode {
|
||||
box-shadow: 0px 0px 50px 0px silver;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user