flynx/ImageGrid
1
1
Fork 0
mirror of https://github.com/flynx/ImageGrid.git synced 2025-10-29 18:30:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

minor tweaks and fixes...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2014-10-09 23:18:35 +04:00
parent 9b88630c4d
commit 862ba3f203
4 changed files with 11 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui (gen4)/Makefile
View File

@ -132,8 +132,10 @@ dev: $(CSS_FILES)
# node-webkit win32 # node-webkit win32
win32: $(APP_ZIP) $(WIN_BUILD_DIR) win32: $(APP_ZIP) $(WIN_BUILD_DIR)
unzip -uj $(wildcard targets/node-webkit/node-webkit-*-win-ia32.zip) \ unzip -u targets/node-webkit/node-webkit-*-win-ia32.zip \
-d $(WIN_BUILD_DIR) -d $(WIN_BUILD_DIR)
mv $(WIN_BUILD_DIR)/node-webkit*win-ia32/* $(WIN_BUILD_DIR)/
rm -rf $(WIN_BUILD_DIR)/node-webkit*/
cat $(APP_ZIP) >> $(WIN_BUILD_DIR)/nw.exe cat $(APP_ZIP) >> $(WIN_BUILD_DIR)/nw.exe
mv $(WIN_BUILD_DIR)/nw.exe $(WIN_BUILD_DIR)/$(APP_NAME).exe mv $(WIN_BUILD_DIR)/nw.exe $(WIN_BUILD_DIR)/$(APP_NAME).exe
chmod +x $(WIN_BUILD_DIR)/*.{exe,dll} chmod +x $(WIN_BUILD_DIR)/*.{exe,dll}

8
ui (gen4)/index.html
View File

@ -5,16 +5,16 @@
<link rel="stylesheet" href="css/layout.css"> <link rel="stylesheet" href="css/layout.css">
<link rel="stylesheet" href="css/editor.css"> <link rel="stylesheet" href="css/editor.css">
<script>
require('nw.gui').Window.get().showDevTools()
</script>
<script src="ext-lib/jquery.js"></script> <script src="ext-lib/jquery.js"></script>
<script src="ext-lib/jquery-ui.js"></script> <script src="ext-lib/jquery-ui.js"></script>
<script src="lib/jli.js"></script> <script src="lib/jli.js"></script>
<!--script>
require('nw.gui').Window.get().showDevTools()
</script-->
<script data-main="ui" src="ext-lib/require.js"></script> <script data-main="ui" src="ext-lib/require.js"></script>
</head> </head>

5
ui/Makefile
View File

@ -130,8 +130,11 @@ dev: $(CSS_FILES)
# node-webkit win32 # node-webkit win32
win32: $(APP_ZIP) $(WIN_BUILD_DIR) win32: $(APP_ZIP) $(WIN_BUILD_DIR)
unzip -uj $(wildcard targets/node-webkit/node-webkit-*-win-ia32.zip) \ #unzip -uj $(wildcard targets/node-webkit/node-webkit-*-win-ia32.zip) \
unzip -u targets/node-webkit/node-webkit-*-win-ia32.zip \
-d $(WIN_BUILD_DIR) -d $(WIN_BUILD_DIR)
mv $(WIN_BUILD_DIR)/node-webkit*win-ia32/* $(WIN_BUILD_DIR)/
rm -rf $(WIN_BUILD_DIR)/node-webkit*/
cat $(APP_ZIP) >> $(WIN_BUILD_DIR)/nw.exe cat $(APP_ZIP) >> $(WIN_BUILD_DIR)/nw.exe
mv $(WIN_BUILD_DIR)/nw.exe $(WIN_BUILD_DIR)/$(APP_NAME).exe mv $(WIN_BUILD_DIR)/nw.exe $(WIN_BUILD_DIR)/$(APP_NAME).exe
chmod +x $(WIN_BUILD_DIR)/*.{exe,dll} chmod +x $(WIN_BUILD_DIR)/*.{exe,dll}

85
ui/layout.css
View File

@ -129,7 +129,6 @@ button:hover {
opacity: 0; opacity: 0;
z-index: 10000; z-index: 10000;
/* node-webkit */ /* node-webkit */
-webkit-app-region: drag; -webkit-app-region: drag;
} }
.title-bar:hover { .title-bar:hover {
@ -160,7 +159,6 @@ button:hover {
font-size: 18px; font-size: 18px;
vertical-align: middle; vertical-align: middle;
/* node-webkit */ /* node-webkit */
-webkit-app-region: no-drag; -webkit-app-region: no-drag;
} }
.title-bar .button:hover { .title-bar .button:hover {
@ -181,7 +179,6 @@ button:hover {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
/*border: solid blue 1px;*/ /*border: solid blue 1px;*/
box-sizing: border-box; box-sizing: border-box;
-moz-user-select: none; -moz-user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -203,7 +200,6 @@ button:hover {
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... */
-webkit-transform-origin: top left; -webkit-transform-origin: top left;
-ms-transform-origin: top left; -ms-transform-origin: top left;
transform-origin: top left; transform-origin: top left;
@ -244,7 +240,6 @@ button:hover {
display: block; display: block;
/* XXX BUG: setting this will mess up new ribbon creation.... /* XXX BUG: setting this will mess up new ribbon creation....
display: inline-block;*/ display: inline-block;*/
height: auto; height: auto;
min-width: 0px; min-width: 0px;
overflow: visible; overflow: visible;
@ -253,7 +248,6 @@ button:hover {
float: left; float: left;
clear: both; clear: both;
/* XXX not still sure about this... */ /* XXX not still sure about this... */
background: black; background: black;
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; margin-bottom: 10px;
@ -328,13 +322,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(1) scaleX(1); -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
opacity: 0.5; opacity: 0.5;
} }
.single-image-mode.viewer .marker { .single-image-mode.viewer .marker {
@ -364,13 +356,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"] { .image[orientation="180"] {
-webkit-transform: rotate(180deg) scaleY(1) scaleX(1); -webkit-transform: rotate(180deg) scaleY(1) scaleX(1);
@ -379,13 +369,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(1) scaleX(1); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"] { .image[orientation="270"] {
-webkit-transform: rotate(270deg) scaleY(1) scaleX(1); -webkit-transform: rotate(270deg) scaleY(1) scaleX(1);
@ -394,13 +382,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(1) scaleX(1); -ms-transform: rotate(270deg) scaleY(1) scaleX(1);
transform: rotate(270deg) scaleY(1) scaleX(1); transform: rotate(270deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* 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
@ -413,13 +399,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(-1) scaleX(1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped="vertical"] { .image[orientation="90"][flipped="vertical"] {
-webkit-transform: rotate(90deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(90deg) scaleY(-1) scaleX(1);
@ -428,13 +412,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped="vertical"] { .image[orientation="180"][flipped="vertical"] {
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(180deg) scaleY(-1) scaleX(1);
@ -443,13 +425,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(-1) scaleX(1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped="vertical"] { .image[orientation="270"][flipped="vertical"] {
-webkit-transform: rotate(270deg) scaleY(-1) scaleX(1); -webkit-transform: rotate(270deg) scaleY(-1) scaleX(1);
@ -458,13 +438,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* Flipped horizontally only... */ /* Flipped horizontally only... */
.image[flipped*="horizontal"] { .image[flipped*="horizontal"] {
@ -474,13 +452,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped="horizontal"] { .image[orientation="90"][flipped="horizontal"] {
-webkit-transform: rotate(90deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(90deg) scaleY(1) scaleX(-1);
@ -489,13 +465,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped="horizontal"] { .image[orientation="180"][flipped="horizontal"] {
-webkit-transform: rotate(180deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(180deg) scaleY(1) scaleX(-1);
@ -504,13 +478,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped="horizontal"] { .image[orientation="270"][flipped="horizontal"] {
-webkit-transform: rotate(270deg) scaleY(1) scaleX(-1); -webkit-transform: rotate(270deg) scaleY(1) scaleX(-1);
@ -519,13 +491,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* Flipped vertically and horizontally... */ /* Flipped vertically and horizontally... */
.image[flipped*="vertical"][flipped*="horizontal"] { .image[flipped*="vertical"][flipped*="horizontal"] {
@ -535,13 +505,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(90deg) scaleY(-1) scaleX(-1);
@ -550,13 +518,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(180deg) scaleY(-1) scaleX(-1);
@ -565,13 +531,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
-webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1); -webkit-transform: rotate(270deg) scaleY(-1) scaleX(-1);
@ -580,13 +544,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(-1);
transform: rotate(270deg) scaleY(-1) scaleX(-1); transform: rotate(270deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* default backgrounds */ /* default backgrounds */
/* XXX not sure if we need these... /* XXX not sure if we need these...
@ -725,7 +687,6 @@ button:hover {
/* new gen marks... */ /* new gen marks... */
.mark { .mark {
/* this fully covers the image to simplify positioning of actual marks */ /* this fully covers the image to simplify positioning of actual marks */
margin-left: -300px; margin-left: -300px;
border: none; border: none;
} }
@ -808,13 +769,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
@ -825,13 +784,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(1) scaleX(1); -ms-transform: rotate(180deg) scaleY(1) scaleX(1);
transform: rotate(180deg) scaleY(1) scaleX(1); transform: rotate(180deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
@ -846,13 +803,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* compensate for flipping... */ /* compensate for flipping... */
/* XXX START: I hate this code, will think if a better way to do this... */ /* XXX START: I hate this code, will think if a better way to do this... */
@ -863,13 +818,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(1) scaleX(-1);
transform: rotate(0deg) scaleY(1) scaleX(-1); transform: rotate(0deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="horizontal"] .inline-image-info { .image[orientation="90"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -885,13 +838,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -907,13 +858,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(1) scaleX(-1);
transform: rotate(180deg) scaleY(1) scaleX(-1); transform: rotate(180deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -929,13 +878,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(1) scaleX(-1); -ms-transform: rotate(270deg) scaleY(1) scaleX(-1);
transform: rotate(270deg) scaleY(1) scaleX(-1); transform: rotate(270deg) scaleY(1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[flipped*="vertical"] .inline-image-info { .image[flipped*="vertical"] .inline-image-info {
top: 0px; top: 0px;
@ -946,13 +893,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(-1) scaleX(1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(1);
transform: rotate(0deg) scaleY(-1) scaleX(1); transform: rotate(0deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"] .inline-image-info { .image[orientation="90"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -968,13 +913,11 @@ button:hover {
-ms-transform: rotate(-270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(-270deg) scaleY(-1) scaleX(1);
transform: rotate(-270deg) scaleY(-1) scaleX(1); transform: rotate(-270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"] .inline-image-info { .image[orientation="180"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -990,13 +933,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(-1) scaleX(1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(1);
transform: rotate(180deg) scaleY(-1) scaleX(1); transform: rotate(180deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"] .inline-image-info { .image[orientation="270"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
@ -1012,13 +953,11 @@ button:hover {
-ms-transform: rotate(270deg) scaleY(-1) scaleX(1); -ms-transform: rotate(270deg) scaleY(-1) scaleX(1);
transform: rotate(270deg) scaleY(-1) scaleX(1); transform: rotate(270deg) scaleY(-1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: 0px; top: 0px;
@ -1029,13 +968,11 @@ button:hover {
-ms-transform: rotate(0deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(0deg) scaleY(-1) scaleX(-1);
transform: rotate(0deg) scaleY(-1) scaleX(-1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1051,13 +988,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1073,13 +1008,11 @@ button:hover {
-ms-transform: rotate(180deg) scaleY(-1) scaleX(-1); -ms-transform: rotate(180deg) scaleY(-1) scaleX(-1);
transform: rotate(180deg) scaleY(-1) scaleX(-1); transform: rotate(180deg) scaleY(-1) scaleX(-1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
@ -1095,13 +1028,11 @@ button:hover {
-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);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/* XXX END */ /* XXX END */
.overlay-info { .overlay-info {
@ -1178,13 +1109,11 @@ button:hover {
-ms-transform: rotate(45deg) scaleY(1) scaleX(1); -ms-transform: rotate(45deg) scaleY(1) scaleX(1);
transform: rotate(45deg) scaleY(1) scaleX(1); transform: rotate(45deg) scaleY(1) scaleX(1);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.down-indicator { .down-indicator {
top: auto; top: auto;
@ -1341,7 +1270,6 @@ button:hover {
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked, .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-bookmarked,
.single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked { .single-image-mode.marks-visible.viewer .context-mode-indicators .current-image-marked {
/*display: none;*/ /*display: none;*/
display: inline-block; display: inline-block;
text-decoration: line-through; text-decoration: line-through;
opacity: 0.3; opacity: 0.3;
@ -1478,18 +1406,15 @@ progress:not(value)::-webkit-progress-bar {
.single-image-mode.viewer .image { .single-image-mode.viewer .image {
background-color: transparent; background-color: transparent;
/* NOTE: need to keep a distance from screen borders... */ /* NOTE: need to keep a distance from screen borders... */
border: solid transparent 2px; border: solid transparent 2px;
} }
.single-image-mode.viewer .image:not(.current) { .single-image-mode.viewer .image:not(.current) {
/* XXX for some reason this breaks the alignment on large magnifications... /* XXX for some reason this breaks the alignment on large magnifications...
display: none; display: none;
*/ */
/* XXX this makes images pass through the :visible filter... /* XXX this makes images pass through the :visible filter...
opacity: 0; opacity: 0;
*/ */
visibility: hidden; visibility: hidden;
} }
/********************************************************** Themes ***/ /********************************************************** Themes ***/
@ -1567,13 +1492,11 @@ progress:not(value)::-webkit-progress-bar {
-ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7); -ms-transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
transform: rotate(0deg) scaleY(0.7) scaleX(0.7); transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
.small.viewer:not(.single-image-mode) .mark:after, .small.viewer:not(.single-image-mode) .mark:after,
.small.viewer:not(.single-image-mode) .marked.image:after { .small.viewer:not(.single-image-mode) .marked.image:after {
@ -1583,13 +1506,11 @@ progress:not(value)::-webkit-progress-bar {
-ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5); -ms-transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
transform: rotate(0deg) scaleY(1.5) scaleX(1.5); transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
/* This prevents elements from aligning to sub-pixels...*/ /* This prevents elements from aligning to sub-pixels...*/
/* /*
-webkit-transform-style: preserve-3d; -webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d; -moz-transform-style: preserve-3d;
transform-style: preserve-3d; transform-style: preserve-3d;
*/ */
} }
/********************************************************* Overlay ***/ /********************************************************* Overlay ***/
.overlay-block { .overlay-block {
@ -1606,7 +1527,6 @@ progress:not(value)::-webkit-progress-bar {
/* XXX this is experimental... */ /* XXX this is experimental... */
.viewer.overlay .ribbon-set { .viewer.overlay .ribbon-set {
/* XXX blur makes things slow with transparency... */ /* XXX blur makes things slow with transparency... */
-webkit-filter: /*blur(2px)*/ grayscale(0.5); -webkit-filter: /*blur(2px)*/ grayscale(0.5);
filter: /*blur(2px)*/ grayscale(0.5); filter: /*blur(2px)*/ grayscale(0.5);
/* /*
@ -1618,13 +1538,11 @@ progress:not(value)::-webkit-progress-bar {
-webkit-animation-fill-mode: forwards; -webkit-animation-fill-mode: forwards;
-webkit-animation-delay: 0s; -webkit-animation-delay: 0s;
*/ */
} }
.overlay-block .content, .overlay-block .content,
.overlay-block .background { .overlay-block .background {
/* XXX for some magical reason position and top are overwritten /* XXX for some magical reason position and top are overwritten
with 'static' and 'auto' values respectively */ with 'static' and 'auto' values respectively */
position: absolute !important; position: absolute !important;
top: 0px !important; top: 0px !important;
left: 0px; left: 0px;
@ -1656,13 +1574,10 @@ progress:not(value)::-webkit-progress-bar {
min-height: 50px; min-height: 50px;
min-width: 300px; min-width: 300px;
/* XXX for some reason this is not sized correctly... */ /* XXX for some reason this is not sized correctly... */
max-height: 90%; max-height: 90%;
max-width: 90%; max-width: 90%;
/* XXX this needs to be lower priority than max-height... */ /* XXX this needs to be lower priority than max-height... */
/*overflow-y: auto;*/ /*overflow-y: auto;*/
color: white; color: white;
border: solid silver 1px; border: solid silver 1px;
border-radius: 3px; border-radius: 3px;