From dcfd7d256128137ea4a8d9a9fa20b537118723e9 Mon Sep 17 00:00:00 2001 From: "Alex A. Naanou" Date: Thu, 11 May 2023 01:50:10 +0300 Subject: [PATCH] migrating away from less... Signed-off-by: Alex A. Naanou --- Viewer/css/{layout.less => layout.css} | 195 +++++++++---------------- 1 file changed, 67 insertions(+), 128 deletions(-) rename Viewer/css/{layout.less => layout.css} (89%) diff --git a/Viewer/css/layout.less b/Viewer/css/layout.css similarity index 89% rename from Viewer/css/layout.less rename to Viewer/css/layout.css index 80d194f1..ed924f41 100755 --- a/Viewer/css/layout.less +++ b/Viewer/css/layout.css @@ -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;