mirror of
https://github.com/flynx/ImageGrid.git
synced 2025-10-28 18:00:09 +00:00
migrating away from less...
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
parent
214c8d62c0
commit
dcfd7d2561
@ -1,88 +1,25 @@
|
||||
/**********************************************************************
|
||||
*
|
||||
**********************************************************************/
|
||||
|
||||
/******************************************************** Settings ***/
|
||||
*
|
||||
********************************************************* Settings ***/
|
||||
|
||||
/* XXX might be a good idea to rename this to something more specific like imagegrid-viewer */
|
||||
.viewer {
|
||||
--image-tile-size: 50vmin;
|
||||
|
||||
|
||||
/* gen 2 */
|
||||
--image-mark-size: calc(var(--image-tile-size) / 60);
|
||||
--image-border: calc(var(--image-tile-size) / 80);
|
||||
|
||||
--ribbon-margin: calc(var(--image-tile-size) / 30);
|
||||
--ribbon-mark-offset: calc(var(--image-tile-size) / 200);
|
||||
--ribbon-mark-size: calc(var(--image-tile-size) / 30);
|
||||
|
||||
--single-image-indicator-size: calc(var(--image-tile-size) / 30);
|
||||
}
|
||||
|
||||
|
||||
// new style config...
|
||||
|
||||
//@image-tile-size: 300px;
|
||||
//@image-tile-size: 600px;
|
||||
// Experimental...
|
||||
@image-tile-size: 50vmin;
|
||||
//@image-tile-size: 100vmax;
|
||||
|
||||
@image-mark-size: @image-tile-size/60;
|
||||
|
||||
// these are relative to image tile size...
|
||||
//@image-border: @image-tile-size/200;
|
||||
@image-border: @image-tile-size/80;
|
||||
@ribbon-margin: @image-tile-size/30;
|
||||
@ribbon-mark-offset: @image-tile-size/200;
|
||||
|
||||
@ribbon-mark-size: @image-tile-size/30;
|
||||
@single-image-indicator-size: @image-tile-size/30;
|
||||
|
||||
|
||||
|
||||
/********************************************************** Mixins ***/
|
||||
|
||||
.user-select (@mode: auto) {
|
||||
user-select: @mode;
|
||||
}
|
||||
|
||||
|
||||
.origin (@x:top, @y:left) {
|
||||
transform-origin: @arguments;
|
||||
}
|
||||
|
||||
|
||||
.transform (@deg:0deg, @scaleX:1, @scaleY:1) {
|
||||
transform: rotate(@deg) scaleY(@scaleY) scaleX(@scaleX);
|
||||
|
||||
/* This prevents elements from aligning to sub-pixels...*/
|
||||
/*
|
||||
-webkit-transform-style: preserve-3d;
|
||||
-moz-transform-style: preserve-3d;
|
||||
transform-style: preserve-3d;
|
||||
*/
|
||||
|
||||
}
|
||||
.scale (@scale) {
|
||||
.transform(0deg, @scale, @scale)
|
||||
}
|
||||
.rotate (@deg) {
|
||||
.transform(@deg)
|
||||
}
|
||||
.flipped-vertically () {
|
||||
.transform(0deg, 1, -1)
|
||||
}
|
||||
.flipped-horizontally () {
|
||||
.transform(0deg, -1, 1)
|
||||
}
|
||||
|
||||
.transition (@attr:all, @t:0.2s, @easing:ease) {
|
||||
-webkit-transition: @attr @t @easing;
|
||||
-moz-transition: @attr @t @easing;
|
||||
-o-transition: @attr @t @easing;
|
||||
-ms-transition: @attr @t @easing;
|
||||
transition: @attr @t @easing;
|
||||
}
|
||||
|
||||
|
||||
/********************************************************* utility ***/
|
||||
.expanding-text .hidden {
|
||||
display: none;
|
||||
@ -596,7 +533,7 @@ button:hover {
|
||||
/*border: solid blue 1px;*/
|
||||
box-sizing: border-box;
|
||||
|
||||
.user-select(none);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* XXX this is a stub for printing help/docs... */
|
||||
@ -621,7 +558,7 @@ button:hover {
|
||||
shift the element, when its dimensions change...
|
||||
...this is because .ribbon-set will both be used for scaling
|
||||
and aligning... */
|
||||
.origin(top, left);
|
||||
transform-origin: top left;
|
||||
|
||||
will-change: transform;
|
||||
}
|
||||
@ -757,7 +694,7 @@ stretching in width... */
|
||||
}
|
||||
|
||||
.image {
|
||||
padding: @single-image-indicator-size;
|
||||
padding: var(--single-image-indicator-size);
|
||||
}
|
||||
.image div {
|
||||
display: block;
|
||||
@ -861,8 +798,8 @@ stretching in width... */
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
|
||||
.origin(center, center);
|
||||
.rotate(270deg);
|
||||
transform-origin: center center;
|
||||
transform: rotate(270deg) scaleY(1) scaleX(1);
|
||||
|
||||
opacity: 0.5;
|
||||
}
|
||||
@ -891,13 +828,13 @@ stretching in width... */
|
||||
/* image turning... */
|
||||
/* NOTE: need to account for proportions after turning... */
|
||||
.image[orientation="90"] {
|
||||
.rotate(90deg);
|
||||
transform: rotate(90deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.image[orientation="180"] {
|
||||
.rotate(180deg);
|
||||
transform: rotate(180deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.image[orientation="270"] {
|
||||
.rotate(270deg);
|
||||
transform: rotate(270deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
@ -906,22 +843,22 @@ stretching in width... */
|
||||
combine different parts of a transform attr from different
|
||||
classes */
|
||||
.image[flipped*="vertical"] {
|
||||
.flipped-vertically;
|
||||
transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="90"][flipped="vertical"] {
|
||||
.transform(90deg, 1, -1)
|
||||
transform: rotate(90deg) scaleY(1) scaleX(-1)
|
||||
}
|
||||
.image[orientation="180"][flipped="vertical"] {
|
||||
.transform(180deg, 1, -1)
|
||||
transform: rotate(180deg) scaleY(1) scaleX(-1)
|
||||
}
|
||||
.image[orientation="270"][flipped="vertical"] {
|
||||
.transform(270deg, 1, -1)
|
||||
transform: rotate(270deg) scaleY(1) scaleX(-1)
|
||||
}
|
||||
|
||||
|
||||
/* Flipped horizontally only... */
|
||||
.image[flipped*="horizontal"] {
|
||||
.flipped-horizontally;
|
||||
transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||
}
|
||||
.image[orientation="90"][flipped="horizontal"] {
|
||||
.transform(90deg, -1)
|
||||
@ -935,16 +872,16 @@ stretching in width... */
|
||||
|
||||
/* Flipped vertically and horizontally... */
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(0deg, -1, -1)
|
||||
transform: rotate(0deg) scaleY(-1) scaleX(-1)
|
||||
}
|
||||
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(90deg, -1, -1)
|
||||
transform: rotate(90deg) scaleY(-1) scaleX(-1)
|
||||
}
|
||||
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(180deg, -1, -1)
|
||||
transform: rotate(180deg) scaleY(-1) scaleX(-1)
|
||||
}
|
||||
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] {
|
||||
.transform(270deg, -1, -1)
|
||||
transform: rotate(270deg) scaleY(-1) scaleX(-1)
|
||||
}
|
||||
|
||||
|
||||
@ -1091,7 +1028,7 @@ stretching in width... */
|
||||
|
||||
background: blue;
|
||||
|
||||
.rotate(45deg)
|
||||
transform: rotate(45deg) scaleY(1) scaleX(1)
|
||||
}
|
||||
.marks-visible.viewer .marked.image[orientation="90"]:after {
|
||||
top: @ribbon-mark-offset;
|
||||
@ -1183,7 +1120,7 @@ stretching in width... */
|
||||
|
||||
border-radius: calc(var(--image-tile-size)/100);
|
||||
|
||||
.rotate(-45deg);
|
||||
transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.mark.marked:before {
|
||||
width: calc(var(--image-tile-size)/100);
|
||||
@ -1278,7 +1215,7 @@ stretching in width... */
|
||||
white-space: nowrap;
|
||||
}
|
||||
.inline-image-info:hover {
|
||||
.user-select(auto);
|
||||
user-select: auto;
|
||||
}
|
||||
.inline-image-info::selection {
|
||||
color: white;
|
||||
@ -1296,43 +1233,43 @@ stretching in width... */
|
||||
.image[orientation="90"] .inline-image-info {
|
||||
top: auto;
|
||||
left: 100%;
|
||||
.origin(bottom, left);
|
||||
.rotate(-90deg);
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-90deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.image[orientation="180"] .inline-image-info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
.rotate(180deg);
|
||||
transform: rotate(180deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.image[orientation="270"] .inline-image-info {
|
||||
top: auto;
|
||||
left: auto;
|
||||
right: 100%;
|
||||
.origin(bottom, right);
|
||||
.rotate(90deg);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(90deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
|
||||
|
||||
/* compensate for flipping... */
|
||||
/* XXX START: I hate this code, will think if a better way to do this... */
|
||||
.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info {
|
||||
.flipped-horizontally;
|
||||
transform: rotate(0deg) scaleY(-1) scaleX(1);
|
||||
}
|
||||
.image[orientation="90"][flipped*="horizontal"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: -100%;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(90deg, -1, 1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(90deg) scaleY(-1) scaleX(1);
|
||||
}
|
||||
.image[orientation="180"][flipped*="horizontal"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 0px;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(180deg, -1, 1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(180deg) scaleY(-1) scaleX(1);
|
||||
|
||||
}
|
||||
.image[orientation="270"][flipped*="horizontal"] .inline-image-info {
|
||||
@ -1340,68 +1277,68 @@ stretching in width... */
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(270deg, -1, 1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(270deg) scaleY(-1) scaleX(1);
|
||||
}
|
||||
|
||||
.image[flipped*="vertical"] .inline-image-info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
.flipped-vertically;
|
||||
transform: rotate(0deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="90"][flipped*="vertical"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: 100%;
|
||||
right: auto;
|
||||
.origin(bottom, left);
|
||||
.transform(-270deg, 1, -1);
|
||||
transform-origin: bottom left;
|
||||
transform: rotate(-270deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="180"][flipped*="vertical"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
left: -100%;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(180deg, 1, -1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(180deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="270"][flipped*="vertical"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: -100%;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(270deg, 1, -1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(270deg) scaleY(1) scaleX(-1);
|
||||
}
|
||||
|
||||
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||
top: 0px;
|
||||
bottom: auto;
|
||||
.transform(0deg, -1, -1);
|
||||
transform: rotate(0deg) scaleY(-1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
left: -100%;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(-90deg, -1, -1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(-90deg) scaleY(-1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 0px;
|
||||
left: auto;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(180deg, -1, -1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(180deg) scaleY(-1) scaleX(-1);
|
||||
}
|
||||
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
left: auto;
|
||||
right: auto;
|
||||
.origin(bottom, right);
|
||||
.transform(90deg, -1, -1);
|
||||
transform-origin: bottom right;
|
||||
transform: rotate(90deg) scaleY(-1) scaleX(-1);
|
||||
}
|
||||
/* XXX END */
|
||||
|
||||
@ -1431,7 +1368,7 @@ stretching in width... */
|
||||
float: left;
|
||||
}
|
||||
.overlay-info:hover {
|
||||
.user-select(auto);
|
||||
user-select: auto;
|
||||
}
|
||||
.overlay-info .spacer {
|
||||
opacity: 0.5,
|
||||
@ -1466,10 +1403,12 @@ stretching in width... */
|
||||
|
||||
.overlay-info.minimal {
|
||||
background: transparent;
|
||||
/*
|
||||
//background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
|
||||
//background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
|
||||
//background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
|
||||
//filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b5000000',GradientType=0 );
|
||||
*/
|
||||
}
|
||||
.overlay-info.minimal .full-only {
|
||||
display: none;
|
||||
@ -1511,12 +1450,12 @@ stretching in width... */
|
||||
|
||||
margin-top: 4px;
|
||||
margin-bottom: 4px;
|
||||
//margin-right: 10px;
|
||||
/*margin-right: 10px;*/
|
||||
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
|
||||
//box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);
|
||||
/*box-shadow: 1px 1px 10px -2px rgba(0,0,0,0.7);*/
|
||||
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
@ -1537,7 +1476,7 @@ stretching in width... */
|
||||
|
||||
border-radius: 3px;
|
||||
|
||||
.rotate(-45deg);
|
||||
transform: rotate(-45deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.overlay-info .marked:before {
|
||||
width: 3px;
|
||||
@ -1606,12 +1545,12 @@ stretching in width... */
|
||||
here as we need to control both the uniform shading and
|
||||
placement without overcomplicating things when having
|
||||
to compensate for alignment... */
|
||||
//border-bottom: solid 2px yellow;
|
||||
/*border-bottom: solid 2px yellow;*/
|
||||
box-shadow: 0 -2px 0 0 yellow inset;
|
||||
}
|
||||
.overlay-info .ribbon-count {
|
||||
opacity: 0.7;
|
||||
//font-size: small;
|
||||
/*font-size: small;*/
|
||||
}
|
||||
.overlay-info .ribbon-count:not(:empty):before {
|
||||
content: "/";
|
||||
@ -1703,7 +1642,7 @@ stretching in width... */
|
||||
|
||||
background: yellow;
|
||||
|
||||
.rotate(45deg);
|
||||
transform: rotate(45deg) scaleY(1) scaleX(1);
|
||||
}
|
||||
.down-indicator {
|
||||
top: auto;
|
||||
@ -1794,8 +1733,8 @@ stretching in width... */
|
||||
.global-mode-indicators .circle,
|
||||
.context-mode-indicators .circle {
|
||||
display: inline-block;
|
||||
width: @single-image-indicator-size;
|
||||
height: @single-image-indicator-size;
|
||||
width: var(--single-image-indicator-size);
|
||||
height: var(--single-image-indicator-size);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
@ -1944,7 +1883,7 @@ stretching in width... */
|
||||
width: 100%;
|
||||
height: calc(var(--image-tile-size)/50);
|
||||
top: 101%;
|
||||
//left: -100%;
|
||||
/*left: -100%;*/
|
||||
|
||||
background: yellow;
|
||||
|
||||
@ -2227,12 +2166,12 @@ progress:not(value)::-webkit-progress-bar {
|
||||
}
|
||||
.large.viewer:not(.single-image-mode) .mark:after,
|
||||
.large.viewer:not(.single-image-mode) .marked.image:after {
|
||||
.scale(0.7);
|
||||
transform: rotate(0deg) scaleY(0.7) scaleX(0.7);
|
||||
}
|
||||
|
||||
.small.viewer:not(.single-image-mode) .mark:after,
|
||||
.small.viewer:not(.single-image-mode) .marked.image:after {
|
||||
.scale(1.5);
|
||||
transform: rotate(0deg) scaleY(1.5) scaleX(1.5);
|
||||
}
|
||||
|
||||
|
||||
@ -2333,7 +2272,7 @@ progress:not(value)::-webkit-progress-bar {
|
||||
color: white;
|
||||
font-size: small;
|
||||
|
||||
.user-select(auto);
|
||||
user-select: auto;
|
||||
}
|
||||
.overlay-block .dialog table tr td:first-child {
|
||||
text-align: right;
|
||||
Loading…
x
Reference in New Issue
Block a user