diff --git a/themes/V3/5ePHB/style.less b/themes/V3/5ePHB/style.less index 98b52788f..14404e8cf 100644 --- a/themes/V3/5ePHB/style.less +++ b/themes/V3/5ePHB/style.less @@ -725,24 +725,6 @@ body { } } -//***************************** -// * MUSTACHE DIVS/SPANS -// *****************************/ -.page { - .block { - break-inside : avoid; - display : inline-block; - .page :where(&) { - width : 100%; - } - //-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns - } - .inline-block { - display : inline-block; - text-indent : initial; - } -} - //***************************** // * DEFINITION LISTS // *****************************/ diff --git a/themes/V3/Blank/style.less b/themes/V3/Blank/style.less index 3b5829622..b8563e39f 100644 --- a/themes/V3/Blank/style.less +++ b/themes/V3/Blank/style.less @@ -177,13 +177,17 @@ body { width: 279.4mm; // Page height left:0px; bottom:0px; + --rotation : 0; --revealer : none; + --checkerboard : none; -webkit-mask-image : var(--wc), var(--revealer); -webkit-mask-repeat : no-repeat; -webkit-mask-size : 100% 100%; mask-image : var(--wc); mask-repeat : no-repeat; mask-size : 100% 100%; + background-image: var(--checkerboard); + background-size: 20px; z-index : -1; //background-image : url(/assets/watercolorMasks/testBackground.jpg); //background-size : 0px; // Hide the background so it can be inherited into :before @@ -201,37 +205,29 @@ body { & img { position : absolute; display : block; - } - &:before { - content:''; - position:absolute; - display:block; - height:100%; - width:100%; - bottom:0px; - background-image:inherit; - background-position: bottom 0px left 0px; - background-size:100% 100%; - background-repeat:no-repeat; - transform : rotate(calc(-1deg * var(--rotation))); - transition : transform 2s; + bottom : 0; } &.bottom { --rotation : 0; + & img {bottom: 0;} } &.top { --rotation : 180; + & img {top: 0;} } &.left { --rotation : 90; + & img {left: 0;} } &.right { --rotation : -90; left : unset; right : 0px; + & img {right: 0;} } &.revealImage { --revealer : linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(0,0,0,0.2)); + --checkerboard : url(/assets/waterColorMasks/missingImage.png); //shows any masked regions not filled by image } } @@ -290,9 +286,9 @@ body { .block { break-inside : avoid; display : inline-block; - .page :where(&) { - width : 100%; - } + } + & :where(.block) { + width : 100%; } .inline-block { display : inline-block; diff --git a/themes/assets/waterColorMasks/missingImage.png b/themes/assets/waterColorMasks/missingImage.png new file mode 100644 index 000000000..08dcb816c Binary files /dev/null and b/themes/assets/waterColorMasks/missingImage.png differ