From e1d003ed16d71da664688cda46fc17ce594d3e44 Mon Sep 17 00:00:00 2001 From: OVSharova Date: Thu, 21 Sep 2023 01:27:15 +0300 Subject: [PATCH 1/2] Bug 64007 --- .../main/resources/less/dimension-picker.less | 35 +++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/apps/common/main/resources/less/dimension-picker.less b/apps/common/main/resources/less/dimension-picker.less index c16bde18cb..51413429d2 100644 --- a/apps/common/main/resources/less/dimension-picker.less +++ b/apps/common/main/resources/less/dimension-picker.less @@ -12,26 +12,33 @@ position: absolute !important; } -.background-cells-all(@border-color, @fill-Color, @first-coord, @last-coord, @background-color: @background-normal){ +.background-cells-all(@border-color, @fill-Color, @first-coord, @background-color: @background-normal){ - background: linear-gradient( 90deg, @background-color, @background-color @first-coord, transparent @first-coord, transparent @last-coord, @background-color @last-coord, @background-color), - linear-gradient( @background-color, @background-color @first-coord, transparent @first-coord, transparent @last-coord, @background-color @last-coord, @background-color), - linear-gradient( 90deg, transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, transparent 2px, transparent 18px, @border-color 18px, @border-color @last-coord, transparent @last-coord, transparent), - linear-gradient( transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, @fill-Color 2px, @fill-Color 18px, @border-color 18px, @border-color @last-coord, transparent @last-coord, transparent ); + background: + linear-gradient( 90deg, @background-color, @background-color @first-coord, transparent @first-coord), + linear-gradient( to left, @background-color, @background-color @first-coord, transparent @first-coord), + linear-gradient( to top, @background-color, @background-color @first-coord, transparent @first-coord), + linear-gradient( @background-color, @background-color @first-coord, transparent @first-coord), + linear-gradient( to right, transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, transparent 2px), + linear-gradient( to left, transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, transparent 2px), + linear-gradient( to top, transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, transparent 2px ), + linear-gradient( transparent, transparent @first-coord, @border-color @first-coord, @border-color 2px, @fill-Color 2px ); background-size: 1em 1em; } - .background-cells(@border-color, @fill-Color, @size-one-pixel: @scaled-one-px-value){ @first-coord: calc(2px - @size-one-pixel); - @last-coord: calc(18px + @size-one-pixel); - .background-cells-all(@border-color, @fill-Color, @first-coord, @last-coord); + .background-cells-all(@border-color, @fill-Color, @first-coord); } .background-cells-ie(@border-color, @fill-Color){ - .background-cells-all(@border-color, @fill-Color, @scaled-one-px-value-ie, 19px, @background-normal-ie); + background: + linear-gradient( 90deg, @background-normal-ie, @background-normal-ie @scaled-one-px-value-ie, transparent @scaled-one-px-value-ie, transparent 19px, @background-normal-ie 19px, @background-normal-ie), + linear-gradient( @background-normal-ie, @background-normal-ie @scaled-one-px-value-ie, transparent @scaled-one-px-value-ie, transparent 19px, @background-normal-ie 19px, @background-normal-ie), + linear-gradient( 90deg, transparent, transparent @scaled-one-px-value-ie, @border-color @scaled-one-px-value-ie, @border-color 2px, transparent 2px, transparent 18px, @border-color 18px, @border-color 19px, transparent 19px, transparent), + linear-gradient( transparent, transparent @scaled-one-px-value-ie, @border-color @scaled-one-px-value-ie, @border-color 2px, @fill-Color 2px, @fill-Color 18px, @border-color 18px, @border-color 19px, transparent 19px, transparent ); + background-size: 1em 1em; } - .dimension-picker div.dimension-picker-highlighted { left: 0; top: 0; @@ -39,10 +46,10 @@ position: absolute; .background-cells-ie(@border-control-focus-ie, @highlight-button-pressed-ie); - &:not(.pixel-ratio__2){ + &:not(.pixel-ratio__2), &:not(.pixel-ratio__2_5){ .background-cells(@border-control-focus, @highlight-button-pressed); } - .pixel-ratio__2 &{ + .pixel-ratio__2 &, .pixel-ratio__2_5 &{ .background-cells(@border-control-focus, @highlight-button-pressed, 0.5px); } } @@ -51,10 +58,10 @@ .background-cells-ie(@border-regular-control-ie, @background-normal-ie); - &:not(.pixel-ratio__2){ + &:not(.pixel-ratio__2), &:not(.pixel-ratio__2_5){ .background-cells(@border-regular-control, @background-normal); } - .pixel-ratio__2 &{ + .pixel-ratio__2 &, .pixel-ratio__2_5 &{ .background-cells(@border-regular-control, @background-normal, 0.5px); } } From dcca13a38ffdab2566dfae472cb61e1d0051b7dd Mon Sep 17 00:00:00 2001 From: OVSharova Date: Tue, 26 Sep 2023 02:01:31 +0300 Subject: [PATCH 2/2] Bug 64007 refactoring --- .../main/resources/less/dimension-picker.less | 40 +++++++++++-------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/apps/common/main/resources/less/dimension-picker.less b/apps/common/main/resources/less/dimension-picker.less index 51413429d2..d06ba666d5 100644 --- a/apps/common/main/resources/less/dimension-picker.less +++ b/apps/common/main/resources/less/dimension-picker.less @@ -26,8 +26,27 @@ background-size: 1em 1em; } .background-cells(@border-color, @fill-Color, @size-one-pixel: @scaled-one-px-value){ - @first-coord: calc(2px - @size-one-pixel); - .background-cells-all(@border-color, @fill-Color, @first-coord); + @media only screen { + @media(-webkit-max-device-pixel-ratio: 1.9), + (max-resolution: 1.9dppx), + (max-resolution: 191dpi) + { + .background-cells-all(@border-color, @fill-Color, calc(2px - @size-one-pixel)); + } + + @media (-webkit-min-device-pixel-ratio: 2), + (min-resolution: 2dppx), + (min-resolution: 192dpi) + { + .background-cells-all(@border-color, @fill-Color, 1.5px); + } + @media (-webkit-device-pixel-ratio: 3), + (resolution: 3dppx), + (resolution: 288dpi) + { + .background-cells-all(@border-color, @fill-Color, 1.33px); + } + } } .background-cells-ie(@border-color, @fill-Color){ @@ -44,26 +63,13 @@ top: 0; overflow: hidden; position: absolute; - .background-cells-ie(@border-control-focus-ie, @highlight-button-pressed-ie); - &:not(.pixel-ratio__2), &:not(.pixel-ratio__2_5){ - .background-cells(@border-control-focus, @highlight-button-pressed); - } - .pixel-ratio__2 &, .pixel-ratio__2_5 &{ - .background-cells(@border-control-focus, @highlight-button-pressed, 0.5px); - } + .background-cells(@border-control-focus, @highlight-button-pressed); } .dimension-picker-unhighlighted { - .background-cells-ie(@border-regular-control-ie, @background-normal-ie); - - &:not(.pixel-ratio__2), &:not(.pixel-ratio__2_5){ - .background-cells(@border-regular-control, @background-normal); - } - .pixel-ratio__2 &, .pixel-ratio__2_5 &{ - .background-cells(@border-regular-control, @background-normal, 0.5px); - } + .background-cells(@border-regular-control, @background-normal); } .dimension-picker-status {