Make images local, change snippet to allow color instead of hue-rotate

client/homebrew/editor/snippetbar/snippets/watercolor.gen.js

@@ -1,20 +1,5 @@
 const _ = require('lodash');
 
-const watercolorBG = [
-	'https://i.imgur.com/UPUX4zG.png',
-	'https://i.imgur.com/Q6Uquv9.png',
-	'https://i.imgur.com/UOtaJpJ.png',
-	'https://i.imgur.com/Wy2DVk3.png',
-	'https://i.imgur.com/IempVlg.png',
-	'https://i.imgur.com/iJ1ddgd.png',
-	'https://i.imgur.com/qg4an04.png',
-	'https://i.imgur.com/ogGTcCh.png',
-	'https://i.imgur.com/itBD19A.png',
-	'https://i.imgur.com/tbbycAt.png',
-	'https://i.imgur.com/1SVWpGR.png',
-	'https://i.imgur.com/wC1zkuJ.png'
-];
-
 module.exports = ()=>{
-	return `\n![watercolor bg](${_.sample(watercolorBG)}) {watercolor,position:absolute,top:0px,left:0px,width:240px,filter:hue-rotate(0deg),mix-blend-mode:multiply,opacity:80%}\n`;
-};
+	return `{{watercolor${_.random(1, 12)},top:20px,left:30px,width:300px,background-color:#BBAD82,opacity:80%}}\n\n`;
+};

themes/5ePhb.style.less

@@ -9,6 +9,7 @@
 @headerText            : #58180D; // Dark maroon
 @monsterStatBackground : #EEDBAB; // Light orange parchment
 @captionText           : #766649; // Brown
+@watercolorStain       : #BBAD82; // Light brown
 @page { margin: 0; }
 body {
 	counter-reset : phb-page-numbers;
@@ -322,6 +323,42 @@ body {
 		}
 	}
 
+	/* Watercolor */
+	[class*="watercolor"] {
+		position            : absolute;
+		width               : 2000px;    /* dimensions need to be real big so the user can set */
+		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
+		-webkit-mask-image  : var(--wc);
+		-webkit-mask-size   : contain;
+		-webkit-mask-repeat : no-repeat;
+		mask-image          : var(--wc);
+		mask-size           : contain;
+		mask-repeat         : no-repeat;
+		background-size     : cover;
+		background-color    : @watercolorStain;			/*default color*/
+		--wc                : @watercolor1;         /*default image*/
+		z-index             : -2;
+	}
+
+	.watercolor1  { --wc : @watercolor1; }
+	.watercolor2  { --wc : @watercolor2; }
+	.watercolor3  { --wc : @watercolor3; }
+	.watercolor4  { --wc : @watercolor4; }
+	.watercolor5  { --wc : @watercolor5; }
+	.watercolor6  { --wc : @watercolor6; }
+	.watercolor7  { --wc : @watercolor7; }
+	.watercolor8  { --wc : @watercolor8; }
+	.watercolor9  { --wc : @watercolor9; }
+	.watercolor10 { --wc : @watercolor10; }
+	.watercolor11 { --wc : @watercolor11; }
+	.watercolor12 { --wc : @watercolor12; }
+
+	img {
+		z-index: 2 !important;
+		filter : drop-shadow(0px 6px 6px rgba(0,0,0,.4));
+		position: absolute;
+	}
+
 	//*****************************
 	// *    MONSTER STAT BLOCK
 	// *****************************/

themes/assets/assets.less

@@ -8,3 +8,18 @@
 @monsterBlockBackground   : data-uri('./themes/assets/parchmentBackgroundGrayscale.jpg');
 @monsterBorderImage       : data-uri('./themes/assets/monsterBorderFancy.png');
 @codeBorderImage          : data-uri('./themes/assets/codeBorder.png');
+
+// Watercolor Images
+
+@watercolor1  : data-uri('./themes/assets/watercolor/watercolor1.png');
+@watercolor2  : data-uri('./themes/assets/watercolor/watercolor2.png');
+@watercolor3  : data-uri('./themes/assets/watercolor/watercolor3.png');
+@watercolor4  : data-uri('./themes/assets/watercolor/watercolor4.png');
+@watercolor5  : data-uri('./themes/assets/watercolor/watercolor5.png');
+@watercolor6  : data-uri('./themes/assets/watercolor/watercolor6.png');
+@watercolor7  : data-uri('./themes/assets/watercolor/watercolor7.png');
+@watercolor8  : data-uri('./themes/assets/watercolor/watercolor8.png');
+@watercolor9  : data-uri('./themes/assets/watercolor/watercolor9.png');
+@watercolor10 : data-uri('./themes/assets/watercolor/watercolor10.png');
+@watercolor11 : data-uri('./themes/assets/watercolor/watercolor11.png');
+@watercolor12 : data-uri('./themes/assets/watercolor/watercolor12.png');