f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 11:32:39 +00:00
Code Wiki Activity

Fix to work with rotation and % offsets

Browse Source
This commit is contained in:
Trevor Buckner
2023-03-23 16:47:42 -04:00
parent 3b5aef7d71
commit c39a95f1e1
1 changed files with 20 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
themes/V3/Blank/style.less
View File

@@ -300,18 +300,20 @@ body {
} }
[class*="imageMaskCenter"] { [class*="imageMaskCenter"] {
width: 100%; width : 100%;
height: 100%; height : 100%;
bottom: 0; left : calc(var(--offsetX));
left: 0; bottom : calc(var(--offsetY));
transform: rotate(calc(1deg * var(--rotation))); -webkit-mask-image : var(--wc), var(--revealer);
-webkit-mask-position: calc(0% + var(--offsetX)) calc(0% + var(--offsetY)); -webkit-mask-repeat : no-repeat;
-webkit-mask-size: 100%; -webkit-mask-size : 100% 100%; //Scale both dimensions to fit page size
-webkit-mask-repeat: no-repeat; -webkit-mask-position : 0% 0%;
mask-position: center; mask-image : var(--wc), var(--revealer);
mask-size: 100%; mask-repeat : no-repeat;
mask-repeat: no-repeat; mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-position : 50% 50%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) { & > p:has(img) {
position : absolute; position : absolute;
width : 100%; width : 100%;
@@ -319,7 +321,10 @@ body {
bottom : 0; bottom : 0;
left : 0; left : 0;
transform : unset; transform : unset;
transition : transform 2s; transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY)));
} }
} }
@@ -351,7 +356,7 @@ body {
mask-repeat : no-repeat; mask-repeat : no-repeat;
mask-size : 100% 100%; //Scale both dimensions to fit page size mask-size : 100% 100%; //Scale both dimensions to fit page size
mask-position : 50% 50%; mask-position : 50% 50%;
transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));; transform : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
& > p:has(img) { & > p:has(img) {
width : 50%; width : 50%;
height : 50%; //Complex transform below to handle mix of % and cm offsets height : 50%; //Complex transform below to handle mix of % and cm offsets
@@ -359,7 +364,7 @@ body {
bottom : 25%; bottom : 25%;
transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) transform : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
rotate(calc(-1deg * var(--rotation))) rotate(calc(-1deg * var(--rotation)))
translateX(calc(-1 * var(--offsetX))) translateX(calc(-1 * var(--offsetX)))
translateY(calc(1 * var(--offsetY))); translateY(calc(1 * var(--offsetY)));
} }
} }