mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-12-17 08:41:40 +00:00
some tweaking...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
1fa6be841b
commit
408eeb3e7e
@ -93,6 +93,8 @@ Roadmap
|
||||
[_] 27% Gen 3 current todo
|
||||
[_] 54% High priority
|
||||
[_] usable empty view -- w.o. data...
|
||||
[_] 0% Tablet UI
|
||||
[_] screen buttons
|
||||
[_] 0% keyboard.js
|
||||
[_] multiple key handler...
|
||||
| handle multiple key presses...
|
||||
@ -120,8 +122,6 @@ Roadmap
|
||||
[_] introspection
|
||||
| this is partially done already, need a simpler API for
|
||||
| the user...
|
||||
[_] 0% Tablet UI
|
||||
[_] screen buttons
|
||||
[_] BUG: sometimes duplicate images get loaded...
|
||||
| this happens when jumping back and forth on the mid ribbon until
|
||||
| the last element shows up and then moving left until the frame
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
**********************************************************************/
|
||||
/******************************************************** Settings ***/
|
||||
/********************************************************** Mixins ***/
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
@ -27,11 +28,11 @@ body {
|
||||
/*border: solid blue 1px;*/
|
||||
|
||||
box-sizing: border-box;
|
||||
-moz-user-select: auto;
|
||||
-webkit-user-select: auto;
|
||||
-o-user-select: auto;
|
||||
-ms-user-select: auto;
|
||||
user-select: auto;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
-o-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
/****************************************************** Ribbon set ***/
|
||||
.ribbon-set {
|
||||
@ -237,8 +238,8 @@ body {
|
||||
content: "";
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: auto;
|
||||
bottom: 5px;
|
||||
left: auto;
|
||||
@ -283,7 +284,7 @@ body {
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
* XXX account for flipping... */
|
||||
/*
|
||||
@mark-offset: -15px;
|
||||
@ribbon-mark-offset: -15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
@ -295,24 +296,24 @@ body {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
top: @mark-offset;
|
||||
right: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
|
||||
background: blue;
|
||||
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: @mark-offset;
|
||||
left: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="180"]:after {
|
||||
bottom: @mark-offset;
|
||||
left: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"]:after {
|
||||
bottom: @mark-offset;
|
||||
right: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
*/
|
||||
/* XXX should we use opacity??? */
|
||||
@ -646,7 +647,8 @@ body {
|
||||
.global-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.global-mode-indicators .circle {
|
||||
.global-mode-indicators .circle,
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
@ -678,12 +680,6 @@ body {
|
||||
.context-mode-indicators > * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* actual indicators */
|
||||
/* marks... */
|
||||
.global-mode-indicators .marked-only-visible,
|
||||
|
||||
@ -2,6 +2,16 @@
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
/******************************************************** Settings ***/
|
||||
|
||||
@ribbon-mark-offset: 5px;
|
||||
|
||||
@ribbon-mark-size: 10px;
|
||||
|
||||
@single-image-indicator-size: 10px;
|
||||
|
||||
|
||||
|
||||
/********************************************************** Mixins ***/
|
||||
|
||||
.user-select (@mode: auto) {
|
||||
@ -72,7 +82,7 @@ body {
|
||||
/*border: solid blue 1px;*/
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-select;
|
||||
.user-select(none);
|
||||
}
|
||||
|
||||
|
||||
@ -234,9 +244,6 @@ body {
|
||||
|
||||
/***************************************************** Image marks ***/
|
||||
|
||||
@mark-offset: 5px;
|
||||
@mark-size: 15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
@ -244,13 +251,13 @@ body {
|
||||
font-size: 0pt;
|
||||
border: none;
|
||||
|
||||
width: @mark-size;
|
||||
height: @mark-size;
|
||||
width: @ribbon-mark-size;
|
||||
height: @ribbon-mark-size;
|
||||
|
||||
top: auto;
|
||||
bottom: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: auto;
|
||||
right: @mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
|
||||
border-radius: 50%;
|
||||
background: blue;
|
||||
@ -260,19 +267,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: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
bottom: auto:
|
||||
left: auto;
|
||||
right: @mark-offset;
|
||||
right: @ribbon-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: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
bottom: auto;
|
||||
left: @mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"]:after,
|
||||
@ -281,8 +288,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: @mark-offset;
|
||||
left: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
right: auto;
|
||||
}
|
||||
|
||||
@ -294,7 +301,7 @@ body {
|
||||
/* corner mark... (a-la bookmarks in PortableMag)
|
||||
* XXX account for flipping... */
|
||||
/*
|
||||
@mark-offset: -15px;
|
||||
@ribbon-mark-offset: -15px;
|
||||
|
||||
.marks-visible.viewer .marked.image:after {
|
||||
display: block;
|
||||
@ -306,24 +313,24 @@ body {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
||||
top: @mark-offset;
|
||||
right: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
|
||||
background: blue;
|
||||
|
||||
.rotate(45deg)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: @mark-offset;
|
||||
left: @mark-offset;
|
||||
top: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="180"]:after {
|
||||
bottom: @mark-offset;
|
||||
left: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
left: @ribbon-mark-offset;
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="270"]:after {
|
||||
bottom: @mark-offset;
|
||||
right: @mark-offset;
|
||||
bottom: @ribbon-mark-offset;
|
||||
right: @ribbon-mark-offset;
|
||||
}
|
||||
*/
|
||||
|
||||
@ -594,10 +601,11 @@ body {
|
||||
.global-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.global-mode-indicators .circle {
|
||||
.global-mode-indicators .circle,
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
width: @single-image-indicator-size;
|
||||
height: @single-image-indicator-size;
|
||||
border-radius: 50%;
|
||||
}
|
||||
/* hide indicators in single image mode */
|
||||
@ -628,12 +636,6 @@ body {
|
||||
.context-mode-indicators>* {
|
||||
margin-left: 10px;
|
||||
}
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
|
||||
/* actual indicators */
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user