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

migrating away from less...

Browse Source 
Signed-off-by: Alex A. Naanou <alex.nanou@gmail.com>
This commit is contained in:
Alex A. Naanou 2023-05-11 01:50:10 +03:00
parent 214c8d62c0
commit dcfd7d2561
1 changed files with 67 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
Viewer/css/layout.less → Viewer/css/layout.css
View File

@ -1,88 +1,25 @@
/********************************************************************** /**********************************************************************
* *
**********************************************************************/ *
********************************************************* Settings ***/
/******************************************************** Settings ***/
/* XXX might be a good idea to rename this to something more specific like imagegrid-viewer */ /* XXX might be a good idea to rename this to something more specific like imagegrid-viewer */
.viewer { .viewer {
--image-tile-size: 50vmin; --image-tile-size: 50vmin;
/* gen 2 */
--image-mark-size: calc(var(--image-tile-size) / 60); --image-mark-size: calc(var(--image-tile-size) / 60);
--image-border: calc(var(--image-tile-size) / 80); --image-border: calc(var(--image-tile-size) / 80);
--ribbon-margin: calc(var(--image-tile-size) / 30); --ribbon-margin: calc(var(--image-tile-size) / 30);
--ribbon-mark-offset: calc(var(--image-tile-size) / 200); --ribbon-mark-offset: calc(var(--image-tile-size) / 200);
--ribbon-mark-size: calc(var(--image-tile-size) / 30); --ribbon-mark-size: calc(var(--image-tile-size) / 30);
--single-image-indicator-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 ***/ /********************************************************* utility ***/
.expanding-text .hidden { .expanding-text .hidden {
display: none; display: none;
@ -596,7 +533,7 @@ button:hover {
/*border: solid blue 1px;*/ /*border: solid blue 1px;*/
box-sizing: border-box; box-sizing: border-box;
.user-select(none); user-select: none;
} }
/* XXX this is a stub for printing help/docs... */ /* XXX this is a stub for printing help/docs... */
@ -621,7 +558,7 @@ 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... */
.origin(top, left); transform-origin: top left;
will-change: transform; will-change: transform;
} }
@ -757,7 +694,7 @@ stretching in width... */
} }
.image { .image {
padding: @single-image-indicator-size; padding: var(--single-image-indicator-size);
} }
.image div { .image div {
display: block; display: block;
@ -861,8 +798,8 @@ stretching in width... */
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
.origin(center, center); transform-origin: center center;
.rotate(270deg); transform: rotate(270deg) scaleY(1) scaleX(1);
opacity: 0.5; opacity: 0.5;
} }
@ -891,13 +828,13 @@ stretching in width... */
/* image turning... */ /* image turning... */
/* NOTE: need to account for proportions after turning... */ /* NOTE: need to account for proportions after turning... */
.image[orientation="90"] { .image[orientation="90"] {
.rotate(90deg); transform: rotate(90deg) scaleY(1) scaleX(1);
} }
.image[orientation="180"] { .image[orientation="180"] {
.rotate(180deg); transform: rotate(180deg) scaleY(1) scaleX(1);
} }
.image[orientation="270"] { .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 combine different parts of a transform attr from different
classes */ classes */
.image[flipped*="vertical"] { .image[flipped*="vertical"] {
.flipped-vertically; transform: rotate(0deg) scaleY(1) scaleX(-1);
} }
.image[orientation="90"][flipped="vertical"] { .image[orientation="90"][flipped="vertical"] {
.transform(90deg, 1, -1) transform: rotate(90deg) scaleY(1) scaleX(-1)
} }
.image[orientation="180"][flipped="vertical"] { .image[orientation="180"][flipped="vertical"] {
.transform(180deg, 1, -1) transform: rotate(180deg) scaleY(1) scaleX(-1)
} }
.image[orientation="270"][flipped="vertical"] { .image[orientation="270"][flipped="vertical"] {
.transform(270deg, 1, -1) transform: rotate(270deg) scaleY(1) scaleX(-1)
} }
/* Flipped horizontally only... */ /* Flipped horizontally only... */
.image[flipped*="horizontal"] { .image[flipped*="horizontal"] {
.flipped-horizontally; transform: rotate(0deg) scaleY(-1) scaleX(1);
} }
.image[orientation="90"][flipped="horizontal"] { .image[orientation="90"][flipped="horizontal"] {
.transform(90deg, -1) .transform(90deg, -1)
@ -935,16 +872,16 @@ stretching in width... */
/* Flipped vertically and horizontally... */ /* Flipped vertically and horizontally... */
.image[flipped*="vertical"][flipped*="horizontal"] { .image[flipped*="vertical"][flipped*="horizontal"] {
.transform(0deg, -1, -1) transform: rotate(0deg) scaleY(-1) scaleX(-1)
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] { .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"] { .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"] { .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; background: blue;
.rotate(45deg) transform: rotate(45deg) scaleY(1) scaleX(1)
} }
.marks-visible.viewer .marked.image[orientation="90"]:after { .marks-visible.viewer .marked.image[orientation="90"]:after {
top: @ribbon-mark-offset; top: @ribbon-mark-offset;
@ -1183,7 +1120,7 @@ stretching in width... */
border-radius: calc(var(--image-tile-size)/100); border-radius: calc(var(--image-tile-size)/100);
.rotate(-45deg); transform: rotate(-45deg) scaleY(1) scaleX(1);
} }
.mark.marked:before { .mark.marked:before {
width: calc(var(--image-tile-size)/100); width: calc(var(--image-tile-size)/100);
@ -1278,7 +1215,7 @@ stretching in width... */
white-space: nowrap; white-space: nowrap;
} }
.inline-image-info:hover { .inline-image-info:hover {
.user-select(auto); user-select: auto;
} }
.inline-image-info::selection { .inline-image-info::selection {
color: white; color: white;
@ -1296,43 +1233,43 @@ stretching in width... */
.image[orientation="90"] .inline-image-info { .image[orientation="90"] .inline-image-info {
top: auto; top: auto;
left: 100%; left: 100%;
.origin(bottom, left); transform-origin: bottom left;
.rotate(-90deg); transform: rotate(-90deg) scaleY(1) scaleX(1);
} }
.image[orientation="180"] .inline-image-info { .image[orientation="180"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
.rotate(180deg); transform: rotate(180deg) scaleY(1) scaleX(1);
} }
.image[orientation="270"] .inline-image-info { .image[orientation="270"] .inline-image-info {
top: auto; top: auto;
left: auto; left: auto;
right: 100%; right: 100%;
.origin(bottom, right); transform-origin: bottom right;
.rotate(90deg); transform: rotate(90deg) scaleY(1) scaleX(1);
} }
/* 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... */
.image:not([orientation="90"])[flipped*="horizontal"] .inline-image-info { .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 { .image[orientation="90"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(90deg, -1, 1); transform: rotate(90deg) scaleY(-1) scaleX(1);
} }
.image[orientation="180"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: 0px; left: 0px;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(180deg, -1, 1); transform: rotate(180deg) scaleY(-1) scaleX(1);
} }
.image[orientation="270"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="horizontal"] .inline-image-info {
@ -1340,68 +1277,68 @@ stretching in width... */
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(270deg, -1, 1); transform: rotate(270deg) scaleY(-1) scaleX(1);
} }
.image[flipped*="vertical"] .inline-image-info { .image[flipped*="vertical"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
.flipped-vertically; transform: rotate(0deg) scaleY(1) scaleX(-1);
} }
.image[orientation="90"][flipped*="vertical"] .inline-image-info { .image[orientation="90"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: 100%; left: 100%;
right: auto; right: auto;
.origin(bottom, left); transform-origin: bottom left;
.transform(-270deg, 1, -1); transform: rotate(-270deg) scaleY(1) scaleX(-1);
} }
.image[orientation="180"][flipped*="vertical"] .inline-image-info { .image[orientation="180"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
bottom: 0px; bottom: 0px;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(180deg, 1, -1); transform: rotate(180deg) scaleY(1) scaleX(-1);
} }
.image[orientation="270"][flipped*="vertical"] .inline-image-info { .image[orientation="270"][flipped*="vertical"] .inline-image-info {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(270deg, 1, -1); transform: rotate(270deg) scaleY(1) scaleX(-1);
} }
.image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: 0px; top: 0px;
bottom: auto; bottom: auto;
.transform(0deg, -1, -1); transform: rotate(0deg) scaleY(-1) scaleX(-1);
} }
.image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="90"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
bottom: 0px; bottom: 0px;
left: -100%; left: -100%;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(-90deg, -1, -1); transform: rotate(-90deg) scaleY(-1) scaleX(-1);
} }
.image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="180"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
bottom: 0px; bottom: 0px;
left: auto; left: auto;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(180deg, -1, -1); transform: rotate(180deg) scaleY(-1) scaleX(-1);
} }
.image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info { .image[orientation="270"][flipped*="vertical"][flipped*="horizontal"] .inline-image-info {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
left: auto; left: auto;
right: auto; right: auto;
.origin(bottom, right); transform-origin: bottom right;
.transform(90deg, -1, -1); transform: rotate(90deg) scaleY(-1) scaleX(-1);
} }
/* XXX END */ /* XXX END */
@ -1431,7 +1368,7 @@ stretching in width... */
float: left; float: left;
} }
.overlay-info:hover { .overlay-info:hover {
.user-select(auto); user-select: auto;
} }
.overlay-info .spacer { .overlay-info .spacer {
opacity: 0.5, opacity: 0.5,
@ -1466,10 +1403,12 @@ stretching in width... */
.overlay-info.minimal { .overlay-info.minimal {
background: transparent; background: transparent;
/*
//background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%); //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: -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%); //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 ); //filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#b5000000',GradientType=0 );
*/
} }
.overlay-info.minimal .full-only { .overlay-info.minimal .full-only {
display: none; display: none;
@ -1511,12 +1450,12 @@ stretching in width... */
margin-top: 4px; margin-top: 4px;
margin-bottom: 4px; margin-bottom: 4px;
//margin-right: 10px; /*margin-right: 10px;*/
width: 10px; width: 10px;
height: 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; box-sizing: border-box;
border-radius: 50%; border-radius: 50%;
@ -1537,7 +1476,7 @@ stretching in width... */
border-radius: 3px; border-radius: 3px;
.rotate(-45deg); transform: rotate(-45deg) scaleY(1) scaleX(1);
} }
.overlay-info .marked:before { .overlay-info .marked:before {
width: 3px; width: 3px;
@ -1606,12 +1545,12 @@ stretching in width... */
here as we need to control both the uniform shading and here as we need to control both the uniform shading and
placement without overcomplicating things when having placement without overcomplicating things when having
to compensate for alignment... */ to compensate for alignment... */
//border-bottom: solid 2px yellow; /*border-bottom: solid 2px yellow;*/
box-shadow: 0 -2px 0 0 yellow inset; box-shadow: 0 -2px 0 0 yellow inset;
} }
.overlay-info .ribbon-count { .overlay-info .ribbon-count {
opacity: 0.7; opacity: 0.7;
//font-size: small; /*font-size: small;*/
} }
.overlay-info .ribbon-count:not(:empty):before { .overlay-info .ribbon-count:not(:empty):before {
content: "/"; content: "/";
@ -1703,7 +1642,7 @@ stretching in width... */
background: yellow; background: yellow;
.rotate(45deg); transform: rotate(45deg) scaleY(1) scaleX(1);
} }
.down-indicator { .down-indicator {
top: auto; top: auto;
@ -1794,8 +1733,8 @@ stretching in width... */
.global-mode-indicators .circle, .global-mode-indicators .circle,
.context-mode-indicators .circle { .context-mode-indicators .circle {
display: inline-block; display: inline-block;
width: @single-image-indicator-size; width: var(--single-image-indicator-size);
height: @single-image-indicator-size; height: var(--single-image-indicator-size);
border-radius: 50%; border-radius: 50%;
} }
@ -1944,7 +1883,7 @@ stretching in width... */
width: 100%; width: 100%;
height: calc(var(--image-tile-size)/50); height: calc(var(--image-tile-size)/50);
top: 101%; top: 101%;
//left: -100%; /*left: -100%;*/
background: yellow; 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) .mark:after,
.large.viewer:not(.single-image-mode) .marked.image: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) .mark:after,
.small.viewer:not(.single-image-mode) .marked.image: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; color: white;
font-size: small; font-size: small;
.user-select(auto); user-select: auto;
} }
.overlay-block .dialog table tr td:first-child { .overlay-block .dialog table tr td:first-child {
text-align: right; text-align: right;